/* ================================================================
   LifeOn Central — mein-tag.css
   mein-tag.css — Section-Layout-SSOT fuer den Mein-Tag-Tab

   Konsument: web/js/sections/mein-tag.js (+ mein-tag-aufgaben/anfragen/
              vk/fokus/zeit/mobile.js)
   ============================================================== */

/* Sub-Module, aufgesplittet von mein-tag.css:
     web/styles/sections/mein-tag/
       aufgaben-card.css   anfragen-card.css   time-booking.css
       focus-cards.css     calendar.css        time-widget.css
       app-shells.css      mein-fokus.css      bottom-bar.css
     web/styles/ui/
       kontext-sheet.css   (Kontextleiste + Kontext-Sheet)
   Hier bleibt: Section-Layout (.mein-tag-grid + Spalten + .mt-section + .sp-*),
   Top-Tab-Nav (.mt-tab-*), Mitte-Sub-Tabs (.mitte-tab-*), .mt-zeit-card-Shell,
   Mobile/Tablet-Overrides fuer Layout + Cross-Cutting-Form-Patterns. */

/* ── Mein Tag ───────────────────────────────────────────── */

/* 3-column grid: Spaltenbreiten +50% auf Desktop (Mein Fokus 280→480, Tages-
   Spalte 280→510). Schrumpf-Verhalten: auf knappen Viewports (Notebook
   1000-1399px, schmaler Desktop) schrumpfen die beiden Aussenspalten
   (Fokus / Zeit), nicht die Mitte. Die Mitte
   ist die wichtigste Spalte (Aufgaben/Anfragen/VK + Toolbar) und braucht
   mind. 440px fuer Toolbar-Tier 5 + Karten-Lesbarkeit. Aussen-min 280px
   liefert noch eine sinnvolle Mein-Fokus-Liste / Mini-Kalender. */
.mein-tag-grid {
  display: grid;
  grid-template-columns: minmax(280px, 480px) minmax(440px, 1fr) minmax(280px, 510px);
  gap: var(--space-4);
  /* flex:1 statt height:100% — der Tab-Container ist flex-column; so kann das
     Day-Selector-Banner (Geschwister oberhalb) seine Hoehe nehmen und das Grid
     fuellt den Rest (statt zu ueberlaufen). */
  flex: 1 1 0;
  min-height: 0;
  padding: var(--space-4);
  box-sizing: border-box;
}

/* ── Day-Selector-Banner ("Ausgewaehlter Tag") ─────────────────────────── */
.mt-tag-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  margin: var(--space-3) var(--space-4) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-muted);
  border: 1px solid var(--brand-default);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--fs-body);
}
.mt-tag-banner.hidden { display: none; }
.mt-tag-banner .ui-ico { flex-shrink: 0; }
.mt-tag-banner-text { flex: 1; min-width: 0; }
.mt-tag-banner-text strong { font-weight: var(--fw-semibold); color: var(--brand-default); }
.mt-tag-banner-reset {
  flex-shrink: 0;
  border: 1px solid var(--brand-default);
  background: var(--brand-default);
  color: var(--brand-text-on);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: filter var(--duration-fast);
}
.mt-tag-banner-reset:hover { filter: brightness(1.08); }

/* Banner-Responsive (Notebook / Tablet / Mobile) — Pflicht-Breakpoints fuer
   neue >150px-Klasse. */
@media (max-width: 1399px) {
  .mt-tag-banner { margin: var(--space-2) var(--space-3) 0; }
}
@media (max-width: 999px) {
  .mt-tag-banner { margin: var(--space-2) var(--space-3) 0; font-size: var(--font-size-sm); }
}
@media (max-width: 599px) {
  .mt-tag-banner { margin: var(--space-2); padding: var(--space-1-5) var(--space-2); }
  .mt-tag-banner-reset { padding: var(--space-1) var(--space-2); min-height: 36px; }
}
/* Ab 600px uebernimmt der Header-Chip (.mt-daychip) — der Streifen bleibt rein
   Mobile, damit auf Desktop/Notebook/Tablet nichts das Spalten-Grid verschiebt. */
@media (min-width: 600px) {
  .mt-tag-banner { display: none; }
}

/* ── Ausgewaehlter-Tag: Header-Chip (>=600px) ──────────────────────────────
   Sitzt im Page-Header-Sub-Tab-Slot direkt neben "Mein Tag" (gemountet von
   mein-tag.js). Er liegt ausserhalb des Spalten-Grids → ein Tag-Wechsel schiebt
   die Seite nicht mehr. Auf <600px ausgeblendet (dort greift der Streifen oben,
   und der Sub-Tab-Slot ist selbst schon display:none). */
.mt-daychip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  height: 30px;
  padding-inline: var(--space-2-5) var(--space-1);
  background: color-mix(in srgb, var(--brand-default) 8%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--brand-default) 32%, transparent);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: 1;
  white-space: nowrap;
}
.mt-daychip .ui-ico img {
  /* Kalender-Icon in Markenblau statt Default-Navy — kohaerent mit dem Label. */
  filter: invert(27%) sepia(89%) saturate(1500%) hue-rotate(210deg);
}
.mt-daychip-label {
  font-weight: var(--fw-medium);
  color: var(--brand-default);
}
.mt-daychip-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.mt-daychip-reset img { width: 14px; height: 14px; }
.mt-daychip-reset:hover {
  background: color-mix(in srgb, var(--brand-default) 16%, transparent);
  color: var(--brand-default);
}
@media (max-width: 599px) {
  .mt-daychip { display: none; }
}

/* Notebook-Tab-Nav (.mt-tab-nav/.mt-tab-btn/.mt-tab-nav--notebook) entfernt —
   Notebook 1000-1399px nutzt seit der Nav-Konsolidierung dasselbe Bottom-Bar-
   Pattern (.mt-bottombar) wie Tablet/Mobile. Navigation ueber MtMobile.switchTo. */

/* Grid-/Panel-/Mitte-Nav-Layout fuer <1400px ist SSOT in mt-bottom-bar.css
   (@1399-Block mit !important, laedt zuletzt). Der frueher hier stehende
   @999-Block war durchgehend davon ueberschattet (jede Regel identisch oder per
   !important ueberschrieben) → entfernt, damit die Responsive-Layout-Regeln nicht
   an drei Stellen driften. */

/* Mobile (<600px): 3 Tabs — Mein-Bereich-Stil (ich-tablist) */
@media (max-width: 599px) {
  /* Alte obere Tab-Navs (mt-tab-nav--tablet/--mobile) entfernt — Navigation
     laeuft ueber die Bottom-Bar (.mt-bottombar). */

  /* Grid-/Panel-/Spalten-/Section-Header-/Mitte-Nav-Layout fuer <1400px ist SSOT
     in mt-bottom-bar.css (@1399-Block mit !important, laedt zuletzt) — die frueher
     hier gespiegelten Regeln waren durchgehend davon ueberschattet (identisch oder
     per gleich-/hoeher-spezifisches !important ueberschrieben) und wurden entfernt.
     Hier bleiben nur die Mobile-Karten-Politur-Regeln, die es nur in mein-tag.css gibt. */

  /* Fokus-Summe */
  /* Fokus-Liste: kein verschachtelter Scroll */
  .mt-list { overflow: visible; max-height: none; }

  /* Kalender-Panel: Bereiche volle Hoehe, kein verschachteltes Flex */
  .sp-kalender { flex: none; min-height: auto; }
  .sp-bereich { flex: none; display: block; }

  /* Alt-Filter-/Karten-/Quick-Button-/Inline-Formular-Klassen entfernt
     (2026-07-05, toter Code — .aufgaben-filter-bar/.filter-btn/.filter-chip/
     .anfr-karte/.neue-aufgabe-row/.embedded-form/.anfr-neue-aufgabe-form/
     .tab-form-wrap/.form-row-2col/.quick-btn hatten keine Consumer). */

  /* ── Card Meta & Actions: Mobile-Optimierungen ── */
  /* Action-Buttons: 44px Touch-Targets (.fk-d365 live in mein-tag-zeit.js) */
  .fk-d365 {
    min-width: 40px;
    min-height: 40px;
  }
  /* Chevron kleiner als 40px Touch-Target fuer Kalender-Cards */
  .kal-card .kal-chevron-ico { min-width: 28px; min-height: 28px; }
  /* Alt-Anfrage-Karten- (.anfr-header/-detail-wrap/-aufgabe-row/-aufg-header),
     .aufgabe-detail-field- und .kal-badge-Regeln entfernt (2026-07-05, toter
     Code). */

  /* Kalender-Cards kompakter */
  .kal-card { padding: var(--space-2); border-radius: var(--radius-md); }
  .kal-card-top { margin-bottom: var(--space-1); }

  /* Zeit-Mini-Widget & Summe */
  .sp-zeit { margin-bottom: var(--space-2); }
}

.fokus-spalte, .aufgaben-spalte, .tages-spalte {
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0; /* R7: Flex-Column + Overflow braucht min-height:0 */
}
.fokus-spalte, .aufgaben-spalte { overflow-y: hidden; }

/* Seitenpanel-Bereiche: immer sichtbar, ordentlich gestapelt */
.sp-bereich { display: flex; flex-direction: column; }
.sp-kalender { flex: 1; min-height: 0; }

/* Bloecke verschoben nach sections/mein-tag/: Aufgabe-Card, Anfrage-Cards,
   Time-Booking, Heute-Badge + Focus States + Focus Cards (.fk-*),
   Calendar Cards. */

/* ── Mitte Sub-Tabs + Verkaufschancen ───────────────────── */
.mitte-tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-border);
  overflow: visible;
  flex-shrink: 0;
  background: var(--color-surface);
}
.mitte-tab-scroll { flex: 1; overflow-y: hidden; min-height: 0; display: flex; flex-direction: column; }
.mitte-tab-content { display: none; flex-direction: column; min-height: 0; }
.mitte-tab-content.active { display: flex; flex: 1; }

.mitte-tab-btn {
  padding: var(--space-2) var(--space-4);
  border: none;
  background: none;
  color: var(--color-text-muted);
  /* Routing-SSOT-Sweep 2026-05-07: Sub-Tab ist <a href> (Strg/Cmd-Klick → neuer Tab).
     UA-Default-Anchor-Underline neutralisieren. */
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--duration-fast), border-color var(--duration-fast);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.mitte-tab-btn:hover { color: var(--color-text); }
/* Tab buttons: underline-only focus, no outline box */
.mitte-tab-btn:focus-visible { outline: none; border-bottom-color: var(--brand-default); }
.mitte-tab-btn .ui-ico { opacity: 0.5; display: flex; align-items: center; width: 16px; height: 16px; flex-shrink: 0; }
.mitte-tab-btn .ui-ico img { width: 16px; height: 16px; }
.mitte-tab-btn.active .ui-ico { opacity: 1; }
.mitte-tab-btn.active { color: var(--brand-default); border-bottom-color: var(--brand-default); font-weight: var(--fw-semibold); }
.mitte-tab-count {
  font-size: var(--fs-badge);
  background: var(--color-bg-muted);
  border-radius: var(--radius-circular);
  padding: 0 var(--space-1);
  margin-left: var(--space-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  line-height: 1;
}
.mitte-tab-btn.active .mitte-tab-count { background: var(--brand-default); color: var(--brand-text-on); }

/* Time-Widget (.zw-*) in time-widget.css, MtKalender-Liste + MtKalender-Teams
   in calendar.css. */

/* MtZeit-Card — minimaler Wrapper-Stil; bleibt in mein-tag.css als Shell. */
.mt-zeit-card { padding-bottom: var(--space-2); }
.mt-zeit-body { min-height: 120px; }

/* ════════════════════════════════════════════════════════════
   MOBILE OVERRIDES (<600px) — Karten-Politur am Dateiende.
   Das Mobile-Layout (Grid/Panel/Spalten/Mitte-Nav/App-Wrapper-Overflow/
   mt-section-Reset) ist SSOT in mt-bottom-bar.css (@1399-Block mit !important,
   laedt zuletzt) — die frueher hier zusaetzlich gefuehrten Layout-Overrides waren
   davon ueberschattet (identisch oder per !important ueberschrieben) und wurden
   entfernt. Hier bleibt nur, was mt-bottom-bar NICHT setzt.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  /* Chevron: kompaktere Mobile-Groesse (22x22 statt 40x40 Touch-Target) */
  .kal-chevron-ico { min-width: 0 !important; min-height: 0 !important; width: 22px !important; height: 22px !important; display: inline-flex !important; align-items: center; justify-content: center; }
  .kal-chevron-ico .ui-ico { width: 14px !important; height: 14px !important; }
}

/* V2-UI Shells (.mt-aufg/anfr/vk-app) in app-shells.css; Mein Fokus V2 in
   mein-fokus.css. */