/* TCG Keeper — gemeinsames Stylesheet, Teil 7 von 8: Binder-Protokoll, verschiebbare Fenster, Menüanpassung, untere Menüleiste.
   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. */
/* =============================================================================
   Protokoll-Archiv-Runde (Mario, 04.10.2026): Binder-Import-Protokoll —
   Symbolbuttons im Kopf jedes Protokolls, „Neu"-Kennzeichen, Karten-Link,
   verschiebbare Karten-Lightbox (assets/cardlightbox.js) und Einbett-Modus
   (?embed=1, siehe layout_top.php) für deren Inhalt.
   ============================================================================= */
.run-action-form{ display:none; }
.run-summary-right{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.run-actions{ display:inline-flex; align-items:center; gap:6px; }
.run-actions .icon-btn,
.data-table .icon-btn{ width:30px; height:30px; font-size:14px; text-decoration:none; text-transform:none; letter-spacing:0; line-height:1; padding:0; }
.icon-btn.danger:hover{ border-color:var(--danger); color:var(--danger); }
.sa-group-badge.run-new-badge{ background:var(--good); color:#fff; }
.badge.run-new-tag{ background:var(--good-soft); color:var(--good); font-weight:700; margin-left:4px; }
.run-items-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.run-items-table{ min-width:560px; }
.run-items-table a.js-card-lightbox{ font-weight:600; color:var(--accent); text-decoration:none; }
/* Hover: app-12-links.css (Eintrag 130, keine Unterstreichung) */

.cardlb{
  position:fixed; z-index:120; width:min(94vw,520px); height:min(80vh,720px); min-width:260px; min-height:220px;
  max-width:100vw; max-height:100vh; display:flex; flex-direction:column; resize:both; overflow:hidden;
  background:var(--paper-raised); color:var(--ink); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.45);
}
.cardlb[hidden]{ display:none; }
.cardlb-head{
  display:flex; align-items:center; gap:8px; padding:7px 10px; cursor:move; user-select:none; touch-action:none;
  background:var(--paper-sunken); border-bottom:1px solid var(--line); font-size:13px; font-weight:600;
}
.cardlb-grip{ color:var(--ink-faint); letter-spacing:-2px; }
.cardlb-title{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cardlb-head .icon-btn{ width:28px; height:28px; font-size:14px; text-decoration:none; cursor:pointer; flex:none; }
.cardlb-body{ flex:1; min-height:0; position:relative; }
.cardlb-body iframe{ display:block; width:100%; height:100%; border:0; background:var(--paper); }
.cardlb.dragging iframe, .cardlb.resizing iframe{ pointer-events:none; }

body.pc-embed .topbar,
body.pc-embed .nav-panel-scrim,
body.pc-embed .back-to-top-btn,
body.pc-embed .page-edit-toolbar,
body.pc-embed .pc-edit-switch,
body.pc-embed .box-order-toolbar{ display:none !important; }
body.pc-embed .page{ margin-top:0; padding-top:12px; }

/* =============================================================================
   Verschiebbare Fenster für alle Text-Lightboxen (Mario, 04.10.2026: „alle
   Lightboxen – bis auf die Großansicht der Kartenbilder – durch diese Variante
   ersetzen"). Logik in assets/pcwindow.js: ergänzt jede .lightbox-scrim mit
   .lightbox-panel (und die EAN-Scanner-Ebene) um eine Titelleiste und setzt auf
   <html> die Klasse „pcwin-on“, sobald der Fenster-Modus gilt (ab 768 px
   Breite UND kein Touchgerät). Alles Folgende steht deshalb unter
   html.pcwin-on — ohne diese Klasse (Handy, Tablets, ohne JavaScript) bleiben
   die bisherigen, vollflächigen Lightboxen völlig unverändert. Die Titelleiste
   und der Körper-Wrapper sind außerhalb des Fenster-Modus unsichtbar bzw.
   layoutneutral.
   ============================================================================= */
.pcwin-head{ display:none; }
.pcwin-body{ display:contents; }

html.pcwin-on .pcwin .pcwin-panel{
  position:fixed; margin:0; padding:0; display:flex; flex-direction:column; overflow:hidden; resize:both;
  min-width:300px; min-height:140px; max-width:calc(100vw - 16px); max-height:calc(100vh - 16px);
  border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.45);
  background:var(--paper-raised); color:var(--ink);
}
/* Nicht modal: kein Abdunkeln, Klicks daneben erreichen die Seite. */
html.pcwin-on .lightbox-scrim.pcwin,
html.pcwin-on .lightbox-scrim.pcwin.open,
html.pcwin-on .ean-scrim.pcwin{ background:none; pointer-events:none; padding:0; overflow:visible; }
html.pcwin-on .pcwin.open .pcwin-panel,
html.pcwin-on .pcwin.open .copy-viewer,
html.pcwin-on .ean-scrim.pcwin:not([hidden]) .pcwin-panel{ pointer-events:auto; }
html.pcwin-on .lightbox-scrim.pcwin > .lightbox-close{ display:none; }
/* Seite dahinter bleibt bedienbar und scrollbar. */
html.pcwin-on.copies-noscroll, html.pcwin-on.copies-noscroll body,
html.pcwin-on.ean-open, html.pcwin-on.ean-open body{ overflow:visible; }

html.pcwin-on .pcwin-head{
  display:flex; align-items:center; gap:8px; padding:7px 10px; cursor:move; user-select:none; touch-action:none; flex:none;
  background:var(--paper-sunken); border-bottom:1px solid var(--line); font-size:13px; font-weight:600;
}
html.pcwin-on .pcwin-grip{ color:var(--ink-faint); letter-spacing:-2px; }
html.pcwin-on .pcwin-title{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html.pcwin-on .pcwin-head .icon-btn{ width:28px; height:28px; font-size:14px; cursor:pointer; flex:none; }
html.pcwin-on .pcwin .pcwin-body{ display:block; flex:1 1 auto; min-height:0; overflow:auto; padding:14px 18px 18px; }
/* Der Titel steht jetzt in der Titelleiste — die ursprünglichen Titelzeilen entfallen. */
html.pcwin-on .pcwin-body > h3:first-child,
html.pcwin-on .pcwin-body > .copies-head,
html.pcwin-on .pcwin-body > .ean-head{ display:none; }
html.pcwin-on .pcwin .pcwin-panel.dragging{ user-select:none; }
html.pcwin-on .pcwin .pcwin-panel.dragging .pcwin-body{ pointer-events:none; }

/* =====================================================================
   Menüanpassung (Mario, 04.10.2026) — Verwaltung → Menüanpassung
   (public/menu_admin.php, includes/menu.php, assets/menubar.js).
   Farben/Maße aus der Konfiguration kommen als CSS-Variablen bzw. als
   kleiner <style id="pcMenuStyles">-Block aus layout_top.php; ohne
   eigene Werte gelten die bisherigen Standardfarben unverändert.
   ===================================================================== */
.topbar{ background:var(--pc-top-bg, var(--paper-raised)); }
.topbar nav a{ color:var(--pc-top-fg, var(--ink-soft)); }
.topbar .user{ color:var(--pc-top-fg, var(--ink-faint)); }
.topbar .mark{ color:var(--pc-top-fg, inherit); }
.topbar nav a.active, .topbar nav a:hover{ background:var(--pc-top-active-bg, var(--accent-soft)); color:var(--pc-top-active, var(--accent)); }
.topbar .nav-panel{ background-color:var(--pc-top-bg, var(--paper-raised)); }
.topbar.pc-bar-static{ position:relative; }
.topbar.pc-bar-noshadow, .pc-bottombar.pc-bar-noshadow{ box-shadow:none; }
.topbar.pc-bar-noborder{ border-bottom:none; }
.pc-bottombar.pc-bar-noborder{ border-top:none; }
/* Logo mit Schrift als Hyperlink (abschaltbar) */
a.brand-row, a.brand-link{ text-decoration:none; color:inherit; }
a.brand-row:hover .mark{ color:var(--pc-top-active, var(--accent)); }
/* Symbole: eingebaute Linien-Symbole (svg:…) und hochgeladene Bilder (img:…) */
.nav-icon{ display:inline-flex; align-items:center; justify-content:center; }
.nav-icon .pc-svg-icon, .nav-icon .pc-img-icon{ width:1.25em; height:1.25em; }
.pc-img-icon{ object-fit:contain; display:block; }
/* Menüpunkte nur auf Desktop bzw. nur mobil (Einstellung je Menüpunkt/Leiste).
   Folgt der Navigationsansicht: der Mobil/Desktop-Umschalter erzwingt sie. */
@media (max-width:640px){ html:not([data-nav-view="desktop"]) .pc-hide-mobile{ display:none !important; } }
@media (min-width:641px){ html:not([data-nav-view="mobile"]) .pc-hide-desktop{ display:none !important; } }
html[data-nav-view="mobile"] .pc-hide-mobile, html[data-nav-view="desktop"] .pc-hide-desktop{ display:none !important; }
/* Ausrichtung der Navigation in der oberen Leiste (nur Desktop-Leiste) */
@media (min-width:641px){
  html:not([data-nav-view="mobile"]) .topbar.pc-align-center .spacer,
  html:not([data-nav-view="mobile"]) .topbar.pc-align-right .spacer{ display:none; }
  html:not([data-nav-view="mobile"]) .topbar.pc-align-center nav{ margin-left:auto; margin-right:auto; }
  html:not([data-nav-view="mobile"]) .topbar.pc-align-right nav{ margin-left:auto; }
}
/* Dock-Vergrößerung (wie macOS): Ziel-Elemente setzt assets/menubar.js */
.pc-dock-target{ transition:transform .14s ease-out; will-change:transform; }
.pc-dock-up{ position:relative; z-index:3; }

/* ---- Untere Menüleiste ------------------------------------------------- */
.pc-bottombar{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  background:var(--pc-bb-bg, var(--paper-raised)); color:var(--pc-bb-fg, var(--ink-soft));
  border-top:1px solid var(--line); box-shadow:0 -4px 18px rgba(20,20,40,.08);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
body.pc-has-bottombar{ padding-bottom:var(--pc-bb-space, 0px); }
body.pc-nav-open .topbar{ z-index:70; }
body.pc-has-bottombar .back-to-top-btn{ bottom:calc(var(--pc-bb-space, 0px) + 20px); }
@media (max-width:640px){
  body.pc-has-bottombar .back-to-top-btn{ bottom:calc(var(--pc-bb-space, 0px) + 14px); }
}
@media print{ .pc-bottombar{ display:none !important; } body.pc-has-bottombar{ padding-bottom:0; } }
body.pc-embed .pc-bottombar{ display:none !important; }
.pc-bottombar .pc-bb-inner{ box-sizing:border-box; }

/* Modus „Tab-Leiste“ (wie im Screenshot): Symbol über Text, gleichmäßig
   verteilt, aktiver Punkt mit Strich oben, optional runder Mittelknopf. */
.pc-bb-tabbar .pc-bb-inner{
  display:flex; align-items:stretch; justify-content:space-around; gap:0;
  min-height:66px; padding:0 8px; margin:0 auto;
}
.pc-bb-item{
  flex:1 1 0; min-width:0; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:9px 4px 8px; margin:0; background:none; border:none; border-radius:0;
  color:inherit; font:inherit; font-size:13px; text-decoration:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.pc-bb-item:hover, .pc-bb-item:focus-visible{ color:var(--pc-bb-active, var(--ink)); }
.pc-bb-item:focus-visible{ outline:2px solid var(--accent); outline-offset:-4px; border-radius:10px; }
.pc-bb-item.active{ color:var(--pc-bb-active, var(--ink)); font-weight:700; }
.pc-bb-item.active::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:48px; max-width:70%; height:3px; border-radius:0 0 3px 3px; background:currentColor;
}
.pc-bb-icon{ display:inline-flex; align-items:center; justify-content:center; height:28px; font-size:22px; line-height:1; }
.pc-bb-icon .pc-svg-icon{ width:26px; height:26px; }
.pc-bb-icon .pc-img-icon{ width:26px; height:26px; }
.pc-bb-label{ font-size:13px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.pc-bb-nolabels .pc-bb-inner{ min-height:54px; }
.pc-bb-center .pc-bb-icon{
  width:64px; height:64px; margin-top:-30px; border-radius:50%;
  background:var(--pc-bb-active-bg, var(--ink)); color:var(--paper-raised);
  box-shadow:0 6px 16px rgba(0,0,0,.22);
}
.pc-bb-center .pc-bb-icon .pc-svg-icon{ width:30px; height:30px; }
.pc-bb-center.active::before{ display:none; }
.pc-bb-sep{ flex:none; width:1px; margin:14px 2px; background:var(--line); }
.pc-bb-static{ cursor:default; }
.pc-bb-item .js-print-count{ position:absolute; top:4px; left:calc(50% + 8px); font-size:11px; font-weight:700; }
.pc-bb-item .api-status-dot{ width:14px; height:14px; }
/* Bearbeitungsmodus-Schalter in der Tab-Leiste: ganze Fläche ist der Schalter */
.pc-bb-switch input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer; }
.pc-bb-switch .switch-slider{ display:none; }
.pc-bb-switch:has(input:checked){ color:var(--pc-bb-active, var(--accent)); font-weight:700; }
.pc-bb-group{ flex:1 1 0; min-width:0; display:flex; }
.pc-bb-group > .pc-bb-item{ flex:1 1 auto; }
@media (max-width:420px){
  .pc-bb-item{ padding-left:1px; padding-right:1px; }
  .pc-bb-label{ font-size:11px; letter-spacing:-.01em; }
  .pc-bb-tabbar .pc-bb-inner{ padding:0 2px; }
}

/* Gruppen der unteren Leiste öffnen nach oben als kleines Fenster (Position
   setzt assets/menubar.js). "html .pc-bottombar …" gewinnt bewusst gegen
   die Hamburger-Regeln der oberen Leiste (html[data-nav-view] .nav-group…
   bzw. @media max-width:640px .nav-group-panel{display:contents}). */
.pc-bb-panel, html .pc-bottombar .nav-group-panel{
  position:fixed; top:auto; right:auto; margin:0; display:none; flex-direction:column; gap:1px;
  min-width:190px; max-height:60vh; overflow-y:auto; padding:6px; z-index:46;
  background:var(--paper-raised); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  opacity:1; visibility:visible; transform:none; transition:none;
}
.pc-bb-group.js-open > .pc-bb-panel, html .pc-bottombar .nav-group.js-open > .nav-group-panel{ display:flex; }
.pc-bb-panel a, .pc-bottombar .nav-group-panel a{
  display:flex; align-items:center; gap:6px; padding:9px 12px; border-radius:8px;
  color:var(--ink); text-decoration:none; font-size:14px; font-weight:600; white-space:nowrap;
}
.pc-bb-panel a:hover, .pc-bb-panel a.active, .pc-bottombar .nav-group-panel a:hover, .pc-bottombar .nav-group-panel a.active{
  background:var(--accent-soft); color:var(--accent);
}
.pc-bb-panel .nav-sep, .pc-bottombar .nav-group-panel .nav-sep{ width:auto; height:1px; margin:4px; }

/* Modus „Leiste“: aufgebaut wie die obere Leiste */
.pc-bb-bar .pc-bb-inner{ display:flex; align-items:center; gap:12px; min-height:52px; padding:6px 16px; }
.pc-bb-bar .brand-row{ display:flex; align-items:center; gap:9px; flex:none; }
.pc-bb-bar .brand-logo{ width:var(--logo-size-topbar); height:var(--logo-size-topbar); object-fit:contain; }
.pc-bb-bar .brand{ display:flex; flex-direction:column; line-height:1.15; }
.pc-bb-bar .mark{ font-weight:700; font-size:16px; color:var(--pc-bb-fg, var(--ink)); }
.pc-bb-bar .mark-credit{ font-size:10.5px; color:var(--ink-faint); }
.pc-bb-bar .pc-bb-nav{ display:flex; align-items:center; gap:4px; min-width:0; overflow-x:auto; scrollbar-width:none; }
.pc-bb-bar .pc-bb-nav::-webkit-scrollbar{ display:none; }
.pc-bb-bar .pc-bb-nav > a, html .pc-bottombar .nav-group-trigger{
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:8px; white-space:nowrap;
  text-decoration:none; color:var(--pc-bb-fg, var(--ink-soft)); font-size:13.5px; font-weight:600;
}
.pc-bb-bar .pc-bb-nav > a.active, .pc-bb-bar .pc-bb-nav > a:hover,
html .pc-bottombar .nav-group-trigger.active, html .pc-bottombar .nav-group-trigger:hover{
  background:var(--pc-bb-active-bg, var(--accent-soft)); color:var(--pc-bb-active, var(--accent));
}
html .pc-bottombar .nav-group{ position:relative; display:inline-flex; }
.pc-bb-bar .spacer{ flex:1; }
.pc-bb-bar .pc-bb-right{ display:flex; align-items:center; gap:8px; font-size:13px; flex:none; }
.pc-bb-bar .nav-sep{ align-self:stretch; }
@media (max-width:640px){
  .pc-bb-bar .pc-bb-inner{ gap:8px; padding:6px 10px; }
  .pc-bb-bar .brand{ display:none; }
  .pc-bb-bar .pc-bb-nav .nav-label{ display:none; }
  .pc-bb-bar .pc-bb-right .nav-label, .pc-bb-bar .pc-bb-right .pc-edit-switch-text{ display:none; }
}