/* SoulGarden Social Dashboard — Styles.
   Basis: design/mockup.html (verbindliche Referenz, 1:1 übernommen).
   Ergänzungen (Login, Empty-States, View-Switching) am Dateiende, nur mit
   bestehenden Design-Tokens. */

:root{
  --bg:#0F1613; --surface:#161F1A; --surface2:#1B2620;
  --line:#25332B; --ink:#EAF1E9; --muted:#8FA396;
  --leaf:#9CCF95; --bloom:#E2A8BC; --amber:#E4C387;
  --tt:#7FD6CF; --ig:#E2A8BC; --yt:#E58B7F;
  --r:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Albert Sans",system-ui,sans-serif; font-size:15px;
  min-height:100vh; display:flex;
}
a{color:inherit;text-decoration:none}
.mono{font-family:"Spline Sans Mono",monospace}

/* ---------- Navigation ---------- */
nav{
  width:212px; flex-shrink:0; border-right:1px solid var(--line);
  padding:28px 18px; display:flex; flex-direction:column; gap:4px;
}
.brand{
  font-family:Fraunces,serif; font-size:19px; font-weight:600;
  letter-spacing:.2px; margin-bottom:2px;
}
.brand small{display:block; font-family:"Albert Sans"; font-weight:400;
  font-size:11.5px; color:var(--muted); letter-spacing:.4px; margin-top:3px}
.vine{margin:14px 0 18px}
nav a{
  padding:9px 12px; border-radius:10px; color:var(--muted);
  font-weight:500; font-size:14px; display:flex; gap:10px; align-items:center;
}
nav a.active{background:var(--surface2); color:var(--ink)}
nav a:hover{color:var(--ink)}
nav .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5}
nav a.active .dot{background:var(--leaf);opacity:1}
.navfoot{margin-top:auto; font-size:12px; color:var(--muted); line-height:1.5}
.navfoot .ok{color:var(--leaf)}

/* ---------- Main ---------- */
main{flex:1; padding:30px 36px 48px; max-width:1120px}
header{display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:26px; gap:16px; flex-wrap:wrap}
h1{font-family:Fraunces,serif; font-weight:500; font-size:29px; letter-spacing:.2px}
h1 em{font-style:italic; color:var(--leaf)}
.sub{color:var(--muted); font-size:13.5px; margin-top:6px}
.range{display:flex; gap:6px}
.range button{
  background:none; border:1px solid var(--line); color:var(--muted);
  padding:7px 14px; border-radius:99px; font:inherit; font-size:13px; cursor:pointer;
}
.range button.on{background:var(--surface2); color:var(--ink); border-color:#324437}

/* ---------- Plattform-Karten ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:14px}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 18px 14px; position:relative; overflow:hidden;
}
.card .top{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px}
.pname{font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px}
.pname .pd{width:8px;height:8px;border-radius:50%}
.stage{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted)}
.big{font-family:"Spline Sans Mono"; font-size:30px; font-weight:500; letter-spacing:-.5px}
.big small{font-size:13px; color:var(--muted); font-weight:400; margin-left:6px}
.delta{font-size:13px; margin-top:4px}
.delta b{color:var(--leaf); font-weight:600}
.spark{margin-top:12px; display:block}

/* ---------- KPI-Zeile ---------- */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:15px 16px}
.kpi .lbl{font-size:12px; color:var(--muted); margin-bottom:8px; letter-spacing:.3px}
.kpi .val{font-family:"Spline Sans Mono"; font-size:21px; font-weight:500}
.kpi .val em{font-style:normal; font-size:12.5px; color:var(--muted); margin-left:5px}
.kpi .val.bloom{color:var(--bloom)}
.kpi .best{font-family:"Albert Sans"; font-size:13.5px; font-weight:500; line-height:1.4}
.kpi .best span{color:var(--muted); font-weight:400; font-size:12px; display:block; margin-top:3px}

/* ---------- Chart ---------- */
.panel{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:20px; margin-bottom:22px}
.panel h2{font-family:Fraunces,serif; font-weight:500; font-size:17.5px; margin-bottom:2px}
.panel .ph{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px}
.legend{display:flex; gap:16px; font-size:12.5px; color:var(--muted)}
.legend i{width:14px;height:3px;border-radius:2px;display:inline-block;margin-right:6px;vertical-align:middle}
.chartwrap{position:relative}
.gridlbl{position:absolute; left:0; font-size:11px; color:#5E6F64; font-family:"Spline Sans Mono"}

/* ---------- Tabelle ---------- */
table{width:100%; border-collapse:collapse; font-size:13.5px}
th{text-align:left; color:var(--muted); font-weight:500; font-size:12px;
  letter-spacing:.3px; padding:0 10px 10px; border-bottom:1px solid var(--line)}
td{padding:11px 10px; border-bottom:1px solid #1C2721; vertical-align:middle}
tr:last-child td{border-bottom:none}
td.num{font-family:"Spline Sans Mono"; text-align:right}
th.num{text-align:right}
.tag{display:inline-flex; align-items:center; gap:6px; font-size:12.5px}
.tag .pd{width:7px;height:7px;border-radius:50%}
.grp{color:var(--muted); font-size:12px}
.wt{color:var(--amber)}

@media(max-width:900px){
  nav{display:none}
  main{padding:20px}
  .cards,.kpis{grid-template-columns:1fr}
}

/* =====================================================================
   Ergänzungen (kein neues Design — nur bestehende Tokens)
   ===================================================================== */

/* View-Switching: nur die aktive Sektion ist sichtbar */
.view{display:none}
.view.on{display:block}

/* Leere Zustände (Plattform ohne Daten, keine Posts) */
.empty{color:var(--muted); font-size:13px}
.card.nodata .big{color:var(--muted)}

/* Login */
.login-wrap{flex:1; display:flex; align-items:center; justify-content:center; padding:24px}
.login-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:30px 28px; width:100%; max-width:360px;
}
.login-card .brand{margin-bottom:0}
.login-card form{margin-top:18px; display:flex; flex-direction:column; gap:12px}
.login-card input[type="password"]{
  background:var(--bg); border:1px solid var(--line); border-radius:10px;
  color:var(--ink); font:inherit; padding:10px 12px; outline:none;
}
.login-card input[type="password"]:focus{border-color:#324437}
.login-card button{
  background:var(--surface2); border:1px solid #324437; border-radius:10px;
  color:var(--ink); font:inherit; font-weight:600; padding:10px 12px; cursor:pointer;
}
.login-card button:hover{border-color:var(--leaf)}
.login-err{color:var(--yt); font-size:13px; min-height:18px}

/* Posts-View: sortierbare Spalten + editierbare Gruppe */
th[data-sort]{cursor:pointer; user-select:none; white-space:nowrap}
th[data-sort]:hover{color:var(--ink)}
th[data-sort].asc::after{content:" ↑"}
th[data-sort].desc::after{content:" ↓"}
tr[data-post-id]{cursor:pointer}
tr[data-post-id]:hover td{background:var(--surface2)}
td .grp-edit{
  background:var(--bg); border:1px solid var(--line); border-radius:8px;
  color:var(--ink); font:inherit; font-size:12px; padding:3px 6px; width:130px; outline:none;
}
td .grp-edit:focus{border-color:#324437}

/* Vergleich */
.group-select{
  background:var(--surface2); border:1px solid var(--line); border-radius:99px;
  color:var(--ink); font:inherit; font-size:13px; padding:7px 14px; outline:none; cursor:pointer;
}
.vgl-metric{display:flex; justify-content:space-between; font-size:13px; padding:7px 0;
  border-bottom:1px solid #1C2721}
.vgl-metric:last-child{border-bottom:none}
.vgl-metric b{font-family:"Spline Sans Mono"; font-weight:500}

/* Publikum: Balken aus Design-Tokens */
.bar-row{display:grid; grid-template-columns:64px 1fr 46px; gap:10px; align-items:center;
  font-size:12.5px; margin-bottom:7px}
.bar-row .blbl{color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar-row .bval{font-family:"Spline Sans Mono"; font-size:11.5px; text-align:right; color:var(--muted)}
.bar-track{background:var(--surface2); border-radius:99px; height:8px; overflow:hidden}
.bar-fill{height:100%; border-radius:99px}
.demo-h{font-size:12px; color:var(--muted); letter-spacing:.3px; margin:14px 0 8px}

/* Mobil-Feinschliff (ergänzt die Mockup-Media-Query) */
@media(max-width:900px){
  h1{font-size:23px}
  header > div{min-width:0}
  table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch}
}