/* ============================================================================
   PTD BRAND OVERRIDE
   Maps the Peachtree Data design system (design.md: cream/charcoal/peach,
   Figtree, pill buttons, hairline borders) onto the compiled Phoenix theme.
   Loaded AFTER theme.css/user.min.css in the layouts. Approved direction
   (boss, 2026-07-08); colors/fonts/components only — spacing deliberately
   unchanged. Light theme only: the app's dark mode was removed with this
   re-skin (the brand system has no dark mode; charcoal is a layout device).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. TOKENS — remap Phoenix root variables to the brand palette
   --------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
    /* Typeface */
    --phoenix-font-sans-serif: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --phoenix-body-font-family: var(--phoenix-font-sans-serif);

    /* Surfaces */
    --phoenix-body-bg: #F2F0EB;                 /* surface (warm bone) */
    --phoenix-body-bg-rgb: 242, 240, 235;
    --phoenix-emphasis-bg: #FFFFFF;             /* surface-raised */
    --phoenix-emphasis-bg-rgb: 255, 255, 255;
    --phoenix-secondary-bg: #E5E2DB;
    --phoenix-secondary-bg-rgb: 229, 226, 219;
    --phoenix-secondary-bg-subtle: #ECE9E2;
    --phoenix-tertiary-bg: #E5E2DB;
    --phoenix-tertiary-bg-rgb: 229, 226, 219;
    --phoenix-body-highlight-bg: #EBE8E1;       /* hovers, table hover */
    --phoenix-body-highlight-bg-rgb: 235, 232, 225;

    /* Text */
    --phoenix-body-color: #1C1B18;              /* on-surface */
    --phoenix-body-color-rgb: 28, 27, 24;
    --phoenix-emphasis-color: #1C1B18;
    --phoenix-emphasis-color-rgb: 28, 27, 24;
    --phoenix-secondary-color: #6B665C;         /* on-surface-muted */
    --phoenix-secondary-color-rgb: 107, 102, 92;

    /* Gray ramp — Phoenix's cool blue-grays remapped to warm greige. The app's own CSS
       (jobdetails.css criteria-section, scrollbars, chips) leans on gray-50…gray-700
       directly, so warming the ramp re-skins those surfaces app-wide in one place. */
    --phoenix-gray-50: #F7F5F1;
    --phoenix-gray-100: #F2F0EB;
    --phoenix-gray-200: #E5E2DB;
    --phoenix-gray-300: #C9C4B8;
    --phoenix-gray-400: #A39E92;
    --phoenix-gray-500: #8A8578;
    --phoenix-gray-600: #6B665C;
    --phoenix-gray-700: #57534A;
    --phoenix-gray-800: #3E3B33;
    --phoenix-gray-900: #33312C;
    --phoenix-gray-1000: #26241F;
    --phoenix-gray-1100: #1C1B18;
    --phoenix-gray-50-rgb: 247, 245, 241;
    --phoenix-gray-100-rgb: 242, 240, 235;
    --phoenix-gray-200-rgb: 229, 226, 219;
    --phoenix-gray-300-rgb: 201, 196, 184;
    --phoenix-gray-400-rgb: 163, 158, 146;
    --phoenix-gray-500-rgb: 138, 133, 120;
    --phoenix-gray-600-rgb: 107, 102, 92;
    --phoenix-gray-700-rgb: 87, 83, 74;
    --phoenix-gray-800-rgb: 62, 59, 51;
    --phoenix-gray-900-rgb: 51, 49, 44;
    --phoenix-gray-1000-rgb: 38, 36, 31;
    --phoenix-gray-1100-rgb: 28, 27, 24;
    --phoenix-light: #F2F0EB;
    --phoenix-light-rgb: 242, 240, 235;
    --phoenix-dark: #1C1B18;
    --phoenix-dark-rgb: 28, 27, 24;

    /* Secondary family (badges, subtle chips) — warm neutral */
    --phoenix-secondary: #6B665C;
    --phoenix-secondary-rgb: 107, 102, 92;
    --phoenix-secondary-text-emphasis: #4E4A42;
    --phoenix-secondary-border-subtle: #C9C4B8;

    /* Borders — hairline everywhere */
    --phoenix-border-color: #E5E2DB;
    --phoenix-border-color-rgb: 229, 226, 219;
    --phoenix-border-color-translucent: rgba(28, 27, 24, 0.1);
    --phoenix-border-color-translucent-rgb: 229, 226, 219;
    /* Stock Bootstrap 5.1.0 (the second Bootstrap that loads) predates these
       vars, but DataTables v2's stylesheet reads them — undefined they resolve
       to currentColor at `medium` width, drawing a fat charcoal rule under
       every scrolling DataTable (Edit Columns modal). Define them once. */
    --bs-border-color: #E5E2DB;
    --bs-border-width: 1px;

    /* Primary = charcoal (the black pill) */
    --phoenix-primary: #1C1B18;
    --phoenix-primary-rgb: 28, 27, 24;
    --phoenix-primary-lighter: #ECE9E2;
    --phoenix-primary-light: #C9C4B8;
    --phoenix-primary-dark: #131210;
    --phoenix-primary-darker: #0A0908;
    --phoenix-primary-bg-subtle: #ECE9E2;
    --phoenix-primary-text-emphasis: #1C1B18;
    --phoenix-primary-border-subtle: #C9C4B8;

    /* Accent family — peach, spent sparingly (decoration/hover); accent-ink for text */
    --phoenix-accent: #EF8C52;
    --phoenix-accent-bright: #FF9752;
    --phoenix-accent-ink: #A85219;

    /* Links = accent-ink (burnt peach, AA on cream) */
    --phoenix-link-color: #A85219;
    --phoenix-link-color-rgb: 168, 82, 25;
    --phoenix-link-hover-color: #8A4315;
    --phoenix-link-hover-color-rgb: 138, 67, 21;

    /* Semantic colors — warm-tuned, data meaning only */
    --phoenix-success: #4A9B6E;
    --phoenix-success-rgb: 74, 155, 110;
    --phoenix-success-text-emphasis: #2F6B4A;
    --phoenix-success-bg-subtle: #E3F0E8;
    --phoenix-success-border-subtle: #A8CDB8;
    --phoenix-warning: #E0A83E;
    --phoenix-warning-rgb: 224, 168, 62;
    --phoenix-warning-text-emphasis: #8A6420;
    --phoenix-warning-bg-subtle: #F9EFDA;
    --phoenix-warning-border-subtle: #EDD29E;
    --phoenix-danger: #D26B4C;
    --phoenix-danger-rgb: 210, 107, 76;
    --phoenix-danger-text-emphasis: #93432B;
    --phoenix-danger-bg-subtle: #F6E3DC;
    --phoenix-danger-border-subtle: #E3AE9D;
    /* info has no slot in the brand palette — render it as neutral taupe */
    --phoenix-info: #6B665C;
    --phoenix-info-rgb: 107, 102, 92;
    --phoenix-info-text-emphasis: #4E4A42;
    --phoenix-info-bg-subtle: #ECE9E2;
    --phoenix-info-border-subtle: #C9C4B8;

    /* Shape scale: sm 8 / md 12 / lg 20 / pill */
    --phoenix-border-radius: 8px;
    --phoenix-border-radius-sm: 8px;
    --phoenix-border-radius-lg: 12px;
    --phoenix-border-radius-xl: 20px;
    --phoenix-border-radius-pill: 50rem;

    --phoenix-highlight-bg: #F9EFDA;

    /* Sidebar + top bar sit on the cream surface with hairline borders */
    --phoenix-navbar-vertical-bg-color: #F2F0EB;
    --phoenix-navbar-vertical-border-color: #E5E2DB;
    --phoenix-navbar-vertical-hr-color: #E5E2DB;
    --phoenix-navbar-vertical-label-color: #A85219;   /* kicker treatment */
    --phoenix-navbar-vertical-link-color: #6B665C;
    --phoenix-navbar-vertical-link-hover-color: #1C1B18;
    --phoenix-navbar-vertical-link-hover-bg: #EBE8E1;
    --phoenix-navbar-vertical-link-active-color: #A85219;
    --phoenix-navbar-vertical-dropdown-indicator-color: #A39E92;
    --phoenix-navbar-top-bg-color: #F2F0EB;
    --phoenix-navbar-top-border-color: #E5E2DB;
    --phoenix-navbar-top-link-color: #1C1B18;

}

/* Top-bar height matches the pre-rebrand header, which was RESPONSIVE by
   accident: the old 200x100 logo img (distorted attrs) stretched the bar to
   ~100px, but only at >=lg — below that it stayed at Phoenix's 4rem minimum
   (measured on prod: 64.0px narrow / 100.8px wide). Only the bar itself gets
   taller — --phoenix-navbar-top-height stays 4rem so the content offset and
   sidebar top keep prod's exact geometry (content starts 96px down; the
   taller bar overlaps that gap, same as prod). */
@media (min-width: 992px) {
    .navbar-top {
        min-height: 6.25rem;
    }
}

/* The logo always renders at its intrinsic aspect ratio (200 wide × ~44.5
   tall, same visible size as the pre-rebrand header) — the width/height
   attributes stay as pre-layout hints, but CSS height:auto wins, so no
   attribute rounding (or future attr edits) can distort it. */
.navbar-brand img,
.navbar img[alt="Peachtree Data"] {
    height: auto;
}

/* Keep the hamburger + logo dead-center in the top bar. Phoenix's own
   .navbar-logo height rule is mangled in the compiled theme (invalid value,
   dropped by the browser), leaving its children baseline-aligned. */
.navbar-top .navbar-logo {
    display: flex;
    align-items: center;
}

/* Top bar mirrors the marketing-site header on scroll: cream at rest,
   lifting to the white raised surface with the float shadow once the page
   scrolls past 8px. .ptd-scrolled is toggled by the dashboard layout. */
.navbar-top {
    transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.navbar-top.ptd-scrolled {
    --phoenix-navbar-top-bg-color: #FFFFFF;              /* surface-raised */
    border-bottom-color: transparent;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);          /* shadow-float */
}

/* ---------------------------------------------------------------------------
   2. TYPOGRAPHY — Figtree, weight 600 headings, negative tracking
   --------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    color: #1C1B18;
}

h1, .h1 { letter-spacing: -0.015em; }
h2, .h2 { letter-spacing: -0.01em; }

/* Sidebar section label as a kicker: uppercase, tracked, burnt peach */
.navbar-vertical-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   3. BUTTONS — the pill language
   --------------------------------------------------------------------------- */
.btn {
    border-radius: 50rem;
}

/* Grouped/appended buttons keep square-ish corners so input groups still read */
.input-group .btn {
    border-radius: var(--phoenix-border-radius);
}

/* Stock Bootstrap 5.1.0 (the second Bootstrap that loads) paints .btn-*:focus
   with literal hexes — BLUE for .btn-primary — while Phoenix (5.3) only styles
   :focus-visible. A mouse click leaves the button :focus but NOT :focus-visible,
   so clicked buttons flashed stock blue (seen on the Builder's Add Codes).
   Pin click-focus to the button's own vars; keyboard focus keeps Phoenix's
   :focus-visible treatment (these selectors exclude it). */
.btn:focus:not(:focus-visible) {
    color: var(--phoenix-btn-color);
    background-color: var(--phoenix-btn-bg);
    border-color: var(--phoenix-btn-border-color);
    box-shadow: none;
}

/* …but while actually pressed, the active treatment still wins */
.btn:active:focus:not(:focus-visible) {
    color: var(--phoenix-btn-active-color);
    background-color: var(--phoenix-btn-active-bg);
    border-color: var(--phoenix-btn-active-border-color);
    box-shadow: none;
}

/* button-primary: the black pill; hover lightens, no shadow/scale tricks */
.btn-primary {
    --phoenix-btn-color: #FFFFFF;
    --phoenix-btn-bg: #1C1B18;
    --phoenix-btn-border-color: transparent;
    --phoenix-btn-hover-color: #FFFFFF;
    --phoenix-btn-hover-bg: #33312C;
    --phoenix-btn-hover-border-color: transparent;
    --phoenix-btn-focus-shadow-rgb: 28, 27, 24;
    --phoenix-btn-active-color: #FFFFFF;
    --phoenix-btn-active-bg: #33312C;
    --phoenix-btn-active-border-color: transparent;
    --phoenix-btn-disabled-color: #FFFFFF;
    --phoenix-btn-disabled-bg: #A39E92;
    --phoenix-btn-disabled-border-color: transparent;
}

/* button-secondary: white pill, hairline border, border warms to peach on hover.
   outline-success/-info included deliberately: the Builder's segment-header icon buttons
   (duplicate = outline-success, debug SQL = outline-info) are utility controls, and the
   brand spends color on meaning only — as buttons they all read as the quiet white pill.
   btn-info (solid) + outline-warning too: solid info compiled Phoenix-blue (Data Preview's
   Staging toggle) and outline-warning amber (Set All to Manager) — both were decoration. */
.btn-secondary,
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-info {
    --phoenix-btn-color: #1C1B18;
    --phoenix-btn-bg: #FFFFFF;
    --phoenix-btn-border-color: #E5E2DB;
    --phoenix-btn-hover-color: #1C1B18;
    --phoenix-btn-hover-bg: #FFFFFF;
    --phoenix-btn-hover-border-color: #EF8C52;
    --phoenix-btn-focus-shadow-rgb: 239, 140, 82;
    --phoenix-btn-active-color: #1C1B18;
    --phoenix-btn-active-bg: #F2F0EB;
    --phoenix-btn-active-border-color: #EF8C52;
    --phoenix-btn-disabled-color: #A39E92;
    --phoenix-btn-disabled-bg: #FFFFFF;
    --phoenix-btn-disabled-border-color: #E5E2DB;
}

.btn-success {
    --phoenix-btn-color: #FFFFFF;
    --phoenix-btn-bg: #4A9B6E;
    --phoenix-btn-border-color: transparent;
    --phoenix-btn-hover-color: #FFFFFF;
    --phoenix-btn-hover-bg: #3E845D;
    --phoenix-btn-hover-border-color: transparent;
    --phoenix-btn-active-color: #FFFFFF;
    --phoenix-btn-active-bg: #3E845D;
    --phoenix-btn-active-border-color: transparent;
    --phoenix-btn-disabled-color: #FFFFFF;
    --phoenix-btn-disabled-bg: #A8CDB8;
    --phoenix-btn-disabled-border-color: transparent;
}

.btn-danger {
    --phoenix-btn-color: #FFFFFF;
    --phoenix-btn-bg: #D26B4C;
    --phoenix-btn-border-color: transparent;
    --phoenix-btn-hover-color: #FFFFFF;
    --phoenix-btn-hover-bg: #B85A3E;
    --phoenix-btn-hover-border-color: transparent;
    --phoenix-btn-active-color: #FFFFFF;
    --phoenix-btn-active-bg: #B85A3E;
    --phoenix-btn-active-border-color: transparent;
    --phoenix-btn-disabled-color: #FFFFFF;
    --phoenix-btn-disabled-bg: #E3AE9D;
    --phoenix-btn-disabled-border-color: transparent;
}

.btn-outline-danger {
    --phoenix-btn-color: #93432B;
    --phoenix-btn-border-color: #E3AE9D;
    --phoenix-btn-hover-color: #FFFFFF;
    --phoenix-btn-hover-bg: #D26B4C;
    --phoenix-btn-hover-border-color: #D26B4C;
    --phoenix-btn-focus-shadow-rgb: 210, 107, 76;
    --phoenix-btn-active-color: #FFFFFF;
    --phoenix-btn-active-bg: #D26B4C;
    --phoenix-btn-active-border-color: #D26B4C;
    --phoenix-btn-disabled-color: #E3AE9D;
    --phoenix-btn-disabled-bg: transparent;
    --phoenix-btn-disabled-border-color: #E3AE9D;
}

.btn-warning {
    --phoenix-btn-color: #1C1B18;
    --phoenix-btn-bg: #E0A83E;
    --phoenix-btn-border-color: transparent;
    --phoenix-btn-hover-color: #1C1B18;
    --phoenix-btn-hover-bg: #C99534;
    --phoenix-btn-hover-border-color: transparent;
    --phoenix-btn-active-color: #1C1B18;
    --phoenix-btn-active-bg: #C99534;
    --phoenix-btn-active-border-color: transparent;
    --phoenix-btn-disabled-color: #6B665C;
    --phoenix-btn-disabled-bg: #EDD29E;
    --phoenix-btn-disabled-border-color: transparent;
}

/* Phoenix's own soft/subtle button flavors, re-warmed */
.btn-subtle-primary,
.btn-phoenix-primary {
    --phoenix-btn-color: #1C1B18;
    --phoenix-btn-bg: #ECE9E2;
    --phoenix-btn-border-color: #E5E2DB;
    --phoenix-btn-hover-color: #1C1B18;
    --phoenix-btn-hover-bg: #E5E2DB;
    --phoenix-btn-hover-border-color: #E5E2DB;
    --phoenix-btn-active-color: #1C1B18;
    --phoenix-btn-active-bg: #E5E2DB;
    --phoenix-btn-active-border-color: #E5E2DB;
}

/* No glow rings anywhere */
.btn:focus-visible,
.btn:focus {
    box-shadow: none;
}

/* ---------------------------------------------------------------------------
   4. CARDS, MODALS, DROPDOWNS — tone shift + hairline, no resting shadows
   --------------------------------------------------------------------------- */
.card {
    --phoenix-card-bg: #FFFFFF;
    --phoenix-card-border-color: #E5E2DB;
    --phoenix-card-border-width: 1px;
    --phoenix-card-border-radius: 12px;
    --phoenix-card-inner-border-radius: 11px;
    box-shadow: none;
}

/* Modals are mini-pages: cream surface, so the white raised elements inside
   them (cards, inputs, pills, tables) actually lift — an all-white modal has
   nothing for surface-raised to lift off of. */
.modal-content {
    background-color: #F2F0EB;
    border: 1px solid #E5E2DB;
    border-radius: 12px;
}

/* Choice cards — an either/or picker (e.g. the Import Data modal's method
   step): the whole card is the button, so there are no competing CTAs and
   color never has to fake a hierarchy. card-feature surface (white, hairline,
   rounded-lg) with the button-secondary hover move (border warms to accent);
   accent is spent on the icon only (decoration — accent fails AA as text). */
.choice-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    background-color: #FFFFFF;
    border: 1px solid #E5E2DB;
    border-radius: 20px;
    padding: 32px 24px;
    color: #1C1B18;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.choice-card:hover,
.choice-card:focus-visible {
    border-color: #EF8C52;
    outline: none;
}

/* Hovering anywhere on the card lights up its pill too — one clickable unit */
.choice-card:hover .choice-card-cta,
.choice-card:focus-visible .choice-card-cta {
    border-color: #EF8C52;
}

/* Font Awesome (SVG+JS mode) swaps the <i> for an <svg>, so match both */
.choice-card > i,
.choice-card > .svg-inline--fa {
    color: #EF8C52;
    margin-bottom: 0.25rem;
}

.choice-card-title {
    font-weight: 600;
    font-size: 1.125rem;
}

.choice-card-text {
    color: #6B665C;
}

/* Wizard stepper — the design.md process-step pattern (accent-ink numeral in
   a white circle, hairline rail between steps) adapted to a horizontal
   modal wizard. The current step's circle takes the float shadow — floating
   is the system's "draw the eye here" move. Future (disabled) steps go
   muted; visited steps keep the accent-ink numeral. */
.ptd-stepper {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0;
    margin-bottom: 1rem;
    list-style: none;
}

.ptd-stepper .nav-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0;
    background: none;
    border: 0;
}

.ptd-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: #FFFFFF;
    border: 1px solid #E5E2DB;
    color: #A85219;
    font-weight: 600;
    flex-shrink: 0;
}

.ptd-step-label {
    color: #6B665C;
    font-weight: 600;
}

.ptd-stepper .nav-link.active .ptd-step-num {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border-color: transparent;
}

.ptd-stepper .nav-link.active .ptd-step-label {
    color: #1C1B18;
}

.ptd-stepper .nav-link:disabled .ptd-step-num {
    color: #A39E92;
}

.ptd-stepper .nav-link:disabled .ptd-step-label {
    color: #A39E92;
    font-weight: 400;
}

.ptd-step-rail {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background-color: #E5E2DB;
    min-width: 1.5rem;
}

/* card-dark — design.md's inverted feature card, used as a component-level
   charcoal moment (e.g. the Builder's next-step callout). The kicker runs
   accent-on-dark (peach reaches ~7:1 there); body copy is on-dark cream.
   The CTA on charcoal is the white secondary pill — a black pill would vanish. */
.card-dark {
    background-color: #1C1B18;
    color: #F2F0EB;
    border-radius: 20px;
    padding: 1.25rem 1.5rem;
}

.card-dark-kicker {
    color: #EF8C52;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* Decorative icons on the dark card share the kicker's accent peach.
   Font Awesome (SVG+JS mode) swaps <i> for an <svg>, so match both. */
.card-dark .card-dark-icon,
.card-dark svg.card-dark-icon {
    color: #EF8C52;
}

/* Dropdowns genuinely float — the one soft shadow the system allows */
.dropdown-menu {
    --phoenix-dropdown-bg: #FFFFFF;
    --phoenix-dropdown-border-color: #E5E2DB;
    --phoenix-dropdown-border-radius: 12px;
    --phoenix-dropdown-link-hover-bg: #F2F0EB;
    --phoenix-dropdown-link-active-color: #1C1B18;
    --phoenix-dropdown-link-active-bg: #EBE8E1;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* ---------------------------------------------------------------------------
   5. FORMS — 8px corners, peach focus border, no glow
   --------------------------------------------------------------------------- */
.form-control,
.form-select {
    background-color: #FFFFFF;
    border-color: #E5E2DB;
    border-radius: 8px;
    color: #1C1B18;
}

.form-control:focus,
.form-select:focus {
    background-color: #FFFFFF;
    border-color: #EF8C52;
    box-shadow: none;
}

/* Unchecked controls: the default hairline (#E5E2DB) all but vanishes on the cream
   panels — one step darker keeps radios/checkboxes visible without adding weight */
.form-check-input {
    border-color: #C9C4B8;
}

.form-check-input:checked {
    background-color: #1C1B18;
    border-color: #1C1B18;
}

/* Phoenix compiles the indeterminate state (partial "Select All") its own blue —
   same charcoal treatment as :checked; the white dash glyph reads fine on it.
   Selector mirrors theme.css's `.form-check-input[type=checkbox]:indeterminate`
   exactly: anything less specific loses to it (the brand-guard E2E caught this). */
.form-check-input[type=checkbox]:indeterminate {
    background-color: #1C1B18;
    border-color: #1C1B18;
}

.form-check-input[type=checkbox]:indeterminate:focus {
    border-color: #EF8C52;
    box-shadow: none;
}

.form-check-input:focus {
    border-color: #EF8C52;
    box-shadow: none;
}

/* Dropzones are inputs: white like input-text, so they read as a field on
   the cream modal surface (Phoenix leaves them transparent) */
.dropzone {
    background-color: #FFFFFF;
}

/* ---------------------------------------------------------------------------
   6. TABLES + PAGINATION
   --------------------------------------------------------------------------- */
.table {
    --phoenix-table-border-color: #E5E2DB;
    --phoenix-table-striped-bg: rgba(28, 27, 24, 0.02);
    --phoenix-table-hover-bg: #EBE8E1;
}

/* On the cream modal surface a table is a raised white sheet — matches the
   DataTables fixed-column background (white) instead of clashing with it.
   Both var prefixes, same trap as .pagination below: dataTables.bootstrap5.css
   re-paints cells via `table.table.dataTable > :not(caption) > * > *
   { background-color: var(--bs-table-bg) }` — higher specificity than the
   theme's cell rule — so any modal table DataTables enhances (Data Preview,
   assign-users, exclusion pickers) read the --bs-* name and fell back to
   stock bootstrap's transparent, showing the cream through. */
.modal-content .table {
    --phoenix-table-bg: #FFFFFF;
    --bs-table-bg: #FFFFFF;
}

.pagination {
    --phoenix-pagination-color: #A85219;
    --phoenix-pagination-bg: #FFFFFF;
    --phoenix-pagination-border-color: #E5E2DB;
    --phoenix-pagination-hover-color: #1C1B18;
    --phoenix-pagination-hover-bg: #F2F0EB;
    --phoenix-pagination-hover-border-color: #E5E2DB;
    --phoenix-pagination-focus-color: #1C1B18;
    --phoenix-pagination-focus-bg: #F2F0EB;
    --phoenix-pagination-focus-box-shadow: none;
    --phoenix-pagination-active-color: #FFFFFF;
    --phoenix-pagination-active-bg: #1C1B18;
    --phoenix-pagination-active-border-color: #1C1B18;
    --phoenix-pagination-disabled-color: #A39E92;
    /* Mirrored onto stock-Bootstrap names: lib/bootstrap.min.css (loaded alongside
       Phoenix) has a HIGHER-specificity `.page-item.active .page-link` rule that
       reads --bs-* vars — it wins on DataTables pagers no matter the file order,
       so the values must exist under both prefixes. */
    --bs-pagination-color: #A85219;
    --bs-pagination-bg: #FFFFFF;
    --bs-pagination-border-color: #E5E2DB;
    --bs-pagination-hover-color: #1C1B18;
    --bs-pagination-hover-bg: #F2F0EB;
    --bs-pagination-hover-border-color: #E5E2DB;
    --bs-pagination-focus-color: #1C1B18;
    --bs-pagination-focus-bg: #F2F0EB;
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-active-color: #FFFFFF;
    --bs-pagination-active-bg: #1C1B18;
    --bs-pagination-active-border-color: #1C1B18;
    --bs-pagination-disabled-color: #A39E92;
}

/* lib/bootstrap 5.1.0 predates pagination CSS vars — it compiles the active page as
   LITERAL #0d6efd under `.page-item.active .page-link` (0,3,0 specificity), which
   out-specifies Phoenix's `.active > .page-link`. Match its selector exactly; this
   file loads later, so it wins. (BrandGuardTests pins this on the assign-users pager.) */
.page-item.active .page-link {
    color: #FFFFFF;
    background-color: #1C1B18;
    border-color: #1C1B18;
}

/* Pagers speak the pill language too (design.md rounded: full). Every button —
   both Bootstraps only round the first/last child, so those selectors are
   repeated at higher specificity to take the pill as well. */
.pagination .page-link,
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    border-radius: 50rem;
}

/* ---------------------------------------------------------------------------
   6b. STATUS BADGES — design.md chip/tag language. Semantic states (COMPLETE,
   SYNCED, BLOCKED, job statuses…) render as SOLID warm pills, matching the
   "semantic badges for data-state usage" row in the brand reference; neutral
   labels (badge-phoenix-secondary) render as the white outlined chip-tag.
   Phoenix's default badge-phoenix style is a pale bordered rectangle — off-brand.
   --------------------------------------------------------------------------- */
.badge-phoenix {
    border-radius: 50rem;
}

.badge-phoenix-primary {
    --phoenix-badge-bg: var(--phoenix-primary);
    --phoenix-badge-color: #FFFFFF;
    --phoenix-badge-border-color: var(--phoenix-primary);
}

.badge-phoenix-success {
    --phoenix-badge-bg: var(--phoenix-success);
    --phoenix-badge-color: #FFFFFF;
    --phoenix-badge-border-color: var(--phoenix-success);
}

.badge-phoenix-warning {
    --phoenix-badge-bg: var(--phoenix-warning);
    /* white, matching the reference "needs review" badge (user call 2026-07-08) */
    --phoenix-badge-color: #FFFFFF;
    --phoenix-badge-border-color: var(--phoenix-warning);
}

.badge-phoenix-danger {
    --phoenix-badge-bg: var(--phoenix-danger);
    --phoenix-badge-color: #FFFFFF;
    --phoenix-badge-border-color: var(--phoenix-danger);
}

.badge-phoenix-info {
    --phoenix-badge-bg: var(--phoenix-info);
    --phoenix-badge-color: #FFFFFF;
    --phoenix-badge-border-color: var(--phoenix-info);
}

/* Neutral label = the white chip-tag: surface-raised, muted text, hairline border */
.badge-phoenix-secondary {
    --phoenix-badge-bg: #FFFFFF;
    --phoenix-badge-color: #6B665C;
    --phoenix-badge-border-color: #E5E2DB;
}

/* The design.md chip-tag as a standalone class, for plain .badge elements that need
   the neutral white chip (e.g. the demographic accordion's "None Selected" pill) */
.badge.chip-tag {
    background-color: #FFFFFF;
    border: 1px solid #E5E2DB;
    color: #6B665C;
    border-radius: 50rem;   /* design.md chip-tag: rounded full */
}

/* ---------------------------------------------------------------------------
   7. ACCORDIONS — burnt-peach +/− glyphs instead of Phoenix blue
   --------------------------------------------------------------------------- */
.accordion {
    --phoenix-accordion-btn-color: #1C1B18;
    --phoenix-accordion-active-color: #1C1B18;
    --phoenix-accordion-btn-icon: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='-200 -200 900 900'%3E%3Cpath fill='%23A85219' d='M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'%3E%3C/path%3E%3C/svg%3E");
    --phoenix-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='-200 -200 900 900'%3E%3Cpath fill='%23A85219' d='M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'%3E%3C/path%3E%3C/svg%3E");
    --phoenix-accordion-btn-focus-box-shadow: none;
}

/* ---------------------------------------------------------------------------
   8. APP-SPECIFIC PATCHES
   (The former noUiSlider / accordion-focus / ZIP-chip / soft-alert patches
   moved to their source files as var(--phoenix-*) tokens — jobBuilder.css,
   jobdetails.css, wizard.css, configureList.css, alertStyling.css, site.css
   are token-driven now, so this layer only carries what Phoenix compiles in.)
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   9. HOME HERO — the design.md charcoal band with its signature moves:
   accent kicker (✦ + tracked uppercase), the two-tone display headline
   (first line on-dark-muted, second on-dark), fluid display size, and a
   body-large muted subhead. Serves both the landing page and the
   authenticated dashboard home.
   --------------------------------------------------------------------------- */
.hero-section {
    background-color: #1C1B18;
    border-radius: 20px;
    padding: 96px 32px;
    margin: 24px 0 96px;
}

.hero-kicker {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #EF8C52;              /* accent reaches AA on the dark band */
    margin-bottom: 24px;
}

.hero-section h1 {
    color: #F2F0EB;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.1;
    /* display scale, fluid below small viewports per design.md */
    font-size: clamp(40px, 31px + 2.4vw, 56px);
    margin-bottom: 24px;
}

.hero-section .hero-muted {
    color: #A39E92;              /* on-dark-muted — the two-tone device */
}

.hero-sub {
    color: #A39E92;
    font-size: 18px;             /* body-large */
    line-height: 1.55;
    margin: 0;
}