/* ============================================================================
   TOOL DESIGN KIT — components.css
   Baut auf tokens.css auf. Nur Semantic-/Component-Tokens, keine Rohwerte.
   Liefert: Reset, Basis, Utilities, App-Shell, Sidebar/Nav, Topbar, Buttons,
   KPI-Karten, Panel/Tabelle, Chips, Legende.
   ============================================================================ */

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-sans); font-size:var(--text-base); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Utilities */
.num{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--subtle)}
.muted{color:var(--muted)}
svg.ic{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Text-Konventionen — die EINE Quelle für Headings/Body/Labels über alle Tools.
   Schriften nie inline (STANDARDS). Headings = Display-Grotesk, Labels/Meta = Mono.
   Tools laden diese Datei und definieren sie NICHT mehr lokal (single source). */
.heading-xl{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:600;letter-spacing:-.025em;line-height:1.15;margin:0}
.heading-lg{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:0}
.heading-md{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;letter-spacing:-.015em;line-height:1.3;margin:0}
.body-text{font-size:var(--text-md);line-height:1.55}
.body-small{font-size:var(--text-sm);line-height:1.5}
.hint-text{font-size:var(--text-xs);color:var(--muted)}
.label-text{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--subtle)}

/* Accessibility */
a,button,input,[tabindex]{outline:none}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{box-shadow:var(--ring);border-radius:var(--radius-sm)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- APP SHELL ---------------------------------------------------- */
.app{display:grid;grid-template-columns:236px 1fr;height:100vh}
.main{display:flex;flex-direction:column;min-width:0;overflow:auto}
.content{padding:24px 26px;max-width:1180px}

/* ---------- SIDEBAR ------------------------------------------------------ */
.side{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:11px;padding:18px 18px 16px}
.brand .logo{width:34px;height:34px;border-radius:var(--radius-sm);background:var(--accent-strong);color:var(--on-accent);display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.brand .logo svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.brand b{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);letter-spacing:-.02em}
.brand .ver{font-family:var(--font-mono);font-size:10px;color:var(--subtle);margin-left:auto;background:var(--sunken);padding:2px 7px;border-radius:var(--radius-pill)}

.side nav{padding:10px 12px;display:flex;flex-direction:column;gap:3px;flex:1}  /* gescopet: bare `nav` würde sonst in Tools mit eigenem <nav> (z.B. edgelab Bottom-Nav) leaken */
.navlbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--subtle);padding:14px 10px 6px}
.ni{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:var(--radius-sm);color:var(--muted);text-decoration:none;font-weight:500;cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast)}
.ni:hover{background:var(--sunken);color:var(--text)}
.ni.on{background:var(--accent-soft);color:var(--accent-strong);font-weight:600}
.ni .badge{margin-left:auto;font-family:var(--font-mono);font-size:11px;background:var(--sunken);color:var(--muted);padding:1px 7px;border-radius:var(--radius-pill)}
.ni.on .badge{background:var(--accent-strong);color:var(--on-accent)}

.acct{margin:12px;padding:11px;display:flex;align-items:center;gap:10px;background:var(--sunken);border-radius:var(--radius)}
.acct .ava{width:32px;height:32px;border-radius:var(--radius-sm);background:var(--accent-strong);color:var(--on-accent);display:grid;place-items:center;font-family:var(--font-mono);font-weight:600;font-size:12px}
.acct .who{min-width:0}
.acct .who b{font-size:var(--text-sm);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct .who span{font-size:11px;color:var(--subtle);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct .out{margin-left:auto;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);width:32px;height:32px;display:grid;place-items:center;cursor:pointer;transition:color var(--dur-fast),border-color var(--dur-fast)}
.acct .out:hover{color:var(--bad);border-color:var(--bad)}

/* ---------- TOPBAR ------------------------------------------------------- */
.top{height:58px;border-bottom:1px solid var(--border);background:var(--surface);display:flex;align-items:center;gap:14px;padding:0 22px;position:sticky;top:0;z-index:5}
.crumb{font-size:var(--text-base);color:var(--muted)}
.crumb b{color:var(--text);font-weight:600;font-family:var(--font-display)}
.search{margin-left:6px;flex:1;max-width:360px;display:flex;align-items:center;gap:9px;background:var(--sunken);border:1px solid transparent;border-radius:var(--radius-pill);padding:8px 14px;color:var(--subtle)}
.search input{border:none;background:none;outline:none;color:var(--text);font-family:var(--font-sans);font-size:var(--text-sm);width:100%}
.tbtn{margin-left:auto;display:flex;gap:7px}
.iconbtn{width:36px;height:36px;border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-sm);display:grid;place-items:center;color:var(--muted);cursor:pointer;transition:color var(--dur-fast),border-color var(--dur-fast)}
.iconbtn:hover{color:var(--text);border-color:var(--border-strong)}

/* ---------- HEADINGS / BUTTONS ------------------------------------------ */
.h1row{display:flex;align-items:center;gap:16px;margin-bottom:22px}
h1{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:600;letter-spacing:-.025em;margin:0}
.h1row .sub{color:var(--muted);font-size:var(--text-sm)}
.h1row .actions{margin-left:auto;display:flex;gap:9px}
.btn{font-family:var(--font-sans);font-weight:600;font-size:var(--text-sm);padding:9px 15px;border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--surface);color:var(--text);transition:border-color var(--dur-fast),background var(--dur-fast)}
.btn:hover{border-color:var(--border-strong)}
.btn.pri{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--on-accent);box-shadow:var(--shadow-sm)}
.btn.pri:hover{filter:brightness(1.05)}

/* ---------- KPI CARDS --------------------------------------------------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm)}
.kpi.lead{border-top:2px solid var(--accent)}
.kpi .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--subtle);display:flex;align-items:center;gap:7px}
.kpi .k svg{width:14px;height:14px;color:var(--accent);stroke-width:1.8}
.kpi .v{font-family:var(--font-display);font-weight:600;font-size:var(--text-3xl);letter-spacing:-.02em;margin-top:12px}
.kpi .v small{font-size:var(--text-lg);color:var(--muted);font-weight:500}
.kpi .d{font-family:var(--font-mono);font-size:11px;margin-top:6px}
.up{color:var(--ok)}.dn{color:var(--bad)}.flat{color:var(--subtle)}

/* ---------- PANEL + TABLE ----------------------------------------------- */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.panelhd{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--border)}
.panelhd b{font-family:var(--font-display);font-weight:600;font-size:var(--text-md)}
.panelhd .eyebrow{margin-left:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);font-weight:500;padding:11px 18px;background:var(--sunken)}
td{padding:13px 18px;border-bottom:1px solid var(--border);font-size:var(--text-sm)}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--sunken)}
td.r,th.r{text-align:right}
td.r{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.rowname{font-weight:600}

/* ---------- CHIPS ------------------------------------------------------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);font-weight:600;padding:3px 10px;border-radius:var(--radius-pill)}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.bad{background:var(--bad-bg);color:var(--bad)}
.chip.neutral{background:var(--neutral-bg);color:var(--neutral);font-family:var(--font-mono);font-weight:500;font-size:11px}
.dot{width:6px;height:6px;border-radius:99px;background:currentColor}

/* ---------- LEGEND (Demo/Doku) ----------------------------------------- */
.legend{grid-column:1/-1;border-top:1px solid var(--border);padding:15px 22px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;background:var(--surface)}
.legend .lt{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--subtle)}
.legend .sw{display:flex;align-items:center;gap:8px;font-size:var(--text-sm)}
.legend .sw i{width:14px;height:14px;border-radius:5px;display:inline-block;box-shadow:var(--shadow-sm)}
.legend .tag{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--subtle)}

/* ---------- LAYOUT-VARIANTEN (die Shell ist OPTIONAL, kein Zwang) -------- */
/* Ohne Sidebar: Main füllt die Breite. Navigation wandert in die Topbar (.topnav) oder
   über den Inhalt (.tabs). Alle übrigen Komponenten (KPI, Tabelle, Button …) bleiben gleich. */
.app.solo{grid-template-columns:1fr}

/* Horizontale Navigation — für „kein Sidebar"-Tools und In-Page-Umschaltung (z.B. argus-in-Website) */
.topnav{display:flex;flex-direction:row;flex:none;padding:0;align-items:center;gap:2px;flex-wrap:nowrap;min-width:0}
.tabs{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.tabs.underline{gap:18px;border-bottom:1px solid var(--border)}
.topnav a,.tabs a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius-sm);color:var(--muted);font-weight:500;font-size:var(--text-sm);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background var(--dur-fast),color var(--dur-fast)}
.topnav a:hover,.tabs a:hover{color:var(--text);background:var(--sunken)}
.topnav a.on,.tabs a.on{color:var(--accent-strong);background:var(--accent-soft);font-weight:600}
.tabs.underline a{border-radius:0;padding:10px 0;background:none}
.tabs.underline a.on{background:none;box-shadow:inset 0 -2px 0 var(--accent-strong)}

/* Embed (z.B. argus eingebettet in eine Website): keine App-Chrome, Komponenten inline auf
   transparentem Grund. Der Host setzt data-theme/data-tool auf den Wrapper. */
.embed{background:transparent}
.embed .panel{box-shadow:none}

/* ---------- RESPONSIVE (Desktop-first, mobil funktional) ---------------- */
@media (max-width:880px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:236px;transform:translateX(-100%);transition:transform var(--dur) var(--ease-out);z-index:30;box-shadow:var(--shadow-pop)}
  .app.nav-open .side{transform:none}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .content{padding:18px 16px}
  .panel{overflow-x:auto}
}
@media (max-width:520px){
  .kpis{grid-template-columns:1fr}
}