/*
 * Project theme layer -- global Tabler variable overrides, loaded on every page
 * right after the Tabler CDN stylesheet (portal/templates/base.html and
 * portal/templates/auth_flow/_base.html).
 *
 * Contrast pass (2026-08-14), re-checked against Tabler 1.6.1 on 2026-10-04:
 * both chromes set data-bs-theme-base="gray", which keeps the 1.4.0 gray
 * palette these ratios were measured on. Stock Tabler runs far too light:
 * borders and table lines sit near 1.2:1 against their background, well under
 * the 3:1 WCAG 1.4.11 requires for the visible boundary of a UI control.
 * Every value below is measured, not eyeballed -- the ratio is in the comment
 * beside it.
 *
 * Mirrored in interop_django_framework app/static/app/theme.css. Keep the two in
 * sync; the framework copy is the canonical version for new projects.
 */

:root,
[data-bs-theme="light"] {
    /* Borders and lines. Two variables drive nearly everything:
         --tblr-border-color              .form-control / .form-select, navbar, .crud-method-btn
         --tblr-border-color-translucent  .card outline, .table lines, .form-check-input */
    --tblr-border-color: var(--tblr-gray-500); /* #6b7280 -- 4.83:1 on white (stock #e5e7eb = 1.24:1) */
    --tblr-border-color-translucent: rgba(4, 32, 69, 0.5); /* 3.25:1 on a card, 3.07:1 on the page (stock alpha .1 = 1.22:1) */

    /* Page background, 10% darker. Set --tblr-body-bg DIRECTLY rather than its
       --tblr-bg-surface-secondary alias, so card headers, card footers and
       striped table rows keep the OLD page shade (--tblr-bg-surface-tertiary,
       #f9fafb) and the card-vs-page separation widens instead of collapsing. */
    --tblr-body-bg: #e0e1e2; /* stock #f9fafb */

    /* Muted/hint text would fall to 3.69:1 on that darker page background, so
       darken it 15% to hold 4.5:1 there (6.22:1 inside a white card). */
    --tblr-secondary: #5b616d; /* stock #6b7280 */
    /* Hint text (.form-hint/.form-text) reads --tblr-secondary-color in 1.6, not
       --tblr-secondary; point it at the same darkened value so hints keep 4.5:1
       on the page background (stock 75%-alpha body colour measured 4.22:1). */
    --tblr-secondary-color: var(--tblr-secondary);
}

/* Tabler 1.6 no longer re-declares these inside [data-bs-theme="dark"] (the
   light/dark split moved into light-dark() on :root), so without this reset the
   light-mode overrides above would leak into the dark sidebar: muted text at
   ~2.4:1, dividers dark navy on dark. Stock dark values restored explicitly. */
[data-bs-theme="dark"] {
    --tblr-secondary: var(--tblr-gray-400);
    --tblr-secondary-color: var(--tblr-gray-400);
    --tblr-border-color: var(--tblr-dark-mode-border-color);
    --tblr-border-color-translucent: var(--tblr-dark-mode-border-color-translucent);
    --tblr-body-bg: var(--tblr-gray-900);
}

/* Card footers sit at the same shade as card headers. Tabler leaves .card-footer
   transparent over the card; crud.css hardcodes #fff on .crud-card .card-footer
   and loads AFTER this file (via {% block extra_css %}), so the crud selector
   needs the extra .card to win on specificity -- crud/ is vendored and must not
   be edited here. */
.card-footer,
.card.crud-card > .card-footer {
    background-color: var(--tblr-bg-surface-tertiary);
}

/* ---------------------------------------------------------------------------
   Badges / status pills
   ---------------------------------------------------------------------------
   House rule: a pill is ALWAYS white text, so every pill color has to be dark
   enough to carry it at 4.5:1. That is what the palette below encodes.

   Two spellings are in play -- the crud `pill` column format emits
   `badge rounded-pill text-bg-<token>` (crud/templatetags/crud_extras.py), while
   the portal templates mostly write `badge bg-<token>` -- so every token sets
   both. Tabler's soft `bg-*-lt` variants are a 10% tint meant for dark text;
   they are re-pointed at the same solid palette so they obey the same rule.

   Stock Tabler fails it on three tokens (warning 2.04:1, success 2.74:1,
   info 3.05:1) and all five -lt tints are effectively invisible (~1.1:1), so
   each background is darkened by the smallest step that clears 4.5:1 with a
   little margin. */

/* White text on anything carrying a bg-* class. A bare .badge is left alone --
   it keeps Tabler's own grey-on-light default (4.83:1) rather than going white
   on a near-white background. */
.badge[class*="bg-"] {
    color: #fff !important;
}

.badge.bg-primary,
.badge.text-bg-primary,
.badge.bg-blue,
.badge.bg-blue-lt {
    background-color: #0564bc !important; /* #066fd1, 10% darker -- 5.91:1 */
}

.badge.bg-secondary,
.badge.text-bg-secondary {
    background-color: #606773 !important; /* #6b7280, 10% darker -- 5.70:1 */
}

.badge.bg-danger,
.badge.text-bg-danger,
.badge.bg-red-lt {
    background-color: #c13333 !important; /* #d63939, 10% darker -- 5.54:1 */
}

.badge.bg-success,
.badge.text-bg-success,
.badge.bg-green-lt {
    background-color: #217d30 !important; /* #2fb344, 30% darker -- 5.20:1 */
}

.badge.bg-info,
.badge.text-bg-info {
    background-color: #3273a9 !important; /* #4299e1, 25% darker -- 5.05:1 */
}

.badge.bg-warning,
.badge.text-bg-warning {
    background-color: #9f6700 !important; /* #f59f00, 35% darker -- 4.76:1 */
}

.badge.bg-purple,
.badge.bg-purple-lt {
    background-color: #9d38b5 !important; /* #ae3ec9, 10% darker -- 5.73:1 */
}

.badge.bg-cyan-lt {
    background-color: #117a8a !important; /* #17a2b8, 25% darker -- 5.03:1 */
}

/* The darker page background must not reach the printed invoice/payable
   documents, which render their own black-on-white layout. */
@media print {
    body {
        background-color: #fff;
    }
}