/* ─── mobile.css · responsive Layer fuer bimo.rocks ────────────────
 * 2026-07-05: durchdachte Mobile-Version (Session-Ziel). Zwei Breakpoints:
 *   <= 1100px  Tablet — Grid halbiert, Hero kompakter
 *   <= 720px   Phone  — eine Spalte, Hero minimal, Drawer/Kalender Vollbild
 * Desktop bleibt pixel-identisch (alle Regeln nur in Media Queries).
 */

/* ═══ Tablet ═══════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .grid { padding: 14px 18px 20px; gap: 12px; }
  /* Inline `grid-column: span N` der Cards ueberstimmen: 2 Spalten. */
  .grid > .card,
  .grid > .chat { grid-column: 1 / -1 !important; }
  .grid > #card-termine,
  .grid > #card-todos { grid-column: span 6 !important; }

  .hero { gap: 20px; padding: 12px 20px 16px; }
  .hero-headline { font-size: clamp(1.2rem, 3.5vw, 1.8rem); }
}

/* ═══ Phone ════════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* Topbar: Suche raus aus der absoluten Mitte, eigene Zeile darunter */
  .topbar {
    display: flex; flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
  }
  .search-group {
    position: static !important;
    transform: none !important;
    order: 10;
    flex-basis: 100%;
  }
  .search-pill--web { width: 100%; }
  .topbar-right { margin-left: auto; }

  /* Hero: grosses Face raus (Mini-Face sitzt in der Topbar, main.js),
     Gruss + Briefing kompakt nebeneinander, alles linksbuendig. */
  .hero {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "left right";
    gap: 8px 14px;
    padding: 6px 16px 8px;
    align-items: start;
  }
  .hero-center { display: none; }
  .hero-col--left,
  .hero-col--right {
    text-align: left;            /* Desktop richtet links rechts aus -> wirkt auf Phone zentriert */
    max-width: none;
  }
  .hero-col--left  { grid-area: left;  justify-self: start; }
  .hero-col--right { grid-area: right; justify-self: start; }
  .hero-headline { font-size: 1rem; line-height: 1.25; margin: 0.15em 0; }
  .hero-meta { font-size: 0.6rem; }
  .hero-tag { font-size: 0.55rem; }

  /* Mini-BMO neben dem Brand */
  .bmo-mini {
    display: inline-flex;
    width: 40px; height: 40px;
    margin-left: 10px;
    vertical-align: middle;
  }
  .brand { display: inline-flex; align-items: center; }

  /* Grid: alles einspaltig, Reihenfolge mobiletauglich:
     Chat (BMO) zuerst, dann Termine/Todos/Notizen, Rest danach. */
  .grid {
    padding: 10px 12px 16px;
    gap: 10px;
    display: flex; flex-direction: column;
  }
  /* Chat: nicht als leeres schwarzes Loch starten -- kompakt beginnen,
     bei Inhalt bis max. halber Screen. Desktop pinnt .chat auf 32vh
     (Row-Fluchtung) -- auf Phone gibt's keine Row, also aufheben. */
  .grid > #bmo-chat   {
    order: 1;
    height: auto !important;
    min-height: 210px !important;
    max-height: 48vh !important;
  }

  /* Termine/Todos: Desktop pinnt beide auf 32vh (Row-Fluchtung mit dem
     Chat). Auf Phone gibt's keine Row -- Karte waechst mit dem Inhalt,
     lange Listen scrollen intern ab ~55vh statt die Seite zu sprengen. */
  #card-termine,
  #card-todos {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .termine-list,
  .todos-list {
    flex: 0 1 auto;
    max-height: 55vh;
    overflow-y: auto;
  }
  .chat-msgs:empty::before {
    content: 'Sag hallo zu BMO …';
    display: block;
    margin: auto;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--text-dim, rgba(230,228,223,0.3));
  }
  .grid > #card-termine { order: 2; }
  .grid > #card-todos   { order: 3; }
  .grid > .card         { order: 4; }
  .grid > .card--slim   { order: 5; }

  /* Touch-Ziele vergroessern */
  .widget-row-btn { width: 30px; height: 30px; }
  .widget-row-actions { opacity: 0.8; }
  .card__open { width: 30px; height: 30px; }
  .todo__box { transform: scale(1.15); }
  .composer__btn { min-width: 38px; min-height: 38px; }
  .quickadd__input { font-size: 16px; padding: 10px 12px; }
  /* iOS zoomt bei Inputs < 16px rein -- alle Formfelder anheben */
  .manager__input, .composer__input, .search-pill__input { font-size: 16px; }

  /* Drawer = Vollbild-Sheet */
  .drawer, .drawer--xl { width: 100%; border-left: none; }
  .manager__form { grid-template-columns: 1fr 1fr; }
  .manager__field.span-2, .manager__field.span-3 { grid-column: 1 / -1; }
  .manager__input--markdown { min-height: 220px; }

  /* Kalender-Vollbild: kompakte Zellen */
  .calview__head { padding: 10px 12px; }
  .calview__body { padding: 8px 8px 12px; }
  .calview__grid { gap: 2px; }
  .calview__grid.month { grid-template-rows: auto repeat(6, minmax(64px, 1fr)); }
  .calview__day { padding: 3px 4px; border-radius: 6px; }
  .calview__chip { font-size: 9px; padding: 1px 4px; }
  .calview__title { font-size: 13px; margin-left: 4px; }
  .calview__btn { padding: 4px 9px; font-size: 12px; }

  /* Familie: eine Spalte */
  .fam-grid { grid-template-columns: 1fr !important; display: grid; gap: 12px; }

  /* Nexus-Links: kompakte 3er-Reihen statt 6 Riesen-Kacheln */
  .nexus-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .nexus-tile {
    padding: 8px 8px;
    border-radius: 8px;
    gap: 4px;
  }
  .nexus-tile__icon svg { width: 14px; height: 14px; }
  .nexus-tile__name { font-size: 11px; }
  .nexus-tile__meta { font-size: 8.5px; }

  /* Monitor-Footer: schrumpfen, Nebensache auf Mobile */
  .monitor {
    flex-wrap: wrap; gap: 8px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    font-size: 10.5px;
  }
  .monitor__sep { display: none; }

  /* Toast mittig unten, ueber Daumenzone */
  .bimo-toast {
    left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom));
    justify-content: space-between;
  }

  /* Login-Card atmet */
  .login-card { padding: 1.6rem 1.4rem; }
}

/* ═══ Standalone (vom Homescreen installiert) ══════════════ */
@media (display-mode: standalone) {
  .topbar { padding-top: calc(10px + env(safe-area-inset-top)); }
}