/* K-AI-Postomat Dashboard — Token- und Komponenten-Stylesheet.
   Tokens 1:1 aus ~/.claude/skills/kai-design-system/css/tokens/*.css uebernommen (kanonische
   Quelle). Postomat ist Kais eigenes internes Werkzeug, daher ist die Schwarz/Gold/Orange-
   Eigenmarke des Skills hier zulaessig (Skill-Kopf: "nur fuer Postomat's own dashboard chrome"). */

@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,600;0,700;0,800;1,400;1,700&family=Source+Sans+3:wght@300;400;600;700&display=swap');

:root{
  --font-head:'Bitter',Georgia,serif;
  --font-ui:'Source Sans 3','Source Sans Pro',sans-serif;
  --blue:#111111; --blue-700:#2e2e2e;
  --burgundy:#bda27c; --burgundy-700:#c1b783;
  --accent-orange:#FF6600;
  --icon-on-dark:#bda27c;
  --dark:#2c261f;
  --nav-active-bg:var(--dark); --nav-active-border:var(--nav-active-bg);
  --bg:#fafafa; --surface:#f2f2f2; --surface-2:#ffffff; --surface-elevated:#f2f2f2;
  --heading:#2e2e2e; --text:#2e2e2e; --text-2:#666666; --text-muted:#736d66;
  --border:#d9d9d9; --border-strong:#c4c4c4;
  --focus-ring:#D35400;
  --focus-ring-glow:0 0 0 3px color-mix(in srgb, var(--focus-ring) 16%, transparent);
  --green:#16a34a; --amber:#d97706; --red:#dc2626;
  --green-soft:#e3f2e8; --on-green-soft:#14653a;
  --amber-soft:#fbeeda; --on-amber-soft:#92400e;
  --red-soft:#fce8e8; --on-red-soft:#991b1b;
  --scrim-bg: rgba(20,16,12,.55);
  --r-card:8px; --r-pill:40px; --r-field:8px; --r-sm:6px;
  --pad:22px; --ctrl-h:44px; --gap:18px;
  --e1:0 1px 3px rgba(28,25,22,.08),0 6px 16px rgba(28,25,22,.06);
  --e2:0 4px 14px rgba(28,25,22,.10),0 2px 6px rgba(28,25,22,.06);
  --e3:0 20px 48px rgba(28,25,22,.18),0 8px 18px rgba(28,25,22,.10);
  --ease:cubic-bezier(.22,.61,.36,1);
  --sidebar-w:248px; --sidebar-w-collapsed:72px; --topbar-h:58px;
  --fs-base:16px;
  --z-sidebar:10; --z-topbar:20; --z-scrim:40; --z-overlay-modal:100; --z-toast:200;
}

[data-theme="dark"]{
  --heading:#f9f9f9; --text:#f9f9f9; --text-2:#cccccc; --text-muted:#cabfb2;
  --blue-700:#bda27c; --focus-ring:#FF8C42;
  --green-soft:#1e2f22; --on-green-soft:#86e0a4;
  --amber-soft:#35281a; --on-amber-soft:#f2c078;
  --red-soft:#36211f; --on-red-soft:#f2a4a4;
  --bg:#2e2e2e; --surface:#4d4d4d; --surface-2:#3b3b3b; --surface-elevated:#332b23;
  --border:#666666; --border-strong:#7a7a7a;
  --nav-active-bg:#0f0c09; --nav-active-border:rgba(255,255,255,.38);
  --scrim-bg: rgba(0,0,0,.6);
  --e1:0 1px 2px rgba(0,0,0,.4); --e2:0 4px 12px rgba(0,0,0,.45); --e3:0 18px 44px rgba(0,0,0,.55);
}

html.a11y-contrast{ --border:#000; --border-strong:#000; --text-2:#333; }
[data-theme="dark"].a11y-contrast{ --border:#fff; --text-2:#ddd; }
[data-density="compact"]{ --pad:13px; --ctrl-h:38px; --gap:12px; --fs-base:15px; }
[data-fs="lg"]{ --fs-base:18px; }
[data-fs="xl"]{ --fs-base:20px; }
html.a11y-readable{ --font-ui:Verdana,Tahoma,sans-serif; --font-head:Verdana,sans-serif; }
html.a11y-spacing{ letter-spacing:.03em; word-spacing:.12em; }

*{box-sizing:border-box}
body{margin:0;font-family:var(--font-ui);font-size:var(--fs-base);line-height:1.55;color:var(--text);background:var(--bg)}
h1,h2,h3,.stat{font-family:var(--font-head);color:var(--heading);line-height:1.2;margin:0}
h1{font-size:28px;font-weight:800;letter-spacing:-.01em}
h2{font-size:20px;font-weight:700}
h3{font-size:16px;font-weight:600}
.muted{color:var(--text-2)}
.small{font-size:13px}
a{color:var(--blue-700)}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}

.touch-ziel{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}

/* ---------- Layout: App-Shell ---------- */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:#fbfaf8;border-right:1px solid var(--border);display:flex;flex-direction:column;box-shadow:5px 0 22px rgba(28,25,22,.05);position:relative;z-index:var(--z-sidebar)}
[data-theme="dark"] .sidebar{background:#1d1813;box-shadow:5px 0 22px rgba(0,0,0,.4)}
.sb-head{padding:18px 16px;border-bottom:1px solid var(--border)}
.brand-row{display:flex;align-items:center;gap:10px}
.brand-mark{width:34px;height:34px;border-radius:9px;background:var(--blue);color:var(--burgundy);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:16px;flex:0 0 auto}
.brand-name{font-family:var(--font-head);font-weight:800;font-size:16px;color:var(--heading)}
.nav{flex:1;overflow-y:auto;padding:12px 10px}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;min-height:44px;border-radius:var(--r-card);color:var(--text);text-decoration:none;font-weight:600;font-size:15px;cursor:pointer;border:1px solid transparent;background:transparent;width:100%;text-align:left;transition:background .15s,color .15s,border-color .15s}
.nav-item:hover{background:var(--surface)}
.nav-item.active{background:var(--nav-active-bg);border-color:var(--nav-active-border);color:#fff;box-shadow:var(--e2);font-weight:700}
.nav-item .ic{width:18px;text-align:center;flex:0 0 18px}
.sb-foot{padding:14px 16px;border-top:1px solid var(--border)}

.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{height:var(--topbar-h);flex:0 0 var(--topbar-h);background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;padding:0 20px;position:sticky;top:0;z-index:var(--z-topbar)}
.topbar h1{font-size:19px}
.topbar-spacer{flex:1}
.content{padding:22px;max-width:1200px;width:100%;margin:0 auto}
.hamb{display:none}

.scrim{position:fixed;inset:0;background:var(--scrim-bg);z-index:calc(var(--z-toast) - 1)}
.scrim[hidden]{display:none}

@media(max-width:760px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:var(--z-toast);transform:translateX(-100%);box-shadow:var(--e3);transition:transform .22s var(--ease)}
  .sidebar.mobile-open{transform:none}
  .hamb{display:inline-flex}
  .content{padding:16px 14px 30px}
}

/* ---------- Buttons ---------- */
.btn{font-family:var(--font-ui);font-weight:600;font-size:15px;height:var(--ctrl-h);padding:0 20px;border-radius:var(--r-pill);border:2px solid transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s var(--ease),background .15s,box-shadow .2s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--blue);color:#fff}.btn-primary:hover{background:var(--blue-700)}
.btn-outline{background:transparent;border-color:var(--border-strong);color:var(--text)}.btn-outline:hover{background:var(--surface)}
.btn-ghost{background:transparent;color:var(--blue-700);border-color:transparent}.btn-ghost:hover{background:var(--surface)}
.btn-danger{background:var(--red);color:#fff}.btn-danger:hover{opacity:.9}
.btn-sm{height:36px;padding:0 14px;font-size:13px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none!important}
.icon-btn{width:40px;height:40px;border:none;background:transparent;border-radius:8px;cursor:pointer;color:var(--text);font-size:17px;display:flex;align-items:center;justify-content:center}
.icon-btn:hover{background:var(--surface-2)}

/* ---------- Formulare ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;font-size:14px;margin-bottom:6px;color:var(--heading)}
.inp,.sel,textarea.inp{width:100%;font-family:var(--font-ui);font-size:15px;min-height:var(--ctrl-h);padding:10px 13px;border:1px solid var(--border);border-radius:var(--r-field);background:var(--surface-2);color:var(--text)}
.inp:focus,.sel:focus,textarea.inp:focus{border-color:var(--focus-ring)}
textarea.inp{resize:vertical}
.hilfe{font-size:12.5px;color:var(--text-2);margin-top:5px}
/* Hex-Textfeld + natives Farbfeld nebeneinander, bidirektional synchron - sofortige
   Live-Vorschau statt reinem Hex-Tippen (Markenprofile, SPEC-08-Nachschaerfung). */
.farbfeld-gruppe{display:flex;align-items:stretch;gap:8px}
.farbfeld-gruppe .inp{flex:1 1 auto}
.farbfeld-swatch{flex:0 0 auto;width:44px;height:44px;padding:2px;border:1px solid var(--border);border-radius:var(--r-field);background:var(--surface-2);cursor:pointer}
.farbfeld-swatch:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
.checkrow{display:flex;align-items:center;gap:8px;min-height:44px}
.checkrow input[type="checkbox"]{width:18px;height:18px;accent-color:var(--blue)}
.formfehler{color:var(--on-red-soft);background:var(--red-soft);border-radius:8px;padding:10px 14px;font-size:14px;margin-bottom:14px}
.formfehler:empty{display:none;padding:0;margin:0}

/* ---------- Karten / Kacheln ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--pad);box-shadow:var(--e1)}
.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.kpi{display:flex;flex-direction:column;gap:6px}
.kpi .zahl{font-family:var(--font-head);font-size:32px;font-weight:800;color:var(--heading)}
.kpi .label{font-size:13px;color:var(--text-2)}

/* ---------- Status: Farbe + Icon + Text ---------- */
.status{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:4px 12px;border-radius:40px}
.status svg{width:14px;height:14px;flex:0 0 auto}
.status-ok{background:var(--green-soft);color:var(--on-green-soft)}
.status-warn{background:var(--amber-soft);color:var(--on-amber-soft)}
.status-fehler{background:var(--red-soft);color:var(--on-red-soft)}
.status-neutral{background:var(--surface-2);color:var(--text-2)}

/* ---------- Tabelle ---------- */
.table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);overflow-x:auto;box-shadow:var(--e1)}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl th{text-align:left;padding:11px 14px;background:var(--surface-2);border-bottom:1px solid var(--border);font-weight:700;color:var(--heading);white-space:nowrap}
table.tbl td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:none}
.empty{text-align:center;padding:40px 20px;border:1.5px dashed var(--border-strong);border-radius:var(--r-card);background:var(--surface);color:var(--text-2)}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);overflow-x:auto}
.tab{min-height:44px;padding:8px 16px;border-radius:9px;border:1px solid transparent;background:transparent;font-weight:600;font-size:14px;color:var(--text-2);cursor:pointer;white-space:nowrap}
.tab.active{background:var(--blue);color:#fff}

/* ---------- Login ---------- */
.login-frame{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:20px}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--e3);padding:32px;width:100%;max-width:400px}
.login-card .lg{width:48px;height:48px;border-radius:12px;background:var(--blue);color:var(--burgundy);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:22px;margin-bottom:18px}
.login-trenner{display:flex;align-items:center;gap:10px;margin:18px 0;color:var(--text-muted);font-size:12.5px}
.login-trenner::before,.login-trenner::after{content:"";flex:1;height:1px;background:var(--border)}

/* ---------- Modal ---------- */
.overlay{position:fixed;inset:0;background:var(--scrim-bg);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:var(--z-overlay-modal)}
.overlay[hidden]{display:none}
.modal{background:var(--surface);border-radius:16px;box-shadow:var(--e3);width:100%;max-width:480px;padding:26px;max-height:88vh;overflow-y:auto}
.modal h2{margin-bottom:10px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}

/* ---------- Toast ---------- */
.toaststack{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:var(--z-toast)}
.toast{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--blue);border-radius:10px;box-shadow:var(--e3);padding:12px 16px;display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;min-width:240px;max-width:360px;animation:toastein .25s var(--ease)}
.toast.ok{border-left-color:var(--green)}
.toast.err{border-left-color:var(--red)}
@keyframes toastein{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* ---------- Hilfe-Popover (Klick, nie Hover-Tooltip) ---------- */
.hilfe-trigger{position:relative;display:inline-flex;align-items:center;vertical-align:middle;margin-left:5px;color:var(--text-muted);background:none;border:none;padding:0;cursor:pointer;width:20px;height:20px;border-radius:50%}
.hilfe-trigger:hover{color:var(--blue-700);background:var(--surface-2)}
.hilfe-pop{display:none;position:absolute;z-index:60;top:calc(100% + 6px);left:0;width:max-content;max-width:280px;padding:10px 13px;border-radius:9px;background:var(--surface-2);border:1px solid var(--border);box-shadow:var(--e3);color:var(--text-2);font-size:13px;line-height:1.5;font-weight:400}
.hilfe-pop.open{display:block}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
html.no-motion *{animation:none!important;transition:none!important}