/* THE SKINS — Chad's design, 2026-09-02, rebuilt from his dev-tools mocks.
   One component layer reads variables; each skin is ONLY a variable block on
   [data-gf-theme], so a new skin is a new block, never new rules (ethos 2).
   Fresh Sage is the default and also the no-attribute state. Rides after
   platform.css; changes clothes, never information. */

:root, [data-gf-theme="sage"] {
    --sk-accent: #2f9e44;
    --sk-accent-ink: #ffffff;
    --sk-accent-soft: #e3f2e7;
    --sk-ground: #eef4ef;
    --sk-ground-wash: linear-gradient(180deg, #e7f1e9 0%, #f2f7f3 240px);
    --sk-card: #ffffff;
    --sk-line: #dde7df;
    --sk-ink: #1f2a37;
    --sk-sub: #2f9e44;
    --sk-tile: #f2f8f3;
    --sk-tile-line: #e0ebe2;
    --sk-chip: #e3f2e7;
    --sk-chip-ink: #2f9e44;
    --sk-rail: #1a2e22;
    --sk-rail-ink: #cfe0d3;
    --sk-rail-label: #7fa88a;
    --sk-rail-hover: #24402f;
    --sk-rail-active: #2f9e44;
    --sk-rail-active-ink: #ffffff;
    --sk-rail-line: #24402f;
    --sk-rail-logo-light: none;   /* dark rail: show the dark-theme wordmark */
    --sk-rail-logo-dark: inline-block;
}

[data-gf-theme="linen"] {
    --sk-accent: #c07f2d;
    --sk-accent-ink: #ffffff;
    --sk-accent-soft: #f6e7d2;
    --sk-ground: #f8f1e6;
    --sk-ground-wash: linear-gradient(180deg, #f3e6d2 0%, #faf4ea 240px);
    --sk-card: #ffffff;
    --sk-line: #ecdfcc;
    --sk-ink: #2b2420;
    --sk-sub: #b3762a;
    --sk-tile: #f9f1e4;
    --sk-tile-line: #eee0ca;
    --sk-chip: #f6e7d2;
    --sk-chip-ink: #b3762a;
    --sk-rail: #ffffff;
    --sk-rail-ink: #5c4f42;
    --sk-rail-label: #b3762a;
    --sk-rail-hover: #f6ecdd;
    --sk-rail-active: #f0dfc6;
    --sk-rail-active-ink: #8a5a1d;
    --sk-rail-line: #eee3d2;
    --sk-rail-logo-light: inline-block;
    --sk-rail-logo-dark: none;
}

[data-gf-theme="slate"] {
    --sk-accent: #2563eb;
    --sk-accent-ink: #ffffff;
    --sk-accent-soft: #e2ebfd;
    --sk-ground: #eef2f8;
    --sk-ground-wash: linear-gradient(180deg, #e6edf7 0%, #f1f5fa 240px);
    --sk-card: #ffffff;
    --sk-line: #dce4ef;
    --sk-ink: #1f2a37;
    --sk-sub: #2563eb;
    --sk-tile: #f1f5fb;
    --sk-tile-line: #dfe8f4;
    --sk-chip: #e2ebfd;
    --sk-chip-ink: #2563eb;
    --sk-rail: #16233a;
    --sk-rail-ink: #c3d0e2;
    --sk-rail-label: #7d94b5;
    --sk-rail-hover: #1f3150;
    --sk-rail-active: #2563eb;
    --sk-rail-active-ink: #ffffff;
    --sk-rail-line: #1f3150;
    --sk-rail-logo-light: none;
    --sk-rail-logo-dark: inline-block;
}


[data-gf-theme="purple"] {
    --sk-accent: #7c3aed;
    --sk-accent-ink: #ffffff;
    --sk-accent-soft: #ede7fd;
    --sk-ground: #f3effc;
    --sk-ground-wash: linear-gradient(180deg, #ece4fa 0%, #f5f1fc 240px);
    --sk-card: #ffffff;
    --sk-line: #e4dcf5;
    --sk-ink: #241b3a;
    --sk-sub: #7c3aed;
    --sk-tile: #f4f0fc;
    --sk-tile-line: #e6ddf6;
    --sk-chip: #ede7fd;
    --sk-chip-ink: #7c3aed;
    --sk-rail: #2a1a4a;
    --sk-rail-ink: #cfc4e8;
    --sk-rail-label: #8f7cc0;
    --sk-rail-hover: #382463;
    --sk-rail-active: #7c3aed;
    --sk-rail-active-ink: #ffffff;
    --sk-rail-line: #382463;
    --sk-rail-logo-light: none;
    --sk-rail-logo-dark: inline-block;
}

[data-gf-theme="red"] {
    --sk-accent: #dc3545;
    --sk-accent-ink: #ffffff;
    --sk-accent-soft: #fbe5e8;
    --sk-ground: #faf0f1;
    --sk-ground-wash: linear-gradient(180deg, #f9e4e6 0%, #fbf2f3 240px);
    --sk-card: #ffffff;
    --sk-line: #f0dcdf;
    --sk-ink: #331b1f;
    --sk-sub: #c62f3e;
    --sk-tile: #fbf1f2;
    --sk-tile-line: #f2dee1;
    --sk-chip: #fbe5e8;
    --sk-chip-ink: #c62f3e;
    --sk-rail: #2b1216;
    --sk-rail-ink: #e0c4c9;
    --sk-rail-label: #a87880;
    --sk-rail-hover: #3d1a20;
    --sk-rail-active: #dc3545;
    --sk-rail-active-ink: #ffffff;
    --sk-rail-line: #3d1a20;
    --sk-rail-logo-light: none;
    --sk-rail-logo-dark: inline-block;
}

[data-gf-theme="orange"] {
    --sk-accent: #ea7317;
    --sk-accent-ink: #ffffff;
    --sk-accent-soft: #fdead8;
    --sk-ground: #faf3ea;
    --sk-ground-wash: linear-gradient(180deg, #f8e9d8 0%, #fbf4ec 240px);
    --sk-card: #ffffff;
    --sk-line: #efe0cd;
    --sk-ink: #33241a;
    --sk-sub: #d2670f;
    --sk-tile: #fbf3e9;
    --sk-tile-line: #f0e1cd;
    --sk-chip: #fdead8;
    --sk-chip-ink: #d2670f;
    --sk-rail: #2b1d10;
    --sk-rail-ink: #e2cdb8;
    --sk-rail-label: #a88a66;
    --sk-rail-hover: #3e2a17;
    --sk-rail-active: #ea7317;
    --sk-rail-active-ink: #ffffff;
    --sk-rail-line: #3e2a17;
    --sk-rail-logo-light: none;
    --sk-rail-logo-dark: inline-block;
}

[data-gf-theme="noir"] {
    --sk-accent: #d9d9d9;
    --sk-accent-ink: #141414;
    --sk-accent-soft: #393939;
    --sk-ground: #141414;
    --sk-ground-wash: linear-gradient(180deg, #101010 0%, #161616 240px);
    --sk-card: #1f1f1f;
    --sk-line: #2e2e2e;
    --sk-ink: #e8e8e8;
    --sk-sub: #9e9e9e;
    --sk-tile: #2e2e2e;
    --sk-tile-line: #3a3a3a;
    --sk-chip: #393939;
    --sk-chip-ink: #f0f0f0;
    --sk-rail: #0a0a0a;
    --sk-rail-ink: #b8b8b8;
    --sk-rail-label: #6f6f6f;
    --sk-rail-hover: #1c1c1c;
    --sk-rail-active: #2e2e2e;
    --sk-rail-active-ink: #f0f0f0;
    --sk-rail-line: #1f1f1f;
    --sk-rail-logo-light: none;
    --sk-rail-logo-dark: inline-block;
}

/* ---------------- the component layer ---------------- */

body { background: var(--sk-ground); background-image: var(--sk-ground-wash);
       background-repeat: no-repeat; color: var(--sk-ink); }

/* THE HEADER BAR: the page says its name once, up top, with the app's few
   global controls beside it. Sticky so the name survives a long table. */
.page-header { background: var(--sk-card); border-bottom: 1px solid var(--sk-line);
    padding: .65rem 0; margin-bottom: 1rem; position: sticky; top: 0; z-index: 20;
    box-shadow: 0 1px 2px rgba(31,42,55,.04); }
.page-title { font-size: 1.35rem; font-weight: 800; color: var(--sk-ink); }
.page-pretitle { color: var(--sk-sub); font-weight: 700; letter-spacing: .08em; }

.gf-global-search .form-control { min-width: 180px; border-radius: 8px; }
/* THE SKIN PICKER. The header dots are gone (Chad, 2026-09-02) and the
   choice lives on the profile page instead, so the same dot idiom is relaid
   as labelled radio choices — the radio is left visible because it is the
   thing that says which one is picked, on paper and to a screen reader. The
   seven colours are each skin's own accent from the blocks above, unchanged;
   they are keyed on data-gf-skin rather than an element name so the swatch
   can be whatever markup the page needs. */
.gf-skins { display: flex; flex-wrap: wrap; gap: .5rem; }
.gf-skins label { display: inline-flex; align-items: center; gap: .5rem;
    background: var(--sk-card); border: 1px solid var(--sk-line);
    border-radius: 999px; padding: .35rem .8rem; cursor: pointer; }
.gf-skins .dot { display: inline-block; width: 16px; height: 16px;
    border-radius: 50%; }
.gf-skins [data-gf-skin="sage"] .dot { background: #2f9e44; }
.gf-skins [data-gf-skin="linen"] .dot { background: #c07f2d; }
.gf-skins [data-gf-skin="slate"] .dot { background: #2563eb; }

/* ---- cards, sections ---- */
.card { background: var(--sk-card); border: 1px solid var(--sk-line);
    border-radius: 12px; box-shadow: 0 1px 2px rgba(31,42,55,.04), 0 6px 18px rgba(31,42,55,.05); }
.card-header { background: transparent; border-bottom: 1px solid var(--sk-line); }
.card-title { font-weight: 800; font-size: 1.05rem; color: var(--sk-ink); }
.card-subtitle, .card-header .card-subtitle { color: var(--sk-sub);
    text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700; }

/* ---- the launcher tiles: tinted card, chip, real icon ---- */
.tile { background: var(--sk-tile); border: 1px solid var(--sk-tile-line);
    border-radius: 12px; transition: transform .08s ease, box-shadow .08s ease; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(31,42,55,.10); }
.tile .glyph { display: block; margin: 0 auto .55rem; width: 48px; height: 48px;
    border-radius: 12px; background: var(--sk-chip); color: var(--sk-chip-ink);
    line-height: 48px; font-size: 22px; text-align: center; }
.tile .glyph .ti { width: 24px; height: 24px; vertical-align: middle; }
.tile .card-body { font-weight: 650; color: var(--sk-ink); }
.tile.soon { opacity: .55; }

/* ---- the rail ---- */
.navbar-vertical { background: var(--sk-rail); border-right: 1px solid var(--sk-rail-line); }
.navbar-vertical .gf-when-light { display: var(--sk-rail-logo-light); }
.navbar-vertical .gf-when-dark { display: var(--sk-rail-logo-dark); }
/* A heading inside a section reads as a LABEL, not a link. A class and not
   a position in the list: since 2026-10-05 the same list also holds the
   sections themselves and the pages of a section with no headings, and
   those are things to press. */
.navbar-vertical .gf-rail-label {
    color: var(--sk-rail-label); text-transform: uppercase; font-size: .68rem;
    letter-spacing: .1em; font-weight: 800; margin-top: .6rem; pointer-events: auto; }
/* the items */
.navbar-vertical .nav-vertical .nav-link { color: var(--sk-rail-ink);
    border-radius: 8px; margin: 1px 8px; padding: .42rem .75rem; font-weight: 550; }
.navbar-vertical .nav-vertical .nav-link:hover { background: var(--sk-rail-hover); color: var(--sk-rail-active-ink); }
.navbar-vertical .nav-vertical .nav-link.active { background: var(--sk-rail-active);
    color: var(--sk-rail-active-ink); font-weight: 700; }
.navbar-vertical .nav-vertical .nav-link.disabled { color: var(--sk-rail-label); opacity: .55; }
/* The way back, pinned while a section's pages scroll under it, in the
   rail's own colours so every skin paints it; and under it the name of the
   section that is open. */
.navbar-vertical .gf-rail-back { position: sticky; top: 0; z-index: 1;
    background: var(--sk-rail); border-bottom: 1px solid var(--sk-rail-line); }
.navbar-vertical .gf-rail-here { color: var(--sk-rail-label); font-weight: 800;
    padding: .2rem 1.5rem .5rem; }
/* the footer block: theme toggle, user, sign out — plain case, never labels */
.navbar-vertical .mt-auto .nav-link { color: var(--sk-rail-ink);
    text-transform: none; font-size: inherit; letter-spacing: normal;
    font-weight: 500; margin-top: 0; }
.navbar-vertical .mt-auto .nav-link.text-secondary { color: var(--sk-rail-label) !important; }

/* ---- actions ---- */
.btn-primary, .mc-pick.confident { background: var(--sk-accent);
    border-color: var(--sk-accent); color: var(--sk-accent-ink); }
.btn-primary:hover { filter: brightness(.92); background: var(--sk-accent); border-color: var(--sk-accent); }
.btn-outline-primary { color: var(--sk-accent); border-color: var(--sk-accent); }
.btn-outline-primary:hover { background: var(--sk-accent); color: var(--sk-accent-ink);
    border-color: var(--sk-accent); }
.form-control:focus, .form-select:focus { border-color: var(--sk-accent);
    /* The surface and the ink are restated on focus on purpose: Tabler's
       dark-mode :focus rule repaints the background, and with the skin's
       ink left alone a tapped box went black-on-black (Chad, 2026-09-08). */
    background: var(--sk-card); color: var(--sk-ink);
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--sk-accent) 14%, transparent); }
a { color: var(--sk-accent); }
.navbar-vertical a.nav-link { color: var(--sk-rail-ink); }

/* ---- tables: quiet ground behind numbers, whatever the skin ---- */
table.data { background: var(--sk-card); }
table.data thead th { background: color-mix(in srgb, var(--sk-ground) 55%, var(--sk-card));
    color: var(--sk-ink); opacity: .85; text-transform: uppercase;
    font-size: .68rem; letter-spacing: .06em; }
table.data tbody tr:hover { background: color-mix(in srgb, var(--sk-accent) 6%, var(--sk-card)); }

.ti { width: 20px; height: 20px; }

.gf-skins [data-gf-skin="purple"] .dot { background: #7c3aed; }
.gf-skins [data-gf-skin="red"] .dot { background: #dc3545; }
.gf-skins [data-gf-skin="orange"] .dot { background: #ea7317; }
.gf-skins [data-gf-skin="noir"] .dot { background: #2e2e2e; border: 1px solid #6f6f6f; }

/* ---------------- the Tabler bridge ----------------
   Platform components style themselves with Tabler's variables, and Tabler
   only knows light/dark — so a page-specific card stayed white under Matte
   Noir with ghost-gray titles (Chad's screenshot, 2026-09-02). Remapping the
   framework's core variables to the skin ONCE puts every Tabler-based
   surface — match cards, forms, list rows, dropdowns — inside the theme
   system with no per-component sweep. Semantic colors (the red/green that
   MEAN something) are deliberately not remapped. */
:root, [data-gf-theme] {
    --tblr-body-bg: var(--sk-ground);
    --tblr-body-color: var(--sk-ink);
    --tblr-bg-surface: var(--sk-card);
    --tblr-bg-surface-secondary: var(--sk-tile);
    --tblr-bg-surface-tertiary: var(--sk-chip);
    --tblr-border-color: var(--sk-line);
    --tblr-primary: var(--sk-accent);
    --tblr-link-color: var(--sk-accent);
    --tblr-muted: color-mix(in srgb, var(--sk-ink) 55%, var(--sk-ground));
    --tblr-secondary: color-mix(in srgb, var(--sk-ink) 60%, var(--sk-ground));
}
.form-control, .form-select { background: var(--sk-card); color: var(--sk-ink);
    border-color: var(--sk-line); }
.form-control::placeholder { color: color-mix(in srgb, var(--sk-ink) 40%, var(--sk-ground)); }
/* The bare inputs -- the On hand edit box on Stock, count-list and qty
   boxes, the match-review search -- carry no Tabler class, so the rule
   above never reaches them and the browser's dark scheme painted them as a
   black block on a light skin cell (Chad, 2026-09-08). Same clothes. */
td.oh .ohedit input, table.countlist input, .qtyrow input, .mc-search input {
    background: var(--sk-card); color: var(--sk-ink); border-color: var(--sk-line); }
.text-secondary { color: color-mix(in srgb, var(--sk-ink) 58%, var(--sk-ground)) !important; }

/* ---------------- interior surfaces get the homepage feel ---------------- */

/* list rows (counts in-progress, results everywhere): cards in a stack */
.list-group-item {
    background: var(--sk-card); color: var(--sk-ink); border: 1px solid var(--sk-line);
    border-radius: 10px !important; margin-bottom: .5rem; padding: .8rem 1rem;
    transition: transform .08s ease, box-shadow .08s ease;
}
.list-group-item-action:hover { background: var(--sk-tile); transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,.08); color: var(--sk-ink); }
.list-group { border-radius: 0; }

/* the match cards join the family */
.matchcard { border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: .8rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.05); }
.mc-raw { font-family: "DM Sans", "Inter", sans-serif; font-weight: 700; font-size: 1.02rem; }
.mc-seen { color: color-mix(in srgb, var(--sk-ink) 50%, var(--sk-ground)); }
.mc-pick:hover, .mc-result:hover { background: var(--sk-accent-soft); border-color: var(--sk-accent); }

/* segmented tabs (finance and friends): a control, not loose pills */
.nav-segmented { background: var(--sk-card); border: 1px solid var(--sk-line);
    border-radius: 10px; padding: .25rem; display: inline-flex; gap: .25rem; }
.nav-segmented .nav-link { border-radius: 8px; color: var(--sk-ink); padding: .4rem .8rem; }
.nav-segmented .nav-link.active { background: var(--sk-accent); color: var(--sk-accent-ink); }

/* forms and filter blocks sit on cards, like everything else */
.bigform, .filters { border-radius: 12px; }
.pager { color: var(--sk-ink); }
.fillstat .todo, .fillstat .done, .fillstat .of { border-radius: 999px; }

/* plain page headings (h3 section splits like "In progress") get hierarchy */
.page-body h3 { font-family: "DM Sans", "Inter", sans-serif; font-weight: 700;
    color: var(--sk-ink); }

/* ---------------- round 3 of Chad's eye: stripes and standalone tables ----
   "Make the white stripe lighter blue" — on a tinted skin a pure-white zebra
   row reads as a gap, so BOTH stripes now carry the accent: the base row a
   whisper, the stripe a step more. Derived from the skin, so every theme
   gets its own version of the same idea. */
table.data tbody tr,
.table-striped > tbody > tr {
    background: color-mix(in srgb, var(--sk-accent) 2%, var(--sk-card));
    --tblr-table-striped-bg: color-mix(in srgb, var(--sk-accent) 7%, var(--sk-card));
    --tblr-table-accent-bg: transparent;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background: color-mix(in srgb, var(--sk-accent) 7%, var(--sk-card));
    box-shadow: none; color: var(--sk-ink);
}
table.data tbody td { color: var(--sk-ink); }

/* tables that stand on the bare page get the card treatment the home tiles
   set the standard for — readiness and the order bucket wrap theirs in
   .table-responsive, which becomes the card */
.page-body .table-responsive {
    background: var(--sk-card); border: 1px solid var(--sk-line);
    border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.05);
    margin-bottom: 1rem;
}
.card .table-responsive { border: 0; box-shadow: none; border-radius: 0;
    margin-bottom: 0; background: transparent; }

/* section headings that float on the ground (order bucket's manufacturer and
   family splits, readiness' job lines) read as headings, not strays */
.page-body h3, .page-body h4 { font-family: "DM Sans", "Inter", sans-serif;
    font-weight: 700; color: var(--sk-ink); margin-top: 1.1rem; }
.page-body h4 { font-size: 1rem; opacity: .9; }

/* ---------------- round 4 of Chad's eye: stripes are UNIVERSAL ----------
   His rule, adopted: anything tabular is a card with rows in it, and rows
   alternate — one row or fifty, striped by default, no opt-in class needed.
   List screens (jobs, allocated) alternate the same way so nothing blends. */
table.data tbody tr:nth-of-type(odd) td,
.card .table tbody tr:nth-of-type(odd) td {
    background: color-mix(in srgb, var(--sk-accent) 7%, var(--sk-card));
}
.results .list-group-item:nth-of-type(odd) {
    background: color-mix(in srgb, var(--sk-accent) 6%, var(--sk-card));
}
.results .list-group-item:nth-of-type(even) {
    background: color-mix(in srgb, var(--sk-accent) 2%, var(--sk-card));
}
.results .list-group-item-action:hover {
    background: color-mix(in srgb, var(--sk-accent) 11%, var(--sk-card));
}

/* trucks: the homepage grammar applied to installers */
.truck-tile .truck-name { font-family: "DM Sans", "Inter", sans-serif;
    font-weight: 700; margin-bottom: .25rem; }
.truck-tile .badge { margin-bottom: .35rem; }
.truck-tile .truck-count { color: color-mix(in srgb, var(--sk-ink) 60%, var(--sk-ground));
    font-size: .85rem; font-weight: 500; }