/* ============================================
   SATINE X - GLOBAL CSS VARIABLES
   ============================================ */

/* DARK MODE (default) */
:root, html.dark {
    --bg-primary: #120A1F;
    --bg-secondary: #140B24;
    --bg-card: #201334;
    --bg-hover: #27183F;
    --bg-input: #1A0F2E;
    --border-default: #32204E;
    --border-light: #4A3068;
    --text-primary: #FFFFFF;
    --text-secondary: #A78BBA;
    --text-muted: #7A5F8F;
    --accent: #EC4899;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-pink: 0 4px 20px rgba(236, 72, 153, 0.3);
}

/* LIGHT MODE - Light Pink */
html:not(.dark) {
    --bg-primary: #FFF5F7 !important;
    --bg-secondary: #FFFFFF !important;
    --bg-card: #FFFFFF !important;
    --bg-hover: #FFF0F3 !important;
    --bg-input: #FFF8F9 !important;
    --border-default: #FDE8EC !important;
    --border-light: #FBCFE8 !important;
    --text-primary: #1E1B4B !important;
    --text-secondary: #6B7280 !important;
    --text-muted: #9CA3AF !important;
    --accent: #EC4899 !important;
    --shadow-card: 0 1px 3px rgba(236, 72, 153, 0.08) !important;
    --shadow-card-hover: 0 4px 12px rgba(236, 72, 153, 0.12) !important;
    --shadow-pink: 0 4px 20px rgba(236, 72, 153, 0.15) !important;
}

/* ============================================
   BASE STYLES
   ============================================ */

body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   CARD COMPONENT
   ============================================ */

.card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 16px;
    padding: 1.25rem;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-card);
}

.card:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border-light) !important;
}

/* ============================================
   STAT CARD
   ============================================ */

.stat-card {
    position: relative;
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 16px;
    padding: 1.25rem;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-card);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 16px 16px 0 0;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border-light) !important;
}

.stat-card-pink::before { background: linear-gradient(90deg, #EC4899, #F472B6); }
.stat-card-green::before { background: linear-gradient(90deg, #22C55E, #10B981); }
.stat-card-orange::before { background: linear-gradient(90deg, #F59E0B, #EF4444); }
.stat-card-blue::before { background: linear-gradient(90deg, #3B82F6, #06B6D4); }

/* ============================================
   NAV ITEMS
   ============================================ */

.nav-item {
    display: flex;
    align-items: center;
    padding: 0.625rem 0.75rem;
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none;
    margin-bottom: 0.25rem;
}

.nav-item:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.nav-item-active {
    display: flex;
    align-items: center;
    padding: 0.625rem 0.75rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(190, 24, 93, 0.1));
    border: 1px solid rgba(236, 72, 153, 0.2);
    color: var(--accent);
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.15);
    text-decoration: none;
    margin-bottom: 0.25rem;
}

/* ============================================
   SECTION TITLE
   ============================================ */

.section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: 0.5rem;
    padding-left: 0.75rem;
}

/* ============================================
   ICON CIRCLES
   ============================================ */

.icon-pink {
    background: linear-gradient(135deg, #EC4899, #BE185D);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

.icon-green {
    background: linear-gradient(135deg, #22C55E, #10B981);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.icon-orange {
    background: linear-gradient(135deg, #F59E0B, #EF4444);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.icon-blue {
    background: linear-gradient(135deg, #3B82F6, #06B6D4);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.icon-red {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* ============================================
   QUICK ACTION
   ============================================ */

.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    border-radius: 12px;
    background-color: var(--bg-hover);
    border: 1px solid var(--border-default);
    transition: all 0.2s ease;
    text-decoration: none;
}

.quick-action:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: var(--shadow-pink);
}

/* ============================================
   SUMMARY ITEM
   ============================================ */

.summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-default);
}

.summary-item:last-child {
    border-bottom: none;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #EC4899, #BE185D);
    color: white;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-pink);
}

/* ============================================
   TRANSACTION ICONS
   ============================================ */

.tx-icon-deposit {
    width: 36px;
    height: 36px;
    background: rgba(34, 197, 94, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #22C55E;
}

.tx-icon-withdraw {
    width: 36px;
    height: 36px;
    background: rgba(239, 68, 68, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #EF4444;
}

.tx-icon-airtime {
    width: 36px;
    height: 36px;
    background: rgba(236, 72, 153, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #EC4899;
}

.tx-icon-data {
    width: 36px;
    height: 36px;
    background: rgba(59, 130, 246, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3B82F6;
}

.tx-icon-electricity {
    width: 36px;
    height: 36px;
    background: rgba(245, 158, 11, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F59E0B;
}

.tx-icon-cable {
    width: 36px;
    height: 36px;
    background: rgba(139, 92, 246, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8B5CF6;
}

/* ============================================
   STATUS BADGES
   ============================================ */

.status-successful {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: rgba(34, 197, 94, 0.15);
    color: #22C55E;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-processing {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-failed {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-pending {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: rgba(148, 163, 184, 0.15);
    color: #94A3B8;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ============================================
   SIDEBAR SCROLLBAR
   ============================================ */

.sidebar-scroll::-webkit-scrollbar {
    width: 4px;
}

.sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: 4px;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--border-light);
}

/* ============================================
   SIDEBAR FIXES
   ============================================ */

#sidebar {
    background-color: var(--bg-primary) !important;
    border-right-color: var(--border-default) !important;
}

#sidebar nav {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.mobile-sidebar-scroll {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* ============================================
   HEADER FIXES
   ============================================ */

#main-header {
    background-color: var(--bg-secondary) !important;
    border-bottom-color: var(--border-default) !important;
}

/* ============================================
   LIGHT MODE SPECIFIC FIXES
   ============================================ */

html:not(.dark) #main-header {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px);
    border-bottom-color: #FDE8EC !important;
}

html:not(.dark) #sidebar {
    background-color: var(--bg-secondary) !important;
}

html:not(.dark) .nav-item {
    color: #6B7280;
}

html:not(.dark) .nav-item:hover {
    background-color: #FFF0F3;
    color: #1E1B4B;
}

html:not(.dark) .nav-item-active {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(190, 24, 93, 0.05));
    border-color: rgba(236, 72, 153, 0.15);
    color: #EC4899;
}

html:not(.dark) .section-title {
    color: #EC4899;
}

html:not(.dark) .quick-action {
    background-color: #FFF8F9;
    border-color: #FDE8EC;
}

html:not(.dark) .quick-action:hover {
    background-color: #FFF0F3;
    border-color: #FBCFE8;
}

html:not(.dark) .card {
    border-color: #FDE8EC !important;
}

html:not(.dark) .card:hover {
    border-color: #FBCFE8 !important;
}

html:not(.dark) .stat-card {
    border-color: #FDE8EC !important;
}

html:not(.dark) .stat-card:hover {
    border-color: #FBCFE8 !important;
}

/* Bottom nav light mode */
html:not(.dark) nav.fixed.bottom-0 .max-w-md > div {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: #FDE8EC !important;
}

/* ============================================
   MOBILE HEADER LIGHT MODE
   ============================================ */

html:not(.dark) .lg\:hidden.fixed.top-0 {
    background-color: var(--bg-secondary) !important;
    border-bottom-color: var(--border-default) !important;
}

/* ============================================
   CHART TOOLTIP LIGHT MODE
   ============================================ */

html:not(.dark) #balanceChart {
    filter: none;
}

/* ============================================
   KYC BANNER LIGHT MODE
   ============================================ */

html:not(.dark) .kyc-banner-new {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.05), rgba(190, 24, 93, 0.03));
    border-color: rgba(236, 72, 153, 0.12);
}

html:not(.dark) .kyc-banner-icon {
    background: rgba(236, 72, 153, 0.1);
}

html:not(.dark) .kyc-banner-text h4 {
    color: #1E1B4B;
}

html:not(.dark) .kyc-banner-text p {
    color: #6B7280;
}

/* ============================================
   TABLE LIGHT MODE
   ============================================ */

html:not(.dark) .tx-table th {
    color: #9CA3AF;
    border-bottom-color: #FDE8EC;
}

html:not(.dark) .tx-table td {
    border-bottom-color: #FDE8EC;
}

/* ============================================
   EMPTY STATE LIGHT MODE
   ============================================ */

html:not(.dark) .empty-state-new svg {
    color: #FBCFE8;
}

html:not(.dark) .empty-state-new p {
    color: #9CA3AF;
}

/* ============================================
   DROPDOWN LIGHT MODE
   ============================================ */

html:not(.dark) .user-menu,
html:not(.dark) #mobile-user-menu {
    background-color: #FFFFFF !important;
    border-color: #FDE8EC !important;
}

html:not(.dark) .user-menu a,
html:not(.dark) #mobile-user-menu a {
    color: #6B7280;
}

html:not(.dark) .user-menu a:hover,
html:not(.dark) #mobile-user-menu a:hover {
    background-color: #FFF0F3 !important;
    color: #1E1B4B;
}

html:not(.dark) .user-menu .text-white,
html:not(.dark) #mobile-user-menu .text-white {
    color: #1E1B4B !important;
}

html:not(.dark) .user-menu .text-fintech-text-muted,
html:not(.dark) #mobile-user-menu .text-fintech-text-muted {
    color: #9CA3AF !important;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease forwards;
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

@media (max-width: 1023px) {
    .lg\:ml-\[260px\] {
        margin-left: 0 !important;
    }
}

@media (max-width: 640px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   FORCE LIGHT MODE BACKGROUNDS
   ULTRA SPECIFIC SELECTORS WITH !IMPORTANT
   ============================================ */

/* Body and main containers */
html:not(.dark) body,
html:not(.dark) .min-h-screen,
html:not(.dark) main,
html:not(.dark) div[class*="min-h-screen"] {
    background-color: #FFF5F7 !important;
}

/* Any Tailwind fintech bg classes */
html:not(.dark) .bg-fintech-bg-primary,
html:not(.dark) [class*="bg-fintech-bg-primary"] {
    background-color: #FFF5F7 !important;
}

html:not(.dark) .bg-fintech-bg-secondary,
html:not(.dark) [class*="bg-fintech-bg-secondary"] {
    background-color: #FFFFFF !important;
}

html:not(.dark) .bg-fintech-bg-card,
html:not(.dark) [class*="bg-fintech-bg-card"] {
    background-color: #FFFFFF !important;
}

html:not(.dark) .bg-fintech-bg-hover,
html:not(.dark) [class*="bg-fintech-bg-hover"] {
    background-color: #FFF0F3 !important;
}

/* Text colors */
html:not(.dark) .text-fintech-text-primary,
html:not(.dark) [class*="text-fintech-text-primary"] {
    color: #1E1B4B !important;
}

html:not(.dark) .text-fintech-text-secondary,
html:not(.dark) [class*="text-fintech-text-secondary"] {
    color: #6B7280 !important;
}

html:not(.dark) .text-fintech-text-muted,
html:not(.dark) [class*="text-fintech-text-muted"] {
    color: #9CA3AF !important;
}

/* Border colors */
html:not(.dark) .border-fintech-border,
html:not(.dark) [class*="border-fintech-border"] {
    border-color: #FDE8EC !important;
}

/* ============================================
   HEADER TEXT COLORS IN LIGHT MODE
   ============================================ */

html:not(.dark) #main-header .text-white,
html:not(.dark) #main-header [class*="text-white"] {
    color: #1E1B4B !important;
}

html:not(.dark) #main-header .text-fintech-text-muted,
html:not(.dark) #main-header [class*="text-fintech-text-muted"] {
    color: #9CA3AF !important;
}

html:not(.dark) #main-header .text-fintech-text-secondary,
html:not(.dark) #main-header [class*="text-fintech-text-secondary"] {
    color: #6B7280 !important;
}

/* ============================================
   SIDEBAR TEXT COLORS IN LIGHT MODE
   ============================================ */

html:not(.dark) #sidebar .text-white,
html:not(.dark) #sidebar [class*="text-white"] {
    color: #1E1B4B !important;
}

html:not(.dark) #sidebar .text-fintech-text-muted,
html:not(.dark) #sidebar [class*="text-fintech-text-muted"] {
    color: #9CA3AF !important;
}

html:not(.dark) #sidebar .text-fintech-text-secondary,
html:not(.dark) #sidebar [class*="text-fintech-text-secondary"] {
    color: #6B7280 !important;
}

/* ============================================
   SEARCH INPUT LIGHT MODE
   ============================================ */

html:not(.dark) .header-search {
    background-color: #FFF8F9 !important;
    border-color: #FDE8EC !important;
}

html:not(.dark) .header-search input {
    color: #1E1B4B !important;
}

html:not(.dark) .header-search input::placeholder {
    color: #9CA3AF !important;
}

/* ============================================
   SUMMARY & STAT CARD TEXT
   ============================================ */

html:not(.dark) .summary-item .text-white,
html:not(.dark) .summary-item [class*="text-white"] {
    color: #1E1B4B !important;
}

html:not(.dark) .stat-card .text-white,
html:not(.dark) .stat-card [class*="text-white"] {
    color: #1E1B4B !important;
}

/* ============================================
   PAGE HEADER TEXT
   ============================================ */

html:not(.dark) .page-header-left h1 {
    color: #1E1B4B !important;
}

html:not(.dark) .page-header-left p {
    color: #6B7280 !important;
}

/* ============================================
   CHART CARD TEXT
   ============================================ */

html:not(.dark) .card h3,
html:not(.dark) .card .text-white {
    color: #1E1B4B !important;
}

html:not(.dark) .card p,
html:not(.dark) .card .text-fintech-text-muted {
    color: #9CA3AF !important;
}

/* ============================================
   WALLET SUMMARY TEXT
   ============================================ */

html:not(.dark) .summary-item span:first-child {
    color: #6B7280 !important;
}

html:not(.dark) .summary-item span:last-child {
    color: #1E1B4B !important;
}

/* ============================================
   TRANSACTION TABLE TEXT
   ============================================ */

html:not(.dark) .tx-type-name {
    color: #1E1B4B !important;
}

html:not(.dark) .tx-type-detail {
    color: #9CA3AF !important;
}

html:not(.dark) .tx-amount {
    color: #1E1B4B !important;
}

html:not(.dark) .tx-date {
    color: #6B7280 !important;
}

html:not(.dark) .tx-date-time {
    color: #9CA3AF !important;
}

/* ============================================
   QUICK ACTION TEXT
   ============================================ */

html:not(.dark) .quick-action span {
    color: #6B7280 !important;
}

/* ============================================
   VIEW ALL BUTTON
   ============================================ */

html:not(.dark) .text-pink-400 {
    color: #EC4899 !important;
}

/* ============================================
   STATUS BADGES IN LIGHT MODE
   ============================================ */

html:not(.dark) .status-successful {
    background: rgba(34, 197, 94, 0.1);
}

html:not(.dark) .status-processing {
    background: rgba(245, 158, 11, 0.1);
}

html:not(.dark) .status-failed {
    background: rgba(239, 68, 68, 0.1);
}

html:not(.dark) .status-pending {
    background: rgba(148, 163, 184, 0.1);
}

/* ============================================
   USER CARD IN SIDEBAR LIGHT MODE
   ============================================ */

html:not(.dark) #sidebar .bg-fintech-bg-card {
    background-color: #FFFFFF !important;
    border-color: #FDE8EC !important;
}

html:not(.dark) #sidebar .bg-fintech-bg-card .text-white {
    color: #1E1B4B !important;
}

html:not(.dark) #sidebar .bg-fintech-bg-card .text-fintech-text-muted {
    color: #9CA3AF !important;
}

/* ============================================
   LOGOUT BUTTON IN LIGHT MODE
   ============================================ */

html:not(.dark) #sidebar button[type="submit"] {
    border-color: rgba(239, 68, 68, 0.2) !important;
    color: #EF4444 !important;
}

html:not(.dark) #sidebar button[type="submit"]:hover {
    background-color: rgba(239, 68, 68, 0.05) !important;
}

/* ============================================
   THEME TOGGLE IN LIGHT MODE
   ============================================ */

html:not(.dark) #theme-toggle-btn {
    color: #9CA3AF !important;
}

html:not(.dark) #theme-toggle-btn:hover {
    color: #1E1B4B !important;
    background-color: #FFF0F3 !important;
}

/* ============================================
   NOTIFICATION BELL IN LIGHT MODE
   ============================================ */

html:not(.dark) header button[aria-label="Notifications"] {
    color: #9CA3AF !important;
}

html:not(.dark) header button[aria-label="Notifications"]:hover {
    color: #1E1B4B !important;
    background-color: #FFF0F3 !important;
}

/* ============================================
   USER DROPDOWN TOGGLE IN LIGHT MODE
   ============================================ */

html:not(.dark) .user-toggle {
    color: #6B7280 !important;
}

html:not(.dark) .user-toggle:hover {
    background-color: #FFF0F3 !important;
}

html:not(.dark) .user-toggle .text-white {
    color: #1E1B4B !important;
}

html:not(.dark) .user-toggle .text-fintech-text-muted {
    color: #9CA3AF !important;
}

/* ============================================
   CHEVRON IN LIGHT MODE
   ============================================ */

html:not(.dark) .user-chevron {
    color: #9CA3AF !important;
}

/* ============================================
   AVATAR RING IN LIGHT MODE
   ============================================ */

html:not(.dark) .user-toggle:hover .ring-transparent {
    --tw-ring-color: rgba(236, 72, 153, 0.3) !important;
}

/* ============================================
   ONLINE INDICATOR RING IN LIGHT MODE
   ============================================ */

html:not(.dark) .ring-fintech-bg-secondary {
    --tw-ring-color: #FFFFFF !important;
}

/* ============================================
   MOBILE MENU BUTTON IN LIGHT MODE
   ============================================ */

html:not(.dark) #mobile-menu-btn {
    color: #9CA3AF !important;
}

html:not(.dark) #mobile-menu-btn:hover {
    color: #1E1B4B !important;
    background-color: #FFF0F3 !important;
}

/* ============================================
   LOGO TEXT IN LIGHT MODE
   ============================================ */

html:not(.dark) header a[href="{{ route('home') }}"] .text-white {
    color: #1E1B4B !important;
}

html:not(.dark) header a[href="{{ route('home') }}"] .text-pink-400 {
    color: #EC4899 !important;
}

/* ============================================
   GUEST BUTTONS IN LIGHT MODE
   ============================================ */

html:not(.dark) header a[href="{{ route('login') }}"] {
    color: #6B7280 !important;
}

html:not(.dark) header a[href="{{ route('login') }}"]:hover {
    color: #1E1B4B !important;
    background-color: #FFF0F3 !important;
}

/* ============================================
   FORM ELEMENTS IN LIGHT MODE
   ============================================ */

html:not(.dark) select,
html:not(.dark) input[type="text"] {
    background-color: #FFF8F9 !important;
    border-color: #FDE8EC !important;
    color: #1E1B4B !important;
}

html:not(.dark) select option {
    background-color: #FFFFFF !important;
    color: #1E1B4B !important;
}

/* ============================================
   CHART DROPDOWN IN LIGHT MODE
   ============================================ */

html:not(.dark) .card select {
    background-color: #FFF8F9 !important;
    border-color: #FDE8EC !important;
    color: #6B7280 !important;
}

/* ============================================
   ALERT MESSAGES IN LIGHT MODE
   ============================================ */

html:not(.dark) .bg-green-500\/10 {
    background-color: rgba(34, 197, 94, 0.1) !important;
}

html:not(.dark) .border-green-500\/20 {
    border-color: rgba(34, 197, 94, 0.2) !important;
}

html:not(.dark) .text-green-400 {
    color: #22C55E !important;
}

html:not(.dark) .bg-red-500\/10 {
    background-color: rgba(239, 68, 68, 0.1) !important;
}

html:not(.dark) .border-red-500\/20 {
    border-color: rgba(239, 68, 68, 0.2) !important;
}

html:not(.dark) .text-red-400 {
    color: #EF4444 !important;
}