/* ============================================================
   Mobile-Navigation als Drawer (Stand 2026-07-25)
   Anhang fuer assets/dsb_navbar.css

   Die Navbar klappt unter 768px auf (expand="md"). Statt eines
   aufgeklappten Blocks wird die Collapse zu einem Panel, das von
   rechts einfaehrt. Kein Eingriff in app.py noetig - gestaltet
   wird nur, was Bootstrap ohnehin ein-/ausblendet.

   Geschlossen bleibt Bootstrap zustaendig (display:none), deshalb
   greifen alle Regeln nur an .show bzw. .collapsing.
   ============================================================ */

@media (max-width: 767.98px) {

  /* ---- Kopfzeile: Logo links, Burger rechts ---------------- */
  #main-navbar .container-fluid {
    justify-content: space-between !important;
    gap: 0 !important;
  }
  #main-navbar .navbar-toggler {
    margin-left: auto;
    border-color: rgba(255, 255, 255, 0.28);
    border-radius: 10px;
    padding: 6px 10px;
  }

  /* ---- Die Collapse wird zum Panel ------------------------- */
  #navbar-collapse.show,
  #navbar-collapse.collapsing {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(86vw, 320px);
    height: 100% !important;
    z-index: 1050;
    background: #1b2757;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: -18px 0 44px rgba(8, 14, 38, 0.45);
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex !important;
    flex-direction: column;
  }

  /* Abdunkelung dahinter (als Pseudo-Element, kein Extra-Markup) */
  #navbar-collapse.show::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(11, 18, 48, 0.55);
    z-index: -1;
  }

  /* Einfahren von rechts. Beim Schliessen blendet Bootstrap sofort
     aus (display:none), da laeuft bewusst keine Animation. */
  #navbar-collapse.show {
    animation: dsb-drawer-ein 0.22s ease-out;
  }
  @keyframes dsb-drawer-ein {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
  }

  /* ---- Bloecke: Navigation oben, Bedienung unten ----------- */
  #navbar-collapse.show .navbar-nav {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    flex-wrap: nowrap !important;
    row-gap: 2px !important;
  }

  /* Kleine Ueberschriften ohne Aenderung am Markup */
  #navbar-collapse.show #nav-links::before,
  #navbar-collapse.show .navbar-nav.ms-auto::before {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #7f8bc4;
    padding: 0 12px;
    margin-bottom: 8px;
  }
  #navbar-collapse.show #nav-links::before        { content: "Navigation"; }
  #navbar-collapse.show .navbar-nav.ms-auto::before { content: "Auswahl"; }

  /* ---- Menuepunkte ---------------------------------------- */
  #navbar-collapse.show .nav-link {
    width: 100%;
    padding: 11px 12px !important;
    font-size: 14px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    min-height: 44px;               /* bequeme Tap-Flaeche */
  }
  #navbar-collapse.show .nav-link.active {
    background: rgba(255, 255, 255, 0.10);
    box-shadow: inset 3px 0 0 #e8863b;   /* Akzentkante statt Vollflaeche */
  }
  /* Das Zahnrad steht in der Navbar allein - im Drawer braucht es Text */
  #navbar-collapse.show .nav-link[href="/einstellungen"] {
    font-size: 14px !important;
  }
  #navbar-collapse.show .nav-link[href="/einstellungen"]::after {
    content: "\00a0 Einstellungen";
  }

  /* ---- Unterer Block: Club, Monat, Konto ------------------- */
  #navbar-collapse.show .navbar-nav.ms-auto {
    margin-top: 18px !important;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    row-gap: 10px !important;
  }
  /* Inline-Breiten der Dropdowns aufheben */
  #navbar-collapse.show .navbar-nav.ms-auto .nav-item {
    width: 100%;
    margin: 0 !important;
  }
  #navbar-collapse.show .dsb-nav-select {
    width: 100% !important;
  }
  #navbar-collapse.show .navbar-nav.ms-auto .nav-link.disabled {
    padding-left: 12px !important;
  }
  #navbar-collapse.show #btn-admin-open {
    width: 100%;
  }
  #navbar-collapse.show .nav-abmelden {
    justify-content: center;
    margin-top: 4px;
  }
}

/* ============================================================
   Unterseiten im Drawer (Stand 2026-07-25)
   app.py haengt unter die AKTIVE Seite deren Reiter als
   .dsb-subnav-Links. Am Desktop bleiben sie ausgeblendet -
   dort stehen die Reiter ohnehin auf der Seite selbst.
   ============================================================ */

#main-navbar .nav-link.dsb-subnav { display: none; }

@media (max-width: 767.98px) {
  #navbar-collapse.show .nav-link.dsb-subnav {
    display: flex;
    position: relative;
    margin-left: 14px;
    padding: 8px 12px !important;
    min-height: 38px;
    font-size: 13px;
    font-weight: 500;
    color: #a8b3e0 !important;
  }
  /* feine Fuehrungslinie links neben den Unterpunkten */
  #navbar-collapse.show .nav-link.dsb-subnav::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.14);
  }
  #navbar-collapse.show .nav-link.dsb-subnav:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.07);
  }
}

/* Hauptpunkt, unter dem gerade aufgeklappt ist: Chevron als Hinweis */
@media (max-width: 767.98px) {
  #navbar-collapse.show .nav-link.active:has(+ .dsb-subnav)::after {
    content: "\25be";              /* nach unten zeigendes Dreieck */
    margin-left: auto;
    font-size: 11px;
    opacity: 0.7;
  }
}