/* ==========================================================================
   Design system layer (loaded after site.css): compact type scale, spacing,
   radii and elevation adapted from "Dashboard" (Open Design Agent Kit) for
   dense data screens. Protocol colours are kept. Dashboard: 11/13/15/17/22/30/42
   scale, 8/12/18 radii, cool borders; tabular figures (idea from Stripe).
   Fonts: Poppins headings, Open Sans for data (matches the public site).
   ========================================================================== */
:root {
    --ds-font-display: "Poppins", system-ui, sans-serif;
    --ds-font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --ds-fg: #12142a;
    --ds-fg-2: #3a3d52;
    --ds-muted: #686b80;
    --ds-bg: #f4f4fa;
    --ds-border: #dfdcee;
    --ds-border-soft: #eceaf6;
    --ds-radius-sm: 8px;
    --ds-radius-md: 12px;
    --ds-radius-lg: 18px;
    --ds-ring: 0 0 0 1px var(--ds-border);
    --ds-raised: 0 18px 46px rgba(12, 14, 29, .10);
    --ds-focus: 0 0 0 4px rgba(70, 53, 185, .22);
    --ds-ease: cubic-bezier(.2, 0, 0, 1);
    --bs-body-font-family: var(--ds-font-body);
    --bs-body-color: var(--ds-fg-2);
    --bs-body-line-height: 1.48;
    --bs-secondary-color: var(--ds-muted);
    --bs-border-color: var(--ds-border);
    --bs-border-radius: var(--ds-radius-sm);
    --bs-border-radius-lg: var(--ds-radius-md);
    --bs-border-radius-xl: var(--ds-radius-lg);
}
body { background: var(--ds-bg); color: var(--ds-fg-2); font-size: 14px; line-height: 1.48; -webkit-font-smoothing: antialiased; }
body.login-page { background-color: var(--ink); }
.text-muted { color: var(--ds-muted) !important; }
.content { max-width: 1440px; width: 100%; }

/* Type scale (compact) */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .kpi-value, .sidebar-brand, .card-header, .btn {
    font-family: var(--ds-font-display);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--ds-fg); letter-spacing: -.015em; line-height: 1.2; }
h4, .h4 { font-size: 22px; }
h5, .h5 { font-size: 17px; }
h6, .h6 { font-size: 15px; }
.page-head h1 { font-size: 22px; font-weight: 700; letter-spacing: -.015em; }
small, .small { font-size: 13px; }
.sidebar .nav-link { font-family: var(--ds-font-display); font-size: 13.5px; }
.sidebar .nav-section { font-size: 11px; }

/* Surfaces */
.card { border: 0; border-radius: var(--ds-radius-md); box-shadow: var(--ds-ring); }
.card > .card-header:first-child { border-radius: var(--ds-radius-md) var(--ds-radius-md) 0 0; }
.card-header { font-size: 14px; font-weight: 600; padding: 12px 16px; border-color: var(--ds-border-soft); }
.card-body { padding: 16px; }
.card-footer { border-color: var(--ds-border-soft); background: #fff; }
.modal-content { border: 0; border-radius: var(--ds-radius-lg); box-shadow: var(--ds-raised); }
.dropdown-menu { border: 0; border-radius: var(--ds-radius-sm); box-shadow: var(--ds-ring), var(--ds-raised); }
.alert { border-radius: var(--ds-radius-md); border-width: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); }
.list-group { --bs-list-group-border-color: var(--ds-border-soft); --bs-list-group-border-radius: var(--ds-radius-md); }
.topbar { border-bottom-color: var(--ds-border); }

/* KPI tiles: status-first, tabular numbers */
.kpi { padding: 16px; }
.kpi .kpi-label { font-size: 12px; font-weight: 600; color: var(--ds-muted); }
.kpi .kpi-value { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin-top: 4px; }
.kpi-value, .table, .badge { font-variant-numeric: tabular-nums; }

/* Dense tables */
.table { --bs-table-border-color: var(--ds-border-soft); font-size: 13px; }
.table > :not(caption) > * > * { padding: .55rem .75rem; }
.table thead th { font-size: 11px; letter-spacing: .06em; color: var(--ds-muted); background: #faf9fe; border-bottom: 1px solid var(--ds-border); }
.table-sm > :not(caption) > * > * { padding: .35rem .6rem; }

/* Controls */
.btn { font-weight: 600; font-size: 13.5px; transition: all 120ms var(--ds-ease); }
.btn-sm { font-size: 12.5px; }
.form-label { font-weight: 600; color: var(--ds-fg); font-size: 13px; margin-bottom: 4px; }
.form-control, .form-select { border-radius: var(--ds-radius-sm); border-color: var(--ds-border); font-size: 14px; }
.form-control:focus, .form-select:focus, .form-check-input:focus, .btn:focus-visible { box-shadow: var(--ds-focus); border-color: #a79ce6; }
.badge { border-radius: 99px; padding: .35em .65em; font-size: 11.5px; letter-spacing: .01em; }
.nav-tabs { border-bottom-color: var(--ds-border); }
.nav-tabs .nav-link { font-family: var(--ds-font-display); font-size: 13px; }
.dl-grid dt { font-size: 13px; }
.chart-box { height: 240px; }