/* ============================================================
   APPLE-STYLE UI REFRESH — shared override stylesheet
   Additive only. To revert: remove the <link> from each page.
   ============================================================ */

/* ----- Canvas: quiet, near-black in dark / true white in light ----- */
[data-theme="dark"] body,
[data-theme="dark"] .main-content,
[data-theme="dark"] .main-container { background: #0a0d14 !important; }
[data-theme="dark"] .main-header {
    background: rgba(10, 13, 20, 0.72) !important;
    border-bottom-color: rgba(255,255,255,0.06) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
}
body, .main-content, .main-container { background: #f7f7f8 !important; }
.main-header {
    background: rgba(255,255,255,0.72) !important;
    border-bottom-color: rgba(0,0,0,0.06) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
}

/* ----- Typography: lighter weights, tighter tracking ----- */
.main-header-title { font-size: 1.0625rem !important; font-weight: 600 !important; letter-spacing: -0.015em !important; }
.welcome-card h1   { font-size: 1.5rem !important;   font-weight: 600 !important; letter-spacing: -0.02em !important; }
.action-center-heading { font-size: 1rem !important; font-weight: 600 !important; letter-spacing: -0.01em !important; }
.overview-card-title   { font-size: 0.9375rem !important; font-weight: 600 !important; letter-spacing: -0.005em !important; }

/* ----- Surfaces: hairline borders, no decorative shadows ----- */
.overview-card,
.stats-strip,
.stories-compact {
    border-radius: 14px !important;
    box-shadow: none !important;
}
.overview-card,
.stats-strip,
.stories-compact {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
}
[data-theme="dark"] .overview-card,
[data-theme="dark"] .stats-strip,
[data-theme="dark"] .stories-compact {
    background: #14171f !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}

/* Kill the gradient stripe at the top of each overview card */
.overview-card::before { display: none !important; }

/* Hero card for the only actionable column — subtle accent ring */
#overviewCardAlerts {
    box-shadow: inset 0 0 0 1px rgba(13,148,136,0.35) !important;
    border-color: transparent !important;
}
[data-theme="dark"] #overviewCardAlerts {
    box-shadow: inset 0 0 0 1px rgba(45,212,191,0.45) !important;
    border-color: transparent !important;
}

/* ----- Card icons: single accent (was 3 different colors) ----- */
.overview-card-icon,
.overview-card-icon--activity,
.overview-card-icon--alerts,
.overview-card-icon--meals {
    width: 30px !important;
    height: 30px !important;
    border-radius: 9px !important;
    background: rgba(13,148,136,0.10) !important;
    color: var(--brand-primary) !important;
}
[data-theme="dark"] .overview-card-icon,
[data-theme="dark"] .overview-card-icon--activity,
[data-theme="dark"] .overview-card-icon--alerts,
[data-theme="dark"] .overview-card-icon--meals {
    background: rgba(255,255,255,0.06) !important;
    color: #e2e8f0 !important;
}
.overview-card-header { padding: 18px 20px 12px !important; }
.overview-card-body   { padding: 0 20px 18px !important; }

/* ----- Stats strip: hero numerals, quiet labels, more air ----- */
.stats-strip { padding: 18px 24px !important; gap: 4px !important; }
.stats-strip-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    padding: 4px 18px !important;
}
.stats-strip-number {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
    color: #0f172a !important;
}
[data-theme="dark"] .stats-strip-number { color: #f8fafc !important; }
.stats-strip-number--pending { color: var(--brand-primary) !important; }
.stats-strip-label {
    font-size: 0.6875rem !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}
.stats-strip-divider {
    height: 36px !important;
    background: rgba(0,0,0,0.06) !important;
}
[data-theme="dark"] .stats-strip-divider { background: rgba(255,255,255,0.07) !important; }

/* ----- AI hero: calmer focus, no transform, no halo glow ----- */
.ai-hero-input {
    border-radius: 14px !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: none !important;
    background: #ffffff !important;
    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    padding: 15px 18px !important;
}
.ai-hero-input:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.12) !important;
}
.ai-hero-input::placeholder { color: #9ca3af !important; }
[data-theme="dark"] .ai-hero-input {
    background: #14171f !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .ai-hero-input::placeholder { color: #6b7280 !important; }
[data-theme="dark"] .ai-hero-input:focus { box-shadow: 0 0 0 3px rgba(13,148,136,0.20) !important; }

.ai-hero-mic, .ai-hero-send-btn {
    border-radius: 14px !important;
    box-shadow: none !important;
    border-width: 1px !important;
}
.ai-hero-send-btn:hover {
    transform: none !important;
    box-shadow: none !important;
    background: var(--brand-primary-dark) !important;
}

/* ----- Quick chips: minimal, single style ----- */
.hero-chip {
    background: transparent !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 999px !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    padding: 6px 13px !important;
    color: #475569 !important;
}
[data-theme="dark"] .hero-chip {
    background: transparent !important;
    border-color: rgba(255,255,255,0.10) !important;
    color: #cbd5e1 !important;
}
.hero-chip:hover { background: rgba(0,0,0,0.04) !important; color: #0f172a !important; }
[data-theme="dark"] .hero-chip:hover { background: rgba(255,255,255,0.06) !important; color: #f1f5f9 !important; }

/* ----- Tier badge: one quiet style for every tier ----- */
.tier-badge,
.tier-badge.free,
.tier-badge.starter,
.tier-badge.basic,
.tier-badge.growth,
.tier-badge.professional,
.tier-badge.branded {
    background: rgba(13,148,136,0.10) !important;
    color: var(--brand-primary) !important;
    font-weight: 600 !important;
    font-size: 0.625rem !important;
    letter-spacing: 0.08em !important;
    padding: 4px 10px !important;
}
[data-theme="dark"] .tier-badge,
[data-theme="dark"] .tier-badge.free,
[data-theme="dark"] .tier-badge.starter,
[data-theme="dark"] .tier-badge.basic,
[data-theme="dark"] .tier-badge.growth,
[data-theme="dark"] .tier-badge.professional,
[data-theme="dark"] .tier-badge.branded {
    background: rgba(45,212,191,0.14) !important;
    color: #5eead4 !important;
}

/* ----- Activity summary badges: monochrome (was 5 colors) ----- */
.activity-summary-badge.workout,
.activity-summary-badge.pr,
.activity-summary-badge.checkin,
.activity-summary-badge.photo,
.activity-summary-badge.measurement {
    background: rgba(15,23,42,0.06) !important;
    color: #475569 !important;
    font-weight: 500 !important;
}
[data-theme="dark"] .activity-summary-badge.workout,
[data-theme="dark"] .activity-summary-badge.pr,
[data-theme="dark"] .activity-summary-badge.checkin,
[data-theme="dark"] .activity-summary-badge.photo,
[data-theme="dark"] .activity-summary-badge.measurement {
    background: rgba(255,255,255,0.06) !important;
    color: #cbd5e1 !important;
}

/* ----- Meal macro pills: monochrome (was red/blue/green/orange) ----- */
.meal-feed-macro.calories,
.meal-feed-macro.protein,
.meal-feed-macro.carbs,
.meal-feed-macro.fat {
    background: rgba(15,23,42,0.06) !important;
    color: #475569 !important;
}
[data-theme="dark"] .meal-feed-macro.calories,
[data-theme="dark"] .meal-feed-macro.protein,
[data-theme="dark"] .meal-feed-macro.carbs,
[data-theme="dark"] .meal-feed-macro.fat {
    background: rgba(255,255,255,0.06) !important;
    color: #cbd5e1 !important;
}

/* ----- Priority dots: kill the neon glow ----- */
.priority-dot--red,
.priority-dot--amber,
.priority-dot--green,
.priority-dot--purple,
.priority-dot--blue { box-shadow: none !important; }

/* ----- Avatars: neutral (no brand-gradient halos) ----- */
.activity-client-avatar {
    background: #e5e7eb !important;
    color: #475569 !important;
}
[data-theme="dark"] .activity-client-avatar {
    background: #2a2f3a !important;
    color: #cbd5e1 !important;
}

/* Activity & meal cards inside the columns: very quiet surfaces */
.activity-client-card {
    background: rgba(15,23,42,0.025) !important;
    border-color: rgba(15,23,42,0.05) !important;
}
[data-theme="dark"] .activity-client-card {
    background: rgba(255,255,255,0.025) !important;
    border-color: rgba(255,255,255,0.05) !important;
}
[data-theme="dark"] .meal-feed-card {
    background: rgba(255,255,255,0.025) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
}

/* ----- Spacing: more air between sections ----- */
.ai-hero-section { margin-bottom: 28px !important; }
.dashboard-glance { margin-bottom: 24px !important; }
.stats-strip { margin-bottom: 20px !important; }
.overview-cards-grid { gap: 14px !important; }

/* ----- Header profile avatar: hairline ring, no glow ----- */
.header-profile-avatar { box-shadow: none !important; border: 1px solid rgba(0,0,0,0.08) !important; }
[data-theme="dark"] .header-profile-avatar { border-color: rgba(255,255,255,0.10) !important; }

/* ----- Notification bell: quieter ----- */
.notification-badge { box-shadow: none !important; font-weight: 600 !important; }

/* ----- Sidebar polish: flatter active state ----- */
[data-theme="dark"] .sidebar { background: #0a0d14 !important; border-right: 1px solid rgba(255,255,255,0.06) !important; }
.sidebar { background: #ffffff !important; border-right: 1px solid rgba(0,0,0,0.06) !important; }

/* ============================================================
   UNIVERSAL DEEP OVERRIDES — apply across every live page
   ============================================================ */

/* === 1. Flatten the brand gradient at the variable level ===
   Every `background: var(--brand-gradient)` in the codebase
   (buttons, avatars, banners, headers) becomes solid teal.
   Same for purple-gradient. One line, app-wide effect. */
:root,
html[data-theme="light"],
html[data-theme="dark"] {
    --brand-gradient: var(--brand-primary, #2cb5a5) !important;
    --purple-gradient: var(--brand-primary, #2cb5a5) !important;
}

/* === 2. Headings: max 600 weight, tighter tracking everywhere === */
h1, h2, h3,
.page-header h1, .page-header h2, .page-header h3,
.section-header h1, .section-header h2, .section-header h3,
.modal-header h1, .modal-header h2, .modal-header h3,
.welcome-card h1, .welcome-card h2,
.client-header h1, .client-header h2,
.profile-header h1, .profile-header h2,
.detail-header h1, .detail-header h2,
.thread-header h1, .thread-header h2 {
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}

/* === 3. Universal card surfaces ===
   Hairline border, flat fill, no decorative shadows.
   NOTE: .mockup-* classes are intentionally excluded — those belong to the
   Live Preview phone in branding-settings.html and are themed by that page's
   own data-preview-theme rules, NOT by the coach page's data-theme. */
.card,
.client-card, .exercise-card, .plan-card, .recipe-card,
.challenge-card, .template-card, .profile-card, .settings-card,
.billing-card, .stat-card, .action-card, .builder-card,
.detail-info-card, .leaderboard-card, .theme-option-card,
.promo-card,
.checkin-card, .ai-mode-card, .form-card,
.convo-list-panel, .thread-panel, .preview-panel, .bulk-panel {
    border-radius: 14px !important;
    box-shadow: none !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
}
[data-theme="dark"] .card,
[data-theme="dark"] .client-card,
[data-theme="dark"] .exercise-card,
[data-theme="dark"] .plan-card,
[data-theme="dark"] .recipe-card,
[data-theme="dark"] .challenge-card,
[data-theme="dark"] .template-card,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .settings-card,
[data-theme="dark"] .billing-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .action-card,
[data-theme="dark"] .builder-card,
[data-theme="dark"] .detail-info-card,
[data-theme="dark"] .leaderboard-card,
[data-theme="dark"] .theme-option-card,
[data-theme="dark"] .promo-card,
[data-theme="dark"] .checkin-card,
[data-theme="dark"] .ai-mode-card,
[data-theme="dark"] .form-card,
[data-theme="dark"] .convo-list-panel,
[data-theme="dark"] .thread-panel,
[data-theme="dark"] .preview-panel,
[data-theme="dark"] .bulk-panel {
    background: #14171f !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}

/* Strip decorative gradient bars at the top of cards */
.card::before,
.client-card::before, .exercise-card::before, .plan-card::before,
.recipe-card::before, .challenge-card::before, .template-card::before,
.profile-card::before, .settings-card::before, .billing-card::before,
.stat-card::before, .action-card::before, .builder-card::before,
.checkin-card::before, .promo-card::before {
    display: none !important;
}

/* === 4. Modals: flat surface + soft drop shadow only === */
.modal,
.modal-content, .modal-body,
.confirm-modal, .assign-modal, .custom-exercise-modal,
.subscription-modal {
    border-radius: 16px !important;
    box-shadow: 0 12px 48px rgba(0,0,0,0.10) !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
}
[data-theme="dark"] .modal,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .confirm-modal,
[data-theme="dark"] .assign-modal,
[data-theme="dark"] .custom-exercise-modal,
[data-theme="dark"] .subscription-modal {
    background: #14171f !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 12px 48px rgba(0,0,0,0.40) !important;
}

/* === 5. Buttons ===
   - Generic: hairline, 12px radius, no glow halo, no transform on hover
   - Primary classes: solid teal */
.btn, button.btn,
.add-day-btn, .add-exercise-btn, .add-link-btn, .ai-btn,
.assign-btn, .bulk-send-btn, .send-btn, .submit-btn,
.template-scratch-btn, .add-meal-link-btn, .ai-quick-btn,
.modal-btn, .plan-action-btn, .change-btn, .copy-btn,
.email-mockup-btn, .email-preview-btn, .preview-device-btn,
.create-exercise-header-btn {
    border-radius: 12px !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}
.btn:hover, button.btn:hover,
.add-day-btn:hover, .add-exercise-btn:hover, .ai-btn:hover,
.assign-btn:hover, .bulk-send-btn:hover, .send-btn:hover,
.submit-btn:hover, .template-scratch-btn:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Primary button color */
.btn-primary, .submit-btn,
.add-day-btn, .send-btn, .bulk-send-btn, .assign-btn,
.modal-btn-primary, .ai-btn--primary {
    background: var(--brand-primary, #2cb5a5) !important;
    color: #fff !important;
    border: 1px solid var(--brand-primary, #2cb5a5) !important;
}
.btn-primary:hover, .submit-btn:hover,
.add-day-btn:hover, .send-btn:hover, .bulk-send-btn:hover,
.assign-btn:hover, .modal-btn-primary:hover {
    background: var(--brand-primary-dark, #22998a) !important;
    border-color: var(--brand-primary-dark, #22998a) !important;
}

/* === 6. Form inputs / selects / textareas === */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="tel"],
input[type="url"], input[type="date"], input[type="time"],
input[type="datetime-local"], textarea, select,
.search-input, .form-input, .input,
.config-input, .day-name-input, .msg-input, .bulk-input,
.client-link-input, .color-hex-input,
.custom-meal-input, .qe-cq-options-input,
.client-select, .filter-select, .distance-unit-select,
.exercise-label-select {
    border-radius: 10px !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    box-shadow: none !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 0.9375rem !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}
input:focus, textarea:focus, select:focus,
.search-input:focus, .form-input:focus, .input:focus,
.config-input:focus, .day-name-input:focus, .msg-input:focus {
    outline: none !important;
    border-color: var(--brand-primary, #2cb5a5) !important;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.12) !important;
}
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .search-input,
[data-theme="dark"] .form-input,
[data-theme="dark"] .input,
[data-theme="dark"] .config-input,
[data-theme="dark"] .day-name-input,
[data-theme="dark"] .msg-input,
[data-theme="dark"] .bulk-input,
[data-theme="dark"] .client-select,
[data-theme="dark"] .filter-select {
    background: #14171f !important;
    border-color: rgba(255,255,255,0.10) !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    box-shadow: 0 0 0 3px rgba(13,148,136,0.20) !important;
}

/* === 7. Badges / pills: quiet neutral default === */
.badge:not(.tier-badge):not(.activity-summary-badge):not(.notification-badge):not(.sidebar-msg-badge),
.exercise-badge, .difficulty-badge, .challenge-badge,
.challenge-type-badge, .club-badge, .archived-badge,
.invite-badge, .goal-badge, .profile-badge, .pro-badge,
.failed-badge, .reaction-badge,
.subscription-status-badge, .custom-exercise-badge,
.client-count-badge, .convo-total-badge {
    background: rgba(15,23,42,0.06) !important;
    color: #475569 !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}
[data-theme="dark"] .badge:not(.tier-badge):not(.activity-summary-badge):not(.notification-badge):not(.sidebar-msg-badge),
[data-theme="dark"] .exercise-badge,
[data-theme="dark"] .difficulty-badge,
[data-theme="dark"] .challenge-badge,
[data-theme="dark"] .challenge-type-badge,
[data-theme="dark"] .club-badge,
[data-theme="dark"] .archived-badge,
[data-theme="dark"] .invite-badge,
[data-theme="dark"] .goal-badge,
[data-theme="dark"] .profile-badge,
[data-theme="dark"] .pro-badge,
[data-theme="dark"] .failed-badge,
[data-theme="dark"] .reaction-badge,
[data-theme="dark"] .subscription-status-badge,
[data-theme="dark"] .custom-exercise-badge,
[data-theme="dark"] .client-count-badge,
[data-theme="dark"] .convo-total-badge {
    background: rgba(255,255,255,0.06) !important;
    color: #cbd5e1 !important;
}

/* Unread/notification badges keep their accent but lose glow */
.convo-unread-badge, .notification-badge, .sidebar-msg-badge {
    background: var(--brand-primary, #2cb5a5) !important;
    color: #fff !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

/* === 8. Filter tabs / segment buttons / chips: neutral when inactive === */
.chip, .filter-tab, .seg-btn,
.view-toggle-btn, .preview-device-toggle .preview-device-btn {
    border-radius: 999px !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    background: transparent !important;
    color: #475569 !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}
[data-theme="dark"] .chip,
[data-theme="dark"] .filter-tab,
[data-theme="dark"] .seg-btn,
[data-theme="dark"] .view-toggle-btn,
[data-theme="dark"] .preview-device-toggle .preview-device-btn {
    border-color: rgba(255,255,255,0.10) !important;
    color: #cbd5e1 !important;
}
.chip.active, .filter-tab.active, .seg-btn.active,
.view-toggle-btn.active,
.preview-device-toggle .preview-device-btn.active {
    background: var(--brand-primary, #2cb5a5) !important;
    color: #fff !important;
    border-color: var(--brand-primary, #2cb5a5) !important;
}

/* === 9. Page headers: lighter weight and quieter borders === */
.page-header, .section-header,
.client-header, .profile-header, .detail-header,
.thread-header, .convo-list-header, .modal-header,
.preview-header, .plan-header, .challenge-card-header,
.email-mockup-header,
.custom-meal-header, .convo-header {
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    background: transparent !important;
}
[data-theme="dark"] .page-header,
[data-theme="dark"] .section-header,
[data-theme="dark"] .client-header,
[data-theme="dark"] .profile-header,
[data-theme="dark"] .detail-header,
[data-theme="dark"] .thread-header,
[data-theme="dark"] .convo-list-header,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .preview-header,
[data-theme="dark"] .plan-header,
[data-theme="dark"] .convo-header {
    border-bottom-color: rgba(255,255,255,0.06) !important;
}

/* === 10. Toggle switches: quieter, single accent === */
.toggle-switch, .qe-switch {
    box-shadow: none !important;
}

/* === 11. Soften any inline font-weight: 800 (bespoke headings) === */
[style*="font-weight: 800"],
[style*="font-weight:800"] { font-weight: 600 !important; }

/* === 12. Common stat tiles inside profile/billing/stats pages === */
.stat, .client-stat, .detail-stat {
    border-radius: 12px !important;
    box-shadow: none !important;
    background: rgba(15,23,42,0.025) !important;
    border: 1px solid rgba(15,23,42,0.05) !important;
}
[data-theme="dark"] .stat,
[data-theme="dark"] .client-stat,
[data-theme="dark"] .detail-stat {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}

/* ============================================================
   THIRD PASS — universal catch-alls for buttons, avatars,
   hovers, alerts, progress, tabs, status, tables
   ============================================================ */

/* === 13. Catch-all for every "*-btn" class ===
   Standardize shape only — keep semantic colors (delete=red, etc.) */
[class$="-btn"],
[class*="-btn "] {
    border-radius: 12px !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}
[class$="-btn"]:hover,
[class*="-btn "]:hover,
[class$="-btn"]:active,
[class*="-btn "]:active {
    transform: none !important;
    box-shadow: none !important;
}

/* === 14. Universal avatar normalization ===
   Neutral surface, hairline ring, no glow. Only when no image. */
.avatar, .client-avatar, .profile-avatar,
.feed-avatar, .thread-avatar, .convo-avatar,
.meal-feed-avatar, .sidebar-user-avatar,
.mockup-user-avatar, .interaction-avatar,
.cag-avatar, .chip-avatar, .client-profile-avatar,
.client-select-avatar {
    background: #e5e7eb !important;
    color: #475569 !important;
    box-shadow: none !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
}
[data-theme="dark"] .avatar,
[data-theme="dark"] .client-avatar,
[data-theme="dark"] .profile-avatar,
[data-theme="dark"] .feed-avatar,
[data-theme="dark"] .thread-avatar,
[data-theme="dark"] .convo-avatar,
[data-theme="dark"] .meal-feed-avatar,
[data-theme="dark"] .sidebar-user-avatar,
[data-theme="dark"] .mockup-user-avatar,
[data-theme="dark"] .interaction-avatar,
[data-theme="dark"] .cag-avatar,
[data-theme="dark"] .chip-avatar,
[data-theme="dark"] .client-profile-avatar,
[data-theme="dark"] .client-select-avatar {
    background: #2a2f3a !important;
    color: #cbd5e1 !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* === 15. Kill the hover-lift transforms on every covered card ===
   No card "springs up" on hover; just a subtle bg/shadow nudge. */
.card:hover, .client-card:hover, .exercise-card:hover, .plan-card:hover,
.recipe-card:hover, .challenge-card:hover, .template-card:hover,
.profile-card:hover, .settings-card:hover, .billing-card:hover,
.stat-card:hover, .action-card:hover, .builder-card:hover,
.detail-info-card:hover, .leaderboard-card:hover,
.theme-option-card:hover, .promo-card:hover,
.checkin-card:hover, .ai-mode-card:hover,
.activity-client-card:hover, .meal-feed-card:hover,
.overview-card:hover, .stat:hover, .client-stat:hover {
    transform: none !important;
}

/* === 16. Alerts / toasts ===
   Flat surface + thin colored left rail for severity. */
.alert, .alert-box, .toast, .alert-item {
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    background: #ffffff !important;
    color: #0f172a !important;
}
[data-theme="dark"] .alert,
[data-theme="dark"] .alert-box,
[data-theme="dark"] .toast,
[data-theme="dark"] .alert-item {
    background: #14171f !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #f1f5f9 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.30) !important;
}
.alert-success { border-left: 3px solid #10b981 !important; }
.alert-error   { border-left: 3px solid #ef4444 !important; }
.alert-info    { border-left: 3px solid var(--brand-primary, #2cb5a5) !important; }
.alert-title   { font-weight: 600 !important; letter-spacing: -0.01em !important; }

/* === 17. Progress bars: track + fill, no gradient === */
.progress, .progress-bar, .progress-container {
    background: rgba(15,23,42,0.06) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
[data-theme="dark"] .progress,
[data-theme="dark"] .progress-bar,
[data-theme="dark"] .progress-container {
    background: rgba(255,255,255,0.06) !important;
}
.progress-fill {
    background: var(--brand-primary, #2cb5a5) !important;
    box-shadow: none !important;
    border-radius: 999px !important;
}
.progress-text {
    font-weight: 500 !important;
    color: #475569 !important;
}
[data-theme="dark"] .progress-text { color: #cbd5e1 !important; }

/* === 18. Secondary tabs: underline style, no pills === */
.tab-btn, .tab-navigation .tab, .chart-tab,
.tab-navigation [class*="tab"] {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    box-shadow: none !important;
    color: #64748b !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
    padding: 8px 14px !important;
    transition: color 0.15s, border-color 0.15s !important;
}
.tab-btn:hover, .chart-tab:hover { color: #0f172a !important; }
[data-theme="dark"] .tab-btn:hover,
[data-theme="dark"] .chart-tab:hover { color: #f1f5f9 !important; }
.tab-btn.active, .tab-navigation .tab.active, .chart-tab.active {
    color: var(--brand-primary, #2cb5a5) !important;
    border-bottom-color: var(--brand-primary, #2cb5a5) !important;
    background: transparent !important;
}
.tab-navigation, .chart-tabs {
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
[data-theme="dark"] .tab-navigation,
[data-theme="dark"] .chart-tabs {
    border-bottom-color: rgba(255,255,255,0.06) !important;
}

/* === 19. Status indicators: no neon glow ===
   .status-dot keeps its semantic color, just loses the halo. */
.status-dot, .status-icon { box-shadow: none !important; }
.status-badge {
    background: rgba(15,23,42,0.06) !important;
    color: #475569 !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}
[data-theme="dark"] .status-badge {
    background: rgba(255,255,255,0.06) !important;
    color: #cbd5e1 !important;
}
.status-info { color: #475569 !important; }
[data-theme="dark"] .status-info { color: #94a3b8 !important; }

/* === 20. Tables: minimal grid, uppercase quiet headers === */
table, .data-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    background: transparent !important;
}
table thead th, .data-table thead th {
    font-weight: 600 !important;
    color: #94a3b8 !important;
    font-size: 0.6875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    padding: 12px 16px !important;
    text-align: left !important;
    background: transparent !important;
}
table tbody td, .data-table tbody td {
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    padding: 12px 16px !important;
}
[data-theme="dark"] table thead th,
[data-theme="dark"] .data-table thead th {
    border-bottom-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] table tbody td,
[data-theme="dark"] .data-table tbody td {
    border-bottom-color: rgba(255,255,255,0.05) !important;
}
.table-row-clickable {
    cursor: pointer !important;
    transition: background 0.15s !important;
}
.table-row-clickable:hover {
    background: rgba(15,23,42,0.025) !important;
}
[data-theme="dark"] .table-row-clickable:hover {
    background: rgba(255,255,255,0.025) !important;
}
.table-actions {
    display: flex !important;
    gap: 8px !important;
}

/* ============================================================
   FOURTH PASS — page-shell consistency for the Workout Builder
   and other pages with .top-nav / inverted btn-primary
   ============================================================ */

/* === 21. Kill the multi-color page background radial blobs === */
.bg-pattern { display: none !important; }

/* === 22. Top-nav (Workout Builder, Workout Plans, Form Responses) ===
   Flatten the teal/blue gradient to a calm translucent surface,
   matching the main app header on every other page. */
.top-nav {
    background: rgba(255,255,255,0.72) !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
}
[data-theme="dark"] .top-nav {
    background: rgba(10,13,20,0.72) !important;
    border-bottom-color: rgba(255,255,255,0.06) !important;
}
.top-nav .nav-back,
.top-nav .nav-title { color: #0f172a !important; }
[data-theme="dark"] .top-nav .nav-back,
[data-theme="dark"] .top-nav .nav-title { color: #f1f5f9 !important; }
.nav-title { font-weight: 600 !important; letter-spacing: -0.015em !important; }

/* === 23. Universal .btn-primary / .btn-secondary ===
   Primary = solid teal everywhere (cancels the workout pages'
   inverted "white text on teal" treatment).
   Secondary = hairline ghost button. */
.btn-primary {
    background: var(--brand-primary, #2cb5a5) !important;
    color: #ffffff !important;
    border: 1px solid var(--brand-primary, #2cb5a5) !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}
.btn-primary:hover {
    background: var(--brand-primary-dark, #22998a) !important;
    border-color: var(--brand-primary-dark, #22998a) !important;
    transform: none !important;
    box-shadow: none !important;
}

.btn-secondary {
    background: transparent !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    color: #0f172a !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font-weight: 500 !important;
}
.btn-secondary:hover {
    background: rgba(0,0,0,0.04) !important;
    transform: none !important;
}
[data-theme="dark"] .btn-secondary {
    background: transparent !important;
    border-color: rgba(255,255,255,0.10) !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .btn-secondary:hover {
    background: rgba(255,255,255,0.06) !important;
}

/* === 24. AI / purple-themed buttons -> brand teal === */
.btn-ai-generate, .ai-btn {
    background: var(--brand-primary, #2cb5a5) !important;
    color: #ffffff !important;
    border: 1px solid var(--brand-primary, #2cb5a5) !important;
    box-shadow: none !important;
}
.btn-ai-generate:hover, .ai-btn:hover {
    background: var(--brand-primary-dark, #22998a) !important;
    transform: none !important;
}

/* === 25. Save dropdown (workout builder) === */
.save-dropdown { box-shadow: none !important; }
.btn-save-main, .btn-save-toggle {
    background: var(--brand-primary, #2cb5a5) !important;
    color: #ffffff !important;
    border: 1px solid var(--brand-primary, #2cb5a5) !important;
    box-shadow: none !important;
}
.btn-save-main:hover, .btn-save-toggle:hover {
    background: var(--brand-primary-dark, #22998a) !important;
}
.save-dropdown-menu {
    border-radius: 12px !important;
    box-shadow: 0 12px 48px rgba(0,0,0,0.10) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    background: #ffffff !important;
}
[data-theme="dark"] .save-dropdown-menu {
    background: #14171f !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow: 0 12px 48px rgba(0,0,0,0.40) !important;
}
.save-dropdown-item {
    background: transparent !important;
    color: inherit !important;
    border: none !important;
    box-shadow: none !important;
}
.save-dropdown-item:hover {
    background: rgba(13,148,136,0.08) !important;
}

/* === 26. Workout Builder panel headers — quiet uppercase labels === */
.wb-panel-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
[data-theme="dark"] .wb-panel-header {
    border-bottom-color: rgba(255,255,255,0.06) !important;
}
.wb-panel-header span {
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    font-size: 0.6875rem !important;
    color: #94a3b8 !important;
}
.wb-panel-add-btn {
    border-radius: 999px !important;
    box-shadow: none !important;
}
.wb-panel-add-btn:hover {
    background: var(--brand-primary, #2cb5a5) !important;
    border-color: var(--brand-primary, #2cb5a5) !important;
    color: #ffffff !important;
}

/* ============================================================
   FIFTH PASS — supplement-protocols page
   The library/protocol cards used a teal-tinted (mint/dark-teal)
   surface and teal/purple accent typography that bypass the
   universal card override.
   ============================================================ */

/* Container sections — flat */
.library-section, .protocols-section {
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
}
[data-theme="dark"] .library-section,
[data-theme="dark"] .protocols-section {
    background: #14171f !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: none !important;
}

/* Section headings — quiet (was bright teal / purple) */
.library-header h2, .protocols-header h2 {
    color: #0f172a !important;
    font-weight: 600 !important;
    font-size: 1.25rem !important;
    letter-spacing: -0.02em !important;
}
[data-theme="dark"] .library-header h2,
[data-theme="dark"] .protocols-header h2 {
    color: #f1f5f9 !important;
}

/* Library card — neutral surface */
.library-card {
    background: rgba(15,23,42,0.025) !important;
    border: 1px solid rgba(15,23,42,0.06) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    transition: border-color 0.15s, background 0.15s !important;
}
.library-card:hover {
    border-color: rgba(13,148,136,0.40) !important;
    background: rgba(13,148,136,0.04) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .library-card {
    background: rgba(255,255,255,0.025) !important;
    border-color: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] .library-card:hover {
    border-color: rgba(45,212,191,0.40) !important;
    background: rgba(45,212,191,0.05) !important;
}

/* Library card name — dark/light text, weight 600 */
.library-card-name {
    color: #0f172a !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}
[data-theme="dark"] .library-card-name { color: #f1f5f9 !important; }

/* Category pill — neutral monochrome */
.library-card-category {
    background: rgba(15,23,42,0.06) !important;
    color: #475569 !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}
[data-theme="dark"] .library-card-category {
    background: rgba(255,255,255,0.06) !important;
    color: #cbd5e1 !important;
}

/* Card detail text — quiet */
.library-card-details, .protocol-timing, .protocol-notes,
.protocol-schedule-phase, .protocol-private-notes {
    color: #64748b !important;
}
[data-theme="dark"] .library-card-details,
[data-theme="dark"] .protocol-timing,
[data-theme="dark"] .protocol-notes,
[data-theme="dark"] .protocol-schedule-phase,
[data-theme="dark"] .protocol-private-notes {
    color: #94a3b8 !important;
}

/* Protocol card — neutral surface (was deep purple) */
.protocol-card {
    background: rgba(15,23,42,0.025) !important;
    border: 1px solid rgba(15,23,42,0.06) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
.protocol-card:hover {
    border-color: rgba(13,148,136,0.40) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .protocol-card {
    background: rgba(255,255,255,0.025) !important;
    border-color: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] .protocol-card:hover {
    border-color: rgba(45,212,191,0.40) !important;
}

.protocol-name {
    color: #0f172a !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}
[data-theme="dark"] .protocol-name { color: #f1f5f9 !important; }

/* Titration status pills — neutral severity ramp */
.titration-status.active-phase {
    background: rgba(16,185,129,0.10) !important;
    color: #047857 !important;
}
.titration-status.upcoming-change {
    background: rgba(245,158,11,0.10) !important;
    color: #b45309 !important;
}
.titration-status.completed {
    background: rgba(15,23,42,0.06) !important;
    color: #64748b !important;
}
[data-theme="dark"] .titration-status.active-phase {
    background: rgba(16,185,129,0.15) !important;
    color: #6ee7b7 !important;
}
[data-theme="dark"] .titration-status.upcoming-change {
    background: rgba(245,158,11,0.15) !important;
    color: #fcd34d !important;
}
[data-theme="dark"] .titration-status.completed {
    background: rgba(255,255,255,0.06) !important;
    color: #94a3b8 !important;
}

/* Titration phase dots — single accent */
.titration-phase-dot.active { background: var(--brand-primary, #2cb5a5) !important; }
.titration-phase-dot.past   { background: rgba(13,148,136,0.45) !important; }

/* .btn-teal helper class (slips through [class$="-btn"]) */
.btn-teal {
    background: var(--brand-primary, #2cb5a5) !important;
    color: #ffffff !important;
    border: 1px solid var(--brand-primary, #2cb5a5) !important;
    box-shadow: none !important;
}
.btn-teal:hover {
    background: var(--brand-primary-dark, #22998a) !important;
    border-color: var(--brand-primary-dark, #22998a) !important;
}

/* .btn-danger keeps semantic red but loses the heavy weight */
.btn-danger {
    box-shadow: none !important;
    font-weight: 500 !important;
}

/* ============================================================
   SIXTH PASS — dark-mode text contrast fixes
   Flipping the universal card surfaces to dark left a number of
   page-defined text colors (var(--gray-800), inline styles) as
   dark-on-dark. Restore readable contrast across all pages.
   ============================================================ */

/* High-contrast headings + values: bright slate in dark mode */
[data-theme="dark"] .section-title,
[data-theme="dark"] .stat-value,
[data-theme="dark"] .stat-number,
[data-theme="dark"] .billing-card h1,
[data-theme="dark"] .billing-card h2,
[data-theme="dark"] .billing-card h3,
[data-theme="dark"] .billing-card h4,
[data-theme="dark"] .stat-card h1,
[data-theme="dark"] .stat-card h2,
[data-theme="dark"] .stat-card h3,
[data-theme="dark"] [style*="color: var(--gray-800"],
[data-theme="dark"] [style*="color:var(--gray-800"],
[data-theme="dark"] [style*="color: var(--gray-900"],
[data-theme="dark"] [style*="color:var(--gray-900"],
[data-theme="dark"] [style*="color: #1e293b"],
[data-theme="dark"] [style*="color:#1e293b"],
[data-theme="dark"] [style*="color: #0f172a"],
[data-theme="dark"] [style*="color:#0f172a"] {
    color: #f1f5f9 !important;
}

/* Mid-tone body / sub-headings */
[data-theme="dark"] [style*="color: var(--gray-700"],
[data-theme="dark"] [style*="color:var(--gray-700"],
[data-theme="dark"] [style*="color: var(--gray-600"],
[data-theme="dark"] [style*="color:var(--gray-600"],
[data-theme="dark"] [style*="color: #334155"],
[data-theme="dark"] [style*="color:#334155"],
[data-theme="dark"] [style*="color: #475569"],
[data-theme="dark"] [style*="color:#475569"] {
    color: #cbd5e1 !important;
}

/* Quiet labels / meta */
[data-theme="dark"] .stat-label,
[data-theme="dark"] .stat-meta,
[data-theme="dark"] .billing-card .stat-label,
[data-theme="dark"] [style*="color: var(--gray-500"],
[data-theme="dark"] [style*="color:var(--gray-500"],
[data-theme="dark"] [style*="color: var(--gray-400"],
[data-theme="dark"] [style*="color:var(--gray-400"],
[data-theme="dark"] [style*="color: #64748b"],
[data-theme="dark"] [style*="color:#64748b"] {
    color: #94a3b8 !important;
}

/* Stat-change indicators — keep semantic color but brighter on dark */
[data-theme="dark"] .stat-change.up   { color: #4ade80 !important; }
[data-theme="dark"] .stat-change.down { color: #f87171 !important; }

/* Stat-card surface needs to be readable in dark mode (was light gray) */
[data-theme="dark"] .stat-card {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}
.stat-card {
    background: rgba(15,23,42,0.025) !important;
    border: 1px solid rgba(15,23,42,0.05) !important;
}

/* ============================================================
   SEVENTH PASS — planner.html polish
   The page itself is fine, but the empty meal-card image
   placeholder shimmers in bright cyan over a dark canvas, the
   AI chat section uses a washed-out light-purple gradient, and
   the meal-card surface is so subtle it almost disappears.
   ============================================================ */

/* Quiet the bright cyan shimmer empty-state thumbnail */
.meal-card-image-placeholder {
    background: rgba(15,23,42,0.04) !important;
    color: #94a3b8 !important;
    animation: none !important;
}
[data-theme="dark"] .meal-card-image-placeholder {
    background: rgba(255,255,255,0.04) !important;
    color: #64748b !important;
    animation: none !important;
}

/* Meal-card image fallback bg uniform with surface */
.meal-card-image { background: rgba(15,23,42,0.04) !important; }
[data-theme="dark"] .meal-card-image { background: rgba(255,255,255,0.04) !important; }

/* Anchor each meal-card with a visible surface */
.meal-card {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}
[data-theme="dark"] .meal-card {
    background: rgba(255,255,255,0.025) !important;
    border-color: rgba(255,255,255,0.06) !important;
}

/* AI chat section: neutralize the washed-out purple gradient.
   Inline gradients/borders win specificity, so target the
   wrapper class with broader selectors. */
.ai-chat-section[style*="linear-gradient"] {
    background: rgba(15,23,42,0.03) !important;
    border: 1px solid rgba(15,23,42,0.06) !important;
}
[data-theme="dark"] .ai-chat-section[style*="linear-gradient"] {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}
.ai-chat-section .ai-quick-actions-row[style*="border-bottom"] {
    border-bottom-color: rgba(15,23,42,0.06) !important;
}
[data-theme="dark"] .ai-chat-section .ai-quick-actions-row[style*="border-bottom"] {
    border-bottom-color: rgba(255,255,255,0.06) !important;
}

/* Unify macro pills shape with the rest of the app (radius + weight) */
.meal-macro-pill {
    border-radius: 999px !important;
    font-weight: 500 !important;
    padding: 3px 10px !important;
}

/* Note for Client + Reference Links collapsibles: less saturated bars */
.meal-card details > summary[style*="background"] {
    background: rgba(15,23,42,0.03) !important;
    border: 1px solid rgba(15,23,42,0.06) !important;
    color: #475569 !important;
    border-radius: 10px !important;
}
[data-theme="dark"] .meal-card details > summary[style*="background"] {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(255,255,255,0.06) !important;
    color: #cbd5e1 !important;
}

/* ============================================================
   EIGHTH PASS — planner.html micro-polish per UI critique
   1. Pink delete/undo buttons -> ghost icons
   2. "Recipe & Ingredients" button -> inline-sized
   3. AI chat section wrapper -> transparent shell
   4. Note-for-Client / Reference-Links bars -> neutral surfaces
   ============================================================ */

/* (1) Delete + Undo action buttons in meal-card -> ghost icon style */
.meal-card-content button[data-action="delete-meal"],
.meal-card-content button[data-action="undo-meal"] {
    background: transparent !important;
    color: #dc2626 !important;
    border: 1px solid rgba(220, 38, 38, 0.20) !important;
    border-radius: 8px !important;
    padding: 6px !important;
    width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}
.meal-card-content button[data-action="delete-meal"]:hover,
.meal-card-content button[data-action="undo-meal"]:hover {
    background: rgba(220, 38, 38, 0.08) !important;
    border-color: rgba(220, 38, 38, 0.35) !important;
    transform: none !important;
}
[data-theme="dark"] .meal-card-content button[data-action="delete-meal"],
[data-theme="dark"] .meal-card-content button[data-action="undo-meal"] {
    color: #f87171 !important;
    border-color: rgba(248, 113, 113, 0.25) !important;
}
[data-theme="dark"] .meal-card-content button[data-action="delete-meal"]:hover,
[data-theme="dark"] .meal-card-content button[data-action="undo-meal"]:hover {
    background: rgba(248, 113, 113, 0.10) !important;
    border-color: rgba(248, 113, 113, 0.40) !important;
}

/* (2) Recipe & Ingredients button: inline width, smaller */
.meal-card-content button[data-action="get-recipe"] {
    width: auto !important;
    align-self: flex-start !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
}

/* (3) AI chat section -> transparent shell, hairline divider only */
.meal-card .ai-chat-section,
.meal-card .ai-chat-section[style] {
    background: transparent !important;
    border: 1px solid rgba(15,23,42,0.06) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}
[data-theme="dark"] .meal-card .ai-chat-section,
[data-theme="dark"] .meal-card .ai-chat-section[style] {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}
.meal-card .ai-chat-section [style*="border-bottom"] {
    border-bottom-color: rgba(15,23,42,0.06) !important;
}
[data-theme="dark"] .meal-card .ai-chat-section [style*="border-bottom"] {
    border-bottom-color: rgba(255,255,255,0.06) !important;
}
.meal-card .ai-chat-section [style*="border-top"] {
    border-top-color: rgba(15,23,42,0.06) !important;
}
[data-theme="dark"] .meal-card .ai-chat-section [style*="border-top"] {
    border-top-color: rgba(255,255,255,0.06) !important;
}

/* (4) Note-for-Client / Reference-Links collapsibles -> neutral bars
       (Stronger selector — matches any inline style on the summary) */
.meal-card-content details > summary,
.meal-card-content details > summary[style] {
    background: rgba(15,23,42,0.03) !important;
    color: #475569 !important;
    border: 1px solid rgba(15,23,42,0.06) !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}
[data-theme="dark"] .meal-card-content details > summary,
[data-theme="dark"] .meal-card-content details > summary[style] {
    background: rgba(255,255,255,0.03) !important;
    color: #cbd5e1 !important;
    border-color: rgba(255,255,255,0.06) !important;
}

/* Open-state inner panel of Note-for-Client (cream bg + amber border) */
.meal-card-content details[open] > div[style*="background"] {
    background: rgba(15,23,42,0.02) !important;
    border: 1px solid rgba(15,23,42,0.06) !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
}
[data-theme="dark"] .meal-card-content details[open] > div[style*="background"] {
    background: rgba(255,255,255,0.02) !important;
    border-color: rgba(255,255,255,0.06) !important;
}

/* ============================================================
   EIGHTH PASS — page-defined class text colors, dark-mode fix
   The SIXTH PASS handles inline style="color: var(--gray-800)…"
   attributes, but many pages declare CLASS rules like:
       .plan-name { color: var(--gray-800); }
   inside a per-page <style> block. Those don't match the
   [style*="…"] attribute selector, so they stay dark-on-dark
   inside the dark-themed card surfaces forced by the THIRD PASS.
   This pass adds explicit class overrides for the most common
   page-defined text classes seen across coach-billing.html,
   coach-workouts.html, coach-workout-plans.html, coach-messages.html,
   coach-challenges.html, coach-stats.html, manage-clients.html,
   dashboard.html, planner.html, client-feed.html, and friends.
   Light mode is intentionally untouched — those classes already
   sit dark-on-white and pass contrast.
   ============================================================ */

/* --- Bright, high-contrast: titles, names, primary numeric values --- */
[data-theme="dark"] .page-title,
[data-theme="dark"] .plan-name,
[data-theme="dark"] .price-amount,
[data-theme="dark"] .payment-name,
[data-theme="dark"] .promo-code,
[data-theme="dark"] .connect-title,
[data-theme="dark"] .modal-title,
[data-theme="dark"] .stat-number,
[data-theme="dark"] .convo-list-header,
[data-theme="dark"] .thread-header,
[data-theme="dark"] .challenge-card-title,
[data-theme="dark"] .wpr-program-card,
[data-theme="dark"] .wpr-ex-name,
[data-theme="dark"] .wpr-search-result-name,
[data-theme="dark"] .wc-day-num,
[data-theme="dark"] .wc-detail-exercise,
[data-theme="dark"] .ccc-modal-head,
[data-theme="dark"] .ccc-card,
[data-theme="dark"] .cag-header,
[data-theme="dark"] .meal-feed-item-row,
[data-theme="dark"] .convo-item {
    color: #f1f5f9 !important;
}

/* --- Mid-tone: secondary headings, body text, list items --- */
[data-theme="dark"] .payments-title,
[data-theme="dark"] .client-link-title,
[data-theme="dark"] .form-label,
[data-theme="dark"] .feature-item,
[data-theme="dark"] .wpr-form-label,
[data-theme="dark"] .wpr-day-exercises,
[data-theme="dark"] .wpr-exercise-row,
[data-theme="dark"] .wpr-schedule-day,
[data-theme="dark"] .wpr-day-chip,
[data-theme="dark"] .wc-day-detail,
[data-theme="dark"] .ccc-section,
[data-theme="dark"] .ccc-row,
[data-theme="dark"] .ccc-stat,
[data-theme="dark"] .ccc-pill,
[data-theme="dark"] .ccc-modal-foot,
[data-theme="dark"] .cag-section,
[data-theme="dark"] .cag-row,
[data-theme="dark"] .convo-preview,
[data-theme="dark"] .notif-overview-row,
[data-theme="dark"] .meal-feed-actions,
[data-theme="dark"] .reaction-badge,
[data-theme="dark"] .reaction-picker,
[data-theme="dark"] .reaction-trigger {
    color: #cbd5e1 !important;
}

/* --- Quiet: labels, meta, dates, descriptions, empty states --- */
[data-theme="dark"] .connect-desc,
[data-theme="dark"] .plan-desc,
[data-theme="dark"] .price-interval,
[data-theme="dark"] .payment-date,
[data-theme="dark"] .setup-fee,
[data-theme="dark"] .promo-meta,
[data-theme="dark"] .empty-text,
[data-theme="dark"] .loading-text,
[data-theme="dark"] .convo-time,
[data-theme="dark"] .convo-empty,
[data-theme="dark"] .msg-time,
[data-theme="dark"] .thread-empty,
[data-theme="dark"] .ccc-tiny,
[data-theme="dark"] .ccc-draft-why,
[data-theme="dark"] .ccc-empty,
[data-theme="dark"] .ccc-loading,
[data-theme="dark"] .ccc-stat-label,
[data-theme="dark"] .ccc-stat-sub,
[data-theme="dark"] .ccc-row-line2,
[data-theme="dark"] .cag-detail,
[data-theme="dark"] .activity-client-time,
[data-theme="dark"] .activity-detail-time,
[data-theme="dark"] .activity-tl-day-label,
[data-theme="dark"] .wpr-program-meta,
[data-theme="dark"] .wpr-ex-detail,
[data-theme="dark"] .wpr-search-result-meta,
[data-theme="dark"] .wc-day-header,
[data-theme="dark"] .wc-detail-ex-info,
[data-theme="dark"] .wc-legend-item,
[data-theme="dark"] .wp-summary-label,
[data-theme="dark"] .wp-exercise-comparison,
[data-theme="dark"] .wp-compare-same,
[data-theme="dark"] .notif-overview-message,
[data-theme="dark"] .meal-comment-text,
[data-theme="dark"] .meal-feed-items-toggle,
[data-theme="dark"] .reaction-count,
[data-theme="dark"] .thread-back-btn,
[data-theme="dark"] .drawer-close {
    color: #94a3b8 !important;
}

/* --- Inputs not already covered by the form-input pass --- */
[data-theme="dark"] .client-link-input,
[data-theme="dark"] .wpr-form-input {
    background: #14171f !important;
    border-color: rgba(255,255,255,0.10) !important;
    color: #cbd5e1 !important;
}

/* --- Panels that share the card-surface treatment but render
       their own text colors. Force readable contrast on inner
       generic descendants without breaking semantic badges. --- */
[data-theme="dark"] .convo-list-panel,
[data-theme="dark"] .thread-panel,
[data-theme="dark"] .preview-panel,
[data-theme="dark"] .bulk-panel {
    color: #cbd5e1 !important;
}