/* ============================================================
   qFIT - styles.css
   Central stylesheet. Control the entire site from here.
   Mobile-first. CSS variables used for every token.
   ============================================================ */

/* ── 1. CSS Variables (Light Mode) ──────────────────────────── */
/* Token values tracked to PacklistPRO's tuned set for cross-site consistency.
   qFIT keeps its own brand accent (#2196f3 Material blue) but tightens type
   scale, shadow opacity, and muted-text color to match. */
:root {
    --color-nav-highlight: #00bcd4;
    --color-nav-highlight-hover: #0097a7;
    --color-nav-2-bg: #003a44;     /* very dark cyan for cascading dropdowns */
    --color-nav-2-hover: #00bcd4;
    --color-bg-nav-2: var(--color-nav-2-bg);  /* second-level dropdown bg — very dark cyan */
}

/* ── 2. Dark Mode Variables ──────────────────────────────────── */
[data-theme="dark"] {
    --color-bg-nav-2:       #181818;
}

/* ── 5. Links ────────────────────────────────────────────────── */
/* White-text link for use on a colored / dark cell background (category-color rows, etc.). */
.link-on-color,
a.link-on-color {
    color: #ffffff;
    text-decoration: none;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
}
.link-on-color:hover,
a.link-on-color:hover { color: #ffffff; text-decoration: underline; }

/* ── 7. Buttons (legacy aliases only — base + variants in shared) ──────── */
/* ConfigureTemplates dynamic grid — replaces legacy <table border=1> markup. */
.configure-templates-table {
    border-collapse: collapse;
    width: 100%;
}
.configure-templates-table th,
.configure-templates-table td {
    border: 1px solid var(--color-border);
    padding: 0.375rem 0.5rem;
    vertical-align: top;
}


/* ── Legacy class aliases ─────────────────────────────────────────────────
   Old pages use class="button green", class="button red", class="button lime",
   class="button main", etc. These aliases make them render with the canonical
   colors without forcing every page to be rewritten. New code should use
   .button-save / .button-delete / .button-secondary directly. */
.button.green,
.button.lime { background-color: var(--color-save-btn); color: #fff; }
.button.green:hover,
.button.lime:hover { background-color: var(--color-save-btn-hover); color: #fff; }
.button.red { background-color: var(--color-delete-btn); color: #fff; }
.button.red:hover { background-color: var(--color-delete-btn-hover); color: #fff; }
.button.orange { background-color: #f59e0b; color: #fff; }
.button.orange:hover { background-color: #d97706; color: #fff; }
.button.yellow,
.button.gold { background-color: #fbbf24; color: #1f2937; }
.button.yellow:hover,
.button.gold:hover { background-color: #f59e0b; color: #1f2937; }
.button.main { /* primary — already styled by .button itself */ }
.button.tiny {
    padding: var(--btn-padding-sm);
    font-size: var(--font-size-sm);
    min-height: 36px;
    min-width: 36px;
}
/* "Main red" is the legacy combo for a destructive primary action */
.button.main.red { background-color: var(--color-delete-btn); color: #fff; }
.button.main.red:hover { background-color: var(--color-delete-btn-hover); color: #fff; }

/* ── Legacy typography / link / input aliases ──────────────────────────
   The Join wizard, Quick* pages, and several legacy admin pages still
   reference these older class names. Aliased so styles.css alone covers
   them — styles_universal.css remains loaded for compatibility but isn't
   strictly required to render correctly. */
.smallheading {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    display: block;
    margin: 0.5rem 0 0.5rem;
}
.mediumheading {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    display: block;
    margin: 0.5rem 0 0.5rem;
}
.text { color: var(--color-text); }
.graytext { color: var(--color-text-muted); }
.linkblack {
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
}
.linkblack:hover { color: var(--color-text); text-decoration: underline; }
.linkblue, .linkblue1 {
    color: var(--color-link);
    text-decoration: none;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
}
.linkblue:hover, .linkblue1:hover { color: var(--color-link-hover); text-decoration: underline; }
.linkgreen {
    color: var(--color-success);
    text-decoration: none;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
}
.linkgreen:hover { color: var(--color-save-btn-hover); text-decoration: underline; }
.linkwhite, .linkwhite:visited {
    color: #ffffff;
    text-decoration: none;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
}
.linkwhite:hover { color: #ffffff; text-decoration: underline; }
.linkred {
    color: var(--color-danger);
    text-decoration: none;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
}
.linkred:hover { color: var(--color-delete-btn-hover); text-decoration: underline; }
.linkgray {
    color: var(--color-text-muted);
    text-decoration: none;
    cursor: pointer;
}
.linkgray:hover { color: var(--color-text); text-decoration: underline; }
.linkyellow {
    color: #b58b00;
    text-decoration: none;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
}
.linkyellow:hover { color: #8a6700; text-decoration: underline; }
.linkorange {
    color: var(--color-warning);
    text-decoration: none;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
}
.linkorange:hover { color: #aa3a00; text-decoration: underline; }

.button.saving { opacity: 0.75; cursor: wait; }
.button.saved {
    background-color: var(--color-success);
}
.button.save-error {
    background-color: var(--color-delete-btn);
    animation: flashError 0.6s ease forwards;
}
@keyframes flashError {
    0%   { background-color: var(--color-delete-btn); }
    100% { background-color: var(--color-primary); }
}

/* ── 8. Form inputs (qFIT2-specific type-selector additions; shared has base) ── */
.textbox,
input.textbox,
textarea.textbox,
select.textbox {
    display: block;
    width: 100%;
    height: var(--input-height);
    padding: var(--input-padding);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    -webkit-appearance: none;
    appearance: none;
}
textarea.textbox {
    height: auto;
    min-height: 6rem;
    resize: vertical;
}
.textbox:focus,
input.textbox:focus,
textarea.textbox:focus,
select.textbox:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px rgba(33,150,243,0.18);
}
.textbox:disabled {
    opacity: 0.6;
    background-color: var(--color-bg);
    cursor: not-allowed;
}

/* Search-box clear (X) helper. */
.input-clearable {
    position: relative;
    display: flex;
    align-items: center;
}
.input-clearable .textbox { padding-right: 2rem; }
.input-clear-btn {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-light);
    font-size: 1.125rem;
    line-height: 1;
    padding: 0.25rem 0.4rem;
    border-radius: var(--border-radius-sm);
    display: none;
}
.input-clear-btn:hover { color: var(--color-text); background-color: var(--color-primary-light); }
.input-clear-btn:focus { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.input-clearable .textbox:not(:placeholder-shown) ~ .input-clear-btn { display: block; }

/* ── 9. Checkboxes & radio buttons ───────────────────────────── */
.checkbox,
input[type="checkbox"].checkbox {
    width: 1.125rem;
    height: 1.125rem;
    min-width: 1.125rem;
    cursor: pointer;
    accent-color: var(--color-primary);
    vertical-align: middle;
    margin-right: 0.375rem;
}
.check-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 44px;
    cursor: pointer;
}

.char-counter {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-align: right;
    margin-top: 0.2rem;
    transition: color 0.2s;
}

/* ── 11. Cards ───────────────────────────────────────────────── */
.card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: var(--card-padding);
    margin-bottom: var(--section-gap);
}
.card-lg { padding: var(--card-padding-lg); }
.card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin: 0 0 0.75rem 0;
    color: var(--color-text);
}


/* ── 13. Navigation ──────────────────────────────────────────── */
.site-nav {
    position: sticky;
    top: 0;
    z-index: var(--nav-z);
    background-color: var(--color-bg-nav);
    height: var(--nav-height);
    display: flex;
    align-items: center;
    box-shadow: var(--shadow-md);
}
.site-nav .nav-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.nav-brand {
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold);
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.01em;
    flex-shrink: 0;
}
.nav-brand:hover { color: #fff; text-decoration: none; }
.nav-brand .q { color: var(--color-nav-highlight); font-weight: 900; }
.nav-brand .rest { font-weight: 900; }

.nav-title {
    color: rgba(255,255,255,0.65);
    font-size: var(--font-size-sm);
    max-width: 50vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    text-align: center;
    pointer-events: none;
}

/* Hamburger toggle */
.nav-toggle {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    min-height: 44px;
    min-width: 44px;
    flex-shrink: 0;
}
@media (min-width: 992px) { .nav-toggle { display: none; } }

/* Nav menu */
.nav-menu {
    display: none;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0.5rem 0 2rem;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-bg-nav);
    overflow-y: auto;
    z-index: calc(var(--nav-z) - 1);
}
.nav-menu.open { display: flex; }
@media (min-width: 992px) {
    .nav-menu {
        display: flex;
        flex-direction: row;
        position: static;
        background: none;
        overflow: visible;
        padding: 0;
        align-items: center;
        gap: 0.25rem;
    }
}

.nav-item { position: relative; list-style: none; }

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 1.25rem;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast), background-color var(--transition-fast);
    white-space: nowrap;
    cursor: pointer;
}
.nav-link:visited { color: rgba(255,255,255,0.85); }
.nav-link:hover,
.nav-link.active {
    color: #111827;
    background-color: var(--color-nav-highlight);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
}
.nav-link.active { font-weight: var(--font-weight-bold); }
.nav-link.active:visited { color: #111827; }

.nav-link-has-dropdown::after {
    content: "▾";
    font-size: 0.75rem;
    margin-left: 0.25rem;
}

.nav-dropdown {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (max-width: 991px) {
    .nav-dropdown { padding-left: 1rem; background-color: var(--color-bg-nav-2); }
    .nav-dropdown.open { display: block; }
    .nav-dropdown .nav-link {
        padding: 0.5rem 1.25rem;
        color: rgba(255,255,255,0.85);
        font-size: var(--font-size-sm);
    }
}
@media (min-width: 992px) {
    .nav-item:hover .nav-dropdown,
    .nav-item:focus-within .nav-dropdown {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;
        max-height: calc(100vh - var(--nav-height) - 1rem);
        overflow-y: auto;
        background-color: var(--color-bg-nav-2);
        border: 1px solid rgba(0,188,212,0.25);
        border-radius: var(--border-radius-sm);
        box-shadow: var(--shadow-lg);
        z-index: 999;
        padding: 0.25rem 0;
    }
    /* Invisible bridge so the cursor stays in hover when crossing from
       the trigger to the dropdown — prevents the dropdown vanishing
       while moving the mouse down between menu bar and first item. */
    .nav-item:hover .nav-dropdown::before,
    .nav-item:focus-within .nav-dropdown::before {
        content: "";
        position: absolute;
        top: -10px;
        left: 0;
        right: 0;
        height: 10px;
        background: transparent;
    }
    .nav-dropdown .nav-link {
        padding: 0.5rem 1rem;
        border-radius: 0;
        font-size: var(--font-size-sm);
        color: rgba(255,255,255,0.92);
    }
    .nav-dropdown .nav-link:hover,
    .nav-dropdown .nav-link.active {
        background-color: var(--color-nav-highlight);
        color: #003a44;
    }
}

/* Section label + divider inside long dropdowns (e.g. Setup ≥ 14 items). */
.nav-section-label {
    list-style: none;
    padding: 0.5rem 1rem 0.25rem;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.55);
    font-weight: var(--font-weight-bold);
    pointer-events: none;
}
.nav-divider {
    list-style: none;
    margin: 0.25rem 0;
    border-top: 1px solid rgba(255,255,255,0.12);
    height: 0;
}
@media (max-width: 991px) {
    .nav-section-label {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* "(soon)" suffix tag, used to mark stub nav items. */
.nav-soon {
    font-size: 0.6875rem;
    color: rgba(255,255,255,0.55);
    font-style: italic;
    margin-left: 0.25rem;
}

/* Skip-to-content link: visually hidden until focused. WCAG 2.4.1. */
.skip-to-content {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.5rem 0.75rem;
    background-color: var(--color-nav-highlight);
    color: #003a44;
    font-weight: var(--font-weight-bold);
    border-radius: 0 0 var(--border-radius-sm) 0;
    text-decoration: none;
    transform: translateY(-100%);
    transition: transform 0.15s ease;
    z-index: calc(var(--nav-z) + 1);
}
.skip-to-content:focus {
    transform: translateY(0);
    outline: 2px solid #fff;
    outline-offset: -2px;
}

/* Footer polish: spacing + separator. */
.site-footer .footer-copyright { font-weight: var(--font-weight-medium); margin: 0 0 0.25rem; }
.site-footer .footer-links { margin: 0.25rem 0; }
.site-footer .footer-sep { color: rgba(255,255,255,0.4); margin: 0 0.25rem; user-select: none; }
.site-footer .footer-status { margin: 0.5rem 0 0; }
.site-footer .site-tagline { color: rgba(255,255,255,0.55); font-weight: var(--font-weight-normal); font-style: italic; }
@media (max-width: 480px) {
    .site-footer .footer-sep { display: none; }
    .site-footer .footer-links a { display: inline-block; margin: 0.125rem 0.5rem; }
}

/* Logout link in nav: red */
.nav-link.nav-logout { color: #f87171; }
.nav-link.nav-logout:hover { background-color: rgba(220,53,69,0.18); color: #fff; }

/* "Sign Up" CTA — distinct from Login so first-time visitors see a clear action. */
.nav-link.nav-cta {
    background-color: var(--color-save-btn);
    color: #fff !important;
    border-radius: var(--border-radius-sm);
    margin-left: 0.25rem;
    font-weight: var(--font-weight-bold);
}
.nav-link.nav-cta:hover,
.nav-link.nav-cta:focus {
    background-color: var(--color-save-btn-hover);
    color: #fff;
}

/* ── 14. Page layout ─────────────────────────────────────────── */
.page-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}
@media (min-width: 768px) { .page-wrapper { padding: 1.5rem; } }
@media (min-width: 1200px) { .page-wrapper { padding: 2rem 1.5rem; } }

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.page-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
/* Page title with no bottom margin (when sitting next to a right-aligned
   action button — collapses the gap below for a tighter header). */
/* Page header title row: Back button + page title on one line. */
.page-header-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
/* When the page-header has 3 direct flex children (back-btn + h1 + ⓘ),
   justify-content: space-between would awkwardly center the title.
   Make the title grab the available space so back-btn + title stay
   left-grouped and the ⓘ button ends up all the way in the upper-right. */
.page-header > .page-title,
.page-header > .page-title-flush {
    margin-right: auto;
}

/* ── 16. Tips panel (legacy alias for .vb code + .tips-row site-specific) ── */

/* Row that wraps the ⓘ Tips trigger, right-aligned at the top of a content page. */
.tips-row {
    display: flex;
    justify-content: flex-end;
    padding: .25rem 0;
}

/* ── 17. Modal site-specific overrides ───────────────────── */
#session-expired-modal .modal-box { text-align: center; }
#session-expired-modal .modal-footer { justify-content: center; }

/* Install / Push prompt modals (install-prompts.js) */
.install-instructions {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    margin: 0.75rem 0 0;
}
.install-instructions .label { margin-bottom: 0.25rem; }
.install-instructions ol { margin: 0; padding-left: 1.25rem; }
.install-instructions li { margin-bottom: 0.25rem; }
#install-prompt-modal .modal-footer,
#push-prompt-modal .modal-footer { justify-content: center; }

/* ── 18. Banners ─────────────────────────────────────────────── */

/* ── 19. Toast notifications (mirrors qMeet pattern) ─────────── */
.qfit-toast {
    position: fixed;
    top: calc(var(--nav-height, 56px) + 14px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    min-width: 280px;
    max-width: 90%;
    padding: 0.75rem 2.25rem 0.75rem 1.25rem;
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transition: opacity 0.4s;
    opacity: 1;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.qfit-toast.toast-success { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); }
.qfit-toast.toast-error,
.qfit-toast.toast-danger  { background: var(--color-danger-bg);  color: var(--color-danger);  border: 1px solid var(--color-danger-border); }
.qfit-toast.toast-warning { background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid var(--color-warning-border); }
.qfit-toast.toast-info    { background: var(--color-info-bg);    color: var(--color-info);    border: 1px solid var(--color-info-border); }
.qfit-toast-msg   { flex: 1; min-width: 0; }
.qfit-toast-close {
    position: absolute;
    top: 0.35rem;
    right: 0.45rem;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: transparent;
    color: currentColor;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.55;
    border-radius: 50%;
}
.qfit-toast-close:hover { opacity: 1; }

/* ── 20. Tables ──────────────────────────────────────────────── */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}
.data-table th {
    text-align: left;
    padding: 0.625rem 0.75rem;
    border-bottom: 2px solid var(--color-border);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}
.data-table td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background-color: var(--color-primary-light); }

/* ── 22. Footer ──────────────────────────────────────────────── */
.site-footer {
    background-color: var(--color-bg-nav);
    color: rgba(255,255,255,0.6);
    font-size: var(--font-size-sm);
    text-align: center;
    padding: 1.5rem 1rem;
    margin-top: 3rem;
}
.site-footer a { color: rgba(255,255,255,0.85); }
.site-footer a:hover { color: #fff; }
.site-footer p { margin: 0.25rem 0; }

/* ── 25. Back-to-top floating button ─────────────────────────── */
.qfit-back-to-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1500;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--color-accent);
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.qfit-back-to-top.visible { opacity: 1; pointer-events: auto; }

/* ── 25a. Subtle page-enter fade-in (ported from PacklistPRO parity) ───
   Only applies when site.js initPageEnter() sets data-page-enter on <html>
   for the first ~700ms after init. bfcache restores won't replay it. */
@keyframes qfitCardEnter {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
html[data-page-enter] .main-card,
html[data-page-enter] .qfit-card {
    animation: qfitCardEnter 280ms ease-out both;
}
html[data-page-enter] .main-card:nth-child(2),
html[data-page-enter] .qfit-card:nth-child(2) { animation-delay: 40ms; }
html[data-page-enter] .main-card:nth-child(3),
html[data-page-enter] .qfit-card:nth-child(3) { animation-delay: 80ms; }
html[data-page-enter] .main-card:nth-child(4),
html[data-page-enter] .qfit-card:nth-child(4) { animation-delay: 120ms; }
@media (prefers-reduced-motion: reduce) {
    html[data-page-enter] .main-card,
    html[data-page-enter] .qfit-card { animation: none; }
}

/* ── 25b. Scroll progress indicator (ported from PacklistPRO parity) ───
   Thin accent-colored bar pinned to the top of the viewport that fills
   left-to-right as the user scrolls a long page. Driven by site.js
   initScrollProgress(); CSS only handles the visual. Auto-hides on very
   short pages where the indicator would always sit at 100%. */
.qfit-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--color-accent);
    z-index: 10001;
    pointer-events: none;
    transition: width 0.06s linear, opacity 0.2s ease;
    opacity: 0;
    border-bottom-right-radius: 2px;
}
.qfit-scroll-progress.visible { opacity: 1; }
@media print { .qfit-scroll-progress { display: none !important; } }

/* ── 26. Site-specific utility classes (extras not in shared) ── */
.nowrap { white-space: nowrap; }
.font-bold { font-weight: var(--font-weight-bold); }
.font-italic { font-style: italic; }

/* Category color table used by QuickColors.aspx — each row is a single colored
   cell whose background is the user's chosen GroupColor (validated server-side). */
.qfit-colors-table {
    width: 100%;
    border-collapse: collapse;
}
.qfit-colors-table td {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
}
.qfit-colors-table a {
    color: #fff;
    text-decoration: none;
    font-weight: var(--font-weight-bold);
}

/* QuickStart "Show / Toggle / Hidden" explainer table — capped narrower than
   the page so the short rows don't span the full width on desktop. */
.data-table-narrow { max-width: 480px; }

/* About2 page-specific helpers (migrated from inline <style>). */
.about-hero    { border-radius: 16px; }
.about-kicker  { letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem; }
.about-list li { margin-bottom: 0.35rem; }
.about-muted   { color: rgba(0,0,0,0.65); }

/* EditMethod UpdatePanel wrapper utility — prevents the auto-generated <div>
   from inheriting left indentation rules elsewhere on the page. */
.qfit-up-noindent {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
    white-space: normal !important;
}

/* Setup-page table used by QuickChecklistSetup. */
.qcs-setup-table {
    width: 100%;
    border-collapse: collapse;
}
.qcs-setup-table td {
    padding: 0.25rem 0.5rem;
    vertical-align: top; /* align checkbox column with the top of multi-line text */
}
.qcs-setup-table input[type="checkbox"] { margin-top: 3px; }

/* HeartRateZones tables — replaces legacy cellpadding="5" cellspacing="0". */
.hrz-table { border-collapse: collapse; }
.hrz-table td { padding: 5px; }
.hrz-table-compact { border-collapse: collapse; }
.hrz-table-compact td { padding: 0; }

/* Utility (canonical) — was previously only defined in styles_universal.css. */
.u-mx-auto { margin-left: auto; margin-right: auto; }

/* ── 27. Focus visible (dark-mode override only — base in shared) ── */
/* Inputs inside dark cards / nav need a higher-contrast focus ring. */
[data-theme="dark"] :focus-visible {
    outline-color: var(--color-nav-highlight);
}


/* ── 29. qFIT-specific: hierarchical checklist styling ──────────
   The qFIT domain hierarchy is:
     Category  →  Target  →  Method
   Each level needs to look visually distinct so the structure is obvious.
   ─────────────────────────────────────────────────────────────── */

.qfit-checklist { margin-top: 0.5rem; }

/* Category header (top level, dark) */
.qfit-category {
    margin-bottom: 0.75rem;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}
.qfit-category-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: var(--color-text);
    color: #fff;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    cursor: pointer;
    user-select: none;
}
.qfit-category-header:hover { filter: brightness(0.92); }
.qfit-expand-icon {
    display: inline-block;
    transition: transform 0.15s;
    font-style: normal;
    font-size: 0.7rem;
    flex-shrink: 0;
}
.qfit-category[aria-expanded="true"] > .qfit-category-header > .qfit-expand-icon { transform: rotate(90deg); }

/* Target header (mid level, gray) */
.qfit-target {
    background: #f3f4f6;
    border-bottom: 1px solid var(--color-border);
}
.qfit-target-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem 0.5rem 1.5rem;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}
[data-theme="dark"] .qfit-target { background: #1a1a1a; }
.qfit-target[aria-expanded="true"] > .qfit-target-header > .qfit-expand-icon { transform: rotate(90deg); }

/* Method row (leaf, blue) */
.qfit-method-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem 0.5rem 2.5rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-info);
    background: var(--color-bg-card);
}
.qfit-method-row:last-child { border-bottom: none; }
.qfit-method-row:hover { background: var(--color-info-bg); }
.qfit-method-name {
    flex: 1;
    font-weight: var(--font-weight-medium);
    word-break: break-word;
}
.qfit-method-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Importance — high (yellow checkbox), low (gray name) */
.importance-high input[type="checkbox"].qfit-cb {
    appearance: none;
    -webkit-appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    background-color: #ffff00;
    border: 1px solid #000;
    border-radius: 2px;
    cursor: pointer;
}
.importance-high input[type="checkbox"].qfit-cb:checked {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5 L6.5 11.5 L12.5 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
.importance-low .qfit-method-name { color: var(--color-text-light); }

/* Strikethrough for completed methods */
.method-done .qfit-method-name {
    text-decoration: line-through;
    color: var(--color-text-muted);
}

/* "Template/seed default" field marker on admin-facing Edit pages. These fields
   write to the BASE qFIT* tables (template/seed defaults that get cloned into new
   accounts), not the user's customizations. The pink tint is a visual cue for the
   admin user — only admins see this panel; standard users have CssClass="textinput"
   without this modifier, so it has no effect for them.

   Replaces inline BackColor="Pink" on EditCategory / EditTarget / EditMethod. */
.field-template,
input.field-template,
textarea.field-template,
span.field-template,   /* <asp:CheckBox> wrapper span */
.field-template > input,
.field-template > label {
    background-color: #fdecef; /* soft pink that works in both light + dark theme */
}
[data-theme="dark"] .field-template,
[data-theme="dark"] input.field-template,
[data-theme="dark"] textarea.field-template,
[data-theme="dark"] span.field-template,
[data-theme="dark"] .field-template > input,
[data-theme="dark"] .field-template > label {
    background-color: #4a1d2a;
    color: #fbd9e1;
}

/* ── 30b. Auth pages (Login / ForgotLogin / AccountCreated / Join wizard) ─
   Shared layout: centered card on a roomy page background. Avoids per-page
   inline <style> blocks for the same three layout rules.
   ───────────────────────────────────────────────────────────── */

/* Login.aspx layout — Tips card sits OUTSIDE the login card, above it, with the
   ⓘ trigger right-aligned to the card's right edge. Mirrors PacklistPRO's pattern. */
.login-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem 3rem;
}
.login-container {
    width: 100%;
    max-width: 420px;
    /* A bit more elevation than a standard card so the login form feels like the page focus */
    box-shadow: var(--shadow-lg) !important;
    padding: 1.75rem !important;
    border-radius: var(--border-radius-lg) !important;
}
.login-tips-area {
    width: 100%;
    max-width: 420px;
}
.login-tips-trigger-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.25rem;
}
.login-tips-trigger-row .tips-trigger {
    font-size: 1.25rem;
}
.login-tips-area .tip-card { margin-bottom: 0.75rem; }
/* Bold the form labels on Login per UX preference. Scoped so other pages aren't affected. */
.login-page .input-label { font-weight: 700; }
.login-ip-display {
    font-size: 0.7rem;
    text-align: center;
    margin: 0.25rem 0 0;
    color: var(--color-text-light, var(--color-text-muted));
}
.login-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 0.3rem;
    font-size: var(--font-size-sm);
}
.login-links .sep { color: var(--color-text-light); user-select: none; }

.auth-page {
    display: flex;
    justify-content: center;
    padding: 1rem;
}
.auth-card {
    width: 100%;
    max-width: 480px;
    padding: 1.5rem;
}
.auth-card.auth-card-narrow { max-width: 440px; }
.auth-card.auth-card-wide   { max-width: 560px; }
.auth-brand {
    text-align: center;
    margin-bottom: 1.25rem;
    font-weight: 900;
    font-size: 2.5rem;
    letter-spacing: 0.02em;
}
.auth-brand .q { color: var(--color-nav-highlight); }
.auth-ip {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0.75rem 0 0;
    text-align: center;
}
.auth-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.4rem;
    margin-top: 1rem;
    font-size: var(--font-size-sm);
}
.auth-links .sep { color: var(--color-text-light); user-select: none; }
/* Password visibility toggle — mirrors PacklistPRO's pattern. */
.password-wrapper              { position: relative; display: flex; align-items: center; }
.password-wrapper .textbox     { flex: 1; padding-right: 2.5rem; }
.password-toggle {
    position: absolute;
    right: 0.4rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    padding: 0.3rem 0.45rem;
    line-height: 1;
    min-height: 0;
    min-width: 0;
    border-radius: var(--border-radius-sm);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}
.password-toggle:hover         { color: var(--color-text); background: var(--color-primary-light); }
.password-toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); color: var(--color-text); }

/* Caps Lock warning — auto-injected by site.js initCapsLockWarning() under
   any focused password input when Caps Lock is detected during a keystroke. */
.caps-lock-warning {
    display: block;
    margin-top: 0.25rem;
    font-size: var(--font-size-sm);
    color: var(--color-warning);
    font-weight: var(--font-weight-medium);
}
.caps-lock-warning[hidden] { display: none; }

/* Wizard step indicator: "Step 3 of 7" muted-and-small. */
.wizard-step {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-align: center;
    margin: 0 0 0.25rem;
}
.wizard-back-link {
    text-align: center;
    margin-top: 0.75rem;
}

/* Help page numbered-steps list — light spacing, bold lead. */
.help-steps {
    margin: 0;
    padding-left: 1.5rem;
}
.help-steps > li { margin: 0 0 0.875rem 0; line-height: 1.5; }
.help-steps strong { display: inline-block; margin-bottom: 0.15rem; }

/* Day-nav: prev/next arrows on detail pages, centered around a date label. */
.qfit-daynav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}
.qfit-daynav .daynav-arrow {
    font-size: 1.75rem;
    line-height: 1;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-sm);
}
.qfit-daynav .daynav-arrow:hover {
    background-color: var(--color-primary-light);
    text-decoration: none;
}

/* ── 30. Error page (used by Error.aspx) ─────────────────────── */
.error-body { background: var(--color-bg); }
.error-card { max-width: 720px; margin: 2rem auto; }
.error-cid {
    font-size: 1rem;
    user-select: all;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: var(--color-bg);
    padding: 0.125rem 0.375rem;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-border);
}
.error-detail-pre {
    background: #1e1e1e;
    color: #e8eaed;
    padding: 0.75rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.8125rem;
    overflow: auto;
    max-height: 400px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── 31. Search bars / filter toolbars ─────────────────────────
   Standardized layout for "🔍 search box + clear + button" combos.
   Use:  <div class="search-bar">
            <div class="input-clearable">
                <input class="textbox" placeholder="Search..." />
                <button class="input-clear-btn">×</button>
            </div>
            <button class="button button-sm">🔍</button>
         </div>
   ───────────────────────────────────────────────────────────── */
.search-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.search-bar .input-clearable {
    flex: 1 1 200px;
    min-width: 0;
}
.search-bar .input-clearable .textbox { width: 100%; }
.search-bar .button { flex-shrink: 0; }

/* ── 32. Section header — heading row with right-side actions ─
   Use:  <div class="section-header">
            <h2 class="heading">Categories</h2>
            <div class="section-actions">
              <button class="button button-save">＋ Add</button>
            </div>
         </div>
   ───────────────────────────────────────────────────────────── */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 0.5rem;
}
.section-header .heading,
.section-header .largeheading,
.section-header .page-title { margin: 0; }
.section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* ── 33. Empty-state message ───────────────────────────────────
   Shown when no records / no results / nothing yet. Soft styling
   so it doesn't look like an error. Pages can put icon + CTA inside.
   ───────────────────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--color-text-muted);
    border: 1px dashed var(--color-border);
    border-radius: var(--border-radius);
    background-color: var(--color-bg-card);
    margin: 1rem 0;
}
.empty-state-icon {
    font-size: 2rem;
    line-height: 1;
    color: var(--color-text-light);
    margin-bottom: 0.5rem;
    display: block;
}
.empty-state-title {
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0 0 0.25rem;
}
.empty-state .button { margin-top: 0.75rem; }

/* ── 34. Pills / badges / tags ─────────────────────────────────
   Small inline pill labels for counts, statuses, tags.
   ───────────────────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
    background-color: var(--color-text-muted);
    color: #fff;
    border-radius: 999px;
    white-space: nowrap;
    vertical-align: middle;
}
.badge-success  { background-color: var(--color-success); }
.badge-danger   { background-color: var(--color-danger); }
.badge-warning  { background-color: var(--color-warning); color: #fff; }
.badge-info     { background-color: var(--color-info); }
.badge-cyan     { background-color: var(--color-nav-highlight); color: #003a44; }

/* ── 35. Inline field validation message ───────────────────────
   Use <span class="field-error">message</span> right after an input.
   Pairs with the existing .field-validation-error from ASP.NET validators.
   ───────────────────────────────────────────────────────────── */
.field-error,
.field-hint {
    display: block;
    font-size: var(--font-size-sm);
    margin-top: 0.2rem;
}
.field-error { color: var(--color-danger); }
.field-hint  { color: var(--color-text-muted); }

/* ── 36. Confirm modal (generic, used by data-confirm buttons) ── */
.confirm-modal .modal-title { color: var(--color-danger); }
.confirm-modal p { margin: 0 0 0.75rem; }

/* ── 37. Floating action button (FAB) — used for "＋ Add" on long lists ──
   Anchored bottom-right above the back-to-top button.
   ───────────────────────────────────────────────────────────── */
.qfit-fab {
    position: fixed;
    right: 1rem;
    bottom: 4rem;
    z-index: 1499;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background-color: var(--color-save-btn);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-md);
}
.qfit-fab:hover { background-color: var(--color-save-btn-hover); }

/* ── 38. Required-fields legend (above a long form) ───────────── */
.required-legend {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0 0 0.5rem;
}
.required-legend .required-star { color: var(--color-danger); font-weight: var(--font-weight-bold); }

/* ── 39. Two-column form helper ────────────────────────────────
   Mobile: stacked. Desktop ≥ 768px: 2 columns inside a .form-grid.
   ───────────────────────────────────────────────────────────── */
.form-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .form-grid { grid-template-columns: 1fr 1fr; }
    .form-grid .span-2 { grid-column: span 2; }
}

/* ── 40. Dark-mode rules for legacy color classes ──────────────
   The styles_universal.css color classes (.green/.red/.cyan/.yellow etc.)
   hard-code light backgrounds. Override the most common offenders so
   dark mode doesn't render an unreadable white-on-white surface.
   ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .whitediv,
[data-theme="dark"] .white {
    background-color: var(--color-bg-card);
    color: var(--color-text);
}
[data-theme="dark"] .blacktext { color: var(--color-text); }
[data-theme="dark"] .graytext  { color: var(--color-text-muted); }
[data-theme="dark"] .qfit-card {
    background-color: var(--color-bg-card);
    color: var(--color-text);
    border-color: var(--color-border);
}
[data-theme="dark"] .qfit-card--subtle { background-color: #161616; }

/* ── 41. Print styles (so emailed-PDF style printouts look clean) ── */
@media print {
    .site-nav,
    .site-footer,
    .banner-offline,
    .tips-row,
    .tips-panel,
    .qfit-back-to-top,
    .qfit-fab { display: none !important; }
    body { background: #fff; color: #000; }
    .card, .qfit-card { box-shadow: none; border-color: #ccc; }
    a { color: #000; text-decoration: underline; }
}

/* ── Donate page ───────────────────────────────────────────────
   Payment-method row: label/link on the left, "Open" button on the right.
   ───────────────────────────────────────────────────────────── */
.donate-method {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}
.donate-method-body { flex: 1 1 220px; min-width: 0; word-break: break-word; }
.donate-method .button { flex: 0 0 auto; }

/* ── Invite page ───────────────────────────────────────────────
   QR card image + the "share link" row with a copy button.
   ───────────────────────────────────────────────────────────── */
.invite-qr {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0.5rem auto 0;
    border-radius: 8px;
}
.invite-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
}
.invite-link-row .textbox { flex: 1 1 220px; }
.invite-link-row .button { flex: 0 0 auto; }

/* ── 42. Reduced-motion accessibility ──────────────────────────
   Honor prefers-reduced-motion so users with vestibular sensitivity
   don't see expand/collapse animations or smooth scroll.
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   43. MIGRATED FROM styles_universal.css (May 2026 audit consolidation)
   ──────────────────────────────────────────────────────────────────────
   Classes that are still referenced from active markup but were previously
   only present in the legacy stylesheet. Now in the canonical sheet so
   styles_universal.css can be retired in a future pass.
   ════════════════════════════════════════════════════════════════════════ */

/* Page wrappers */
.page-shell { min-height: 100vh; }
.qfit-modern { background-color: var(--color-bg-card); }
.qfit-page { padding: 6px 4px; }
@media (min-width: 768px) { .qfit-page { padding: 10px 8px; } }

/* Detail/edit page cards */
.qfit-card {
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    border-radius: var(--border-radius);
    padding: var(--card-padding);
    margin: 0.5rem 0;
    box-shadow: var(--shadow-sm);
}
.qfit-card--subtle { background: rgba(0,0,0,0.03); }

/* Detail-page action bars */
.qfit-actionbar {
    margin: 0.75rem auto;
    max-width: 900px;
}
.qfit-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
}

/* Dashboard / ToDo cards layout */
.qfit-page .dash-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.5rem;
}
.qfit-page .dash-wrap .dash-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.125rem 0 0.5rem 0;
}
.qfit-page .dash-wrap .dash-sub {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.qfit-page .dash-wrap .cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 900px) {
    .qfit-page .dash-wrap .cards { grid-template-columns: 1fr 1fr; }
}
.qfit-page .dash-wrap .card {
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    background-color: var(--color-bg-card);
    padding: 0.625rem;
}
.qfit-page .dash-wrap .card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
}
.qfit-page .dash-wrap .card-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}
.qfit-page .dash-wrap .card-range {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}
.qfit-page .dash-wrap .two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
@media (max-width: 520px) {
    .qfit-page .dash-wrap .two-col { grid-template-columns: 1fr; }
}
.qfit-page .dash-wrap .metrics {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.qfit-page .dash-wrap .metric {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.625rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--color-border);
}
.qfit-page .dash-wrap .metric:last-child { border-bottom: none; }
.qfit-page .dash-wrap .value {
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}
.qfit-page .dash-wrap .priority-label {
    margin-top: 0.375rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.qfit-page .dash-wrap .todo-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}
.qfit-page .dash-wrap .todo-ddl { min-width: 190px; }
@media (max-width: 520px) {
    .qfit-page .dash-wrap .todo-ddl { min-width: 150px; flex: 1 1 150px; }
}
.qfit-page .dash-wrap .todo-refresh { min-width: 120px; }
.qfit-page .dash-wrap .todo-empty {
    padding: 0.625rem 0;
    color: var(--color-text-muted);
    font-style: italic;
}
.qfit-page .dash-wrap .todo-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.qfit-page .dash-wrap .todo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    text-decoration: none;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: 0.625rem;
    background-color: rgba(0,0,0,0.02);
}
.qfit-page .dash-wrap .todo-row:hover {
    background-color: var(--color-primary-light);
}
.qfit-page .dash-wrap .todo-left {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1 1 auto;
}
.qfit-page .dash-wrap .todo-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qfit-page .dash-wrap .todo-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.qfit-page .dash-wrap .todo-progress {
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    white-space: nowrap;
}
.qfit-page .dash-wrap .todo-chevron {
    font-size: 1.25rem;
    line-height: 1;
    color: var(--color-accent);
    margin-left: 0.625rem;
}
.qfit-page .dash-wrap .pill {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border: 1px solid var(--color-border);
}
.qfit-page .dash-wrap .pill-type   { background-color: #e5e7eb; color: #111; }
.qfit-page .dash-wrap .pill-type-g { background-color: rgba(0,176,240,0.15); border-color: rgba(0,176,240,0.45); }
.qfit-page .dash-wrap .pill-type-i { background-color: rgba(0,170,0,0.15);   border-color: rgba(0,170,0,0.45); }
.qfit-page .dash-wrap .pill-type-e { background-color: rgba(255,140,0,0.18); border-color: rgba(255,140,0,0.55); }
.qfit-page .dash-wrap .pill-hi {
    background-color: rgba(255,0,255,0.18);
    border-color: rgba(255,0,255,0.55);
    color: var(--color-text);
}
.qfit-page .dash-wrap .error {
    margin-top: 0.625rem;
    color: var(--color-danger);
    font-weight: var(--font-weight-bold);
}

/* Charts page layout */
.dash {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.5rem 0.25rem;
}
.dash .controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem;
}
.dash .control {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 240px;
}
.dash .control label { font-weight: var(--font-weight-bold); }
.dash .summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.dash .summary-meta {
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-sm);
    opacity: 0.85;
}
.dash .summary-table {
    width: 100%;
    border-collapse: collapse;
}
.dash .summary-table th,
.dash .summary-table td {
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid var(--color-border);
}
.dash .summary-table th {
    font-weight: var(--font-weight-bold);
    text-align: left;
    background: rgba(0,0,0,0.03);
}

/* Search-input wrapper + clear button (legacy + canonical) */
.search-inputwrap {
    position: relative;
    width: 98%;
    max-width: 520px;
}
.search-inputwrap .textbox,
.search-inputwrap input[type="text"],
.search-inputwrap input[type="search"],
.search-inputwrap textarea {
    width: 100%;
    box-sizing: border-box;
    padding-right: 42px;
}
.search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    padding: 0;
    line-height: 1;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0.85;
}
.search-clear:hover { opacity: 1; }
.qe-search { max-width: 98%; }

/* Larger checkboxes / radio lists */
.bigcheckbox input[type="checkbox"] {
    width: 22px;
    height: 22px;
    vertical-align: middle;
}
.bigcheckbox label {
    margin-left: 0.375rem;
    vertical-align: middle;
}
.rbl input[type="radio"] {
    transform: scale(1.2);
    margin-right: 0.375rem;
}
.rbl label { margin-right: 0.875rem; }

/* Cookie/Test helper */
.ct-wrap { max-width: 900px; margin: 0 auto; padding: 0.625rem; }
.ct-card {
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    border-radius: var(--border-radius-lg);
    padding: 0.875rem;
    margin: 0.625rem 0;
    box-shadow: var(--shadow-sm);
}
.ct-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin-bottom: 0.5rem; }
.ct-small { font-size: var(--font-size-sm); opacity: 0.85; }
.ct-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    white-space: pre-wrap;
}
.ct-btn { margin-right: 0.5rem; }

/* Utility classes (margins/widths/spacing) used in cross-cutting markup */
.u-bg-white-50 { background-color: rgba(255,255,255,0.5); }
.u-h-25 { height: 25px; }
.u-h-32 { height: 32px; }
.u-ml-80 { margin-left: 80px; }
.u-mx-auto { margin-left: auto; margin-right: auto; }
.u-p-1 { padding: 1px; }
.u-pos-rel-top-6 { position: relative; top: 6px; }
.u-text-left { text-align: left; }
.u-text-left-h-18 { text-align: left; height: 18px; }
.u-text-left-va-top { text-align: left; vertical-align: top; }
.u-w-97 { width: 97%; }
.u-w-99 { width: 99%; }
.u-w-100 { width: 100%; }
.u-w-150 { width: 150px; }
.u-mt-8 { margin-top: 8px; }
.u-spacer-32-1 { width: 32px; height: 1px; }
.u-spacer-32-10 { width: 32px; height: 10px; }

/* Recreated inline-style classes (extracted from old markup at audit time) */
.inl-79a56a10, .inl-a9efa544 {
    text-align: right;
    white-space: nowrap;
    width: 70px;
}
.inl-93e2d771 { padding: 0; }
.inl-7006b2a9 {
    white-space: nowrap;
    vertical-align: top;
    padding-right: 12px;
}
.inl-61e1dd05 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 0;
}
.inl-9374e842 {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.inl-b305c5e0 { font-weight: bold; text-decoration: underline; }
.inl-fd386784 { width: 98%; max-width: 360px; }
.inl-3ae88286, .inl-ae0fbc9f, .inl-3392bdcc,
.inl-18eb75df, .inl-5feeda1d, .inl-4568b5b2 {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    text-align: center;
    white-space: nowrap;
    min-width: 120px;
}
.inl-0483a0a6, .inl-1b969693, .inl-74463b68,
.inl-95e066b8, .inl-8fdc107c, .inl-956d9d1e { width: 10px; }
.inl-79b1dc55, .inl-0483a0a6 { background: linear-gradient(90deg, #404040, #808080 100%); }
.inl-bd40b033, .inl-1b969693 { background: linear-gradient(90deg, #800000, #ff0000 100%); }
.inl-fb5adf2f, .inl-74463b68 { background: linear-gradient(90deg, #8b4000, #ffa500 100%); }
.inl-33b65a98, .inl-95e066b8 { background: linear-gradient(90deg, #AAAA00, #dddd00 100%); }
.inl-158a73c9, .inl-8fdc107c { background: linear-gradient(90deg, #008000, #00cc00 100%); }
.inl-d7cd746b, .inl-956d9d1e { background: linear-gradient(90deg, #000080, #0000ff 100%); }

/* Legacy button color helper kept for older walkthrough markup */
.button.blue1, .blue1.button {
    background-color: #00B0F0;
    border-color: #00B0F0;
    color: #fff;
}

/* Legacy color-text helpers — kept because HeartRateZones and detail pages
   still rely on them. New code should use --color-text / --color-text-muted
   or a semantic class like .label / .heading. */
.whitetext { color: #ffffff; }
.blacktext { color: #000000; }
.graytext  { color: #808080; }
.blue1text { color: #00B0F0; }
[data-theme="dark"] .blacktext { color: var(--color-text); }

/* Charts.aspx chart-container wrapper */
.chart-container {
    width: 100%;
    max-width: 100%;
    height: auto;
    overflow-x: auto;
}

/* Legacy fileupload styling — used by ContactUs.aspx for the multi-file picker */
.fileupload {
    height: 40px;
    font-size: var(--font-size-base);
    color: var(--color-text);
    display: inline-block;
    padding: 0.1875rem;
    border-radius: var(--btn-radius);
    box-sizing: border-box;
    text-decoration: none;
    font-weight: var(--font-weight-bold);
    -webkit-appearance: none;
    appearance: none;
}

/* ════════════════════════════════════════════════════════════════════════
   44. POLISH PASS — additive refinements
   ──────────────────────────────────────────────────────────────────────
   Added in the formatting/UI polish pass. Tightens spacing rhythm, gives
   inputs/cards subtle elevation, and adds utility classes that make the
   br/br-heavy legacy markup look less cramped without touching that markup.
   ════════════════════════════════════════════════════════════════════════ */

/* Card: subtle elevation on hover for clickable cards; smooth transitions. */
.card {
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.card.is-hoverable:hover,
a.card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-focus);
    text-decoration: none;
}

/* Custom select chevron — gives every select.textbox a consistent
   browser-independent dropdown arrow without disabling native rendering. */
select.textbox {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
        linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 13px) calc(50% - 3px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2rem;
    cursor: pointer;
}
[data-theme="dark"] select.textbox {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--color-text) 50%),
        linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
}
select.textbox:disabled { cursor: not-allowed; }

/* Vertical-rhythm helper. Old markup has lots of standalone <br /> tags
   that occasionally land where a div boundary would be cleaner. .stack
   adds consistent vertical gaps between direct children without needing
   to touch the surrounding markup. */
.stack > * + * { margin-top: 0.75rem; }
.stack-sm > * + * { margin-top: 0.375rem; }
.stack-lg > * + * { margin-top: 1.25rem; }

/* Cluster: horizontal flow of buttons / links with consistent spacing. */
.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Tighter label/control spacing inside legacy forms.
   When a label is immediately followed by an input/textarea/select/button,
   collapse the inter-element <br /> to a small visible gap. */
.card .label + br + .textbox,
.card .label + br + select.textbox,
.card .label + br + textarea.textbox,
.qfit-card .label + br + .textbox,
.qfit-card .label + br + select.textbox,
.qfit-card .label + br + textarea.textbox {
    margin-top: 0.125rem;
}

/* Cap textbox max-width on desktop so 100%-width inputs in long edit forms
   don't span an absurd line length. Mobile stays 100% width. */
@media (min-width: 768px) {
    .qfit-card .textbox:not(.textbox-full),
    .qfit-card textarea.textbox:not(.textbox-full),
    .qfit-card select.textbox:not(.textbox-full) {
        max-width: 640px;
    }
}

/* Inputs: smoother focus glow that respects dark mode. */
[data-theme="dark"] .textbox:focus,
[data-theme="dark"] select.textbox:focus,
[data-theme="dark"] textarea.textbox:focus {
    box-shadow: 0 0 0 3px rgba(33,150,243,0.30);
}

/* Buttons: gentler press feedback and clearer hover. */
.button {
    transition:
        background-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform 0.08s ease,
        opacity var(--transition-fast);
}
.button:hover { box-shadow: var(--shadow-md); }
.button:active { transform: translateY(1px); box-shadow: var(--shadow-sm); }
/* Save-button gets a slightly brighter focus ring (lime-green theme) so it
   stands out visually as the primary action. */
.button.save:focus { outline-color: var(--color-save-btn); }

/* Form-actions: pad the top so it visually separates from the form body. */
.form-actions {
    padding-top: 0.5rem;
    border-top: 1px solid transparent;  /* placeholder so dark mode can add a subtle divider */
}
[data-theme="dark"] .card .form-actions {
    border-top-color: rgba(255,255,255,0.05);
    margin-top: 0.75rem;
}


/* Page header: align tips-trigger button vertically with the page title. */
.page-header .tips-trigger {
    margin-top: 0.25rem;
}

/* Tighter heading rhythm inside cards — multiple consecutive p.heading
   blocks were spaced too widely. */
.card .heading + p,
.card .largeheading + p,
.qfit-card .heading + p {
    margin-top: 0.125rem;
}

/* Small visual treat: subtly tint hyperlinks-as-text-buttons on hover so
   they feel pressable. */
.link-button,
a.link-button {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-link);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.link-button:hover {
    background-color: var(--color-primary-light);
    color: var(--color-link-hover);
    text-decoration: none;
}

/* Subtle separator between sections inside a card */
.card hr.section-sep,
.qfit-card hr.section-sep {
    border: none;
    border-top: 1px dashed var(--color-border);
    margin: 1rem 0;
}

/* Mobile: edge-to-edge cards (saves horizontal space on tiny screens) */
@media (max-width: 480px) {
    .card { border-radius: 0; border-left: none; border-right: none; margin-left: -0.5rem; margin-right: -0.5rem; }
    .page-wrapper { padding: 0.5rem; }
}

/* Skip-to-content: canonical rule lives in §13 (line ~783). A regression copy
   that used `left: -9999px` was previously here — removed so the slide-down
   animation from the canonical rule isn't clobbered by the cascade. */

/* Animation utility: fade-in pages so initial paint isn't jarring after a
   navigation. Honours prefers-reduced-motion via the @media block in §42. */
.page-wrapper {
    animation: qfit-fade-in 0.18s ease-out;
}
@keyframes qfit-fade-in {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: none; }
}

/* Tight-spacing flag for compact admin tables / dense pages */
.compact .form-group { margin-bottom: 0.5rem; }
.compact .card { padding: 0.625rem; margin-bottom: 0.75rem; }

/* Anchor styling: ensure links inside cards always have visible underlines
   on hover for affordance, even when surrounded by text. */
.card a:not(.button):not(.link-button):hover { text-decoration: underline; }


/* Polish: subtle accent on inputs when value differs from default
   (data-dirty="true" can be set by JS for the optional filter-changed indicator) */
.textbox[data-dirty="true"],
select.textbox[data-dirty="true"] {
    border-color: var(--color-warning);
    background-color: rgba(229,81,0,0.04);
}

/* Polish: kbd-style code for keyboard shortcuts in tips/help */
kbd {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-bottom-width: 2px;
    border-radius: var(--border-radius-sm);
    line-height: 1;
    vertical-align: baseline;
}

/* Polish: improve `<code>` inline rendering inside content cards */
.card code,
.qfit-card code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875em;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    padding: 0.05rem 0.35rem;
    color: var(--color-text);
}

/* Polish: visual separator between the form body and the form-actions row
   inside cards (was just whitespace before). */
.card > .form-actions:last-child,
.qfit-card > .form-actions:last-child {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

/* ============================================================
   45. Contact-Us Status / Viewer / Changes page styles
   ============================================================
   Used by ContactUsStatus.aspx (and read-shared by Changes.aspx).
   The class names mirror PacklistPRO so the page logic ports
   verbatim, but the actual styling here is sourced from qFIT's
   CSS variables so it adapts to light + dark mode automatically. */

/* Status badges (Open/Resolved/Queued/etc.) — small pills.
   Colors are intentionally constant across themes so the same
   badge means the same thing regardless of theme. */
.cuv-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.4;
    vertical-align: middle;
}
.cuv-badge-new        { background: #5c6bc0; }   /* indigo */
.cuv-badge-queued     { background: #1976d2; }   /* blue */
.cuv-badge-future     { background: #6d4c41; }   /* brown */
.cuv-badge-resolved   { background: #2e7d32; }   /* green */
.cuv-badge-partial    { background: #f9a825; color: #000; }  /* amber */
.cuv-badge-rejected   { background: #9e9e9e; }   /* gray */
.cuv-badge-unresolved { background: #c62828; }   /* red */

/* Submissions table: same as .data-table but adds row-click highlight. */
.cuv-table { /* base styling inherited from .data-table */ }
.cuv-row { cursor: pointer; }
.cuv-row:hover td { background-color: var(--color-primary-light); }
.cuv-row.cuv-selected td {
    background-color: var(--color-primary-light);
    box-shadow: inset 3px 0 0 var(--color-accent);
}

/* Detail panel — info chips at top, sectioned content below. */
.cuv-readonly-info {
    display: block;
}
.cuv-info-item {
    display: inline-block;
    margin-right: 1.25rem;
    margin-bottom: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}
.cuv-info-item strong { color: var(--color-text); margin-right: 0.25rem; }

.cus-detail-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: -0.5rem;
}
.cus-detail-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    color: var(--color-text-muted);
    line-height: 1;
}
.cus-detail-close:hover { color: var(--color-text); }
.cus-section {
    margin: 1rem 0;
}
.cus-section-thin {
    margin: 0.5rem 0;
}
.cus-block {
    margin-top: 0.375rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background: var(--color-bg-input);
    color: var(--color-text);
}
.cus-pre {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
}
.cus-pre-inline {
    white-space: pre-wrap;
    word-break: break-word;
}
.cus-reply {
    margin-top: 0.375rem;
}
.cus-reply-date {
    margin-bottom: 0.5rem;
    font-style: italic;
}

/* Pager row used by Changes.aspx and ContactUsStatus.aspx. */
.log-pager,
.changes-pager-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem 0;
    flex-wrap: wrap;
}
.log-pager .button,
.changes-pager-row .button {
    flex: 0 0 auto;
}

/* Changes.aspx — app + feedback-type section headings. */
.changes-app-heading {
    margin: 1.25rem 0 0.5rem 0;
    font-size: var(--font-size-xl);
    color: var(--color-text);
}
.changes-app-divider {
    margin: 1.5rem 0;
}
.changes-type-heading {
    margin: 1rem 0 0.5rem 0;
    font-size: var(--font-size-lg);
    color: var(--color-text);
}

/* Utility: hidden via Bootstrap-style display-none class used by the
   detail-card show/hide JS. */
.d-none { display: none !important; }

/* Utility: column-width hint for date columns in admin tables. */
.col-w-date { width: 9rem; }

/* Utility: nowrap for short cells (date stamps, etc.). */
.nowrap { white-space: nowrap; }

/* Utility: tighter table-responsive wrapper for overflow-x scroll on
   narrow viewports. */

/* ============================================================
   46. Dark-mode top-up for legacy + page-inline patterns
   ============================================================
   The page-inline styles in Checklist.aspx, ul.aspx, etc. are
   already overridden in their respective files. This block
   covers patterns scattered across styles_universal.css that
   the existing dark-mode section (around line 1700) doesn't
   already cover. */

[data-theme="dark"] .badge.badge-danger,
[data-theme="dark"] .badge-danger {
    background-color: var(--color-danger);
    color: #fff;
}
/* Generic <code> highlight reads cleanly in both themes. */
code {
    background-color: rgba(0,0,0,0.06);
    padding: 0.1em 0.35em;
    border-radius: 3px;
    font-family: Consolas, "SF Mono", Monaco, "Cascadia Code", monospace;
    font-size: 0.92em;
}
[data-theme="dark"] code {
    background-color: rgba(255,255,255,0.10);
}
/* Bootstrap <kbd> rendered on Help.aspx — make sure it doesn't stay
   black-on-white in dark mode. */
[data-theme="dark"] kbd {
    background-color: var(--color-bg-input);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
/* Cards rendered via .stub-card (placeholder pages) inherit .card's
   variable-driven background, but a few legacy "coming soon" pages
   use Bootstrap's well/alert-info backgrounds that aren't themed. */
[data-theme="dark"] .stub-card {
    background-color: var(--color-bg-card);
    color: var(--color-text);
}

/* ============================================================
   47. VISUAL CONSISTENCY PASS — spacing, alignment, typography
   ============================================================
   Targeted CSS-only fixes for legacy markup patterns (label → <br> →
   input → <br>) so Edit pages, BulkEdit, and other older forms get
   consistent vertical rhythm, color-picker alignment, and card
   section spacing without touching .aspx markup.
   ============================================================ */

/* ── 47a. Form-field rhythm for label → br → input patterns ──────
   Edit pages (EditCategory, EditTarget, EditMethod) and BulkEdit
   use <label class="input-label"> followed by <br /> then an input.
   This selector chain creates proper form-group-style spacing so
   the <br /> acts as a small gap instead of a jarring line break. */
.input-label + br { line-height: 0.25; }
.input-label + br + .textbox,
.input-label + br + select.textbox,
.input-label + br + textarea.textbox {
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
}

/* When a textbox/dropdown is followed by <br /> then another label,
   add consistent spacing between form field groups. */
.textbox + br + .input-label,
select.textbox + br + .input-label {
    margin-top: 0.5rem;
    display: inline-block;
}

/* ── 47b. Checkbox + label rows (BulkEdit "Show:" section) ────────
   Pattern: <checkbox> <label class="input-label"> <br />
   Give each row consistent min-height and vertical alignment. */
.checkbox + .input-label {
    vertical-align: middle;
    line-height: 1.4;
}
input[type="checkbox"] + br {
    line-height: 0.5;
}

/* ── 47c. Color picker grid ──────────────────────────────────────
   EditCategory/EditTarget/EditMethod color swatch buttons have
   Width="20px" set inline by ASP.NET. These rules make them flow
   in a tight grid with consistent sizing and touch targets. */
.qfit-card input[type="submit"].button[style*="width:20px"],
.qfit-card input[type="submit"].button[style*="width: 20px"],
input[type="submit"].button[style*="width:20px"],
input[type="submit"].button[style*="width: 20px"] {
    width: 28px !important;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    margin: 2px 1px;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    vertical-align: middle;
    transition: border-color 0.15s, transform 0.1s;
}
input[type="submit"].button[style*="width:20px"]:hover,
input[type="submit"].button[style*="width: 20px"]:hover {
    border-color: var(--color-text);
    transform: scale(1.15);
    z-index: 1;
    position: relative;
}
input[type="submit"].button[style*="width:20px"]:focus-visible,
input[type="submit"].button[style*="width: 20px"]:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 1px;
}
@media (max-width: 480px) {
    input[type="submit"].button[style*="width:20px"],
    input[type="submit"].button[style*="width: 20px"] {
        width: 32px !important;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        margin: 2px;
    }
}

/* Full-width color preview button (the "currently selected" swatch) */
input[type="submit"].button[style*="width:97%"],
input[type="submit"].button[style*="width: 97%"] {
    height: 36px;
    border-radius: var(--border-radius-sm);
    margin: 0.25rem 0 0.5rem;
    border: 2px solid var(--color-border);
}

/* ── 47d. qfit-card form section spacing ─────────────────────────
   Inside qfit-card and qfit-card--subtle, add vertical rhythm
   between consecutive form fields that use <br /> separation. */
.qfit-card > br:first-child,
.qfit-card--subtle > br:first-child {
    display: none;
}
.qfit-card .input-label {
    margin-top: 0.625rem;
    display: inline-block;
}
.qfit-card .input-label:first-child,
.qfit-card .heading + .input-label,
.qfit-card .form-grid + .input-label,
.qfit-card--subtle .input-label:first-child {
    margin-top: 0;
}

/* ── 47e. panelAdditionalOptions rhythm ──────────────────────────
   The collapsed "Additional Options" panels use the same
   label → br → dropdown → br pattern. Give them card-like padding
   and consistent field gaps. */
.qfit-card--subtle .input-label + br + .textbox,
.qfit-card--subtle .input-label + br + select.textbox {
    margin-top: 0.25rem;
    margin-bottom: 0.625rem;
}

/* ── 47f. Heading inside cards — top spacing after first section ──
   When a .heading is not the first child inside a card, add a
   visual section break so multi-section cards read clearly. */
.qfit-card .heading:not(:first-child),
.main-card .heading:not(:first-child),
.card .heading:not(:first-child) {
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

/* ── 47g. Action bar bottom spacing ──────────────────────────────
   The .qfit-actionbar at the bottom of Edit pages needs a bit more
   visual breathing room above and below. */
.qfit-actionbar {
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}
.qfit-actions {
    padding: 0.625rem 0.875rem;
}

/* ── 47h. Inline-tip links beside labels — consistent alignment ──
   "(proper case)", "(tips)", "hmm?" links that sit next to labels.
   Base .inline-tip is in shared; this scopes alignment to the
   Edit-page label context only. */
.input-label + .inline-tip,
.input-label + * + .inline-tip {
    font-size: var(--font-size-sm);
    vertical-align: baseline;
}

/* ── 47i. Form-group improvements ─────────────────────────────────
   Pages using the modern .form-group pattern (User, Preferences,
   ContactUs) get a small rhythm tune-up so label→input spacing is
   identical everywhere. */
.form-group {
    margin-bottom: 0.875rem;
}
.form-group .input-label {
    margin-bottom: 0.25rem;
    display: block;
}
.form-group .note {
    margin-top: 0.25rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* ── 47j. Card-title section spacing ──────────────────────────────
   When multiple .card-title elements appear in a single card
   (e.g. Preferences "Display" then "Site behavior"), add a visible
   section break between them. */
.card-title:not(:first-child) {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

/* ── 47k. back-btn alignment ──────────────────────────────────────
   Ensure the ← Back link in page-header aligns to baseline with
   the page title across all pages. */
.back-btn {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    color: var(--color-link);
    white-space: nowrap;
    padding: 0.25rem 0.375rem;
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.back-btn:hover {
    background-color: var(--color-primary-light);
    color: var(--color-link-hover);
    text-decoration: none;
}

/* ── 47l. Tip card spacing refinement ─────────────────────────────
   Ensure tip cards have consistent bottom margin when visible
   so they don't crowd the content below. Scoped to page-wrapper
   so it doesn't conflict with the shared stylesheet's base .tip-card. */
.page-wrapper > .tip-card,
.page-wrapper > [data-dirty-watch] + .tip-card {
    margin-bottom: 1rem;
}

/* ── 47m. LinkButton toggle links ─────────────────────────────────
   "Show Additional Options" / "Hide Additional Options" and similar
   toggle links — give them some breathing room and make them look
   like inline action buttons. */
a.link[id*="link"] + br + .qfit-card,
a.link + br + .qfit-card {
    margin-top: 0.5rem;
}

/* ── 47n. Responsive form-actions alignment ───────────────────────
   Ensure form-actions with multiple buttons wrap cleanly on mobile
   and have consistent gap between buttons. */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* ── 47o. Alert panel spacing ─────────────────────────────────────
   The pnlMessage alert panels appear above content when visible.
   Scoped to page-wrapper so it doesn't conflict with shared's base. */
.page-wrapper .alert-panel[style*="display:inline"] {
    margin-bottom: 1rem;
}

/* ── 47p. Data table alignment in BulkEdit ────────────────────────
   BulkEdit's main data table mixes checkboxes, dropdowns, and text
   in tight columns. Ensure vertical alignment stays consistent. */
.data-table td input[type="checkbox"] {
    vertical-align: middle;
}
.data-table td select.textbox {
    margin: 0;
    height: auto;
    min-height: 34px;
    padding: 0.25rem 1.75rem 0.25rem 0.375rem;
    font-size: var(--font-size-sm);
}

/* ── 47q. Consistent hr styling ───────────────────────────────────
   Preferences and other pages use <hr class="hr" /> as a section
   divider inside cards. Normalize its appearance. */
hr.hr,
.card > hr,
.main-card > hr,
.qfit-card > hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 1rem 0;
}

/* ── 47r. Width attribute overrides ───────────────────────────────
   ASP.NET controls with Width="98%" or Width="100%" render as
   inline style. Ensure they respect max-width on desktop. */
@media (min-width: 768px) {
    .qfit-card input[type="text"][style*="width:98%"],
    .qfit-card input[type="text"][style*="width: 98%"],
    .qfit-card select[style*="width:98%"],
    .qfit-card select[style*="width: 98%"],
    input[type="text"].textbox[style*="width:98%"],
    select.textbox[style*="width:98%"] {
        max-width: 640px;
    }
}

/* ── 47s. Link toggle spacing ─────────────────────────────────────
   Toggle links like "Show Additional Options" need vertical space
   so they don't touch the element above/below. */
a.link[id*="linkShow"],
a.link[id*="linkHide"] {
    display: inline-block;
    margin: 0.5rem 0;
}

/* ============================================================
   48. MOBILE RESPONSIVENESS
   ============================================================
   Targeted fixes for tables, forms, fixed-width controls, and
   page-specific layouts that overflow or render poorly on narrow
   screens (≤ 480px phones, ≤ 768px tablets).
   ============================================================ */

/* ── 48a. Table-responsive wrapper ────────────────────────────────
   Wrap any table that might overflow in <div class="table-responsive">
   to get horizontal scroll on narrow viewports. Also auto-applied
   to summary tables and data tables below their natural width. */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── 48b. Data tables: horizontal scroll on narrow screens ─────── */
@media (max-width: 600px) {
    .data-table,
    .summary-table,
    .configure-templates-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .data-table th,
    .data-table td,
    .summary-table th,
    .summary-table td {
        white-space: nowrap;
    }
}

/* ── 48c. HeartRateZones — zone table responsive ──────────────────
   The zone table has 3 columns: color band (description) | spacer |
   HR value. On mobile, hide the spacer column, let the color band
   fill width, and stack the HR value below. */
@media (max-width: 600px) {
    .hrz-table {
        display: block;
    }
    .hrz-table tr {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 0.5rem;
    }
    /* Color-band description column: full width */
    .hrz-table td[class^="inl-79b1dc55"],
    .hrz-table td[class^="inl-bd40b033"],
    .hrz-table td[class^="inl-fb5adf2f"],
    .hrz-table td[class^="inl-33b65a98"],
    .hrz-table td[class^="inl-158a73c9"],
    .hrz-table td[class^="inl-d7cd746b"],
    .hrz-table td.inl-79b1dc55,
    .hrz-table td.inl-bd40b033,
    .hrz-table td.inl-fb5adf2f,
    .hrz-table td.inl-33b65a98,
    .hrz-table td.inl-158a73c9,
    .hrz-table td.inl-d7cd746b {
        flex: 1 1 100%;
        padding: 0.5rem 0.75rem;
        border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
    }
    /* Spacer columns: hide */
    .hrz-table td.inl-0483a0a6,
    .hrz-table td.inl-1b969693,
    .hrz-table td.inl-74463b68,
    .hrz-table td.inl-95e066b8,
    .hrz-table td.inl-8fdc107c,
    .hrz-table td.inl-956d9d1e {
        display: none;
    }
    /* HR value column: full width below the color band */
    .hrz-table td.inl-3ae88286,
    .hrz-table td.inl-ae0fbc9f,
    .hrz-table td.inl-3392bdcc,
    .hrz-table td.inl-18eb75df,
    .hrz-table td.inl-5feeda1d,
    .hrz-table td.inl-4568b5b2 {
        flex: 1 1 100%;
        min-width: 0;
        text-align: left;
        padding: 0.375rem 0.75rem;
        border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
        font-weight: var(--font-weight-bold);
    }
}

/* ── 48d. HeartRateZones — birthday form table responsive ─────────
   The birthday Month/Day/Year table uses spacer columns and side-by-
   side dropdowns. On mobile, stack them vertically. */
@media (max-width: 480px) {
    .hrz-table-compact {
        display: block;
        width: 100%;
    }
    .hrz-table-compact tr {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    .hrz-table-compact td {
        flex: 1 1 auto;
        min-width: 0;
    }
    /* Hide spacer cells */
    .hrz-table-compact td[width="10px"] {
        display: none;
    }
    .hrz-table-compact td .textbox {
        width: 100%;
    }
}

/* ── 48e. ASP.NET fixed-width controls — cap on mobile ────────────
   Server controls with Width="350px" (HeartRateZones dropdowns,
   etc.) render as inline style="width:350px". Override on mobile
   so they don't overflow the viewport. */
@media (max-width: 480px) {
    select[style*="width:350px"],
    select[style*="width: 350px"],
    input[style*="width:350px"],
    input[style*="width: 350px"],
    select[style*="width:300px"],
    select[style*="width: 300px"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ── 48f. QuickChecklistSetup — table responsive ──────────────────
   The setup table uses spacer <td width="5px"> columns between
   checkboxes and labels. On mobile, hide spacers and tighten. */
@media (max-width: 480px) {
    .qcs-setup-table td[width="5px"] {
        display: none;
    }
    .qcs-setup-table td {
        padding: 0.25rem 0.25rem;
    }
}


/* ── 48h. Charts — summary grid & tables: mobile-friendly layout ─ */
@media (max-width: 600px) {
    .dash .summary-grid {
        grid-template-columns: 1fr;
    }
    .dash .summary-table {
        display: table;
        overflow-x: visible;
    }
    .dash .summary-table th,
    .dash .summary-table td {
        white-space: normal;
        word-break: break-word;
    }
    .dash .summary-table th:first-child,
    .dash .summary-table td:first-child {
        width: auto;
    }
    .dash .summary-table th:nth-child(2),
    .dash .summary-table td:nth-child(2),
    .dash .summary-table th:nth-child(3),
    .dash .summary-table td:nth-child(3) {
        width: 70px;
        min-width: 60px;
        text-align: right;
    }
    .dash .control {
        min-width: 0;
        flex: 1 1 100%;
    }
    .dash .controls {
        gap: 0.5rem;
    }
    .chart-container img {
        max-width: 100%;
        height: auto;
    }
}

/* ── 48i. Buttons — prevent overflow on mobile ────────────────────
   Buttons with fixed widths or long text can overflow on phones.
   Cap width and allow text wrapping for wide buttons. */
@media (max-width: 480px) {
    .button {
        max-width: 100%;
    }
    /* "Apply Selected Templates" button has Width="98%" which is fine,
       but ensure long text doesn't create horizontal scroll. */
    input[type="submit"].button[style*="width:98%"],
    input[type="submit"].button[style*="width: 98%"] {
        width: 100% !important;
        white-space: normal;
        word-wrap: break-word;
    }
    .u-w-150 {
        width: auto;
        min-width: 120px;
    }
}

/* ── 48j. Form-actions — stack vertically on small phones ─────────
   When multiple buttons sit side-by-side, stack them on very narrow
   screens so they don't overflow or get clipped. */
@media (max-width: 380px) {
    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .form-actions .button {
        width: 100%;
        text-align: center;
    }
}

/* ── 48k. Page header — wrap gracefully on narrow screens ─────────
   The page-header has back-btn + title + tips trigger. On very
   narrow screens, the title can get squeezed between them. */
@media (max-width: 380px) {
    .page-header {
        gap: 0.375rem;
    }
    .page-title,
    .page-title-flush {
        font-size: 1.25rem;
        word-break: break-word;
    }
}

/* ── 48l. Checklist search — tighter min-widths on mobile ─────────
   The checklist search pack and options have min-widths that can
   overflow on phones under 360px wide. */
@media (max-width: 400px) {
    .chk-search-pack {
        min-width: 0 !important;
        flex: 1 1 100%;
    }
    .chk-searchbox {
        min-width: 0 !important;
    }
}

/* ── 48m. Dashboard cards — intermediate tablet breakpoint ─────────
   The dashboard grid jumps from 1-col to 2-col at 900px. Add an
   intermediate step so wider phones / small tablets see the grid. */
@media (min-width: 640px) and (max-width: 899px) {
    .qfit-page .dash-wrap .cards {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── 48n. Nav title — hide on very narrow screens ─────────────────
   The centered page title in the nav bar can get squeezed and
   create an odd layout on phones under 360px. */
@media (max-width: 360px) {
    .nav-title {
        display: none;
    }
}

/* ── 48o. Auth pages — tighter padding on small phones ────────────
   Login and Join pages have generous padding that wastes space on
   small screens. */
@media (max-width: 380px) {
    .login-container {
        padding: 1.25rem !important;
    }
    .auth-card {
        padding: 1rem;
    }
    .login-page {
        padding: 1rem 0.5rem 2rem;
    }
}

/* ── 48p. Action bar — full width on mobile ───────────────────────
   The floating action bar at the bottom of Edit pages has
   max-width: 900px which is fine for desktop, but on mobile it
   needs full-width buttons. */
@media (max-width: 600px) {
    .qfit-actionbar {
        margin-left: -0.25rem;
        margin-right: -0.25rem;
    }
    .qfit-actions {
        border-radius: var(--border-radius-sm);
    }
    .qfit-actions .button {
        flex: 1 1 auto;
        text-align: center;
        min-width: 0;
    }
}

/* ── 48q. Invite / Donate — tighter on narrow screens ─────────── */
@media (max-width: 480px) {
    .donate-method {
        gap: 0.5rem;
    }
    .donate-method-body {
        flex: 1 1 100%;
    }
    .invite-link-row .textbox {
        flex: 1 1 100%;
    }
}

/* ── 48r. HeartRateZones — largeheading size on mobile ────────────
   .largeheading is too big inside the color-band zones on phones. */
@media (max-width: 480px) {
    .hrz-table .largeheading {
        font-size: var(--font-size-lg);
    }
}