/* ==========================================================================
   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: #10b981;
}

/* ==========================================================================
   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: #047857 !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: #D1FAE5 !important;
    color: #065F46 !important;
    border-color: #10B981 !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 .tab-panel,
html.light-mode #panel-overview > div,
html.light-mode #panel-vacancies > div,
html.light-mode #panel-referrals > div,
html.light-mode #panel-contacts > div,
html.light-mode #panel-security > div,
html.light-mode #panel-tools > div,
html.light-mode #lead-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;
}

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(16, 185, 129, 0.08) !important;
}

html.light-mode #site-announcement-bar span.text-white,
html.light-mode .site-announcement-bar span.text-white {
    color: #065F46 !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: #059669 !important;
    color: #FFFFFF !important;
}

html.light-mode #site-announcement-bar a,
html.light-mode .site-announcement-bar a {
    background-color: #059669 !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;
}