/* =============================================================================
   global-tables.css
   Brand-consistent table and badge styles applied across every page.
   Loaded globally via base.html (after Bootstrap) so these rules take
   priority over Bootstrap defaults wherever needed.
   ============================================================================= */

/* ─── Design tokens ─────────────────────────────────────────────────────────── */
:root {
    --brand-primary:     #1d1b96;
    --brand-primary-ink: #141266;
    --brand-accent:      #4b69df;
    --surface-muted:     #f4f7ff;
    --surface-soft:      #eef2ff;
    --surface-hover:     #e6ecff;
    --row-border:        #d9e1ff;
    --text-body:         #1a1a2e;
    --text-muted-soft:   #5a647d;
}

/* ─── Global table theming ───────────────────────────────────────────────────
   Targets Bootstrap's .table class so every table on every page inherits the
   brand-consistent header, row borders and hover colour.                       */

.table thead th {
    background-color: var(--surface-soft);
    color: var(--brand-primary-ink);
    border-bottom: 2px solid var(--row-border);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table tbody tr {
    border-color: var(--row-border);
}

.table tbody td {
    vertical-align: middle;
    color: var(--text-body);
    border-top: 1px solid var(--row-border);
}

.table tbody tr:nth-child(even) td {
    background-color: var(--surface-muted);
}

.table-hover tbody tr:hover td {
    background-color: var(--surface-hover);
}

/* ─── Badge / pill colour overrides ──────────────────────────────────────────
   Bootstrap's .badge sets `color: #fff` by default.  These rules use
   !important on the colour property to ensure readable dark text is always
   shown against the light semi-transparent pill backgrounds.                   */

.lookup-pill {
    background-color: rgba(29, 27, 150, 0.12);
    color: var(--brand-primary-ink) !important;
    border: 1px solid rgba(29, 27, 150, 0.25);
    font-weight: 600;
}

.status-pill {
    font-weight: 600;
    border-radius: 999px;
    padding: 0.28em 0.65em;
}

.status-pill-success {
    background-color: rgba(25, 135, 84, 0.15);
    color: #0f5132 !important;
    border: 1px solid rgba(25, 135, 84, 0.38);
}

.status-pill-warning {
    background-color: rgba(255, 193, 7, 0.18);
    color: #7a5200 !important;
    border: 1px solid rgba(255, 193, 7, 0.48);
}

.status-pill-danger {
    background-color: rgba(220, 53, 69, 0.14);
    color: #842029 !important;
    border: 1px solid rgba(220, 53, 69, 0.35);
}

.status-pill-muted {
    background-color: rgba(108, 117, 125, 0.14);
    color: #3a4148 !important;
    border: 1px solid rgba(108, 117, 125, 0.38);
}

/* Active / Inactive variants used on lookup-detail page */
.status-pill-active {
    background-color: rgba(25, 135, 84, 0.15);
    color: #0f5132 !important;
    border: 1px solid rgba(25, 135, 84, 0.38);
}

.status-pill-inactive {
    background-color: rgba(108, 117, 125, 0.14);
    color: #3a4148 !important;
    border: 1px solid rgba(108, 117, 125, 0.38);
}

/* ─── Monospace identifier cells (VIN / NIN masked values) ──────────────────── */
.identifier {
    font-family: "SFMono-Regular", Menlo, Monaco, Consolas,
                 "Liberation Mono", "Courier New", monospace;
    font-size: 0.92rem;
    color: var(--brand-primary-ink);
    letter-spacing: 0.02em;
}