/* ═══ TOP NAVIGATION ═══ */
.nav{position:sticky;top:0;z-index:200;background:var(--s1);border-bottom:1px solid var(--b2);backdrop-filter:blur(20px);display:flex;align-items:center;padding:0 14px;overflow:visible;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
.nav-brand{display:flex;align-items:center;gap:9px;padding:10px 13px 10px 0;margin-right:4px;border-right:1px solid var(--b1);flex-shrink:0}
.brand-icon{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--np),var(--nv));display:flex;align-items:center;justify-content:center;box-shadow:0 0 14px rgba(200,149,90,.4)}
.brand-text{font-size:14px;font-weight:700;color:var(--t1);white-space:nowrap}.brand-text span{color:var(--np)}
.nav-tabs{display:flex;flex:1;overflow-x:auto;overflow-y:visible}
.ntab{display:flex;align-items:center;gap:5px;padding:11px 10px;font-size:11.5px;font-weight:600;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;transition:var(--tr);white-space:nowrap;user-select:none;flex-shrink:0}
.ntab:hover{color:var(--t2)}.ntab.active{color:var(--np);border-bottom-color:var(--np)}
.ntab svg{width:14px;height:14px;flex-shrink:0}
.nbadge{background:var(--s3);color:var(--t3);border-radius:100px;padding:1px 6px;font-size:10px;font-weight:700;border:1px solid var(--b1)}
.ntab.active .nbadge{background:rgba(200,149,90,.15);color:var(--np);border-color:rgba(200,149,90,.3)}
.ntab-group{flex-shrink:0}
.ntab-group>.ntab{border-bottom:2px solid transparent}
.ntab-group>.ntab.active{color:var(--np);border-bottom-color:var(--np)}
.ntab-chevron{width:10px;height:10px;transition:transform .2s;margin-left:1px}
.ntab-chevron.open{transform:rotate(180deg)}
.ndropdown{display:none;position:fixed;background:var(--s1);border:1px solid var(--b2);border-radius:var(--r2);box-shadow:var(--sh);min-width:168px;z-index:9999;padding:4px}
.ndropitem{display:flex;align-items:center;gap:9px;padding:8px 12px;font-size:12px;font-weight:600;color:var(--t2);cursor:pointer;transition:var(--tr);white-space:nowrap;border-radius:7px}
.ndropitem svg{width:13px;height:13px;flex-shrink:0;color:var(--t3)}
.ndropitem:hover{background:var(--s3);color:var(--t1)}
.ndropitem:hover svg{color:var(--np)}
.ndropitem.active{color:var(--np);background:rgba(200,149,90,.08)}
.ndropitem.active svg{color:var(--np)}
.nav-right{margin-left:auto;padding-left:10px;flex-shrink:0;display:flex;align-items:center;gap:6px}
.nav-user{display:flex;align-items:center;gap:7px;background:var(--s2);border:1px solid var(--b2);border-radius:100px;padding:5px 11px;cursor:pointer;transition:var(--tr)}
.nav-user:hover{border-color:var(--np)}
.nav-av{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--np),var(--nv));display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}
.nav-un{font-size:11px;font-weight:600;color:var(--t2)}
.icon-btn{width:30px;height:30px;border-radius:8px;background:var(--s2);border:1px solid var(--b2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--tr);color:var(--t2)}
.icon-btn:hover{border-color:var(--nb);color:var(--nb)}
.icon-btn.active{border-color:rgba(200,149,90,.4);background:rgba(200,149,90,.12);color:var(--np)}
#nav-settings-btn{width:auto;gap:6px;padding:0 11px}
.nav-settings-label{font-size:11px;font-weight:600;color:var(--t2);letter-spacing:.01em}
#nav-settings-btn:hover .nav-settings-label{color:var(--nb)}
#nav-settings-btn.active .nav-settings-label{color:var(--np)}

/* ═══ MOBILE NAV ═══ */
@media(max-width:640px){
  .nav{padding:0 8px}
  .nav-brand{padding:8px 8px 8px 0;margin-right:2px}
  .brand-text{display:none}
  .nav-tabs{-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav-tabs::-webkit-scrollbar{display:none}
  .ntab{padding:11px 8px;font-size:11px;gap:4px}
  .ntab svg{width:13px;height:13px}
  .nav-un{display:none}
  .nav-user{padding:5px 8px;gap:4px}
  .nav-av{width:28px;height:28px;font-size:12px}
  .icon-btn{width:34px;height:34px}
  #nav-settings-btn{padding:0 8px}
  .nav-settings-label{display:none}
  .ndropdown{max-width:calc(100vw - 24px)}
  .theme-seg{display:none}
  /* Modern/Klassik switch: too wide for the phone header bar.
     Moved into the mobile drawer body (see _buildMobDrawer in 05-nav.js). */
  .nav-right .design-seg{display:none}
}
@media(max-width:400px){
  .nbadge{display:none}
  .ntab{padding:10px 6px}
}
.theme-seg{display:flex;align-items:center;background:var(--s3);border:1px solid var(--b2);border-radius:100px;padding:2px;gap:1px}
.tseg{display:flex;align-items:center;gap:4px;padding:4px 9px;border-radius:100px;font-size:10px;font-weight:700;color:var(--t3);cursor:pointer;transition:var(--tr);white-space:nowrap;user-select:none;letter-spacing:.02em}
.tseg svg{width:11px;height:11px;flex-shrink:0}
.tseg:hover{color:var(--t2)}
.tseg.active{background:var(--s1);color:var(--t1);box-shadow:0 1px 4px rgba(0,0,0,.18);border:1px solid var(--b1)}

/* ═══════════════════════════════════════════════
   DESKTOP SIDEBAR (app.html ≥ 641 px)
   Nav wird zur fixen linken Leiste
   ═══════════════════════════════════════════════ */
@media(min-width:641px){
  :root{--sidebar-w:228px}

  /* ── Sidebar-Rahmen ── */
  .nav{
    position:fixed;
    left:0;top:0;
    width:var(--sidebar-w);
    height:100vh;
    flex-direction:column;
    align-items:stretch;
    border-right:1px solid var(--b2);
    border-bottom:none;
    overflow-y:auto;
    overflow-x:hidden;
    padding:0;
    padding-left:0 !important;
    padding-right:0 !important;
    gap:0;
    z-index:200;
    scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{display:none}

  /* ── Brand-Bereich oben ── */
  .nav-brand{
    padding:14px 16px;
    border-right:none;
    border-bottom:1px solid var(--b1);
    margin-right:0;
    flex-shrink:0;
    height:auto;
    min-height:56px;
    display:flex;
    align-items:center;
  }

  /* ── Tab-Liste (scrollbarer Mittelteil) ── */
  .nav-tabs{
    flex:1;
    flex-direction:column;
    overflow-x:hidden;
    overflow-y:auto;
    padding:8px 6px;
    gap:1px;
    scrollbar-width:none;
  }
  .nav-tabs::-webkit-scrollbar{display:none}

  /* ── Einzelne Tab-Einträge ── */
  .ntab{
    border-bottom:none;
    border-left:2px solid transparent;
    border-radius:9px;
    padding:9px 12px;
    width:100%;
    font-size:12px;
    gap:9px;
    flex-shrink:0;
    white-space:nowrap;
  }
  .ntab:hover{background:var(--s3);color:var(--t1)}
  .ntab.active{
    color:var(--np);
    border-bottom-color:transparent;
    border-left-color:var(--np);
    background:rgba(200,149,90,.1);
  }
  .ntab svg{width:15px;height:15px}

  /* ── Gruppen (Kunden, Buchungen …) ── */
  .ntab-group{width:100%;flex-shrink:0}
  .ntab-group>.ntab{width:100%}
  .ntab-group>.ntab.active{border-bottom-color:transparent;border-left-color:var(--np)}

  /* Chevron: zeigt im Sidebar-Modus nach rechts, bei offenem Flyout nach unten */
  .ntab-chevron{margin-left:auto;transform:rotate(-90deg)}
  .ntab-chevron.open{transform:rotate(0deg)}

  /* ── Abschnittstrenner ── */
  /* Verwaltungs-Gruppe: Trennlinie + Mini-Label oberhalb */
  #group-kunden{
    margin-top:8px;
    padding-top:6px;
    border-top:1px solid var(--b1);
  }
  #group-kunden::before{
    content:'Verwaltung';
    display:block;
    font-size:9px;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;
    color:var(--t4);
    padding:0 12px 3px;
    pointer-events:none;
  }
  /* System-Tabs: nur Trennlinie */
  #tab-benutzer{margin-top:8px;padding-top:8px;border-top:1px solid var(--b1)}
  #tab-team{border-top:none;padding-top:0;margin-top:0}

  /* ── Inline-Akkordion (ersetzt das Flyout) ── */
  /* Dropdown wird statisch in den Sidebar-Fluss eingebettet */
  .ntab-group>.ndropdown{
    position:static !important;
    display:none;
    box-shadow:none !important;
    border:none !important;
    border-radius:0 !important;
    background:transparent !important;
    padding:2px 0 4px !important;
    min-width:0;
    width:100%;
  }
  /* Gruppe mit Klasse "open" zeigt Sub-Items */
  .ntab-group.open>.ndropdown{display:block !important}

  /* Sub-Items eingerückt */
  .ndropitem{
    padding:7px 10px 7px 30px;
    border-radius:8px;
    font-size:11.5px;
    border-left:2px solid transparent;
    margin:0;
  }
  .ndropitem:hover{background:var(--s3);color:var(--t1)}
  .ndropitem.active{
    color:var(--np);
    background:rgba(200,149,90,.08);
    border-left-color:var(--np);
    padding-left:28px;
  }
  .ndropitem svg{color:var(--t3)}
  .ndropitem.active svg{color:var(--np)}

  /* ── Rechtsbereich (User, Einstellungen, Theme) ── */
  .nav-right{
    flex-direction:column;
    align-items:stretch;
    margin-left:0;
    padding:10px 8px;
    border-top:1px solid var(--b1);
    flex-shrink:0;
    gap:5px;
  }

  .nav-user{
    width:100%;
    border-radius:10px;
    padding:8px 10px;
    gap:9px;
  }
  .nav-un{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;max-width:120px}

  #nav-settings-btn{
    width:100%;
    justify-content:flex-start;
    padding:0 11px;
    height:36px;
    border-radius:9px;
  }
  .nav-settings-label{display:inline !important}
  #nav-settings-btn:hover .nav-settings-label{color:var(--nb)}
  #nav-settings-btn.active .nav-settings-label{color:var(--np)}

  /* Logout-Button: volle Sidebar-Breite mit Label (gilt in Modern UND Klassik) */
  #nav-logout-btn{
    width:100%;
    justify-content:flex-start;
    padding:0 11px;
    height:36px;
    border-radius:9px;
    gap:7px;
  }
  #nav-logout-btn .nav-settings-label{display:inline !important}
  #nav-logout-btn:hover{
    border-color:rgba(220,60,60,.35);
    color:#d94040;
  }
  #nav-logout-btn:hover .nav-settings-label{color:#d94040}

  /* Theme-Switcher: volle Breite */
  .theme-seg{
    display:flex;
    width:100%;
    border-radius:10px;
  }
  .tseg{flex:1;justify-content:center;padding:5px 4px}

  /* Hamburger-Button verstecken */
  .mob-menu-btn{display:none !important}
}