/* ==========================================================================
   NOTABLE CLEANING SERVICES - SHARED ADMIN LIGHT & DARK THEME ENGINE
   ========================================================================== */

/* Global Seamless Transition Interpolation */
body,
header,
nav,
section,
main,
aside,
div,
span,
p,
h1, h2, h3, h4, h5, h6,
button,
input,
select,
textarea,
table,
thead,
tbody,
tr,
th,
td,
a {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 0.35s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom Scrollbar - Default Dark */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #020617;
}
::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #14b8a6;
}

/* ==========================================================================
   HARMONIC EYE-SAFE SLATE LIGHT MODE PALETTE (MATCHING MAIN WEBSITE)
   ========================================================================== */
html.light-mode body {
    background-color: #CBD5E1 !important; /* Main website outer canvas */
    color: #0F172A !important;
}

/* Scrollbar in Light Mode */
html.light-mode ::-webkit-scrollbar-track {
    background: transparent !important;
}
html.light-mode ::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.5) !important;
    border-radius: 9999px !important;
}
html.light-mode ::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.8) !important;
}

/* 1. Header & Navigation Bars (Matching Main Website Header) */
html.light-mode header,
html.light-mode .admin-header,
html.light-mode header.bg-slate-900,
html.light-mode header .bg-slate-900 {
    background-color: rgba(226, 232, 240, 0.95) !important;
    border-bottom-color: #94A3B8 !important;
    box-shadow: 0 4px 20px -5px rgba(15, 23, 42, 0.08) !important;
}

/* 2. Sidebar Navigation */
html.light-mode aside,
html.light-mode .bg-slate-900.w-64,
html.light-mode .bg-slate-900.w-72,
html.light-mode aside.bg-slate-900 {
    background-color: #E2E8F0 !important;
    border-right-color: #94A3B8 !important;
    box-shadow: 2px 0 10px rgba(15, 23, 42, 0.04) !important;
}

/* 3. Primary Admin Cards & Panels (Harmonic Slate 200 - identical to main site .bg-[#111A2E], .bg-slate-900) */
html.light-mode .bg-slate-900,
html.light-mode .bg-slate-900\/90,
html.light-mode .bg-slate-900\/80,
html.light-mode .bg-\[\#050911\],
html.light-mode .bg-\[\#080E1A\],
html.light-mode .bg-\[\#0B1120\],
html.light-mode .bg-\[\#0B1222\],
html.light-mode .bg-\[\#0F172A\],
html.light-mode .bg-\[\#111A2E\],
html.light-mode .admin-card {
    background-color: #E2E8F0 !important;
    border-color: #94A3B8 !important;
    box-shadow: 0 4px 15px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -2px rgba(15, 23, 42, 0.04) !important;
    color: #0F172A !important;
}

/* Card Hover States */
html.light-mode .bg-\[\#0F172A\]:hover,
html.light-mode .bg-slate-900:hover,
html.light-mode .hover\:bg-slate-900:hover {
    background-color: #EDF2F7 !important;
    border-color: #64748B !important;
}

/* 4. Deep Inset Containers, Wells, Tables & Inputs (Harmonic Slate 100 #F1F5F9) */
html.light-mode .bg-slate-950,
html.light-mode .bg-slate-950\/40,
html.light-mode .bg-slate-950\/50,
html.light-mode .bg-slate-950\/60,
html.light-mode .bg-slate-950\/70,
html.light-mode .bg-slate-950\/80,
html.light-mode .bg-slate-950\/90,
html.light-mode .bg-slate-900\/50,
html.light-mode .bg-slate-900\/40,
html.light-mode .bg-slate-800\/40,
html.light-mode .bg-slate-800\/50,
html.light-mode .bg-slate-800\/60,
html.light-mode .bg-slate-850,
html.light-mode .bg-slate-850\/50,
html.light-mode .admin-input-container {
    background-color: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
}

/* 5. Form Inputs, Selects & Textareas (White inside #F1F5F9 or #E2E8F0 for crisp input clarity) */
html.light-mode input[type="text"],
html.light-mode input[type="password"],
html.light-mode input[type="email"],
html.light-mode input[type="number"],
html.light-mode input[type="date"],
html.light-mode select,
html.light-mode textarea {
    background-color: #FFFFFF !important;
    border-color: #94A3B8 !important;
    color: #0F172A !important;
}

html.light-mode input::placeholder,
html.light-mode textarea::placeholder {
    color: #64748B !important;
}

html.light-mode input:focus,
html.light-mode select:focus,
html.light-mode textarea:focus {
    border-color: #059669 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25) !important;
}

/* 6. Typography Adjustments (High Contrast) */
html.light-mode h1,
html.light-mode h2,
html.light-mode h3,
html.light-mode h4,
html.light-mode h5,
html.light-mode h6,
html.light-mode h1.text-white,
html.light-mode h2.text-white,
html.light-mode h3.text-white,
html.light-mode h4.text-white,
html.light-mode .text-white,
html.light-mode .text-slate-100,
html.light-mode .text-slate-200 {
    color: #0F172A !important;
}

html.light-mode p.text-slate-300,
html.light-mode p.text-slate-400,
html.light-mode span.text-slate-300,
html.light-mode span.text-slate-400,
html.light-mode div.text-slate-300,
html.light-mode div.text-slate-400,
html.light-mode .text-slate-300,
html.light-mode .text-slate-400 {
    color: #1E293B !important;
}

html.light-mode .text-slate-500 {
    color: #475569 !important;
}

html.light-mode .text-slate-600 {
    color: #64748B !important;
}

/* 7. Accent Colors (Adjusted for AA legibility) */
html.light-mode .text-emerald-400 {
    color: #0F766E !important;
}
html.light-mode .text-sky-400 {
    color: #0369A1 !important;
}
html.light-mode .text-purple-400 {
    color: #6D28D9 !important;
}
html.light-mode .text-teal-400 {
    color: #0F766E !important;
}
html.light-mode .text-rose-400 {
    color: #BE123C !important;
}

/* 8. Borders */
html.light-mode .border-slate-800,
html.light-mode .border-slate-800\/40,
html.light-mode .border-slate-800\/60,
html.light-mode .border-slate-800\/80,
html.light-mode .border-slate-700,
html.light-mode .border-slate-700\/50,
html.light-mode .border-slate-700\/60,
html.light-mode .border-slate-700\/80 {
    border-color: #94A3B8 !important;
}

/* 9. Table Elements (Aligned with website data lists) */
html.light-mode thead,
html.light-mode thead tr,
html.light-mode thead th {
    background-color: #CBD5E1 !important;
    color: #0F172A !important;
    border-color: #94A3B8 !important;
    font-weight: 700 !important;
}

html.light-mode tbody tr {
    background-color: #E2E8F0 !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}

html.light-mode tbody tr:hover {
    background-color: #F1F5F9 !important;
}

html.light-mode tbody tr td {
    border-color: #CBD5E1 !important;
}

/* 10. Status Badges & Alerts */
html.light-mode .bg-emerald-500\/10,
html.light-mode .bg-emerald-500\/15,
html.light-mode .bg-emerald-500\/20 {
    background-color: #CCFBF1 !important;
    color: #0F766E !important;
    border-color: #14B8A6 !important;
}

html.light-mode .bg-amber-500\/10,
html.light-mode .bg-amber-500\/15,
html.light-mode .bg-amber-500\/20 {
    background-color: #FEF3C7 !important;
    color: #78350F !important;
    border-color: #F59E0B !important;
}

html.light-mode .bg-amber-500\/10 h1,
html.light-mode .bg-amber-500\/10 h2,
html.light-mode .bg-amber-500\/10 h3,
html.light-mode .bg-amber-500\/10 h4,
html.light-mode .bg-amber-500\/10 p,
html.light-mode .bg-amber-500\/10 span,
html.light-mode .bg-amber-500\/10 div,
html.light-mode .border-amber-500\/30 h3,
html.light-mode .border-amber-500\/30 p,
html.light-mode .border-amber-500\/30 span,
html.light-mode .border-amber-500\/30 .text-amber-300,
html.light-mode .border-amber-500\/30 .text-amber-300\/80,
html.light-mode .border-amber-500\/30 .text-amber-400 {
    color: #78350F !important;
}

html.light-mode .bg-amber-500\/10 button,
html.light-mode .border-amber-500\/30 button {
    background-color: #D97706 !important;
    color: #FFFFFF !important;
}

html.light-mode .bg-amber-500\/10 button:hover,
html.light-mode .border-amber-500\/30 button:hover {
    background-color: #B45309 !important;
    color: #FFFFFF !important;
}

html.light-mode .text-amber-300,
html.light-mode .text-amber-300\/80,
html.light-mode .text-amber-400,
html.light-mode .text-amber-500 {
    color: #92400E !important;
}

html.light-mode .bg-red-500\/10,
html.light-mode .bg-red-500\/15,
html.light-mode .bg-red-500\/20 {
    background-color: #FEE2E2 !important;
    color: #991B1B !important;
    border-color: #F87171 !important;
}

html.light-mode .bg-red-500\/10 h1,
html.light-mode .bg-red-500\/10 h2,
html.light-mode .bg-red-500\/10 h3,
html.light-mode .bg-red-500\/10 p,
html.light-mode .bg-red-500\/10 span,
html.light-mode .text-red-400 {
    color: #991B1B !important;
}

html.light-mode .bg-blue-500\/10,
html.light-mode .bg-blue-500\/15,
html.light-mode .bg-blue-500\/20 {
    background-color: #DBEAFE !important;
    color: #1E40AF !important;
    border-color: #60A5FA !important;
}

/* 11. Action Buttons & Navigation Tabs */
html.light-mode nav button.text-slate-300 {
    color: #1E293B !important;
}
html.light-mode nav button.text-slate-300:hover,
html.light-mode nav a.text-slate-300:hover {
    background-color: #CBD5E1 !important;
    color: #0F172A !important;
}

html.light-mode .bg-slate-800,
html.light-mode .hover\:bg-slate-800:hover {
    background-color: #CBD5E1 !important;
    color: #0F172A !important;
    border-color: #94A3B8 !important;
}

html.light-mode a.bg-slate-900,
html.light-mode button.bg-slate-900,
html.light-mode .bg-slate-900\/80 {
    background-color: #F1F5F9 !important;
    color: #1E293B !important;
    border-color: #94A3B8 !important;
}

html.light-mode a.bg-slate-900:hover,
html.light-mode button.bg-slate-900:hover {
    background-color: #E2E8F0 !important;
    color: #0F172A !important;
}

/* 12. Modal Overlays & Dialogs */
html.light-mode .bg-slate-950\/80,
html.light-mode .bg-slate-950\/70,
html.light-mode .bg-black\/70,
html.light-mode .bg-black\/80 {
    background-color: rgba(15, 23, 42, 0.6) !important;
}

html.light-mode #previewModal .bg-slate-900,
html.light-mode #previewModal .bg-slate-950,
html.light-mode #bulkDeleteModal .bg-slate-900 {
    background-color: #E2E8F0 !important;
    border-color: #94A3B8 !important;
}

/* 13. Comprehensive Admin Portal Cards & Panel Surfaces (Matching Main Website 1:1) */
html.light-mode #panel-overview > div,
html.light-mode #panel-vacancies > div,
html.light-mode #panel-referrals > div,
html.light-mode #panel-posters > div,
html.light-mode #panel-audit-logs > div,
html.light-mode #panel-contacts > div,
html.light-mode #panel-security > div,
html.light-mode #panel-settings > div,
html.light-mode #panel-services > div,
html.light-mode #panel-tools > div,
html.light-mode #lead-drawer,
html.light-mode #inspector-drawer,
html.light-mode #drawer-panel,
html.light-mode .bg-\[\#0B132B\],
html.light-mode .bg-\[\#070D18\] {
    background-color: #E2E8F0 !important;
    border-color: #94A3B8 !important;
    color: #0F172A !important;
}

/* Metric / Stat Tiles inside Admin Panels */
html.light-mode .stat-tile,
html.light-mode .grid > .bg-\[\#0B1222\],
html.light-mode .grid > .bg-slate-900,
html.light-mode .grid > .bg-\[\#080E1A\] {
    background-color: #E2E8F0 !important;
    border-color: #94A3B8 !important;
    box-shadow: 0 4px 15px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -2px rgba(15, 23, 42, 0.04) !important;
}

html.light-mode .stat-tile:hover,
html.light-mode .grid > .bg-\[\#0B1222\]:hover {
    background-color: #EDF2F7 !important;
    border-color: #64748B !important;
}

/* Vacancy Card items */
html.light-mode #panel-vacancies .bg-\[\#0B1222\] {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

html.light-mode #panel-vacancies .bg-\[\#0B1222\]:hover {
    border-color: #10B981 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1) !important;
}

/* Sub-panels, Details Boxes, & Wells */
html.light-mode .bg-slate-900\/50,
html.light-mode .bg-slate-900\/40,
html.light-mode .bg-slate-900\/30,
html.light-mode .bg-slate-950\/40,
html.light-mode .bg-slate-950\/50 {
    background-color: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
}

/* Subtle Card Dividers */
html.light-mode .border-slate-800\/80,
html.light-mode .border-slate-800\/60,
html.light-mode .divide-slate-800,
html.light-mode .divide-slate-800\/80,
html.light-mode .divide-slate-800\/60 {
    border-color: #CBD5E1 !important;
}

/* Sidebar Scrollbar Suppression (Ensures no awkward scrollbars cut into buttons) */
#affiliate-sidebar {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
#affiliate-sidebar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* 14. Affiliate & Partner Portal Theme Overrides (1:1 System Harmonization) */
html.light-mode #affiliate-sidebar,
html.light-mode #affiliate-portal-root aside {
    background-color: #FFFFFF !important;
    border-right-color: #E2E8F0 !important;
    box-shadow: 2px 0 12px rgba(15, 23, 42, 0.03) !important;
}

html.light-mode #affiliate-portal-root,
html.light-mode #affiliate-portal-root .bg-\[\#070D18\],
html.light-mode #affiliate-portal-root .bg-\[\#050A14\] {
    background-color: #CBD5E1 !important;
    color: #0F172A !important;
}

html.light-mode #affiliate-portal-root header,
html.light-mode #affiliate-portal-root .bg-\[\#0B1222\],
html.light-mode #affiliate-portal-root .bg-\[\#0B132B\],
html.light-mode #affiliate-portal-root .bg-\[\#0E1729\] {
    background-color: #E2E8F0 !important;
    border-color: #94A3B8 !important;
    color: #0F172A !important;
}

html.light-mode #affiliate-portal-root .bg-slate-950,
html.light-mode #affiliate-portal-root .bg-slate-950\/80,
html.light-mode #affiliate-portal-root .bg-slate-950\/90,
html.light-mode #affiliate-portal-root .bg-slate-900\/60,
html.light-mode #affiliate-portal-root .bg-slate-900\/80,
html.light-mode #affiliate-portal-root .bg-slate-900\/90 {
    background-color: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}

/* Refined, Elegant Navigation States in Light Mode (No harsh solid green block) */
html.light-mode #affiliate-sidebar .nav-item-active {
    background-color: #ECFDF5 !important;
    border-color: #A7F3D0 !important;
    color: #065F46 !important;
    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.08) !important;
}

/* Light Mode: Always Bright, Luminous, Vibrant Navigation Icons (NEVER Dark) */
html.light-mode #affiliate-sidebar .nav-icon-container {
    border-width: 1px !important;
    border-style: solid !important;
}

html.light-mode #affiliate-sidebar .nav-icon-container.icon-dashboard {
    background-color: #ECFDF5 !important;
    border-color: #A7F3D0 !important;
    color: #059669 !important;
}

html.light-mode #affiliate-sidebar .nav-icon-container.icon-links {
    background-color: #F0F9FF !important;
    border-color: #BAE6FD !important;
    color: #0284C7 !important;
}

html.light-mode #affiliate-sidebar .nav-icon-container.icon-conversions {
    background-color: #F0FDFA !important;
    border-color: #99F6E4 !important;
    color: #0D9488 !important;
}

html.light-mode #affiliate-sidebar .nav-icon-container.icon-payouts {
    background-color: #FFFBEB !important;
    border-color: #FDE68A !important;
    color: #D97706 !important;
}

html.light-mode #affiliate-sidebar .nav-icon-container.icon-assets {
    background-color: #FAF5FF !important;
    border-color: #E9D5FF !important;
    color: #9333EA !important;
}

html.light-mode #affiliate-sidebar .nav-icon-container.icon-profile {
    background-color: #EEF2FF !important;
    border-color: #C7D2FE !important;
    color: #4F46E5 !important;
}

/* Active Nav Icon Highlights in Light Mode */
html.light-mode #affiliate-sidebar .nav-item-active .nav-icon-container.icon-dashboard {
    background-color: #D1FAE5 !important;
    border-color: #6EE7B7 !important;
    color: #047857 !important;
}

html.light-mode #affiliate-sidebar .nav-item-active .nav-icon-container.icon-links {
    background-color: #E0F2FE !important;
    border-color: #7DD3FC !important;
    color: #0369A1 !important;
}

html.light-mode #affiliate-sidebar .nav-item-active .nav-icon-container.icon-conversions {
    background-color: #CCFBF1 !important;
    border-color: #5EEAD4 !important;
    color: #0F766E !important;
}

html.light-mode #affiliate-sidebar .nav-item-active .nav-icon-container.icon-payouts {
    background-color: #FEF3C7 !important;
    border-color: #FCD34D !important;
    color: #B45309 !important;
}

html.light-mode #affiliate-sidebar .nav-item-active .nav-icon-container.icon-assets {
    background-color: #F3E8FF !important;
    border-color: #D8B4FE !important;
    color: #7E22CE !important;
}

html.light-mode #affiliate-sidebar .nav-item-active .nav-icon-container.icon-profile {
    background-color: #E0E7FF !important;
    border-color: #A5B4FC !important;
    color: #4338CA !important;
}

html.light-mode #affiliate-sidebar .nav-item-active .nav-accent-bar {
    background-color: #10B981 !important;
}

html.light-mode #affiliate-sidebar .nav-item-inactive {
    color: #334155 !important;
}

html.light-mode #affiliate-sidebar .nav-item-inactive:hover {
    background-color: #F1F5F9 !important;
    color: #0F172A !important;
}

/* ================= AFFILIATE SIDEBAR REFACTORED VIEWPORT SHELL ================= */
#affiliate-portal-root #affiliate-sidebar {
    height: 100vh !important;
    position: fixed !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    overflow: hidden !important;
}

/* Desktop Rail Toggle (64px icon strip on viewports >= 768px) */
@media (min-width: 768px) {
    #affiliate-portal-root.affiliate-rail-collapsed #affiliate-sidebar {
        width: 4rem !important; /* 64px */
    }
    #affiliate-portal-root.affiliate-rail-collapsed #affiliate-main-layout {
        margin-left: 4rem !important; /* 64px */
        width: calc(100% - 4rem) !important;
    }
    #affiliate-portal-root:not(.affiliate-rail-collapsed) #affiliate-sidebar {
        width: 16rem !important; /* 256px */
    }
    #affiliate-portal-root:not(.affiliate-rail-collapsed) #affiliate-main-layout {
        margin-left: 16rem !important; /* 256px */
        width: calc(100% - 16rem) !important;
    }
    #affiliate-portal-root.affiliate-rail-collapsed .sidebar-label,
    #affiliate-portal-root.affiliate-rail-collapsed .sidebar-badge,
    #affiliate-portal-root.affiliate-rail-collapsed .sidebar-brand-text {
        display: none !important;
    }
    #affiliate-portal-root.affiliate-rail-collapsed .nav-item-btn {
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 2.75rem !important;
        height: 2.75rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    #affiliate-portal-root.affiliate-rail-collapsed .sidebar-brand-container {
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #affiliate-portal-root.affiliate-rail-collapsed .sidebar-top-header {
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Floating Tooltips on Hover in Rail Mode */
    #affiliate-portal-root.affiliate-rail-collapsed .nav-item-btn:hover .sidebar-tooltip {
        display: block !important;
        opacity: 1 !important;
    }
}

/* Mobile Drawer on Viewports Under 768px */
@media (max-width: 767px) {
    #affiliate-portal-root #affiliate-sidebar {
        width: 16rem !important;
        z-index: 50 !important;
    }
    #affiliate-portal-root #affiliate-main-layout {
        margin-left: 0 !important;
        width: 100% !important;
    }
    #affiliate-portal-root .sidebar-tooltip {
        display: none !important;
    }
}

/* Affiliate Portal Light Mode Theme Harmonization */
html.light-mode #affiliate-portal-root #affiliate-sidebar,
html.light-mode #affiliate-sidebar {
    background-color: #FFFFFF !important;
    border-right: 1px solid #E2E8F0 !important;
    box-shadow: 2px 0 16px rgba(15, 23, 42, 0.04) !important;
}
html.light-mode #affiliate-portal-root .sidebar-top-header,
html.light-mode #affiliate-sidebar .sidebar-top-header {
    background-color: #F8FAFC !important;
    border-bottom: 1px solid #E2E8F0 !important;
}
html.light-mode #affiliate-portal-root .sidebar-bottom-section,
html.light-mode #affiliate-sidebar .sidebar-bottom-section,
html.light-mode .sidebar-bottom-section {
    background-color: #F8FAFC !important;
    border-top: 1px solid #E2E8F0 !important;
}
html.light-mode #affiliate-sidebar .sidebar-bottom-section .nav-item-inactive {
    color: #334155 !important;
}
html.light-mode #affiliate-sidebar .sidebar-bottom-section .nav-item-inactive:hover {
    background-color: #F1F5F9 !important;
    color: #0F172A !important;
}
html.light-mode #affiliate-sidebar #btn-sidebar-logout.nav-item-inactive {
    color: #DC2626 !important;
}
html.light-mode #affiliate-sidebar #btn-sidebar-logout.nav-item-inactive:hover {
    background-color: #FEF2F2 !important;
    color: #B91C1C !important;
}
html.light-mode #affiliate-portal-root .sidebar-tooltip {
    background-color: #0F172A !important;
    color: #F8FAFC !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
html.light-mode #affiliate-sidebar .nav-icon-container.icon-terms {
    background-color: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
    color: #475569 !important;
}
html.light-mode #affiliate-sidebar .nav-icon-container.icon-mainsite {
    background-color: #ECFDF5 !important;
    border-color: #A7F3D0 !important;
    color: #059669 !important;
}
html.light-mode #affiliate-sidebar .nav-icon-container.icon-logout {
    background-color: #FEF2F2 !important;
    border-color: #FECACA !important;
    color: #DC2626 !important;
}
html.light-mode #affiliate-terms-modal .modal-box {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}
html.light-mode #affiliate-terms-modal .modal-header,
html.light-mode #affiliate-terms-modal .modal-footer {
    background-color: #F8FAFC !important;
    border-color: #E2E8F0 !important;
}
html.light-mode #affiliate-terms-modal .modal-body {
    color: #334155 !important;
}

html.light-mode #affiliate-sidebar .sidebar-user-badge {
    background-color: #F8FAFC !important;
    border-color: #E2E8F0 !important;
    color: #0F172A !important;
}

html.light-mode #affiliate-sidebar .sidebar-user-badge .w-7 {
    background-color: #D1FAE5 !important;
    border-color: #6EE7B7 !important;
    color: #059669 !important;
}

html.light-mode #affiliate-sidebar .sidebar-section-heading {
    color: #64748B !important;
}

html.light-mode #affiliate-sidebar .tour-guide-card {
    background: linear-gradient(135deg, #F0FDF4 0%, #FFFFFF 100%) !important;
    border-color: #BBF7D0 !important;
}

html.light-mode #affiliate-sidebar .tour-guide-card:hover {
    background: #ECFDF5 !important;
    border-color: #86EFAC !important;
}

html.light-mode #affiliate-sidebar .tour-guide-card .w-7 {
    background-color: #D1FAE5 !important;
    border-color: #6EE7B7 !important;
    color: #059669 !important;
}

html.light-mode #affiliate-sidebar .tour-guide-card .tour-title {
    color: #065F46 !important;
}

html.light-mode #affiliate-sidebar .tour-guide-card .tour-desc {
    color: #475569 !important;
}

html.light-mode #affiliate-sidebar .sidebar-footer-card {
    background-color: #F8FAFC !important;
    border-color: #E2E8F0 !important;
    color: #475569 !important;
}

html.light-mode #sidebar-toggle-icon {
    color: #059669 !important;
}

html.light-mode .theme-toggle-btn {
    background-color: #E2E8F0 !important;
    border-color: #94A3B8 !important;
    color: #0F172A !important;
}

html.light-mode .theme-toggle-btn:hover {
    background-color: #F1F5F9 !important;
    border-color: #059669 !important;
}

/* 15. Modals & Dialogs (Delete Campaign Modal, Poster Edit, Toast) */
html.light-mode #posterDeleteModal > div,
html.light-mode #posterEditModal > div,
html.light-mode #posterSafeZoneModal > div {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
}

html.light-mode #posterDeleteModal h3,
html.light-mode #posterEditModal h3,
html.light-mode #posterDeleteModal #delete-modal-title {
    color: #0F172A !important;
}

html.light-mode #posterDeleteModal .bg-slate-900\/90 {
    background-color: #F1F5F9 !important;
    border-color: #E2E8F0 !important;
}

html.light-mode #adminToastInner {
    background-color: #0F172A !important;
    color: #FFFFFF !important;
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.3) !important;
}

/* 16. Site Announcement Bar (Header Notice) in Light Mode */
html.light-mode #site-announcement-bar,
html.light-mode .site-announcement-bar {
    background-color: #ECFDF5 !important;
    border-bottom-color: #A7F3D0 !important;
    color: #065F46 !important;
    box-shadow: 0 2px 6px rgba(20, 184, 166, 0.08) !important;
}

html.light-mode #site-announcement-bar span.text-white,
html.light-mode .site-announcement-bar span.text-white {
    color: #0F766E !important;
    font-weight: 600 !important;
}

html.light-mode #site-announcement-bar .bg-emerald-500,
html.light-mode .site-announcement-bar .bg-emerald-500 {
    background-color: #0D9488 !important;
    color: #FFFFFF !important;
}

html.light-mode #site-announcement-bar a,
html.light-mode .site-announcement-bar a {
    background-color: #0D9488 !important;
    color: #FFFFFF !important;
}

html.light-mode #site-announcement-bar a:hover,
html.light-mode .site-announcement-bar a:hover {
    background-color: #047857 !important;
}

html.light-mode #site-announcement-bar button,
html.light-mode .site-announcement-bar button {
    color: #047857 !important;
}

html.light-mode #site-announcement-bar button:hover,
html.light-mode .site-announcement-bar button:hover {
    color: #064E3B !important;
}

/* Alternate Theme Flavors in Light Mode */
html.light-mode #site-announcement-bar.theme-sky {
    background-color: #F0F9FF !important;
    border-bottom-color: #BAE6FD !important;
}
html.light-mode #site-announcement-bar.theme-sky span.text-white {
    color: #0369A1 !important;
}
html.light-mode #site-announcement-bar.theme-sky .bg-sky-500,
html.light-mode #site-announcement-bar.theme-sky a {
    background-color: #0284C7 !important;
    color: #FFFFFF !important;
}

html.light-mode #site-announcement-bar.theme-amber {
    background-color: #FFFBEB !important;
    border-bottom-color: #FDE68A !important;
}
html.light-mode #site-announcement-bar.theme-amber span.text-white {
    color: #92400E !important;
}
html.light-mode #site-announcement-bar.theme-amber .bg-amber-500,
html.light-mode #site-announcement-bar.theme-amber a {
    background-color: #D97706 !important;
    color: #FFFFFF !important;
}

html.light-mode #site-announcement-bar.theme-rose {
    background-color: #FFF1F2 !important;
    border-bottom-color: #FECDD3 !important;
}
html.light-mode #site-announcement-bar.theme-rose span.text-white {
    color: #9F1239 !important;
}
html.light-mode #site-announcement-bar.theme-rose .bg-rose-500,
html.light-mode #site-announcement-bar.theme-rose a {
    background-color: #E11D48 !important;
    color: #FFFFFF !important;
}

/* Service Card Icon Badges - Vibrant & High Contrast */
.service-icon-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #34D399 !important;
}
.service-icon-box i,
.service-card i {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #34D399 !important;
}
html.light-mode .service-icon-box {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(5, 150, 105, 0.35) !important;
    color: #059669 !important;
}
html.light-mode .service-icon-box i,
html.light-mode .service-card i {
    color: #059669 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ==========================================================================
   Full-Height Sidebar & Dividing Border
   ========================================================================== */
#admin-sidebar {
    border-right: 1px solid rgba(51, 65, 85, 0.8) !important;
}

html.light-mode #admin-sidebar {
    background-color: #E2E8F0 !important;
    border-right: 1px solid #94A3B8 !important;
}

#sidebar-brand-header {
    border-bottom: 1px solid rgba(51, 65, 85, 0.6) !important;
}

html.light-mode #sidebar-brand-header {
    background-color: #E2E8F0 !important;
    border-bottom: 1px solid #94A3B8 !important;
}

html.light-mode #desktop-sidebar-toggle-btn {
    background-color: #F8FAFC !important;
    border-color: #CBD5E1 !important;
    color: #059669 !important;
}

html.light-mode #desktop-sidebar-toggle-btn:hover {
    background-color: #FFFFFF !important;
    border-color: #94A3B8 !important;
    color: #047857 !important;
}

#sidebar-telemetry-container {
    border-top: 1px solid rgba(51, 65, 85, 0.6) !important;
}

html.light-mode #sidebar-telemetry-container {
    border-top: 1px solid #94A3B8 !important;
}

@media (min-width: 1024px) {
    #admin-sidebar {
        transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    #admin-sidebar.admin-rail-collapsed {
        width: 4.75rem !important;
    }
    #admin-sidebar.admin-rail-collapsed .admin-sidebar-text,
    #admin-sidebar.admin-rail-collapsed .admin-sidebar-badge {
        display: none !important;
    }
    #admin-sidebar.admin-rail-collapsed #sidebar-brand-header {
        justify-content: center !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    #admin-sidebar.admin-rail-collapsed #sidebar-brand-header a {
        display: none !important;
    }
    #admin-sidebar.admin-rail-collapsed #sidebar-brand-header #desktop-sidebar-toggle-btn {
        display: flex !important;
        margin: 0 auto !important;
    }
    #admin-sidebar.admin-rail-collapsed #sidebar-header-row {
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #admin-sidebar.admin-rail-collapsed #sidebar-nav button,
    #admin-sidebar.admin-rail-collapsed #sidebar-nav a {
        justify-content: center !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        gap: 0 !important;
    }
    #admin-sidebar.admin-rail-collapsed #sidebar-telemetry-container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    #admin-sidebar.admin-rail-collapsed .telemetry-card-full {
        display: none !important;
    }
    #admin-sidebar.admin-rail-collapsed .telemetry-card-mini {
        display: flex !important;
    }
}

/* ==========================================================================
   STANDALONE & NEW TAB PAGES LIGHT MODE SUPPORT
   ========================================================================== */
html.light-mode footer {
    background-color: #E2E8F0 !important;
    border-top-color: #94A3B8 !important;
    color: #475569 !important;
}
html.light-mode footer p {
    color: #475569 !important;
}
html.light-mode footer a {
    color: #334155 !important;
}
html.light-mode footer a:hover {
    color: #0D9488 !important;
}

/* Floating Theme Toggle Controller in Light Mode */
html.light-mode #floating-theme-toggle {
    background-color: rgba(241, 245, 249, 0.95) !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15) !important;
}
html.light-mode #floating-theme-icon {
    color: #334155 !important;
}

/* Standalone Page Deep Containers */
html.light-mode .public-job-card,
html.light-mode .service-card {
    background-color: #E2E8F0 !important;
    border-color: #94A3B8 !important;
}
html.light-mode .public-job-card:hover,
html.light-mode .service-card:hover {
    border-color: #0D9488 !important;
}