/* ============================================================================
   UNIQ dashboard / shell CSS — subset used by Jornada (KPIs, panels, badges,
   tables, buttons, form inputs). Ported from uniq_design/screens/2-dashboard.jsx
   ============================================================================ */

/* ── KPI ─────────────────────────────────────────────────────────── */
.uniq-kpi {
    padding: 14px 16px;
    background: var(--uniq-surface);
    border: 1px solid var(--uniq-line);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 116px;
}
.uniq-kpi__head { display: flex; justify-content: space-between; align-items: center; }
.uniq-kpi__label {
    font-size: 11px;
    color: var(--uniq-text-dim);
    letter-spacing: .3px;
    text-transform: uppercase;
    font-weight: 500;
}
.uniq-kpi__value { display: flex; align-items: baseline; gap: 8px; }
.uniq-num {
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
    color: var(--uniq-text);
}
.uniq-kpi__num { font-size: 26px; font-weight: 500; letter-spacing: -.3px; }
.uniq-kpi__delta {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
}
.uniq-kpi__delta--up { color: var(--uniq-ok); }
.uniq-kpi__delta--down { color: var(--uniq-bad); }
.uniq-kpi__sub { font-size: 11px; color: var(--uniq-text-mute); }

/* ── Panel ───────────────────────────────────────────────────────── */
.uniq-panel {
    background: var(--uniq-surface);
    border: 1px solid var(--uniq-line);
    border-radius: 6px;
    overflow: hidden;
}
.uniq-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 12px 16px;
    border-bottom: 1px solid var(--uniq-line);
}
.uniq-panel__title { font-size: 13px; font-weight: 600; letter-spacing: -.1px; }
.uniq-panel__subtitle { font-size: 11px; color: var(--uniq-text-dim); margin-top: 2px; }
.uniq-panel__body { padding: 14px 16px; }
.uniq-panel__body--nopad { padding: 0; }

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.uniq-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 4px;
    font: 500 12px/1 inherit;
    font-family: 'Inter', 'Geist', sans-serif;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    color: var(--uniq-text);
}
.uniq-btn--primary { background: var(--uniq-accent); color: #fff; border-color: var(--uniq-accent); }
.uniq-btn--primary:hover { filter: brightness(1.08); }
.uniq-btn--secondary { background: var(--uniq-surface2); border-color: var(--uniq-line-strong); }
.uniq-btn--ghost { color: var(--uniq-text-dim); }
.uniq-btn--ghost:hover { background: var(--uniq-surface2); color: var(--uniq-text); }

/* ── Badge ───────────────────────────────────────────────────────── */
.uniq-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 18px;
    padding: 0 6px;
    border-radius: 3px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .3px;
    text-transform: uppercase;
    border: 1px solid var(--uniq-line);
    background: transparent;
    color: var(--uniq-text-dim);
    font-family: inherit;
    white-space: nowrap;
}
.uniq-badge--ok { background: rgba(95, 169, 140, 0.14); border-color: var(--uniq-ok); color: var(--uniq-ok); }
.uniq-badge--warn { background: rgba(216, 168, 96, 0.14); border-color: var(--uniq-warn); color: var(--uniq-warn); }
.uniq-badge--bad { background: var(--uniq-brand-soft); border-color: var(--uniq-brand); color: var(--uniq-brand); }
.uniq-badge--info { background: rgba(107, 155, 196, 0.14); border-color: var(--uniq-info); color: var(--uniq-info); }
.uniq-badge--accent { background: var(--uniq-accent-soft); border-color: var(--uniq-accent); color: var(--uniq-accent); }

/* ── Data tables ─────────────────────────────────────────────────── */
.uniq-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.uniq-table thead th {
    font-size: 10.5px;
    color: var(--uniq-text-mute);
    letter-spacing: .3px;
    text-transform: uppercase;
    font-weight: 500;
    text-align: left;
    padding: 8px 12px;
    background: var(--uniq-surface2);
    border-bottom: 1px solid var(--uniq-line);
}
.uniq-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--uniq-line);
    vertical-align: middle;
}
.uniq-table tbody tr:hover { background: var(--uniq-surface2); }
.uniq-right { text-align: right; }

/* ── Misc ────────────────────────────────────────────────────────── */
.uniq-muted { color: var(--uniq-text-dim); }
.uniq-mute { color: var(--uniq-text-mute); }

/* ── Form inputs ─────────────────────────────────────────────────── */
.uniq-field { display: flex; flex-direction: column; gap: 4px; }
.uniq-field__label {
    font-size: 10.5px;
    color: var(--uniq-text-dim);
    letter-spacing: .3px;
    text-transform: uppercase;
    font-weight: 500;
}
.uniq-input {
    height: 32px;
    padding: 0 10px;
    background: var(--uniq-surface2);
    border: 1px solid var(--uniq-line);
    border-radius: 4px;
    color: var(--uniq-text);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color .1s;
}
.uniq-input:focus { border-color: var(--uniq-accent); background: var(--uniq-surface); }
.uniq-input::placeholder { color: var(--uniq-text-mute); }