/*
 * TcWeb — Thurston County Web Applications
 * =========================================
 * COUNTY COLOR PALETTE
 * --------------------
 * These variables are placeholders. To get exact values from the live site:
 *   1. Open www.thurstoncountywa.gov in Chrome
 *   2. Press F12 → Elements → click the color swatch on any nav/header element
 *   3. Copy the hex values from Computed Styles and replace below
 *
 * Current placeholders are visually close to WA government sites but not exact.
 */

:root {
    /* --- Primary brand colors (aligned to the county site — green accents on a blue base) --- */
    --tc-blue-dark:      #003057;   /* county navy — nav background, headings, table header */
    --tc-blue-mid:       #2563a8;   /* links, active states */
    --tc-blue-light:     #d6e4f7;   /* hover backgrounds, table stripes */
    --tc-blue-accent:    #1a6eb5;   /* buttons, focus rings */

    /* County primary green — used as an accent to tie TCOS to the county homepage
       (title/section rules, active tab). White text on this passes AA (~5:1). */
    --tc-green:          #008049;
    --tc-green-dark:     #00693b;   /* darker green for hover/contrast */

    /* --- Neutral / text --- */
    --tc-text-dark:      #1a1a1a;   /* Body text — 18.7:1 contrast on white */
    --tc-text-muted:     #595959;   /* Secondary text — 7.0:1 on white */
    --tc-border:         #d0d7de;

    /* --- Surface colors --- */
    --tc-bg-page:        #f7f7f7;
    --tc-bg-card:        #ffffff;
    --tc-footer-bg:      #f1f3f5;

    /* --- Theme surfaces (consumed by the "SITE THEME" section at end of file) --- */
    --tc-ground:         #eef1f4;   /* page field the white cards sit on */
    --tc-chrome-bg:      #dce4ec;   /* navbar + footer bands (a step darker than the ground) */
    --tc-row-hover:      #d8e7fc;   /* table row hover wash */
    --tc-row-divider:    #eceff3;   /* hairline between table rows */
    --tc-card-shadow:    0 1px 2px rgba(0, 48, 87, .06), 0 10px 28px rgba(0, 48, 87, .10);

    /* --- Feedback / status (all pass 4.5:1 on white) --- */
    --tc-success:        #276a31;
    --tc-warning:        #7a4d00;
    --tc-danger:         #b91c1c;
    --tc-info:           #0e5a8a;

    /* --- Wire county colors into Bootstrap's CSS variable system --- */
    --bs-primary:             var(--tc-blue-accent);
    /* --bs-primary-rgb:         26, 110, 181; */
    --bs-link-color:          var(--tc-blue-mid);
    --bs-link-hover-color:    var(--tc-blue-dark);
    --bs-body-color:          var(--tc-text-dark);
    --bs-body-bg:             var(--tc-bg-page);
    --bs-focus-ring-color:    rgba(26, 110, 181, 0.5);
}

/* ==========================================================================
   BASE
   ========================================================================== */
html {
    font-size: 16px;
    position: relative;
    min-height: 100%;
}

body {
    color: var(--tc-text-dark);
    background-color: var(--tc-bg-page);
    margin-bottom: 60px;
}

/* ==========================================================================
   SKIP NAVIGATION LINK — WCAG 2.4.1 (Bypass Blocks)
   First focusable element; hidden until keyboard-focused.
   ========================================================================== */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.75rem 1.25rem;
    background: var(--tc-blue-dark);
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    z-index: 9999;
    border-radius: 0 0 4px 0;
    text-decoration: none;
}

.skip-link:focus {
    position: absolute !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    width: auto !important;
    height: auto !important;
}

/* ==========================================================================
   FOCUS STYLES — WCAG 2.4.7 (Focus Visible)
   3px solid outline + offset — visible on any background color.
   ========================================================================== */
:focus-visible {
    outline: 3px solid var(--tc-blue-accent) !important;
    outline-offset: 3px !important;
    border-radius: 2px;
    box-shadow: none !important;
}

:focus:not(:focus-visible) {
    outline: none;
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.tc-navbar {
    background-color: var(--tc-blue-dark) !important;
}

.tc-navbar .navbar-brand,
.tc-navbar .nav-link {
    color: #ffffff !important;
}

.tc-navbar .nav-link:hover,
.tc-navbar .nav-link:focus {
    color: var(--tc-blue-light) !important;
    text-decoration: underline;
}

.tc-navbar .nav-link[aria-current="page"] {
    font-weight: 600;
    text-decoration: underline;
}

.tc-brand-name {
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.tc-footer {
    background-color: var(--tc-footer-bg);
}

/* ==========================================================================
   LINKS — WCAG 1.4.1 (Use of Color)
   Links distinguished by underline, not color alone.
   ========================================================================== */
a {
    color: var(--tc-blue-mid);
    text-decoration: underline;
}

a:hover,
a:focus {
    color: var(--tc-blue-dark);
}

.nav-link {
    text-decoration: none;
}

.nav-link:hover,
.nav-link:focus {
    text-decoration: underline;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn-primary {
    background-color: var(--tc-blue-accent);
    border-color: var(--tc-blue-dark);
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--tc-blue-dark);
    border-color: var(--tc-blue-dark);
    color: #ffffff;
}

/* Outline button variants — WCAG 1.4.3 (Contrast Minimum). Bootstrap's default
   outline-button text colors (--bs-secondary/-danger/-primary/-warning) sit just
   under 4.5:1 on white at these sizes (btn-outline-warning is far worse, ~1.4:1
   since it's meant to pair with a dark background, not stand alone as text).
   Reuse the already-vetted status colors from :root (each documented to pass
   4.5:1 on white) for the idle/outline state; hover/active still solid-fill
   with white text, which these same colors have ample contrast for. */
.btn-outline-secondary {
    color: var(--tc-text-muted);
    border-color: var(--tc-text-muted);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--tc-text-muted);
    border-color: var(--tc-text-muted);
    color: #ffffff;
}

.btn-outline-danger {
    color: var(--tc-danger);
    border-color: var(--tc-danger);
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: var(--tc-danger);
    border-color: var(--tc-danger);
    color: #ffffff;
}

.btn-outline-primary {
    color: var(--tc-blue-accent);
    border-color: var(--tc-blue-accent);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--tc-blue-accent);
    border-color: var(--tc-blue-accent);
    color: #ffffff;
}

.btn-outline-warning {
    color: var(--tc-warning);
    border-color: var(--tc-warning);
}
.btn-outline-warning:hover,
.btn-outline-warning:focus {
    background-color: var(--tc-warning);
    border-color: var(--tc-warning);
    color: #ffffff;
}

/* ==========================================================================
   FORMS — WCAG 1.3.1, 3.3.1, 3.3.2
   ========================================================================== */
.form-label {
    font-weight: 500;
    color: var(--tc-text-dark);
}

/* Asterisk for required fields — supplemental visual only;
   use aria-required="true" on the input for screen readers */
.form-label.required::after {
    content: " *";
    color: var(--tc-danger);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--tc-blue-accent);
    box-shadow: 0 0 0 3px rgba(26, 110, 181, 0.35);
}

.invalid-feedback {
    color: var(--tc-danger);
    font-weight: 500;
}

/* ==========================================================================
   TABLES — WCAG 1.3.1 (Info and Relationships)
   All data tables must use <th scope="col"> or <th scope="row">
   ========================================================================== */
.table thead th {
    background-color: var(--tc-blue-dark);
    color: #ffffff;
    font-weight: 600;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--tc-blue-light);
    color: var(--tc-text-dark);
}

/* ==========================================================================
   PAGE HEADINGS
   ========================================================================== */
.page-title {
    color: var(--tc-blue-dark);
    border-bottom: 3px solid var(--tc-green);   /* county green accent rule */
    padding-bottom: 0.4rem;
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   SOFT TYPE PILLS
   Lower-temperature alternative to Bootstrap's solid text-bg-* badges: a light
   tint + darker readable text + hairline border. Same hue language, calmer.
   Used on the HazWaste guide list + article detail to mark article type.
   Pair with Bootstrap's .badge for base sizing: class="badge type-pill type-pill--waste".
   ========================================================================== */
.type-pill { font-weight: 600; border: 1px solid transparent; }
.type-pill--activity { background-color: rgba(26, 110, 181, .12); color: var(--tc-blue-dark); border-color: rgba(26, 110, 181, .28); }
.type-pill--waste    { background-color: rgba(176, 120, 0, .14); color: var(--tc-warning);    border-color: rgba(176, 120, 0, .32); }
.type-pill--response { background-color: rgba(0, 128, 73, .14);  color: var(--tc-green-dark); border-color: rgba(0, 128, 73, .30); }
.type-pill--general  { background-color: rgba(89, 89, 89, .12);  color: #495057;              border-color: rgba(89, 89, 89, .25); }

/* ==========================================================================
   EMBEDDED (IFRAME) MODE
   The return bar + footer show by default (standalone). A synchronous script in
   <head> adds `embedded` to <html> when the page is framed (self !== top) or the
   county passes ?iframe=1 — then we hide our chrome, since the county site wraps it.
   Default-show + head-time hide = no flash when embedded, and a graceful fallback
   (chrome still shows) if scripting is unavailable on a direct visit.
   ========================================================================== */
html.embedded .site-header,
html.embedded .tc-footer {
    display: none;
}

html.embedded main > .container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Breakout button — an escape hatch for embedded pages, shown only in embedded mode.
   `position: fixed` is relative to the IFRAME's own viewport (not the parent county
   page), so it stays pinned to the frame's corner however the surrounding page scrolls.
   Hidden by default (same default-show/head-time-hide reasoning as the chrome above):
   if scripting is off, `embedded` never gets added and the button never appears — an
   iframe with no chrome and no way out would be worse than one with a static return bar. */
.tc-breakout-btn {
    display: none;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1050;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--tc-border);
    color: var(--tc-blue-dark);
    box-shadow: var(--tc-card-shadow);
    text-decoration: none;
    font-size: 15px;
    opacity: 0.6;
    transition: opacity .15s ease, background-color .15s ease;
}
.tc-breakout-btn:hover,
.tc-breakout-btn:focus-visible {
    opacity: 1;
    background: var(--tc-bg-card);
    color: var(--tc-blue-dark);
}
html.embedded .tc-breakout-btn {
    display: flex;
}

/* ==========================================================================
   UAT FEEDBACK BANNER — temporary, config-gated (Uat:BannerEnabled)
   ========================================================================== */
.tc-uat-banner {
    background-color: var(--tc-warning);
    color: #fff;
    font-size: 0.9rem;
}
.tc-uat-banner .container {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.tc-uat-banner a {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
}
.tc-uat-banner a:hover,
.tc-uat-banner a:focus {
    color: #fff;
}
.tc-uat-banner .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
    margin-left: auto;
}
html.embedded .tc-uat-banner,
.tc-uat-banner.tc-uat-dismissed {
    display: none;
}

/* ==========================================================================
   HOME PAGE — DEPARTMENT SECTIONS
   ========================================================================== */
.dept-heading {
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tc-blue-dark);
    border-bottom: 2px solid var(--tc-green);   /* county green accent rule */
    padding-bottom: 0.5rem;
    margin-top: 3.5rem;
    margin-bottom: 1.75rem;
}

/* Bootstrap 5.3 defaults a card's background to --bs-body-bg; since the page body is
   tinted gray, keep cards explicitly white so they stand out. Applies to all cards. */
.card {
    --bs-card-bg: var(--tc-bg-card);
    background-color: var(--tc-bg-card);
}

.service-card {
    border: 1px solid #e5e9ee;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 32, 43, 0.05), 0 6px 16px rgba(16, 32, 43, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.service-card .card-body {
    padding: 1.6rem;
}

.service-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: 0 14px 30px rgba(16, 32, 43, 0.13);
}

/* Icon sits in a soft brand-tinted circle */
.service-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--tc-blue-light);
    color: var(--tc-blue-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .service-card { transition: none; }
    .service-card:hover { transform: none; }
}

/* ==========================================================================
   ADMIN FORM GRID
   4 equal columns; fields use grid-column: span N to control width.
   All columns are the same unit so the right edge always aligns.
   ========================================================================== */
/* 1 column base (mobile-first) */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem 1.5rem;
    max-width: 960px;
}

/* Span helper classes — full width until the grid has enough columns */
.form-grid .span-2,
.form-grid .span-3,
.form-grid .span-full {
    grid-column: 1 / -1;
}

/* 2 columns — small screens */
@media (min-width: 576px) {
    .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 3 columns — medium screens */
@media (min-width: 768px) {
    .form-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .form-grid .span-2 { grid-column: span 2; }
    .form-grid .span-3 { grid-column: 1 / -1; } /* 3 of 3 = full */
}

/* 4 columns — large screens */
@media (min-width: 992px) {
    .form-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .form-grid .span-2 { grid-column: span 2; }
    .form-grid .span-3 { grid-column: span 3; }
    .form-grid .span-full { grid-column: 1 / -1; }
}

/* ==========================================================================
   KPI FILTER PILLS (clickable summary stats that filter a table)
   ========================================================================== */
.kpi-filter,
.kpi-reset {
    cursor: pointer;
    transition: box-shadow .12s ease, filter .12s ease;
}

.kpi-filter:hover,
.kpi-reset:hover {
    filter: brightness(0.96);
}

.kpi-filter.active,
.kpi-reset.active {
    box-shadow: 0 0 0 0.18rem rgba(0, 0, 0, 0.18);
    font-weight: 600 !important;
}

@media (prefers-reduced-motion: reduce) {
    .kpi-filter,
    .kpi-reset { transition: none; }
}

/* ==========================================================================
   FORM FLOATING (template default — preserved)
   ========================================================================== */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ==========================================================================
   SITE THEME
   ==========================================================================
   The shared visual theme for every TCOS page. The layout puts the `tc-theme`
   class on <body>, so all rules below are scoped under .tc-theme and apply
   site-wide. A page with special needs can override with higher-specificity CSS
   or a page-scoped <style> via the layout's "Styles" section.

   DESIGN LANGUAGE
     • Type    — Public Sans (the USWDS typeface), self-hosted in /lib/fonts.
     • Ground  — a soft blue-grey field (--tc-ground) that content sits on.
     • Chrome  — navbar + footer are a step darker (--tc-chrome-bg) to frame it.
     • Cards   — tables (.table-responsive) and .card render as white elevated
                 cards: 1px border + --tc-card-shadow + rounded corners, so they
                 lift off the ground.
     • Tables  — flat white header with a green accent rule and tracked uppercase
                 labels; UNBANDED rows split by a hairline (--tc-row-divider);
                 a light-blue row hover (--tc-row-hover).
     • Inputs  — form controls are white like the cards (NOT the grey
                 --bs-body-bg that Bootstrap defaults them to, which blended into
                 the ground on the pre-theme pages).

   TABLE GOTCHAS (read before touching table styles)
     • Bootstrap 5.3 paints striped/hover row backgrounds with an inset
       box-shadow driven by the --bs-table-bg-type / --bs-table-bg-state
       variables — NOT background-color. To change them, set those variables.
     • The base TABLES section above also sets background-color:
       var(--tc-blue-light) on odd rows, so unbanding needs BOTH
       background-color:transparent AND --bs-table-bg-type:transparent.
     • DataTables ships its OWN higher-specificity stripe/hover box-shadow on
       table.dataTable.* — overridden explicitly below. site.css loads after the
       DataTables stylesheet, so equal-specificity overrides win.

   EMBEDDED MODE
     • When the county site iframes a page (html.embedded) the return bar and
       footer are hidden (see the general embedded-mode rules above), but the
       ground color is left as-is so the page keeps its normal look at a glance.
   ========================================================================== */
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/lib/fonts/public-sans-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/lib/fonts/public-sans-700.woff2') format('woff2');
}

/* Public Sans everywhere, on the soft ground the cards sit on. */
.tc-theme {
    font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background-color: var(--tc-ground);
}

/* Chrome bands: navbar + footer a step darker than the ground so they frame the
   content. Navbar gets dark text/links (overriding the white-on-navy defaults). */
.tc-theme .tc-navbar,
.tc-theme .tc-footer {
    background-color: var(--tc-chrome-bg) !important;
}
.tc-theme .tc-navbar {
    border-bottom: 1px solid var(--tc-border);
}
.tc-theme .tc-navbar .navbar-brand,
.tc-theme .tc-navbar .nav-link {
    color: var(--tc-blue-dark) !important;
}
.tc-theme .tc-navbar .nav-link:hover,
.tc-theme .tc-navbar .nav-link:focus {
    color: var(--tc-blue-accent) !important;
}

/* Cap the page column at a comfortable reading width even on very wide monitors —
   Bootstrap's own xxl breakpoint (1320px) still stretches sparse rows (e.g. an
   accordion header's year + count badge) into mostly empty space. */
@media (min-width: 1400px) {
    .tc-theme .container {
        max-width: 1140px;
    }
}

/* Admin dropdown: each option reads as its own rectangular button rather than a
   flush link row, with generous horizontal breathing room. */
.tc-theme .admin-menu {
    padding: .5rem;
    min-width: 13rem;
}
.tc-theme .admin-menu .dropdown-item {
    border: 1px solid var(--tc-border);
    border-radius: 6px;
    padding: .5rem 1.5rem;
    margin-bottom: .35rem;
}
.tc-theme .admin-menu .dropdown-item:last-child {
    margin-bottom: 0;
}
.tc-theme .admin-menu .dropdown-item:hover,
.tc-theme .admin-menu .dropdown-item:focus {
    background-color: var(--tc-blue-light);
    color: var(--tc-blue-dark);
}

/* Inputs read as white like the cards (not the grey --bs-body-bg default).
   Color is pinned explicitly (not just inherited from --bs-body-color) so a
   <select>'s foreground is never left ambiguous — WCAG 1.4.3. */
.tc-theme .form-control,
.tc-theme .form-select {
    background-color: var(--tc-bg-card);
    color: var(--tc-text-dark);
}

/* Page + section titles: more vertical breathing room so they stand out. */
.tc-theme .page-title {
    padding-top: .25rem;
    padding-bottom: .65rem;
    margin-top: .75rem;
    margin-bottom: 2rem;
}
.tc-theme main h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}
/* Bootstrap accordions use an <h2> for each header — exclude it from the section-title
   spacing above/below, or every item gets a ~40px gap above it and a white strip of
   item background below it (from the 1rem margin-bottom) whenever it's collapsed. */
.tc-theme main .accordion-header {
    margin-top: 0;
    margin-bottom: 0;
}

/* The first breadcrumb item is the way back to the parent list/index on
   nearly every detail page (food inspection history, missing persons,
   permit status, etc.). Bootstrap's default breadcrumb renders it as plain
   underlined text — easy to miss, especially embedded in a county iframe
   with no other back-navigation chrome. Give it button-level visual weight. */
.tc-theme .breadcrumb-item:first-child > a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .8rem .3rem .55rem;
    border-radius: 999px;
    background-color: var(--tc-blue-light);
    color: var(--tc-blue-dark);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.tc-theme .breadcrumb-item:first-child > a::before {
    content: "\2190";
    font-size: 1rem;
    line-height: 1;
}
.tc-theme .breadcrumb-item:first-child > a:hover,
.tc-theme .breadcrumb-item:first-child > a:focus-visible {
    background-color: var(--tc-blue-accent);
    color: #fff;
    border-color: var(--tc-blue-accent);
}

/* Cards: tables and .card render as white elevated cards on the ground. */
.tc-theme .table-responsive,
.tc-theme .card {
    border: 1px solid var(--tc-border);
    border-radius: 10px;
    box-shadow: var(--tc-card-shadow);
    background-color: var(--tc-bg-card);
}
/* Inner padding so rows/pager aren't flush to the card edge. Bootstrap already
   sets overflow-x:auto on .table-responsive, which clips to the rounded corners
   and preserves horizontal scroll on narrow screens. */
.tc-theme .table-responsive {
    padding: .5rem 1.15rem 1.15rem;
}

/* DataTables wraps the table + its length/info/pager rows in .row elements with
   negative gutters; zero those so they honor the card padding, and give the
   bottom control row room above the card's bottom padding. */
.tc-theme .dataTables_wrapper > .row {
    --bs-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
}
.tc-theme .dataTables_wrapper > .row:last-child {
    margin-top: .7rem;
}

/* No first-paint reflow flash: a data-datatable table renders all its rows on
   load, then DataTables re-lays it out to one page + adds controls — a visible
   jump. Hide the table until site.js flags it .dt-ready (post-init), then fade
   it in. Gated on html.js (set in <head> before first paint) so a no-JS visitor
   still sees the plain table; site.js also reveals as a safety net. */
html.js table[data-datatable]:not(.dt-ready) { visibility: hidden; }
table[data-datatable].dt-ready { animation: tc-dt-fade .15s ease-in; }
@keyframes tc-dt-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    table[data-datatable].dt-ready { animation: none; }
}

/* Row body background: Bootstrap's --bs-table-bg defaults to --bs-body-bg, which
   this theme sets to --tc-bg-page (#f7f7f7) for the ground outside cards — so every
   table cell was picking up a faint grey instead of the white the card itself uses.
   Pin it to the card color so body rows read as true white. */
.tc-theme .table {
    --bs-table-bg: var(--tc-bg-card);
}

/* Flat table header: white ground, tracked uppercase navy labels, green rule. */
.tc-theme .table thead th {
    background-color: var(--tc-bg-card);
    color: var(--tc-blue-dark);
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .7rem .85rem;
    border-bottom: 2px solid var(--tc-green);
}

/* Unbanded rows: cancel BOTH band sources (see TABLE GOTCHAS) — the base
   background-color and Bootstrap's --bs-table-bg-type box-shadow. To restore
   bands, give both a color (e.g. #f5f6f8). */
.tc-theme .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: transparent;
    --bs-table-bg-type: transparent;
}

.tc-theme .table > tbody > tr > * {
    padding-top: .68rem;
    padding-bottom: .68rem;
    border-top: 1px solid var(--tc-row-divider);   /* hairline row divider */
}

/* Row hover rides the same inset box-shadow, via --bs-table-bg-state. */
.tc-theme .table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: var(--tc-row-hover);
}

/* DataTables repaints stripe + hover with its OWN higher-specificity inset
   box-shadow on table.dataTable.* (see TABLE GOTCHAS). Match it here to unband
   and set our hover; ordered stripe-then-hover so hover wins on odd rows. */
.tc-theme table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * {
    box-shadow: none;
}
.tc-theme table.dataTable.table-hover > tbody > tr:hover > * {
    box-shadow: inset 0 0 0 9999px var(--tc-row-hover);
}
/* On a hovered row the link deepens to navy so it stays high-contrast on the
   wash (keeps AA regardless of the wash darkness). */
.tc-theme .table-hover > tbody > tr:hover a {
    color: var(--tc-blue-dark);
}

/* Links in tables use the county blue-accent, kept underlined for WCAG 1.4.1. */
.tc-theme .table a {
    color: var(--tc-blue-accent);
    font-weight: 600;
    text-underline-offset: 2px;
}
.tc-theme .table a:hover,
.tc-theme .table a:focus {
    color: var(--tc-blue-dark);
}