/* Additional kit-specific styles layered on top of colors_and_type.css */
:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body { background: var(--paper); font-family: var(--font-sans); color: var(--fg); font-size: 14px; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--haze); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--steel-100); }

/* -- primitives ---------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; font-size:13.5px; font-weight:500; border-radius:4px; border:none; cursor:pointer; transition: background 120ms, box-shadow 120ms, color 120ms; font-family: inherit; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(212,0,0,0.25); }
.btn-primary { background: var(--red-500); color:#fff; }
.btn-primary:hover { background: var(--red-600); }
.btn-primary:active { background: var(--red-700); }
.btn-secondary { background: var(--teal-600); color:#fff; }
.btn-secondary:hover { background: var(--teal-700); }
.btn-outline { background:#fff; color: var(--teal-700); box-shadow: inset 0 0 0 1px var(--border); }
.btn-outline:hover { background: var(--paper); box-shadow: inset 0 0 0 1px var(--teal-500); color: var(--teal-700); }
.btn-ghost { background: transparent; color: var(--teal-700); }
.btn-ghost:hover { background: var(--teal-50); }
.btn-icon { width:32px; height:32px; padding:0; justify-content:center; }
.btn-sm { padding:5px 10px; font-size: 12.5px; }
.btn-lg { padding:11px 20px; font-size: 14.5px; }
.btn[disabled] { opacity:.45; cursor: not-allowed; }

/* inputs */
.input, .select, .textarea { font-family: inherit; font-size:14px; padding:8px 12px; border: 1px solid var(--border); border-radius: 4px; background:#fff; color: var(--fg); outline: none; transition: border-color 120ms, box-shadow 120ms; width: 100%; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--red-500); box-shadow: 0 0 0 3px rgba(212,0,0,0.18); }
.field { display:flex; flex-direction:column; gap:5px; }
.field-label { font-size:12px; font-weight:600; color: var(--fg); letter-spacing: 0; }
.field-hint { font-size:11.5px; color: var(--fg-muted); }
.input-group { display:flex; align-items:stretch; border: 1px solid var(--border); border-radius:4px; background:#fff; overflow:hidden; transition: border-color 120ms, box-shadow 120ms; }
.input-group:focus-within { border-color: var(--red-500); box-shadow: 0 0 0 3px rgba(212,0,0,0.18); }
.input-group .input { border: none; box-shadow: none; flex:1; }
.input-group .input:focus { box-shadow: none; }
.input-group .unit { padding: 0 12px; background: var(--bg-sunken); color: var(--fg-muted); font-family: var(--font-mono); font-size:12px; display:flex; align-items:center; border-left: 1px solid var(--border); }

/* card */
.card { background:#fff; border-radius: 8px; box-shadow: 0 1px 2px rgba(1,68,85,.06), inset 0 0 0 1px var(--border); }
.card-head { padding: 14px 18px; border-bottom: 1px solid var(--border); display:flex; align-items:center; gap: 12px; }
.card-body { padding: 14px 18px; }
.card-title { font-size: 15px; font-weight: 600; color: var(--fg); margin: 0; }
.card-eyebrow { font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color: var(--red-500); }

/* badge */
.badge { display:inline-flex; align-items:center; gap:6px; padding:2px 9px; font-size:11.5px; font-weight:600; border-radius:999px; }
.badge .dot { width:6px; height:6px; border-radius:50%; background: currentColor; }
.b-ok { background:#E3F2EA; color:#1F7A4D; }
.b-wn { background:#FBF1DD; color:#8A5500; }
.b-er { background:#FBE6E6; color:#990000; }
.b-in { background:var(--teal-50); color:var(--teal-700); }
.b-nt { background:var(--mist); color:var(--steel-500); }

/* tag */
.tag { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; font-size:11.5px; background:#fff; border:1px solid var(--border); border-radius:4px; color: var(--fg); font-family: var(--font-mono); }

/* Scrollable table */
.tbl { width:100%; border-collapse:collapse; }
.tbl th { text-align:left; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color: var(--fg-muted); padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--paper); position: sticky; top: 0; z-index: 1; }
.tbl td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 13.5px; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: #FAFBFC; cursor: pointer; }
.tbl tr.active td { background: var(--teal-50); }
.tbl td.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* KPI */
.kpi { display:flex; flex-direction:column; gap: 4px; padding: 18px 20px; background:#fff; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--border); position: relative; overflow: hidden; }
.kpi-label { font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color: var(--fg-muted); }
.kpi-value { font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: var(--teal-700); font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi-unit { font-size: 13px; color: var(--fg-muted); margin-left: 4px; font-weight: 400; }
.kpi-delta { font-family: var(--font-mono); font-size: 12px; color: var(--success); }
.kpi-delta.down { color: var(--red-600); }
.kpi.critical { border-top: 3px solid var(--red-500); }

/* modal */
.scrim { position: fixed; inset: 0; background: rgba(1,68,85,0.40); display:flex; align-items:center; justify-content:center; z-index: 50; animation: fadeIn 160ms var(--ease-standard); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal { background:#fff; border-radius: 8px; width: 560px; max-width: calc(100vw - 32px); box-shadow: 0 20px 40px rgba(1,68,85,0.24); animation: rise 180ms var(--ease-standard); }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.modal-body { padding: 18px 20px; max-height: 60vh; overflow: auto; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--border); display:flex; align-items:center; justify-content:flex-end; gap: 10px; background: var(--paper); border-radius: 0 0 8px 8px; }

/* Eyebrow label */
.eyebrow { font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color: var(--red-500); }

/* Dot red */
.reddot { display:inline-block; width:8px; height:8px; background:var(--red-500); border-radius:50%; vertical-align: 1px; }