/* ==========================================================================
   IFAP DESIGN SYSTEM
   --------------------------------------------------------------------------
   One stylesheet for the whole site. Every page links this file instead of
   carrying its own copy of the component rules, which is how the four page
   variants (root, pro/, cloud/, priority/) previously drifted apart.

   The visual language is institutional: a near-white ground, hairline rules
   carrying the structure, one restrained blue used sparingly, dark slate-blue
   text instead of black, and soft blue tints for selected and informational
   states. Structure comes from borders and whitespace, not from elevation.

   RULE: components below read tokens only. No component rule may contain a
   literal hex value, a raw pixel radius, or a hand-picked shadow. If a new
   value is needed, it becomes a token first.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   --------------------------------------------------------------------------
   Palette and typeface are matched to the reference interface: the values
   below were sampled from it directly rather than estimated by eye, and the
   face is Metropolis (Chris Simpson, SIL OFL), served from jsDelivr via
   @fontsource. Nothing here reproduces the reference's branding or layout -
   only its design language.
   ========================================================================== */

:root {
    /* ---------- Primary blue -------------------------------------------
       One hue, four steps. Used for: the active nav item, primary buttons,
       focus rings, selected states, and links. Deliberately not used for
       decoration, headings, or large fills. */
    --color-primary:         #005FBA;
    --color-primary-hover:   #004E99;
    --color-primary-active:  #003D78;
    --color-primary-subtle:  #E1EFFC;  /* selected row / active nav fill   */
    --color-primary-muted:   #BFDCF5;  /* border on a selected element     */
    --color-on-primary:      #FFFFFF;

    /* ---------- Backgrounds --------------------------------------------- */
    --color-bg:              #F9FBFC;  /* page ground: cool near-white     */
    --color-surface:         #FFFFFF;  /* cards, panels, table bodies      */
    --color-surface-sunken:  #F1F4F7;  /* hover rows, inset wells          */
    --color-surface-header:  #FFFFFF;  /* table header, top nav            */
    --color-info-bg:         #E1EFFC;  /* empty states, informational bars */

    /* ---------- Top bar --------------------------------------------------
       A deep blue masthead, the way a public institution's site carries its
       identity in one solid band. It is the darkest step of the same hue as
       the primary, so the palette stays a single blue. */
    --color-nav-bg:          #003D78;
    --color-nav-text:        rgba(255, 255, 255, 0.78);
    --color-nav-text-strong: #FFFFFF;
    --color-nav-border:      rgba(255, 255, 255, 0.16);
    --color-nav-hover:       rgba(255, 255, 255, 0.10);
    --color-nav-active:      #005FBA;
    --color-overlay:         rgba(34, 48, 60, 0.32);

    /* ---------- Text ----------------------------------------------------
       Never pure black. The darkest step is a dark blue-gray, which is what
       gives the interface its calm, printed-document quality. */
    --color-text:            #384C5C;
    --color-text-strong:     #22303C;  /* page titles, table headers       */
    --color-text-secondary:  #4F6172;  /* body copy                        */
    --color-text-muted:      #647481;  /* captions, placeholders, meta     */
    --color-text-inverse:    #FFFFFF;
    --color-text-link:       var(--color-primary);

    /* ---------- Borders -------------------------------------------------
       Thin and quiet. `--color-border` is the default hairline; `-strong` is
       reserved for genuine separations (table header underline, section
       dividers, input outlines). */
    --color-border:          #EDEFF1;
    --color-border-strong:   #D2D6D9;
    --color-border-input:    #D2D6D9;
    --color-border-focus:    var(--color-primary);

    /* ---------- Status --------------------------------------------------
       Money is the only thing that is ever green. */
    --color-success:         #1B7A46;
    --color-success-subtle:  #E5F3F1;
    --color-warning:         #9A6212;
    --color-warning-subtle:  #FCF5CA;
    --color-danger:          #B3261E;
    --color-danger-subtle:   #FDEDFD;
    --color-neutral-subtle:  #EEF1F7;

    /* ---------- Radius --------------------------------------------------
       Subtle on purpose. Nothing rounder than 8px except true pills. */
    --radius-xs:   3px;
    --radius-sm:   4px;
    --radius-md:   6px;   /* default: inputs, buttons, panels             */
    --radius-lg:   8px;   /* cards                                        */
    --radius-pill: 999px; /* segmented-control thumb, legend badges       */

    /* ---------- Shadows --------------------------------------------------
       Near-invisible. Elevation is not a structural device in this system;
       borders are. `--shadow-md` exists only for true overlays. */
    --shadow-none: none;
    --shadow-xs:   0 1px 1px rgba(34, 48, 60, 0.04);
    --shadow-sm:   0 1px 2px rgba(34, 48, 60, 0.06);
    --shadow-md:   0 4px 12px rgba(34, 48, 60, 0.10);
    --shadow-bar:  0 -1px 0 0 var(--color-border-strong);

    /* ---------- Spacing --------------------------------------------------
       4px base scale. Component padding references these, never raw px. */
    --space-0:   0;
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-7:   32px;
    --space-8:   40px;
    --space-9:   48px;
    --space-10:  64px;

    /* ---------- Typography ------------------------------------------------
       One family. Hierarchy comes from weight, color and spacing rather than
       from size, which is why the largest step is only 32px. */
    --font-sans:  'Metropolis', 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --text-2xs:   11px;
    --text-xs:    12px;
    --text-sm:    13px;
    --text-base:  14px;
    --text-md:    15px;
    --text-lg:    17px;
    --text-xl:    20px;
    --text-2xl:   24px;
    --text-3xl:   32px;

    --leading-tight:   1.25;
    --leading-snug:    1.4;
    --leading-normal:  1.55;
    --leading-relaxed: 1.65;

    --weight-normal:  400;
    --weight-medium:  500;
    --weight-semi:    600;
    --weight-bold:    700;

    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.06em;  /* uppercase table headers / eyebrows      */

    /* ---------- Layout ---------------------------------------------------- */
    --measure-doc:    1440px;
    --measure-text:   78ch;
    --nav-height:     56px;
    --control-height: 40px;
    --control-height-lg: 44px;

    /* ---------- Motion -----------------------------------------------------
       Short, linear-ish, color-only. Nothing moves, scales, or bounces. */
    --transition-fast: 120ms ease;
    --transition-base: 160ms ease;
}


/* ---------- daisyUI theme bridge ---------------------------------------
   The pages carry data-theme="fpn", a name daisyUI does not ship, so none
   of its ~30 bundled themes can shadow this and this cannot shadow them.
   Every value below points at a token above; no new color is introduced. */
[data-theme="fpn"] {
    color-scheme: light;
    --p:  #005FBA;  /* primary          -> primary blue      */
    --pf: #004E99;  /* primary-focus                          */
    --pc: #FFFFFF;  /* primary-content                        */
    --s:  #4F6172;  /* secondary        -> text-secondary     */
    --sc: #FFFFFF;
    --a:  #005FBA;  /* accent           -> primary blue       */
    --ac: #FFFFFF;
    --n:  #22303C;  /* neutral          -> ink                */
    --nc: #FFFFFF;
    --b1: #FFFFFF;  /* base-100         -> surface            */
    --b2: #F9FBFC;  /* base-200         -> page ground        */
    --b3: #EDEFF1;  /* base-300         -> border             */
    --bc: #384C5C;  /* base-content     -> text               */
    --su: #1B7A46;  /* success          -> money green        */
    --suc: #FFFFFF;
    --in: #005FBA;  /* info             -> primary blue       */
    --inc: #FFFFFF;
    --wa: #9A6212;  /* warning                                */
    --wac: #FFFFFF;
    --er: #B3261E;  /* error                                  */
    --erc: #FFFFFF;
    --rounded-box:   8px;
    --rounded-btn:   6px;
    --rounded-badge: 999px;
    --animation-btn:   0s;   /* this site avoids flashy motion by design */
    --animation-input: 0s;
    --btn-focus-scale: 1;    /* no "pop" on focus                        */
    --tab-radius: 6px;
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

body {
    font-family: var(--font-sans);
    font-weight: var(--weight-normal);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scoped under `body` because the Tailwind Play CDN injects its preflight
   (which resets headings to `font-weight: inherit`) after this stylesheet;
   a bare `h1, h2` selector loses the cascade and headings fall back to the
   body weight. */
body h1, body h2, body h3, body h4, .heading-font, .display {
    font-family: var(--font-sans);
    font-weight: var(--weight-bold);
    color: var(--color-text-strong);
    letter-spacing: var(--tracking-normal);
}

/* Page title. Compact rather than oversized: hierarchy is carried by weight
   and the rule beneath it, not by scale. */
body .page-title {
    font-family: var(--font-sans);
    font-weight: var(--weight-bold);
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-strong);
}

a { color: inherit; }


/* ==========================================================================
   3. TYPOGRAPHY UTILITIES
   ========================================================================== */

/* Tabular figures: every dollar amount, percentage and score uses .num so
   digits occupy identical width and align into columns down a table. */
.num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.ident {
    font-variant-numeric: tabular-nums;
}

/* Uppercase micro-label, for tabular contexts: table headers and metric
   captions, where a short label helps scanning down a column. */
.eyebrow {
    font-size: var(--text-2xs);
    line-height: var(--leading-snug);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Narrative section label: sentence case, because it is read rather than
   scanned. */
.label-soft {
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
    color: var(--color-text-strong);
}

/* Section header: the standard heading for a block of content, with the
   hairline rule that separates it from what came before. */
.section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}
.section-header__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text-strong);
    line-height: var(--leading-tight);
}


/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */

.shell {
    max-width: var(--measure-doc);
    margin: 0 auto var(--space-5);
    padding-left: var(--space-5);
    padding-right: var(--space-5);
}

.panel {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-5);
}

/* A panel that reads as a sub-area rather than a sheet of its own. */
.panel-sunken {
    background-color: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
}

.split { display: grid; gap: var(--space-7); }

@media (min-width: 640px) {
    .shell { padding-left: var(--space-7); padding-right: var(--space-7); }
    .panel { padding: var(--space-8) var(--space-7); }
}
@media (min-width: 1024px) {
    .split { grid-template-columns: 280px minmax(0, 1fr); column-gap: var(--space-9); }
}


/* ==========================================================================
   5. FOCUS
   One visible, consistent focus treatment everywhere.
   ========================================================================== */

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}


/* ==========================================================================
   6. TOP NAVIGATION
   A white bar with a hairline underneath, dark text, and a soft blue fill
   marking the current page. Not a colored banner.
   ========================================================================== */

.site-nav {
    background-color: var(--color-nav-bg);
    border-bottom: 1px solid var(--color-nav-bg);
}
.site-nav__inner {
    max-width: var(--measure-doc);
    margin: 0 auto;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--space-6);
    min-height: var(--nav-height);
}
@media (min-width: 640px) {
    .site-nav__inner { padding-left: var(--space-7); padding-right: var(--space-7); }
}

.site-nav__brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    align-self: center;
    font-weight: var(--weight-bold);
    font-size: var(--text-md);
    color: var(--color-nav-text-strong);
    letter-spacing: var(--tracking-tight);
    text-decoration: none;
}

/* Nav items are separated by a hairline, the way an administrative toolbar
   divides its sections, rather than floating in open space. */
/* No `display` here on purpose: the markup uses Tailwind's `hidden lg:flex`
   to switch between the bar and the mobile menu, and a component-level
   `display: flex` would out-rank it. */
.site-nav__links {
    align-items: stretch;
    flex-shrink: 0;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--color-nav-text);
    text-decoration: none;
    border-left: 1px solid var(--color-nav-border);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.site-nav__links .nav-link:last-child { border-right: 1px solid var(--color-nav-border); }
.nav-link:hover {
    background-color: var(--color-nav-hover);
    color: var(--color-nav-text-strong);
}
/* Current page: the one lighter blue block in the bar, plus the only bold
   weight. No underline or edge marker is needed once it is filled. */
.nav-link.is-active {
    background-color: var(--color-nav-active);
    color: var(--color-nav-text-strong);
    font-weight: var(--weight-semi);
}

.nav-link__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: currentColor;
    opacity: 0.85;
}

/* Right-hand utility cluster (language, account, meta). */
.nav-meta {
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-nav-text);
}
.nav-meta__label {
    font-weight: var(--weight-semi);
    color: var(--color-nav-text-strong);
}

/* Language toggle, styled as a compact two-state control. */
.lang-btn {
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    color: var(--color-nav-text);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}
.lang-btn:hover { color: var(--color-nav-text-strong); background-color: var(--color-nav-hover); }
.lang-btn[aria-pressed="true"] {
    color: var(--color-nav-text-strong);
    background-color: var(--color-nav-active);
    border-color: var(--color-nav-active);
}

/* Secondary toolbar: the strip under the nav holding search, filters and
   view switches. White, hairline-bounded, compact. */
.toolbar {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.toolbar__inner {
    max-width: var(--measure-doc);
    margin: 0 auto;
    padding: var(--space-3) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
@media (min-width: 640px) {
    .toolbar__inner { padding-left: var(--space-7); padding-right: var(--space-7); }
}


/* ==========================================================================
   7. FORM CONTROLS
   A visible hairline box with a plain white interior. On focus the border
   turns blue and a soft blue ring appears - no glow, no scale, no shadow.
   ========================================================================== */

.fld,
.input {
    width: 100%;
    min-height: var(--control-height-lg);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: var(--weight-normal);
    line-height: var(--leading-snug);
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
    appearance: none;
}
.fld::placeholder,
.input::placeholder {
    color: var(--color-text-muted);
    font-weight: var(--weight-normal);
}
.fld:hover,
.input:hover { border-color: var(--color-border-strong); }

.fld:focus, .fld:focus-visible,
.input:focus, .input:focus-visible {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px var(--color-primary-subtle);
}
.fld:disabled,
.input:disabled {
    background-color: var(--color-surface-sunken);
    color: var(--color-text-muted);
    border-color: var(--color-border);
    cursor: not-allowed;
}
.fld[aria-invalid="true"],
.input[aria-invalid="true"] { border-color: var(--color-danger); }

select.fld,
select.input {
    padding-right: var(--space-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23647481' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 16px 16px;
}

/* Search field: the magnifier sits inside the box's own left padding. */
.fld-search {
    padding-left: var(--space-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23647481' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left var(--space-3) center;
    background-size: 16px 16px;
}

/* Unit affix ($, %, per month): a plain character inside the field's own
   padding - no divider, gutter, or background of its own. */
.affix-group { position: relative; display: block; }
.affix {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    font-size: var(--text-base);
    color: var(--color-text-muted);
    pointer-events: none;
    white-space: nowrap;
}
.affix-left  { left: var(--space-3); }
.affix-right { right: var(--space-3); }

input[type="checkbox"],
input[type="radio"] { accent-color: var(--color-primary); }

.field-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--color-text-strong);
    margin-bottom: var(--space-2);
}
.field-help {
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
}


/* ==========================================================================
   8. BUTTONS
   Understated. The primary button is the only saturated element on a
   typical page, and there is at most one of them in view.
   ========================================================================== */

.btn-primary-fin,
.btn-secondary-fin,
.btn-ghost-fin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-height-lg);
    padding: 0 var(--space-5);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-semi);
    line-height: 1;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast);
}

.btn-primary-fin {
    color: var(--color-on-primary);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-primary-fin:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}
.btn-primary-fin:active {
    background-color: var(--color-primary-active);
    border-color: var(--color-primary-active);
}

.btn-secondary-fin {
    color: var(--color-text-strong);
    background-color: var(--color-surface);
    border-color: var(--color-border-input);
    font-weight: var(--weight-medium);
}
.btn-secondary-fin:hover {
    background-color: var(--color-surface-sunken);
    border-color: var(--color-border-strong);
}
.btn-secondary-fin:active { background-color: var(--color-neutral-subtle); }

.btn-ghost-fin {
    color: var(--color-text-secondary);
    background-color: transparent;
    border-color: transparent;
    font-weight: var(--weight-medium);
}
.btn-ghost-fin:hover {
    background-color: var(--color-surface-sunken);
    color: var(--color-text-strong);
}

.btn-primary-fin:disabled,
.btn-secondary-fin:disabled,
.btn-ghost-fin:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Square icon button, for toolbar affordances (filter, calendar, chevrons). */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-height);
    height: var(--control-height);
    padding: 0;
    color: var(--color-text-secondary);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.btn-icon:hover {
    background-color: var(--color-surface-sunken);
    color: var(--color-text-strong);
}
/* Icon button placed on the dark masthead. */
.site-nav .btn-icon { color: var(--color-nav-text-strong); }
.site-nav .btn-icon:hover { background-color: var(--color-nav-hover); color: var(--color-nav-text-strong); }

/* A button sitting on the primary blue, where one exists. */
.btn-on-navy {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-height-lg);
    padding: 0 var(--space-5);
    font-size: var(--text-base);
    font-weight: var(--weight-semi);
    color: var(--color-on-primary);
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.btn-on-navy:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.75);
}


/* ==========================================================================
   9. SEGMENTED CONTROL
   Built on a peer-checked pattern so the underlying radio inputs, names and
   values are completely unchanged. The selected option is a solid blue pill;
   the rest are quiet uppercase text.
   ========================================================================== */

.seg {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1);
    background-color: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
}
.seg-label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}
.seg-label:hover { color: var(--color-text-strong); }
.seg input:checked + .seg-label {
    color: var(--color-on-primary);
    background-color: var(--color-primary);
}
.seg input:focus-visible + .seg-label {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* 1-5 rating variant: the numerals are far narrower than the anchor captions
   printed beneath them, so each option takes an equal share of the full width
   instead. Sentence-cased and un-tracked, since these are numerals. */
.seg-scale {
    display: flex;
    width: 100%;
    min-width: 260px;
    gap: var(--space-1);
}
.seg-scale label { flex: 1 1 0; display: flex; }
.seg-scale .seg-label {
    width: 100%;
    letter-spacing: var(--tracking-normal);
    text-transform: none;
    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   10. TABLES
   Structured and administrative: bold dark headers over a strong hairline,
   thin column dividers, quiet zebra-free rows with a soft blue hover.
   ========================================================================== */

.table-wrap {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
}
.data-table thead th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    vertical-align: bottom;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-text-strong);
    background-color: var(--color-surface-header);
    border-bottom: 1px solid var(--color-border-strong);
    white-space: nowrap;
}
/* Thin vertical rules between columns, as in an administrative register. */
.data-table thead th + th { border-left: 1px solid var(--color-border); }
.data-table tbody td {
    padding: var(--space-3) var(--space-4);
    vertical-align: top;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background-color: var(--color-surface-sunken); }
.data-table tbody tr.is-selected td {
    background-color: var(--color-primary-subtle);
    color: var(--color-text-strong);
}
.data-table .cell-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong);
    font-weight: var(--weight-medium);
}

/* Sort affordance in a header cell. */
.th-sort {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.th-sort__icon { width: 12px; height: 12px; color: var(--color-text-muted); flex-shrink: 0; }


/* ==========================================================================
   11. CARDS, CALLOUTS AND BADGES
   ========================================================================== */

.card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-none);
}
.card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}
.card__title {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--color-text-strong);
}
.card__meta {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.card__body { padding: var(--space-5); }

/* Informational area / empty state: a soft blue field with centered muted
   text. The one place a tinted fill covers real width. */
.callout {
    background-color: var(--color-info-bg);
    border: 1px solid var(--color-primary-muted);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}
.callout-empty {
    background-color: var(--color-info-bg);
    border: 1px solid var(--color-primary-muted);
    border-radius: var(--radius-md);
    padding: var(--space-8) var(--space-5);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--text-md);
}
.callout-note {
    background-color: var(--color-surface-sunken);
    border-left: 3px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

/* Outlined pill badges, as in a legend row. Tinted fill, matching border,
   dark readable text - never a solid saturated block. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-3);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border-strong);
    background-color: var(--color-neutral-subtle);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    line-height: var(--leading-snug);
    white-space: nowrap;
}
.badge-info    { background-color: var(--color-primary-subtle); border-color: var(--color-primary-muted); color: var(--color-primary-active); }
.badge-success { background-color: var(--color-success-subtle); border-color: var(--color-success);       color: var(--color-success); }
.badge-warning { background-color: var(--color-warning-subtle); border-color: var(--color-warning);       color: var(--color-warning); }
.badge-danger  { background-color: var(--color-danger-subtle);  border-color: var(--color-danger);        color: var(--color-danger); }

/* Key figure, for a total or headline number. */
.stat { display: flex; flex-direction: column; gap: var(--space-1); }
.stat__label {
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.stat__value {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-strong);
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-tight);
}
.stat__value--money { color: var(--color-success); }


/* ==========================================================================
   12. LINKS AND DIVIDERS
   ========================================================================== */

.link {
    color: var(--color-text-link);
    text-decoration: none;
    font-weight: var(--weight-medium);
    transition: color var(--transition-fast);
}
.link:hover { color: var(--color-primary-hover); text-decoration: underline; }

.divider { height: 1px; background-color: var(--color-border); border: 0; margin: var(--space-6) 0; }
.divider-strong { height: 1px; background-color: var(--color-border-strong); border: 0; margin: var(--space-6) 0; }


/* ==========================================================================
   13. PRINT
   The packet generator depends on this layer. Tints and fills are dropped so
   the printed sheet is plain black on white.
   ========================================================================== */

@media print {
    .no-print { display: none !important; }
    body { background: #FFFFFF; color: #000000; }
    .panel, .card, .table-wrap {
        border-color: #999999;
        border-radius: 0;
        box-shadow: none;
    }
    .callout, .callout-empty, .callout-note, .badge {
        background: transparent !important;
        border-color: #999999;
    }
}