/* =============================================================================================
   WPI Design Template  ·  LAYER 2: TABLER / BOOTSTRAP 5 BRIDGE

   Maps the semantic --wpi-* tokens onto Tabler's variables, once, for every skin. Nothing in
   this file knows which palette is active.

   Load AFTER tabler.min.css and BEFORE wpi-components.css. Tailwind apps load
   wpi-tailwind.css instead of this file; nothing else changes.

   The vendored Tabler build (v1.0.0-beta21) defines its dark surfaces as LITERALS (#151f2c and
   friends) rather than resolving them through the gray scale, so each surface and text variable
   is overridden explicitly rather than relying on the gray regrade in wpi-tokens.css.
   ============================================================================================= */


:root,
[data-bs-theme] {
    --tblr-body-bg: var(--wpi-page);
    --tblr-bg-surface: var(--wpi-surface);
    --tblr-bg-surface-dark: var(--wpi-surface);
    --tblr-bg-surface-secondary: var(--wpi-surface-alt);
    --tblr-bg-surface-tertiary: var(--wpi-surface-alt);
    --tblr-bg-forms: var(--wpi-surface);
    --tblr-active-bg: var(--wpi-surface-alt);
    --tblr-secondary-bg: var(--wpi-surface-alt);      /* striped-table and hover tone */
    --tblr-tertiary-bg: var(--wpi-surface-alt);

    --tblr-body-color: var(--wpi-ink);
    --tblr-secondary-color: var(--wpi-ink-2);
    /* In this build .text-secondary / .link-secondary read --tblr-secondary(-rgb) and .subheader
       reads --tblr-secondary, NOT the -color pair. Both sets are kept deliberately. */
    --tblr-secondary: var(--wpi-ink-2);
    --tblr-tertiary-color: var(--wpi-ink-3);
    --tblr-muted: var(--wpi-ink-3);

    --tblr-link-color: var(--wpi-link);
    --tblr-link-hover-color: var(--wpi-link-hover);
    --tblr-primary-text-emphasis: var(--wpi-link);

    --tblr-primary: var(--wpi-accent);
    --tblr-primary-fg: var(--wpi-accent-ink);
    --tblr-primary-darken: var(--wpi-accent-hover);
    --tblr-btn-color: var(--wpi-accent-ink);

    --tblr-border-color: var(--wpi-hairline);
    --tblr-border-color-translucent: var(--wpi-hairline);
    --tblr-dark-mode-border-color: var(--wpi-hairline);
    --tblr-dark-mode-border-color-translucent: var(--wpi-hairline);
    --tblr-dark-mode-border-active-color: var(--wpi-accent);

    --tblr-code-bg: var(--wpi-surface-alt);           /* stock keeps a navy chip */

    --tblr-success: var(--wpi-pos);
    --tblr-danger: var(--wpi-neg);
}

/* Tabler reads several of these as bare "r, g, b" triplets for its rgba() compositing, and a
   var() reference cannot produce a triplet from a hex. These are the only places a palette
   literal is repeated below layer 1; keep them in sync when a token changes. */
[data-bs-theme="dark"] {
    --tblr-body-bg-rgb: 0, 0, 0;
    --tblr-body-color-rgb: 239, 231, 213;
    --tblr-secondary-color-rgb: 179, 168, 142;
    --tblr-secondary-rgb: 179, 168, 142;
    --tblr-tertiary-color-rgb: 134, 125, 101;
    --tblr-muted-rgb: 134, 125, 101;
    --tblr-primary-rgb: 200, 165, 92;
    --tblr-link-color-rgb: 217, 188, 130;
    --tblr-link-hover-color-rgb: 232, 207, 160;
    --tblr-primary-lt: rgba(200, 165, 92, 0.14);
    --tblr-primary-lt-rgb: 200, 165, 92;
    --tblr-primary-bg-subtle: #191509;
    --tblr-primary-border-subtle: #4a3d1f;
}
[data-bs-theme="light"] {
    --tblr-body-bg-rgb: 246, 241, 230;
    --tblr-body-color-rgb: 34, 27, 14;
    --tblr-secondary-color-rgb: 95, 85, 64;
    --tblr-secondary-rgb: 95, 85, 64;
    --tblr-tertiary-color-rgb: 115, 106, 85;
    --tblr-muted-rgb: 115, 106, 85;
    --tblr-primary-rgb: 143, 107, 46;
    --tblr-link-color-rgb: 122, 92, 39;
    --tblr-link-hover-color-rgb: 110, 82, 34;
    --tblr-primary-lt: rgba(143, 107, 46, 0.12);
    --tblr-primary-lt-rgb: 143, 107, 46;
    --tblr-primary-bg-subtle: #f5efe1;
    --tblr-primary-border-subtle: #d8c69c;
}
[data-bs-theme="dark"][data-palette="brand"] {
    --tblr-body-bg-rgb: 6, 9, 12;
    --tblr-body-color-rgb: 232, 238, 241;
    --tblr-secondary-color-rgb: 159, 176, 186;
    --tblr-secondary-rgb: 159, 176, 186;
    --tblr-tertiary-color-rgb: 114, 130, 141;
    --tblr-muted-rgb: 114, 130, 141;
    --tblr-primary-rgb: 116, 223, 111;
    --tblr-link-color-rgb: 7, 182, 230;
    --tblr-link-hover-color-rgb: 81, 204, 238;
    --tblr-primary-lt: rgba(116, 223, 111, 0.14);
    --tblr-primary-lt-rgb: 116, 223, 111;
    --tblr-primary-bg-subtle: #0d1c0c;
    --tblr-primary-border-subtle: #2f5c2d;
}
[data-bs-theme="light"][data-palette="brand"] {
    --tblr-body-bg-rgb: 244, 248, 249;
    --tblr-body-color-rgb: 25, 25, 26;
    --tblr-secondary-color-rgb: 76, 90, 99;
    --tblr-secondary-rgb: 76, 90, 99;
    --tblr-tertiary-color-rgb: 99, 112, 121;
    --tblr-muted-rgb: 99, 112, 121;
    --tblr-primary-rgb: 7, 117, 223;
    --tblr-link-color-rgb: 6, 110, 209;
    --tblr-link-hover-color-rgb: 5, 88, 167;
    --tblr-primary-lt: rgba(7, 182, 230, 0.15);
    --tblr-primary-lt-rgb: 7, 182, 230;
    --tblr-primary-bg-subtle: #e6f1fd;
    --tblr-primary-border-subtle: #a8ccf3;
}


/* =============================================================================================
   LAYER 2b: THE STOCK-TABLER GOTCHAS

   Each rule here exists because a stock Tabler declaration wins without it. None are cosmetic
   preferences; removing any one reintroduces a specific shipped bug.
   ============================================================================================= */

/* .wpi-card has to opt INTO Tabler's card variable contract, or its slots collapse.
 *
 * Tabler declares --tblr-card-spacer-*, --tblr-card-cap-* and friends on .card and nowhere else,
 * while .card-header / .card-body / .card-footer / .card-title read them. Put those children
 * inside a .wpi-card that is not also a .card and every one of those var() lookups is undefined,
 * which makes the whole declaration invalid at computed-value time. padding then falls back to
 * its INITIAL value, which is 0: headers, bodies and footers render edge to edge with no
 * padding, no cap background and no divider. It looks like a broken stylesheet, not a missing
 * variable, which is what makes it expensive to diagnose.
 *
 * Declaring the contract here means a host app can write <div class="wpi-card"><div
 * class="card-header"> and have it work, which is the markup everyone reaches for anyway.
 * Values mirror Tabler's own defaults; the colors route through the palette. */
.wpi-card {
    --tblr-card-spacer-y: 1rem;
    --tblr-card-spacer-x: 1.25rem;
    --tblr-card-title-spacer-y: 1.25rem;
    --tblr-card-cap-padding-y: 1rem;
    --tblr-card-cap-padding-x: 1.25rem;
    --tblr-card-img-overlay-padding: 1rem;

    --tblr-card-border-width: var(--tblr-border-width);
    --tblr-card-border-color: var(--wpi-hairline);
    --tblr-card-border-radius: 14px;              /* matches .wpi-card's own radius */
    --tblr-card-inner-border-radius: 13px;
    --tblr-card-bg: var(--wpi-surface);
    --tblr-card-color: inherit;
    --tblr-card-cap-color: inherit;

    /* Transparent, NOT Tabler's tertiary surface. The hairline card is meant to read as one
       continuous surface under a single top shine; a tinted cap band cuts it in half and is the
       first thing that makes this look like stock Tabler again. The divider still lands, from
       --tblr-card-border-color above. */
    --tblr-card-cap-bg: transparent;
}

/* Form controls carry the palette's own border, and it is gated at 3:1 (WCAG 1.4.11) because in
   the dark skins the input fill equals the card fill: the border is the ONLY thing marking the
   control. The decorative card hairline is intentionally softer and is not a control boundary. */
.form-control,
.form-select,
.form-check-input {
    border-color: var(--wpi-form-border);
}

/* The stock caret data-URIs are declared ON .form-select, so a theme-root override never reaches
   them. They must be re-declared at the same element level, once per skin. */
[data-bs-theme="dark"] .form-select {
    --tblr-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cfc6ad' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
[data-bs-theme="light"] .form-select {
    --tblr-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b6250' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"][data-palette="brand"] .form-select {
    --tblr-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239fb0ba' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
[data-bs-theme="light"][data-palette="brand"] .form-select {
    --tblr-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234c5a63' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Focus. This build's --tblr-focus-ring-color feeds only the unused .focus-ring utility, and the
   select focuses with a hardcoded cool border. Everything focusable gets an explicit accent ring. */
.form-select:focus,
.form-control:focus {
    border-color: var(--wpi-accent);
    box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.35);
}
/* .btn only. The framework-agnostic focus ring for a / button / select / [tabindex] lives in
   wpi-components.css so the Tailwind stack gets it too. */
.btn:focus-visible {
    outline: 2px solid var(--wpi-accent);
    outline-offset: 2px;
}

/* Stock Tabler declares .link-secondary:focus and :hover in ONE rule with !important on BOTH
   color and text-decoration-color (a cool #566274). Override both states and both properties, or
   keyboard focus keeps cool text and hover draws a cool underline beneath accent-colored text. */
.link-secondary:hover,
.link-secondary:focus {
    color: var(--wpi-link-hover) !important;
    text-decoration-color: var(--wpi-link-hover) !important;
}

/* Pagination routes --tblr-pagination-color through gray-500, which lands sub-AA on card footers
   in every skin. Route it through the link colors, which are already gated. */
.pagination {
    --tblr-pagination-color: var(--wpi-link);
    --tblr-pagination-hover-color: var(--wpi-link-hover);
    --tblr-pagination-active-bg: var(--wpi-accent);
    --tblr-pagination-active-color: var(--wpi-accent-ink);
}
/* Stock .page-link:focus sets outline:0 at (0,2,0), beating the generic a:focus-visible rule.
   Restore the ring at matching specificity, later in the cascade. */
.page-link:focus-visible {
    outline: 2px solid var(--wpi-accent);
    outline-offset: 2px;
}

/* Badge tints. Tabler's .bg-blue-lt / .bg-secondary-lt carry cool literals with !important, so
   beating them needs !important back. The .wpi-badge-* classes themselves live in
   wpi-components.css WITHOUT !important, so a utility class can still override them.
   Plain tokens, not color-mix(): Safari before 16.2 drops a color-mix background entirely. */
.badge.bg-blue-lt {
    background: var(--wpi-badge-a-bg) !important;
    color: var(--wpi-badge-a-ink) !important;
}
.badge.bg-secondary-lt {
    background: var(--wpi-badge-b-bg) !important;
    color: var(--wpi-badge-b-ink) !important;
}


/* =============================================================================================
   PRINT (Bootstrap-class-specific half; the gradient-text fallback lives in wpi-components.css)
   ============================================================================================= */
@media print {
    /* Paper gets no interactive controls. Disabled buttons stay: they often carry the only
       state text on the page ("Redemption paused"), which is informational, not interactive. */
    a.btn,
    button.btn:not([disabled]),
    .pagination {
        display: none !important;
    }
}