/* TCG Keeper — gemeinsames Stylesheet, Teil 2 von 8: Navigation: obere Leiste, Hamburger-Menü, Gruppen, Umschalter, API-Lämpchen.
   Bis 09.10.2026 eine einzige Datei app.css; aufgeteilt ohne inhaltliche Änderung.
   Alle Teile werden in includes/layout_top.php in dieser Reihenfolge eingebunden —
   die Reihenfolge bestimmt die Kaskade, Regeln nicht zwischen Teilen verschieben. */
/* Hamburger-Menü: auf dem Desktop unsichtbar und wirkungslos (.nav-panel
   bleibt via display:contents ein "unsichtbarer" Wrapper, seine Kinder
   — nav/spacer/user — verhalten sich also weiterhin genau wie vorher direkt
   in der .topbar). Erst ab max-width:640px (siehe dort) wird daraus ein von
   rechts einschiebendes Menü. WICHTIG: dieser Block muss vor der
   @media(max-width:640px)-Regel unten stehen — bei gleicher Spezifität
   gewinnt sonst die spätere (unbedingte) Regel auch auf schmalen
   Bildschirmen und das Hamburger-Menü bliebe unsichtbar. */
.hamburger-btn{ display:none; }
.nav-panel{ display:contents; }
.nav-panel-close{ display:none; }
.nav-panel-scrim{ display:none; }

/* "Verwaltung" nav group: Admin/Binder-Import/Offline-Import/Katalog live
   here as a hover/focus dropdown (no JS framework in this app, so this is
   pure CSS) that opens toward the left of its trigger. On mobile there's no
   room/no hover for a flyout, so the sub-links are shown flat, inline in
   the top menu instead (see the max-width:640px override below). WICHTIG
   (Bugfix 22.09.2026, "Verwaltung" reagierte im Hamburger-Menü nicht): wie
   beim Hamburger-Block oben MUSS dieser Basis-Block vor der
   @media(max-width:640px)-Regel stehen — sonst gewinnt diese unbedingte
   Regel bei gleicher Spezifität auch auf schmalen Bildschirmen gegen die
   dortige Auflösung in eine flache Liste, und "Verwaltung ▾" bleibt ein
   wirkungsloser Dropdown-Trigger ohne Hover-Möglichkeit. */
.nav-group{ position:relative; }
.nav-group-trigger{ display:inline-flex; align-items:center; gap:5px; }
.nav-caret{ font-size:9px; position:relative; top:1px; }
.nav-group-panel{
  position:absolute; top:100%; right:0; left:auto; margin-top:6px;
  background:var(--paper-raised); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); padding:6px; display:flex; flex-direction:column; gap:1px;
  min-width:180px; z-index:30;
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
/* ".js-open" (Mario, 27.09.2026, "wenn auf einer anderen Stelle getippt
   wird, soll der Menüpunkt wieder geschlossen werden"): eigenständige, per
   JavaScript gesetzte Klasse (siehe layout_top.php) zusätzlich zu
   :hover/:focus-within — nötig, weil ein Tap daneben auf iOS/Safari den
   fokussierten Auslöser nicht zuverlässig entfokussiert, :focus-within also
   allein nicht ausreicht, um das Dropdown wieder zu schließen. */
.nav-group:hover .nav-group-panel, .nav-group:focus-within .nav-group-panel, .nav-group.js-open .nav-group-panel{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .15s ease, transform .15s ease, visibility 0s;
}
.nav-group-panel a{ white-space:nowrap; }

/* Slightly larger base size on desktop (was 15px); on narrow screens scale
   fluidly with the viewport instead of a single fixed size. */
@media (max-width:640px){
  body{ font-size:clamp(13.5px, 3.6vw, 16px); }
  /* No hover on touch screens, and not enough room for a flyout — fold the
     "Verwaltung" group flat into the top menu instead of a dropdown. */
  .nav-group{ position:static; display:contents; }
  .topbar .nav-group-trigger{ display:none; }
  .nav-group-panel{
    position:static; opacity:1; visibility:visible; transform:none; display:contents;
  }

  /* Hamburger-Menü: die Topbar zeigt nur noch Logo + diesen Knopf, alles
     andere (nav/Verwaltung/Nutzer/Theme-Umschalter/Abmelden) wandert in ein
     Panel, das von rechts hereingleitet. */
  .hamburger-btn{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    width:38px; height:38px; margin-left:auto; padding:0; flex:none;
    border:1px solid var(--line); border-radius:9px; background:var(--paper-raised); cursor:pointer;
  }
  .hamburger-btn span{ display:block; width:18px; height:2px; border-radius:2px; background:var(--ink-soft); }
  .nav-panel{
    display:flex; flex-direction:column; gap:2px;
    position:fixed; top:0; right:0; bottom:0; width:min(80vw,300px);
    background:var(--paper-raised); box-shadow:var(--shadow); z-index:60;
    padding:64px 18px 22px; overflow-y:auto;
    transform:translateX(100%); transition:transform .28s ease;
  }
  .nav-panel.open{ transform:translateX(0); }
  .nav-panel nav{ flex-direction:column; align-items:stretch; gap:2px; }
  .nav-panel nav a{ padding:10px 8px; border-radius:8px; }
  .nav-panel nav .nav-sep{ width:auto; height:1px; align-self:stretch; margin:6px 4px; }
  .nav-panel .spacer{ display:none; }
  .nav-panel .user{
    flex-direction:column; align-items:stretch; gap:8px; margin-top:14px; padding-top:14px;
    border-top:1px solid var(--line); font-size:13.5px;
  }
  .nav-panel .user .theme-toggle-btn, .nav-panel .user a.btn{ width:100%; justify-content:center; }
  .nav-panel-close{
    display:flex; align-items:center; justify-content:center; position:absolute; top:12px; right:14px;
    width:32px; height:32px; border:none; background:none; color:var(--ink-soft); font-size:22px; cursor:pointer;
  }
  .nav-panel-scrim{
    display:block; position:fixed; inset:0; background:rgba(10,10,16,.4); z-index:50;
    opacity:0; pointer-events:none; transition:opacity .28s ease;
  }
  .nav-panel-scrim.open{ opacity:1; pointer-events:auto; }
}

/* Manueller Mobil/Desktop-Umschalter für die Navigation (Mario, 22.09.2026,
   "Umschaltknopf oben rechts", #navViewToggleBtn in layout_top.php):
   erzwingt unabhängig von der echten Fensterbreite die mobile
   Hamburger-Darstellung bzw. die normale Desktop-Menüleiste. Betrifft
   bewusst NUR die Navigation (dieser Block) — Kartenraster/Seitenlayout &
   Co. bleiben unangetastet, die automatische Umschaltung per @media
   (max-width:640px) oben bleibt unverändert bestehen und greift weiterhin
   normal, solange kein [data-nav-view] auf <html> gesetzt ist. Jede Regel
   hier hat mit Attribut+Klasse höhere Spezifität als die einfachen
   Klassen-Regeln oben bzw. in der @media-Regel, damit sie IMMER gewinnt,
   egal in welcher Fensterbreite/Reihenfolge — siehe dazu auch den
   Bugfix-Kommentar weiter oben beim ".nav-group"-Basis-Block. */
html[data-nav-view="mobile"] .hamburger-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  width:38px; height:38px; margin-left:auto; padding:0; flex:none;
  border:1px solid var(--line); border-radius:9px; background:var(--paper-raised); cursor:pointer;
}
html[data-nav-view="mobile"] .hamburger-btn span{ display:block; width:18px; height:2px; border-radius:2px; background:var(--ink-soft); }
html[data-nav-view="mobile"] .nav-panel{
  display:flex; flex-direction:column; gap:2px;
  position:fixed; top:0; right:0; bottom:0; width:min(80vw,300px);
  background:var(--paper-raised); box-shadow:var(--shadow); z-index:60;
  padding:64px 18px 22px; overflow-y:auto;
  transform:translateX(100%); transition:transform .28s ease;
}
html[data-nav-view="mobile"] .nav-panel.open{ transform:translateX(0); }
html[data-nav-view="mobile"] .nav-panel nav{ flex-direction:column; align-items:stretch; gap:2px; }
html[data-nav-view="mobile"] .nav-panel nav a{ padding:10px 8px; border-radius:8px; }
html[data-nav-view="mobile"] .nav-panel nav .nav-sep{ width:auto; height:1px; align-self:stretch; margin:6px 4px; }
html[data-nav-view="mobile"] .nav-panel .spacer{ display:none; }
html[data-nav-view="mobile"] .nav-panel .user{
  flex-direction:column; align-items:stretch; gap:8px; margin-top:14px; padding-top:14px;
  border-top:1px solid var(--line); font-size:13.5px;
}
html[data-nav-view="mobile"] .nav-panel .user .theme-toggle-btn,
html[data-nav-view="mobile"] .nav-panel .user a.btn{ width:100%; justify-content:center; }
html[data-nav-view="mobile"] .nav-panel-close{
  display:flex; align-items:center; justify-content:center; position:absolute; top:12px; right:14px;
  width:32px; height:32px; border:none; background:none; color:var(--ink-soft); font-size:22px; cursor:pointer;
}
html[data-nav-view="mobile"] .nav-panel-scrim{
  display:block; position:fixed; inset:0; background:rgba(10,10,16,.4); z-index:50;
  opacity:0; pointer-events:none; transition:opacity .28s ease;
}
html[data-nav-view="mobile"] .nav-panel-scrim.open{ opacity:1; pointer-events:auto; }
html[data-nav-view="mobile"] .nav-group{ position:static; display:contents; }
html[data-nav-view="mobile"] .nav-group-trigger{ display:none; }
html[data-nav-view="mobile"] .nav-group-panel{
  position:static; opacity:1; visibility:visible; transform:none; display:contents;
}

html[data-nav-view="desktop"] .hamburger-btn{ display:none; }
html[data-nav-view="desktop"] .nav-panel{ display:contents; }
html[data-nav-view="desktop"] .nav-panel-close{ display:none; }
html[data-nav-view="desktop"] .nav-panel-scrim{ display:none; }
html[data-nav-view="desktop"] .nav-group{ position:relative; }
html[data-nav-view="desktop"] .nav-group-trigger{ display:inline-flex; align-items:center; gap:3px; }
html[data-nav-view="desktop"] .nav-group-panel{
  position:absolute; top:100%; right:0; left:auto; margin-top:6px;
  background:var(--paper-raised); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); padding:6px; display:flex; flex-direction:column; gap:1px;
  min-width:180px; z-index:30;
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
html[data-nav-view="desktop"] .nav-group:hover .nav-group-panel,
html[data-nav-view="desktop"] .nav-group:focus-within .nav-group-panel,
html[data-nav-view="desktop"] .nav-group.js-open .nav-group-panel{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .15s ease, transform .15s ease, visibility 0s;
}
a{ color:var(--accent); }
code{ font-family:var(--font-mono); font-size:var(--font-size-mono); font-weight:var(--font-weight-mono); font-style:var(--font-style-mono); }

.topbar{
  /* flex-wrap:nowrap (Mario, 27.09.2026, "Menü und Statusleiste rechts
     sollen immer auf einer Ebene bleiben - kein Umbruch!"): bislang konnte
     bei mittleren Breiten der rechte Nutzer-Bereich (.user) unter die
     Kopfzeile rutschen. Damit das bei KEINER Breite oberhalb des mobilen
     Hamburger-Umbruchs (@media max-width:640px weiter oben, dort verlässt
     .nav-panel den normalen Fluss der .topbar ohnehin per position:fixed)
     mehr passiert, wird stattdessen ab einer gewissen Breite die
     Navigation kompakt (siehe @media(max-width:1479px) unten, blendet
     .nav-label aus) — dadurch bleibt genug Platz, damit hier nichts mehr
     umbrechen muss. */
  display:flex; align-items:center; gap:16px; padding:12px 20px;
  background:var(--paper-raised); border-bottom:1px solid var(--line); box-shadow:var(--shadow);
  position:sticky; top:0; z-index:20; flex-wrap:nowrap;
}
.topbar .brand-row{ display:flex; align-items:center; gap:9px; flex:none; }
.topbar .brand-logo{ width:var(--logo-size-topbar); height:var(--logo-size-topbar); object-fit:contain; flex:none; }
.topbar .brand{ display:flex; flex-direction:column; line-height:1.15; }
.topbar .mark{ font-weight:700; font-size:17px; letter-spacing:-.01em; }
.topbar .mark-credit{ font-size:10.5px; font-weight:500; color:var(--ink-faint); letter-spacing:.02em; }
.topbar nav{ display:flex; gap:4px; flex-wrap:nowrap; }
.topbar nav a{
  text-decoration:none; color:var(--ink-soft); font-size:13.5px; font-weight:600;
  padding:7px 12px; border-radius:8px;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.topbar nav a.active, .topbar nav a:hover{ background:var(--accent-soft); color:var(--accent); }
.topbar .spacer{ flex:1; }
.nav-icon{ line-height:1; }
/* Icon-only-Kompaktmodus (Mario, 27.09.2026, "Ab einer schmalen
   Seitenbreite, wenn der Umbruch erfolgen würde, sollen bei den
   Menüpunkten nur noch die Symbole sichtbar sein"): greift zwischen dem
   mobilen Hamburger-Umbruch (@media max-width:640px, dort steht der volle
   Text im aufklappenden Menü ohnehin nicht im Weg) und der Breite, ab der
   Icon+Text der ganzen Kopfzeile wieder anstandslos in eine Zeile passt
   (per Playwright-Test ermittelt, siehe Logbuch) — blendet nur .nav-label
   aus, .nav-icon/.nav-caret sowie die Druckliste-Anzahl bleiben stehen,
   dadurch bleiben alle Menüpunkte als reine, aber weiterhin eindeutig
   anklickbare Icon-Knöpfe erhalten. Titel-Attribut auf jedem Link liefert
   dafür einen Tooltip mit dem vollen Namen (Desktop mit Maus). */
/* Home-Dashboard (04.10.2026): Grenze von 1279px auf 1389px angehoben — der
   neue Menüpunkt „Home“ macht die volle Kopfzeile ~90px breiter (per
   Playwright gemessen: 1372px nötig; vorher 1282px, d. h. bei genau 1280px
   lief sie schon 2px über).
   04.10.2026 (Bearbeitungsmodus): der neue Schiebeschalter oben rechts
   braucht weitere ~70px → volle Kopfzeile jetzt 1467px, Grenze 1479px. */
/* Menüanpassung (04.10.2026): statt einer festen Pixelgrenze setzt
   assets/menubar.js die Klasse .pc-nav-compact genau dann, wenn die obere
   Leiste sonst nicht in eine Zeile passt (Kompaktmodus „automatisch“) —
   die Zahl der Menüpunkte ist jetzt frei änderbar, eine feste Grenze
   stimmt dadurch nicht mehr. „Immer“/„nie“ lässt sich in der
   Menüanpassung einstellen. */
.topbar.pc-nav-compact{ gap:6px; padding-top:10px; padding-bottom:10px; }
.topbar.pc-nav-compact nav{ gap:0; }
.topbar.pc-nav-compact nav > a, .topbar.pc-nav-compact .nav-group-trigger{ padding:6px 6px; gap:0; }
.topbar.pc-nav-compact .nav-label{ display:none; }
.topbar.pc-nav-compact .nav-sep{ margin:4px 1px; }
.topbar.pc-nav-compact .user{ gap:3px; }
@media (min-width:641px){
  .topbar.pc-nav-compact{ padding-left:12px; padding-right:12px; }
}

/* Schiebeschalter Bearbeitungsmodus (04.10.2026): zwischen 641 und 719px
   ist die kompakte Kopfzeile sonst ~40px zu breit — dort Stift-Symbol am
   Schalter und den Schriftzug neben dem Logo ausblenden (Logo bleibt). */
@media (min-width:641px) and (max-width:719px){
  .pc-edit-switch-icon{ display:none; }
  .topbar .brand{ display:none; }
}

/* Trennstriche zwischen "TCG"/"TCG Pocket"/den übrigen Menüpunkten (Mario,
   17.09.2026, "TCG Pocket"-Bereich) — schlichter, schmaler Strich statt
   Text, gleiche Optik wie die dezenten Trenner in den Filterboxen (Entry
   69). Auf dem Desktop (.topbar nav ist eine Zeile) eine senkrechte Linie
   mit etwas Luft, im Hamburger-Menü (.nav-panel nav ist eine Spalte, siehe
   die max-width:640px-Regel unten) eine waagerechte. */
.nav-sep{ width:1px; align-self:stretch; margin:4px 4px; background:var(--line); flex:none; }
.topbar .user{ font-size:13px; color:var(--ink-faint); display:flex; align-items:center; gap:8px; }
.theme-toggle-btn{ padding:5px 9px; font-size:14px; line-height:1; }

/* API Live Checker (Mario, 13.09.2026 second follow-up) — header light +
   its lightbox rows. */
.api-status-btn{ padding:5px 9px; display:inline-flex; align-items:center; justify-content:center; }
.api-status-dot{
  display:inline-block; width:11px; height:11px; border-radius:50%;
  background:#8a8a99; box-shadow:0 0 0 2px rgba(255,255,255,.15) inset;
  transition:background-color .2s;
}
.api-status-dot.ok{ background:#2fb35c; }
.api-status-dot.down{ background:#e6483f; }
.api-status-dot.unknown{ background:#8a8a99; }
.api-status-list{ display:flex; flex-direction:column; gap:12px; }
.api-status-row{ display:flex; align-items:flex-start; gap:10px; }
.api-status-row .api-status-dot{ margin-top:4px; flex:0 0 auto; }
.api-status-row-body{ min-width:0; }
.api-status-row-name{ font-weight:600; }
.api-status-row-detail{ font-size:13px; }
.api-status-row-meta{ font-size:12px; color:var(--ink-faint); }

.page{ max-width:1080px; margin:0 auto; padding:24px 20px 60px; }