/**
 * CBP TPVS 2.0 Unified Theme Engine (S7DR-32)
 * CBP Look (CBP Navy #002855) + Leidos Purple (#5c2d91 / #7e22ce)
 * WCAG 2.1 AA & AAA High-Contrast Readability Assurance
 */

:root {
    --theme-cbp-navy: #002855;
    --theme-cbp-navy-dark: #001733;
    --theme-cbp-blue: #00458f;
    --theme-cbp-cyan: #0284c7;
    --theme-leidos-purple: #5c2d91;
    --theme-leidos-purple-dark: #3b1464;
    --theme-leidos-purple-vibrant: #7e22ce;
    --theme-leidos-purple-accent: #8b5cf6;
    --theme-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ==========================================================================
   LIGHT MODE OVERRIDES (.light-theme or html.light)
   ========================================================================== */

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

/* --------------------------------------------------------------------------
   1. Master and Feature Headers (Authoritative CBP Navy)
   -------------------------------------------------------------------------- */
.light-theme header,
.light-theme header[class*="bg-slate-900"],
.light-theme header[class*="bg-slate-950"],
.light-theme .theme-header {
    background: #002855 !important; /* Deep Authoritative CBP Navy */
    background-color: #002855 !important;
    border: 1px solid #1e3a8a !important;
    border-bottom: 3px solid #7e22ce !important; /* Leidos Purple Top/Bottom Accent */
    box-shadow: 0 4px 14px rgba(0, 40, 85, 0.18) !important;
}

.light-theme header h1,
.light-theme header h2,
.light-theme header h3,
.light-theme header .text-white,
.light-theme header strong,
.light-theme .theme-header h1 {
    color: #ffffff !important; /* Pure white on navy = 14.2:1 AAA contrast */
}

.light-theme header .text-slate-400,
.light-theme header .text-slate-300,
.light-theme header .text-slate-500 {
    color: #bfdbfe !important; /* Crisp light blue on navy = 10.5:1 AAA contrast */
}

.light-theme header .bg-blue-950,
.light-theme header .bg-blue-950\/80,
.light-theme header .bg-purple-950,
.light-theme header .bg-purple-950\/80 {
    background-color: #001f44 !important;
    border: 1px solid #3b82f6 !important;
    color: #60a5fa !important;
}

.light-theme header .bg-blue-900,
.light-theme header .bg-blue-900\/80 {
    background-color: #001f44 !important;
    border: 1px solid #3b82f6 !important;
    color: #93c5fd !important;
}

.light-theme header .bg-slate-950,
.light-theme header .bg-slate-950\/80 {
    background-color: #001733 !important;
    border: 1.5px solid #1e3a8a !important;
}

.light-theme header button.bg-slate-800,
.light-theme header a.bg-slate-800 {
    background-color: #001f44 !important;
    border: 1.5px solid #3b82f6 !important;
    color: #ffffff !important;
}

.light-theme header button.bg-slate-800:hover,
.light-theme header a.bg-slate-800:hover {
    background-color: #003366 !important;
    border-color: #60a5fa !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   2. Progress Steppers (Screen 1 & similar content progress bars)
   -------------------------------------------------------------------------- */
.light-theme nav[aria-label="Intake Progress"],
.light-theme .intake-progress-nav,
.light-theme nav:not(header nav):not(.master-nav) {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.light-theme nav[aria-label="Intake Progress"] ol,
.light-theme .intake-progress-nav ol,
.light-theme nav:not(header nav):not(.master-nav) ol {
    border-bottom: 2px solid #e2e8f0 !important;
    background: transparent !important;
}

.light-theme nav[aria-label="Intake Progress"] li,
.light-theme .intake-progress-nav li {
    background: transparent !important;
}

/* Active Step in Progress Stepper */
.light-theme nav[aria-label="Intake Progress"] li.text-blue-400,
.light-theme nav[aria-label="Intake Progress"] li[class*="text-blue-400"],
.light-theme .intake-progress-nav li.active-step {
    color: #002855 !important; /* Deep CBP Navy */
    font-weight: 800 !important;
}

.light-theme nav[aria-label="Intake Progress"] li.text-blue-400 span.rounded-full,
.light-theme nav[aria-label="Intake Progress"] li[class*="text-blue-400"] span.rounded-full {
    background-color: #002855 !important;
    border: 2px solid #002855 !important;
    color: #ffffff !important;
    font-weight: 900 !important;
}

/* Inactive Steps in Progress Stepper */
.light-theme nav[aria-label="Intake Progress"] li.text-slate-500,
.light-theme nav[aria-label="Intake Progress"] li[class*="text-slate-500"] {
    color: #334155 !important; /* 9.5:1 AAA contrast against white */
    font-weight: 600 !important;
}

.light-theme nav[aria-label="Intake Progress"] li.text-slate-500 span.rounded-full,
.light-theme nav[aria-label="Intake Progress"] li[class*="text-slate-500"] span.rounded-full {
    background-color: #f1f5f9 !important;
    border: 2px solid #94a3b8 !important;
    color: #1e293b !important;
    font-weight: 800 !important;
}

/* Completed Steps in Progress Stepper */
.light-theme nav[aria-label="Intake Progress"] li.step-completed,
.light-theme nav[aria-label="Intake Progress"] li.text-emerald-400 {
    color: #065f46 !important;
    font-weight: 800 !important;
}

.light-theme nav[aria-label="Intake Progress"] li.step-completed span.rounded-full,
.light-theme nav[aria-label="Intake Progress"] li.text-emerald-400 span.rounded-full {
    background-color: #059669 !important;
    border: 2px solid #059669 !important;
    color: #ffffff !important;
    font-weight: 900 !important;
}

/* Stepper Connector Lines */
.light-theme nav[aria-label="Intake Progress"] li.h-0\.5,
.light-theme nav[aria-label="Intake Progress"] li[id^="prog"] {
    background-color: #cbd5e1 !important;
    height: 2px !important;
}

.light-theme nav[aria-label="Intake Progress"] li.h-0\.5.bg-blue-600,
.light-theme nav[aria-label="Intake Progress"] li[id^="prog"].bg-blue-600 {
    background-color: #002855 !important;
}

/* --------------------------------------------------------------------------
   3. Master Navigation Bars and Tabs ONLY (inside header)
   -------------------------------------------------------------------------- */
.light-theme header nav,
.light-theme nav.master-nav {
    background-color: #001733 !important;
    border: 1px solid #1e3a8a !important;
}

.light-theme header nav button,
.light-theme nav.master-nav button {
    color: #cbd5e1 !important;
}

.light-theme header nav button:hover,
.light-theme nav.master-nav button:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
}

.light-theme header nav button.active-tab,
.light-theme header nav button[aria-selected="true"],
.light-theme nav.master-nav button.active-tab {
    background-color: #7e22ce !important; /* Leidos Purple active indicator */
    color: #ffffff !important;
    border-color: #c084fc !important;
    font-weight: 800 !important;
}

/* --------------------------------------------------------------------------
   4. Cards & Content Panels
   -------------------------------------------------------------------------- */
.light-theme .bg-slate-900,
.light-theme .bg-slate-900\/80,
.light-theme .bg-slate-950,
.light-theme .bg-slate-950\/80,
.light-theme .bg-slate-900\/90,
.light-theme .bg-slate-950\/90,
.light-theme .card,
.light-theme [class*="bg-slate-900"]:not(header):not(header *):not(#mobileContainer *),
.light-theme [class*="bg-slate-950"]:not(header):not(header *):not(#screenFrame):not(#diagnosticLogStream):not(#mobileContainer *) {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06) !important;
}

/* Card Borders */
.light-theme .border-slate-800:not(#mobileContainer *),
.light-theme .border-slate-800\/80:not(#mobileContainer *),
.light-theme .border-slate-700:not(#mobileContainer *),
.light-theme .border-slate-700\/60:not(#mobileContainer *),
.light-theme .border-slate-700\/50:not(#mobileContainer *),
.light-theme .border-slate-800\/60:not(#mobileContainer *) {
    border-color: #cbd5e1 !important;
}

/* --------------------------------------------------------------------------
   5. OTP Verification Box & Sub-Enclaves
   -------------------------------------------------------------------------- */
.light-theme #otpBox,
.light-theme div[class*="bg-blue-950/40"] {
    background-color: #f0f7ff !important;
    border: 1.5px solid #93c5fd !important;
    box-shadow: 0 2px 8px rgba(0, 40, 85, 0.05) !important;
}

.light-theme #otpBox span,
.light-theme #otpBox div,
.light-theme div[class*="bg-blue-950/40"] span {
    color: #002855 !important;
    font-weight: 600;
}

.light-theme #otpBox i,
.light-theme div[class*="bg-blue-950/40"] i {
    color: #00458f !important;
}

.light-theme #otpSimPill,
.light-theme #otpBox [class*="bg-blue-900"],
.light-theme div[class*="bg-blue-950/40"] [class*="bg-blue-900"] {
    background-color: #ede9fe !important;
    border: 1.5px solid #c084fc !important;
    color: #581c87 !important;
    font-weight: 700 !important;
}

.light-theme #otpSimPill strong,
.light-theme #otpSimPill span,
.light-theme #otpBox [class*="bg-blue-900"] strong,
.light-theme div[class*="bg-blue-950/40"] [class*="bg-blue-900"] strong {
    color: #581c87 !important;
    font-weight: 900 !important;
}

.light-theme #otpInput {
    background-color: #ffffff !important;
    color: #002855 !important;
    border: 2px solid #002855 !important;
    font-weight: 900 !important;
}

.light-theme #otpStatusMsg,
.light-theme #otpStatusMsg * {
    color: #065f46 !important; /* Deep forest green = 7.8:1 AAA contrast */
    font-weight: 800 !important;
}

/* --------------------------------------------------------------------------
   6. Sub-Panels, Question Rows & Minor Enclaves
   -------------------------------------------------------------------------- */
.light-theme div[class*="bg-slate-900/60"]:not(#mobileContainer *),
.light-theme div[class*="bg-slate-900/40"]:not(#mobileContainer *),
.light-theme div[class*="bg-slate-950/80"]:not(#mobileContainer *),
.light-theme div[class*="bg-slate-950/50"]:not(#mobileContainer *) {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

.light-theme div[class*="bg-slate-900/60"]:not(#mobileContainer *) span,
.light-theme div[class*="bg-slate-900/60"]:not(#mobileContainer *) p,
.light-theme div[class*="bg-slate-900/60"]:not(#mobileContainer *) label,
.light-theme div[class*="bg-slate-950/80"]:not(#mobileContainer *) span,
.light-theme div[class*="bg-slate-950/80"]:not(#mobileContainer *) p,
.light-theme div[class*="bg-slate-950/80"]:not(#mobileContainer *) label {
    color: #0f172a !important;
}

/* Emerald Authenticated & ePassport Boxes */
.light-theme div[class*="bg-emerald-950/40"],
.light-theme div[class*="bg-emerald-950/60"] {
    background-color: #ecfdf5 !important;
    border: 1.5px solid #a7f3d0 !important;
}

.light-theme div[class*="bg-emerald-950/40"] *,
.light-theme div[class*="bg-emerald-950/60"] * {
    color: #065f46 !important;
}

/* Dropzone & Upload Outlines */
.light-theme div[class*="border-dashed"],
.light-theme div[class*="bg-slate-950/50"] {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
}

.light-theme div[class*="border-dashed"] span,
.light-theme div[class*="border-dashed"] p {
    color: #1e293b !important;
}

/* Purple Sub-Cards (Screen 2 Secondary Queue) */
.light-theme div[class*="bg-purple-950/40"],
.light-theme div[class*="bg-purple-950/60"] {
    background-color: #f5f3ff !important;
    border: 1.5px solid #ddd6fe !important;
}

.light-theme div[class*="bg-purple-950/40"] *,
.light-theme div[class*="bg-purple-950/60"] * {
    color: #3b0764 !important;
}

/* 7-Stage Workflow Audit Trail Grid Cards (Screens 2 & 3) */
.light-theme .grid.grid-cols-7 > div {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.light-theme .grid.grid-cols-7 > div[class*="bg-emerald-950"] {
    background-color: #ecfdf5 !important;
    border: 1.5px solid #a7f3d0 !important;
    color: #065f46 !important;
    font-weight: 700 !important;
}

.light-theme .grid.grid-cols-7 > div[class*="bg-slate-950"] {
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #475569 !important;
    font-weight: 600 !important;
}

/* Callout Banners (Seth Abrams S7DR-28 Card on Screen 5) */
.light-theme [class*="bg-gradient-to-r"][class*="from-blue-950"] {
    background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%) !important;
    border: 2px solid #7e22ce !important;
}

.light-theme [class*="bg-gradient-to-r"][class*="from-blue-950"] h2 {
    color: #3b0764 !important; /* 14:1 AAA contrast */
    font-weight: 900 !important;
}

.light-theme [class*="bg-gradient-to-r"][class*="from-blue-950"] p {
    color: #1e293b !important;
}

/* --------------------------------------------------------------------------
   7. High-Contrast Typography in Light Mode
   -------------------------------------------------------------------------- */
.light-theme h1:not(header h1):not(#phoneHomeScreen *),
.light-theme h2:not(header h2):not([class*="from-blue-950"] h2):not(#phoneHomeScreen *),
.light-theme h3:not(header h3):not(#phoneHomeScreen *),
.light-theme h4:not(header h4):not(#phoneHomeScreen *),
.light-theme .font-black:not(header *):not(.badge-contrast):not(button):not(button *):not(.btn):not(.btn *):not(#phoneHomeScreen *),
.light-theme .font-bold:not(header *):not(.badge-contrast):not(button):not(button *):not(.btn):not(.btn *):not(nav[aria-label="Intake Progress"] *):not(#phoneHomeScreen *),
.light-theme strong:not(header strong):not(button strong):not(.btn strong):not(#otpSimPill strong):not([id*="otp"] strong):not(#phoneHomeScreen *) {
    color: #0f172a !important; /* 18.7:1 AAA contrast against white */
}

.light-theme p:not(#phoneHomeScreen *),
.light-theme span:not(.badge-contrast):not(header *):not(button *):not([id="otpStatusMsg"]):not([id="otpSimPill"]):not([id="otpSimPill"] *):not(nav[aria-label="Intake Progress"] *):not(#phoneHomeScreen *):not(.phone-status-bar *):not(#phoneClock),
.light-theme td,
.light-theme label,
.light-theme li:not(header li):not(nav[aria-label="Intake Progress"] *) {
    color: #1e293b !important; /* 13.5:1 AAA contrast against white */
}

.light-theme label:not(#phoneHomeScreen *) {
    font-weight: 700 !important;
    color: #0f172a !important; /* 18.7:1 AAA contrast against white */
}

.light-theme .text-slate-400:not(header *):not([class*="from-blue-950"] *):not(#phoneHomeScreen *):not(.phone-status-bar *),
.light-theme .text-slate-300:not(header *):not(.badge-contrast):not([class*="from-blue-950"] *):not(#phoneHomeScreen *):not(.phone-status-bar *),
.light-theme .text-slate-500:not(header *):not(nav[aria-label="Intake Progress"] *):not(#phoneHomeScreen *) {
    color: #334155 !important; /* 9.5:1 AAA contrast against white */
}

/* Evaluator Master Walkthrough Banner in Light Mode */
.light-theme .bg-gradient-to-r.from-purple-950\/80 {
    background: linear-gradient(135deg, #3b1464 0%, #002855 100%) !important;
    border-color: #7e22ce !important;
}

.light-theme .bg-gradient-to-r.from-purple-950\/80 h2,
.light-theme .bg-gradient-to-r.from-purple-950\/80 p,
.light-theme .bg-gradient-to-r.from-purple-950\/80 span {
    color: #ffffff !important;
}

/* Tables in Light Mode */
.light-theme table {
    background-color: #ffffff !important;
}

.light-theme thead th {
    background-color: #f8fafc !important;
    color: #002855 !important; /* CBP Navy table header */
    border-bottom: 2px solid #cbd5e1 !important;
    font-weight: 800 !important;
}

.light-theme tbody tr {
    border-bottom: 1px solid #e2e8f0 !important;
}

.light-theme tbody tr:nth-child(even) {
    background-color: #f8fafc !important;
}

.light-theme tbody tr:hover {
    background-color: #f1f5f9 !important;
}

/* --------------------------------------------------------------------------
   8. Form Inputs, Selects & Textareas in Light Mode
   -------------------------------------------------------------------------- */
.light-theme input:not([type="checkbox"]):not([type="radio"]):not(#otpInput):not(#mobileFormContainer input),
.light-theme select:not(#mobileFormContainer select),
.light-theme textarea {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1.5px solid #64748b !important; /* 4.76:1 contrast against white */
}

.light-theme input::placeholder,
.light-theme textarea::placeholder {
    color: #475569 !important; /* 7.24:1 AAA contrast against white */
    opacity: 1 !important;
}

.light-theme .text-cyan-400,
.light-theme .text-cyan-300,
.light-theme .text-cyan-500 {
    color: #0e7490 !important; /* 5.12:1 AA / 7.44:1 AAA contrast against white */
}

.light-theme input:focus,
.light-theme select:focus,
.light-theme textarea:focus {
    border-color: #7e22ce !important; /* Leidos Purple focus ring */
    outline: 2px solid #7e22ce !important;
    box-shadow: 0 0 0 3px rgba(126, 34, 206, 0.2) !important;
}

/* --------------------------------------------------------------------------
   8B. Primary Action Buttons & 14.2:1 AAA High-Contrast Readability (S7DR-46)
   -------------------------------------------------------------------------- */
.light-theme button.bg-blue-600,
.light-theme button.bg-blue-700,
.light-theme button.bg-blue-800,
.light-theme button.bg-purple-600,
.light-theme button.bg-purple-700,
.light-theme button.bg-purple-800,
.light-theme button.bg-purple-900,
.light-theme button.bg-emerald-600 { background-color: #047857 !important; color: #ffffff !important; }
.light-theme button.bg-emerald-600,
.light-theme button.bg-emerald-700,
.light-theme button.bg-emerald-800,
.light-theme button.bg-emerald-900,
.light-theme button.bg-red-600,
.light-theme button.bg-red-700,
.light-theme button.bg-red-800,
.light-theme button.bg-red-900,
.light-theme button.bg-red-950,
.light-theme button.bg-rose-600,
.light-theme button.bg-rose-700,
.light-theme button.bg-rose-800,
.light-theme button.bg-rose-950,
.light-theme button[class*="bg-blue-600"],
.light-theme button[class*="bg-purple-600"],
.light-theme button[class*="bg-purple-900"],
.light-theme button[class*="bg-emerald-600"],
.light-theme button[class*="bg-emerald-700"],
.light-theme button[class*="bg-red-600"],
.light-theme button[class*="bg-rose-950"],
.light-theme button[class*="bg-[#5c2d91]"],
.light-theme button[class*="bg-[#7e22ce]"],
.light-theme button[class*="bg-[#002855]"],
.light-theme .btn-primary,
.light-theme #timer-start-btn,
.light-theme #btn-next-step,
.light-theme #nextStepBtn,
.light-theme #submitBtn,
.light-theme #mobSubmitBtn {
    color: #ffffff !important;
}

.light-theme button.bg-blue-600 *,
.light-theme button.bg-blue-700 *,
.light-theme button.bg-blue-800 *,
.light-theme button.bg-purple-600 *,
.light-theme button.bg-purple-700 *,
.light-theme button.bg-purple-800 *,
.light-theme button.bg-purple-900 *,
.light-theme button.bg-emerald-600 *,
.light-theme button.bg-emerald-700 *,
.light-theme button.bg-emerald-800 *,
.light-theme button.bg-emerald-900 *,
.light-theme button.bg-red-600 *,
.light-theme button.bg-red-700 *,
.light-theme button.bg-red-800 *,
.light-theme button.bg-red-900 *,
.light-theme button.bg-red-950 *,
.light-theme button.bg-rose-600 *,
.light-theme button.bg-rose-700 *,
.light-theme button.bg-rose-800 *,
.light-theme button.bg-rose-950 *,
.light-theme button[class*="bg-blue-600"] *,
.light-theme button[class*="bg-purple-600"] *,
.light-theme button[class*="bg-purple-900"] *,
.light-theme button[class*="bg-emerald-600"] *,
.light-theme button[class*="bg-emerald-700"] *,
.light-theme button[class*="bg-red-600"] *,
.light-theme button[class*="bg-rose-950"] *,
.light-theme button[class*="bg-[#5c2d91]"] *,
.light-theme button[class*="bg-[#7e22ce]"] *,
.light-theme button[class*="bg-[#002855]"] *,
.light-theme .btn-primary *,
.light-theme #timer-start-btn *,
.light-theme #btn-next-step *,
.light-theme #nextStepBtn *,
.light-theme #submitBtn *,
.light-theme #mobSubmitBtn * {
    color: #ffffff !important;
}

/* Secondary Action Button Polish (Light Mode) */
.light-theme button.bg-slate-800:not(header button):not(#mobileContainer *),
.light-theme a.bg-slate-800:not(header a):not(#mobileContainer *) {
    background-color: #ffffff !important;
    color: #002855 !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

.light-theme button.bg-slate-800:not(header button):not(#mobileContainer *):hover,
.light-theme a.bg-slate-800:not(header a):not(#mobileContainer *):hover {
    background-color: #f8fafc !important;
    border-color: #7e22ce !important;
    color: #5c2d91 !important;
}

/* Screen 5 Simulation Buttons in Light Mode (High Contrast Polish) */
.light-theme #btnSimNcic { background-color: #dc2626 !important; color: #ffffff !important; border-color: #b91c1c !important; }
.light-theme #btnSimNlets { background-color: #d97706 !important; color: #ffffff !important; border-color: #b45309 !important; }
.light-theme #btnSimPds { background-color: #ea580c !important; color: #ffffff !important; border-color: #c2410c !important; }
.light-theme #btnRestoreAll { background-color: #059669 !important; color: #ffffff !important; border-color: #047857 !important; }
.light-theme #btnProbeSweep { background-color: #002855 !important; color: #ffffff !important; border-color: #1e3a8a !important; }
.light-theme #btnSimNcic *,
.light-theme #btnSimNlets *,
.light-theme #btnSimPds *,
.light-theme #btnRestoreAll *,
.light-theme #btnProbeSweep * { color: #ffffff !important; }

/* --------------------------------------------------------------------------
   9. Badges & Pills with Enhanced High Contrast in Light Mode
   -------------------------------------------------------------------------- */
.light-theme .bg-blue-950:not(header *):not(#mobileContainer *),
.light-theme .bg-blue-900:not(header *):not(#otpSimPill):not(#otpBox *):not(#mobileContainer *),
.light-theme .bg-blue-900\/80:not(header *):not(#mobileContainer *),
.light-theme .bg-blue-900\/60:not(header *):not(#mobileContainer *) {
    background-color: #eff6ff !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe !important;
    font-weight: 700 !important;
}

.light-theme .bg-purple-950:not(header *):not(#mobileContainer *),
.light-theme .bg-purple-900:not(header *):not(#mobileContainer *),
.light-theme .bg-purple-900\/80:not(header *):not(#mobileContainer *) {
    background-color: #f5f3ff !important;
    color: #5c2d91 !important;
    border: 1px solid #ddd6fe !important;
    font-weight: 700 !important;
}

.light-theme .bg-emerald-950:not(header *):not(#mobileContainer *),
.light-theme .bg-emerald-900:not(header *):not(#mobileContainer *),
.light-theme .bg-emerald-900\/80:not(header *):not(#mobileContainer *) {
    background-color: #ecfdf5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
    font-weight: 700 !important;
}

.light-theme .bg-red-950:not(header *):not(#mobileContainer *),
.light-theme .bg-red-900:not(header *):not(#mobileContainer *),
.light-theme .bg-red-900\/80:not(header *):not(#mobileContainer *) {
    background-color: #fef2f2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
    font-weight: 700 !important;
}

.light-theme .bg-amber-950:not(header *):not(#mobileContainer *),
.light-theme .bg-amber-900:not(header *):not(#mobileContainer *),
.light-theme .bg-amber-900\/80:not(header *):not(#mobileContainer *) {
    background-color: #fffbeb !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
    font-weight: 700 !important;
}

.light-theme .bg-slate-800:not(header *):not(button):not(a):not(#mobileContainer *),
.light-theme .bg-slate-900:not(header *):not([class*="rounded-xl"]):not(#mobileContainer *) {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
    font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   10. MOBILE SMARTPHONE SIMULATION - STRICT SCOPING & IMMUNITY (S7DR-32)
   "only the phone app should change with dark and light mode, not the home screen"
   -------------------------------------------------------------------------- */

/* Outer Phone Frame & Bezel */
#mobileContainer .phone-device-frame,
#mobileContainer [class*="rounded-\[48px\]"],
.light-theme #mobileContainer .phone-device-frame,
.light-theme #mobileContainer [class*="rounded-\[48px\]"] {
    background-color: #020617 !important;
    border-color: #1e293b !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.9) !important;
}

/* Phone Status Bar & Dynamic Island Notch */
#mobileContainer .phone-status-bar,
#mobileContainer .phone-status-bar *,
.light-theme #mobileContainer .phone-status-bar,
.light-theme #mobileContainer .phone-status-bar * {
    color: #ffffff !important;
}

#mobileContainer #phoneClock,
.light-theme #mobileContainer #phoneClock {
    color: #ffffff !important;
}

/* Phone Home Screen Container & Wallpaper */
#phoneHomeScreen,
.light-theme #phoneHomeScreen {
    background: linear-gradient(to bottom, #0f172a 0%, #1e1b4b 60%, #020617 100%) !important;
    background-color: #0f172a !important;
}

/* Phone Home Screen Clock & Date Widget */
#phoneHomeScreen .text-5xl,
#phoneHomeScreen [class*="text-5xl"],
.light-theme #phoneHomeScreen .text-5xl,
.light-theme #phoneHomeScreen [class*="text-5xl"] {
    color: #ffffff !important;
    font-weight: 900 !important;
}

#phoneHomeScreen .text-xs,
.light-theme #phoneHomeScreen .text-xs,
#phoneHomeScreen .text-slate-300,
.light-theme #phoneHomeScreen .text-slate-300 {
    color: #cbd5e1 !important;
}

#phoneHomeScreen [class*="bg-white/10"],
.light-theme #phoneHomeScreen [class*="bg-white/10"] {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

#phoneHomeScreen [class*="bg-white/10"] span,
.light-theme #phoneHomeScreen [class*="bg-white/10"] span {
    color: #ffffff !important;
}

/* Phone Home Screen App Grid Icons & Titles */
#phoneHomeScreen .grid-cols-4 div,
.light-theme #phoneHomeScreen .grid-cols-4 div {
    box-shadow: none;
}

#phoneHomeScreen .grid-cols-4 span,
.light-theme #phoneHomeScreen .grid-cols-4 span {
    color: #e2e8f0 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

#phoneHomeScreen .grid-cols-4 .group span,
.light-theme #phoneHomeScreen .grid-cols-4 .group span {
    color: #ffffff !important;
    font-weight: 800 !important;
}

#phoneHomeScreen .grid-cols-4 span.bg-rose-600,
.light-theme #phoneHomeScreen .grid-cols-4 span.bg-rose-600 {
    background-color: #e11d48 !important;
    color: #ffffff !important;
}

/* Phone Bottom Dock */
#phoneHomeScreen [class*="backdrop-blur-xl"],
.light-theme #phoneHomeScreen [class*="backdrop-blur-xl"] {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* --------------------------------------------------------------------------
   11. PHONE APP SCREEN LIGHT MODE STYLING (#phoneAppScreen)
   Only the app screen inside the phone transforms with light/dark theme.
   -------------------------------------------------------------------------- */
.light-theme #phoneAppScreen {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

.light-theme #phoneAppScreen > div:first-child {
    background-color: #002855 !important; /* Authoritative CBP Navy */
    border-bottom: 2px solid #7e22ce !important; /* Leidos Purple bottom accent */
}

.light-theme #phoneAppScreen > div:first-child .text-white {
    color: #ffffff !important;
    font-weight: 800 !important;
}

.light-theme #phoneAppScreen > div:first-child .text-slate-400 {
    color: #bfdbfe !important; /* Crisp light blue */
}

.light-theme #phoneAppScreen > div:first-child button {
    background-color: #001f44 !important;
    border: 1px solid #3b82f6 !important;
    color: #ffffff !important;
}

.light-theme #phoneAppScreen > div:first-child button:hover {
    background-color: #003366 !important;
}

/* Mobile Fast-Fill Buttons */
.light-theme #phoneAppScreen button[onclick*="clean"] {
    background-color: #eff6ff !important;
    border: 1.5px solid #bfdbfe !important;
    color: #1e40af !important;
    font-weight: 700 !important;
}

.light-theme #phoneAppScreen button[onclick*="scrutiny"] {
    background-color: #fffbeb !important;
    border: 1.5px solid #fde68a !important;
    color: #92400e !important;
    font-weight: 700 !important;
}

/* Mobile App Form Container */
.light-theme #mobileFormContainer {
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.light-theme #mobileFormContainer > div:first-child {
    border-bottom-color: #e2e8f0 !important;
}

.light-theme #mobileFormContainer > div:first-child span:first-child {
    color: #002855 !important;
    font-weight: 800 !important;
}

.light-theme #mobileFormContainer > div:first-child span:last-child {
    color: #065f46 !important;
    font-weight: 700 !important;
}

.light-theme #mobileFormContainer label {
    color: #0f172a !important;
    font-weight: 700 !important;
}

.light-theme #mobileFormContainer input,
.light-theme #mobileFormContainer select {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1.5px solid #94a3b8 !important;
    font-weight: 500 !important;
}

.light-theme #mobileFormContainer input:focus,
.light-theme #mobileFormContainer select:focus {
    border-color: #7e22ce !important;
    box-shadow: 0 0 0 2px rgba(126, 34, 206, 0.2) !important;
}

.light-theme #mobSubmitBtn {
    background-color: #002855 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border: 1px solid #1e3a8a !important;
}

.light-theme #mobSubmitBtn:hover {
    background-color: #001733 !important;
}

/* Mobile Result Card */
.light-theme #mobResultCard {
    background-color: #f0fdf4 !important;
    border: 1.5px solid #86efac !important;
}

.light-theme #mobResultCard #mobStatusBadge {
    background-color: #ecfdf5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
    font-weight: 800 !important;
}

.light-theme #mobResultCard #mobTravelerName {
    color: #0f172a !important;
    font-weight: 800 !important;
}

.light-theme #mobResultCard #mobTrackingRef {
    color: #334155 !important;
}

.light-theme #mobResultCard button[onclick*="resetMobileForm"] {
    background-color: #ffffff !important;
    color: #002855 !important;
    border: 1.5px solid #cbd5e1 !important;
    font-weight: 700 !important;
}

.light-theme #mobResultCard [class*="text-emerald-400"] {
    color: #065f46 !important;
    background-color: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
}

/* --------------------------------------------------------------------------
   12. Theme Toggle Button Styling
   -------------------------------------------------------------------------- */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1.5px solid #7e22ce;
    background: rgba(126, 34, 206, 0.15);
    color: #e9d5ff;
}

.theme-toggle-btn:hover {
    background: #7e22ce;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.4);
}

.light-theme .theme-toggle-btn {
    border: 1.5px solid #a855f7;
    background: #ffffff;
    color: #3b1464;
}

.light-theme .theme-toggle-btn:hover {
    background: #5c2d91;
    color: #ffffff;
}

/* Focus Visible WCAG Requirement */
button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 3px solid #7e22ce !important;
    outline-offset: 2px !important;
}

/* --------------------------------------------------------------------------
   13. Global Anti-Vibration & High-Contrast Readability (Zero Blue-on-Grey)
   -------------------------------------------------------------------------- */
.light-theme .text-blue-400,
.light-theme .text-blue-300,
.light-theme .text-blue-500,
.light-theme .text-sky-400,
.light-theme .text-sky-300,
.light-theme .text-cyan-400,
.light-theme .text-cyan-300,
.light-theme .text-cyan-500 {
    color: #002855 !important; /* Deep Authoritative CBP Navy (14.6:1 on white, 13.5:1 on slate-100) */
    font-weight: 700 !important;
}

.light-theme .text-purple-400,
.light-theme .text-purple-300,
.light-theme .text-purple-200 {
    color: #5c2d91 !important; /* Leidos Deep Purple (9.4:1 on white) */
    font-weight: 700 !important;
}

.light-theme .text-emerald-400,
.light-theme .text-emerald-300,
.light-theme .text-green-400,
.light-theme .text-green-300 {
    color: #14532d !important; /* Deep Emerald (7.5:1 on white) */
    font-weight: 700 !important;
}

.light-theme .text-amber-400,
.light-theme .text-amber-300,
.light-theme .text-yellow-400,
.light-theme .text-yellow-300 {
    color: #78350f !important; /* Deep Amber (7.8:1 on white) */
    font-weight: 700 !important;
}

.light-theme .text-red-400,
.light-theme .text-red-300 {
    color: #7f1d1d !important; /* Deep Red (7.9:1 on white) */
    font-weight: 700 !important;
}