/* ============================================================================
   PIONEER — WHOOP-INSPIRED DESIGN SYSTEM
   A real design language, not a tweak:
   - True near-black base (premium, lets data + accents pop)
   - High-contrast typography: bright white primary, clearly-readable secondary
   - Oversized metric numbers + tiny uppercase letter-spaced labels
   - Minimal chrome: separation by spacing + subtle elevation, not boxes everywhere
   - Narrow accent palette (crimson + gold) used sparingly & meaningfully
   - A consistent type scale + 8pt spacing rhythm
   Loaded LAST so it sets the visual identity over the legacy CSS.
   ============================================================================ */

:root {
    /* ---- Surfaces (PIONEER navy — the brand identity) ---- */
    --pi-bg:        #0f1b30;   /* app background — navy blue */
    --pi-surface:   #16243f;   /* card surface (one step up navy) */
    --pi-surface-2: #1e304f;   /* raised / hover surface */
    --pi-line:      rgba(255,255,255,0.09);  /* hairline separators */
    --pi-line-soft: rgba(255,255,255,0.055);

    /* ---- Text (high contrast — bright, not grey) ---- */
    --pi-text:      #ffffff;   /* primary — pure white */
    --pi-text-2:    #d6dbe4;   /* secondary — bright, clearly readable */
    --pi-text-3:    #9aa3b2;   /* tertiary / captions (still legible) */

    /* ---- Accents (narrow, meaningful) ---- */
    --pi-crimson:   #c8a03c;   /* primary action / brand energy */
    --pi-gold:      #d4af37;   /* achievement / highlight */
    --pi-green:     #29d07e;   /* good / recovery */
    --pi-amber:     #f0b429;   /* caution */
    --pi-red:       #e2243f;   /* high strain / alert */

    /* ---- Radius + shadow ---- */
    --pi-r:    14px;
    --pi-r-sm: 10px;
    --pi-shadow: 0 6px 24px rgba(0,0,0,0.35);

    /* Remap legacy tokens so existing rules inherit the new identity */
    --navy: var(--pi-bg);
    --navy-dark: #0a1424;
    --navy-light: var(--pi-surface);
    --navy-medium: var(--pi-surface-2);
    --card-bg: var(--pi-surface);
    --input-bg: var(--pi-surface-2);
    --border: var(--pi-line);
    --text-primary: var(--pi-text);
    --text-secondary: var(--pi-text-2);
    --gray-light: var(--pi-text-2);
    --white: var(--pi-text);
    --crimson: var(--pi-crimson);
    --accent-red: var(--pi-crimson);
    --pioneer-navy: var(--pi-bg);
}

/* ---- Typography base ---- */
html, body {
    background: var(--pi-bg) !important;
    color: var(--pi-text) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
}
#app, .app-container, #page-content, .main-content,
.workout-page, .timetable-page, .dashboard, .nutrition-page,
.profile-page, .page-community {
    background: var(--pi-bg) !important;
    color: var(--pi-text) !important;
}

/* Headings — tight, confident */
h1, h2, h3, h4, .page-header h1, .page-title, .section-title {
    color: var(--pi-text) !important;
    letter-spacing: -0.02em !important;
    font-weight: 700 !important;
}
/* Page titles: ONE consistent treatment everywhere (Inter, fixed size, not the
   condensed Bebas display font which made each title a different visual size). */
.page-header h1, .page-header-title h1, .workout-page > .page-header h1,
.page-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    line-height: 1.15 !important;
    color: var(--pi-text) !important;
}

/* Section / stat labels — tiny, uppercase, spaced (WHOOP signature) */
.stat-label, .stat-lbl, .nut-macro-lbl, .section-eyebrow, .card-eyebrow,
.dc-right-label, .settings-section h3, .nut-benefit-label {
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    color: var(--pi-text-3) !important;
}

/* Secondary text — readable, not faint */
.page-subtitle, .section-desc, .prog-card-desc, .muted, .text-muted,
.pc-time, .comment-time, .dc-empty, .empty-state, p.subtitle,
.detail-row span, .info-label, .field-label, .help-text, .form-hint {
    color: var(--pi-text-2) !important;
}

/* SAFETY NET: lift faint white-alpha body text used by legacy rules so nothing
   reads as hard-to-see grey. Scoped to content text, not borders/backgrounds. */
.card, .prog-card, .stat-card, .settings-section, .nut-feat-card, .dashboard-card,
.timetable-card, .class-card, .panel, .info-card, .modal-body, .dc-main, #page-content {
    color: var(--pi-text) !important;
}
.dim, .text-dim, .text-faint { color: var(--pi-text-2) !important; }

/* Oversized metric numbers (WHOOP hero data) */
.stat-number, .stat-value, .dv-stat-num, .nut-macro-val, .points-total,
.metric-value, .big-number {
    color: var(--pi-text) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 1 !important;
}

/* ---- App header / nav (navy, slightly raised from the page) ---- */
.app-header, .top-nav, header.app-header {
    background: #16243f !important;   /* navy, matches card surface */
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--pi-line) !important;
    box-shadow: none !important;
}
.bottom-nav {
    background: #16243f !important;
    border-top: 1px solid var(--pi-line) !important;
}
.app-nav-item, .nav-item, .nav-label { color: var(--pi-text-2) !important; font-weight: 600 !important; }
.app-nav-item:hover, .nav-item:hover { color: var(--pi-text) !important; }
.app-nav-item.active, .nav-item.active,
.app-nav-item.active .nav-label, .nav-item.active .nav-label { color: var(--pi-text) !important; }
/* Active underline via inset shadow (NOT border) so the active tab keeps the same
   height/position as the others — avoids the 'HOME looks bordered' inconsistency. */
.app-nav-item.active {
    border: none !important;
    background: transparent !important;
    box-shadow: inset 0 -2px 0 var(--pi-crimson) !important;
}
.logo-text { color: var(--pi-text) !important; font-weight: 800 !important; letter-spacing: 0.02em; }
.logo-tagline { color: var(--pi-text-3) !important; }

/* ---- Cards: subtle elevation, hairline border, generous radius ---- */
.card, .prog-card, .assessment-card, .stat-card, .settings-section, .settings-list,
.nut-feat-card, .nut-card, .mrt-module-card, .pathway-card, .injury-card,
.achievement-card, .analytics-stat-card, .analytics-section, .connected-app,
.dashboard-card, .timetable-card, .class-card, .meal-card, .panel, .info-card,
.post-card, .pc, .dc-card, .result-card {
    background: var(--pi-surface) !important;
    border: 1px solid var(--pi-line) !important;
    border-radius: var(--pi-r) !important;
    box-shadow: var(--pi-shadow) !important;
}
.card:hover, .prog-card:hover, .class-card:hover, .nut-feat-card:hover {
    border-color: rgba(255,255,255,0.14) !important;
}

/* ---- Buttons: confident, restrained ---- */
.btn-primary, .prog-select-btn, .nut-feat-log-btn, .save-btn, .primary-btn,
.dc-ic-post-btn, button.btn-primary, .qa-save-btn {
    background: var(--pi-crimson) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 4px 14px rgba(200, 160, 60,0.28) !important;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease !important;
}
.btn-primary:hover, .prog-select-btn:hover, .nut-feat-log-btn:hover {
    background: #b8972e !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(200, 160, 60,0.4) !important;
}
/* No bubbles: secondary / ghost buttons are flat GOLD TEXT app-wide (user directive).
   Primary CTAs keep their gold fill; destructive .btn-danger keeps its red fill. */
.btn-secondary, .secondary-btn, .btn-ghost {
    background: transparent !important;
    color: var(--gold, #c8a03c) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}
.btn-secondary:hover, .secondary-btn:hover, .btn-ghost:hover {
    background: transparent !important;
    color: var(--gold-light, #d4af37) !important;
}

/* ---- Inputs: high-contrast, crisp ---- */
input, textarea, select, .form-control, .form-group input, .auth-form input,
.dc-ic-textarea, #dm-input-main, #usda-search-input, #nut-header-search-input,
.fmt-search-input, .search-input, .pc-comment-input {
    background: var(--pi-surface-2) !important;
    color: var(--pi-text) !important;
    -webkit-text-fill-color: var(--pi-text) !important;
    caret-color: var(--pi-crimson) !important;
    border: 1px solid var(--pi-line) !important;
    border-radius: 10px !important;
    font-size: 0.95rem !important;
}
input::placeholder, textarea::placeholder { color: var(--pi-text-3) !important; -webkit-text-fill-color: var(--pi-text-3) !important; }
input:focus, textarea:focus, select:focus {
    border-color: var(--pi-crimson) !important;
    box-shadow: 0 0 0 3px rgba(200, 160, 60,0.16) !important;
    outline: none !important;
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--pi-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--pi-surface-2) inset !important;
    box-shadow: 0 0 0 1000px var(--pi-surface-2) inset !important;
    caret-color: var(--pi-crimson);
}

/* ---- Chips / tags: pill, restrained ---- */
.prog-card-meta span, .nut-benefit-chip, .badge, .chip, .tag, .pill,
.nut-micro-chip, .injury-tag {
    background: rgba(255,255,255,0.06) !important;
    color: var(--pi-text-2) !important;
    border: 1px solid var(--pi-line) !important;
    border-radius: 999px !important;
    font-size: 0.64rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 4px 10px !important;
}
.prog-card-meta span:first-child, .nut-perf-badge {
    background: rgba(212,175,55,0.14) !important;
    color: var(--pi-gold) !important;
    border-color: rgba(212,175,55,0.3) !important;
}
.nut-recovery-badge { background: rgba(41,208,126,0.14) !important; color: var(--pi-green) !important; border:1px solid rgba(41,208,126,0.3) !important; }

/* ---- Pill tabs (nutrition / diary / pathway / admin) ---- */
.nut-main-tab, .dv-tab, .pathway-tab, .admin-tab, .pcs-tab {
    background: transparent !important;
    color: var(--pi-text-3) !important;
    border: 1px solid var(--pi-line) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}
.nut-main-tab.active, .dv-tab.active, .pathway-tab.active,
.admin-tab.active, .pcs-tab.active {
    background: var(--pi-surface-2) !important;
    color: var(--pi-text) !important;
    border-color: rgba(255,255,255,0.18) !important;
}

/* ---- Food-modal tabs: clean underline style (not boxed) ---- */
.food-modal-tabs { gap: 4px !important; border-bottom: 1px solid var(--pi-line) !important; }
.fmt-tab {
    background: transparent !important;
    color: var(--pi-text-3) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
    padding: 12px 8px !important;
}
.fmt-tab:hover:not(.active) { color: var(--pi-text) !important; }
.fmt-tab.active {
    background: transparent !important;
    color: var(--pi-gold) !important;
    border-bottom: 2px solid var(--pi-gold) !important;
}

/* ---- Modals ---- */
.modal, .modal-content, .modal-body, .modal-header, .assessment-modal-content,
.admin-modal-content {
    background: var(--pi-surface) !important;
    color: var(--pi-text) !important;
    border: 1px solid var(--pi-line) !important;
    border-radius: 16px !important;
}
.modal-overlay, .modal-backdrop { background: rgba(0,0,0,0.66) !important; backdrop-filter: blur(2px); }
.modal-header { border-bottom: 1px solid var(--pi-line) !important; }

/* ---- Admin modal header/body cleanup ----
   The admin modals set light-theme inline styles, but the dark surface override above
   left the title dark-on-dark and some inputs white-on-white. Fix deterministically with
   higher-specificity !important rules. Also move the close (x) to the top-left and give
   the heading a little breathing room. */
.admin-modal .admin-modal-header {
    background: var(--pi-surface) !important;
    border-bottom: 1px solid var(--pi-line) !important;
    justify-content: flex-start !important;
    gap: 0.75rem !important;
    padding-top: 1.6rem !important;
}
.admin-modal .admin-modal-header h2 {
    color: #ffffff !important;
    flex: 1 1 auto !important;
}
.admin-modal .admin-modal-header .admin-modal-close {
    color: rgba(255,255,255,0.9) !important;
    order: -1 !important;            /* close (x) to the top-left */
    flex: 0 0 auto !important;
}
.admin-modal .admin-modal-body input[type="text"],
.admin-modal .admin-modal-body input[type="email"],
.admin-modal .admin-modal-body input[type="password"],
.admin-modal .admin-modal-body input[type="number"],
.admin-modal .admin-modal-body input:not([type]),
.admin-modal .admin-modal-body textarea,
.admin-modal .admin-modal-body select {
    background: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid #d1d5db !important;   /* visible outline so the box shows on the white body */
}
/* Dense log tables scroll inside the modal instead of bleeding off the page. */
.admin-modal .admin-modal-body table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    font-size: 0.8rem !important;
}

/* ---- Community ---- */
.dc-sidebar, .dc-main, .dc-right, .dc-main-header {
    background: var(--pi-surface) !important;
    border-color: var(--pi-line) !important;
    color: var(--pi-text) !important;
}
.dc-feed { background: var(--pi-bg) !important; }
.pc-name, .comment-user, .pc-comment-user { color: var(--pi-text) !important; font-weight: 700 !important; }
.pc-text, .pc-comment-text { color: var(--pi-text-2) !important; }

/* ---- Footer: pinned to bottom (fix floating) + restrained ---- */
.app-footer {
    background: var(--pi-bg) !important;
    border-top: 1px solid var(--pi-line) !important;
    color: var(--pi-text-3) !important;
}
.app-footer p { color: var(--pi-text-2) !important; font-weight: 700 !important; letter-spacing: 0.08em !important; }

/* Footer follows content inside the scrollable #page-content (original model:
   body/.app-container are fixed-height with overflow hidden, #page-content scrolls).
   Do NOT override html/body/#page-content height or overflow here — that breaks the
   inner scroll. Just keep the footer styling above. */

/* ---- Settings / account rows (consistent across desktop + mobile) ---- */
.settings-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    width: 100% !important;
    background: transparent !important;
    color: var(--pi-text) !important;
    border: none !important;
    border-bottom: 1px solid var(--pi-line) !important;
    padding: 0.95rem 0.25rem !important;
    cursor: pointer;
    transition: background .12s ease;
}
.settings-item:last-child { border-bottom: none !important; }
.settings-item:hover { background: rgba(255,255,255,0.03) !important; }
.settings-item-left { display: flex !important; align-items: center !important; gap: 0.6rem !important; }
.settings-item-text { color: var(--pi-text) !important; font-weight: 600 !important; }
.settings-item-right { display: flex !important; align-items: center !important; gap: 0.5rem !important; margin-left: auto !important; color: var(--pi-text-2) !important; }
.settings-item .chevron { color: var(--pi-text-3) !important; }

/* ============================================================================
   MODAL HARDENING — consistency + readability across ALL modals
   (Many modals hardcode light-theme greys/dark text inline; force readable
   navy-theme colors and a consistent size system without editing each modal.)
   ============================================================================ */

/* Readable text inside any modal, overriding inline dark/grey colors.
   Targets the common low-contrast inline values found across modals. */
.modal-content [style*="#1f2937"], .modal-content [style*="#111827"],
.modal-content [style*="#1a1a1a"], .modal-content [style*="#374151"],
.modal-content [style*="color: #000"], .modal-content [style*="color:#000"] {
    color: var(--pi-text) !important;
}
.modal-content [style*="#6b7280"], .modal-content [style*="#9ca3af"],
.modal-content [style*="opacity: 0.7"], .modal-content [style*="opacity:0.7"],
.modal-content [style*="rgba(255,255,255,0.45)"], .modal-content [style*="rgba(255, 255, 255, 0.45)"],
.modal-content [style*="rgba(255,255,255,0.5)"] {
    color: var(--pi-text-2) !important;
    opacity: 1 !important;
}
/* Default modal text + labels */
.modal-content, .modal-body, .modal-content p, .modal-content li,
.modal-content td, .modal-content label, .modal-content .form-label {
    color: var(--pi-text) !important;
}
.modal-content label, .modal-content .field-label { color: var(--pi-text-2) !important; }

/* Consistent modal width system — neutralise arbitrary inline max-widths.
   Default medium; size classes for intentional exceptions. */
.modal-content { max-width: 600px !important; width: 100% !important; }
.modal-content.modal-sm { max-width: 440px !important; }
.modal-content.modal-md { max-width: 600px !important; }
.modal-content.modal-lg, .modal-content.modal-xl,
.modal-content.meal-plan-builder-content, .modal-content.weight-history-content,
.modal-content[style*="max-width: 800px"], .modal-content[style*="max-width: 900px"],
.modal-content[style*="max-width: 700px"] { max-width: 820px !important; }
.modal-content[style*="max-width:400px"], .modal-content[style*="max-width: 400px"],
.modal-content[style*="max-width:500px"], .modal-content[style*="max-width: 500px"] { max-width: 460px !important; }

/* Modal selects (.prefs-select etc.) inherit the input look */
.modal-content select, .prefs-select {
    background: var(--pi-surface-2) !important;
    color: var(--pi-text) !important;
    border: 1px solid var(--pi-line) !important;
    border-radius: 10px !important;
}

/* Legacy modal action buttons -> unify with primary/secondary system */
.pcs-post-btn, .ch-create, .qa-save-btn, .injury-confirm-btn {
    background: var(--pi-crimson) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(200, 160, 60,0.28) !important;
    opacity: 1 !important;
}
.logout-btn {
    background: transparent !important;
    color: var(--pi-crimson) !important;
    border: 1px solid rgba(200, 160, 60,0.5) !important;
    border-radius: 10px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
}
.logout-btn:hover { background: rgba(200, 160, 60,0.12) !important; }

/* Modal headers: title + close consistent */
.modal-header h2 { color: var(--pi-text) !important; font-weight: 700 !important; }
.modal-close { color: var(--pi-text-2) !important; background: transparent !important; }
.modal-close:hover { color: var(--pi-text) !important; }

/* Faint legacy meta text used inside detail modals */
.usda-hint { color: var(--pi-text-2) !important; }
.fmt-meal-label { color: var(--pi-text-3) !important; }
.prog-detail-session-meta { color: var(--pi-text-2) !important; font-size: 0.74rem !important; }

/* ---- Rehab phase view: exercises primary, details in sub-tabs ---- */
.rehab-ex-section { margin-bottom: 1.25rem; }
.rehab-section-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--pi-line); }
.rehab-section-title { font-size: 1.05rem; font-weight: 700; color: var(--pi-text); }
.rehab-section-count { font-size: 0.7rem; font-weight: 700; color: var(--pi-gold); background: rgba(212,175,55,0.14); border: 1px solid rgba(212,175,55,0.3); padding: 2px 8px; border-radius: 999px; }
.rehab-empty { color: var(--pi-text-2); font-size: 0.9rem; }
.rehab-detail-block { margin-top: 1rem; background: rgba(255,255,255,0.03); border: 1px solid var(--pi-line); border-radius: 12px; padding: 0.75rem; }
.rehab-subtabs { display: flex; gap: 6px; margin-bottom: 0.75rem; flex-wrap: wrap; }
.rehab-subtab {
    background: transparent; color: var(--pi-text-3); border: 1px solid var(--pi-line);
    border-radius: 999px; padding: 5px 12px; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.02em; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.rehab-subtab.active { color: var(--pi-text); background: var(--pi-surface-2); border-color: rgba(255,255,255,0.18); }
.rehab-subtab-n { font-size: 0.62rem; color: var(--pi-text-3); background: rgba(255,255,255,0.06); padding: 1px 6px; border-radius: 999px; }
.rehab-subtab.active .rehab-subtab-n { color: var(--pi-text-2); }
.rehab-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.rehab-list li { display: flex; align-items: flex-start; gap: 0.5rem; color: var(--pi-text-2); font-size: 0.88rem; line-height: 1.5; }
.rehab-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 0.45rem; flex-shrink: 0; }

/* ============================================================================
   ADMIN PORTALS (super-admin + org-admin) — bring into the navy design system.
   These panels shipped with a separate light theme; unify them here.
   ============================================================================ */
.super-admin-app, .org-admin-app, .admin-app,
.super-admin-content, .org-admin-content, .admin-content, .admin-main {
    background: var(--pi-bg) !important;
    color: var(--pi-text) !important;
}
.super-admin-header, .org-admin-header, .admin-header {
    background: #16243f !important;
    border-bottom: 1px solid var(--pi-line) !important;
    box-shadow: none !important;
}
.super-admin-title, .org-admin-title, .admin-title,
.super-admin-logo, .pioneer-mark { color: var(--pi-text) !important; }
/* Login/auth brand mark in gold to match the new app icon (tagline already gold). */
.auth-logo .pioneer-mark { color: var(--gold, #c8a03c) !important; }
/* Loading screen mirrors the login header proportions (P already gold via mobile-spacing):
   match the 3rem mark, 1.75rem/3px wordmark and 0.65rem tagline so the splash reads as the login page. */
.loading-screen .pioneer-mark { font-size: 3rem !important; }
.loading-screen .loader-wordmark { font-size: 1.75rem !important; letter-spacing: 3px !important; font-weight: 700 !important; padding-left: 3px !important; margin-top: 0.6rem !important; }
.loading-screen .loader-tagline { font-size: 0.65rem !important; letter-spacing: 2px !important; opacity: 0.85 !important; }
.super-admin-nav-item, .org-admin-nav-item, .admin-nav-item, .admin-user-name {
    color: var(--pi-text-2) !important; font-weight: 600 !important;
}
.super-admin-nav-item:hover, .org-admin-nav-item:hover { color: var(--pi-text) !important; }
.super-admin-nav-item.active, .org-admin-nav-item.active, .admin-nav-item.active {
    color: var(--pi-text) !important;
    box-shadow: inset 0 -2px 0 var(--pi-crimson) !important;
}

/* Admin cards / stat tiles / sections */
.admin-stat-card, .sa-card, .sa-stat-card, .admin-card, .platform-stat-card,
.admin-section, .admin-panel, .admin-table-wrap, .org-card, .admin-metric-card,
.super-admin-app .stat-card, .org-admin-app .stat-card,
.super-admin-app [class*="card"], .org-admin-app [class*="card"] {
    background: var(--pi-surface) !important;
    border: 1px solid var(--pi-line) !important;
    color: var(--pi-text) !important;
    box-shadow: var(--pi-shadow) !important;
    border-radius: var(--pi-r) !important;
}
.admin-stat-card .stat-number, .admin-stat-value, .sa-stat-value,
.super-admin-app .stat-number, .platform-stat-value {
    color: var(--pi-text) !important; font-weight: 800 !important;
}
.admin-stat-card .stat-label, .sa-stat-label, .super-admin-app .stat-label,
.platform-stat-label {
    color: var(--pi-text-3) !important; text-transform: uppercase !important;
    letter-spacing: 0.1em !important; font-size: 0.66rem !important; font-weight: 700 !important;
}

/* Admin tables */
.super-admin-app table, .org-admin-app table, .admin-table, .data-table {
    background: var(--pi-surface) !important; color: var(--pi-text) !important;
    border-color: var(--pi-line) !important;
}
.super-admin-app th, .org-admin-app th, .admin-table th, .data-table th {
    color: var(--pi-text-3) !important; text-transform: uppercase !important;
    letter-spacing: 0.08em !important; font-size: 0.66rem !important;
    border-bottom: 1px solid var(--pi-line) !important; background: transparent !important;
}
.super-admin-app td, .org-admin-app td, .admin-table td, .data-table td {
    color: var(--pi-text) !important; border-bottom: 1px solid var(--pi-line-soft) !important;
}
.super-admin-app td[style*="color"], .org-admin-app td[style*="#"],
.super-admin-app [style*="color: #6b7280"], .super-admin-app [style*="color:#6b7280"] {
    color: var(--pi-text-2) !important;
}

/* Admin section titles + overview heading */
.super-admin-app h1, .super-admin-app h2, .super-admin-app h3,
.org-admin-app h1, .org-admin-app h2, .org-admin-app h3,
.admin-section-title, .platform-overview-title {
    color: var(--pi-text) !important;
}
.admin-logout-btn, .super-admin-app .logout-btn {
    background: transparent !important; color: var(--pi-text) !important;
    border: 1px solid var(--pi-line) !important; border-radius: 10px !important;
}

/* Decorative emoji stat icons in admin: hide them (de-AI) */
.super-admin-app .stat-icon, .org-admin-app .stat-icon, .admin-stat-card .stat-icon { display: none !important; }

/* ---- GIF picker: 6 per row, compact tiles ---- */
.pcs-gif-grid, .dc-gif-grid, .dc-ic-gif-picker .pcs-gif-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 5px !important;
    max-height: 240px !important;
    overflow-y: auto !important;
}
.pcs-gif-thumb, .dc-gif-item {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid var(--pi-line) !important;
}
.pcs-gif-thumb img, .dc-gif-item {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.pcs-gif-loading { grid-column: 1 / -1; text-align: center; color: var(--pi-text-2); padding: 1rem 0; }
@media (max-width: 768px) {
    /* 3 per row on mobile so the GIFs are big enough to see. Must include the
       .dc-ic-gif-picker .pcs-gif-grid selector — the 6-col base rule above targets it
       with higher specificity, so a bare .pcs-gif-grid override here would NOT win. */
    .pcs-gif-grid, .dc-gif-grid,
    .dc-ic-gif-picker .pcs-gif-grid { grid-template-columns: repeat(3, 1fr) !important; }
    /* Keep the GIF search bar slim (mobile touch-target rules were inflating it). */
    #dc-gif-input, #dm-gif-search, .pcs-gif-input {
        min-height: 0 !important;
        height: auto !important;
        padding: 6px 10px !important;
        font-size: 0.85rem !important;
    }
}

/* ---- Dashboard: fix the dark name/header strip + remove the boxed-in buffer ---- */
/* The greeting/name top bar was var(--navy-dark) (too black) — match the navy surface. */
.db-topbar {
    background: var(--pi-surface) !important;
    border-bottom: 1px solid var(--pi-line) !important;
    border-radius: var(--pi-r) var(--pi-r) 0 0 !important;
}
.db-name, .db-dayname { color: var(--pi-text) !important; }
.db-datestr { color: var(--pi-text-2) !important; }

/* Dashboard content sits on the page bg with comfortable side padding — no boxed
   frame. Let the inner cards (calendar, sidebar) provide the only borders. */
.dashboard-page { padding: 1.25rem var(--edge-mobile) 2rem var(--edge-mobile) !important; max-width: 1480px !important; }
.db-new { background: transparent !important; gap: 1rem !important; }

/* Footer flush with content (remove the gap/buffer above it) */
#page-content { padding-bottom: 0 !important; }
.app-footer { margin-top: 0 !important; padding: 0.5rem 1rem !important; }

/* ---- Toasts ---- */
.toast { background: var(--pi-surface-2) !important; color: var(--pi-text) !important; border: 1px solid var(--pi-line) !important; box-shadow: var(--pi-shadow) !important; display: flex !important; align-items: center !important; gap: 0.6rem !important; }
.toast .toast-icon { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; }
.toast .toast-message { flex: 1 1 auto !important; line-height: 1.3 !important; text-align: left !important; }
/* Keep semantic colour on status toasts (don't flatten error/success to the surface). */
.toast.error { background: #d9433f !important; border-color: #d9433f !important; color: #fff !important; }
.toast.success { background: var(--pi-surface-2) !important; border-left: 4px solid #28a745 !important; }
.toast.warning { background: var(--pi-surface-2) !important; border-left: 4px solid #f39c12 !important; }

/* Food modal: the status bar is NOT overlaying the WebView (overlaysWebView:false), so the content
   already sits below it — the inherited padding-top:env(safe-area-inset-top) just made an empty navy
   band above the title. Kill it (id-level specificity beats mobile-shell.css's !important). */
@media (max-width: 768px) {
    #food-modal.modal-overlay { padding: 0 !important; }
    #food-modal .food-modal-content { padding-top: 0 !important; margin-top: 0 !important; }
    /* Clear the status bar/clock with ONE status-bar height (fallback 30px if env reports 0),
       not the stacked overlay+content+header paddings that made the huge band. */
    #food-modal .food-modal-content .modal-header { padding-top: calc(0.4rem + env(safe-area-inset-top, 30px)) !important; padding-bottom: 0.45rem !important; }
    /* "Back" = small flat gold text, not a big bold round button. */
    #food-modal .modal-close {
        width: auto !important; height: auto !important; min-width: 0 !important;
        border-radius: 0 !important; background: transparent !important;
        color: var(--gold, #c8a03c) !important; font-size: 0.95rem !important;
        font-weight: 600 !important; padding: 0.15rem 0.3rem !important;
    }
    #food-modal .fmt-x-ico { display: none !important; }
    #food-modal .modal-header h2 { font-size: 1.05rem !important; }
}