/* ============================================================
   SunStack Demo-App — Styles
   ============================================================ */
:root{
  --ground:#F4F5F2; --surface:#FFFFFF; --ink:#10202E; --ink-soft:#3D4F5C;
  --muted:#64748B; --line:#E4E4DC; --sun:#F59E0B; --sun-deep:#B45309;
  --sun-soft:#FEF3DF; --petrol:#0F766E; --petrol-soft:#E4F1EF;
  --navy:#10202E; --navy-2:#182C3D; --green:#15803D; --green-soft:#E8F5EC;
  --red:#B91C1C; --red-soft:#FDECEC; --blue:#2563EB; --blue-soft:#EAF0FE;
  --amber-soft:#FEF3DF;
  --shadow:0 1px 2px rgba(16,32,46,.05),0 4px 14px rgba(16,32,46,.07);
  --font-head:"Space Grotesk","Inter",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:14px/1.55 var(--font-body);color:var(--ink);background:var(--ground)}
a{color:var(--petrol);text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--font-head);margin:0;letter-spacing:-.01em}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(600px 400px at 85% 10%,rgba(245,158,11,.14),transparent 60%),
    radial-gradient(600px 420px at 10% 95%,rgba(15,118,110,.12),transparent 60%),
    var(--ground);padding:24px}
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 12px 48px rgba(16,32,46,.12);padding:44px;width:400px;max-width:100%}
.login-card .lg-brand{display:flex;align-items:center;gap:12px;font-family:var(--font-head);
  font-weight:700;font-size:1.5rem;margin-bottom:6px}
.login-card .lg-sub{color:var(--muted);font-size:.92rem;margin:0 0 26px}
.login-card label{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin:14px 0 5px}
.login-card input{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;
  font:inherit;background:#FBFAF7}
.login-card input:focus{outline:2px solid rgba(245,158,11,.5);border-color:var(--sun)}
.btn{display:inline-block;border:none;border-radius:11px;font-weight:600;padding:12px 22px;text-align:center}
.btn-primary{background:var(--sun);color:#1A1103;width:100%;margin-top:22px;font-size:1rem}
.btn-primary:hover{background:#F8A81F}
.btn-sm{padding:6px 13px;border-radius:8px;font-size:.82rem}
.btn-ghost{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--muted)}
.btn-navy{background:var(--navy);color:#fff}
.demo-hint{margin-top:18px;background:var(--sun-soft);border:1px solid #F3DFB8;border-radius:10px;
  padding:12px 14px;font-size:.85rem;color:var(--sun-deep)}
.demo-hint code{font-family:"JetBrains Mono",monospace;font-size:.82rem}
.login-foot{margin-top:20px;text-align:center;font-size:.82rem;color:var(--muted)}

/* ---------- App shell ---------- */
.app{display:none;min-height:100vh}
.app.on{display:grid;grid-template-columns:240px 1fr}
.side{background:var(--navy);color:#8FA1B0;padding:18px 0 14px;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.side .sd-brand{display:flex;align-items:center;gap:10px;padding:6px 20px 16px;color:#fff;
  font-family:var(--font-head);font-weight:700;font-size:1.15rem;border-bottom:1px solid #243B4F}
.side .sd-brand small{display:block;color:#8FA1B0;font:500 .68rem var(--font-body)}
.sd-group{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#5D7181;padding:16px 20px 6px}
.side a{display:flex;align-items:center;gap:10px;color:#A8B6C2;padding:7px 20px;font-size:.86rem;
  border-left:3px solid transparent}
.side a:hover{background:var(--navy-2);color:#fff}
.side a.on{background:var(--navy-2);color:#fff;border-left-color:var(--sun);font-weight:600}
.side a .ico{width:20px;text-align:center;flex:none}
.sd-foot{margin-top:auto;padding:14px 20px;border-top:1px solid #243B4F;font-size:.8rem}
.sd-foot button{background:none;border:1px solid #33475A;color:#A8B6C2;border-radius:8px;
  padding:6px 12px;font-size:.78rem;margin-top:8px;margin-right:6px}
.sd-foot button:hover{color:#fff;border-color:#5D7181}

.main{min-width:0;padding:26px 32px 60px}
.topbar{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.topbar h1{font-size:1.45rem}
.topbar .tb-sub{color:var(--muted);font-size:.85rem;margin-top:2px}
.topbar .spacer{margin-left:auto}
.userchip{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:99px;padding:5px 14px 5px 6px;font-size:.84rem}
.userchip .uc-av{width:30px;height:30px;border-radius:99px;background:var(--petrol-soft);color:var(--petrol);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.78rem}
.demo-banner{background:var(--sun-soft);border:1px solid #F3DFB8;color:var(--sun-deep);
  border-radius:10px;padding:8px 14px;font-size:.82rem;margin-bottom:20px;display:flex;gap:10px;align-items:center}
.demo-banner b{font-weight:700}

/* ---------- Components ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:15px 17px;box-shadow:var(--shadow)}
.kpi .k-l{font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.kpi .k-v{font:700 1.35rem var(--font-head);margin-top:4px}
.kpi .k-d{font-size:.75rem;margin-top:2px}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);margin-bottom:20px;overflow:hidden}
.panel .p-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.panel .p-head h2{font-size:1rem}
.panel .p-head .spacer{margin-left:auto}
.panel .p-body{padding:16px 18px}
.panel .p-body.flush{padding:0}

table.t{width:100%;border-collapse:collapse;font-size:.86rem}
table.t th{font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:10px 16px;background:#F8F7F2;border-bottom:1px solid var(--line)}
table.t td{padding:11px 16px;border-bottom:1px solid #F0EFE8;vertical-align:middle}
table.t tr:last-child td{border-bottom:none}
table.t tr.click:hover{background:#FBFAF5;cursor:pointer}
table.t td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

.tag{display:inline-block;font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:99px;white-space:nowrap}
.tag.gruen{background:var(--green-soft);color:var(--green)}
.tag.gelb{background:var(--sun-soft);color:var(--sun-deep)}
.tag.rot{background:var(--red-soft);color:var(--red)}
.tag.blau{background:var(--blue-soft);color:var(--blue)}
.tag.grau{background:#EEF1F4;color:var(--muted)}
.tag.petrol{background:var(--petrol-soft);color:var(--petrol)}

.bar{height:8px;border-radius:4px;background:#EEF1F4;min-width:70px;position:relative;overflow:hidden}
.bar i{position:absolute;inset:0;border-radius:4px;background:var(--petrol)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid32{display:grid;grid-template-columns:1.5fr 1fr;gap:20px}
@media(max-width:1000px){.grid2,.grid32{grid-template-columns:1fr}}

/* Kanban */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;padding:16px 18px}
.kb-col{background:#F5F4EE;border-radius:12px;padding:10px;min-height:140px}
.kb-col h4{font:700 .68rem var(--font-body);letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin:2px 4px 10px;display:flex;justify-content:space-between}
.kb-card{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-bottom:8px}
.kb-card b{display:block;font-size:.84rem}
.kb-card .kc-sub{font-size:.74rem;color:var(--muted);margin:2px 0 8px}
.kb-move{display:flex;gap:6px}
.kb-move button{border:1px solid var(--line);background:#FBFAF7;border-radius:7px;padding:2px 9px;font-size:.75rem}
.kb-move button:hover{border-color:var(--sun);background:var(--sun-soft)}

/* Hub tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
@media(max-width:1100px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;
  box-shadow:var(--shadow);display:block;color:var(--ink)}
.tile:hover{border-color:var(--sun);transform:translateY(-1px)}
.tile .t-ico{width:38px;height:38px;border-radius:10px;background:var(--sun-soft);display:flex;
  align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:10px}
.tile b{font-family:var(--font-head);font-size:.95rem}
.tile span{display:block;font-size:.76rem;color:var(--muted);margin-top:2px}

/* Activity */
.act{list-style:none;margin:0;padding:0}
.act li{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid #F0EFE8;font-size:.85rem}
.act li:last-child{border:none}
.act .a-t{margin-left:auto;color:var(--muted);font-size:.76rem;white-space:nowrap;padding-left:10px}

/* Steps / checklist */
.steps{list-style:none;margin:0;padding:0}
.steps li{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid #F0EFE8;font-size:.87rem}
.steps li:last-child{border:none}
.steps .st-dot{width:22px;height:22px;border-radius:99px;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:.72rem;font-weight:700}
.steps .done .st-dot{background:var(--green-soft);color:var(--green)}
.steps .active .st-dot{background:var(--sun-soft);color:var(--sun-deep)}
.steps .open .st-dot{background:#EEF1F4;color:var(--muted)}
.steps .st-x{margin-left:auto;display:flex;gap:8px;align-items:center}

/* Ticket detail */
.reply{background:#F8F7F2;border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:10px;font-size:.85rem}
.reply .r-h{font-size:.74rem;color:var(--muted);margin-bottom:3px}
.reply.mine{background:var(--petrol-soft);border-color:#CBE3DF}
textarea.inp{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;
  background:#FBFAF7;resize:vertical;min-height:64px}

/* Toast */
#toasts{position:fixed;bottom:22px;right:22px;z-index:200;display:flex;flex-direction:column;gap:10px}
.toast{background:var(--navy);color:#fff;border-radius:12px;padding:13px 18px;font-size:.86rem;
  box-shadow:0 10px 34px rgba(16,32,46,.35);max-width:380px;animation:tin .25s ease}
.toast b{color:var(--sun)}
@keyframes tin{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}

/* Sparkline */
.spark{width:100%;height:120px}

/* misc */
.muted{color:var(--muted)}.small{font-size:.8rem}
.mt{margin-top:14px}
.empty{padding:26px;text-align:center;color:var(--muted);font-size:.86rem}
@media(max-width:900px){
  .app.on{grid-template-columns:1fr}
  .side{position:fixed;left:-260px;transition:left .2s;z-index:150;width:240px}
  .side.open{left:0}
  .main{padding:18px}
  .burger{display:inline-flex !important}
}
.burger{display:none;border:1px solid var(--line);background:var(--surface);border-radius:9px;
  padding:7px 12px;font-size:1rem}