/* The --jas-* palette and its dark-mode values. Every colour a rule sets should come from here.
   Load order and where a new rule goes: docs/css-structure.md. */

:root {
    --bs-link-color: #337ab7;
    --kendo-font-size: .9rem;

    /* Semantic-role tokens (surface/text/border/brand), not one per literal. A consumer's
    var(--jas-x, <literal>) fallback is NOT what light mode renders: these are defined here, so light uses
    the value below. Only a token defined solely in the dark block (--jas-divider, --jas-surface-muted)
    leaves light on the fallback. */
    --jas-bg: #fff;
    --jas-bg-subtle: #f8fafc;
    --jas-text: #212529;
    /* KEEP THESE TWO IN STEP WITH THE HEX ABOVE - they are the same colours as rgb triples, because
    Bootstrap 5.3 derives values from -rgb companions that it cannot derive from a hex: --bs-secondary-color
    (and therefore .text-muted, on ~150 elements) is rgba(var(--bs-body-color-rgb), .75). CSS cannot split
    a hex itself, so this is the one place in this file where a colour is written twice; they sit adjacent
    so the pair is edited together. The dark block below carries the same four lines. */
    --jas-text-rgb: 33, 37, 41;
    --jas-bg-rgb: 255, 255, 255;
    --jas-text-muted: #6c757d;
    --jas-border: #dee2e6;
    --jas-primary: #337ab7;
    --jas-accent: #16c4f6;
    --jas-selected-bg: #00b6ff57;
    /* The "emphasized" account-header stat callout (e.g. over-limit balance) - a warm cream/orange
    surface, not a small self-contained badge, so unlike this file's badge/alert colors it DOES need a
    dark-mode value rather than being left alone. */
    --jas-emphasis-bg: #fff7ed;
    --jas-emphasis-border: #fed7aa;
    --jas-emphasis-text: #c2410c;
    /* A "this filter/tile is the active selection" tint - Bootstrap-primary-ish blue, used e.g. by
    Timeline/Index.cshtml's active summary tile. Same shape as --jas-emphasis-* above: a surface, not a
    small badge, so it needs its own dark-mode value. */
    --jas-selected-tile-bg: #cfe2ff;
    /* A "this is wrong and is blocking you" callout - the templates workspace's token findings. Same
    shape as --jas-emphasis-* above and added for the same stated reason: a full-width tinted SURFACE
    rather than a small self-contained badge, so the file's usual "leave alert colours alone" rule does
    not apply and it needs a real dark-mode value. */
    --jas-danger-bg: #fdecec;
    --jas-danger-border: #f5c2c2;
    --jas-danger-text: #8c1d1d;
    /* Its counterpart for "added" - the template history diff. Same reasoning: a tinted surface. */
    --jas-success-bg: #e7f6ec;
    --jas-success-text: #1d6b3a;
}

/* Values that actually differ in dark mode. --jas-accent has no entry here on purpose - the brand cyan
already reads fine against both a light and a dark surface, so it isn't overridden. --bs-link-color is
included alongside --jas-primary so links stay legible against a dark background too. */
[data-bs-theme="dark"] {
    --bs-link-color: #5b9bd5;
    --jas-bg: #1a1d21;
    --jas-bg-subtle: #242a30;
    --jas-text: #dee2e6;
    /* Same colours as rgb triples - keep in step with the two hexes above. See the light block. */
    --jas-text-rgb: 222, 226, 230;
    --jas-bg-rgb: 26, 29, 33;
    --jas-text-muted: #9aa4ad;
    --jas-border: #3a4048;
    --jas-primary: #5b9bd5;
    --jas-selected-bg: #0d6efd66;
    --jas-emphasis-bg: #3d2c14;
    --jas-emphasis-border: #6b4a1e;
    --jas-emphasis-text: #ffb37a;
    --jas-selected-tile-bg: #1a2744;
    --jas-danger-bg: #3d1d1d;
    --jas-danger-border: #6b2e2e;
    --jas-danger-text: #ff9b9b;
    --jas-success-bg: #16301f;
    --jas-success-text: #8fdca8;

    /* DARK-ONLY, no light value on purpose. Each consumer writes var(--jas-divider, <its own grey>), so light
       mode keeps the ~18 slightly different greys it always had, and dark mode draws them all at one value.
       --jas-surface-muted is the same idea for small light-grey surfaces (count chips, hover tints). */
    --jas-divider: #3a4048;
    --jas-surface-muted: #2b3036;
}

/* Full-height grids. appFunc.TrackPinnedChrome (site/grid-layout.js) measures the bars that stay pinned on every
   page into --jas-pinned-chrome (and, on Accounts/Details and Carriers/Details, --jas-pane-trailing), and
   --jas-grid-dataarea-height is the window below them: 100dvh before anything has measured. A .jas-fill-pane fills
   it, and its grid takes whatever the pane's other content leaves, so no grid in one carries a height of its own. A
   grid never drops below 350px - the page scrolls instead.

   The bottom action panel (accounts_details/action_panel.js) sets --jas-offcanvas-height while it is open, so
   a pane ends above it rather than under it. */
:root {
    --jas-offcanvas-height: 0px;
    --jas-grid-dataarea-height: calc(100dvh - var(--jas-pinned-chrome, 0px) - var(--jas-pane-trailing, 0px) - var(--jas-offcanvas-height));
}