/* TravTools · © MUNLabs
 * layout.css — Mobile-Menue & Responsive
 * Auf schmalen Viewports wird die Sidebar durch ein
 * vollflaechiges Glas-Overlay (Topbar-Burger) ersetzt. Tokens: shared.css.
 */

/* Standard (Desktop): Burger & Mobile-Menue sind unsichtbar */
.tt-top-burger{display:none}
.tt-mobile-overlay{display:none}

@media (max-width:980px){

  /* 1. Sidebar ausblenden & Main verbreitern */
  .tt-sb{display:none}
  .tt-main{margin-left:0;width:100%}

  /* 2. Burger-Button im Header */
  .tt-top-burger{
    display:inline-grid; place-items:center;
    width:40px; height:38px; border-radius:12px;
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.12);
    color:var(--tt-gold); font-size:17px; cursor:pointer; margin-left:2px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    transition:all var(--tt-fast) var(--tt-ease);
  }
  .tt-top-burger:hover{border-color:rgba(242,193,74,.45); box-shadow:var(--tt-glow-gold-soft)}
  .tt-top-burger.is-active{
    background:var(--tt-grad-gold); color:var(--tt-gold-ink); border-color:rgba(242,193,74,.6);
    box-shadow:0 0 18px rgba(242,193,74,.4);
  }

  /* 3. Das Mobile-Menue-Overlay */
  .tt-mobile-overlay{
    position:fixed; top:var(--tt-top-h, 74px); left:0; width:100%; height:calc(100vh - var(--tt-top-h, 74px));
    background:
      radial-gradient(600px 400px at 10% 0%, rgba(47,91,230,.24), transparent 60%),
      radial-gradient(500px 360px at 100% 10%, rgba(242,193,74,.12), transparent 60%),
      linear-gradient(180deg, rgba(6,14,40,.985), rgba(3,7,26,.995));
    /* r90: Das Menue hatte nur Verlaeufe und keine eigene Deckfarbe. Verlaeufe
       sind an den Raendern durchsichtig, also schimmerte die Seite darunter
       durch – man las die Menuepunkte vor der Ueberschrift der Seite, die man
       gerade verlassen wollte.

       Die Farbe steht bewusst NACH der Kurzschreibweise: "background:" setzt
       background-color mit zurueck, davor haette sie nichts bewirkt. */
    background-color:#04091e;
    z-index:2000;
    display:none;
    flex-direction:column; overflow-y:auto;
    padding:10px 12px calc(30px + env(safe-area-inset-bottom, 0px)); box-sizing:border-box;
    /* Am Listenende soll die Seite darunter nicht anfangen mitzuscrollen. */
    overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    border-top:1px solid rgba(242,193,74,.35);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  }
  .tt-mobile-overlay.is-visible{display:flex; animation:slideIn .25s var(--tt-ease-out)}

  /* ------------------------------------------------------------------
     r90: Das Overlay ist eine Spalten-Flexbox, und Flex-Kinder schrumpfen von
     sich aus. Ohne flex:0 0 auto hat der Browser jede Gruppe auf die Hoehe
     gedrueckt, die gerade noch in den Bildschirm passte – bei elf Gruppen
     waren das 19 Pixel. Mit overflow:hidden darueber war von den Eintraegen
     nichts mehr zu sehen: das Menue sah aus, als fehle der halbe Inhalt,
     obwohl alle 57 Eintraege im Markup standen.

     Gilt fuer alles, was direkt im Overlay liegt – Benutzerzeile, Gruppen,
     Abmelden. Sonst wandert dasselbe Problem nur eine Zeile weiter.
     ------------------------------------------------------------------ */
  .tt-mobile-overlay > *{ flex:0 0 auto; }

  /* Gruppen */
  .tt-mob-group{
    margin:8px 0; border-radius:16px; overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 22px rgba(0,0,0,.22);
  }
  .tt-mob-group-title{
    display:flex; align-items:center; gap:10px;
    background:rgba(255,255,255,.03); color:var(--tt-gold-3);
    font-size:11px; font-weight:900; text-transform:uppercase; padding:11px 16px; letter-spacing:.16em;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .tt-mob-group-title::before{content:""; width:16px; height:2px; border-radius:2px; background:var(--tt-grad-gold-h); box-shadow:0 0 10px rgba(242,193,74,.5)}
  .tt-mob-group-ico{font-size:15px; margin-right:2px}

  /* Links */
  .tt-mob-link{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; color:#e6ebff; text-decoration:none;
    font-weight:700; font-size:14.5px; border-bottom:1px solid rgba(255,255,255,.04);
    transition:background var(--tt-fast) var(--tt-ease), color var(--tt-fast) var(--tt-ease), box-shadow var(--tt-fast) var(--tt-ease);
    cursor:pointer; position:relative;
  }
  .tt-mob-link > span{display:flex; align-items:center; gap:12px; min-width:0}
  .tt-mob-link:hover{background:rgba(37,99,235,.14); color:#fff}
  .tt-mob-link.active{
    background:linear-gradient(90deg, rgba(242,193,74,.2), rgba(242,193,74,.03));
    color:#fff; box-shadow:inset 3px 0 0 var(--tt-gold), inset 0 0 0 1px rgba(242,193,74,.14);
  }
  .tt-mob-link i,.tt-mob-link .tt-mob-ico{
    width:30px; height:30px; min-width:30px; display:inline-grid; place-items:center; text-align:center;
    color:var(--tt-gold); border-radius:9px; font-size:14px; font-style:normal;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  }
  .tt-mob-link.active .tt-mob-ico{background:rgba(242,193,74,.18); border-color:rgba(242,193,74,.45); box-shadow:0 0 12px rgba(242,193,74,.3)}

  /* Logout-Sonderstyle */
  .tt-mob-link.logout{
    margin:18px 0 0; border-radius:14px; justify-content:center; gap:10px;
    color:#ffb4b4; background:rgba(255,92,92,.08); border:1px solid rgba(255,92,92,.3);
    box-shadow:0 0 18px rgba(255,92,92,.1);
  }
  .tt-mob-link.logout i,.tt-mob-link.logout .tt-mob-ico{color:#ffb4b4; background:rgba(255,92,92,.12); border-color:rgba(255,92,92,.3)}
  .tt-mob-link.logout:hover{background:rgba(255,92,92,.16)}

  /* Submenues (klappbar) */
  .tt-mob-parent{background:rgba(255,255,255,.01)}
  .tt-mob-chev{
    width:auto!important; height:auto!important; min-width:0!important; background:transparent!important; border:0!important;
    transition:transform var(--tt-med) var(--tt-ease), color var(--tt-fast) var(--tt-ease); font-size:12px!important; color:var(--tt-faint)!important;
  }
  .tt-mob-sub{display:none; background:rgba(3,7,16,.5); box-shadow:inset 0 6px 12px rgba(0,0,0,.25)}
  .tt-mob-parent.is-open{background:rgba(242,193,74,.06)}
  .tt-mob-parent.is-open .tt-mob-chev{transform:rotate(90deg); color:var(--tt-gold)!important}
  .tt-mob-parent.is-open + .tt-mob-sub{display:block; animation:tt-fade-in .2s ease}
  .tt-mob-sub .tt-mob-link{padding-left:30px; font-size:13.5px; color:#c9d2ea; border-bottom:none; font-weight:600}
  .tt-mob-sub .tt-mob-link::before{
    content:""; width:6px; height:6px; border-radius:50%; margin-right:12px; flex:0 0 auto;
    background:rgba(242,193,74,.6); box-shadow:0 0 8px rgba(242,193,74,.5);
  }
  .tt-mob-sub .tt-mob-link .tt-mob-ico,.tt-mob-sub .tt-mob-link i:first-child{display:none}
  .tt-mob-sub .tt-mob-link:hover{color:#fff}

  /* Die Seite dahinter steht still, solange das Menue offen ist. Das
     besorgt overscroll-behavior am Overlay selbst – ein overflow:hidden am
     Koerper waere der naheliegende Weg, wuerde ihn aber wieder zum
     Scrollbehaelter machen und die haftende Kopfzeile loesen. */

  /* Mobile-Userzeile */
  .tt-mob-user{
    display:flex; align-items:center; gap:12px; padding:12px 14px; margin:4px 0 6px;
    border-radius:16px; border:1px solid rgba(242,193,74,.25);
    background:linear-gradient(90deg, rgba(242,193,74,.12), rgba(255,255,255,.02));
    box-shadow:0 0 22px rgba(242,193,74,.08);
  }
}

@keyframes slideIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}