/* ════════════════════════════════════════════════════════════════
 * formstube · Controlling · fs-tab-bar.css
 * ════════════════════════════════════════════════════════════════
 * iOS-Style Bottom-Tab-Bar mit 4 Sektionen.
 * Sichtbar nur Mobile (<=720px) ODER im PWA-Standalone-Mode.
 * Auf Desktop bleibt der Top-Nav-Header allein.
 * ════════════════════════════════════════════════════════════════ */

.fs-tab-bar {
  display: none;  /* default · wird via media-query aktiviert */
}

/* ════════════════════════════════════════════════════════════════
 * Desktop-FAB (Marc 2026-05-26 · v3 ECHTER Bug-Fix)
 *
 * Bug-Diagnose: View-Transitions API (fs-transitions.css) setzt
 * transform: translateX(...) auf root während Navigation. Plus:
 * andere Parent-Elemente könnten transform haben → position:fixed
 * verliert Viewport-Anchor → Element springt nach oben links.
 *
 * Fix-Strategy:
 * 1. JS-Portal: FAB wird beim Init via body.appendChild() direkt
 *    ans body gehängt (kein Parent-Transform-Container mehr)
 * 2. !important auf alle Position-Werte (defeat-style-Konflikte)
 * 3. KEIN transform IRGENDWO (kein translateZ, kein will-change)
 * 4. Hover/Active nur via filter + box-shadow (zero layout impact)
 * ════════════════════════════════════════════════════════════════ */
/* Mobile: HART verstecken (auch wenn JS Portal-Move triggert).
   Marc-Bug-Report 2026-05-26: Desktop-FAB war auf Mobile sichtbar weil
   das !important der Media-Query nicht zurückgesetzt wurde. */
.fs-desktop-fab,
body > #fs-desktop-fab {
  display: none !important;
}
@media (max-width: 720px) {
  .fs-desktop-fab,
  body > #fs-desktop-fab {
    display: none !important;
  }
}
@media (min-width: 721px) {
  /* Höchste Spezifität: body > #fs-desktop-fab nach Portal-Move */
  .fs-desktop-fab,
  body > #fs-desktop-fab {
    display: inline-flex !important;
    position: fixed !important;
    bottom: 26px !important;
    right: 26px !important;
    left: auto !important;
    top: auto !important;
    z-index: 9510;
    width: 60px;
    height: 60px;
    background: var(--accent, #D8FF3C);
    border: 0;
    cursor: pointer;
    padding: 0;
    margin: 0 !important;  /* sicher zurücksetzen */
    color: #0A0A0C;
    aspect-ratio: 1 / 1;
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    /* Marc-Fix 2026-05-25: box-shadow respektiert clip-path NICHT
       → erzeugt sichtbaren Hex-Schatten daneben („Geister-Hex"-Bug).
       drop-shadow() respektiert die clip-path-Form korrekt. */
    box-shadow: none;
    filter: drop-shadow(0 8px 16px rgba(216, 255, 60, 0.28)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.40));
    transform: none !important;
    will-change: auto;
    transition: filter .18s ease, background .18s ease;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }
  /* Hover/Active: KEIN transform — nur filter + shadow */
  .fs-desktop-fab:hover,
  body > #fs-desktop-fab:hover {
    filter: drop-shadow(0 12px 22px rgba(216, 255, 60, 0.42)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45)) brightness(1.06);
  }
  .fs-desktop-fab:active,
  body > #fs-desktop-fab:active {
    filter: drop-shadow(0 4px 10px rgba(216, 255, 60, 0.30)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.40)) brightness(0.94);
  }
  .fs-desktop-fab:focus-visible,
  body > #fs-desktop-fab:focus-visible {
    filter: drop-shadow(0 0 4px rgba(216,255,60,.7)) drop-shadow(0 8px 16px rgba(216, 255, 60, 0.32)) drop-shadow(0 4px 8px rgba(0,0,0,0.40));
  }
  .fs-desktop-fab .fs-tab-bar-fab-icon {
    position: relative;
    width: 22px;
    height: 22px;
    display: block;
  }
  .fs-desktop-fab .fs-tab-bar-fab-icon::before,
  .fs-desktop-fab .fs-tab-bar-fab-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: #0A0A0C;
    border-radius: 1px;
    transition: transform .18s cubic-bezier(.2,.7,.2,1);
  }
  .fs-desktop-fab .fs-tab-bar-fab-icon::before {
    width: 22px;
    height: 2.5px;
    transform: translate(-50%, -50%);
  }
  .fs-desktop-fab .fs-tab-bar-fab-icon::after {
    width: 2.5px;
    height: 22px;
    transform: translate(-50%, -50%);
  }
  /* Open-State: + wird zu × · Hex bleibt 100% stabil an Position */
  .fs-desktop-fab.is-open,
  body > #fs-desktop-fab.is-open {
    background: #0A0A0C;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 0 1px rgba(216,255,60,0.4));
    /* KEIN transform · KEIN will-change · alles bleibt explizit unverändert */
  }
  .fs-desktop-fab.is-open .fs-tab-bar-fab-icon::before {
    background: var(--accent, #D8FF3C);
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .fs-desktop-fab.is-open .fs-tab-bar-fab-icon::after {
    background: var(--accent, #D8FF3C);
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  /* ───────────────────────────────────────────────────────────────
   * Desktop · Popup-Menu statt Full-Screen-Sheet
   * Marc-Direktive 2026-05-26: „Items aus FAB animieren, nicht full-width"
   *
   * Strategie:
   *  - Backdrop bleibt für Click-zu-Schließen, aber transparent (kein Blur)
   *  - .fs-fab-options Container floated rechts-unten am FAB ankernd
   *  - Items kommen aus FAB-Ecke gestaffelt rausgeschossen
   *  - transform-origin: bottom right (für scale-from-FAB-Effekt)
   * ─────────────────────────────────────────────────────────────── */
  .fs-fab-menu {
    z-index: 9520;  /* über Desktop-FAB damit click outside detect klappt */
  }
  /* Marc 2026-05-25: Backdrop-Blur auf Desktop AKTIV wie auf Mobile
     (Fokus auf Menu, Rest unscharf). Vorheriger 26.05-Override (transparent)
     ist raus — der widersprach Marc-Direktive „wie bei mobile". */
  .fs-fab-menu.is-open .fs-fab-backdrop {
    background: rgba(10, 10, 12, 0.62) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }
  .fs-fab-menu .fs-fab-options {
    /* Popup direkt rechts-unten an FAB ankern (FAB hat bottom:26 right:26 width:60) */
    position: fixed;
    bottom: calc(26px + 60px + 12px);  /* über FAB + gap */
    right: 26px;
    left: auto;  /* überschreibt Mobile-Style left:16 right:16 */
    width: 320px;
    max-width: calc(100vw - 52px);
    transform-origin: bottom right;  /* Scale-from-FAB-Origin */
  }
  .fs-fab-menu .fs-fab-option {
    /* Hidden initial: aus FAB-Ecke skaliert + nach rechts/unten */
    opacity: 0;
    transform: translate(40px, 30px) scale(0.6);
    transform-origin: bottom right;
    transition:
      opacity 0.22s cubic-bezier(.2,.7,.2,1),
      transform 0.32s cubic-bezier(.16,1,.3,1);
  }
  .fs-fab-menu.is-open .fs-fab-option {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  /* Stagger umgekehrt: oberste Items kommen ZULETZT (visueller Sweep von FAB nach oben) */
  .fs-fab-menu.is-open .fs-fab-option:nth-last-child(1) { transition-delay: 0.02s; }
  .fs-fab-menu.is-open .fs-fab-option:nth-last-child(2) { transition-delay: 0.05s; }
  .fs-fab-menu.is-open .fs-fab-option:nth-last-child(3) { transition-delay: 0.08s; }
  .fs-fab-menu.is-open .fs-fab-option:nth-last-child(4) { transition-delay: 0.11s; }
  .fs-fab-menu.is-open .fs-fab-option:nth-last-child(5) { transition-delay: 0.14s; }
  .fs-fab-menu.is-open .fs-fab-option:nth-last-child(6) { transition-delay: 0.17s; }
  .fs-fab-menu.is-open .fs-fab-option:nth-last-child(7) { transition-delay: 0.20s; }
  .fs-fab-menu.is-open .fs-fab-option:nth-last-child(8) { transition-delay: 0.23s; }

  /* Mobile-Body-Scroll-Lock auch hier ausschalten (Hintergrund frei scrollen) */
  body.fs-fab-open {
    overflow: visible !important;  /* nichts blocken auf Desktop */
  }
}

@media (max-width: 720px) {
  /* Bug-Fix Marc 2026-05-27 · time-entries.php Report:
     Fab-Footer scrollte mit statt fixed zu kleben.
     Root-Cause vermutet: Parent (form / main / .container) hat in mobile-
     refactor irgendwo will-change/transform/contain bekommen → container-
     block für position:fixed broken.
     Defense: !important Override + eigener Stacking-Context (translateZ)
     der das Element OUT-OF-FLOW promoted unabhängig von Parent-Hierarchy. */
  .fs-tab-bar {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 90;
    transform: translateZ(0);    /* eigener Layer · immune gegen Parent-transforms */
    will-change: transform;
    background: rgba(20, 21, 26, 0.94);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    border-top: 1px solid rgba(216, 255, 60, 0.18);
    padding: 8px 6px max(8px, env(safe-area-inset-bottom));
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
  }

  .fs-tab-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    color: var(--stone, #888);
    text-decoration: none;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    min-height: 44px;  /* Apple-HIG Touch-Target */
    position: relative;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }

  /* ─── Zentraler FAB-Slot in der Tab-Bar ──────────────────────── */
  .fs-tab-bar-fab-slot {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* FAB ragt nach oben aus der Tab-Bar raus */
    overflow: visible;
  }
  .fs-tab-bar-fab {
    position: relative;
    width: 60px;
    height: 60px;
    /* nach oben ziehen sodass FAB halb über der Tab-Bar sitzt */
    margin-top: -36px;
    background: var(--accent, #D8FF3C);
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink, #0A0A0C);
    box-shadow: 0 8px 24px rgba(216, 255, 60, 0.35),
                0 2px 8px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .fs-tab-bar-fab:active {
    transform: scale(0.92);
  }
  .fs-tab-bar-fab-icon {
    width: 22px;
    height: 22px;
    display: block;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* + zu × · CSS-pur · zwei Balken die sich drehen */
  .fs-tab-bar-fab-icon::before,
  .fs-tab-bar-fab-icon::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 18px; height: 3px;
    background: var(--ink, #0A0A0C);
    transform: translate(-50%, -50%);
    border-radius: 1px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .fs-tab-bar-fab-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }
  /* Open-State: + dreht zu × (beide Balken rotieren 45°/-45°) */
  .fs-tab-bar-fab.is-open .fs-tab-bar-fab-icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .fs-tab-bar-fab.is-open .fs-tab-bar-fab-icon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .fs-tab-bar-fab.is-open {
    transform: rotate(60deg);  /* Hex dreht sich · subtil playful */
  }

  .fs-tab-bar-item:active {
    transform: scale(0.94);
  }

  .fs-tab-bar-item:hover,
  .fs-tab-bar-item:focus-visible {
    color: var(--paper, #F0F0F0);
    outline: none;
  }

  .fs-tab-bar-icon {
    display: block;
    width: 26px; height: 26px;
    /* Geometric Hex-Container: für inline-SVGs als parent */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .fs-tab-bar-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    stroke: currentColor;
    fill: none;
  }

  /* Active-State · Lime · subtiler Bar oben */
  .fs-tab-bar-item.is-active {
    color: var(--accent, #D8FF3C);
  }
  .fs-tab-bar-item.is-active::before {
    content: '';
    position: absolute;
    top: -1px;  /* überdeckt border-top */
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 2px;
    background: var(--accent, #D8FF3C);
  }
  .fs-tab-bar-item.is-active .fs-tab-bar-icon svg {
    /* Active-Icon: leicht gefüllt für Differenzierung */
    fill: rgba(216, 255, 60, 0.18);
    stroke: currentColor;
  }

  .fs-tab-bar-label {
    font-weight: 500;
  }

  /* ─── Body-Padding damit Page-Content nicht von Tab-Bar verdeckt wird ─── */
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  /* Sticky-Footer (wie .rc-actions im Cockpit) · darf nicht von Tab-Bar
     verdeckt werden · zusätzliches bottom-offset */
  .rc-actions[style*="sticky"],
  .sticky-bottom {
    bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }
}

/* ─── PWA-Standalone auf Desktop: KEINE Mobile-Tab-Bar ─────
   Marc-Bug 2026-05-23: vorher zeigte body.is-pwa die Tab-Bar
   auch auf Desktop-Breite. Mobile-UI gehört strikt an Viewport,
   nicht an display-mode:standalone. */