/* =========================================================================
   components.css — wiederverwendbare Bausteine (Karten, KPIs, Listen, Forms)
   ========================================================================= */

/* ---- Karte (Grundbaustein) ---- */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--sp-3) var(--sp-4);
}
.card-h{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.card-h h3{font-size:15px;font-weight:600;margin:0;flex:1;color:var(--tx)}
.card-h .meta{font-family:var(--mono);font-size:12px;color:var(--mut)}
.card-h .meta.ok{color:var(--on)}

/* ---- Hero (Overview-Kopf) ---- */
.hero{
  background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--sp-4) var(--sp-5);display:flex;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap;
}
.hero .eyebrow{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
.hero h1{font-size:26px;font-weight:650;margin:8px 0 6px}
.hero p{margin:0;color:var(--mut);font-size:14px;max-width:60ch}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
.mini{
  min-width:128px;border:1px solid var(--line);border-radius:10px;
  padding:11px 14px;background:var(--bg2);
}
.mini .l{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.mini .v{font-family:var(--mono);font-size:15px;margin-top:4px;color:var(--tx)}
.mini .v b{color:var(--on);font-weight:600}

/* ---- KPI-Kacheln ---- */
.kpi{
  position:relative;border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--line);background:var(--panel);overflow:hidden;
}
.kpi .k-h{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-2)}
.kpi .k-t{font-size:var(--text-sm);color:var(--mut)}
.kpi .k-ic{color:var(--mut);opacity:.85}
.kpi .k-ic svg{width:18px;height:18px}
.kpi .k-v{font-family:var(--mono);font-size:var(--text-2xl);font-weight:600;line-height:1.1;margin:var(--sp-3) 0 var(--sp-1);color:var(--tx)}
.kpi .k-v small{font-size:var(--text-base);color:var(--mut);font-weight:400}
.kpi .k-s{font-size:var(--text-xs);color:var(--mut)}
/* Farb-Varianten (flach) */
.kpi.green {border-top:2px solid var(--on)}
.kpi.green  .k-v,.kpi.green  .k-ic{color:var(--on)}
.kpi.blue  {border-top:2px solid var(--act)}
.kpi.blue   .k-v,.kpi.blue   .k-ic{color:var(--act)}
.kpi.purple{border-top:2px solid var(--purple)}
.kpi.purple .k-v,.kpi.purple .k-ic{color:var(--purple)}
.kpi.red   {border-top:2px solid var(--err)}
.kpi.red    .k-v,.kpi.red    .k-ic{color:var(--err)}
.kpi.muted .k-v{color:var(--dim)}

/* ---- Key-Value-Liste (Health-Signale) ---- */
.kv{display:flex;flex-direction:column}
.kv-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 2px;border-top:1px solid var(--line)}
.kv-row:first-child{border-top:0}
.kv-row .kv-k{color:var(--mut);font-size:13.5px}
.kv-row .kv-v{font-family:var(--mono);font-size:13.5px;color:var(--tx)}
.kv-v.ok{color:var(--on)} .kv-v.bad{color:var(--err)} .kv-v.na{color:var(--dim)}
.bar{height:4px;border-radius:3px;background:var(--panel2);margin-top:8px;overflow:hidden}
.bar > i{display:block;height:100%;background:var(--on);border-radius:3px;transition:width .4s}
.bar.blue > i{background:var(--act)} .bar.warn > i{background:var(--warn)}

/* ---- Listen-Items (Modelle / "Session Router") ---- */
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:12px;padding:12px 4px;border-top:1px solid var(--line)}
.li:first-child{border-top:0}
.li .li-dot{width:9px;height:9px;border-radius:50%;background:var(--dim);flex:0 0 auto}
.li .li-dot.on{background:var(--on)} .li .li-dot.load{background:var(--warn)}
.li .li-main{flex:1;min-width:0}
.li .li-id{font-family:var(--mono);font-size:13px;color:#e8eef5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .li-sub{font-size:12px;color:var(--mut);margin-top:2px}
.li .li-right{text-align:right;flex:0 0 auto}
.li .li-meta{font-family:var(--mono);font-size:12px;color:var(--mut)}
.li .li-time{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-top:2px}

/* ---- Tabelle ---- */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-weight:500;color:var(--mut);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.06em;padding:0 10px 10px}
td{padding:12px 10px;border-top:1px solid var(--line)}
.mid{font-family:var(--mono);font-size:13px;color:#e8eef5}
.port{font-family:var(--mono);color:var(--mut);font-size:13px}

/* ---- Badges ---- */
.badge{font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:6px;display:inline-block}
.b-run{background:rgba(63,185,80,.14);color:var(--on)}
.b-idle{background:rgba(139,151,165,.14);color:var(--mut)}
.b-load{background:rgba(224,163,46,.16);color:var(--warn)}
.b-err{background:rgba(229,83,75,.16);color:var(--err)}
.b-ok{background:rgba(63,185,80,.14);color:var(--on)}

/* ---- Empty-States ---- */
.empty{color:var(--mut);font-size:13.5px;padding:14px 4px}
.empty-c{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:44px 16px;color:var(--mut)}
.empty-c .e-t{font-size:14px}
.empty-c .e-s{font-size:12.5px;color:var(--dim);margin-top:6px}

/* ---- Forms ---- */
label{display:block;font-size:12px;color:var(--mut);margin:0 0 5px}
input,textarea,select{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--tx);
  border-radius:8px;padding:9px 11px;font-family:var(--mono);font-size:13px;margin-bottom:12px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--act)}
textarea{resize:vertical;min-height:64px;font-family:var(--sans)}
.row{display:flex;gap:10px}.row>div{flex:1}
.hint{font-size:12px;color:var(--mut);margin:-4px 0 12px}
.mono-sm{font-family:var(--mono);font-size:11.5px;color:var(--mut)}

/* ---- Buttons ---- */
button{font-family:var(--sans);font-size:13.5px;font-weight:500;border:1px solid var(--line2);
  background:var(--panel2);color:var(--tx);border-radius:8px;padding:9px 15px;cursor:pointer;transition:.15s}
button:hover{border-color:var(--act)}
button.primary{background:var(--act);border-color:var(--act);color:#fff}
button.primary:hover{filter:brightness(1.08)}
button.danger{background:var(--err);border-color:var(--err);color:#fff}
button.danger:hover{filter:brightness(1.08)}
button.ghost{padding:6px 11px;font-size:12.5px}
button:disabled{opacity:.5;cursor:not-allowed}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}

/* ---- Reply / Log ---- */
.reply{margin-top:12px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  padding:12px;white-space:pre-wrap;font-size:14px;min-height:20px;color:var(--tx)}
.log{font-family:var(--mono);font-size:12px;line-height:1.65;background:var(--inset);border:1px solid var(--line);
  border-radius:8px;padding:12px;max-height:240px;overflow:auto;white-space:pre-wrap;color:#aeb9c4}
.job{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;overflow:hidden;background:var(--bg2)}
.job-h{display:flex;align-items:center;gap:10px;padding:11px 13px;cursor:pointer}
.job-h .mid{flex:1}

/* ---- Toast ---- */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--panel2);
  border:1px solid var(--line2);border-radius:10px;padding:11px 16px;font-size:13.5px;
  opacity:0;transition:.25s;pointer-events:none;max-width:90vw;z-index:50}
.toast.show{opacity:1}
.toast.err{border-color:var(--err);color:#ffb4ae}

/* ---- Accordion (Guides) ---- */
.guide-acc { border-bottom: 1px solid var(--line); }
.guide-acc:last-child { border-bottom: none; }
.guide-acc summary {
  padding: 16px 20px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.guide-acc summary::-webkit-details-marker { display: none; }
.guide-acc summary::after { content: "▼"; font-size: 10px; color: var(--mut); transition: transform 0.2s; }
.guide-acc[open] summary::after { transform: rotate(180deg); }
.guide-acc .acc-body { padding: 0 20px 20px 20px; }

/* ---- Utilities & Layout Helpers ---- */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.text-mut { color: var(--mut); }
.text-act { color: var(--act); }

/* ---- Interaktive Karten (A11y) ---- */
.card-btn {
  display: block; width: 100%; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); cursor: pointer; transition: border-color 0.15s, background 0.15s;
  color: var(--tx); font-family: var(--sans);
}
.card-btn:hover, .card-btn:focus {
  border-color: var(--act);
  background: var(--bg2);
  outline: none;
}
.card-btn h3 { margin: 0; font-size: var(--text-lg); font-weight: 600; }
.card-btn p { margin: var(--sp-2) 0 0; font-size: var(--text-sm); color: var(--mut); }