/* ==========================================================================
   OMNICARD - MODERN LIGHT THEME STYLESHEET
   Applies only when <html> DOES NOT have the .dark class.
   Completely preserves the dark theme when .dark is present.
   ========================================================================== */

/* --- 1. Base Layout & Scrollbars --- */
html:not(.dark) body {
    background-color: #F8FAFC !important;
    color: #0F172A !important;
}

html:not(.dark) ::-webkit-scrollbar-track {
    background: #F1F5F9 !important;
}

html:not(.dark) ::-webkit-scrollbar-thumb {
    background: #CBD5E1 !important;
}

html:not(.dark) ::-webkit-scrollbar-thumb:hover {
    background: #94A3B8 !important;
}

/* --- 2. Header & Navigation --- */
html:not(.dark) header {
    background-color: rgba(255, 255, 255, 0.92) !important;
    border-bottom-color: #E2E8F0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
}

/* Header logo title */
html:not(.dark) header a.group span.font-extrabold {
    color: #0F172A !important;
}

/* Header logo icon */
html:not(.dark) header a.group .bg-gradient-to-tr,
html:not(.dark) header a.group .bg-gradient-to-tr i,
html:not(.dark) header a.group .bg-gradient-to-tr svg {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* Header navigation segmented pill bar */
html:not(.dark) header nav {
    background-color: #F1F5F9 !important;
    border-color: #E2E8F0 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Inactive nav links */
html:not(.dark) header nav a:not(.bg-brand-600) {
    color: #475569 !important;
    background-color: transparent !important;
}

html:not(.dark) header nav a:not(.bg-brand-600):hover {
    background-color: #E2E8F0 !important;
    color: #0F172A !important;
}

html:not(.dark) header nav a:not(.bg-brand-600) i,
html:not(.dark) header nav a:not(.bg-brand-600) svg {
    stroke: currentColor !important;
    color: currentColor !important;
}

/* Active nav link (Consolidado / Estados de Cuenta / Informes / Ajustes) */
html:not(.dark) header nav a.bg-brand-600 {
    background-color: #4F46E5 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px 0 rgba(79, 70, 229, 0.4), 0 1px 2px -1px rgba(79, 70, 229, 0.2) !important;
}

html:not(.dark) header nav a.bg-brand-600 *,
html:not(.dark) header nav a.bg-brand-600 i,
html:not(.dark) header nav a.bg-brand-600 svg,
html:not(.dark) header nav a.bg-brand-600 span {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
    fill: none !important;
}

html:not(.dark) header nav a.bg-brand-600:hover {
    background-color: #4338CA !important;
    color: #FFFFFF !important;
}

html:not(.dark) #syncBtn,
html:not(.dark) #themeToggleBtn,
html:not(.dark) #mobileMenuBtn {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #334155 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

html:not(.dark) #syncBtn:hover,
html:not(.dark) #themeToggleBtn:hover,
html:not(.dark) #mobileMenuBtn:hover {
    background-color: #F8FAFC !important;
    border-color: #94A3B8 !important;
    color: #0F172A !important;
}

html:not(.dark) #mobileMenuDropdown {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-top-color: #E2E8F0 !important;
}

html:not(.dark) #mobileMenuDropdown nav a:not(.bg-brand-600) {
    color: #475569 !important;
}

html:not(.dark) #mobileMenuDropdown nav a:not(.bg-brand-600):hover {
    background-color: #F1F5F9 !important;
    color: #0F172A !important;
}

html:not(.dark) #mobileMenuDropdown .bg-gray-900\/70 {
    background-color: #F1F5F9 !important;
    border-color: #E2E8F0 !important;
}

html:not(.dark) #mobileMenuDropdown .border-gray-800\/80,
html:not(.dark) #mobileMenuDropdown .border-gray-800 {
    border-color: #E2E8F0 !important;
}

html:not(.dark) .border-l.border-gray-800 {
    border-left-color: #E2E8F0 !important;
}

/* --- 3. Glass Cards & Surfaces --- */
html:not(.dark) .glass-card {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -2px rgba(0, 0, 0, 0.03) !important;
}

html:not(.dark) .sticky-filter-bar {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04) !important;
}

html:not(.dark) .glass-glow {
    box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.12), 0 8px 10px -6px rgba(99, 102, 241, 0.05) !important;
}

/* Background remapping */
html:not(.dark) .bg-gray-950,
html:not(.dark) .bg-gray-950\/90,
html:not(.dark) .bg-gray-950\/80,
html:not(.dark) .bg-gray-950\/70,
html:not(.dark) .bg-gray-950\/60,
html:not(.dark) .bg-gray-950\/50,
html:not(.dark) .bg-gray-950\/40 {
    background-color: #F8FAFC !important;
}

html:not(.dark) .bg-gray-900,
html:not(.dark) .bg-gray-900\/90,
html:not(.dark) .bg-gray-900\/80,
html:not(.dark) .bg-gray-900\/70,
html:not(.dark) .bg-gray-900\/60,
html:not(.dark) .bg-gray-900\/50,
html:not(.dark) .bg-gray-900\/40 {
    background-color: #F1F5F9 !important;
}

html:not(.dark) .bg-gray-800,
html:not(.dark) .bg-gray-800\/80,
html:not(.dark) .bg-gray-800\/60,
html:not(.dark) .bg-gray-800\/40,
html:not(.dark) .bg-gray-800\/30 {
    background-color: #E2E8F0 !important;
}

html:not(.dark) .hover\:bg-gray-800:hover,
html:not(.dark) .hover\:bg-gray-700\/80:hover,
html:not(.dark) .hover\:bg-gray-800\/80:hover,
html:not(.dark) .hover\:bg-gray-900\/60:hover {
    background-color: #E2E8F0 !important;
}

/* Hero & gradient remapping */
html:not(.dark) .bg-gradient-to-r.from-gray-950.via-gray-900.to-gray-950 {
    background-image: none !important;
    background-color: #FFFFFF !important;
}

html:not(.dark) .bg-gradient-to-r.from-brand-950\/40.via-gray-900.to-indigo-950\/30 {
    background-image: linear-gradient(to right, #EEF2FF, #F8FAFC, #F5F3FF) !important;
}

/* Informational callout boxes in settings & dashboard */
html:not(.dark) .bg-indigo-950\/30,
html:not(.dark) .bg-indigo-950\/40,
html:not(.dark) .bg-indigo-950\/60,
html:not(.dark) .bg-indigo-950\/80 {
    background-color: #EEF2FF !important;
    border-color: #C7D2FE !important;
    color: #3730A3 !important;
}

html:not(.dark) .bg-emerald-950\/30,
html:not(.dark) .bg-emerald-950\/40,
html:not(.dark) .bg-emerald-950\/60 {
    background-color: #ECFDF5 !important;
    border-color: #A7F3D0 !important;
    color: #065F46 !important;
}

html:not(.dark) .bg-rose-950\/30,
html:not(.dark) .bg-rose-950\/40,
html:not(.dark) .bg-rose-950\/60 {
    background-color: #FFF1F2 !important;
    border-color: #FECDD3 !important;
    color: #9F1239 !important;
}

html:not(.dark) .bg-amber-950\/30,
html:not(.dark) .bg-amber-950\/40,
html:not(.dark) .bg-amber-950\/60 {
    background-color: #FFFBEB !important;
    border-color: #FDE68A !important;
    color: #92400E !important;
}

/* Progress bar track */
html:not(.dark) .w-full.bg-gray-950.rounded-full,
html:not(.dark) .w-full.bg-gray-800\/80.rounded-full {
    background-color: #E2E8F0 !important;
    border-color: #CBD5E1 !important;
}

/* --- 4. Borders & Dividers --- */
html:not(.dark) .border-gray-950,
html:not(.dark) .border-gray-900,
html:not(.dark) .border-gray-800,
html:not(.dark) .border-gray-800\/80,
html:not(.dark) .border-gray-800\/60,
html:not(.dark) .border-gray-700,
html:not(.dark) .border-gray-700\/80,
html:not(.dark) .border-gray-700\/40 {
    border-color: #E2E8F0 !important;
}

html:not(.dark) .divide-gray-800 > :not([hidden]) ~ :not([hidden]),
html:not(.dark) .divide-gray-800\/80 > :not([hidden]) ~ :not([hidden]),
html:not(.dark) .divide-gray-800\/60 > :not([hidden]) ~ :not([hidden]) {
    border-color: #E2E8F0 !important;
}

/* --- 5. Typography --- */
html:not(.dark) h1.text-white,
html:not(.dark) h2.text-white,
html:not(.dark) h3.text-white,
html:not(.dark) h4.text-white {
    color: #0F172A !important;
}

/* Headings and labels in light mode (only when NOT on a solid colored button/badge/pill) */
html:not(.dark) .font-extrabold.text-white:not(button):not(a):not(.btn-primary):not(.bg-brand-600):not(.bg-brand-500):not(.bg-indigo-600):not(.bg-emerald-600):not(.bg-rose-600):not(.bg-blue-600):not([class*="bg-gradient"]):not(.bank-chart-pill):not(.page-type-btn):not(.report-tab-btn):not(.annual-type-btn):not(.mockup-bank-card):not(.mockup-bank-card *),
html:not(.dark) .font-black.text-white:not(button):not(a):not(.btn-primary):not(.bg-brand-600):not(.bg-brand-500):not(.bg-indigo-600):not(.bg-emerald-600):not(.bg-rose-600):not(.bg-blue-600):not([class*="bg-gradient"]):not(.bank-chart-pill):not(.page-type-btn):not(.report-tab-btn):not(.annual-type-btn):not(#tableTotalBillable):not(#bankTableTotal):not(.mockup-bank-card):not(.mockup-bank-card *),
html:not(.dark) .font-bold.text-white:not(button):not(a):not(.btn-primary):not(.bg-brand-600):not(.bg-brand-500):not(.bg-indigo-600):not(.bg-emerald-600):not(.bg-rose-600):not(.bg-blue-600):not([class*="bg-gradient"]):not(.bank-chart-pill):not(.page-type-btn):not(.report-tab-btn):not(.annual-type-btn):not(.mockup-bank-card):not(.mockup-bank-card *),
html:not(.dark) .font-semibold.text-white:not(button):not(a):not(.btn-primary):not(.bg-brand-600):not(.bg-brand-500):not(.bg-indigo-600):not(.bg-emerald-600):not(.bg-rose-600):not(.bg-blue-600):not([class*="bg-gradient"]):not(.bank-chart-pill):not(.page-type-btn):not(.report-tab-btn):not(.annual-type-btn):not(.mockup-bank-card):not(.mockup-bank-card *) {
    color: #0F172A !important;
}

/* General text-white override for surface text */
html:not(.dark) .text-white:not(button):not(a):not(.btn-primary):not(.bg-brand-600):not(.bg-brand-500):not(.bg-indigo-600):not(.bg-emerald-600):not(.bg-rose-600):not(.bg-blue-600):not([class*="bg-gradient"]):not(.page-type-btn):not(.report-tab-btn):not(.annual-type-btn):not(.bank-chart-pill):not(#tableTotalBillable):not(#bankTableTotal):not(.mockup-bank-card):not(.mockup-bank-card *) {
    color: #0F172A !important;
}

html:not(.dark) .text-gray-100,
html:not(.dark) .text-gray-200 {
    color: #1E293B !important;
}

html:not(.dark) .text-gray-300 {
    color: #334155 !important;
}

html:not(.dark) .text-gray-400 {
    color: #64748B !important;
}

html:not(.dark) .text-gray-500 {
    color: #94A3B8 !important;
}

/* --- 6. Form Elements & Buttons --- */
html:not(.dark) select,
html:not(.dark) input[type="text"],
html:not(.dark) input[type="number"],
html:not(.dark) input[type="password"],
html:not(.dark) input[type="email"],
html:not(.dark) textarea {
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
}

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

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
    color: #94A3B8 !important;
}

/* Secondary / Gray Buttons */
html:not(.dark) button.bg-gray-900,
html:not(.dark) button.bg-gray-800,
html:not(.dark) a.bg-gray-900,
html:not(.dark) a.bg-gray-800 {
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #334155 !important;
}

html:not(.dark) button.bg-gray-900:hover,
html:not(.dark) button.bg-gray-800:hover,
html:not(.dark) a.bg-gray-900:hover,
html:not(.dark) a.bg-gray-800:hover {
    background-color: #F1F5F9 !important;
    color: #0F172A !important;
}

/* --- 6b. Solid Primary Action Buttons & Active Segmented Pills (PURE WHITE TEXT) --- */
html:not(.dark) .bg-brand-600,
html:not(.dark) .bg-brand-500,
html:not(.dark) .bg-brand-700,
html:not(.dark) button.bg-brand-600,
html:not(.dark) a.bg-brand-600,
html:not(.dark) button.bg-brand-500,
html:not(.dark) a.bg-brand-500,
html:not(.dark) .page-type-btn.bg-brand-600,
html:not(.dark) .report-tab-btn.bg-brand-600,
html:not(.dark) .annual-type-btn.bg-brand-600,
html:not(.dark) .bank-chart-pill.bg-brand-600 {
    background-color: #4F46E5 !important;
    color: #FFFFFF !important;
}

html:not(.dark) .bg-brand-600:hover,
html:not(.dark) button.bg-brand-600:hover,
html:not(.dark) a.bg-brand-600:hover,
html:not(.dark) button.bg-brand-500:hover,
html:not(.dark) a.bg-brand-500:hover {
    background-color: #4338CA !important;
    color: #FFFFFF !important;
}

html:not(.dark) .bg-emerald-600,
html:not(.dark) button.bg-emerald-600,
html:not(.dark) a.bg-emerald-600 {
    background-color: #059669 !important;
    color: #FFFFFF !important;
}
html:not(.dark) .bg-emerald-600:hover,
html:not(.dark) button.bg-emerald-600:hover,
html:not(.dark) a.bg-emerald-600:hover {
    background-color: #047857 !important;
    color: #FFFFFF !important;
}

html:not(.dark) .bg-rose-600,
html:not(.dark) button.bg-rose-600,
html:not(.dark) a.bg-rose-600 {
    background-color: #E11D48 !important;
    color: #FFFFFF !important;
}
html:not(.dark) .bg-rose-600:hover,
html:not(.dark) button.bg-rose-600:hover,
html:not(.dark) a.bg-rose-600:hover {
    background-color: #BE123C !important;
    color: #FFFFFF !important;
}

html:not(.dark) .bg-indigo-600,
html:not(.dark) button.bg-indigo-600,
html:not(.dark) a.bg-indigo-600 {
    background-color: #4F46E5 !important;
    color: #FFFFFF !important;
}
html:not(.dark) .bg-indigo-600:hover,
html:not(.dark) button.bg-indigo-600:hover,
html:not(.dark) a.bg-indigo-600:hover {
    background-color: #4338CA !important;
    color: #FFFFFF !important;
}

/* Gradient Action Buttons (Login, Register, Modal Classification) */
html:not(.dark) button[type="submit"].bg-gradient-to-r,
html:not(.dark) a.bg-gradient-to-r,
html:not(.dark) #applyCategoryBtn {
    color: #FFFFFF !important;
}

/* ALL nested elements inside solid buttons, tabs, and pills MUST be crisp white */
html:not(.dark) .bg-brand-600 *,
html:not(.dark) .bg-brand-500 *,
html:not(.dark) .bg-brand-700 *,
html:not(.dark) .bg-emerald-600 *,
html:not(.dark) .bg-rose-600 *,
html:not(.dark) .bg-indigo-600 *,
html:not(.dark) button.bg-brand-600 *,
html:not(.dark) a.bg-brand-600 *,
html:not(.dark) button.bg-emerald-600 *,
html:not(.dark) button.bg-rose-600 *,
html:not(.dark) button.bg-indigo-600 *,
html:not(.dark) .page-type-btn.bg-brand-600 *,
html:not(.dark) .report-tab-btn.bg-brand-600 *,
html:not(.dark) .annual-type-btn.bg-brand-600 *,
html:not(.dark) .bank-chart-pill.bg-brand-600 *,
html:not(.dark) button[type="submit"].bg-gradient-to-r *,
html:not(.dark) a.bg-gradient-to-r *,
html:not(.dark) #applyCategoryBtn * {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
    fill: none !important;
}

/* Inactive Segmented Controls & Filter Pills across the app */
html:not(.dark) .page-type-btn:not(.bg-brand-600),
html:not(.dark) .report-tab-btn:not(.bg-brand-600),
html:not(.dark) .annual-type-btn:not(.bg-brand-600),
html:not(.dark) .bank-chart-pill:not(.bg-brand-600) {
    color: #475569 !important;
    background-color: transparent !important;
}

html:not(.dark) .page-type-btn:not(.bg-brand-600):hover,
html:not(.dark) .report-tab-btn:not(.bg-brand-600):hover,
html:not(.dark) .annual-type-btn:not(.bg-brand-600):hover,
html:not(.dark) .bank-chart-pill:not(.bg-brand-600):hover {
    color: #0F172A !important;
    background-color: #E2E8F0 !important;
}

html:not(.dark) .report-tab-btn:not(.bg-brand-600) i,
html:not(.dark) .report-tab-btn:not(.bg-brand-600) svg {
    stroke: currentColor !important;
    color: currentColor !important;
}

/* Pagination Buttons */
html:not(.dark) #btnPrevPage,
html:not(.dark) #btnNextPage,
html:not(.dark) #bankBtnPrevPage,
html:not(.dark) #bankBtnNextPage {
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #334155 !important;
}

html:not(.dark) #btnPrevPage:hover:not(:disabled),
html:not(.dark) #btnNextPage:hover:not(:disabled),
html:not(.dark) #bankBtnPrevPage:hover:not(:disabled),
html:not(.dark) #bankBtnNextPage:hover:not(:disabled) {
    background-color: #F1F5F9 !important;
    border-color: #94A3B8 !important;
    color: #0F172A !important;
}

/* Category Badge Buttons in Tables */
html:not(.dark) .category-badge-btn {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #334155 !important;
}

html:not(.dark) .category-badge-btn:hover {
    background-color: #EEF2FF !important;
    border-color: #A5B4FC !important;
    color: #4338CA !important;
}

/* Specific UI accents in Light Mode */
html:not(.dark) #syncIcon {
    color: #0284C7 !important;
}

html:not(.dark) #tableTotalBillable,
html:not(.dark) #bankTableTotal {
    background-color: #EEF2FF !important;
    border-color: #C7D2FE !important;
    color: #4338CA !important;
}

html:not(.dark) .bank-card-container [style*="background: linear-gradient"],
html:not(.dark) .bank-card-container [style*="background: linear-gradient"] i,
html:not(.dark) .bank-card-container [style*="background: linear-gradient"] svg {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* --- 7. Tables --- */
html:not(.dark) table thead {
    background-color: #F8FAFC !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

html:not(.dark) table thead th {
    color: #475569 !important;
}

html:not(.dark) table tbody tr {
    border-bottom: 1px solid #F1F5F9 !important;
    background-color: #FFFFFF !important;
}

html:not(.dark) table tbody tr:hover {
    background-color: #F8FAFC !important;
}

html:not(.dark) table tbody td {
    color: #1E293B !important;
}

/* --- 8. Translucent Badges & Chips --- */
html:not(.dark) .bg-emerald-500\/10,
html:not(.dark) .bg-emerald-500\/15,
html:not(.dark) .bg-emerald-500\/20 {
    background-color: #ECFDF5 !important;
    border-color: #A7F3D0 !important;
    color: #047857 !important;
}

html:not(.dark) .bg-amber-500\/10,
html:not(.dark) .bg-amber-500\/15,
html:not(.dark) .bg-amber-500\/20 {
    background-color: #FFFBEB !important;
    border-color: #FDE68A !important;
    color: #B45309 !important;
}

html:not(.dark) .bg-rose-500\/10,
html:not(.dark) .bg-rose-500\/15,
html:not(.dark) .bg-rose-500\/20 {
    background-color: #FFF1F2 !important;
    border-color: #FECDD3 !important;
    color: #BE123C !important;
}

html:not(.dark) .bg-cyan-500\/10,
html:not(.dark) .bg-cyan-500\/15,
html:not(.dark) .bg-cyan-500\/20 {
    background-color: #ECFEFF !important;
    border-color: #A5F3FC !important;
    color: #0E7490 !important;
}

html:not(.dark) .bg-brand-500\/10,
html:not(.dark) .bg-brand-500\/15,
html:not(.dark) .bg-brand-500\/20,
html:not(.dark) .bg-indigo-500\/10,
html:not(.dark) .bg-indigo-500\/15,
html:not(.dark) .bg-indigo-500\/20 {
    background-color: #EEF2FF !important;
    border-color: #C7D2FE !important;
    color: #4338CA !important;
}

html:not(.dark) .bg-purple-500\/10,
html:not(.dark) .bg-purple-500\/15,
html:not(.dark) .bg-purple-500\/20 {
    background-color: #FAF5FF !important;
    border-color: #E9D5FF !important;
    color: #7E22CE !important;
}

html:not(.dark) .bg-blue-500\/10,
html:not(.dark) .bg-blue-500\/15,
html:not(.dark) .bg-blue-500\/20 {
    background-color: #EFF6FF !important;
    border-color: #BFDBFE !important;
    color: #1D4ED8 !important;
}

/* Gray / Slate badges & chips */
html:not(.dark) .bg-gray-700\/40,
html:not(.dark) .bg-gray-700\/30,
html:not(.dark) .bg-gray-700\/20,
html:not(.dark) .bg-slate-800 {
    background-color: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
    color: #475569 !important;
}

/* Bank card containers in Dashboard & Bank Statement */
html:not(.dark) .bank-card-container {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -2px rgba(0, 0, 0, 0.03) !important;
}

html:not(.dark) .bank-card-container:hover {
    border-color: #6366F1 !important;
    background-color: #F8FAFC !important;
}

/* Bank selector cards in Bank Statement */
html:not(.dark) .bank-selector-card.bank-selector-inactive {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
}

html:not(.dark) .bank-selector-card.bank-selector-inactive:hover {
    background-color: #F8FAFC !important;
    border-color: #CBD5E1 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06) !important;
}

html:not(.dark) .bank-selector-card.bank-selector-inactive .text-gray-300 {
    color: #334155 !important;
}

html:not(.dark) .bank-selector-card.bank-selector-inactive:hover .text-gray-300 {
    color: #0F172A !important;
}

html:not(.dark) .bank-selector-card.bank-selector-inactive .border-gray-800\/60,
html:not(.dark) .bank-selector-card.bank-selector-inactive .border-gray-800\/40 {
    border-color: #F1F5F9 !important;
}

/* Selected / Active Bank Card */
html:not(.dark) .bank-selector-card.bank-selector-active {
    background-image: linear-gradient(135deg, #FFFFFF 0%, #EEF2FF 100%) !important;
    background-color: #FFFFFF !important;
    border-color: #6366F1 !important;
    box-shadow: 0 4px 20px -2px rgba(99, 102, 241, 0.16), 0 0 0 2px rgba(99, 102, 241, 0.35) !important;
}

html:not(.dark) .bank-selector-card.bank-selector-active .text-white {
    color: #0F172A !important;
}

html:not(.dark) .bank-selector-card.bank-selector-active .text-brand-300 {
    color: #4338CA !important;
}

html:not(.dark) .bank-selector-card.bank-selector-active .border-gray-800\/60,
html:not(.dark) .bank-selector-card.bank-selector-active .border-gray-800\/40 {
    border-color: #E2E8F0 !important;
}

/* Category Summary Cards in Bank Statement */
html:not(.dark) .category-summary-card {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
}

html:not(.dark) .category-summary-card .text-gray-200 {
    color: #1E293B !important;
}

html:not(.dark) .category-summary-card .text-white {
    color: #0F172A !important;
}

html:not(.dark) .category-summary-card .text-gray-400 {
    color: #64748B !important;
}

/* Bank icon container with inline background color (excluding charts) */
html:not(.dark) .bank-selector-card [style*="background:"]:not(.apexcharts-canvas):not([id*="hart"]):not(svg) *,
html:not(.dark) .bank-selector-card [style*="background:"]:not(.apexcharts-canvas):not([id*="hart"]):not(svg) i,
html:not(.dark) .bank-selector-card [style*="background:"]:not(.apexcharts-canvas):not([id*="hart"]):not(svg) svg,
html:not(.dark) .glass-card [style*="background:"]:not(.apexcharts-canvas):not([id*="hart"]):not(svg) *,
html:not(.dark) .glass-card [style*="background:"]:not(.apexcharts-canvas):not([id*="hart"]):not(svg) i,
html:not(.dark) .glass-card [style*="background:"]:not(.apexcharts-canvas):not([id*="hart"]):not(svg) svg {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* Metric / Status text contrast enhancements in Light Mode */
html:not(.dark) .text-emerald-400:not(.bg-emerald-600):not(.bg-emerald-500) {
    color: #047857 !important;
}

html:not(.dark) .text-amber-400:not(.bg-amber-600):not(.bg-amber-500) {
    color: #B45309 !important;
}

html:not(.dark) .text-rose-400:not(.bg-rose-600):not(.bg-rose-500) {
    color: #BE123C !important;
}

html:not(.dark) .text-cyan-400:not(.bg-cyan-600):not(.bg-cyan-500) {
    color: #0284C7 !important;
}

/* --- 9. Modals & Dialogs --- */
html:not(.dark) #categoryModal {
    background-color: rgba(15, 23, 42, 0.45) !important;
}

html:not(.dark) #categoryModalDialog {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

html:not(.dark) #categoryModalDialog .bg-gray-950\/60,
html:not(.dark) #categoryModalDialog .bg-gray-950\/80,
html:not(.dark) #categoryModalDialog .bg-gray-950\/40 {
    background-color: #F8FAFC !important;
}

/* --- 10. Toast Notifications --- */
html:not(.dark) #toastContainer .bg-emerald-950\/90 {
    background-color: #ECFDF5 !important;
    border-color: #A7F3D0 !important;
    color: #065F46 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08) !important;
}

html:not(.dark) #toastContainer .bg-rose-950\/90 {
    background-color: #FFF1F2 !important;
    border-color: #FECDD3 !important;
    color: #9F1239 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08) !important;
}

/* --- 11. Footer --- */
html:not(.dark) footer {
    border-top-color: #E2E8F0 !important;
    color: #64748B !important;
    background-color: #F8FAFC !important;
}

/* --- 12. ApexCharts Light Theme Enhancements --- */
html:not(.dark) .apexcharts-canvas .apexcharts-tooltip {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12) !important;
    color: #000000 !important;
}

html:not(.dark) .apexcharts-canvas .apexcharts-tooltip-title {
    background: #F1F5F9 !important;
    border-bottom: 1px solid #E2E8F0 !important;
    color: #000000 !important;
    font-weight: 700 !important;
}

html:not(.dark) .apexcharts-canvas .apexcharts-tooltip-text {
    color: #000000 !important;
    font-weight: 600 !important;
}

html:not(.dark) .apexcharts-canvas .apexcharts-legend-text {
    color: #000000 !important;
    fill: #000000 !important;
    font-weight: 600 !important;
}

/* Strip any stroke/shadow/filter from ApexCharts text to ensure razor-sharp rendering */
html:not(.dark) .apexcharts-canvas text,
html:not(.dark) .apexcharts-canvas tspan {
    stroke: none !important;
    -webkit-text-stroke: 0px !important;
    text-shadow: none !important;
    filter: none !important;
    text-rendering: geometricPrecision !important;
}

/* X-Axis labels across all charts: pure solid black, clean weight, sharp */
html:not(.dark) .apexcharts-canvas .apexcharts-xaxis text,
html:not(.dark) .apexcharts-canvas .apexcharts-xaxis tspan,
html:not(.dark) .apexcharts-canvas .apexcharts-xaxis-label,
html:not(.dark) .apexcharts-canvas .apexcharts-xaxis-label tspan,
html:not(.dark) .apexcharts-canvas .apexcharts-xaxis-texts-g text,
html:not(.dark) .apexcharts-canvas .apexcharts-xaxis-texts-g tspan,
html:not(.dark) .apexcharts-canvas text.apexcharts-xaxis-label,
html:not(.dark) .apexcharts-canvas text.apexcharts-xaxis-label tspan {
    fill: #000000 !important;
    color: #000000 !important;
    stroke: none !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

/* Y-Axis labels across all charts: pure solid black */
html:not(.dark) .apexcharts-canvas .apexcharts-yaxis text,
html:not(.dark) .apexcharts-canvas .apexcharts-yaxis tspan,
html:not(.dark) .apexcharts-canvas .apexcharts-yaxis-label,
html:not(.dark) .apexcharts-canvas .apexcharts-yaxis-label tspan,
html:not(.dark) .apexcharts-canvas .apexcharts-yaxis-texts-g text,
html:not(.dark) .apexcharts-canvas .apexcharts-yaxis-texts-g tspan,
html:not(.dark) .apexcharts-canvas text.apexcharts-yaxis-label,
html:not(.dark) .apexcharts-canvas text.apexcharts-yaxis-label tspan {
    fill: #000000 !important;
    color: #000000 !important;
    stroke: none !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

/* Donut chart center hole labels in Light Mode */
html:not(.dark) .apexcharts-canvas .apexcharts-datalabel-label {
    fill: #475569 !important;
    color: #475569 !important;
    stroke: none !important;
    font-weight: 600 !important;
}

html:not(.dark) .apexcharts-canvas .apexcharts-datalabel-value {
    fill: #000000 !important;
    color: #000000 !important;
    stroke: none !important;
    font-weight: 700 !important;
}

/* Donut slice percentage data labels inside colorful slices */
html:not(.dark) .apexcharts-canvas .apexcharts-pie-label,
html:not(.dark) .apexcharts-canvas .apexcharts-pie-label tspan {
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
    stroke: none !important;
    font-weight: 700 !important;
}

/* Future installments chart data labels placed on top of bars */
html:not(.dark) #reportsFutureChart .apexcharts-datalabel,
html:not(.dark) #reportsFutureChart .apexcharts-datalabel tspan {
    fill: #0891B2 !important;
    color: #0891B2 !important;
    stroke: none !important;
    font-weight: 700 !important;
}

html:not(.dark) .apexcharts-canvas .apexcharts-gridline {
    stroke: #E2E8F0 !important;
}

html:not(.dark) .apexcharts-canvas .apexcharts-xaxis line,
html:not(.dark) .apexcharts-canvas .apexcharts-yaxis line,
html:not(.dark) .apexcharts-canvas .apexcharts-xaxis-tick,
html:not(.dark) .apexcharts-canvas .apexcharts-ycrosshairs,
html:not(.dark) .apexcharts-canvas .apexcharts-xcrosshairs {
    stroke: #CBD5E1 !important;
}

/* --- Documentation & Guide Page (Light Mode Enhancements) --- */
html:not(.dark) .step-number {
    color: #FFFFFF !important;
    font-weight: 800 !important;
}

html:not(.dark) .projection-summary-card {
    background: linear-gradient(135deg, #EEF2FF 0%, #FFFFFF 50%, #F5F3FF 100%) !important;
    border: 1px solid #C7D2FE !important;
    box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.12), 0 4px 6px -2px rgba(79, 70, 229, 0.05) !important;
}

html:not(.dark) .projection-summary-card .projection-title {
    color: #1E1B4B !important;
    font-weight: 800 !important;
}

html:not(.dark) .projection-summary-card .projection-desc {
    color: #334155 !important;
}

html:not(.dark) .projection-summary-card .projection-desc strong {
    color: #0F172A !important;
}

html:not(.dark) .projection-summary-card .projection-footer {
    background-color: #FFFFFF !important;
    border: 1px solid #E0E7FF !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
}

html:not(.dark) .projection-summary-card .projection-footer-title {
    color: #4338CA !important;
    font-weight: 700 !important;
}

html:not(.dark) .projection-summary-card .projection-footer-text {
    color: #475569 !important;
}

html:not(.dark) .smart-installment-box {
    background: #EEF2FF !important;
    border: 1px solid #C7D2FE !important;
}

html:not(.dark) .smart-installment-box .smart-box-title {
    color: #3730A3 !important;
}

html:not(.dark) .smart-installment-box p {
    color: #334155 !important;
}

html:not(.dark) .code-preview-box {
    background-color: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
}

html:not(.dark) .code-preview-box span.text-gray-500 {
    color: #64748B !important;
}

html:not(.dark) .guide-cta-card {
    background: linear-gradient(135deg, #EEF2FF 0%, #F8FAFC 50%, #F5F3FF 100%) !important;
    border: 1px solid #C7D2FE !important;
    box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.1) !important;
}

html:not(.dark) .guide-cta-card h3 {
    color: #1E1B4B !important;
}

html:not(.dark) .guide-cta-card p {
    color: #475569 !important;
}

/* ==========================================================================
   Mockup Physical Dark Credit Cards in Landing Page Mockup
   Ensures cards retain their luxury dark physical look, crisp white numbers,
   metallic gradients and glowing neon bank accents even in light mode.
   ========================================================================== */
html:not(.dark) .mockup-bank-card {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.35), 0 8px 10px -6px rgba(0, 0, 0, 0.25) !important;
}

html:not(.dark) .mockup-bank-card.mockup-card-diners {
    background: linear-gradient(135deg, #0A192F 0%, #0F172A 55%, #1E293B 100%) !important;
    border-color: rgba(56, 189, 248, 0.5) !important;
}

html:not(.dark) .mockup-bank-card.mockup-card-guayaquil {
    background: linear-gradient(135deg, #2D081F 0%, #170412 55%, #0F172A 100%) !important;
    border-color: rgba(244, 114, 182, 0.5) !important;
}

html:not(.dark) .mockup-bank-card.mockup-card-bolivariano {
    background: linear-gradient(135deg, #022C22 0%, #051C17 55%, #0F172A 100%) !important;
    border-color: rgba(52, 211, 153, 0.5) !important;
}

html:not(.dark) .mockup-bank-card .mockup-card-amount,
html:not(.dark) .mockup-bank-card .text-white {
    color: #FFFFFF !important;
}

html:not(.dark) .mockup-bank-card .text-sky-400 {
    color: #38BDF8 !important;
}

html:not(.dark) .mockup-bank-card .text-sky-300 {
    color: #BAE6FD !important;
}

html:not(.dark) .mockup-bank-card .bg-sky-500\/20 {
    background-color: rgba(14, 165, 233, 0.2) !important;
}

html:not(.dark) .mockup-bank-card .text-pink-400 {
    color: #F472B6 !important;
}

html:not(.dark) .mockup-bank-card .text-pink-300 {
    color: #FBCFE8 !important;
}

html:not(.dark) .mockup-bank-card .bg-pink-500\/20 {
    background-color: rgba(236, 72, 153, 0.2) !important;
}

html:not(.dark) .mockup-bank-card .text-emerald-400 {
    color: #34D399 !important;
}

html:not(.dark) .mockup-bank-card .text-emerald-300 {
    color: #A7F3D0 !important;
}

html:not(.dark) .mockup-bank-card .bg-emerald-500\/20 {
    background-color: rgba(16, 185, 129, 0.2) !important;
}

html:not(.dark) .mockup-bank-card .text-gray-400 {
    color: #94A3B8 !important;
}

html:not(.dark) .mockup-bank-card .text-gray-300 {
    color: #CBD5E1 !important;
}

html:not(.dark) .mockup-bank-card .text-cyan-400 {
    color: #22D3EE !important;
}

/* ==========================================================================
   Documentation Badges & Table Clarity (Light Mode)
   Eliminates opacity/blurriness and guarantees high contrast (WCAG AAA)
   ========================================================================== */
html:not(.dark) .badge-sheet-tc {
    background-color: #ECFDF5 !important;
    color: #047857 !important;
    border: 1.5px solid #10B981 !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.12) !important;
}

html:not(.dark) .badge-sheet-cash {
    background-color: #F0F9FF !important;
    color: #0369A1 !important;
    border: 1.5px solid #0EA5E9 !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 2px rgba(14, 165, 233, 0.12) !important;
}

html:not(.dark) .guide-badge-required {
    background-color: #ECFDF5 !important;
    color: #065F46 !important;
    border: 1.5px solid #34D399 !important;
    font-weight: 800 !important;
    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.12) !important;
}

html:not(.dark) .guide-badge-conditional {
    background-color: #EEF2FF !important;
    color: #3730A3 !important;
    border: 1.5px solid #818CF8 !important;
    font-weight: 800 !important;
    box-shadow: 0 1px 2px rgba(99, 102, 241, 0.12) !important;
}

html:not(.dark) .guide-badge-optional {
    background-color: #F1F5F9 !important;
    color: #334155 !important;
    border: 1.5px solid #CBD5E1 !important;
    font-weight: 700 !important;
}

html:not(.dark) table td.text-emerald-400 {
    color: #047857 !important;
    font-weight: 700 !important;
}

html:not(.dark) table td.text-cyan-400 {
    color: #0369A1 !important;
    font-weight: 600 !important;
}

html:not(.dark) table td.text-amber-400 {
    color: #B45309 !important;
    font-weight: 600 !important;
}