/* PATCH 1.339 – Hamburger Menu (Mobile only) */
.hamburger-btn, .hamburger-overlay, .hamburger-drawer { display:none; }

@media (max-width: 768px){
  .hamburger-btn{
    display:inline-flex;
    position:fixed;
    top:12px; right:12px;
    width:44px; height:44px;
    border-radius:12px;
    border:1px solid rgba(0,145,90,.28);
    background:var(--control-bg);
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:4px;
    z-index:30050;
    box-shadow:0 10px 30px rgba(0,0,0,.10);
  }
  .hamburger-line{
    display:block;
    width:18px;
    height:2px;
    border-radius:2px;
    background: var(--accent-dark);
  }

  .hamburger-overlay{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:30040;
    opacity:0;
    pointer-events:none;
    transition:opacity .15s ease;
  }
  .hamburger-overlay.show{ opacity:1; pointer-events:auto; }

  .hamburger-drawer{
    display:flex;              /* 5.912: Spalte — Liste scrollt, Logout bleibt fest */
    flex-direction:column;
    position:fixed;
    top:0; right:0;
    /* 100vh reicht auf iOS Safari UNTER die untere Browserleiste — der letzte
       Eintrag (Logout) war unerreichbar. dvh = dynamischer Viewport, der die
       Leiste mitrechnet; vh als Fallback fuer aeltere Browser.
       Dieselbe Falle wie 5.306 (bank_match_modal), hier im Menue. */
    height:100vh;
    height:100dvh;
    width:min(86vw, 340px);
    background:var(--card-bg);
    z-index:30045;
    transform:translateX(100%);
    transition:transform .2s ease;
    padding:calc(14px + env(safe-area-inset-top)) 14px 0 14px;
    overflow:hidden;           /* der Rahmen scrollt nicht — nur die Liste darin */
    box-shadow:0 20px 60px rgba(0,0,0,.25);
    border-top-left-radius:18px;
    border-bottom-left-radius:18px;
  }
  /* 5.912: Die Navigation ist der scrollende Teil. */
  .hamburger-drawer .hamburger-nav{
    flex:1 1 auto;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    /* Platz, damit der letzte Listeneintrag nicht unter dem Logout-Knopf klebt */
    padding-bottom:12px;
  }
  /* 5.912: Logout als fester Fussbereich — immer sichtbar, egal wie lang die
     Liste ist. Der Home-Indicator/Leisten-Abstand kommt hier drauf. */
  .hamburger-drawer .hamburger-foot{
    flex:0 0 auto;
    border-top:1px solid rgba(15,23,42,.12);
    padding:12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
    background:var(--card-bg);
  }
  .hamburger-drawer.open{ transform:translateX(0); }
  body.no-scroll{ overflow:hidden !important; }
  /* 5.914: Bei offenem Menue den Oeffnen-Knopf ausblenden — sonst verdeckt er
     (hoeherer z-index) den Schliessen-Knopf im Menuekopf. */
  body.hamburger-open .hamburger-btn{ display:none !important; }

  .hamburger-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding-bottom:10px;
    background: linear-gradient(135deg, var(--accent-soft), var(--drawer-gradient-end));
    border-radius: 14px;
    padding: 10px 10px 10px 10px;
    border-bottom:1px solid rgba(15,23,42,.10);
    margin-bottom:10px;
  }
  .hamburger-title{ font-weight:700; font-size:18px; color:var(--text); }
  .hamburger-close{
    width:36px; height:36px;
    border-radius:10px;
    border:1px solid rgba(0,145,90,.28);
    background:var(--control-bg);
    color:var(--text);
    font-size:22px;
    line-height:1;
  }

  .hamburger-nav a,
  .hamburger-nav button.hamburger-link{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 10px;
    border-radius:12px;
    border:1px solid transparent;
    text-decoration:none;
    color:var(--text);
    width:100%;
    background:transparent;
    cursor:pointer;
    font:inherit;
    text-align:left;
  }
  .hamburger-nav a:active,
  .hamburger-nav button.hamburger-link:active{ background:rgba(15,23,42,.06); }

  .topbar { padding-right: 64px; } /* room for the button */
}

@media (max-width: 768px){ .topnav{ display:none !important; } }

  .hamburger-nav a[aria-current="page"], .hamburger-nav a.active, .hamburger-nav button.hamburger-link.active{ background: var(--accent-soft); color: var(--accent-dark); }
  .hamburger-nav a, .hamburger-nav button.hamburger-link{ word-break: break-word; }


@media (max-width: 768px){
  html[data-vrah-theme="dark"] .hamburger-btn{ box-shadow:0 10px 30px rgba(0,0,0,.34); }
  html[data-vrah-theme="dark"] .hamburger-overlay{ background:rgba(2,6,23,.68); }
  html[data-vrah-theme="dark"] .hamburger-drawer{ border-left:1px solid var(--border); }
  html[data-vrah-theme="dark"] .hamburger-link{ border:1px solid transparent; }
  html[data-vrah-theme="dark"] .hamburger-link:hover,
  html[data-vrah-theme="dark"] .hamburger-link:active{ background:rgba(148,163,184,.08); border-color:rgba(148,163,184,.16); }
}

/* 6.516: Keine Aufzählungspunkte im Handy-Menü (leere Punkte an den Trennlinien und vor 🔔/🌙). Die Trennlinie ist jetzt
   eine dünne Linie statt eines leeren Listenpunkts. */
@media (max-width: 768px){
  .hamburger-nav .hamburger-list{ list-style:none; margin:0; padding:0; }
  .hamburger-nav .hamburger-list > li{ list-style:none; }
  .hamburger-nav .hamburger-sep{ height:1px; margin:8px 4px; background:rgba(15,23,42,.10); }
  html[data-vrah-theme="dark"] .hamburger-nav .hamburger-sep{ background:var(--border, rgba(255,255,255,.12)); }
}