/* components.css — Minimalism & Swiss Style. Depth from hairlines, not shadow. */

/* Cards / surfaces — flat, hairline border, square-ish */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: var(--s5); }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
.card__title { font-size: var(--fs-lg); font-weight: 600; letter-spacing: var(--tracking-tight); }

/* Buttons — Swiss: near-black primary, hairline secondary, quiet ghost */
.btn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font: 500 var(--fs-md)/1 var(--font); padding: 9px 14px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.btn > i { font-size: 12px; opacity: .85; }
.btn--block { width: 100%; justify-content: center; }
.btn:hover { background: var(--surface-2); border-color: var(--text-faint); }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn:active { background: var(--surface-2); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--primary:hover { background: #000; border-color: #000; }
.btn--accent { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn--accent:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--text-muted); padding-inline: 10px; }
.btn--ghost:hover { background: var(--surface-2); color: var(--text); }

/* Fields & inputs — sharp, hairline, accent focus ring */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); font-weight: 500; }
.input { font: var(--fs-md)/1.2 var(--font); padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); transition: border-color .15s ease, box-shadow .15s ease; }
.input:hover { border-color: var(--text-faint); }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.input:disabled { background: var(--surface-2); color: var(--text-faint); cursor: not-allowed; }
.input.num { font-family: var(--font-mono); text-align: right; }

/* Data tables — the hero. Söhne Mono figures, hairlines, sticky head */
.dp-table-wrap { overflow-x: auto; }
.dp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.dp-table th, .dp-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.dp-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); color: var(--text-faint); font-weight: 500; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); text-align: right; }
.dp-table th:first-child, .dp-table td:first-child { text-align: left; }
.dp-table td.num, .dp-table tbody td:not(:first-child) { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--text); }
.dp-table tbody tr:nth-child(even) { background: #fbfbfc; }
.dp-table tbody tr:hover { background: var(--surface-2); }
.dp-table tr.is-total td { border-top: 1px solid var(--ink); font-weight: 600; color: var(--ink); }
.dp-table tr.is-emphasis td { background: var(--surface-2); }

/* Tabs — accent underline */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.tab { padding: 10px 14px; border: none; background: none; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; font: 500 var(--fs-md)/1 var(--font); transition: color .15s ease; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }

/* Badges — small, square, status = color + text */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 500; padding: 2px 7px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
.badge--pos { background: var(--positive-soft); color: var(--positive); border-color: transparent; }
.badge--warn { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.badge--neg { background: var(--negative-soft); color: var(--negative); border-color: transparent; }

/* KPI — big Söhne Mono figure under an eyebrow label */
.kpi { display: flex; flex-direction: column; gap: 4px; }
.kpi__label { font-size: var(--fs-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-weight: 500; }
.kpi__value { font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); color: var(--ink); }
.kpi__sub { font-size: var(--fs-xs); color: var(--text-muted); }

/* Feedback states */
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, #ececee 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: sk 1.2s infinite; border-radius: var(--r-sm); }
@keyframes sk { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.empty { color: var(--text-faint); font-size: var(--fs-sm); text-align: center; padding: var(--s7); }

/* Input with leading icon */
.input-group { position: relative; display: flex; align-items: center; }
.input-group > i { position: absolute; left: 11px; color: var(--text-faint); font-size: 12px; pointer-events: none; }
.input-group > .input { width: 100%; padding-left: 32px; }

/* Inline form error — icon + text, never a full-width block */
.form-error { display: inline-flex; align-items: center; gap: 6px; color: var(--negative); font-size: var(--fs-sm); font-weight: 500; }
.form-error > i { font-size: 12px; }

/* KPI detail: label icon, negative figures in red, small unit suffix */
.kpi__label > i { color: var(--text-faint); margin-right: 6px; font-size: 11px; width: 12px; text-align: center; }
.kpi__value--neg { color: var(--negative); }
.kpi__unit { font-family: var(--font); font-size: var(--fs-sm); font-weight: 400; color: var(--text-faint); margin-left: 3px; letter-spacing: 0; }

/* Lock (read-only) — distinct from disabled: quiet, not greyed to nothing */
.app--locked .input, .app--locked .btn--edit, .app--locked .editable { pointer-events: none; opacity: .7; cursor: default; }
.app--locked .input { background: var(--surface-2); border-style: dashed; }