/* Dark Theme - Brand Colors */
/* Background: Trust Blue (#081A38) */
/* Primary: Red (#E10600) */
/* Secondary: Gold/Copper (#F5F3EE) */
/* Tertiary: Violet (#8A2BE2) */
/* Accent: Green (#3ABF64) */
/* White: Clarity White (#F5F3EE) */

:root,
body.dark-theme,
html.dark-theme {
    /* Brand Colors */
    --color-trust-blue: #081A38;
    --color-clarity-white: #F5F3EE;
    --color-action-red: #E10600;
    --color-premium-copper: #F5F3EE;
    --color-violet: #8A2BE2;
    --color-growth-green: #3ABF64;

    /* Background Colors */
    --bg-primary: var(--color-trust-blue);
    --bg-secondary: #08101d;

    /* Text Colors */
    --text-primary: var(--color-clarity-white);
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --text-accent: var(--color-growth-green);
    --text-light: #e2e8f0;
    --text-bg: var(--color-trust-blue);
    --text-dark: #000000;

    /* Accent Colors */
    --accent-primary: var(--color-action-red);
    --accent-secondary: var(--color-premium-copper);
    --accent-tertiary: var(--color-violet);

    /* Border Color */
    --border-color: #1e293b;

    /* Shadows */
    --shadow-copper-glow: 0 -4px 20px rgba(184, 115, 51, 0.4);
    --shadow-lift: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    --shadow-mobile-card: 0 8px 20px rgba(8, 26, 56, 0.2);

    /* Radius */
    --radius-card: 16px;
    --radius-btn: 14px;
    --radius-container: 20px;
}

/* Global Dark Styles */
body.dark-theme,
body.dark-theme #wrapper,
body.dark-theme #content,
html.dark-theme body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Ensure all main containers use theme colors */
.text-blue-700 {
    color: #F5F3EE !important;
}

.text-yellow-700 {
    color: #F5F3EE !important;
}

.text-green-700 {
    color: #F5F3EE !important;
}

.text-purple-700 {
    color: #F5F3EE !important;
}

.rounded-xl {
    border-radius: 0.1rem;
}

.rounded-2xl {
    border-radius: 0.4rem;
}


body.dark-theme nav {
    background: linear-gradient(135deg, #020617 0%, #081A38 40%, #1e293b 100%) !important;
}

.b2-bg-gradient {
    background: linear-gradient(135deg, #020617 0%, #081A38 40%, #1e293b 100%) !important;
}

body.dark-theme .hover\:bg-blue-50:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

body.dark-theme .b2-logo-bg {
    background: linear-gradient(135deg, rgb(218, 224, 248) 0%, rgb(240, 246, 255) 40%, rgb(201, 220, 250) 100%) !important;
}

/* Text Color Classes */
body.dark-theme .text-primary,
body.dark-theme .text-primary-text {
    color: var(--text-primary) !important;
}

body.dark-theme .text-secondary,
body.dark-theme .text-secondary-text {
    color: var(--text-secondary) !important;
}

body.dark-theme .text-tertiary,
body.dark-theme .text-tertiary-text {
    color: var(--text-tertiary) !important;
}

body.dark-theme .text-accent,
body.dark-theme .text-accent-text {
    color: var(--text-accent) !important;
}

body.dark-theme .text-light {
    color: var(--text-light) !important;
}

body.dark-theme .text-bg {
    color: var(--text-bg) !important;
}

body.dark-theme .text-dark,
body.dark-theme .text-black {
    color: var(--text-dark) !important;
}

/* Background Colors */
body.dark-theme .bg-primary {
    background-color: var(--bg-primary) !important;
}

body.dark-theme .bg-secondary {
    background-color: var(--bg-secondary) !important;
}

/* Override Tailwind Background Classes */
body.dark-theme .bg-white,
body.dark-theme .bg-surface {
    background-color: var(--bg-secondary) !important;
}

/* Ensure any variant named bg-surface-card also uses dark theme */
body.dark-theme .bg-surface-card,
body.dark-theme .bg-surface-card.rounded-xl {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* bg-b2-gray-50 - Trust Blue (dark theme background) */
body.dark-theme .bg-b2-gray-50,
html.dark-theme .bg-b2-gray-50 {
    background-color: var(--bg-primary) !important;
    /* Trust Blue (#081A38) */
    background: var(--bg-primary) !important;
    /* Trust Blue (#081A38) */
}

body.dark-theme .bg-gray-50 {
    background-color: var(--bg-primary) !important;
}

body.dark-theme .bg-neutral-50,
body.dark-theme .bg-neutral-bg {
    background-color: var(--bg-secondary) !important;
}

/* Override Tailwind Text Classes */
body.dark-theme .text-neutral-900,
body.dark-theme .text-gray-900 {
    color: var(--text-primary) !important;
}

/* Licensee Referral Details: main text should be white in dark mode */
body.dark-theme .licensee-referral-details .text-neutral-900,
body.dark-theme .licensee-referral-details .text-gray-900 {
    color: #F5F3EE !important;
    /* Clarity White for maximum contrast */
}

/* Exception: Header text should be gold, not Clarity White - Higher specificity */
body.dark-theme header#unified-header .text-neutral-900,
body.dark-theme header#unified-header .text-gray-900,
body.dark-theme header#unified-header h1.text-neutral-900,
body.dark-theme header#unified-header h1.text-gray-900,
body.dark-theme header#unified-header div .text-neutral-900,
body.dark-theme header#unified-header div .text-gray-900,
body.dark-theme header#unified-header div.flex h1.text-neutral-900,
body.dark-theme header#unified-header div.flex.items-center h1.text-neutral-900 {
    color: #F5F3EE !important;
    /* Premium Copper / Gold */
}

body.dark-theme .text-neutral-700,
body.dark-theme .text-gray-700 {
    color: var(--text-secondary) !important;
}

body.dark-theme .text-neutral-600,
body.dark-theme .text-gray-600 {
    color: var(--text-secondary) !important;
}

body.dark-theme .text-neutral-500,
body.dark-theme .text-gray-500 {
    color: #F5F3EE !important;
}

body.dark-theme .text-neutral-400,
body.dark-theme .text-gray-400 {
    color: var(--text-tertiary) !important;
}

body.dark-theme .text-neutral-300,
body.dark-theme .text-gray-300 {
    color: var(--text-tertiary) !important;
}

/* Business Member Referral Details: grey helper text should be white in dark mode */
body.dark-theme .bm-referral-details .text-text-secondary,
body.dark-theme .bm-referral-details .text-neutral-700,
body.dark-theme .bm-referral-details .text-gray-700,
body.dark-theme .bm-referral-details .text-neutral-600,
body.dark-theme .bm-referral-details .text-gray-600,
body.dark-theme .bm-referral-details .text-neutral-500,
body.dark-theme .bm-referral-details .text-gray-500,
body.dark-theme .bm-referral-details .text-neutral-400,
body.dark-theme .bm-referral-details .text-gray-400,
body.dark-theme .bm-referral-details .text-neutral-300,
body.dark-theme .bm-referral-details .text-gray-300 {
    color: #F5F3EE !important;
    /* Clarity White for maximum contrast */
}

/* Business Member Claim Referral Details: grey helper text should be white in dark mode */
body.dark-theme .bm-claim-referral-details .text-text-secondary,
body.dark-theme .bm-claim-referral-details .text-neutral-700,
body.dark-theme .bm-claim-referral-details .text-gray-700,
body.dark-theme .bm-claim-referral-details .text-neutral-600,
body.dark-theme .bm-claim-referral-details .text-gray-600,
body.dark-theme .bm-claim-referral-details .text-neutral-500,
body.dark-theme .bm-claim-referral-details .text-gray-500,
body.dark-theme .bm-claim-referral-details .text-neutral-400,
body.dark-theme .bm-claim-referral-details .text-gray-400,
body.dark-theme .bm-claim-referral-details .text-neutral-300,
body.dark-theme .bm-claim-referral-details .text-gray-300 {
    color: #F5F3EE !important;
    /* Clarity White for maximum contrast */
}

/* Licensee Referral Details: grey helper text should be white in dark mode */
body.dark-theme .licensee-referral-details .text-text-secondary,
body.dark-theme .licensee-referral-details .text-neutral-700,
body.dark-theme .licensee-referral-details .text-gray-700,
body.dark-theme .licensee-referral-details .text-neutral-600,
body.dark-theme .licensee-referral-details .text-gray-600,
body.dark-theme .licensee-referral-details .text-neutral-500,
body.dark-theme .licensee-referral-details .text-gray-500,
body.dark-theme .licensee-referral-details .text-neutral-400,
body.dark-theme .licensee-referral-details .text-gray-400,
body.dark-theme .licensee-referral-details .text-neutral-300,
body.dark-theme .licensee-referral-details .text-gray-300 {
    color: #F5F3EE !important;
    /* Clarity White for maximum contrast */
}

/* Border Colors */
body.dark-theme .border-neutral-200,
body.dark-theme .border-gray-200 {
    border-color: var(--border-color) !important;
}

body.dark-theme .border-neutral-300,
body.dark-theme .border-gray-300 {
    border-color: var(--border-color) !important;
}

/* Typography System - Brand Guide Colors */
/* H1 Hero Headlines: Copper #F5F3EE */
body.dark-theme h1 {
    color: #F5F3EE !important;
    /* Copper */
}

/* H2 Section Headers: Warm White #F5F3EE */
body.dark-theme h2 {
    color: #F5F3EE !important;
    /* Warm White / Clarity White */
}

/* H3 Card Titles: Copper #F5F3EE */
body.dark-theme h3 {
    color: #F5F3EE !important;
    /* Copper */
}

/* H4-H6: Use Clarity White for consistency */
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6 {
    color: var(--color-clarity-white) !important;
}

/* Header Background - Match Sidebar */
/* Override general .bg-surface rule for headers */
body.dark-theme header.bg-surface,
body.dark-theme header#unified-header,
html.dark-theme header.bg-surface,
html.dark-theme header#unified-header,
body.dark-theme header.bg-surface.border-b,
body.dark-theme header#unified-header.bg-surface,
html.dark-theme header.bg-surface.border-b,
html.dark-theme header#unified-header.bg-surface,
body.dark-theme header#unified-header.bg-surface.border-b,
html.dark-theme header#unified-header.bg-surface.border-b {
    background-color: var(--bg-primary) !important;
    /* Same as sidebar */
    background: var(--bg-primary) !important;
    /* Same as sidebar */
    border-color: var(--border-color) !important;
}

/* Header Text - Gold Color (High Specificity) */
body.dark-theme header h1,
html.dark-theme header h1,
body.dark-theme header#unified-header h1,
body.dark-theme header#unified-header h1.text-neutral-900,
body.dark-theme header#unified-header h1.text-gray-900,
body.dark-theme header#unified-header .text-neutral-900,
body.dark-theme header#unified-header .text-gray-900,
body.dark-theme header#unified-header .text-xl,
body.dark-theme header#unified-header .text-2xl,
body.dark-theme header#unified-header .font-semibold,
body.dark-theme header#unified-header div h1,
body.dark-theme header#unified-header div .text-neutral-900,
body.dark-theme header#unified-header div .text-gray-900,
body.dark-theme header#unified-header div.flex h1,
body.dark-theme header#unified-header div.flex .text-neutral-900,
body.dark-theme header#unified-header div.flex.items-center h1 {
    color: #F5F3EE !important;
    /* Premium Copper / Gold */
}

/* Sidebar */
body.dark-theme nav.bg-surface,
body.dark-theme nav#sidebar,
body.dark-theme aside.bg-surface,
body.dark-theme aside#sidebar,
html.dark-theme nav.bg-surface,
html.dark-theme nav#sidebar,
html.dark-theme aside.bg-surface,
html.dark-theme aside#sidebar {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}


body.dark-theme nav .border-b,
body.dark-theme nav .border-r,
body.dark-theme aside .border-b,
body.dark-theme aside .border-r {
    border-color: var(--border-color) !important;
}

body.dark-theme nav a,
body.dark-theme aside a {
    color: var(--text-secondary) !important;
}

body.dark-theme nav a:hover,
body.dark-theme aside a:hover {
    color: var(--text-primary) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

body.dark-theme nav a.bg-blue-50,
body.dark-theme aside a.bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: var(--text-primary) !important;
}

/* Sidebar Text Colors */
body.dark-theme nav .text-neutral-900,
body.dark-theme nav .text-neutral-700,
body.dark-theme nav .text-neutral-400,
body.dark-theme nav .text-label,
body.dark-theme nav h3,
body.dark-theme nav span,
body.dark-theme aside .text-neutral-900,
body.dark-theme aside .text-neutral-700,
body.dark-theme aside .text-neutral-400,
body.dark-theme aside .text-label,
body.dark-theme aside h3,
body.dark-theme aside span {
    color: var(--text-secondary) !important;
}

/* Override for Linkup text - Gold */
body.dark-theme nav#sidebar>div:first-child span.font-bold,
body.dark-theme nav#sidebar .text-xl.font-bold,
body.dark-theme aside#sidebar>div:first-child span.font-bold,
body.dark-theme aside#sidebar span.font-semibold.text-xl,
body.dark-theme aside#sidebar>div:first-child span.font-semibold.text-xl,
body.dark-theme aside#sidebar>div:first-child span.text-neutral-900.font-semibold {
    color: #F5F3EE !important;
    /* Premium Copper / Gold */
}

/* B2 text in sidebar - White */
body.dark-theme nav#sidebar div.bg-\[#DC2626\],
body.dark-theme nav#sidebar div[class*="bg-[#DC2626]"],
body.dark-theme nav#sidebar div.text-white {
    color: #FFFFFF !important;
    /* White */
}

body.dark-theme nav .text-brand-blue,
body.dark-theme aside .text-brand-blue {
    color: var(--text-primary) !important;
}

body.dark-theme nav a.text-brand-blue,
body.dark-theme aside a.text-brand-blue {
    color: var(--text-primary) !important;
}

/* Sidebar Icons */
body.dark-theme nav i,
body.dark-theme aside i {
    color: var(--text-secondary) !important;
}

body.dark-theme nav a.bg-blue-50 i,
body.dark-theme nav a.text-brand-blue i,
body.dark-theme aside a.bg-blue-50 i,
body.dark-theme aside a.text-brand-blue i {
    color: var(--text-primary) !important;
}

/* Cards */
body.dark-theme .bg-white.rounded-xl,
body.dark-theme .bg-surface.rounded-xl {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Tables */
body.dark-theme thead.bg-neutral-50,
body.dark-theme thead.bg-neutral-bg {
    background-color: var(--bg-secondary) !important;
}

body.dark-theme .divide-neutral-200,
body.dark-theme .divide-gray-200 {
    border-color: var(--border-color) !important;
}

/* Hover States */
body.dark-theme .hover\:bg-neutral-50:hover,
body.dark-theme .hover\:bg-gray-50:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

body.dark-theme .hover\:bg-neutral-100:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Alert Backgrounds */
body.dark-theme .bg-red-50 {
    background-color: rgba(225, 6, 0, 0.1) !important;
}

body.dark-theme .bg-orange-50 {
    background-color: rgba(251, 146, 60, 0.1) !important;
}

body.dark-theme .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

body.dark-theme .bg-green-50 {
    background-color: rgba(58, 191, 100, 0.1) !important;
}

body.dark-theme .bg-emerald-50 {
    background-color: rgba(58, 191, 100, 0.1) !important;
}

/* Status Badges */
body.dark-theme .bg-yellow-100 {
    background-color: rgba(234, 179, 8, 0.2) !important;
}

body.dark-theme .bg-green-100 {
    background-color: rgba(58, 191, 100, 0.2) !important;
}

body.dark-theme .bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.2) !important;
}

body.dark-theme .bg-purple-100 {
    background-color: rgba(168, 85, 247, 0.2) !important;
}

body.dark-theme .bg-teal-100 {
    background-color: rgba(20, 184, 166, 0.2) !important;
}

body.dark-theme .bg-amber-100 {
    background-color: rgba(251, 191, 36, 0.2) !important;
}

body.dark-theme .bg-red-100 {
    background-color: rgba(225, 6, 0, 0.2) !important;
}

body.dark-theme .bg-gray-100 {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Status Badge Text */
body.dark-theme .text-yellow-800 {
    color: rgba(234, 179, 8, 0.9) !important;
}

body.dark-theme .text-green-800 {
    color: rgba(58, 191, 100, 0.9) !important;
}

body.dark-theme .text-blue-800,
body.dark-theme .text-brand-blue-primary {
    color: rgba(59, 130, 246, 0.9) !important;
}

body.dark-theme .text-purple-800 {
    color: rgba(168, 85, 247, 0.9) !important;
}

body.dark-theme .text-teal-800 {
    color: rgba(20, 184, 166, 0.9) !important;
}

body.dark-theme .text-amber-800 {
    color: rgba(251, 191, 36, 0.9) !important;
}

body.dark-theme .text-red-800 {
    color: rgba(225, 6, 0, 0.9) !important;
}

body.dark-theme .text-gray-800 {
    color: var(--text-secondary) !important;
}

body.dark-theme .text-emerald-800 {
    color: rgba(58, 191, 100, 0.9) !important;
}

body.dark-theme .text-emerald-600 {
    color: rgba(58, 191, 100, 0.8) !important;
}

/* Icon Colors */
body.dark-theme .text-blue-500 {
    color: rgba(59, 130, 246, 0.8) !important;
}

body.dark-theme .text-emerald-500 {
    color: rgba(58, 191, 100, 0.8) !important;
}

body.dark-theme .text-purple-500 {
    color: rgba(168, 85, 247, 0.8) !important;
}

body.dark-theme .text-orange-500 {
    color: rgba(251, 146, 60, 0.8) !important;
}

body.dark-theme .text-yellow-500 {
    color: rgba(234, 179, 8, 0.8) !important;
}

body.dark-theme .text-red-600 {
    color: rgba(225, 6, 0, 0.9) !important;
}

body.dark-theme .text-orange-600 {
    color: rgba(251, 146, 60, 0.9) !important;
}

body.dark-theme .text-green-600 {
    color: rgba(58, 191, 100, 0.9) !important;
}

body.dark-theme .text-blue-600 {
    color: #F5F3EE !important;
}

/* Theme Toggle Icon */
body.dark-theme #theme-icon,
body.dark-theme #theme-icon-mobile {
    color: var(--text-primary) !important;
}

/* Ensure unified header respects Tailwind's hidden class on mobile */
@media (max-width: 1023px) {

    body.dark-theme #unified-header.hidden,
    html.dark-theme #unified-header.hidden {
        display: none !important;
    }
}

/* Announcement Cards - Brand Colors */
body.dark-theme .border-l-\[#E10600\] {
    border-left-color: #E10600 !important;
}

body.dark-theme .bg-\[#E10600\]\/10 {
    background-color: rgba(225, 6, 0, 0.1) !important;
}

body.dark-theme .border-l-\[#F5F3EE\] {
    border-left-color: #F5F3EE !important;
}

body.dark-theme .bg-\[#F5F3EE\]\/10 {
    background-color: rgba(184, 115, 51, 0.1) !important;
}

body.dark-theme .border-l-\[#3ABF64\] {
    border-left-color: #3ABF64 !important;
}

body.dark-theme .bg-\[#3ABF64\]\/10 {
    background-color: rgba(58, 191, 100, 0.1) !important;
}

body.dark-theme .text-\[#E10600\] {
    color: #E10600 !important;
}

body.dark-theme .text-\[#F5F3EE\] {
    color: #F5F3EE !important;
}

body.dark-theme .text-\[#3ABF64\] {
    color: #3ABF64 !important;
}

body.dark-theme .bg-\[#E10600\]\/20 {
    background-color: rgba(225, 6, 0, 0.2) !important;
}

body.dark-theme .bg-\[#F5F3EE\]\/20 {
    background-color: rgba(184, 115, 51, 0.2) !important;
}

body.dark-theme .bg-\[#3ABF64\]\/20 {
    background-color: rgba(58, 191, 100, 0.2) !important;
}

body.dark-theme .border-\[#E10600\]\/30 {
    border-color: rgba(225, 6, 0, 0.3) !important;
}

body.dark-theme .border-\[#F5F3EE\]\/30 {
    border-color: rgba(184, 115, 51, 0.3) !important;
}

body.dark-theme .border-\[#3ABF64\]\/30 {
    border-color: rgba(58, 191, 100, 0.3) !important;
}

/* Modals */
body.dark-theme .bg-white.rounded-lg {
    background-color: var(--bg-secondary) !important;
}

/* Profile overview card uses the standard card background in dark theme (no exception). */

/*
 * Page-specific override: force the business profile page main wrapper to be transparent
 * even when global dark-theme rules attempt to set background via utility classes.
 */
body.dark-theme #business-profile-main,
html.dark-theme #business-profile-main,
body.dark-theme .min-h-screen.bg-transparent,
html.dark-theme .min-h-screen.bg-transparent {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/*
 * Make verification items (progress track and status rows) transparent on the
 * business profile page in dark theme so they don't show a white/yellow background.
 */
body.dark-theme #verification-badges .bg-yellow-50,
html.dark-theme #verification-badges .bg-yellow-50,
body.dark-theme #verification-badges .bg-green-50,
html.dark-theme #verification-badges .bg-green-50,
body.dark-theme #verification-badges .bg-gray-200,
html.dark-theme #verification-badges .bg-gray-200 {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Verification row border + small action button */
body.dark-theme #verification-badges .verification-row,
html.dark-theme #verification-badges .verification-row {
    position: relative;
    padding-right: 3rem !important;
    /* room for action button */
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: transparent !important;
}

body.dark-theme #verification-badges .verify-action-btn,
html.dark-theme #verification-badges .verify-action-btn {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.92);
    color: var(--bg-secondary);
    font-size: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

body.dark-theme #verification-badges .verify-action-btn i {
    line-height: 1;
}

/* Complete Verification button - small and bottom-right inside the card */
body.dark-theme #verification-badges #complete-verification-btn,
html.dark-theme #verification-badges #complete-verification-btn {
    position: absolute;
    right: 1rem;
    bottom: 1.25rem;
    padding: 0.5rem 0.9rem !important;
    border-radius: 9999px !important;
    background-color: #E10600 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    font-weight: 600 !important;
    z-index: 20 !important;
}

/* Increase padding-bottom so button sits inside card and doesn't overlap rows */
body.dark-theme #verification-badges,
html.dark-theme #verification-badges {
    padding-bottom: 3.5rem !important;
}

body.dark-theme #verification-badges #complete-verification-btn:hover,
html.dark-theme #verification-badges #complete-verification-btn:hover {
    background-color: #c10500 !important;
}

body.dark-theme .bg-white.rounded-md {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Input Fields */
body.dark-theme input,
body.dark-theme textarea,
body.dark-theme select {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Placeholder text - ensure visible in dark theme across browsers */
body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder {
    color: #F5F3EE !important;
    opacity: 1 !important;
}

/* Vendor-prefixed placeholders for broader browser support */
body.dark-theme input::-webkit-input-placeholder,
body.dark-theme textarea::-webkit-input-placeholder {
    color: #F5F3EE !important;
    opacity: 1 !important;
}

body.dark-theme input::-moz-placeholder,
body.dark-theme textarea::-moz-placeholder {
    color: #F5F3EE !important;
    opacity: 1 !important;
}

body.dark-theme input:-ms-input-placeholder,
body.dark-theme textarea:-ms-input-placeholder {
    color: #F5F3EE !important;
    opacity: 1 !important;
}

body.dark-theme input::-ms-input-placeholder,
body.dark-theme textarea::-ms-input-placeholder {
    color: #F5F3EE !important;
    opacity: 1 !important;
}

/* Checkboxes - White in dark theme */
body.dark-theme input[type="checkbox"],
html.dark-theme input[type="checkbox"] {
    background-color: #F5F3EE !important;
    /* Clarity White */
    border-color: var(--border-color) !important;
    accent-color: #E10600 !important;
    /* Action Red for checked state */
}

body.dark-theme input[type="checkbox"]:checked,
html.dark-theme input[type="checkbox"]:checked {
    background-color: #E10600 !important;
    /* Action Red when checked */
    border-color: #E10600 !important;
}

body.dark-theme input[type="checkbox"]:focus,
html.dark-theme input[type="checkbox"]:focus {
    border-color: #F5F3EE !important;
    /* Premium Copper focus ring */
    outline: 2px solid #F5F3EE !important;
    outline-offset: 2px !important;
}

/* KPI Card Labels - Brand Green Color */
body.dark-theme #kpi-section .text-label,
body.dark-theme #kpi-referrals .text-label,
body.dark-theme #kpi-earnings .text-label,
body.dark-theme #kpi-trust .text-label,
body.dark-theme #kpi-conversion .text-label,
body.dark-theme #kpi-referrals p.text-label,
body.dark-theme #kpi-earnings p.text-label,
body.dark-theme #kpi-trust p.text-label,
body.dark-theme #kpi-conversion p.text-label {
    color: #3ABF64 !important;
    /* Growth Green */
}

/* KPI Card Icons - Brand Colors */
/* Referrals Sent - Paper Plane: White (for dark theme) */
body.dark-theme #kpi-referrals .fa-paper-plane,
body.dark-theme #kpi-referrals i.fa-paper-plane {
    color: #F5F3EE !important;
    /* Clarity White */
}

/* Total Earnings - Dollar Sign: Growth Green */
body.dark-theme #kpi-earnings .fa-dollar-sign,
body.dark-theme #kpi-earnings i.fa-dollar-sign {
    color: #3ABF64 !important;
    /* Growth Green */
}

/* Trust Score - Shield: Premium Copper */
body.dark-theme #kpi-trust .fa-shield-halved,
body.dark-theme #kpi-trust i.fa-shield-halved {
    color: #F5F3EE !important;
    /* Premium Copper */
}

/* Conversion Rate - Chart Line: Action Red */
body.dark-theme #kpi-conversion .fa-chart-line,
body.dark-theme #kpi-conversion i.fa-chart-line {
    color: #E10600 !important;
    /* Action Red */
}

/* KPI Card Borders - Match Icon Colors */
/* Referrals Sent - Clarity White */
body.dark-theme #kpi-referrals {
    border-color: #F5F3EE !important;
    /* Clarity White */
}

/* Total Earnings - Growth Green */
body.dark-theme #kpi-earnings {
    border-color: #3ABF64 !important;
    /* Growth Green */
}

/* Trust Score - Premium Copper */
body.dark-theme #kpi-trust {
    border-color: #F5F3EE !important;
    /* Premium Copper */
}

/* Conversion Rate - Action Red */
body.dark-theme #kpi-conversion {
    border-color: #E10600 !important;
    /* Action Red */
}

/* Referrals Page Cards */
/* Referrals Received - Violet (Brand Tertiary) */
body.dark-theme #kpi-received {
    border-color: #8A2BE2 !important;
    /* Violet */
}

/* Active Referrals - Action Red */
body.dark-theme #kpi-active {
    border-color: #E10600 !important;
    /* Action Red */
}

/* Average Commission - Growth Green */
body.dark-theme #kpi-commission {
    border-color: #3ABF64 !important;
    /* Growth Green */
}

/* KPI Card Borders */
body.dark-theme .border-blue-300 {
    border-color: rgba(59, 130, 246, 0.3) !important;
}

body.dark-theme .border-emerald-300 {
    border-color: rgba(58, 191, 100, 0.3) !important;
}

body.dark-theme .border-purple-300 {
    border-color: rgba(168, 85, 247, 0.3) !important;
}

body.dark-theme .border-orange-300 {
    border-color: rgba(251, 146, 60, 0.3) !important;
}

body.dark-theme .border-yellow-300 {
    border-color: rgba(234, 179, 8, 0.3) !important;
}

body.dark-theme .border-red-300 {
    border-color: rgba(225, 6, 0, 0.3) !important;
}

body.dark-theme .border-green-300 {
    border-color: rgba(58, 191, 100, 0.3) !important;
}

/* Additional text classes - Brand Guide Colors */
body.dark-theme .text-h1 {
    color: #F5F3EE !important;
    /* Copper */
}

body.dark-theme .text-h2 {
    color: #F5F3EE !important;
    /* Warm White */
}

body.dark-theme .text-h3 {
    color: #F5F3EE !important;
    /* Copper */
}

body.dark-theme .text-label,
body.dark-theme .text-caption,
body.dark-theme .text-body {
    color: var(--text-primary) !important;
}

/* Shadow adjustments */
body.dark-theme .shadow-subtle {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Border opacity classes */
body.dark-theme .border-neutral-200\/50 {
    border-color: var(--border-color) !important;
}

/* Buttons - Brand Guide Implementation */
/* Primary CTA (Action Red) */
body.dark-theme button.btn-primary,
body.dark-theme .bg-brand-blue-primary,
body.dark-theme a.bg-brand-blue-primary,
body.dark-theme button.bg-brand-blue-primary {
    background-color: #E10600 !important;
    /* Action Red */
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 14px;
    font-weight: 600;
    transition: all 70ms ease-out;
    /* Activation speed: 70-120ms */
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

body.dark-theme button.btn-primary:hover,
body.dark-theme .bg-brand-blue-primary:hover,
body.dark-theme a.bg-brand-blue-primary:hover,
body.dark-theme button.bg-brand-blue-primary:hover,
body.dark-theme .hover\:bg-brand-blue-hover:hover {
    background: linear-gradient(to bottom, #FF1A1A 0%, #E10600 50%, #c10500 100%) !important;
    /* Gradient: lighter at top, darker at bottom */
    transform: translateY(-3px) !important;
    /* Lift 3px up */
    box-shadow: 0 4px 12px rgba(225, 6, 0, 0.4), 0 0 25px rgba(184, 115, 51, 0.4) !important;
    /* Copper glow - enhanced */
    transition: all 70ms ease-out !important;
    /* Activation speed: 70-120ms */
}

body.dark-theme button.btn-primary:focus,
body.dark-theme .bg-brand-blue-primary:focus,
body.dark-theme a.bg-brand-blue-primary:focus,
body.dark-theme button.bg-brand-blue-primary:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(184, 115, 51, 0.5), 0 0 0 4px rgba(184, 115, 51, 0.2) !important;
    /* Premium Copper / Gold focus ring */
}

body.dark-theme button.btn-primary:active,
body.dark-theme .bg-brand-blue-primary:active,
body.dark-theme a.bg-brand-blue-primary:active,
body.dark-theme button.bg-brand-blue-primary:active {
    background-color: #8B0000 !important;
    /* Dark red */
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Secondary CTA (Copper Border) */
body.dark-theme button.btn-secondary {
    background-color: transparent !important;
    color: #F5F3EE !important;
    /* Premium Copper */
    border: 1px solid #F5F3EE !important;
    border-radius: 14px;
    font-weight: 600;
    transition: all 70ms ease-out;
    position: relative;
}

body.dark-theme button.btn-secondary:hover {
    background-color: #F5F3EE !important;
    /* Fill with copper */
    color: var(--bg-secondary) !important;
    border: 2px solid #F5F3EE !important;
    /* Thicker border (from 1px to 2px) */
    box-shadow: 0 0 20px rgba(184, 115, 51, 0.6) !important;
    /* Copper glow - enhanced */
    padding-right: 2.5rem;
    /* Make room for arrow */
    transition: all 70ms ease-out !important;
    /* Activation speed: 70-120ms */
}

body.dark-theme button.btn-secondary:hover::after {
    content: '→';
    /* Arrow icon */
    position: absolute;
    right: 1rem;
    font-weight: 600;
    color: var(--bg-secondary);
}

body.dark-theme button.btn-secondary:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(184, 115, 51, 0.5), 0 0 0 4px rgba(184, 115, 51, 0.2) !important;
    /* Premium Copper / Gold focus ring */
}

body.dark-theme button.btn-secondary:active {
    background-color: #F5F3EE !important;
    color: var(--bg-secondary) !important;
    border: 2px solid #F5F3EE !important;
}

/* Disabled Claimed Button - Ensure brand red is visible in dark theme */
body.dark-theme button.claimed-button[disabled],
body.dark-theme button[disabled].bg-\[#E10600\],
body.dark-theme button[disabled][class*="bg-[#E10600]"],
body.dark-theme button[disabled][class*="E10600"] {
    background-color: #E10600 !important;
    /* Action Red */
    color: #FFFFFF !important;
    opacity: 0.85 !important;
    /* Slightly more visible than 0.7 */
    border-radius: 14px !important;
    cursor: not-allowed !important;
}

/* Disabled Approved Button - Ensure secondary copper color is visible in dark theme */
body.dark-theme button.btn-secondary[disabled],
body.dark-theme button[disabled].btn-secondary {
    background-color: #F5F3EE !important;
    /* Premium Copper */
    color: #FFFFFF !important;
    border-color: #F5F3EE !important;
    opacity: 0.85 !important;
    border-radius: 14px !important;
    cursor: not-allowed !important;
}

/* Featured Card - Ensure background and text are visible in dark theme */
body.dark-theme .bg-white.bg-gradient-to-r.from-blue-50.to-purple-50,
body.dark-theme .bg-white[class*="from-blue-50"][class*="to-purple-50"],
body.dark-theme [class*="bg-white"][class*="from-blue-50"][class*="to-purple-50"] {
    background: linear-gradient(to right, rgba(59, 130, 246, 0.15), rgba(168, 85, 247, 0.15)) !important;
    background-color: var(--bg-secondary) !important;
    /* Dark theme background - override white */
    border-color: rgba(59, 130, 246, 0.3) !important;
    /* Subtle blue border */
}

/* Override white background for featured cards in dark theme */
body.dark-theme .bg-white[class*="from-blue-50"],
body.dark-theme [class*="bg-white"][class*="from-blue-50"] {
    background-color: var(--bg-secondary) !important;
    /* Use dark background instead of white */
}

/* Featured card text colors - make visible in dark theme */
body.dark-theme .bg-white.bg-gradient-to-r.from-blue-50.to-purple-50 .text-gray-900,
body.dark-theme .bg-white.bg-gradient-to-r.from-blue-50.to-purple-50 h3.text-gray-900,
body.dark-theme .bg-white[class*="from-blue-50"][class*="to-purple-50"] .text-gray-900,
body.dark-theme .bg-white[class*="from-blue-50"][class*="to-purple-50"] h3.text-gray-900,
body.dark-theme [class*="bg-white"][class*="from-blue-50"][class*="to-purple-50"] .text-gray-900,
body.dark-theme [class*="bg-white"][class*="from-blue-50"][class*="to-purple-50"] h3.text-gray-900 {
    color: var(--text-primary) !important;
    /* White text */
}

body.dark-theme .bg-white.bg-gradient-to-r.from-blue-50.to-purple-50 .text-gray-600,
body.dark-theme .bg-white.bg-gradient-to-r.from-blue-50.to-purple-50 .text-gray-700,
body.dark-theme .bg-white[class*="from-blue-50"][class*="to-purple-50"] .text-gray-600,
body.dark-theme .bg-white[class*="from-blue-50"][class*="to-purple-50"] .text-gray-700,
body.dark-theme [class*="bg-white"][class*="from-blue-50"][class*="to-purple-50"] .text-gray-600,
body.dark-theme [class*="bg-white"][class*="from-blue-50"][class*="to-purple-50"] .text-gray-700 {
    color: var(--text-secondary) !important;
    /* Light gray text */
}

body.dark-theme .bg-white.bg-gradient-to-r.from-blue-50.to-purple-50 .text-gray-500,
body.dark-theme .bg-white[class*="from-blue-50"][class*="to-purple-50"] .text-gray-500,
body.dark-theme [class*="bg-white"][class*="from-blue-50"][class*="to-purple-50"] .text-gray-500 {
    color: var(--text-tertiary) !important;
    /* Medium gray text */
}

/* Admin Dashboard Button Overrides - Convert Blue to Red (Primary) */
body.dark-theme button.bg-blue-600,
body.dark-theme a.bg-blue-600,
body.dark-theme button.bg-b2-blue,
body.dark-theme a.bg-b2-blue,
body.dark-theme .bg-blue-600 {
    background-color: #E10600 !important;
    /* Action Red */
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 14px;
    font-weight: 600;
    transition: all 70ms ease-out;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

body.dark-theme button.bg-blue-600:hover,
body.dark-theme a.bg-blue-600:hover,
body.dark-theme button.bg-b2-blue:hover,
body.dark-theme a.bg-b2-blue:hover,
body.dark-theme button.hover\:bg-blue-700:hover,
body.dark-theme a.hover\:bg-blue-700:hover,
body.dark-theme .bg-blue-600:hover,
body.dark-theme .hover\:bg-blue-700:hover {
    background: linear-gradient(to bottom, #FF1A1A 0%, #E10600 50%, #c10500 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 12px rgba(225, 6, 0, 0.4), 0 0 25px rgba(184, 115, 51, 0.4) !important;
    transition: all 70ms ease-out !important;
}

body.dark-theme button.bg-blue-600:active,
body.dark-theme a.bg-blue-600:active,
body.dark-theme button.bg-b2-blue:active,
body.dark-theme a.bg-b2-blue:active,
body.dark-theme .bg-blue-600:active {
    background-color: #8B0000 !important;
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Admin Dashboard Button Overrides - Convert Blue Border to Copper Border (Secondary) */
body.dark-theme a.border-b2-blue,
body.dark-theme button.border-b2-blue,
body.dark-theme a[class*="border-b2-blue"],
body.dark-theme button[class*="border-b2-blue"] {
    background-color: transparent !important;
    color: #F5F3EE !important;
    /* Premium Copper */
    border: 1px solid #F5F3EE !important;
    border-radius: 14px;
    font-weight: 600;
    transition: all 70ms ease-out;
    position: relative;
}

body.dark-theme a.border-b2-blue:hover,
body.dark-theme button.border-b2-blue:hover,
body.dark-theme a[class*="border-b2-blue"]:hover,
body.dark-theme button[class*="border-b2-blue"]:hover {
    background-color: #F5F3EE !important;
    color: var(--bg-secondary) !important;
    border: 2px solid #F5F3EE !important;
    box-shadow: 0 0 20px rgba(184, 115, 51, 0.6) !important;
    padding-right: 2.5rem;
    transition: all 70ms ease-out !important;
}

body.dark-theme a.border-b2-blue:hover::after,
body.dark-theme button.border-b2-blue:hover::after,
body.dark-theme a[class*="border-b2-blue"]:hover::after,
body.dark-theme button[class*="border-b2-blue"]:hover::after {
    content: '→';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    color: var(--bg-secondary);
}

body.dark-theme a.border-b2-blue:active,
body.dark-theme button.border-b2-blue:active,
body.dark-theme a[class*="border-b2-blue"]:active,
body.dark-theme button[class*="border-b2-blue"]:active {
    background-color: #F5F3EE !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

body.dark-theme .text-b2-blue {
    color: #FFFFFF !important;
    /* Premium Copper for text */
}

/* Global Focus Ring - Premium Copper / Gold */
/* body.dark-theme button:focus-visible,
body.dark-theme a:focus-visible,
body.dark-theme input:focus-visible,
body.dark-theme select:focus-visible,
body.dark-theme textarea:focus-visible {
    outline: 2px solid #F5F3EE !important;
    outline-offset: 2px !important;
}

body.dark-theme button:focus,
body.dark-theme a:focus,
body.dark-theme input:focus,
body.dark-theme select:focus,
body.dark-theme textarea:focus {
    --tw-ring-color: #F5F3EE !important;
    border-color: #F5F3EE !important;
} */

/* Toaster Hub - Fix positioning and ensure default colors */
/* Override z-index to appear above header (z-[60]) but don't block content */
body.dark-theme #toaster,
html.dark-theme #toaster {
    z-index: 70 !important;
    /* Higher than header z-[60] but not too high */
    pointer-events: none !important;
    /* Ensure container doesn't block interactions */
    background: transparent !important;
    /* Ensure container is transparent */
}

/* Position toasts below header when alignment is 'top' - position container below header */
body.dark-theme #toaster.top-0,
html.dark-theme #toaster.top-0 {
    top: 80px !important;
    /* Position container below header (64px header + 16px spacing) */
    padding-top: 0 !important;
    /* Remove default padding since container is positioned below header */
}

/* Ensure individual toast items are interactive */
body.dark-theme #toaster>div,
html.dark-theme #toaster>div,
body.dark-theme #toaster [x-show],
html.dark-theme #toaster [x-show] {
    pointer-events: auto !important;
    /* Make toasts themselves clickable */
}

/* Ensure default toaster colors are not overridden */
/* Success: bg-green-600 should remain default */
body.dark-theme #toaster .bg-green-600,
html.dark-theme #toaster .bg-green-600 {
    background-color: rgb(22, 163, 74) !important;
    /* Tailwind green-600 default */
}

/* Error: bg-red-500 should remain default */
body.dark-theme #toaster .bg-red-500,
html.dark-theme #toaster .bg-red-500 {
    background-color: rgb(239, 68, 68) !important;
    /* Tailwind red-500 default */
}

/* Warning: bg-orange-500 should remain default */
body.dark-theme #toaster .bg-orange-500,
html.dark-theme #toaster .bg-orange-500 {
    background-color: rgb(249, 115, 22) !important;
    /* Tailwind orange-500 default */
}

/* Info: bg-gray-200 should remain default */
body.dark-theme #toaster .bg-gray-200,
html.dark-theme #toaster .bg-gray-200 {
    background-color: rgb(229, 231, 235) !important;
    /* Tailwind gray-200 default */
}

/* Exclusive Offers Cards - Match light theme text colors in dark theme */
/* Scope rules to exclusive offers cards only (cards with rounded-2xl and bg-white) */


body.dark-theme .bg-white.rounded-2xl .bg-gray-50,
html.dark-theme .bg-white.rounded-2xl .bg-gray-50,
body.dark-theme .bg-white.rounded-2xl [class*="bg-gray-50"],
html.dark-theme .bg-white.rounded-2xl [class*="bg-gray-50"] {
    background-color: rgb(249, 250, 251) !important;
    /* Keep gray-50 background */
}

/* Text colors within exclusive offers cards - match light theme */
/* Title - gray-900 */
body.dark-theme .bg-white.rounded-2xl .text-gray-900,
html.dark-theme .bg-white.rounded-2xl .text-gray-900,
body.dark-theme .bg-white.rounded-2xl h3.text-gray-900,
html.dark-theme .bg-white.rounded-2xl h3.text-gray-900 {
    color: rgb(17, 24, 39) !important;
    /* Keep gray-900 as in light theme */
}

/* Description and secondary text - gray-600 */
body.dark-theme .bg-white.rounded-2xl .text-gray-600,
html.dark-theme .bg-white.rounded-2xl .text-gray-600,
body.dark-theme .bg-white.rounded-2xl p.text-gray-600,
html.dark-theme .bg-white.rounded-2xl p.text-gray-600 {
    color: rgb(75, 85, 99) !important;
    /* Keep gray-600 as in light theme */
}

/* Category and info text - gray-700 */
body.dark-theme .bg-white.rounded-2xl .text-gray-700,
html.dark-theme .bg-white.rounded-2xl .text-gray-700,
body.dark-theme .bg-white.rounded-2xl span.text-gray-700,
html.dark-theme .bg-white.rounded-2xl span.text-gray-700 {
    color: rgb(55, 65, 81) !important;
    /* Keep gray-700 as in light theme */
}

/* Category tags - blue-700 */
body.dark-theme .bg-white.rounded-2xl .text-blue-700,
html.dark-theme .bg-white.rounded-2xl .text-blue-700 {
    color: rgb(29, 78, 216) !important;
    /* Keep blue-700 as in light theme */
}

/* Offer type badge - purple-700 */
body.dark-theme .bg-white.rounded-2xl .text-purple-700,
html.dark-theme .bg-white.rounded-2xl .text-purple-700 {
    color: rgb(126, 34, 206) !important;
    /* Keep purple-700 as in light theme */
}

/* Price and save text - green-700 */
body.dark-theme .bg-white.rounded-2xl .text-green-700,
html.dark-theme .bg-white.rounded-2xl .text-green-700 {
    color: rgb(21, 128, 61) !important;
    /* Keep green-700 as in light theme */
}

/* Strikethrough price - gray-400 */
body.dark-theme .bg-white.rounded-2xl .text-gray-400,
html.dark-theme .bg-white.rounded-2xl .text-gray-400 {
    color: rgb(156, 163, 175) !important;
    /* Keep gray-400 as in light theme */
}

/* White text on colored backgrounds - keep white (matching light theme) */
body.dark-theme .bg-white.rounded-2xl .bg-gradient-to-br.from-red-500.to-red-600.text-white,
html.dark-theme .bg-white.rounded-2xl .bg-gradient-to-br.from-red-500.to-red-600.text-white,
body.dark-theme .bg-white.rounded-2xl [class*="from-red-500"][class*="to-red-600"][class*="text-white"],
html.dark-theme .bg-white.rounded-2xl [class*="from-red-500"][class*="to-red-600"][class*="text-white"] {
    color: #ffffff !important;
    /* Keep white text on red backgrounds */
}

body.dark-theme .bg-white.rounded-2xl .bg-gradient-to-br.from-red-500.to-red-600.text-white span,
html.dark-theme .bg-white.rounded-2xl .bg-gradient-to-br.from-red-500.to-red-600.text-white span {
    color: #ffffff !important;
}

body.dark-theme .bg-white.rounded-2xl .bg-gradient-to-br.from-blue-500.to-blue-600 .text-white,
html.dark-theme .bg-white.rounded-2xl .bg-gradient-to-br.from-blue-500.to-blue-600 .text-white {
    color: #ffffff !important;
    /* Keep white text on blue backgrounds */
}

body.dark-theme .bg-white.rounded-2xl [class*="from-blue-600"][class*="via-blue-700"][class*="to-indigo-700"][class*="text-white"],
html.dark-theme .bg-white.rounded-2xl [class*="from-blue-600"][class*="via-blue-700"][class*="to-indigo-700"][class*="text-white"],
body.dark-theme .bg-white.rounded-2xl [class*="from-blue-600"][class*="text-white"],
html.dark-theme .bg-white.rounded-2xl [class*="from-blue-600"][class*="text-white"] {
    color: #ffffff !important;
    /* Keep white text on blue button backgrounds */
}

/* Admin Referrals Page - Override text colors for white cards with rounded-lg */
body.dark-theme .bg-white.rounded-lg .text-gray-900,
body.dark-theme .bg-white.rounded-lg h3.text-gray-900,
body.dark-theme .bg-white.rounded-lg div.text-gray-900,
html.dark-theme .bg-white.rounded-lg .text-gray-900,
html.dark-theme .bg-white.rounded-lg h3.text-gray-900,
html.dark-theme .bg-white.rounded-lg div.text-gray-900 {
    color: var(--text-primary) !important;
    /* White text in dark theme */
}

body.dark-theme .bg-white.rounded-lg .text-gray-600,
body.dark-theme .bg-white.rounded-lg .text-gray-700,
html.dark-theme .bg-white.rounded-lg .text-gray-600,
html.dark-theme .bg-white.rounded-lg .text-gray-700 {
    color: var(--text-secondary) !important;
    /* Light gray text in dark theme */
}

body.dark-theme .bg-white.rounded-lg .text-gray-500,
body.dark-theme .bg-white.rounded-lg .text-gray-400,
html.dark-theme .bg-white.rounded-lg .text-gray-500,
html.dark-theme .bg-white.rounded-lg .text-gray-400,
html.dark-theme .bg-white.rounded-lg .text-gray-600,
html.dark-theme .bg-white.rounded-lg .text-gray-700,
html.dark-theme .bg-white.rounded-lg .text-gray-900 {
    color: #F5F3EE !important;
    /* Medium gray text in dark theme */
}

/* Admin Referral Details Page - Make all dark text white */
body.dark-theme .admin-referral-details .text-neutral-900,
body.dark-theme .admin-referral-details h2.text-neutral-900,
body.dark-theme .admin-referral-details h3.text-neutral-900,
body.dark-theme .admin-referral-details h4.text-neutral-900,
body.dark-theme .admin-referral-details h5.text-neutral-900,
body.dark-theme .admin-referral-details p.text-neutral-900,
body.dark-theme .admin-referral-details span.text-neutral-900,
body.dark-theme .admin-referral-details div.text-neutral-900,
html.dark-theme .admin-referral-details .text-neutral-900,
html.dark-theme .admin-referral-details h2.text-neutral-900,
html.dark-theme .admin-referral-details h3.text-neutral-900,
html.dark-theme .admin-referral-details h4.text-neutral-900,
html.dark-theme .admin-referral-details h5.text-neutral-900,
html.dark-theme .admin-referral-details p.text-neutral-900,
html.dark-theme .admin-referral-details span.text-neutral-900,
html.dark-theme .admin-referral-details div.text-neutral-900 {
    color: var(--text-primary) !important;
    /* White text in dark theme */
}

body.dark-theme .admin-referral-details .text-text-secondary,
body.dark-theme .admin-referral-details .text-neutral-700,
body.dark-theme .admin-referral-details .text-neutral-600,
body.dark-theme .admin-referral-details .text-gray-700,
body.dark-theme .admin-referral-details .text-gray-600,
body.dark-theme .admin-referral-details .text-gray-500,
body.dark-theme .admin-referral-details .text-gray-400,
body.dark-theme .admin-referral-details .text-gray-300,
html.dark-theme .admin-referral-details .text-text-secondary,
html.dark-theme .admin-referral-details .text-neutral-700,
html.dark-theme .admin-referral-details .text-neutral-600,
html.dark-theme .admin-referral-details .text-gray-700,
html.dark-theme .admin-referral-details .text-gray-600,
html.dark-theme .admin-referral-details .text-gray-500,
html.dark-theme .admin-referral-details .text-gray-400,
html.dark-theme .admin-referral-details .text-gray-300 {
    color: var(--text-primary) !important;
    /* White text in dark theme - matching business member view */
}

body.dark-theme .admin-referral-details .bg-white,
html.dark-theme .admin-referral-details .bg-white {
    background-color: var(--bg-secondary) !important;
    /* Dark background */
    border-color: var(--border-color) !important;
}

/* Ensure the native date picker icon is visible in dark theme */
body.dark-theme input[type="date"],
html.dark-theme input[type="date"] {
    position: relative;
    z-index: 1;
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* WebKit/Chromium calendar icon */
body.dark-theme input[type="date"]::-webkit-calendar-picker-indicator,
html.dark-theme input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent !important;
    color: var(--text-primary) !important;
    filter: invert(100%) brightness(200%) contrast(120%) !important;
    opacity: 1 !important;
    width: 1.2em !important;
    height: 1.2em !important;
    margin-right: 0.5rem !important;
    -webkit-appearance: auto !important;
    cursor: pointer !important;
}

/* For Firefox - ensure the calendar button uses current color */
body.dark-theme input[type="date"]::-moz-calendar-picker-indicator,
html.dark-theme input[type="date"]::-moz-calendar-picker-indicator {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

/* Force form fields using bg-white or browser autofill to dark theme */
body.dark-theme input.bg-white,
body.dark-theme textarea.bg-white,
body.dark-theme select.bg-white,
body.dark-theme input[class*="bg-white"],
body.dark-theme textarea[class*="bg-white"],
body.dark-theme select[class*="bg-white"],
html.dark-theme input.bg-white,
html.dark-theme textarea.bg-white,
html.dark-theme select.bg-white {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Browser autofill (Chrome) override to prevent yellow/white fill */
body.dark-theme input:-webkit-autofill,
body.dark-theme input:-webkit-autofill:hover,
body.dark-theme input:-webkit-autofill:focus,
body.dark-theme textarea:-webkit-autofill,
body.dark-theme textarea:-webkit-autofill:hover,
body.dark-theme textarea:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--bg-secondary) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    caret-color: var(--text-primary) !important;
}

/* Selection inside inputs/textareas should not show white fill */
body.dark-theme input::selection,
body.dark-theme textarea::selection,
html.dark-theme input::selection,
html.dark-theme textarea::selection {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text-primary) !important;
}

/* Generic strong override for any input/textarea that may still get a white background */
body.dark-theme input,
body.dark-theme textarea,
body.dark-theme select,
html.dark-theme input,
html.dark-theme textarea,
html.dark-theme select {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

html.dark-theme .bg-white.rounded-lg .text-gray-700 {
    color: var(--text-secondary) !important;
    /* Light gray text in dark theme */
}

body.dark-theme .bg-white.rounded-lg .text-gray-500,
body.dark-theme .bg-white.rounded-lg .text-gray-400,
html.dark-theme .bg-white.rounded-lg .text-gray-500,
html.dark-theme .bg-white.rounded-lg .text-gray-400,
html.dark-theme .bg-white.rounded-lg .text-gray-600,
html.dark-theme .bg-white.rounded-lg .text-gray-700,
html.dark-theme .bg-white.rounded-lg .text-gray-900 {
    color: #F5F3EE !important;
    /* Medium gray text in dark theme */
}

/* Admin Referral Details Page - Make all dark text white */
body.dark-theme .admin-referral-details .text-neutral-900,
body.dark-theme .admin-referral-details h2.text-neutral-900,
body.dark-theme .admin-referral-details h3.text-neutral-900,
body.dark-theme .admin-referral-details h4.text-neutral-900,
body.dark-theme .admin-referral-details h5.text-neutral-900,
body.dark-theme .admin-referral-details p.text-neutral-900,
body.dark-theme .admin-referral-details span.text-neutral-900,
body.dark-theme .admin-referral-details div.text-neutral-900,
html.dark-theme .admin-referral-details .text-neutral-900,
html.dark-theme .admin-referral-details h2.text-neutral-900,
html.dark-theme .admin-referral-details h3.text-neutral-900,
html.dark-theme .admin-referral-details h4.text-neutral-900,
html.dark-theme .admin-referral-details h5.text-neutral-900,
html.dark-theme .admin-referral-details p.text-neutral-900,
html.dark-theme .admin-referral-details span.text-neutral-900,
html.dark-theme .admin-referral-details div.text-neutral-900 {
    color: var(--text-primary) !important;
    /* White text in dark theme */
}

body.dark-theme .admin-referral-details .text-text-secondary,
body.dark-theme .admin-referral-details .text-neutral-700,
body.dark-theme .admin-referral-details .text-neutral-600,
body.dark-theme .admin-referral-details .text-gray-700,
body.dark-theme .admin-referral-details .text-gray-600,
body.dark-theme .admin-referral-details .text-gray-500,
body.dark-theme .admin-referral-details .text-gray-400,
body.dark-theme .admin-referral-details .text-gray-300,
html.dark-theme .admin-referral-details .text-text-secondary,
html.dark-theme .admin-referral-details .text-neutral-700,
html.dark-theme .admin-referral-details .text-neutral-600,
html.dark-theme .admin-referral-details .text-gray-700,
html.dark-theme .admin-referral-details .text-gray-600,
html.dark-theme .admin-referral-details .text-gray-500,
html.dark-theme .admin-referral-details .text-gray-400,
html.dark-theme .admin-referral-details .text-gray-300 {
    color: var(--text-primary) !important;
    /* White text in dark theme - matching business member view */
}

body.dark-theme .admin-referral-details .bg-white,
html.dark-theme .admin-referral-details .bg-white {
    background-color: var(--bg-secondary) !important;
    /* Dark background */
    border-color: var(--border-color) !important;
}

body.dark-theme .admin-referral-details .text-neutral-700,
body.dark-theme .admin-referral-details .text-neutral-600,
body.dark-theme .admin-referral-details .text-gray-700,
body.dark-theme .admin-referral-details .text-gray-600,
body.dark-theme .admin-referral-details .text-gray-500,
body.dark-theme .admin-referral-details .text-gray-400,
body.dark-theme .admin-referral-details .text-gray-300,
html.dark-theme .admin-referral-details .text-text-secondary,
html.dark-theme .admin-referral-details .text-neutral-700,
html.dark-theme .admin-referral-details .text-neutral-600,
html.dark-theme .admin-referral-details .text-gray-700,
html.dark-theme .admin-referral-details .text-gray-600,
html.dark-theme .admin-referral-details .text-gray-500,
html.dark-theme .admin-referral-details .text-gray-400,
html.dark-theme .admin-referral-details .text-gray-300 {
    color: var(--text-primary) !important;
    /* White text in dark theme - matching business member view */
}

body.dark-theme .admin-referral-details .bg-white,
html.dark-theme .admin-referral-details .bg-white {
    background-color: var(--bg-secondary) !important;
    /* Dark background */
    border-color: var(--border-color) !important;
}