/* Gemeinsame Basis fuer alle Seiten des FBM-Retouren-Frontends.
 *
 * Hier stehen nur Regeln, die vorher in sechs oder mehr Seiten identisch
 * dupliziert waren. Seitenspezifisches bleibt im <style>-Block der Seite;
 * der wird NACH diesem Stylesheet geladen und gewinnt daher bei
 * gleicher Spezifitaet. app.css darf keine Sammelstelle werden.
 */

:root{
  --bg:#f4f5f7; --card:#fff; --line:#e2e5ea; --ink:#1c2330;
  --muted:#6b7280; --accent:#2d6cdf; --green:#138a4f;
  --amber:#b9770a; --red:#c0392b; --radius:10px;
}

*{ box-sizing:border-box; }
body{ margin:0; font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      background:var(--bg); color:var(--ink); }
a{ color:inherit; text-decoration:none; }

button{ font:inherit; cursor:pointer; border:1px solid var(--line); background:#fff;
        border-radius:8px; padding:7px 13px; }
button.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
button.ghost{ background:transparent; color:#fff; border-color:#ffffff55; }
button:disabled{ opacity:.5; cursor:not-allowed; }
button:hover{ filter:brightness(.97); }

header{ background:var(--ink); color:#fff; padding:12px 20px; display:flex;
        align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
header h1{ font-size:17px; margin:0; font-weight:600; }

/* Die max-width setzt jede Seite selbst - sie schwankt zwischen 1000 und 1180 px. */
main{ margin:18px auto; padding:0 16px; }

/* --- Navigationsleiste (wird von nav.js befuellt) --- */
.sidebar{ position:fixed; top:0; left:0; width:210px; height:100vh; background:var(--ink);
          color:#fff; display:flex; flex-direction:column; padding:14px 0; z-index:20;
          overflow-y:auto; scrollbar-width:thin; scrollbar-color:#3a4454 transparent; }
/* .sidebar setzt display:flex und wuerde das hidden-Attribut sonst
   ueberstimmen - die Uebersicht braucht die Leiste ohne Aufblitzen weg. */
.sidebar[hidden]{ display:none; }
.sidebar::-webkit-scrollbar{ width:6px; }
.sidebar::-webkit-scrollbar-thumb{ background:#3a4454; border-radius:3px; }
/* Rueckweg zur Uebersicht. Die Leiste zeigt nur die aktuelle Gruppe,
   der Gruppenwechsel laeuft ueber die Startseite. */
.navback{ display:block; color:#aeb6c2; font-size:13px; padding:2px 18px 14px;
          text-decoration:none; }
.navback:hover{ color:#fff; }
.navgruppe{ font-size:11px; text-transform:uppercase; letter-spacing:.09em;
            color:#8892a0; font-weight:700; padding:0 18px 8px; }
.navlink{ display:flex; align-items:center; gap:9px; padding:11px 18px; color:#dfe3ea;
          text-decoration:none; font-size:14px; border-left:3px solid transparent; }
.navlink:hover{ background:#ffffff14; }
.navlink.active{ background:#ffffff1f; border-left-color:var(--accent); color:#fff; font-weight:600; }
.navfill{ flex:1; }
.navuser{ padding:8px 18px; font-size:13px; color:#aeb6c2; }
.navlogout{ margin:6px 14px 2px; background:transparent; color:#fff; border:1px solid #ffffff33;
            border-radius:8px; padding:6px 12px; cursor:pointer; }
.appbody{ margin-left:210px; }

/* --- Bausteine --- */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
       padding:14px 16px; margin-bottom:12px; }
/* Spaltenzahl schwankt je Seite (3 bis 5) und wird dort gesetzt. */
.cards{ display:grid; gap:14px; margin-bottom:16px; }
.stat{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
       padding:12px 14px; }
.stat .value{ font-size:25px; font-weight:700; margin-top:3px; }

/* .badge = eckiger Chip fuer Status in Tabellen.
 * .label = runde Kapsel fuer Kategorie-Labels.
 * Vorher hiessen beide .badge und widersprachen sich.
 *
 * Heisst .label und nicht .pill, weil az.html .pill bereits fuer seine
 * grossen Filter-Chips belegt (inline-flex, 8px 14px, radius 999px). */
.badge{ display:inline-block; border-radius:6px; padding:1px 8px; font-size:12px;
        font-weight:600; white-space:nowrap; }
.label{ display:inline-block; border-radius:20px; padding:2px 9px; font-size:12px;
        white-space:nowrap; }

.muted{ color:var(--muted); font-size:13px; }
.empty{ text-align:center; color:var(--muted); padding:30px; }

#toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink);
        color:#fff; padding:10px 16px; border-radius:8px; font-size:14px; opacity:0;
        transition:opacity .2s; pointer-events:none; z-index:99; }
#toast.show{ opacity:1; }

@media (max-width:700px){
  .sidebar{ position:static; width:100%; height:auto; flex-direction:row; flex-wrap:wrap;
            align-items:center; padding:8px; }
  .navback{ padding:6px 10px; }
  .navgruppe{ padding:6px 10px; }
  .navlink{ padding:8px 10px; border-left:none; }
  .navfill{ flex:0; }
  .navuser{ display:none; }
  .appbody{ margin-left:0; }
}