/* ==========================================================================
   TitanRFI - Modern Dark Professional Theme
   Executive Fintech & Enterprise Dark Palette
   ========================================================================== */

:root {
    --dark-canvas: #0b1225;
    --dark-surface: #111c30;
    --dark-surface-elevated: #172035;
    --dark-surface-card: #152038;
    --dark-surface-hover: #1e2d47;
    --dark-input: #0d1628;
    --dark-border: rgba(255, 255, 255, 0.08);
    --dark-border-strong: #243350;
    --dark-border-subtle: #192840;
    
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #8b9ab4;
    --text-accent: #10e589;
    
    --emerald-primary: #10b981;
    --emerald-bright: #10e589;
    --emerald-glow: rgba(16, 229, 137, 0.35);
    --cyan-accent: #06b6d4;
    --blue-accent: #3b82f6;
}

/* Global resets & typography */
body {
    background-color: var(--dark-canvas) !important;
    color: var(--text-primary) !important;
    -webkit-font-smoothing: antialiased;
}

/* Global Dark Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #0b1225 !important;
}
::-webkit-scrollbar-thumb {
    background: #1f2c42 !important;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
::-webkit-scrollbar-thumb:hover {
    background: #10b981 !important;
}

/* ==========================================================================
   Tailwind Utilities Dark Overrides (Safe presentation-only)
   ========================================================================== */

/* Backgrounds */
.bg-white,
.bg-white\/90,
.bg-white\/95,
.bg-white\/80 {
    background-color: var(--dark-surface) !important;
}

.bg-slate-50,
.bg-slate-50\/50,
.bg-slate-100,
.bg-gray-50,
.bg-gray-100,
.bg-neutral-50 {
    background-color: var(--dark-surface-elevated) !important;
}

.bg-slate-50\/80,
.bg-slate-100\/80 {
    background-color: rgba(22, 32, 50, 0.8) !important;
}

/* Borders */
.border-slate-100,
.border-slate-200,
.border-gray-100,
.border-gray-200,
.border-white\/20,
.border-white\/30,
.border-white\/50 {
    border-color: var(--dark-border-strong) !important;
}

.divide-slate-100 > :not([hidden]) ~ :not([hidden]),
.divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--dark-border-strong) !important;
}

/* Text Colors */
.text-slate-900,
.text-slate-800,
.text-gray-900,
.text-gray-800,
.text-\[\#093246\],
.text-\[\#0f3145\] {
    color: var(--text-primary) !important;
}

.text-slate-700,
.text-slate-600,
.text-gray-700,
.text-gray-600 {
    color: var(--text-secondary) !important;
}

.text-slate-500,
.text-slate-400,
.text-gray-500,
.text-gray-400 {
    color: var(--text-muted) !important;
}

/* Shadows */
.shadow-sm,
.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */

.nav-tab-card {
    background: var(--dark-surface-elevated) !important;
    border: 1px solid var(--dark-border-strong) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.nav-tab-card:hover {
    background: var(--dark-surface-hover) !important;
    border-color: var(--emerald-primary) !important;
    box-shadow: 0 8px 24px var(--emerald-glow) !important;
}

.nav-tab-card .nav-tab-label {
    color: var(--text-secondary) !important;
}

.nav-tab-card:hover .nav-tab-label {
    color: var(--text-primary) !important;
}

.nav-tab-active {
    background: linear-gradient(135deg, #10b981 0%, #0d382d 100%) !important;
    border-color: #34d399 !important;
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4) !important;
}

.nav-tab-active .nav-tab-label {
    color: #ffffff !important;
}

/* ==========================================================================
   Inputs, Textareas, Selects & Form Controls
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
select,
textarea,
.input-premium,
.filter-ctrl-v,
.action-select {
    background-color: var(--dark-input) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--dark-border-strong) !important;
}

input:focus,
select:focus,
textarea:focus,
.input-premium:focus,
.filter-ctrl-v:focus,
.action-select:focus {
    border-color: var(--emerald-primary) !important;
    box-shadow: 0 0 0 3px var(--emerald-glow) !important;
    outline: none !important;
}

input::placeholder,
textarea::placeholder,
.input-premium::placeholder {
    color: #55667e !important;
}

input[readonly],
input:disabled,
select:disabled,
textarea:disabled,
.input-premium[readonly],
.input-premium.bg-slate-50,
.input-premium.bg-slate-100 {
    background-color: #080c16 !important;
    color: var(--text-muted) !important;
    border-color: var(--dark-border-subtle) !important;
}

select option {
    background-color: #111827 !important;
    color: #f8fafc !important;
}

/* ==========================================================================
   Tables (Manager, Support, Report, Admin, etc.)
   ========================================================================== */

.manager-table-container,
.support-table-container,
.table-container {
    background-color: var(--dark-surface) !important;
    border: 1px solid var(--dark-border-strong) !important;
}

table {
    border-color: var(--dark-border-strong) !important;
}

th,
.manager-table th,
.support-table th {
    background-color: #0c1220 !important;
    color: #f8fafc !important;
    border-bottom: 1px solid var(--dark-border-strong) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

td,
.manager-table td,
.support-table td {
    background-color: transparent !important;
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--dark-border-subtle) !important;
}

/* Table Rows & Glassy Green Hover Effect */
tr {
    transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

tr:nth-child(even) td,
.manager-table tbody tr:nth-child(even),
.support-table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.015) !important;
}

/* Subtle Hover Effect on rows across ALL tables */
tbody tr:hover,
tbody tr:hover td,
table tr:hover td,
.manager-table tbody tr:hover,
.manager-table tbody tr:hover td,
.support-table tbody tr:hover,
.support-table tbody tr:hover td,
tr.hover\:bg-slate-50:hover,
tr.hover\:bg-slate-50:hover td,
tr.hover\:bg-slate-100:hover,
tr.hover\:bg-slate-100:hover td,
tr.hover\:bg-gray-50:hover,
tr.hover\:bg-gray-50:hover td {
    background-color: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

tbody tr:hover {
    box-shadow: none !important;
}

/* ==========================================================================
   Cards, Panels & Containers
   ========================================================================== */

.section-card,
.kpi-card-v,
.stat-card,
.glass-panel,
.query-card,
.chip-card,
.sub-card {
    background-color: var(--dark-surface) !important;
    border: 1px solid var(--dark-border-strong) !important;
    color: var(--text-primary) !important;
}

.kpi-card-v:hover,
.stat-card:hover,
.section-card:hover {
    background-color: var(--dark-surface-elevated) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

/* Empty State Containers */
#empty-queries,
.bulk-box {
    background-color: #0c1220 !important;
    border-color: var(--dark-border-strong) !important;
}

/* ==========================================================================
   Badges & Pills (Executive High Contrast Professional Palette)
   ========================================================================== */

/* High Risk / Danger Badges */
.badge-risk-high,
.bg-red-100,
.bg-rose-100,
.bg-rose-50,
.bg-red-50,
.badge-status-rejected,
.badge-tat-breach-yes {
    background-color: rgba(239, 68, 68, 0.18) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
}

/* Medium Risk / Warning Badges */
.badge-risk-medium,
.bg-yellow-100,
.bg-amber-100,
.bg-amber-50,
.bg-yellow-50 {
    background-color: rgba(245, 158, 11, 0.18) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
}

/* Low Risk / Success / Completed Badges */
.badge-risk-low,
.bg-green-100,
.bg-emerald-100,
.bg-emerald-50,
.bg-green-50,
.badge-status-completed,
.badge-tat-breach-no {
    background-color: rgba(16, 185, 129, 0.18) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
}

/* Initiated / In-Progress / Queue Badges */
.badge-status-initiated,
.bg-purple-100,
.bg-indigo-100,
.bg-purple-50,
.bg-indigo-50 {
    background-color: rgba(168, 85, 247, 0.2) !important;
    color: #c084fc !important;
    border: 1px solid rgba(168, 85, 247, 0.45) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
}

/* Info / Support / Client Badges */
.badge-status-response,
.bg-blue-100,
.bg-blue-50,
.badge-tat-days {
    background-color: rgba(59, 130, 246, 0.18) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
}

/* Neutral / Internal / TAT / Reference Badges */
.badge-internal,
.badge-tat,
.badge-tat-days-none,
.font-mono.bg-slate-100,
span.bg-slate-100.rounded {
    background-color: #0f172a !important;
    color: #38bdf8 !important;
    border: 1px solid #1e293b !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
}

/* Force high contrast text on Tailwind badge combinations in dark mode */
.text-red-800, .text-red-700, .text-rose-800 { color: #f87171 !important; }
.text-yellow-800, .text-amber-800 { color: #fbbf24 !important; }
.text-green-800, .text-emerald-800 { color: #34d399 !important; }
.text-purple-800, .text-purple-700 { color: #c084fc !important; }
.text-blue-800, .text-blue-700 { color: #60a5fa !important; }

/* ==========================================================================
   Modals & Dropdowns
   ========================================================================== */

#profile-modal > div:last-child > div,
.modal-fixed > div,
.ticket-widget-panel {
    background-color: var(--dark-surface) !important;
    border: 1px solid var(--dark-border-strong) !important;
    color: var(--text-primary) !important;
}

/* Detail Modal & Partial Content in Dark Mode */
#detail-modal [class*="bg-gradient-to-br from-slate-50 to-white"],
#modal-body [class*="bg-gradient-to-br from-slate-50 to-white"],
#modal-body [class*="from-slate-50"],
#modal-body [class*="to-white"],
#modal-body .modal-section-info > div > div,
#modal-body .modal-section-supporting > div,
#modal-body .modal-section-docs > div,
#modal-body .bg-gradient-to-br {
    background-image: none !important;
    background-color: var(--dark-surface-elevated) !important;
    border-color: var(--dark-border-strong) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

#modal-body h4,
#detail-modal h4 {
    color: var(--emerald-bright) !important;
    border-bottom-color: var(--dark-border-strong) !important;
}

#modal-body span.font-semibold,
#modal-body .text-slate-600 {
    color: var(--text-muted) !important;
}

#modal-body .text-slate-700,
#modal-body .text-slate-800 {
    color: var(--text-primary) !important;
}

#modal-body .border-slate-100,
#modal-body .border-slate-200 {
    border-color: var(--dark-border-subtle) !important;
}

#modal-body .bg-slate-100 {
    background-color: var(--dark-input) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--dark-border-subtle) !important;
}

#modal-body .bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.15) !important;
}
#modal-body .text-blue-600 {
    color: #60a5fa !important;
}
#modal-body .bg-\[\#093246\]\/10 {
    background-color: rgba(16, 229, 137, 0.15) !important;
}
#modal-body .text-\[\#093246\] {
    color: var(--emerald-bright) !important;
}

/* Generic Button Improvements */
button.bg-white,
a.bg-white {
    background-color: var(--dark-surface-elevated) !important;
    color: var(--text-primary) !important;
    border-color: var(--dark-border-strong) !important;
}

button.bg-white:hover,
a.bg-white:hover {
    background-color: var(--dark-surface-hover) !important;
    border-color: var(--text-muted) !important;
}

/* Filter Tag Pills */
.filter-tag-v {
    background: var(--dark-input) !important;
    border-color: var(--dark-border-strong) !important;
    color: var(--text-secondary) !important;
}

.filter-tag-v:hover {
    background: var(--dark-surface-hover) !important;
    color: var(--emerald-primary) !important;
    border-color: var(--emerald-primary) !important;
}

/* ==========================================================================
   Dashboard Page Specific Dark Overrides
   ========================================================================== */
.dashboard-container [class*="bg-gradient-to-br from-white"],
.dashboard-container div[class*="from-white"],
.dashboard-container form[class*="from-white"] {
    background: #111827 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

#filter-form {
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#filter-form input,
#filter-form select {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

#filter-form input::placeholder {
    color: #64748b !important;
}

#filter-form button[type="button"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
}

#filter-form button[type="button"]:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
}

[id^="kpi-card-"] {
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[id^="kpi-card-"] p:first-child {
    color: #94a3b8 !important;
}

[id^="chart-box-"] {
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[id^="chart-box-"] h3 {
    color: #f8fafc !important;
}

[id^="chart-box-"] p {
    color: #94a3b8 !important;
}

/* ==========================================================================
   Admin Panel Tab Cards & Icons
   ========================================================================== */
.admin-tab-card {
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.admin-tab-card:hover {
    background: #1e293b !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.admin-tab-card.admin-tab-active {
    background: linear-gradient(135deg, #10b981 0%, #0d382d 100%) !important;
    border-color: #34d399 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.35) !important;
}

.admin-tab-card .admin-tab-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.admin-tab-card:hover .admin-tab-icon {
    transform: scale(1.08);
}

.admin-tab-card.admin-tab-active .admin-tab-icon {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.admin-tab-card .material-symbols-outlined {
    font-size: 22px;
}

/* Unique Distinct Colors for Each Admin Tab Icon */
.tab-icon-users { color: #38bdf8 !important; background: rgba(56, 189, 248, 0.12) !important; }
.tab-icon-case-owners { color: #34d399 !important; background: rgba(52, 211, 153, 0.12) !important; }
.tab-icon-account-managers { color: #60a5fa !important; background: rgba(96, 165, 250, 0.12) !important; }
.tab-icon-case-handlers { color: #a78bfa !important; background: rgba(167, 139, 250, 0.12) !important; }
.tab-icon-currencies { color: #c084fc !important; background: rgba(192, 132, 252, 0.12) !important; }
.tab-icon-countries { color: #2dd4bf !important; background: rgba(45, 212, 191, 0.12) !important; }
.tab-icon-banking-partners { color: #38bdf8 !important; background: rgba(56, 189, 248, 0.12) !important; }
.tab-icon-clients { color: #fbbf24 !important; background: rgba(251, 191, 36, 0.12) !important; }
.tab-icon-query-types { color: #f87171 !important; background: rgba(248, 113, 113, 0.12) !important; }
.tab-icon-information { color: #818cf8 !important; background: rgba(129, 140, 248, 0.12) !important; }
.tab-icon-business-units { color: #22d3ee !important; background: rgba(34, 211, 238, 0.12) !important; }
.tab-icon-risk-categories { color: #fb923c !important; background: rgba(251, 146, 60, 0.12) !important; }
.tab-icon-counterparties { color: #f472b6 !important; background: rgba(244, 114, 182, 0.12) !important; }
.tab-icon-transactions { color: #4ade80 !important; background: rgba(74, 222, 128, 0.12) !important; }
.tab-icon-rfi-types { color: #94a3b8 !important; background: rgba(148, 163, 184, 0.12) !important; }
.tab-icon-entity-types { color: #e879f9 !important; background: rgba(232, 121, 249, 0.12) !important; }
.tab-icon-api-keys { color: #facc15 !important; background: rgba(250, 204, 21, 0.12) !important; }
.tab-icon-sub-info { color: #fb7185 !important; background: rgba(251, 113, 133, 0.12) !important; }

/* Hover: Icon glows with its own color */
.admin-tab-card:hover .tab-icon-users { background: rgba(56, 189, 248, 0.22) !important; box-shadow: 0 0 14px rgba(56, 189, 248, 0.55) !important; }
.admin-tab-card:hover .tab-icon-case-owners { background: rgba(52, 211, 153, 0.22) !important; box-shadow: 0 0 14px rgba(52, 211, 153, 0.55) !important; }
.admin-tab-card:hover .tab-icon-account-managers { background: rgba(96, 165, 250, 0.22) !important; box-shadow: 0 0 14px rgba(96, 165, 250, 0.55) !important; }
.admin-tab-card:hover .tab-icon-case-handlers { background: rgba(167, 139, 250, 0.22) !important; box-shadow: 0 0 14px rgba(167, 139, 250, 0.55) !important; }
.admin-tab-card:hover .tab-icon-currencies { background: rgba(192, 132, 252, 0.22) !important; box-shadow: 0 0 14px rgba(192, 132, 252, 0.55) !important; }
.admin-tab-card:hover .tab-icon-countries { background: rgba(45, 212, 191, 0.22) !important; box-shadow: 0 0 14px rgba(45, 212, 191, 0.55) !important; }
.admin-tab-card:hover .tab-icon-banking-partners { background: rgba(56, 189, 248, 0.22) !important; box-shadow: 0 0 14px rgba(56, 189, 248, 0.55) !important; }
.admin-tab-card:hover .tab-icon-clients { background: rgba(251, 191, 36, 0.22) !important; box-shadow: 0 0 14px rgba(251, 191, 36, 0.55) !important; }
.admin-tab-card:hover .tab-icon-query-types { background: rgba(248, 113, 113, 0.22) !important; box-shadow: 0 0 14px rgba(248, 113, 113, 0.55) !important; }
.admin-tab-card:hover .tab-icon-information { background: rgba(129, 140, 248, 0.22) !important; box-shadow: 0 0 14px rgba(129, 140, 248, 0.55) !important; }
.admin-tab-card:hover .tab-icon-business-units { background: rgba(34, 211, 238, 0.22) !important; box-shadow: 0 0 14px rgba(34, 211, 238, 0.55) !important; }
.admin-tab-card:hover .tab-icon-risk-categories { background: rgba(251, 146, 60, 0.22) !important; box-shadow: 0 0 14px rgba(251, 146, 60, 0.55) !important; }
.admin-tab-card:hover .tab-icon-counterparties { background: rgba(244, 114, 182, 0.22) !important; box-shadow: 0 0 14px rgba(244, 114, 182, 0.55) !important; }
.admin-tab-card:hover .tab-icon-transactions { background: rgba(74, 222, 128, 0.22) !important; box-shadow: 0 0 14px rgba(74, 222, 128, 0.55) !important; }
.admin-tab-card:hover .tab-icon-rfi-types { background: rgba(148, 163, 184, 0.22) !important; box-shadow: 0 0 14px rgba(148, 163, 184, 0.55) !important; }
.admin-tab-card:hover .tab-icon-entity-types { background: rgba(232, 121, 249, 0.22) !important; box-shadow: 0 0 14px rgba(232, 121, 249, 0.55) !important; }
.admin-tab-card:hover .tab-icon-api-keys { background: rgba(250, 204, 21, 0.22) !important; box-shadow: 0 0 14px rgba(250, 204, 21, 0.55) !important; }
.admin-tab-card:hover .tab-icon-sub-info { background: rgba(251, 113, 133, 0.22) !important; box-shadow: 0 0 14px rgba(251, 113, 133, 0.55) !important; }

/* ==========================================================================
   RFI Records Table - Professional Green Header
   ========================================================================== */
.report-table th,
table.report-table th,
#report-table th {
    background: linear-gradient(180deg, #0d3b2e 0%, #092c22 100%) !important;
    color: #ecfdf5 !important;
    border-bottom: 2px solid #10b981 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35) !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
}

.report-table th:last-child,
table.report-table th:last-child,
#report-table th:last-child {
    background: linear-gradient(180deg, #0d3b2e 0%, #092c22 100%) !important;
    border-left: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-bottom: 2px solid #10b981 !important;
}

/* ==========================================================================
   Bulk Upload Modal & Dropzone Hover Effect (Emerald Green)
   ========================================================================== */
#drop-zone {
    border: 2px dashed rgba(255, 255, 255, 0.2) !important;
    background: #141c2e !important;
    color: #e2e8f0 !important;
    transition: all 0.25s ease !important;
}

#drop-zone:hover,
#drop-zone.border-emerald-500,
#drop-zone.hover\:border-purple-500:hover,
#drop-zone.hover\:bg-purple-50:hover {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.08) !important;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.2) !important;
}

#drop-zone p {
    color: #cbd5e1 !important;
}

#drop-zone:hover p {
    color: #f8fafc !important;
}

/* ==========================================================================
   Highly Visible Green Heading & Accent Font Overrides
   ========================================================================== */
.text-emerald-400,
.text-emerald-500,
.text-emerald-600,
.text-emerald-700,
.text-emerald-800,
.text-emerald-900,
.text-green-400,
.text-green-500,
.text-green-600,
.text-\[\#1ca161\],
.text-\[\#10b981\],
.text-\[\#0d9488\] {
    color: #10e589 !important;
    text-shadow: 0 0 12px rgba(16, 229, 137, 0.25);
}

h1.text-emerald-400, h2.text-emerald-400, h3.text-emerald-400,
h1.text-emerald-500, h2.text-emerald-500, h3.text-emerald-500,
h1.text-emerald-600, h2.text-emerald-600, h3.text-emerald-600,
h1.text-\[\#1ca161\], h2.text-\[\#1ca161\], h3.text-\[\#1ca161\] {
    color: #10e589 !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 14px rgba(16, 229, 137, 0.3) !important;
}

/* Gradient Green Headings - Enhanced Vivid Contrast */
[class*="from-emerald-"][class*="bg-clip-text"],
[class*="to-emerald-"][class*="bg-clip-text"],
[class*="from-green-"][class*="bg-clip-text"],
[class*="to-green-"][class*="bg-clip-text"],
[class*="from-\[\#1ca161\]"][class*="bg-clip-text"] {
    background-image: linear-gradient(135deg, #22c55e 0%, #10e589 50%, #38bdf8 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    filter: drop-shadow(0 2px 8px rgba(16, 229, 137, 0.35)) !important;
}

/* ==========================================================================
   TitanRFI - Light Mode Overrides
   Activated ONLY when .light-mode class is present on <body> / <html>.
   Default Dark Theme is 100% PRESERVED.
   ========================================================================== */

html.light-mode,
body.light-mode {
    --dark-canvas: #f1f5f9;
    --dark-surface: #ffffff;
    --dark-surface-elevated: #f8fafc;
    --dark-surface-card: #ffffff;
    --dark-surface-hover: #f1f5f9;
    --dark-input: #ffffff;
    --dark-border: #e2e8f0;
    --dark-border-strong: #cbd5e1;
    --dark-border-subtle: #e2e8f0;
    
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --text-accent: #059669;
}

body.light-mode {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* Hide dark background canvas overlay in light mode */
body.light-mode .dark-bg-overlay {
    display: none !important;
}

/* Light Scrollbars */
body.light-mode ::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
}
body.light-mode ::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border: 1px solid #e2e8f0 !important;
}
body.light-mode ::-webkit-scrollbar-thumb:hover {
    background: #10b981 !important;
}

/* Containers, Cards & Panels in Light Mode */
body.light-mode .bg-\[\#111827\]\/95,
body.light-mode .bg-\[\#111827\]\/90,
body.light-mode [class*="bg-[#111827]"],
body.light-mode .bg-white,
body.light-mode .section-card,
body.light-mode .kpi-card-v,
body.light-mode .stat-card,
body.light-mode .glass-panel,
body.light-mode .query-card,
body.light-mode .chip-card,
body.light-mode .sub-card,
body.light-mode [id^="kpi-card-"],
body.light-mode [id^="chart-box-"],
body.light-mode #filter-form,
body.light-mode .manager-table-container,
body.light-mode .support-table-container,
body.light-mode .table-container,
body.light-mode .report-table-wrapper {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
}

body.light-mode .bg-slate-50,
body.light-mode .bg-slate-100,
body.light-mode .bg-gray-50,
body.light-mode .bg-gray-100 {
    background-color: #f8fafc !important;
}


body.light-mode .nav-tab-active .nav-tab-icon {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

/* Admin Tab Cards in Light Mode */
body.light-mode .admin-tab-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}
body.light-mode .admin-tab-card:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}
body.light-mode .admin-tab-card.admin-tab-active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}
body.light-mode .admin-tab-card.admin-tab-active span,
body.light-mode .admin-tab-card.admin-tab-active div,
body.light-mode .admin-tab-card.admin-tab-active .admin-tab-icon {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.25) !important;
}

/* Header Buttons (Toggle & Logout) in Light Mode */
body.light-mode #theme-toggle,
body.light-mode a[href*="logout"] {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}
body.light-mode #theme-toggle:hover,
body.light-mode a[href*="logout"]:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Buttons in Light Mode */
body.light-mode button.bg-white,
body.light-mode a.bg-white {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}
body.light-mode button.bg-white:hover,
body.light-mode a.bg-white:hover {
    background-color: #f1f5f9 !important;
}
body.light-mode [style*="background:#1e293b"],
body.light-mode [style*="background: #1e293b"] {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}
body.light-mode [style*="background:#111827"],
body.light-mode [style*="background: #111827"] {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

/* Inputs, Selects & Textareas in Light Mode */
body.light-mode input[type="text"],
body.light-mode input[type="email"],
body.light-mode input[type="password"],
body.light-mode input[type="number"],
body.light-mode input[type="date"],
body.light-mode input[type="datetime-local"],
body.light-mode input[type="search"],
body.light-mode select,
body.light-mode textarea,
body.light-mode .input-premium,
body.light-mode .filter-ctrl-v,
body.light-mode .action-select,
body.light-mode #filter-form input,
body.light-mode #filter-form select {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}
body.light-mode input:focus,
body.light-mode select:focus,
body.light-mode textarea:focus,
body.light-mode .input-premium:focus,
body.light-mode .filter-ctrl-v:focus,
body.light-mode .action-select:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}
body.light-mode input::placeholder,
body.light-mode textarea::placeholder,
body.light-mode #filter-form input::placeholder {
    color: #94a3b8 !important;
}
body.light-mode select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}
body.light-mode input[readonly],
body.light-mode input:disabled,
body.light-mode select:disabled,
body.light-mode textarea:disabled,
body.light-mode .input-premium[readonly] {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    border-color: #e2e8f0 !important;
}

/* Tables in Light Mode */
body.light-mode table {
    border-color: #e2e8f0 !important;
}

/* Professional Navy Blue Table Headers across ALL tables in Light Mode */
body.light-mode th,
body.light-mode .manager-table th,
body.light-mode .support-table th,
body.light-mode .report-table th,
body.light-mode table.report-table th,
body.light-mode #report-table th,
body.light-mode table th {
    background: linear-gradient(180deg, #0f2744 0%, #091a2f 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    border-bottom: 2px solid #1e4976 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 13px 16px !important;
}

body.light-mode .report-table th:last-child,
body.light-mode table th:last-child {
    background: linear-gradient(180deg, #0f2744 0%, #091a2f 100%) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-right: none !important;
}

/* Table Cells & Rows in Light Mode */
body.light-mode td,
body.light-mode .manager-table td,
body.light-mode .support-table td,
body.light-mode .report-table td {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-size: 12px !important;
}
body.light-mode tr:nth-child(even) td,
body.light-mode .manager-table tbody tr:nth-child(even) td,
body.light-mode .support-table tbody tr:nth-child(even) td,
body.light-mode .report-table tbody tr:nth-child(even) td {
    background-color: #f8fafc !important;
}
body.light-mode tbody tr:hover,
body.light-mode tbody tr:hover td,
body.light-mode .manager-table tbody tr:hover td,
body.light-mode .support-table tbody tr:hover td,
body.light-mode .report-table tbody tr:hover td {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}
body.light-mode .report-table td:last-child {
    background-color: #ffffff !important;
    border-left: 1px solid #e2e8f0 !important;
}
body.light-mode .report-table tbody tr:nth-child(even) td:last-child {
    background-color: #f8fafc !important;
}
body.light-mode .report-table tbody tr:hover td:last-child {
    background-color: #f1f5f9 !important;
}

/* Typography in Light Mode */
body.light-mode .text-slate-900,
body.light-mode .text-slate-800,
body.light-mode .text-gray-900,
body.light-mode .text-gray-800,
body.light-mode .text-\[\#093246\],
body.light-mode .text-\[\#0f3145\] {
    color: #0f172a !important;
}
body.light-mode .text-slate-100,
body.light-mode .text-slate-200 {
    color: #1e293b !important;
}
body.light-mode .text-slate-300,
body.light-mode .text-slate-400 {
    color: #64748b !important;
}
body.light-mode .text-slate-500 {
    color: #64748b !important;
}

/* Headings in Light Mode */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4 {
    color: #0f172a;
}
body.light-mode .section-v-title,
body.light-mode h2[style*="#10e589"],
body.light-mode h1[style*="#10e589"] {
    color: #059669 !important;
    text-shadow: none !important;
}
body.light-mode .text-emerald-400,
body.light-mode .text-emerald-500,
body.light-mode .text-green-400,
body.light-mode .text-green-500,
body.light-mode .text-\[\#1ca161\],
body.light-mode .text-\[\#10e589\],
body.light-mode .text-\[\#0d9488\] {
    color: #059669 !important;
    text-shadow: none !important;
}

/* Modals & Dropdowns in Light Mode */
body.light-mode #profile-modal > div:last-child > div,
body.light-mode .modal-fixed > div,
body.light-mode .ticket-widget-panel,
body.light-mode #bulk-upload-modal > div:last-child > div {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}
body.light-mode #detail-modal [class*="bg-gradient-to-br from-slate-50 to-white"],
body.light-mode #modal-body [class*="bg-gradient-to-br from-slate-50 to-white"],
body.light-mode #modal-body [class*="from-slate-50"],
body.light-mode #modal-body [class*="to-white"],
body.light-mode #modal-body .modal-section-info > div > div {
    background-image: linear-gradient(to bottom right, #f8fafc, #ffffff) !important;
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
body.light-mode #modal-body h4 {
    color: #093246 !important;
    border-bottom-color: #e2e8f0 !important;
}
body.light-mode #modal-body span.font-semibold,
body.light-mode #modal-body .text-slate-600 {
    color: #475569 !important;
}
body.light-mode #modal-body .text-slate-700 {
    color: #1e293b !important;
}
body.light-mode #modal-body .border-slate-100,
body.light-mode #modal-body .border-slate-200 {
    border-color: #e2e8f0 !important;
}
body.light-mode #modal-body .bg-slate-100 {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
}
body.light-mode #drop-zone {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
}
body.light-mode #drop-zone p {
    color: #64748b !important;
}

/* Badges in Light Mode */
body.light-mode .badge-internal,
body.light-mode .badge-tat {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
}

/* ==========================================================================
   Light UI Professional White / Green / Navy Refinement
   Scoped to .light-mode only so the default dark interface stays unchanged.
   ========================================================================== */

html.light-mode,
body.light-mode {
    --light-page: #eefbf5;
    --light-page-strong: #dcfce7;
    --light-surface: #ffffff;
    --light-surface-soft: #f7fffb;
    --light-border: #cfe8dc;
    --light-border-strong: #9fd6bd;
    --light-navy: #093246;
    --light-navy-deep: #061f31;
    --light-green: #1ca161;
    --light-green-deep: #12824b;
    --light-text: #102033;
    --light-muted: #607083;
}

html.light-mode body,
body.light-mode {
    background: #f4f6f9 !important;
    background-color: #f4f6f9 !important;
    color: #0f172a !important;
}

html.light-mode .dark-bg-overlay,
body.light-mode .dark-bg-overlay {
    display: none !important;
}

body.light-mode .container > .mb-5 > div,
body.light-mode .bg-\[\#111827\]\/95,
body.light-mode .bg-\[\#111827\]\/90,
body.light-mode [class*="bg-[#111827]"],
body.light-mode .section-card,
body.light-mode .kpi-card-v,
body.light-mode .stat-card,
body.light-mode .glass-panel,
body.light-mode .query-card,
body.light-mode .chip-card,
body.light-mode .sub-card,
body.light-mode [id^="kpi-card-"],
body.light-mode [id^="chart-box-"],
body.light-mode #filter-form,
body.light-mode .manager-table-container,
body.light-mode .support-table-container,
body.light-mode .table-container,
body.light-mode .report-table-wrapper {
    background: var(--light-surface) !important;
    border-color: var(--light-border) !important;
    color: var(--light-text) !important;
    box-shadow: 0 14px 34px rgba(9, 50, 70, 0.08) !important;
}

body.light-mode .nav-tab-card,
body.light-mode .admin-tab-card {
    background: #ffffff !important;
    border-color: var(--light-border) !important;
    color: var(--light-navy) !important;
    box-shadow: 0 8px 22px rgba(9, 50, 70, 0.07) !important;
}

body.light-mode .nav-tab-card:hover,
body.light-mode .admin-tab-card:hover {
    background: var(--light-surface-soft) !important;
    border-color: var(--light-green) !important;
    box-shadow: 0 12px 26px rgba(28, 161, 97, 0.14) !important;
}

body.light-mode .nav-tab-card .nav-tab-label,
body.light-mode .admin-tab-card span {
    color: var(--light-navy) !important;
}

body.light-mode .nav-tab-active,
body.light-mode .admin-tab-card.admin-tab-active {
    background: linear-gradient(135deg, var(--light-green) 0%, var(--light-navy) 100%) !important;
    border-color: var(--light-green) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 30px rgba(28, 161, 97, 0.24) !important;
}

body.light-mode .nav-tab-active *,
body.light-mode .admin-tab-card.admin-tab-active * {
    color: #ffffff !important;
}

body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode .section-v-title,
body.light-mode .card-title {
    color: var(--light-navy) !important;
    text-shadow: none !important;
}

body.light-mode .text-slate-400,
body.light-mode .text-slate-500,
body.light-mode .text-gray-400,
body.light-mode .text-gray-500,
body.light-mode .section-v-subtitle {
    color: var(--light-muted) !important;
}

body.light-mode .text-slate-100,
body.light-mode .text-slate-200,
body.light-mode .text-slate-300,
body.light-mode .text-slate-600,
body.light-mode .text-slate-700,
body.light-mode .text-slate-800,
body.light-mode .text-slate-900,
body.light-mode .text-\[\#093246\],
body.light-mode .text-\[\#0f3145\] {
    color: var(--light-text) !important;
}

body.light-mode .bg-slate-50,
body.light-mode .bg-slate-50\/50,
body.light-mode .bg-slate-100,
body.light-mode .bg-gray-50,
body.light-mode .bg-gray-100,
body.light-mode .bg-neutral-50 {
    background-color: var(--light-surface-soft) !important;
}

body.light-mode [style*="background:#1e293b"],
body.light-mode [style*="background: #1e293b"] {
    background: var(--light-surface-soft) !important;
    border-color: var(--light-border) !important;
    color: var(--light-text) !important;
}

body.light-mode [style*="background:#111827"],
body.light-mode [style*="background: #111827"],
body.light-mode [style*="background:#0f172a"],
body.light-mode [style*="background: #0f172a"],
body.light-mode [style*="background:#090d16"],
body.light-mode [style*="background: #090d16"] {
    background: #ffffff !important;
    border-color: var(--light-border) !important;
    color: var(--light-text) !important;
}

body.light-mode [style*="color:#f8fafc"],
body.light-mode [style*="color: #f8fafc"] {
    color: var(--light-navy) !important;
}

body.light-mode input[type="text"],
body.light-mode input[type="email"],
body.light-mode input[type="password"],
body.light-mode input[type="number"],
body.light-mode input[type="date"],
body.light-mode input[type="datetime-local"],
body.light-mode input[type="search"],
body.light-mode input[type="tel"],
body.light-mode select,
body.light-mode textarea,
body.light-mode .input-premium,
body.light-mode .filter-ctrl-v,
body.light-mode .action-select {
    background: #ffffff !important;
    color: var(--light-text) !important;
    border-color: var(--light-border-strong) !important;
}

body.light-mode input:focus,
body.light-mode select:focus,
body.light-mode textarea:focus,
body.light-mode .input-premium:focus,
body.light-mode .filter-ctrl-v:focus,
body.light-mode .action-select:focus {
    border-color: var(--light-green) !important;
    box-shadow: 0 0 0 3px rgba(28, 161, 97, 0.18) !important;
}

body.light-mode th,
body.light-mode table th,
body.light-mode .manager-table th,
body.light-mode .support-table th,
body.light-mode .report-table th {
    background: linear-gradient(180deg, var(--light-navy) 0%, var(--light-navy-deep) 100%) !important;
    color: #ffffff !important;
    border-bottom-color: var(--light-green) !important;
}

body.light-mode td,
body.light-mode .manager-table td,
body.light-mode .support-table td,
body.light-mode .report-table td {
    background: #ffffff !important;
    color: var(--light-text) !important;
    border-bottom-color: #e3f1e9 !important;
}

body.light-mode tr:nth-child(even) td,
body.light-mode .manager-table tbody tr:nth-child(even) td,
body.light-mode .support-table tbody tr:nth-child(even) td,
body.light-mode .report-table tbody tr:nth-child(even) td {
    background: #f8fffb !important;
}

body.light-mode tbody tr:hover td,
body.light-mode .manager-table tbody tr:hover td,
body.light-mode .support-table tbody tr:hover td,
body.light-mode .report-table tbody tr:hover td {
    background: #eefbf5 !important;
    color: var(--light-navy) !important;
}

body.light-mode #profile-modal > div:last-child > div,
body.light-mode #detail-modal > div.relative,
body.light-mode #delete-modal > div.relative,
body.light-mode #comment-action-modal > div,
body.light-mode #success-modal > div,
body.light-mode .modal-fixed > div,
body.light-mode #bulk-upload-modal > div:last-child > div,
body.light-mode .ticket-widget-panel {
    background: #ffffff !important;
    border: 1px solid var(--light-border) !important;
    color: var(--light-text) !important;
    box-shadow: 0 24px 54px rgba(9, 50, 70, 0.18) !important;
}

body.light-mode #profile-modal > div:last-child > div > div:first-child,
body.light-mode #detail-modal > div.relative > div:first-child,
body.light-mode #delete-modal > div.relative > div:first-child,
body.light-mode .ticket-widget-header {
    background: linear-gradient(135deg, var(--light-green) 0%, var(--light-navy) 100%) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}

body.light-mode #detail-modal #modal-ref,
body.light-mode #detail-modal #modal-subtitle,
body.light-mode #profile-modal > div:last-child > div > div:first-child *,
body.light-mode .ticket-widget-header * {
    color: #ffffff !important;
}

body.light-mode #modal-body,
body.light-mode #detail-modal #modal-body,
body.light-mode .ticket-widget-body {
    background: #ffffff !important;
    color: var(--light-text) !important;
}

body.light-mode #modal-body [class*="bg-gradient-to-br"],
body.light-mode #modal-body .modal-section-info > div > div,
body.light-mode #modal-body .modal-section-supporting > div,
body.light-mode #modal-body .modal-section-docs > div {
    background: linear-gradient(135deg, #ffffff 0%, var(--light-surface-soft) 100%) !important;
    border-color: var(--light-border) !important;
    color: var(--light-text) !important;
}

body.light-mode .ticket-form-group label,
body.light-mode .ticket-file-zone p {
    color: var(--light-muted) !important;
}

body.light-mode .ticket-file-zone {
    background: var(--light-surface-soft) !important;
    border-color: var(--light-border-strong) !important;
}

body.light-mode #empty-queries,
body.light-mode #dropzone,
body.light-mode #drop-zone,
body.light-mode .bulk-box {
    background: linear-gradient(135deg, #ffffff 0%, #f4fff9 100%) !important;
    border-color: var(--light-border-strong) !important;
    color: var(--light-text) !important;
    box-shadow: inset 0 0 0 1px rgba(28, 161, 97, 0.04) !important;
}

body.light-mode #empty-queries:hover,
body.light-mode #dropzone:hover,
body.light-mode #drop-zone:hover,
body.light-mode .bulk-box:hover {
    background: #effbf5 !important;
    border-color: var(--light-green) !important;
}

body.light-mode #empty-queries p,
body.light-mode #empty-queries .text-slate-600,
body.light-mode #dropzone p,
body.light-mode #drop-zone p,
body.light-mode .bulk-box p {
    color: var(--light-muted) !important;
}

body.light-mode #empty-queries .text-slate-600:first-of-type,
body.light-mode #dropzone .text-slate-700,
body.light-mode .bulk-box .text-slate-700,
body.light-mode .bulk-box h3 {
    color: var(--light-navy) !important;
}

body.light-mode .react-card,
body.light-mode .client-react-card,
body.light-mode [class*="react-card"],
body.light-mode [style*="background:#1e293b"],
body.light-mode [style*="background: #1e293b"] {
    background: linear-gradient(135deg, #ffffff 0%, #f4fff9 100%) !important;
    border-color: var(--light-border) !important;
    color: var(--light-text) !important;
    box-shadow: 0 14px 34px rgba(9, 50, 70, 0.08) !important;
}

body.light-mode .react-card:hover,
body.light-mode .client-react-card:hover {
    border-color: var(--light-green) !important;
    box-shadow: 0 18px 36px rgba(28, 161, 97, 0.16) !important;
}

body.light-mode .progress-bar-react {
    background: #dff4ea !important;
}

body.light-mode .client-react-card .border-slate-800,
body.light-mode .border-slate-800 {
    border-color: var(--light-border) !important;
}

body.light-mode .client-react-card .text-slate-100,
body.light-mode .client-react-card .text-slate-200,
body.light-mode .react-card .text-slate-100,
body.light-mode .react-card .text-slate-200 {
    color: var(--light-navy) !important;
}

body.light-mode .client-react-card .text-slate-300,
body.light-mode .client-react-card .text-slate-400,
body.light-mode .client-react-card .text-slate-500,
body.light-mode .react-card .text-slate-300,
body.light-mode .react-card .text-slate-400,
body.light-mode .react-card .text-slate-500 {
    color: var(--light-muted) !important;
}

body.light-mode .ticket-section-divider {
    color: var(--light-green) !important;
}

body.light-mode .ticket-section-divider::after {
    background: var(--light-border) !important;
}

body.light-mode #theme-toggle,
body.light-mode a[href*="logout"],
body.light-mode button.bg-white,
body.light-mode a.bg-white {
    background: #ffffff !important;
    border-color: var(--light-border-strong) !important;
    color: var(--light-navy) !important;
}

body.light-mode #theme-toggle:hover,
body.light-mode a[href*="logout"]:hover,
body.light-mode button.bg-white:hover,
body.light-mode a.bg-white:hover {
    background: var(--light-surface-soft) !important;
    border-color: var(--light-green) !important;
    color: var(--light-green-deep) !important;
}

body.light-mode .btn-primary,
body.light-mode .btn-submit-action,
body.light-mode .ticket-submit-btn,
body.light-mode button[class*="bg-[#1ca161]"],
body.light-mode button[class*="from-[#1ca161]"] {
    background: linear-gradient(135deg, var(--light-green) 0%, var(--light-green-deep) 100%) !important;
    color: #ffffff !important;
    border-color: var(--light-green) !important;
}

body.light-mode button[class*="bg-[#0f3145]"],
body.light-mode .btn-v-view {
    background: var(--light-navy) !important;
    color: #ffffff !important;
    border-color: var(--light-navy) !important;
}

/* ==========================================================================
   Final Light Theme Polish
   One coherent professional pass for every staff page in light mode.
   ========================================================================== */

html.light-mode,
html.light-mode body,
body.light-mode {
    --dark-canvas: #07432f !important;
    --dark-surface: #ffffff !important;
    --dark-surface-elevated: #f8fafc !important;
    --dark-surface-card: #ffffff !important;
    --dark-surface-hover: #f1f5f9 !important;
    --dark-input: #ffffff !important;
    --dark-border: #e2e8f0 !important;
    --dark-border-strong: #e2e8f0 !important;
    --dark-border-subtle: #f1f5f9 !important;
    --text-primary: #0f172a !important;
    --text-secondary: #334155 !important;
    --text-muted: #64748b !important;
    --text-accent: #059669 !important;
    --ui-page: #07432f;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f8fafc;
    --ui-surface-muted: #f1f5f9;
    --ui-border: #e2e8f0;
    --ui-border-strong: #cbd5e1;
    --ui-navy: #0f2744;
    --ui-navy-soft: #1e3a5f;
    --ui-green: #10b981;
    --ui-green-deep: #059669;
    --ui-text: #0f172a;
    --ui-muted: #64748b;
    --ui-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(52, 211, 153, 0.25), transparent 70%),
        linear-gradient(180deg, #07432f 0%, #08533b 40%, #0b694a 100%) !important;
    background-color: #07432f !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
    color: var(--ui-text) !important;
}

/* ── Absolute removal of black/dark borders & white font in Light Mode ── */
body.light-mode,
body.light-mode * {
    --dark-border: #e2e8f0 !important;
    --dark-border-strong: #e2e8f0 !important;
    --dark-border-subtle: #f1f5f9 !important;
    --text-primary: #0f172a !important;
    --text-secondary: #334155 !important;
    --text-muted: #64748b !important;
}

body.light-mode .border,
body.light-mode .border-slate-100,
body.light-mode .border-slate-200,
body.light-mode .border-slate-300,
body.light-mode .border-slate-400,
body.light-mode .border-slate-500,
body.light-mode .border-slate-600,
body.light-mode .border-slate-700,
body.light-mode .border-slate-700\/60,
body.light-mode .border-slate-800,
body.light-mode .border-slate-900,
body.light-mode .border-gray-100,
body.light-mode .border-gray-200,
body.light-mode .border-gray-300,
body.light-mode .border-gray-700,
body.light-mode .border-white\/10,
body.light-mode .border-white\/20,
body.light-mode .border-white\/30,
body.light-mode .border-white\/40,
body.light-mode .border-white\/50,
body.light-mode [class*="border-slate-"],
body.light-mode [class*="border-gray-"],
body.light-mode [class*="border-black"],
body.light-mode [class*="divide-slate-"] > :not([hidden]) ~ :not([hidden]),
body.light-mode [class*="divide-gray-"] > :not([hidden]) ~ :not([hidden]),
body.light-mode [style*="border: 1px solid rgba(255,255,255"],
body.light-mode [style*="border:1px solid rgba(255,255,255"],
body.light-mode [style*="border: 1px solid rgba(255, 255, 255"],
body.light-mode [style*="border:1px solid rgba(255, 255, 255"],
body.light-mode div.border,
body.light-mode button.border,
body.light-mode a.border,
body.light-mode table.border,
body.light-mode td.border,
body.light-mode th.border {
    border-color: #e2e8f0 !important;
}

body.light-mode .dark-bg-overlay,
html.light-mode .dark-bg-overlay {
    display: none !important;
}

body.light-mode .container {
    max-width: 80rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.light-mode .container > .mb-5 > div,
body.light-mode .container > div > .bg-\[\#111827\]\/95,
body.light-mode [class*="bg-[#111827]"],
body.light-mode [class*="bg-[#090d16]"],
body.light-mode [style*="background:#090d16"],
body.light-mode [style*="background: #090d16"],
body.light-mode [style*="background:#111827"],
body.light-mode [style*="background: #111827"],
body.light-mode [style*="background:#0f172a"],
body.light-mode [style*="background: #0f172a"],
body.light-mode .section-card,
body.light-mode .glass-panel,
body.light-mode .query-card,
body.light-mode .chip-card,
body.light-mode .sub-card,
body.light-mode .react-card,
body.light-mode .client-react-card,
body.light-mode .kpi-card-v,
body.light-mode .stat-card,
body.light-mode [id^="kpi-card-"],
body.light-mode [id^="chart-box-"],
body.light-mode #filter-form,
body.light-mode .manager-table-container,
body.light-mode .support-table-container,
body.light-mode .report-table-wrapper,
body.light-mode .table-container,
body.light-mode .modal-content-custom {
    background: #ffffff !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border) !important;
    box-shadow: var(--ui-shadow) !important;
}

body.light-mode .section-card,
body.light-mode .glass-panel,
body.light-mode .react-card,
body.light-mode .client-react-card,
body.light-mode .kpi-card-v,
body.light-mode .stat-card,
body.light-mode [id^="kpi-card-"],
body.light-mode [id^="chart-box-"] {
    border-radius: 16px !important;
}

body.light-mode [style*="background:#1e293b"],
body.light-mode [style*="background: #1e293b"],
body.light-mode .bg-slate-50,
body.light-mode .bg-slate-50\/50,
body.light-mode .bg-slate-100,
body.light-mode .bg-gray-50,
body.light-mode .bg-gray-100,
body.light-mode .bg-neutral-50,
body.light-mode #empty-queries,
body.light-mode #dropzone,
body.light-mode #drop-zone,
body.light-mode .bulk-box,
body.light-mode .ticket-file-zone {
    background: var(--ui-surface-soft) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border) !important;
}

body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode .section-v-title,
body.light-mode .card-title,
body.light-mode .font-semibold,
body.light-mode .font-bold,
body.light-mode [style*="color:#f8fafc"]:not(.btn-primary):not(.btn-gradient):not(button):not(.badge):not(.nav-tab-active *):not([class*="bg-[#1ca161]"] *):not([class*="bg-[#0f3145]"] *),
body.light-mode [style*="color: #f8fafc"]:not(.btn-primary):not(.btn-gradient):not(button):not(.badge):not(.nav-tab-active *):not([class*="bg-[#1ca161]"] *):not([class*="bg-[#0f3145]"] *),
body.light-mode [style*="color:#fff"]:not(.btn-primary):not(.btn-gradient):not(button):not(.badge):not(.nav-tab-active *):not([class*="bg-[#1ca161]"] *):not([class*="bg-[#0f3145]"] *),
body.light-mode [style*="color: #fff"]:not(.btn-primary):not(.btn-gradient):not(button):not(.badge):not(.nav-tab-active *):not([class*="bg-[#1ca161]"] *):not([class*="bg-[#0f3145]"] *),
body.light-mode [style*="color:white"]:not(.btn-primary):not(.btn-gradient):not(button):not(.badge):not(.nav-tab-active *):not([class*="bg-[#1ca161]"] *):not([class*="bg-[#0f3145]"] *),
body.light-mode [style*="color: white"]:not(.btn-primary):not(.btn-gradient):not(button):not(.badge):not(.nav-tab-active *):not([class*="bg-[#1ca161]"] *):not([class*="bg-[#0f3145]"] *) {
    color: var(--ui-navy) !important;
    text-shadow: none !important;
}

body.light-mode .text-slate-100 { color: #0f172a !important; }
body.light-mode .text-slate-200 { color: #1e293b !important; }
body.light-mode .text-slate-300 { color: #334155 !important; }
body.light-mode .text-slate-400 { color: #64748b !important; }
body.light-mode .text-slate-500 { color: #64748b !important; }
body.light-mode .text-gray-400  { color: #64748b !important; }
body.light-mode .text-gray-500  { color: #64748b !important; }
body.light-mode .section-v-subtitle,
body.light-mode .field-hint     { color: #64748b !important; }
body.light-mode .text-emerald-400,
body.light-mode .text-green-400 { color: var(--ui-green-deep) !important; font-weight: 600; }
body.light-mode .text-emerald-500,
body.light-mode .text-green-500 { color: var(--ui-green-deep) !important; font-weight: 600; }
body.light-mode .text-\[\#1ca161\],
body.light-mode .text-\[\#10e589\] { color: var(--ui-green-deep) !important; }



body.light-mode .nav-tab-active *,
body.light-mode .nav-tab-active .nav-tab-label {
    color: #ffffff !important;
}

body.light-mode .nav-tab-active .nav-tab-icon,
body.light-mode .nav-tab-active .nav-icon-active {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

body.light-mode .admin-tab-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    border-radius: 14px !important;
    color: #1e293b !important;
    transform: translateY(0) scale(1) !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.light-mode .admin-tab-card:hover {
    background: #ffffff !important;
    border-color: #10b981 !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 10px 22px -3px rgba(16, 185, 129, 0.22), 0 4px 6px -2px rgba(16, 185, 129, 0.1) !important;
}

body.light-mode .admin-tab-card .font-semibold {
    color: #1e293b !important;
    font-weight: 700 !important;
}

body.light-mode .admin-tab-card .text-slate-400 {
    color: #059669 !important;
    font-weight: 600 !important;
}

body.light-mode .admin-tab-card.admin-tab-active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: #34d399 !important;
    color: #ffffff !important;
    transform: translateY(-4px) scale(1.03) !important;
    box-shadow: 0 12px 24px -4px rgba(16, 185, 129, 0.45), 0 4px 8px -2px rgba(16, 185, 129, 0.25) !important;
}

body.light-mode .admin-tab-card.admin-tab-active * {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

body.light-mode .admin-tab-card.admin-tab-active .admin-tab-icon {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .admin-tab-card.admin-tab-active div:not(.admin-tab-icon) {
    background: transparent !important;
}

/* Admin Main Content Container */
body.light-mode div.bg-white.rounded-2xl {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1), 0 4px 8px -2px rgba(0, 0, 0, 0.05) !important;
}

/* Admin Page Header Card - Pure White, Dark Navy Font (NO WHITE FONT) */
body.light-mode .space-y-6 > .mb-6:first-child {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 20px 24px !important;
    box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}
body.light-mode .space-y-6 > .mb-6:first-child h2,
body.light-mode h2.text-2xl.font-bold.text-\[\#093246\],
body.light-mode .text-2xl.font-bold.text-\[\#093246\] {
    color: #0f2744 !important;
    text-shadow: none !important;
}
body.light-mode .space-y-6 > .mb-6:first-child p,
body.light-mode .mb-6 p.text-slate-600 {
    color: #475569 !important;
}

/* Admin Panel Typography - High Contrast Dark Navy & Slate (NO WHITE FONT) */
body.light-mode .tab-pane h3,
body.light-mode .tab-pane h4,
body.light-mode .tab-pane .text-\[\#093246\],
body.light-mode .tab-pane .text-\[\#0f3145\] {
    color: #0f2744 !important;
    text-shadow: none !important;
}

body.light-mode .tab-pane p,
body.light-mode .tab-pane span:not([class*="bg-"]):not([class*="badge"]),
body.light-mode .tab-pane .text-slate-600,
body.light-mode .tab-pane .text-slate-700 {
    color: #334155 !important;
}

body.light-mode .tab-pane .text-slate-400,
body.light-mode .tab-pane .text-slate-500 {
    color: #64748b !important;
}

/* Admin Tables - Crisp Dark Font for all Rows & Cells */
body.light-mode .tab-pane table tbody td,
body.light-mode .tab-pane table tbody td * {
    color: #0f172a !important;
}

body.light-mode .tab-pane table tbody td .text-slate-400,
body.light-mode .tab-pane table tbody td .text-slate-500 {
    color: #64748b !important;
}

body.light-mode .tab-pane table tbody td code,
body.light-mode .tab-pane table tbody td .font-mono {
    color: #0f2744 !important;
    background-color: #f1f5f9 !important;
}

/* Admin Form Labels and Inputs */
body.light-mode #user-modal label,
body.light-mode #master-modal label,
body.light-mode #add-transaction-modal label,
body.light-mode #add-client-modal label,
body.light-mode #edit-client-modal label,
body.light-mode #update-creds-modal label,
body.light-mode #bulk-upload-modal label,
body.light-mode .bg-white label,
body.light-mode .tab-pane label {
    color: #0f2744 !important;
    font-weight: 700 !important;
}

body.light-mode input,
body.light-mode select,
body.light-mode textarea {
    color: #0f172a !important;
    background-color: #ffffff !important;
}

/* Admin Modals */
body.light-mode #user-modal > div,
body.light-mode #master-modal > div,
body.light-mode #add-transaction-modal > div,
body.light-mode #add-client-modal > div,
body.light-mode #edit-client-modal > div,
body.light-mode #update-creds-modal > div,
body.light-mode #bulk-upload-modal > div {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
    border-radius: 18px !important;
    color: #0f172a !important;
}

body.light-mode #user-modal .bg-gradient-to-r,
body.light-mode #master-modal .bg-gradient-to-r,
body.light-mode #add-transaction-modal .bg-gradient-to-r,
body.light-mode #add-client-modal .bg-gradient-to-r,
body.light-mode #edit-client-modal .bg-gradient-to-r,
body.light-mode #update-creds-modal .bg-gradient-to-r,
body.light-mode #bulk-upload-modal .bg-gradient-to-r {
    background: linear-gradient(135deg, #0f2744 0%, #091a2f 100%) !important;
    border-bottom: 2px solid #10b981 !important;
    color: #ffffff !important;
}

body.light-mode #user-modal .bg-gradient-to-r *,
body.light-mode #master-modal .bg-gradient-to-r *,
body.light-mode #add-transaction-modal .bg-gradient-to-r *,
body.light-mode #add-client-modal .bg-gradient-to-r *,
body.light-mode #edit-client-modal .bg-gradient-to-r *,
body.light-mode #update-creds-modal .bg-gradient-to-r *,
body.light-mode #bulk-upload-modal .bg-gradient-to-r * {
    color: #ffffff !important;
}

/* Light mode Admin tab icons */
body.light-mode .tab-icon-users { color: #0284c7 !important; background: #e0f2fe !important; border: 1px solid #bae6fd !important; }
body.light-mode .tab-icon-case-owners { color: #059669 !important; background: #d1fae5 !important; border: 1px solid #a7f3d0 !important; }
body.light-mode .tab-icon-account-managers { color: #2563eb !important; background: #dbeafe !important; border: 1px solid #bfdbfe !important; }
body.light-mode .tab-icon-case-handlers { color: #7c3aed !important; background: #ede9fe !important; border: 1px solid #ddd6fe !important; }
body.light-mode .tab-icon-currencies { color: #9333ea !important; background: #f3e8ff !important; border: 1px solid #e9d5ff !important; }
body.light-mode .tab-icon-countries { color: #0d9488 !important; background: #ccfbf1 !important; border: 1px solid #99f6e4 !important; }
body.light-mode .tab-icon-banking-partners { color: #0284c7 !important; background: #e0f2fe !important; border: 1px solid #bae6fd !important; }
body.light-mode .tab-icon-clients { color: #d97706 !important; background: #fef3c7 !important; border: 1px solid #fde68a !important; }
body.light-mode .tab-icon-query-types { color: #dc2626 !important; background: #fee2e2 !important; border: 1px solid #fecaca !important; }
body.light-mode .tab-icon-information { color: #4f46e5 !important; background: #e0e7ff !important; border: 1px solid #c7d2fe !important; }
body.light-mode .tab-icon-business-units { color: #0891b2 !important; background: #cffafe !important; border: 1px solid #a5f3fc !important; }
body.light-mode .tab-icon-risk-categories { color: #ea580c !important; background: #ffedd5 !important; border: 1px solid #fed7aa !important; }
body.light-mode .tab-icon-counterparties { color: #db2777 !important; background: #fce7f3 !important; border: 1px solid #fbcfe8 !important; }
body.light-mode .tab-icon-transactions { color: #16a34a !important; background: #dcfce7 !important; border: 1px solid #bbf7d0 !important; }
body.light-mode .tab-icon-rfi-types { color: #475569 !important; background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; }
body.light-mode .tab-icon-entity-types { color: #c026d3 !important; background: #fae8ff !important; border: 1px solid #f5d0fe !important; }
body.light-mode .tab-icon-api-keys { color: #ca8a04 !important; background: #fef9c3 !important; border: 1px solid #fef08a !important; }
body.light-mode .tab-icon-sub-info { color: #e11d48 !important; background: #ffe4e6 !important; border: 1px solid #fecdd3 !important; }

body.light-mode input[type="text"],
body.light-mode input[type="email"],
body.light-mode input[type="password"],
body.light-mode input[type="number"],
body.light-mode input[type="date"],
body.light-mode input[type="datetime-local"],
body.light-mode input[type="search"],
body.light-mode input[type="tel"],
body.light-mode select,
body.light-mode textarea,
body.light-mode .input-premium,
body.light-mode .filter-ctrl-v,
body.light-mode .action-select {
    background: #fbfffd !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border-strong) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

body.light-mode input:focus,
body.light-mode select:focus,
body.light-mode textarea:focus,
body.light-mode .input-premium:focus,
body.light-mode .filter-ctrl-v:focus,
body.light-mode .action-select:focus {
    border-color: var(--ui-green) !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 106, 0.18) !important;
    outline: none !important;
}

body.light-mode input::placeholder,
body.light-mode textarea::placeholder {
    color: #8a9bb0 !important;
}

body.light-mode button[class*="bg-[#1ca161]"],
body.light-mode button[class*="from-[#1ca161]"],
body.light-mode .btn-primary,
body.light-mode .btn-gradient,
body.light-mode .btn-submit-action,
body.light-mode .ticket-submit-btn {
    background: linear-gradient(135deg, var(--ui-green) 0%, var(--ui-green-deep) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(22, 163, 106, 0.22) !important;
}

body.light-mode button[class*="bg-[#0f3145]"],
body.light-mode .btn-v-view,
body.light-mode .action-btn-sm.btn-v-view {
    background: #ecfdf5 !important;
    border: 1.5px solid #10b981 !important;
    color: #047857 !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.12) !important;
}
body.light-mode button[class*="bg-[#0f3145]"] *,
body.light-mode .btn-v-view *,
body.light-mode .action-btn-sm.btn-v-view * {
    color: #047857 !important;
    stroke: #047857 !important;
}
body.light-mode button[class*="bg-[#0f3145]"]:hover,
body.light-mode .btn-v-view:hover,
body.light-mode .action-btn-sm.btn-v-view:hover {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
    transform: translateY(-2px) !important;
}
body.light-mode button[class*="bg-[#0f3145]"]:hover *,
body.light-mode .btn-v-view:hover *,
body.light-mode .action-btn-sm.btn-v-view:hover * {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

body.light-mode .action-btn-sm.btn-v-docs {
    background: #f5f3ff !important;
    border: 1.5px solid #8b5cf6 !important;
    color: #6d28d9 !important;
    font-weight: 700 !important;
}
body.light-mode .action-btn-sm.btn-v-docs * { color: #6d28d9 !important; stroke: #6d28d9 !important; }
body.light-mode .action-btn-sm.btn-v-docs:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    border-color: #8b5cf6 !important;
    color: #ffffff !important;
}

body.light-mode .action-btn-sm.btn-v-sup {
    background: #fff7ed !important;
    border: 1.5px solid #f97316 !important;
    color: #c2410c !important;
    font-weight: 700 !important;
}
body.light-mode .action-btn-sm.btn-v-sup * { color: #c2410c !important; stroke: #c2410c !important; }
body.light-mode .action-btn-sm.btn-v-sup:hover {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    border-color: #f97316 !important;
    color: #ffffff !important;
}

body.light-mode .action-btn-sm.btn-v-delete {
    background: #fef2f2 !important;
    border: 1.5px solid #ef4444 !important;
    color: #b91c1c !important;
    font-weight: 700 !important;
}
body.light-mode .action-btn-sm.btn-v-delete * { color: #b91c1c !important; stroke: #b91c1c !important; }
body.light-mode .action-btn-sm.btn-v-delete:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}

body.light-mode #theme-toggle {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}
body.light-mode #theme-toggle * {
    color: #0f172a !important;
    stroke: #0f172a !important;
}
body.light-mode #theme-toggle:hover {
    background: #ecfdf5 !important;
    border-color: #10b981 !important;
    color: #047857 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2) !important;
    transform: translateY(-1px) !important;
}
body.light-mode #theme-toggle:hover * {
    color: #047857 !important;
    stroke: #047857 !important;
}

body.light-mode a[href*="logout"],
body.light-mode #staff-logout-btn {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f2744 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
    font-weight: 700 !important;
}
body.light-mode a[href*="logout"] *,
body.light-mode #staff-logout-btn * {
    color: #0f2744 !important;
    stroke: #0f2744 !important;
}
body.light-mode a[href*="logout"]:hover,
body.light-mode #staff-logout-btn:hover {
    background: #fef2f2 !important;
    border-color: #f87171 !important;
    color: #b91c1c !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2) !important;
    transform: translateY(-1px) !important;
}
body.light-mode a[href*="logout"]:hover *,
body.light-mode #staff-logout-btn:hover * {
    color: #b91c1c !important;
    stroke: #b91c1c !important;
}

body.light-mode #profile-modal a[href*="logout"] {
    display: flex !important;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border: 1.5px solid #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3) !important;
}
body.light-mode #profile-modal a[href*="logout"] * {
    color: #ffffff !important;
    stroke: #ffffff !important;
}
body.light-mode #profile-modal a[href*="logout"]:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    border-color: #b91c1c !important;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.45) !important;
    transform: translateY(-2px) !important;
}

body.light-mode #timer-container {
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 2px 6px -1px rgba(15, 23, 42, 0.08) !important;
}
body.light-mode #timer-container #timer-label {
    color: #64748b !important;
    font-weight: 700 !important;
}
body.light-mode #timer-container #timer {
    color: #047857 !important;
    font-weight: 800 !important;
}

body.light-mode button[style*="background:#1e293b"],
body.light-mode button[style*="background: #1e293b"],
body.light-mode button[style*="background:#334155"],
body.light-mode button[style*="background: #334155"],
body.light-mode a[style*="background:#1e293b"],
body.light-mode a[style*="background: #1e293b"],
body.light-mode a[style*="background:#334155"],
body.light-mode a[style*="background: #334155"],
body.light-mode button[style*="background:rgba(255,255,255"],
body.light-mode button[onclick*="clearFilters"],
body.light-mode button[onclick*="Clear"],
body.light-mode #customize-dashboard-btn {
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
    font-weight: 600 !important;
}
body.light-mode button[style*="background:#1e293b"] *,
body.light-mode button[style*="background: #1e293b"] *,
body.light-mode button[style*="background:#334155"] *,
body.light-mode a[style*="background:#1e293b"] *,
body.light-mode button[onclick*="clearFilters"] *,
body.light-mode button[onclick*="Clear"] *,
body.light-mode #customize-dashboard-btn * {
    color: #0f172a !important;
    stroke: #0f172a !important;
}

body.light-mode button[style*="background:#1e293b"]:hover,
body.light-mode button[style*="background: #1e293b"]:hover,
body.light-mode button[style*="background:#334155"]:hover,
body.light-mode a[style*="background:#1e293b"]:hover,
body.light-mode button[onclick*="clearFilters"]:hover,
body.light-mode button[onclick*="Clear"]:hover,
body.light-mode #customize-dashboard-btn:hover {
    background-color: #ecfdf5 !important;
    border-color: #10b981 !important;
    color: #047857 !important;
}

body.light-mode .hover\:bg-slate-800:hover,
body.light-mode .hover\:bg-slate-700:hover,
body.light-mode .hover\:bg-slate-600:hover,
body.light-mode .hover\:bg-slate-900:hover,
body.light-mode [class*="hover:bg-slate-"]:hover,
body.light-mode [class*="hover:bg-gray-"]:hover {
    background-color: #ecfdf5 !important;
    border-color: #10b981 !important;
    color: #047857 !important;
}
body.light-mode .hover\:bg-slate-800:hover *,
body.light-mode .hover\:bg-slate-700:hover *,
body.light-mode .hover\:bg-slate-600:hover *,
body.light-mode [class*="hover:bg-slate-"]:hover * {
    color: #047857 !important;
    stroke: #047857 !important;
}

body.light-mode table {
    background: #ffffff !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

body.light-mode th,
body.light-mode table th,
body.light-mode .manager-table th,
body.light-mode .support-table th,
body.light-mode .report-table th {
    background: linear-gradient(180deg, #0f2744 0%, #091a2f 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    border-bottom: 2px solid #1e4976 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.light-mode td,
body.light-mode .manager-table td,
body.light-mode .support-table td,
body.light-mode .report-table td {
    background: #ffffff !important;
    color: var(--ui-text) !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

body.light-mode tr:nth-child(even) td,
body.light-mode .manager-table tbody tr:nth-child(even) td,
body.light-mode .support-table tbody tr:nth-child(even) td,
body.light-mode .report-table tbody tr:nth-child(even) td {
    background: #f8fafc !important;
}

body.light-mode tbody tr {
    transition: background-color 0.18s ease, color 0.18s ease !important;
}

body.light-mode tbody tr:hover td,
body.light-mode .manager-table tbody tr:hover td,
body.light-mode .support-table tbody tr:hover td,
body.light-mode .report-table tbody tr:hover td,
body.light-mode .tab-pane tbody tr:hover td {
    background-color: rgba(209, 250, 229, 0.45) !important;
    color: #064e3b !important;
}

body.light-mode tbody tr:hover td:first-child,
body.light-mode .manager-table tbody tr:hover td:first-child,
body.light-mode .support-table tbody tr:hover td:first-child,
body.light-mode .report-table tbody tr:hover td:first-child,
body.light-mode .tab-pane tbody tr:hover td:first-child {
    border-left: 3px solid #10b981 !important;
}

body.light-mode .progress-bar-react,
body.light-mode .progress-track {
    background: #dcefe6 !important;
}

body.light-mode .badge-internal,
body.light-mode .badge-tat,
body.light-mode span.bg-slate-100,
body.light-mode .font-mono.bg-slate-100 {
    background: #f1f5f9 !important;
    color: var(--ui-navy) !important;
    border: 1px solid #cbd5e1 !important;
}

/* ── Universal Popups & Modals Professional Alignment & Styling ── */
body.light-mode .hidden:not([style*="display: flex"]):not([style*="display:flex"]):not([style*="display: block"]):not([style*="display:block"]),
body.light-mode [style*="display: none"],
body.light-mode [style*="display:none"] {
    display: none !important;
}

body.light-mode #detail-modal:not(.hidden):not([style*="display: none"]),
body.light-mode #profile-modal:not(.hidden):not([style*="display: none"]),
body.light-mode #delete-modal:not(.hidden):not([style*="display: none"]),
body.light-mode #bulk-upload-modal:not(.hidden):not([style*="display: none"]),
body.light-mode #comment-action-modal:not(.hidden):not([style*="display: none"]),
body.light-mode #success-modal:not(.hidden):not([style*="display: none"]),
body.light-mode #user-modal:not(.hidden):not([style*="display: none"]),
body.light-mode #master-modal:not(.hidden):not([style*="display: none"]),
body.light-mode #add-transaction-modal:not(.hidden):not([style*="display: none"]),
body.light-mode #add-client-modal:not(.hidden):not([style*="display: none"]),
body.light-mode #edit-client-modal:not(.hidden):not([style*="display: none"]),
body.light-mode #update-creds-modal:not(.hidden):not([style*="display: none"]),
body.light-mode #bulk-upload-modal[style*="display: flex"],
body.light-mode #bulk-upload-modal[style*="display:flex"],
body.light-mode #user-modal[style*="display: flex"],
body.light-mode #user-modal[style*="display:flex"],
body.light-mode #master-modal[style*="display: flex"],
body.light-mode #master-modal[style*="display:flex"],
body.light-mode #add-transaction-modal[style*="display: flex"],
body.light-mode #add-transaction-modal[style*="display:flex"],
body.light-mode #add-client-modal[style*="display: flex"],
body.light-mode #add-client-modal[style*="display:flex"],
body.light-mode #edit-client-modal[style*="display: flex"],
body.light-mode #edit-client-modal[style*="display:flex"],
body.light-mode #update-creds-modal[style*="display: flex"],
body.light-mode #update-creds-modal[style*="display:flex"],
body.light-mode .modal-fixed:not(.hidden):not([style*="display: none"]) {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1050 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    background: rgba(7, 45, 33, 0.72) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

body.light-mode #detail-modal > .fixed.inset-0,
body.light-mode #profile-modal > .fixed.inset-0:first-child,
body.light-mode #delete-modal > .fixed.inset-0,
body.light-mode #comment-action-modal > .fixed.inset-0,
body.light-mode #success-modal > .fixed.inset-0 {
    background: transparent !important;
    backdrop-filter: none !important;
}

body.light-mode #profile-modal .relative.w-full,
body.light-mode #detail-modal > div.relative,
body.light-mode #delete-modal > div.relative,
body.light-mode #comment-action-modal > div,
body.light-mode #success-modal > div,
body.light-mode .modal-fixed > div:not(.modal-content-custom),
body.light-mode #bulk-upload-modal > div,
body.light-mode #bulk-upload-modal > div:last-child > div,
body.light-mode #user-modal > div,
body.light-mode #master-modal > div,
body.light-mode #add-transaction-modal > div,
body.light-mode #add-client-modal > div,
body.light-mode #edit-client-modal > div,
body.light-mode #update-creds-modal > div,
body.light-mode .ticket-widget-panel {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.3), 0 0 24px rgba(16, 185, 129, 0.12) !important;
    border-radius: 20px !important;
    color: #0f172a !important;
    overflow: hidden !important;
}

/* Allow client details modal to scroll with modern emerald scrollbar */
body.light-mode .modal-content-custom {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.3), 0 0 24px rgba(16, 185, 129, 0.12) !important;
    border-radius: 24px !important;
    color: #0f172a !important;
    max-height: 86vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: #10b981 #f1f5f9 !important;
}
body.light-mode .modal-content-custom::-webkit-scrollbar {
    width: 8px !important;
    display: block !important;
}
body.light-mode .modal-content-custom::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 8px !important;
}
body.light-mode .modal-content-custom::-webkit-scrollbar-thumb {
    background: #10b981 !important;
    border-radius: 8px !important;
}
body.light-mode .modal-content-custom::-webkit-scrollbar-thumb:hover {
    background: #047857 !important;
}

body.light-mode #profile-modal .bg-gradient-to-r:first-child,
body.light-mode #detail-modal > div.relative > div:first-child,
body.light-mode #delete-modal > div.relative > div:first-child,
body.light-mode #user-modal .bg-gradient-to-r,
body.light-mode #master-modal .bg-gradient-to-r,
body.light-mode #add-transaction-modal .bg-gradient-to-r,
body.light-mode #add-client-modal .bg-gradient-to-r,
body.light-mode #edit-client-modal .bg-gradient-to-r,
body.light-mode #update-creds-modal .bg-gradient-to-r,
body.light-mode #bulk-upload-modal .bg-gradient-to-r,
body.light-mode .ticket-widget-header {
    background: linear-gradient(135deg, #0f2744 0%, #091a2f 100%) !important;
    border-bottom: 3px solid #10b981 !important;
    color: #ffffff !important;
}
body.light-mode #profile-modal .bg-gradient-to-r:first-child *,
body.light-mode #detail-modal > div.relative > div:first-child *,
body.light-mode #delete-modal > div.relative > div:first-child *,
body.light-mode #user-modal .bg-gradient-to-r *,
body.light-mode #master-modal .bg-gradient-to-r *,
body.light-mode #add-transaction-modal .bg-gradient-to-r *,
body.light-mode #add-client-modal .bg-gradient-to-r *,
body.light-mode #edit-client-modal .bg-gradient-to-r *,
body.light-mode #update-creds-modal .bg-gradient-to-r *,
body.light-mode #bulk-upload-modal .bg-gradient-to-r *,
body.light-mode .ticket-widget-header * {
    color: #ffffff !important;
}

body.light-mode #modal-body,
body.light-mode #profile-modal .overflow-y-auto,
body.light-mode #user-modal form,
body.light-mode #master-modal form,
body.light-mode #add-transaction-modal form,
body.light-mode #add-client-modal form,
body.light-mode #edit-client-modal form,
body.light-mode #update-creds-modal form,
body.light-mode #bulk-upload-modal form {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

body.light-mode #modal-body .bg-gradient-to-br,
body.light-mode #modal-body .rounded-xl,
body.light-mode #modal-body .modal-section-info > div > div {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}
body.light-mode #modal-body .bg-gradient-to-br:hover,
body.light-mode #modal-body .rounded-xl:hover {
    border-color: #10b981 !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.15) !important;
}
body.light-mode #modal-body h4,
body.light-mode #modal-body h4 span,
body.light-mode #modal-body h4 svg {
    color: #0f2744 !important;
}
body.light-mode #modal-body .text-slate-600 {
    color: #475569 !important;
    font-weight: 600 !important;
}
body.light-mode #modal-body .text-slate-700 {
    color: #0f172a !important;
    font-weight: 600 !important;
}

body.light-mode #user-modal label,
body.light-mode #master-modal label,
body.light-mode #add-transaction-modal label,
body.light-mode #add-client-modal label,
body.light-mode #edit-client-modal label,
body.light-mode #update-creds-modal label,
body.light-mode #bulk-upload-modal label,
body.light-mode #comment-action-modal label {
    color: #0f2744 !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}

body.light-mode #user-modal input,
body.light-mode #master-modal input,
body.light-mode #add-transaction-modal input,
body.light-mode #add-client-modal input,
body.light-mode #edit-client-modal input,
body.light-mode #update-creds-modal input,
body.light-mode #bulk-upload-modal input,
body.light-mode #comment-action-modal input,
body.light-mode #user-modal select,
body.light-mode #master-modal select,
body.light-mode #add-transaction-modal select,
body.light-mode #add-client-modal select,
body.light-mode #edit-client-modal select,
body.light-mode #update-creds-modal select,
body.light-mode #comment-action-modal select,
body.light-mode #comment-action-modal textarea {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    color: #0f172a !important;
    padding: 10px 12px !important;
}
body.light-mode #user-modal input:focus,
body.light-mode #master-modal input:focus,
body.light-mode #add-transaction-modal input:focus,
body.light-mode #add-client-modal input:focus,
body.light-mode #edit-client-modal input:focus,
body.light-mode #update-creds-modal input:focus,
body.light-mode #comment-action-modal input:focus,
body.light-mode #comment-action-modal select:focus,
body.light-mode #comment-action-modal textarea:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18) !important;
    outline: none !important;
}

/* ── Admin Panel Navigation Cards — Premium Redesign ── */
body.light-mode .admin-tab-card {
    background: linear-gradient(160deg, #ffffff 60%, #f0fdf8 100%) !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 4px 14px -3px rgba(15, 23, 42, 0.10), 0 1px 4px rgba(15, 23, 42, 0.05) !important;
    border-radius: 16px !important;
    color: #1e293b !important;
    transform: translateY(0) scale(1) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 14px 8px 10px !important;
    min-height: 94px !important;
    position: relative !important;
    overflow: hidden !important;
}
body.light-mode .admin-tab-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #10b981, #34d399) !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease !important;
}
body.light-mode .admin-tab-card:hover::before,
body.light-mode .admin-tab-card.admin-tab-active::before {
    opacity: 1 !important;
}
body.light-mode .admin-tab-card:hover {
    background: linear-gradient(160deg, #ffffff 40%, rgba(209, 250, 229, 0.55) 100%) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-color: #10b981 !important;
    transform: translateY(-5px) scale(1.03) !important;
    box-shadow: 0 18px 36px -6px rgba(16, 185, 129, 0.30), 0 0 18px rgba(52, 211, 153, 0.20) !important;
}
body.light-mode .admin-tab-card .font-semibold {
    color: #0f2744 !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    letter-spacing: 0.01em !important;
}
body.light-mode .admin-tab-card .text-slate-400 {
    color: #059669 !important;
    font-weight: 700 !important;
    font-size: 10.5px !important;
}
body.light-mode .admin-tab-card.admin-tab-active {
    background: linear-gradient(145deg, #065f46 0%, #047857 50%, #059669 100%) !important;
    border-color: #34d399 !important;
    color: #ffffff !important;
    transform: translateY(-5px) scale(1.04) !important;
    box-shadow: 0 16px 32px -6px rgba(6, 95, 70, 0.55), 0 4px 10px -2px rgba(16, 185, 129, 0.30) !important;
}
body.light-mode .admin-tab-card.admin-tab-active * {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.20) !important;
}
body.light-mode .admin-tab-card.admin-tab-active .admin-tab-icon {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14) !important;
}
body.light-mode .admin-tab-card.admin-tab-active div:not(.admin-tab-icon) {
    background: transparent !important;
}

body.light-mode .admin-tab-icon {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
    transition: all 0.22s ease !important;
}
body.light-mode .admin-tab-icon .material-symbols-outlined {
    font-size: 22px !important;
}
body.light-mode .admin-tab-card:hover .admin-tab-icon {
    transform: scale(1.12) !important;
}
body.light-mode .tab-icon-users            { background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important; color: #1d4ed8 !important; border: 1px solid #bfdbfe !important; }
body.light-mode .tab-icon-case-owners      { background: linear-gradient(135deg, #dcfce7, #bbf7d0) !important; color: #15803d !important; border: 1px solid #bbf7d0 !important; }
body.light-mode .tab-icon-account-managers { background: linear-gradient(135deg, #f3e8ff, #e9d5ff) !important; color: #7e22ce !important; border: 1px solid #e9d5ff !important; }
body.light-mode .tab-icon-case-handlers    { background: linear-gradient(135deg, #ffedd5, #fed7aa) !important; color: #c2410c !important; border: 1px solid #fed7aa !important; }
body.light-mode .tab-icon-currencies       { background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important; color: #047857 !important; border: 1px solid #a7f3d0 !important; }
body.light-mode .tab-icon-countries        { background: linear-gradient(135deg, #cffafe, #a5f3fc) !important; color: #0e7490 !important; border: 1px solid #a5f3fc !important; }
body.light-mode .tab-icon-banking-partners { background: linear-gradient(135deg, #e0e7ff, #c7d2fe) !important; color: #4338ca !important; border: 1px solid #c7d2fe !important; }
body.light-mode .tab-icon-clients          { background: linear-gradient(135deg, #ffe4e6, #fecdd3) !important; color: #be123c !important; border: 1px solid #fecdd3 !important; }
body.light-mode .tab-icon-query-types      { background: linear-gradient(135deg, #fae8ff, #f5d0fe) !important; color: #a21caf !important; border: 1px solid #f5d0fe !important; }
body.light-mode .tab-icon-information      { background: linear-gradient(135deg, #fef9c3, #fde68a) !important; color: #a16207 !important; border: 1px solid #fde68a !important; }
body.light-mode .tab-icon-business-units   { background: linear-gradient(135deg, #ccfbf1, #99f6e4) !important; color: #0f766e !important; border: 1px solid #99f6e4 !important; }
body.light-mode .tab-icon-risk-categories  { background: linear-gradient(135deg, #fee2e2, #fecaca) !important; color: #b91c1c !important; border: 1px solid #fecaca !important; }
body.light-mode .tab-icon-counterparties   { background: linear-gradient(135deg, #fef3c7, #fde68a) !important; color: #b45309 !important; border: 1px solid #fde68a !important; }
body.light-mode .tab-icon-transactions     { background: linear-gradient(135deg, #e0f2fe, #bae6fd) !important; color: #0369a1 !important; border: 1px solid #bae6fd !important; }
body.light-mode .tab-icon-rfi-types        { background: linear-gradient(135deg, #ede9fe, #ddd6fe) !important; color: #6d28d9 !important; border: 1px solid #ddd6fe !important; }
body.light-mode .tab-icon-entity-types     { background: linear-gradient(135deg, #f1f5f9, #e2e8f0) !important; color: #334155 !important; border: 1px solid #e2e8f0 !important; }
body.light-mode .tab-icon-api-keys         { background: linear-gradient(135deg, #fef9c3, #fef08a) !important; color: #713f12 !important; border: 1px solid #fef08a !important; }
body.light-mode .tab-icon-sub-info         { background: linear-gradient(135deg, #ede9fe, #c4b5fd) !important; color: #5b21b6 !important; border: 1px solid #c4b5fd !important; }

/* ── Light Mode Navigation Tab Cards — Ultra Professional & Dynamic ── */
body.light-mode .nav-tab-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 2px 6px -1px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    border-radius: 16px !important;
    color: #0f172a !important;
    transform: translateY(0) !important;
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Top Accent Indicator Line (Sliding in on hover) */
body.light-mode .nav-tab-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) scaleX(0) !important;
    width: 100% !important;
    height: 3.5px !important;
    border-radius: 4px 4px 0 0 !important;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease !important;
    opacity: 0 !important;
    z-index: 5 !important;
}
body.light-mode .nav-tab-card:not(.nav-tab-active):hover::before {
    transform: translateX(-50%) scaleX(1) !important;
    opacity: 1 !important;
}

/* Subtle Sheen Reflection */
body.light-mode .nav-tab-card::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -120% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent) !important;
    transition: left 0.6s ease !important;
    pointer-events: none !important;
    z-index: 4 !important;
}
body.light-mode .nav-tab-card:not(.nav-tab-active):hover::after {
    left: 120% !important;
}

body.light-mode .nav-tab-card .nav-tab-label {
    color: #475569 !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    letter-spacing: 0.01em !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
    z-index: 2 !important;
}

/* Icon Container Base */
body.light-mode .nav-tab-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    z-index: 2 !important;
}
body.light-mode .nav-tab-card:not(.nav-tab-active):hover .nav-tab-icon {
    transform: translateY(-2px) scale(1.10) !important;
}

/* 1. Initiate RFI (Emerald) */
body.light-mode .nav-tab-rfi::before,
body.light-mode a.nav-tab-card:has(.icon-rfi)::before {
    background: linear-gradient(90deg, #10b981, #34d399) !important;
}
body.light-mode .nav-tab-rfi:not(.nav-tab-active):hover,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover:has(.icon-rfi) {
    transform: translateY(-5px) !important;
    background: linear-gradient(170deg, #ffffff 40%, #ecfdf5 100%) !important;
    border-color: #10b981 !important;
    box-shadow: 0 14px 28px -4px rgba(16, 185, 129, 0.25), 0 4px 10px rgba(16, 185, 129, 0.10) !important;
}
body.light-mode .nav-tab-rfi:not(.nav-tab-active):hover .nav-tab-label,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover:has(.icon-rfi) .nav-tab-label {
    color: #065f46 !important;
}
body.light-mode .nav-tab-rfi:not(.nav-tab-active):hover .icon-rfi,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover .icon-rfi {
    background: #bbf7d0 !important;
    color: #047857 !important;
    border-color: #34d399 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.30) !important;
}
body.light-mode .nav-tab-rfi:not(.nav-tab-active):hover .icon-rfi svg,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover .icon-rfi svg {
    stroke: #047857 !important;
}

/* 2. Support (Amber / Orange) */
body.light-mode .nav-tab-support::before,
body.light-mode a.nav-tab-card:has(.icon-support)::before {
    background: linear-gradient(90deg, #f97316, #fb923c) !important;
}
body.light-mode .nav-tab-support:not(.nav-tab-active):hover,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover:has(.icon-support) {
    transform: translateY(-5px) !important;
    background: linear-gradient(170deg, #ffffff 40%, #fff7ed 100%) !important;
    border-color: #f97316 !important;
    box-shadow: 0 14px 28px -4px rgba(249, 115, 22, 0.25), 0 4px 10px rgba(249, 115, 22, 0.10) !important;
}
body.light-mode .nav-tab-support:not(.nav-tab-active):hover .nav-tab-label,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover:has(.icon-support) .nav-tab-label {
    color: #9a3412 !important;
}
body.light-mode .nav-tab-support:not(.nav-tab-active):hover .icon-support,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover .icon-support {
    background: #fed7aa !important;
    color: #c2410c !important;
    border-color: #fb923c !important;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.30) !important;
}
body.light-mode .nav-tab-support:not(.nav-tab-active):hover .icon-support svg,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover .icon-support svg {
    stroke: #c2410c !important;
}

/* 3. Case Manager (Royal Indigo) */
body.light-mode .nav-tab-case::before,
body.light-mode a.nav-tab-card:has(.icon-case)::before {
    background: linear-gradient(90deg, #6366f1, #818cf8) !important;
}
body.light-mode .nav-tab-case:not(.nav-tab-active):hover,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover:has(.icon-case) {
    transform: translateY(-5px) !important;
    background: linear-gradient(170deg, #ffffff 40%, #eef2ff 100%) !important;
    border-color: #6366f1 !important;
    box-shadow: 0 14px 28px -4px rgba(99, 102, 241, 0.25), 0 4px 10px rgba(99, 102, 241, 0.10) !important;
}
body.light-mode .nav-tab-case:not(.nav-tab-active):hover .nav-tab-label,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover:has(.icon-case) .nav-tab-label {
    color: #3730a3 !important;
}
body.light-mode .nav-tab-case:not(.nav-tab-active):hover .icon-case,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover .icon-case {
    background: #c7d2fe !important;
    color: #4338ca !important;
    border-color: #818cf8 !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.30) !important;
}
body.light-mode .nav-tab-case:not(.nav-tab-active):hover .icon-case svg,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover .icon-case svg {
    stroke: #4338ca !important;
}

/* 4. RFI Report (Violet / Purple) */
body.light-mode .nav-tab-report::before,
body.light-mode a.nav-tab-card:has(.icon-report)::before {
    background: linear-gradient(90deg, #a855f7, #c084fc) !important;
}
body.light-mode .nav-tab-report:not(.nav-tab-active):hover,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover:has(.icon-report) {
    transform: translateY(-5px) !important;
    background: linear-gradient(170deg, #ffffff 40%, #faf5ff 100%) !important;
    border-color: #a855f7 !important;
    box-shadow: 0 14px 28px -4px rgba(168, 85, 247, 0.25), 0 4px 10px rgba(168, 85, 247, 0.10) !important;
}
body.light-mode .nav-tab-report:not(.nav-tab-active):hover .nav-tab-label,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover:has(.icon-report) .nav-tab-label {
    color: #6b21a8 !important;
}
body.light-mode .nav-tab-report:not(.nav-tab-active):hover .icon-report,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover .icon-report {
    background: #e9d5ff !important;
    color: #6d28d9 !important;
    border-color: #c084fc !important;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.30) !important;
}
body.light-mode .nav-tab-report:not(.nav-tab-active):hover .icon-report svg,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover .icon-report svg {
    stroke: #6d28d9 !important;
}

/* 5. Dashboard (Sapphire / Sky Blue) */
body.light-mode .nav-tab-dash::before,
body.light-mode a.nav-tab-card:has(.icon-dash)::before {
    background: linear-gradient(90deg, #0284c7, #38bdf8) !important;
}
body.light-mode .nav-tab-dash:not(.nav-tab-active):hover,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover:has(.icon-dash) {
    transform: translateY(-5px) !important;
    background: linear-gradient(170deg, #ffffff 40%, #f0f9ff 100%) !important;
    border-color: #0284c7 !important;
    box-shadow: 0 14px 28px -4px rgba(2, 132, 199, 0.25), 0 4px 10px rgba(2, 132, 199, 0.10) !important;
}
body.light-mode .nav-tab-dash:not(.nav-tab-active):hover .nav-tab-label,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover:has(.icon-dash) .nav-tab-label {
    color: #075985 !important;
}
body.light-mode .nav-tab-dash:not(.nav-tab-active):hover .icon-dash,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover .icon-dash {
    background: #bae6fd !important;
    color: #0369a1 !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.30) !important;
}
body.light-mode .nav-tab-dash:not(.nav-tab-active):hover .icon-dash svg,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover .icon-dash svg {
    stroke: #0369a1 !important;
}

/* 6. Client Analysis (Ruby Rose) */
body.light-mode .nav-tab-client::before,
body.light-mode a.nav-tab-card:has(.icon-client)::before {
    background: linear-gradient(90deg, #f43f5e, #fb7185) !important;
}
body.light-mode .nav-tab-client:not(.nav-tab-active):hover,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover:has(.icon-client) {
    transform: translateY(-5px) !important;
    background: linear-gradient(170deg, #ffffff 40%, #fff1f2 100%) !important;
    border-color: #f43f5e !important;
    box-shadow: 0 14px 28px -4px rgba(244, 63, 94, 0.25), 0 4px 10px rgba(244, 63, 94, 0.10) !important;
}
body.light-mode .nav-tab-client:not(.nav-tab-active):hover .nav-tab-label,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover:has(.icon-client) .nav-tab-label {
    color: #9f1239 !important;
}
body.light-mode .nav-tab-client:not(.nav-tab-active):hover .icon-client,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover .icon-client {
    background: #fecdd3 !important;
    color: #be123c !important;
    border-color: #fb7185 !important;
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.30) !important;
}
body.light-mode .nav-tab-client:not(.nav-tab-active):hover .icon-client svg,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover .icon-client svg {
    stroke: #be123c !important;
}

/* 7. Admin Panel (Executive Slate / Navy) */
body.light-mode .nav-tab-admin::before,
body.light-mode a.nav-tab-card:has(.icon-admin)::before {
    background: linear-gradient(90deg, #475569, #94a3b8) !important;
}
body.light-mode .nav-tab-admin:not(.nav-tab-active):hover,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover:has(.icon-admin) {
    transform: translateY(-5px) !important;
    background: linear-gradient(170deg, #ffffff 40%, #f1f5f9 100%) !important;
    border-color: #475569 !important;
    box-shadow: 0 14px 28px -4px rgba(71, 85, 105, 0.25), 0 4px 10px rgba(71, 85, 105, 0.10) !important;
}
body.light-mode .nav-tab-admin:not(.nav-tab-active):hover .nav-tab-label,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover:has(.icon-admin) .nav-tab-label {
    color: #0f172a !important;
}
body.light-mode .nav-tab-admin:not(.nav-tab-active):hover .icon-admin,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover .icon-admin {
    background: #e2e8f0 !important;
    color: #1e293b !important;
    border-color: #94a3b8 !important;
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.30) !important;
}
body.light-mode .nav-tab-admin:not(.nav-tab-active):hover .icon-admin svg,
body.light-mode a.nav-tab-card:not(.nav-tab-active):hover .icon-admin svg {
    stroke: #1e293b !important;
}

/* ── Active Navigation Tab Card (Light Mode) ── */
body.light-mode .nav-tab-active {
    background: linear-gradient(145deg, #065f46 0%, #047857 50%, #059669 100%) !important;
    border: 1.5px solid #34d399 !important;
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 14px 28px -4px rgba(6, 95, 70, 0.45), 0 6px 12px -2px rgba(16, 185, 129, 0.25) !important;
    color: #ffffff !important;
    z-index: 10 !important;
}
body.light-mode .nav-tab-active:hover {
    transform: translateY(-6px) scale(1.03) !important;
    box-shadow: 0 18px 36px -4px rgba(6, 95, 70, 0.55), 0 8px 16px -2px rgba(16, 185, 129, 0.35) !important;
    border-color: #6ee7b7 !important;
}
body.light-mode .nav-tab-active .nav-tab-label {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
    font-weight: 800 !important;
}
body.light-mode .nav-tab-active .nav-tab-icon,
body.light-mode .nav-tab-active .nav-icon-active {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}
body.light-mode .nav-tab-active .nav-tab-icon svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

body.light-mode .kpi-card-v:hover,
body.light-mode .stat-card:hover,
body.light-mode [id^="kpi-card-"]:hover,
body.light-mode .react-card:hover,
body.light-mode .client-react-card:hover,
body.light-mode .metric-tile:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(209, 250, 229, 0.45)) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-color: #10b981 !important;
    box-shadow: 0 16px 32px -4px rgba(16, 185, 129, 0.25), 0 0 16px rgba(52, 211, 153, 0.18) !important;
    transform: translateY(-4px) scale(1.015) !important;
}

body.light-mode .text-white,
body.light-mode button.text-white,
body.light-mode button.text-white *,
body.light-mode a.text-white,
body.light-mode a.text-white *,
body.light-mode .btn-gradient,
body.light-mode .btn-gradient *,
body.light-mode .btn-primary,
body.light-mode .btn-primary *,
body.light-mode .nav-tab-active,
body.light-mode .nav-tab-active *,
body.light-mode .admin-tab-card.admin-tab-active,
body.light-mode .admin-tab-card.admin-tab-active *,
body.light-mode [class*="from-emerald"][class*="to-"] *,
body.light-mode [class*="from-green"][class*="to-"] *,
body.light-mode [class*="from-[#1ca161]"] *,
body.light-mode [class*="bg-[#1ca161]"] * {
    color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════
   EXECUTIVE COLORFUL BADGES & FILTER PILLS (LIGHT MODE)
   ══════════════════════════════════════════════════════════════ */
body.light-mode .badge-risk-low,
body.light-mode .risk-low-badge {
    background-color: #f0fdf4 !important;
    color: #15803d !important;
    border: 1.5px solid #a7f3d0 !important;
    font-weight: 800 !important;
    box-shadow: 0 1px 3px rgba(34, 197, 94, 0.15) !important;
}
body.light-mode .badge-risk-medium,
body.light-mode .risk-medium-badge {
    background-color: #fffbeb !important;
    color: #b45309 !important;
    border: 1.5px solid #fde68a !important;
    font-weight: 800 !important;
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.15) !important;
}
body.light-mode .badge-risk-high,
body.light-mode .risk-high-badge {
    background-color: #fff1f2 !important;
    color: #be123c !important;
    border: 1.5px solid #fda4af !important;
    font-weight: 800 !important;
    box-shadow: 0 1px 3px rgba(244, 63, 94, 0.15) !important;
}
body.light-mode .status-responsive {
    background: #f0fdf4 !important;
    color: #15803d !important;
    border: 1.5px solid #86efac !important;
    font-weight: 700 !important;
}
body.light-mode .status-non-responsive {
    background: #fffbeb !important;
    color: #b45309 !important;
    border: 1.5px solid #fde68a !important;
    font-weight: 700 !important;
}
body.light-mode .status-active {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1.5px solid #6ee7b7 !important;
    font-weight: 700 !important;
}
body.light-mode .status-new {
    background: #f5f3ff !important;
    color: #6d28d9 !important;
    border: 1.5px solid #ddd6fe !important;
    font-weight: 700 !important;
}

body.light-mode .filter-pill-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    padding: 6px 14px !important;
    border-radius: 9999px !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}
body.light-mode .filter-pill-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
    transition: transform 0.2s ease !important;
}
body.light-mode .filter-pill-badge:hover .filter-pill-icon {
    transform: scale(1.1) !important;
}

/* Accepted: Emerald Green */
body.light-mode .filter-pill-accepted {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
    border: 1.5px solid #22c55e !important;
    color: #15803d !important;
}
body.light-mode .filter-pill-accepted * {
    color: #15803d !important;
    stroke: #15803d !important;
}
body.light-mode .filter-pill-accepted:hover {
    background: linear-gradient(135deg, #bbf7d0 0%, #86efac 100%) !important;
    border-color: #16a34a !important;
    color: #14532d !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35) !important;
    transform: translateY(-2px) !important;
}
body.light-mode .filter-pill-accepted.filter-pill-active {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    border-color: #14532d !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.45) !important;
    transform: scale(1.04) !important;
}
body.light-mode .filter-pill-accepted.filter-pill-active * {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Rejected: Crimson Red */
body.light-mode .filter-pill-rejected {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
    border: 1.5px solid #ef4444 !important;
    color: #b91c1c !important;
}
body.light-mode .filter-pill-rejected * {
    color: #b91c1c !important;
    stroke: #b91c1c !important;
}
body.light-mode .filter-pill-rejected:hover {
    background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%) !important;
    border-color: #dc2626 !important;
    color: #7f1d1d !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35) !important;
    transform: translateY(-2px) !important;
}
body.light-mode .filter-pill-rejected.filter-pill-active {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    border-color: #7f1d1d !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.45) !important;
    transform: scale(1.04) !important;
}
body.light-mode .filter-pill-rejected.filter-pill-active * {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Initiated: Royal Sky Blue */
body.light-mode .filter-pill-initiated {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
    border: 1.5px solid #3b82f6 !important;
    color: #1d4ed8 !important;
}
body.light-mode .filter-pill-initiated * {
    color: #1d4ed8 !important;
    stroke: #1d4ed8 !important;
}
body.light-mode .filter-pill-initiated:hover {
    background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%) !important;
    border-color: #2563eb !important;
    color: #1e3a8a !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35) !important;
    transform: translateY(-2px) !important;
}
body.light-mode .filter-pill-initiated.filter-pill-active {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border-color: #1e3a8a !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45) !important;
    transform: scale(1.04) !important;
}
body.light-mode .filter-pill-initiated.filter-pill-active * {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* High Risk: Ruby Rose */
body.light-mode .filter-pill-risk-high {
    background: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 100%) !important;
    border: 1.5px solid #f43f5e !important;
    color: #be123c !important;
}
body.light-mode .filter-pill-risk-high * {
    color: #be123c !important;
    stroke: #be123c !important;
}
body.light-mode .filter-pill-risk-high:hover {
    background: linear-gradient(135deg, #fecdd3 0%, #fda4af 100%) !important;
    border-color: #e11d48 !important;
    color: #881337 !important;
    box-shadow: 0 4px 14px rgba(244, 63, 94, 0.35) !important;
    transform: translateY(-2px) !important;
}
body.light-mode .filter-pill-risk-high.filter-pill-active {
    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
    border-color: #881337 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.45) !important;
    transform: scale(1.04) !important;
}
body.light-mode .filter-pill-risk-high.filter-pill-active * {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Medium Risk: Amber Gold */
body.light-mode .filter-pill-risk-medium {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
    border: 1.5px solid #f59e0b !important;
    color: #b45309 !important;
}
body.light-mode .filter-pill-risk-medium * {
    color: #b45309 !important;
    stroke: #b45309 !important;
}
body.light-mode .filter-pill-risk-medium:hover {
    background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%) !important;
    border-color: #d97706 !important;
    color: #78350f !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
    transform: translateY(-2px) !important;
}
body.light-mode .filter-pill-risk-medium.filter-pill-active {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    border-color: #78350f !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.45) !important;
    transform: scale(1.04) !important;
}
body.light-mode .filter-pill-risk-medium.filter-pill-active * {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Low Risk: Vibrant Seafoam Teal */
body.light-mode .filter-pill-risk-low {
    background: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%) !important;
    border: 1.5px solid #0d9488 !important;
    color: #0f766e !important;
}
body.light-mode .filter-pill-risk-low * {
    color: #0f766e !important;
    stroke: #0f766e !important;
}
body.light-mode .filter-pill-risk-low:hover {
    background: linear-gradient(135deg, #99f6e4 0%, #5eead4 100%) !important;
    border-color: #0f766e !important;
    color: #134e4a !important;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35) !important;
    transform: translateY(-2px) !important;
}
body.light-mode .filter-pill-risk-low.filter-pill-active {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
    border-color: #134e4a !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.45) !important;
    transform: scale(1.04) !important;
}
body.light-mode .filter-pill-risk-low.filter-pill-active * {
    color: #ffffff !important;
    stroke: #ffffff !important;
}