/* ════════════════════════════════════════════════════════════════════
   CampHub redesign — drop-in override layer
   Load AFTER css/main.css. Delete this file to revert; nothing in
   main.css, bootstrap.min.css or any .tpl needs to change.

   Scope: tokens, type, surfaces, buttons, tables, chrome.
   NOT covered: icon swap (needs the sprite), layout/IA changes, and the
   killed form wizard — those are template work. See suggestions/ROADMAP.md.
════════════════════════════════════════════════════════════════════ */

/* ── 0. UI typeface (self-hosted, offline-safe, like Montserrat) ──── */
@font-face {
    font-family: "Public Sans";
    src: url("/assets/font/PublicSans-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-display: swap;
}

/* ── 1. Tokens ──────────────────────────────────────────────────── */
:root {
    --ch-ink-900: #00242b;
    --ch-ink-800: #003642;
    --ch-ink-600: #145e6b;

    --ch-action: #0f7a8a;
    --ch-action-hover: #003642;
    --ch-action-soft: #e6f1f2;
    --ch-action-line: #9fc6cc;
    --ch-accent: #2aa87f;

    --ch-canvas: #f6f8f8;
    --ch-surface: #ffffff;
    --ch-surface-sunk: #fbfcfc;
    --ch-line: #e3e9ea;
    --ch-line-soft: #eef1f2;
    --ch-line-strong: #cbd5d8;
    --ch-text: #13272d;
    --ch-muted: #5e7379;
    --ch-faint: #8a9ca3;

    --ch-ok-fg: #166046;
    --ch-ok-bg: #e7f4ee;
    --ch-warn-fg: #7a4e00;
    --ch-warn-bg: #fdf3e0;
    --ch-danger-fg: #992222;
    --ch-danger-bg: #fbeaea;
    --ch-info-fg: #1b5b94;
    --ch-info-bg: #e8f0f9;
    --ch-neutral-fg: #4c6066;
    --ch-neutral-bg: #eef1f2;
    --ch-warn-solid: #d99b1c;

    --ch-r-sm: 6px;
    --ch-r-md: 8px;
    --ch-r-lg: 12px;
    --ch-r-xl: 16px;
    --ch-r-pill: 999px;

    --ch-shadow-pop: 0 4px 16px rgba(0, 36, 43, 0.12);
    --ch-shadow-modal: 0 24px 60px rgba(0, 36, 43, 0.28);

    --ch-font-display: "Montserrat", sans-serif;
    --ch-font-ui: "Public Sans", "Inter var", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif;

    --sidebar-w: 236px;

    /* Back-compat aliases — every existing rule in main.css and every
       inline style that references these picks up the new palette. */
    --dark-green: var(--ch-ink-800);
    --brand-dark: var(--ch-ink-800);
    --mid-green: var(--ch-action);
    --low-light: var(--ch-action);
    --light-green: var(--ch-accent);
}

/* Per-camp branding still works: applyBrandColors() writes the four alias
   names inline on <html>, which overrides the block above exactly as today.
   To brand the new tokens too, see the table in DESIGN-TOKENS.md. */

/* ── 2. Type ────────────────────────────────────────────────────── */
body {
    font-family: var(--ch-font-ui);
    background: var(--ch-canvas);
    color: var(--ch-text);
    font-size: 13.5px;
    line-height: 20px;
    -webkit-font-smoothing: antialiased;
    text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6,
.topbar-title, .section-heading, .data-card-header,
.stat-num, .camp-name, .ev-title, .logo-text {
    font-family: var(--ch-font-display);
    font-weight: 700;
    color: var(--ch-text);
    letter-spacing: -0.01em;
}
.topbar-title { font-size: 19px; line-height: 24px; }
.section-heading,
.data-card-header { font-size: 15px; line-height: 20px; }

/* Kill the sub-11px Montserrat micro-headings — the single biggest
   "dated" signal in the current UI. */
.camp-selector-label,
.sidebar-section,
.stat-label,
.camp-stat-label,
.ev-filter-label,
.ev-col-section,
.df-label,
.health-log-label,
.ch-item-sub {
    font-family: var(--ch-font-ui);
    font-size: 11px;
    line-height: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ch-faint);
}
.stat-sub, .ch-item-sub, .df-sub, .ev-count-label {
    font-size: 12.5px;
    line-height: 18px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
    color: var(--ch-muted);
}

a { color: var(--ch-action); text-decoration: none; }
a:hover { color: var(--ch-action-hover); text-decoration: underline; }

/* ── 3. Surfaces: borders, not shadows ──────────────────────────── */
.data-card,
.ch-card,
.stat-card,
.camp-card,
.ch-item-card,
.ev-header,
.nursenoteeditor,
.df-entry {
    background: var(--ch-surface);
    border: 1px solid var(--ch-line);
    border-radius: var(--ch-r-lg);
    box-shadow: none;
}
/* main.css gives these headers white text on a dark brand fill. The redesign
   lightens their fill, so re-assert dark text (and dark text on descendants)
   or the label goes white-on-light and disappears. */
.ev-header,
.ev-header *,
.data-card-header,
.data-card-header *,
.ch-item-header,
.ch-item-header *,
.camp-header,
.camp-header * {
    color: var(--ch-text);
}
/* main.css also restyles the buttons inside .ev-header for its old DARK fill (translucent mint
   outline buttons, near-white ghost text at .7 alpha, pink danger). Those selectors are one class
   more specific than the button defaults below, so on the light header they win: the ghost
   buttons became near-white text on a white button. Re-assert the light-surface treatment at the
   same specificity (this file loads after main.css, so it wins). */
.ev-header .btn-ch-outline {
    background: var(--ch-surface);
    border-color: var(--ch-action-line);
    color: var(--ch-action);
}
.ev-header .btn-ch-outline:hover {
    background: var(--ch-action-soft);
    border-color: var(--ch-action);
    color: var(--ch-action-hover);
}
.ev-header .btn-ch-outline:disabled,
.ev-header .btn-ch-outline:disabled:hover {
    background: var(--ch-surface-sunk);
    border-color: var(--ch-line);
    color: var(--ch-faint);
    cursor: not-allowed;
}
.ev-header .btn-ch-ghost {
    background: var(--ch-surface);
    border-color: var(--ch-line-strong);
    color: var(--ch-muted);
}
.ev-header .btn-ch-ghost:hover {
    background: var(--ch-neutral-bg);
    border-color: var(--ch-muted);
    color: var(--ch-text);
}
.ev-header .btn-ch-danger {
    background: var(--ch-surface);
    border-color: var(--ch-danger-fg);
    color: var(--ch-danger-fg);
}
.ev-header .btn-ch-danger:hover {
    background: var(--ch-danger-fg);
    color: #fff;
}
.data-card-header,
.ch-item-header,
.camp-header {
    border-bottom: 1px solid var(--ch-line-soft);
    background: transparent;
}
.df-field,
.lightgray_group,
.item-footer {
    background: var(--ch-surface-sunk);
    border: 1px solid var(--ch-line-soft);
    border-radius: var(--ch-r-md);
}
.dropdown-menu,
.user-status-menu,
.ev-col-picker,
.moreops .dropdown-menu {
    border: 1px solid var(--ch-line);
    border-radius: var(--ch-r-md);
    box-shadow: var(--ch-shadow-pop);
    padding: 4px;
}
.dropdown-item {
    border-radius: var(--ch-r-sm);
    font-size: 13.5px;
    padding: 7px 10px;
}
.modal-content {
    border: none;
    border-radius: var(--ch-r-xl);
    box-shadow: var(--ch-shadow-modal);
    overflow: hidden;
}
.modal-header, .modal-footer { border-color: var(--ch-line-soft); }
.modal-footer { background: var(--ch-surface-sunk); }

/* ── 4. Buttons ─────────────────────────────────────────────────── */
.btn-ch-primary,
.btn-ch-outline,
.btn-ch-ghost,
.btn-ch-danger {
    font-family: var(--ch-font-ui);
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    border-radius: var(--ch-r-sm);
    padding: 8px 14px;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.btn-ch-primary {
    background: var(--ch-action);
    border: 1px solid var(--ch-action);
    color: #fff;
}
.btn-ch-primary:hover {
    background: var(--ch-action-hover);
    border-color: var(--ch-action-hover);
}
.btn-ch-outline {
    border: 1px solid var(--ch-action-line);
    color: var(--ch-action);
    background: var(--ch-surface);
}
.btn-ch-outline:hover {
    background: var(--ch-action-soft);
    border-color: var(--ch-action);
    color: var(--ch-action-hover);
}
.btn-ch-ghost {
    border: 1px solid var(--ch-line-strong);
    color: var(--ch-muted);
    background: var(--ch-surface);
}
.btn-ch-ghost:hover {
    border-color: var(--ch-muted);
    color: var(--ch-text);
    background: var(--ch-neutral-bg);
}
.btn-ch-danger {
    border: 1px solid var(--ch-danger-fg);
    color: var(--ch-danger-fg);
    background: var(--ch-surface);
}
.btn-ch-danger:hover { background: var(--ch-danger-fg); color: #fff; }
.btn-secondary {
    background-color: var(--ch-action);
    border-color: var(--ch-action);
    color: #fff;
}
.btn-sm-icon {
    color: var(--ch-muted);
    border-radius: var(--ch-r-sm);
    padding: 6px;
    min-width: 32px;
    min-height: 32px;
}
.btn-sm-icon:hover { color: var(--ch-action); background: var(--ch-action-soft); }

:where(button, a, input, select, textarea):focus-visible {
    outline: 2px solid var(--ch-action);
    outline-offset: 2px;
    box-shadow: none;
}

/* ── 4b. Fold Bootstrap button conventions into the standard set ──── */
.btn-primary,
.btn-secondary {
    background: var(--ch-action);
    border: 1px solid var(--ch-action);
    color: #fff;
    border-radius: var(--ch-r-sm);
    font-weight: 600;
}
.btn-primary:hover,
.btn-secondary:hover {
    background: var(--ch-action-hover);
    border-color: var(--ch-action-hover);
    color: #fff;
}
.btn-outline-primary,
.btn-outline-secondary {
    border: 1px solid var(--ch-line-strong);
    color: var(--ch-muted);
    background: var(--ch-surface);
    border-radius: var(--ch-r-sm);
    font-weight: 600;
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    border-color: var(--ch-muted);
    color: var(--ch-text);
    background: var(--ch-neutral-bg);
}
.btn-danger {
    background: var(--ch-danger-fg);
    border: 1px solid var(--ch-danger-fg);
    color: #fff;
    border-radius: var(--ch-r-sm);
    font-weight: 600;
}

/* ── 5. Inputs ──────────────────────────────────────────────────── */
.form-control,
.form-select,
.ev-search,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea {
    font-family: var(--ch-font-ui);
    font-size: 13.5px;
    line-height: 20px;
    color: var(--ch-text);
    background: var(--ch-surface);
    border: 1px solid var(--ch-line-strong);
    border-radius: var(--ch-r-sm);
    padding: 8px 10px;
    box-shadow: none;
}
.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--ch-action);
    box-shadow: 0 0 0 3px var(--ch-action-soft);
    outline: none;
}
.form-label, label {
    font-family: var(--ch-font-ui);
    font-size: 12.5px;
    line-height: 16px;
    font-weight: 600;
    color: var(--ch-text);
}
.modal-body .form-control,
.modal-body .form-select { font-size: 13.5px; padding: 8px 10px; }
.required { color: var(--ch-danger-fg); }

/* ── 6. Tables ──────────────────────────────────────────────────── */
.data-table,
.ev-table,
.table {
    font-size: 13.5px;
    border-collapse: separate;
    border-spacing: 0;
}
.data-table thead th,
.ev-table thead th,
.table thead th {
    font-family: var(--ch-font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ch-faint);
    background: var(--ch-surface-sunk);
    border-bottom: 1px solid var(--ch-line);
    padding: 10px 12px;
    white-space: nowrap;
}
.data-table tbody td,
.ev-table tbody td,
.table tbody td {
    border-bottom: 1px solid var(--ch-line-soft);
    padding: 10px 12px;
    vertical-align: middle;
}
.data-table tbody tr:hover,
.ev-table tbody tr:hover { background: var(--ch-action-soft); }

/* ── 7. Chips, pills, badges ────────────────────────────────────── */
.role-chip,
.sys-pill,
.ev-stat-pill,
.ev-smart-chip,
.yn-pill,
.user-status-badge,
.nav-badge {
    font-family: var(--ch-font-ui);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    border-radius: var(--ch-r-pill);
    padding: 3px 10px;
}
.ev-smart-chip,
.yn-pill {
    border: 1px solid var(--ch-line-strong);
    background: var(--ch-surface);
    color: var(--ch-muted);
    padding: 6px 14px;
    min-height: 32px;
}
.ev-smart-chip:hover,
.yn-pill:hover {
    border-color: var(--ch-action);
    color: var(--ch-action);
    background: var(--ch-action-soft);
}
/* Yes/No toggle: selected = solid teal; unanswered = dashed warn (was hardcoded
   pink/green/amber). */
.yn-pill.yn-active {
    background: var(--ch-action);
    border-color: var(--ch-action);
    color: #fff;
    font-weight: 600;
}
.yn-pill-group.yn-unset .yn-pill {
    border-style: dashed;
    border-color: var(--ch-line-strong);
    color: var(--ch-muted);
    background: var(--ch-surface);
}
/* The "can't sign until the policies are checked" notice on a disabled
   signature field was a raw rgba(255,0,0,.4) box; make it a clean danger notice. */
.sig-wrapper.disabled .disabled-message {
    background: var(--ch-danger-bg);
    color: var(--ch-danger-fg);
    border: 1px solid var(--ch-danger-fg);
    border-left-width: 3px;
    border-radius: var(--ch-r-md);
    padding: 8px 12px;
    font-weight: 500;
}
.ev-approved { color: var(--ch-ok-fg); background: var(--ch-ok-bg); }
.ev-waitlist { color: var(--ch-warn-fg); background: var(--ch-warn-bg); }
.ev-alert,
.duplicatewarning,
.yn-default-warning {
    color: var(--ch-warn-fg);
    background: var(--ch-warn-bg);
    border: 1px solid #f0dcb4;
    border-radius: var(--ch-r-md);
}
.error, .empty-required, .invalid-tooltip {
    color: var(--ch-danger-fg);
    background: var(--ch-danger-bg);
    border-radius: var(--ch-r-sm);
}
/* Suppress Bootstrap's VALID (positive) form feedback. Once a form is validated
   (.was-validated / .is-valid) Bootstrap paints a green border + green check icon on
   EVERY valid field; on a large form (e.g. an event) that is a wall of checkmarks that
   flashes on submit, right before the page reloads. We keep the INVALID feedback (it
   tells people what to fix) and only drop the positive one. The form-select rule restores
   the plain caret so dropdowns keep their arrow.

   !important is deliberate: Bootstrap applies this state through many selectors of varying
   specificity (input-group variants, .is-valid, :not([multiple]) qualifiers, :focus), and
   matching each one exactly would be brittle. !important neutralises the positive state in
   every one of them (Bootstrap itself uses no !important here). */
.was-validated .form-control:valid,
.form-control.is-valid,
.was-validated textarea.form-control:valid,
textarea.form-control.is-valid {
    border-color: var(--ch-line-strong, #d1d5db) !important;
    background-image: none !important;
    padding-right: 0.75rem !important;
}
.was-validated .form-select:valid,
.form-select.is-valid {
    border-color: var(--ch-line-strong, #d1d5db) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.25rem !important;
}
.was-validated .form-control:valid:focus,
.form-control.is-valid:focus,
.was-validated .form-select:valid:focus,
.form-select.is-valid:focus {
    border-color: var(--mid-green, #157388) !important;
    box-shadow: 0 0 0 0.25rem rgba(21, 115, 136, 0.2) !important;
}
.was-validated .form-check-input:valid,
.form-check-input.is-valid {
    border-color: var(--ch-line-strong, #d1d5db) !important;
}
.was-validated .form-check-input:valid:checked,
.form-check-input.is-valid:checked {
    background-color: var(--ch-action) !important;
    border-color: var(--ch-action) !important;
}
.was-validated .form-check-input:valid:focus,
.form-check-input.is-valid:focus {
    box-shadow: 0 0 0 0.25rem rgba(21, 115, 136, 0.2) !important;
}
.was-validated .form-check-input:valid ~ .form-check-label,
.form-check-input.is-valid ~ .form-check-label {
    color: inherit !important;
}
.was-validated :valid ~ .valid-feedback,
.was-validated :valid ~ .valid-tooltip,
.valid-feedback, .valid-tooltip {
    display: none !important;
}
.camp-progress-bar { background: var(--ch-line-soft); border-radius: var(--ch-r-pill); }
.camp-progress-fill { background: var(--ch-accent); border-radius: var(--ch-r-pill); }

/* ── 8. Chrome: sidebar + topbar ────────────────────────────────── */
.sidebar {
    background: var(--ch-ink-800);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebar .nav-link,
.sidebar a {
    font-family: var(--ch-font-ui);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    border-radius: var(--ch-r-sm);
    padding: 9px 12px;
    color: rgba(255, 255, 255, 0.82);
}
/* Lucide nav icons (emitted by navIconHTML when the preview flag is on). Stroke inherits
   the link's currentColor, so hover/active recolor the icon too. */
.ch-nav-ico {
    width: 17px;
    height: 17px;
    display: inline-block;
    vertical-align: -3px;
    margin-right: 4px;
    flex-shrink: 0;
}
/* Lucide icons that replaced decorative emoji in list-row tiles and avatars.
   Stroke inherits currentColor (the tile's --mid-green, the avatar's white). */
.ch-report-icon svg { width: 20px; height: 20px; }
.ch-item-avatar svg { width: 18px; height: 18px; }
/* Inline Lucide icons that replaced emoji inside text/labels. Sized to the
   surrounding font and coloured by currentColor, so they sit like a glyph. */
.ch-ico {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.14em;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}
.sidebar .nav-link:hover,
.sidebar a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    text-decoration: none;
}
.sidebar .nav-link.active,
.sidebar a.active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    box-shadow: inset 2px 0 0 var(--ch-accent);
}
.sidebar-section {
    color: rgba(255, 255, 255, 0.45);
    padding: 16px 12px 6px;
}
.logo-text { color: #fff; font-size: 16px; letter-spacing: -0.01em; }
.sidebar-camp-selector,
.sidebar-bottom {
    border-color: rgba(255, 255, 255, 0.1);
}
/* One consistent dark page bar: the always-present SHELL topbar (a direct child of
   .main-content) goes dark with white text on every page; the page name shows via the
   breadcrumb. Per-page content topbars (e.g. the dashboard action bar, inside
   #maincontent) stay light and readable — they're page content, not the page bar. */
.main-content > .topbar {
    background: var(--ch-ink-800);
    border-bottom: none;
    box-shadow: none;
    padding-top: 14px;
    padding-bottom: 14px;
}
/* All text/links/icons in the dark shell bar are white on every page. */
.main-content > .topbar,
.main-content > .topbar .topbar-title,
.main-content > .topbar a,
.main-content > .topbar a:hover { color: #fff; }
/* Toolbars that reuse .main-content > .topbar sit on the now-dark bar but were styled
   for a light one: the Camp Calendar month-nav, and the StaffHub view toggles (My
   Dashboard / Department Hub, plus calendar/task views). Recolor their text light, and
   make the segmented .view-toggle read on dark — translucent border, white inactive
   text on transparent, and a solid light fill for the active segment so it stands out.
   Scoped to the topbar, so any .view-toggle sitting in page content is untouched. */
.main-content > .topbar .month-label { color: #fff; }
.main-content > .topbar > div:not(.topbar-left) { color: rgba(255, 255, 255, 0.7) !important; }
.main-content > .topbar .view-toggle { border-color: rgba(255, 255, 255, 0.35); }
.main-content > .topbar .view-toggle a,
.main-content > .topbar .view-toggle button {
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
}
.main-content > .topbar .view-toggle a:hover,
.main-content > .topbar .view-toggle button:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.main-content > .topbar .view-toggle a.active,
.main-content > .topbar .view-toggle button.active {
    background: #fff;
    color: var(--ch-ink-800);
    font-weight: 600;
}
/* Make the bar read as a page banner: the current page name is a prominent title,
   any breadcrumb trail sits small and muted before it. */
.main-content > .topbar .topbar-breadcrumb { font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.main-content > .topbar .crumb-current {
    color: #fff;
    font-weight: 700;
    font-size: 1.3rem;
    font-family: var(--ch-font-display);
    letter-spacing: -0.01em;
}
.main-content > .topbar .topbar-back,
.main-content > .topbar .sidebar-toggle,
.main-content > .topbar .btn-sm-icon,
.main-content > .topbar svg { color: #fff; }
.main-content > .topbar .sidebar-toggle:hover,
.main-content > .topbar .btn-sm-icon:hover { background: rgba(255, 255, 255, 0.12); }
/* The breadcrumb "Back" button is a bare <button> with no base style, so it
   renders as a stock grey browser button. Give it the same ghost treatment as
   the other dark-bar buttons. */
.main-content > .topbar .topbar-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--ch-r-sm);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    padding: 6px 12px;
    cursor: pointer;
}
.main-content > .topbar .topbar-back:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: #fff;
}
/* Buttons in the dark bar (e.g. "Open StaffHub") need a dark-appropriate outline — the
   light ghost/outline fill would be white text on a white background. */
.main-content > .topbar .btn-ch-ghost,
.main-content > .topbar .btn-ch-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #fff;
}
.main-content > .topbar .btn-ch-ghost:hover,
.main-content > .topbar .btn-ch-outline:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: #fff;
    color: #fff;
}
.content-area { background: var(--ch-canvas); }

/* Content-level topbars (dashboard action bar, camp-host header, …) stay on a light
   surface so their titles/controls read normally under the dark shell bar. */
#maincontent .topbar {
    background: var(--ch-surface);
    border-bottom: 1px solid var(--ch-line);
}

/* Drop the redundant per-page dark banner (the content-panel <header>: camp logo +
   page title) on every page. The page title now lives in the shell top bar, so this
   inner dark bar is a duplicate. Pages with a logo (Users, Reports, …) were already
   hidden; title-only pages (Config, Logs) slipped through and showed a second dark
   bar. Hiding all content <header>s makes every page look the same. The tabbed
   HeaderActions slot is never populated, so nothing functional is lost. */
#maincontent header,
.content-area header { display: none; }
/* Safety net: hide the camp-logo block anywhere it appears in page content. */
.camplogo { display: none !important; }

/* ── 9. Mobile floors: 13px text, 44px targets ──────────────────── */
/* ── 12. StaffHub fragment alignment ────────────────────────────────
   StaffHub's 26 fragment templates predate the token layer: they draw
   content cards with drop-shadows and dark card-header blocks. Bring them
   in line with CampHub's redesign surfaces (borders, not shadows) and light
   headers, centrally here instead of editing every fragment. Everything is
   scoped under #sh-main (the StaffHub content cell), whose id out-specifies
   the fragments' own class rules, so nothing leaks into CampHub. */

/* Content-card surfaces: a hairline border, no shadow. */
#sh-main .card2,
#sh-main .sh-card,
#sh-main .post-card,
#sh-main .todo-card,
#sh-main .tmpl-card,
#sh-main .dept-card,
#sh-main .d-card,
#sh-main .on-site-strip,
#sh-main .list-view-wrap,
#sh-main .camp-section {
    box-shadow: none;
    border: 1px solid var(--ch-line);
    border-radius: var(--ch-r-lg);
}

/* Content-card headers: light surface, dark text, hairline — like CampHub's
   .data-card-header. Links/actions that sat on the old dark header are made
   dark/teal so they stay visible now the header is light; badges keep their
   own fill. */
#sh-main .sh-card-header,
#sh-main .card2-h,
#sh-main .post-card-header,
#sh-main .d-card-title,
#sh-main .tmpl-card-hd {
    background: transparent;
    color: var(--ch-text);
    border-bottom: 1px solid var(--ch-line-soft);
}
#sh-main .sh-card-header a,
#sh-main .card2-h a,
#sh-main .post-card-header a,
#sh-main .d-card-title a,
#sh-main .tmpl-card-hd a {
    color: var(--ch-action);
}

/* Nav icons: swap emoji → Lucide. The StaffHub sidebar is a sibling of #sh-main,
   so these are scoped to .sidebar. The SVG inherits the link colour via
   stroke:currentColor (white, or accent-green when active). */
.sidebar .sh-nav-ico {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.sidebar .sh-nav-emoji { display: none; }
/* Mobile bottom-tab bar: same emoji → Lucide swap. */
.shm-tab .shm-ico-svg { display: inline-flex; width: 22px; height: 22px; }
.shm-tab .shm-ico { display: none; }
/* The "More" bottom sheet reuses the sidebar nav markup but lives outside .sidebar,
   so mirror the emoji → Lucide swap there too (the .sidebar-nav a flex layout already applies). */
.shm-sheet .sh-nav-ico { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; }
.shm-sheet .sh-nav-emoji { display: none; }

/* ── 13. Stock Bootstrap components ─────────────────────────────────
   Buttons/inputs/tables/chips are handled earlier; these are the remaining
   stock Bootstrap components in use across the app (alerts, badges,
   pagination, tabs, breadcrumb, progress, list-group, toast). Styling the
   semantic .alert-*/.badge.bg-* variants also pulls those colors onto the
   central tokens. Loaded after bootstrap.min.css, so equal-specificity
   rules win; badge utilities are !important in Bootstrap, so match that. */

/* Alerts → semantic token pairs, with a left accent. */
.alert { border-radius: var(--ch-r-md); border: 1px solid transparent; border-left-width: 3px; }
.alert-success { background: var(--ch-ok-bg); color: var(--ch-ok-fg); border-color: var(--ch-ok-fg); }
.alert-warning { background: var(--ch-warn-bg); color: var(--ch-warn-fg); border-color: var(--ch-warn-fg); }
.alert-danger  { background: var(--ch-danger-bg); color: var(--ch-danger-fg); border-color: var(--ch-danger-fg); }
.alert-info    { background: var(--ch-info-bg); color: var(--ch-info-fg); border-color: var(--ch-info-fg); }
.alert-secondary, .alert-light { background: var(--ch-neutral-bg); color: var(--ch-neutral-fg); border-color: var(--ch-line); }

/* Badges → token palette (Bootstrap's .bg-* utilities are !important). */
.badge.bg-success   { background: var(--ch-ok-fg) !important; }
.badge.bg-warning   { background: var(--ch-warn-solid) !important; color: #fff !important; }
.badge.bg-danger    { background: var(--ch-danger-fg) !important; }
.badge.bg-info      { background: var(--ch-info-fg) !important; }
.badge.bg-primary   { background: var(--ch-action) !important; }
.badge.bg-secondary { background: var(--ch-neutral-fg) !important; }

/* Pagination. */
.page-link { color: var(--ch-action); border-color: var(--ch-line); }
.page-link:hover { background: var(--ch-action-soft); border-color: var(--ch-action-line); color: var(--ch-action-hover); }
.page-item.active .page-link { background: var(--ch-action); border-color: var(--ch-action); color: #fff; }
.page-item.disabled .page-link { color: var(--ch-faint); }

/* Nav tabs → teal active underline. */
.nav-tabs { border-bottom-color: var(--ch-line); }
.nav-tabs .nav-link { color: var(--ch-muted); border: none; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link:hover { color: var(--ch-action); border-bottom-color: var(--ch-action-line); }
.nav-tabs .nav-link.active { color: var(--ch-action); background: transparent; border-bottom: 2px solid var(--ch-action); font-weight: 600; }

/* Breadcrumb. */
.breadcrumb-item, .breadcrumb-item a { color: var(--ch-muted); text-decoration: none; }
.breadcrumb-item.active { color: var(--ch-text); }

/* Progress. */
.progress { background: var(--ch-surface-sunk); border: 1px solid var(--ch-line-soft); }
.progress-bar { background: var(--ch-action); }

/* List group. */
.list-group-item { border-color: var(--ch-line); color: var(--ch-text); }
.list-group-item.active { background: var(--ch-action); border-color: var(--ch-action); color: #fff; }

/* Toast. */
.toast { background: var(--ch-surface); border: 1px solid var(--ch-line); border-radius: var(--ch-r-md); box-shadow: var(--ch-shadow-pop); }
.toast-header { background: transparent; color: var(--ch-text); border-bottom: 1px solid var(--ch-line-soft); }

/* ── 14. Long-form navigation ───────────────────────────────────────
   No top jump-bar (it crowds with many sections). Instead the section
   headings pin to the top as you scroll (so you always see where you are),
   and the pinned heading doubles as the jump control: tapping it opens a
   compact menu of all sections. Wired by dynamic_form.tpl's JS; inert when
   a form has fewer than two sections. */
#dynamic_form .form-section {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--ch-surface);
    scroll-margin-top: 8px;
    margin: 0;
    padding: 8px 0 6px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ch-text);
    border-bottom: 1px solid var(--ch-line-soft);
}
/* The modal body has a transparent 16px top padding; when a section header pins
   at the top, that padding shows as a transparent band above it. Drop the top
   padding for sectioned forms so the pinned header's white reaches the top, and
   keep a little breathing room on the form itself (it scrolls away). */
.modal-body:has(.form-section) { padding-top: 0; }
#dynamic_form:has(.form-section) { padding-top: 12px; }
/* The pinned heading is tappable: a caret hints the section menu. */
.form-section-nav {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}
.form-section-nav::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--ch-faint);
    border-bottom: 2px solid var(--ch-faint);
    transform: rotate(45deg);
    margin-top: -4px;
}
.form-section-nav:hover { color: var(--ch-action); }
.form-section-nav:hover::after { border-color: var(--ch-action); }
/* Section menu — a floating (position:fixed, so the modal's overflow can't
   clip it) list of all sections, opened from the pinned heading. */
.form-sec-menu {
    position: fixed;
    z-index: 3000;
    display: none;
    min-width: 200px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 5px;
    background: var(--ch-surface);
    border: 1px solid var(--ch-line);
    border-radius: var(--ch-r-md);
    box-shadow: var(--ch-shadow-pop);
}
.form-sec-menu.open { display: block; }
.form-sec-menu a {
    display: block;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ch-text);
    text-decoration: none;
    border-radius: var(--ch-r-sm);
    white-space: nowrap;
}
.form-sec-menu a:hover { background: var(--ch-action-soft); color: var(--ch-action-hover); }
.form-sec-menu a.current { color: var(--ch-action); font-weight: 700; }

@media (max-width: 767px) {
    body { font-size: 15px; line-height: 24px; }
    .btn-ch-primary,
    .btn-ch-outline,
    .btn-ch-ghost,
    .btn-ch-danger,
    .yn-pill,
    .ev-smart-chip {
        min-height: 44px;
        padding: 11px 16px;
        font-size: 14px;
    }
    .form-control, .form-select, input, select, textarea {
        font-size: 16px; /* prevents iOS zoom-on-focus */
        min-height: 44px;
    }
    .sidebar .nav-link, .sidebar a { min-height: 44px; display: flex; align-items: center; }
    .data-table, .ev-table, .table { font-size: 14px; }
}

@media print {
    .data-card, .ch-card, .stat-card, .camp-card { box-shadow: none; border: 1px solid #ccc; }
    .sidebar, .topbar, .sidebar-overlay { display: none !important; }
    .main-content { margin-left: 0 !important; }
}