/* bottom-bar.css — Mein-Tag Mobile/Tablet/Notebook Bottom-Tab-Bar + Grid-Override

 Quelle: war bis 2026-05-08 unter web/styles/mein-tag-mobile.css (Phase
 Mobile-Mein-Tag 2026-05-01). Inhalt 1:1 hierher verschoben (); kein funktionaler Aenderungspunkt.

 Konsumenten: web/js/sections/mein-tag/mt-mobile.js — rendert die Bottom-Bar
 und schaltet aktive Panels.

 Architektur:
 - Bottom-Bar (#mt-bottombar) ist position:fixed unten am Viewport
 - .mein-tag-grid auf Mobile/Tablet/Notebook (<1400px): vertical Stack,
 NUR aktives Panel sichtbar
 - aktives Panel scrollt vertikal, padding-bottom respektiert die Bar-Hoehe
 - Mitte-Sub-Tabs (.mitte-tab-nav) auf Mobile/Tablet ausgeblendet — die
 Bottom-Bar uebernimmt die Navigation zwischen Aufgaben/Anfragen/Chancen

 Breakpoints:
 >=1400px → Desktop (3-Spalten-Grid in mein-tag.css), Bottom-Bar hidden
 1000-1399px → Notebook, Bottom-Bar sichtbar, aktives Panel mit max-width
 600-999px → Tablet, Bottom-Bar sichtbar, leicht groessere Bar-Schrift
 <600px → Mobile, Bottom-Bar full-width (Rail ausgeblendet)

 Tablet vs Mobile-Design ist gleich. Der Unterschied ist nur
 Spacing/Schriftgroesse — Tablet bekommt mehr Platz, Bar bleibt aber gleich.
 ========================================================================== */

/* ────────────────────────────────────────────────────────────────────────
   Bottom-Tab-Bar — Default versteckt, sichtbar auf <1400px.
   ──────────────────────────────────────────────────────────────────────── */
.mt-bottombar {
  display: none;
}

/* 2026-05-01: Bottom-Bar gilt jetzt auch fuer Notebook (1000-1399px).
   Vorher hatte Notebook eine eigene Top-Bar mit "Mein Tag" + "Kalender" und
   ein 2-Spalten-Grid (Fokus|Aufgaben + Tages-Spalte unten). Das fuehlte
   sich gequetscht und inkonsistent zu Mobile/Tablet an. Jetzt: einheitliches
   Bottom-Bar-Pattern fuer alles <1400px. Desktop (>=1400px) behaelt das
   3-Spalten-Vollbild. */
@media (max-width: 1399px) {
  .mt-bottombar {
    display: flex;
    position: fixed;
    bottom: 0;
    /* Auf Tablet/Notebook (≥600px) ist die Icon-Rail
 (56px) sichtbar — Bottom-Bar respektiert die Rail und startet rechts
 davon. Auf Mobile <600px ist die Rail ausgeblendet, Bottom-Bar nimmt
 volle Breite (siehe Override-Block weiter unten). */
    left: var(--rail-w);
    right: 0;
    z-index: 50;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 12px color-mix(in srgb, var(--lod-darkblue-900) 6%, transparent);
    /* Bottom-Padding etwas erhoeht damit Descender (g, p) im Label
       "Anfragen"/"Verkaufschancen" nicht abgeschnitten werden. */
    padding: var(--space-1-5) var(--space-1) calc(var(--space-2-5) + env(safe-area-inset-bottom, 0px)) var(--space-1);
    gap: var(--space-xxs);
    justify-content: space-between;
  }
  .mt-bottombar-btn {
    flex: 1 1 0;
    min-width: 0;
    background: transparent;
    border: 0;
    padding: var(--space-1-5) var(--space-1) var(--space-1) var(--space-1);
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: var(--color-text-muted);
    font-size: var(--fs-badge);
    font-weight: var(--fw-medium);
    border-radius: var(--radius-lg);
    position: relative;
    transition: background var(--duration-quick), color var(--duration-quick);
  }
  .mt-bottombar-btn:hover { background: var(--lod-gray-50); }
  .mt-bottombar-btn:focus-visible {
    outline: 2px solid var(--lod-turquoise);
    outline-offset: 2px;
  }
  .mt-bottombar-btn.active {
    color: var(--lod-darkblue);
  }
  .mt-bottombar-btn.active .mt-bottombar-icon img {
    opacity: 1;
    filter: none;
  }
  .mt-bottombar-btn.active .mt-bottombar-label {
    font-weight: var(--fw-bold);
  }
  .mt-bottombar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
  }
  .mt-bottombar-icon img {
    width: 22px;
    height: 22px;
    opacity: 0.55;
    transition: opacity var(--duration-quick);
  }
  /* 2026-05-01 Kyle: Pille hinter dem Icon entfernt — wirkte halbgar
     (nur unter dem Icon, nicht unter dem Label). Aktiver Tab signalisiert
     sich jetzt rein durch volle Icon-Opacity + Bold-Label + Darkblue-Farbe.
     Material-3-Style ohne State-Layer. */
  .mt-bottombar-label {
    /* line-height etwas hoeher, damit Descender (g, p, y) nicht abgeschnitten
       werden. 2026-05-01 Kyle. */
    line-height: 1.25;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mt-bottombar-badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 22px);
    min-width: 16px;
    height: 16px;
    padding: 0 var(--space-1);
    border-radius: var(--radius-circular);
    background: var(--lod-danger);
    color: var(--brand-text-on);
    font-size: var(--font-size-xs);
    font-weight: var(--fw-bold);
    line-height: 16px;
    text-align: center;
    display: none;
  }
  .mt-bottombar-badge.is-visible { display: inline-block; }

  /* ────────────────────────────────────────────────────────────────────
     Mein-Tag-Grid auf Mobile/Tablet:
     - vertikaler Stack, alle Panels untereinander aber nur aktives sichtbar
     - aktives Panel nimmt vollen Raum, scrollt vertikal
     - padding-bottom = Bar-Hoehe damit Inhalt nicht verdeckt wird
     ──────────────────────────────────────────────────────────────────── */
  .mein-tag-grid {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    /* Reservieren fuer fixed Bottom-Bar. Bar-Hoehe = 6 (top-pad) + 26 (icon)
       + 5 (gap) + ~14 (label line-height) + 4 (btn-pad-bottom) + 10 (bar-pad-
       bottom) = ~65px + safe-area. Mit Puffer 76px. */
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
  }
  .mein-tag-grid > [data-mt-panel] {
    display: none;
  }
  .mein-tag-grid > [data-mt-panel].mt-panel-active {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    /* ! wichtig: ueberlebt die spaeter geladene .aufgaben-spalte/.fokus-spalte
       Regel in mein-tag.css Z. 476-488, die overflow-y: hidden setzt. */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Padding NICHT mehr hier — der sticky-
 Toolbar-Trick darunter braucht einen padding-freien Scroll-Container,
 damit die Toolbar bei top:0 buendig am Page-Header klebt (war frueher
 12px Abstand). Innenrand wandert auf die einzelnen Spalten unten. */
    padding: 0 !important;
    background: var(--color-bg);
    scrollbar-width: none;
  }
  /* Spalten-Padding : Innenraum fuer Karten +
 Inhalt, separat pro Spalte. Aufgaben-Spalte bekommt KEIN padding-top,
 weil die sticky Toolbar dort buendig oben anliegen muss; Fokus + Tages-
 Spalte haben rundherum 12px wie zuvor. */
  .mein-tag-grid > .fokus-spalte.mt-panel-active,
  .mein-tag-grid > .tages-spalte.mt-panel-active {
    padding: var(--space-3, 12px) !important;
  }
  .mein-tag-grid > .aufgaben-spalte.mt-panel-active {
    padding: 0 var(--space-3, 12px) var(--space-3, 12px) !important;
  }
  .mein-tag-grid > [data-mt-panel].mt-panel-active::-webkit-scrollbar {
    display: none;
  }

  /* mt-section: Kasten-Styling raus (Mobile = direkter Content-Flow). */
  .mt-section {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
  .mein-tag-grid .mt-section-header { display: none; }

  /* Inaktive Spalten verstecken (display:none kommt aus
     .mein-tag-grid > [data-mt-panel] oben). Der aktive Spalten-Container
     ist gleichzeitig .mt-panel-active und bekommt seinen eigenen Scroll
     via der Regel oben — die hat !important, damit die globalen Spalten-
     Regeln in mein-tag.css (Z. 476-488 mit overflow-y:hidden) nicht
     greifen. */

  /* Mitte-Sub-Tabs ausblenden — Bottom-Bar uebernimmt das Tabbing zwischen
     Aufgaben/Anfragen/Chancen. switchMtTab('mob-sm-...') schaltet weiterhin
     die mitte-tab-content um, damit das richtige Modul sichtbar bleibt. */
  .mitte-tab-nav { display: none !important; }
  .mitte-tab-scroll {
    display: block !important;
    overflow: visible !important;
    flex: none !important;
    min-height: auto !important;
    height: auto !important;
  }
  .mitte-tab-content {
    display: none !important;
  }
  .mitte-tab-content.active {
    display: block !important;
    flex: none !important;
    min-height: auto !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* Module-Inner-Wrapper: ebenfalls flat */
  .mt-aufg-app,
  .mt-anfr-app,
  .mt-vk-app {
    display: flex !important;
    flex-direction: column !important;
    flex: none !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
  .mt-aufg-app .mt-aufg-list,
  .mt-anfr-app .mt-anfr-list,
  .mt-vk-app .mt-vk-list {
    overflow: visible !important;
    height: auto !important;
    flex: none !important;
    min-height: auto !important;
    padding: 0 !important;
  }

  /* Toolbar (Filter-Pills oben) bleibt sticky beim Scrollen.
 Bleed-Out-Margin entfernt — der Scroll-
 Container .mt-panel-active hat jetzt padding:0, das Spalten-Padding
 sitzt auf .aufgaben-spalte (links/rechts/unten). Die Toolbar darf ueber
 die Spalten-Padding-Linie hinausragen, deshalb negative horizontale
 Margins, damit sie buendig am Viewport-Rand sitzt wie auf Anfragen/
 Projekte/etc. */
  .mt-aufg-app .app-page-toolbar,
  .mt-anfr-app .app-page-toolbar,
  .mt-vk-app .app-page-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--color-bg);
    margin: 0 calc(-1 * var(--space-3, 12px)) var(--space-2, 8px);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border-bottom: 1px solid var(--color-border);
  }
}

/* ────────────────────────────────────────────────────────────────────────
   Tablet + Notebook (600-1399px): mehr Padding, groessere Schrift in der
   Bar. Aktivem Inhalt mehr Atemluft. 2026-05-01 erweitert auf Notebook
   (vorher 600-999px).
   ──────────────────────────────────────────────────────────────────────── */
/* Mobile <600px — Rail ist ausgeblendet, Bottom-Bar
 nimmt volle Viewport-Breite (Override des left:56px-Defaults oben). */
@media (max-width: 599px) {
  .mt-bottombar { left: 0; }
}

@media (min-width: 600px) and (max-width: 1399px) {
  .mt-bottombar {
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .mt-bottombar-btn {
    padding: 8px 8px 10px;
  }
  .mt-bottombar-icon {
    width: 28px;
    height: 28px;
  }
  .mt-bottombar-icon img {
    width: 24px;
    height: 24px;
  }
  .mt-bottombar-label {
    font-size: var(--font-size-sm);
  }
  /* Auf Tablet/Notebook etwas mehr Bottom-Padding fuer die groessere Bar */
  .mein-tag-grid {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   Notebook-Spezifika (1000-1399px): zentrierter Content + max-width damit
   der Inhalt nicht zu breit verlaeuft. Auf Tablet hat der Viewport sowieso
   ~768-1000px, Notebook hat bis 1399px → ohne max-width wirken Karten-
   Listen unangenehm gestreckt.
   ──────────────────────────────────────────────────────────────────────── */
@media (min-width: 1000px) and (max-width: 1399px) {
  .mein-tag-grid > [data-mt-panel].mt-panel-active {
    /* Inhalt zentriert + max-width, damit Karten auf 1280px+ Viewport nicht
       endlos breit werden. Padding-aussen bleibt fuer Atemluft. */
    padding-left: max(var(--space-4, 16px), calc((100% - 920px) / 2)) !important;
    padding-right: max(var(--space-4, 16px), calc((100% - 920px) / 2)) !important;
    padding-top: var(--space-4, 16px) !important;
  }
}