/*
 * CollisionSuite — Global Typography
 * Variant 5: Compact / Material density
 *
 * Applies site-wide after Bootstrap. Overrides Bootstrap defaults with a
 * 14px base, system font stack, Material-style 500-weight headings,
 * and tabular numerals on financial data.
 *
 * Loaded in base.html immediately after Bootstrap CSS.
 */

/* ── Root / Body ─────────────────────────────────────────────────────────── */
:root {
    --bs-body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    --bs-body-font-size: 14px;
    --bs-body-line-height: 1.45;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Headings ────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 500;                    /* Material-style medium — down from Bootstrap's 700 */
    line-height: 1.25;
    font-variant-numeric: tabular-nums;  /* Numbers line up in financial data */
    margin-bottom: 0.5rem;
}

h1, .h1 { font-size: 1.5rem;  letter-spacing: -0.01em; }   /* ~21px */
h2, .h2 { font-size: 1.25rem; }                             /* ~17.5px */
h3, .h3 { font-size: 1.1rem;  }                             /* ~15.4px */
h4, .h4 { font-size: 1rem;    font-weight: 500; }
h5, .h5,
h6, .h6 { font-size: 0.9rem;  font-weight: 500; }

/* Exception: dashboard stat numbers stay prominent even in compact */
.card .h4 { font-size: 1.35rem; }

/* ── Small / Muted text ──────────────────────────────────────────────────── */
.small, small,
.text-muted,
.form-text { font-size: 0.78rem; }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge { font-size: 0.72rem; padding: 0.3em 0.55em; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
table { font-size: 0.88rem; }
table td,
table th { padding: 0.35rem 0.5rem; }

/* Tabular numerals on right-aligned numeric columns */
table td.text-end,
table th.text-end,
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn    { font-size: 0.875rem; padding: 0.3rem 0.75rem; }
.btn-sm { font-size: 0.78rem;  padding: 0.18rem 0.55rem; }

/* ── Form controls ───────────────────────────────────────────────────────── */
.form-control,
.form-select { font-size: 0.875rem; padding: 0.3rem 0.6rem; }

.form-label { font-size: 0.8rem; font-weight: 500; margin-bottom: 0.25rem; }

/* ── Nav tile hover (used on settings/devices/roles index cards) ─────────── */
.card.nav-tile {
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.card.nav-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.25rem 0.5rem rgba(var(--bs-emphasis-color-rgb), 0.1);
}

/* ── Table state backgrounds — suppressed by design ──────────────────────────
 * Bootstrap's table-warning/danger/success/info/primary/secondary row classes
 * paint full-row backgrounds that (a) fight the striped theme and (b) aren't
 * theme-aware. Signal state with an icon in the row instead:
 *   <i class="bi bi-exclamation-triangle-fill text-warning"></i>  (caution)
 *   <i class="bi bi-x-circle-fill text-danger"></i>                (error/stop)
 *   <i class="bi bi-check-circle-fill text-success"></i>           (ok/done)
 *
 * `.table-active` is allowed (semantic emphasis, theme-aware). */
.table-warning,
.table-danger,
.table-success,
.table-info,
.table-primary,
.table-secondary {
    --bs-table-bg: transparent !important;
    --bs-table-color: inherit !important;
    --bs-table-striped-bg: transparent !important;
    --bs-table-striped-color: inherit !important;
    --bs-table-active-bg: transparent !important;
    --bs-table-active-color: inherit !important;
    --bs-table-hover-bg: transparent !important;
    --bs-table-hover-color: inherit !important;
    --bs-table-border-color: inherit !important;
    color: inherit !important;
    border-color: inherit !important;
}