/**
 * USCIS Case Manager Suite - Warm Neutral Design System
 * Palette:
 *   .Neutral-Palette-1-hex { color: #D7C6B4; } (Warm Tan / Sand)
 *   .Neutral-Palette-2-hex { color: #B5AFA6; } (Warm Stone / Grey)
 *   .Neutral-Palette-3-hex { color: #ECE7E4; } (Warm Linen / Off-White)
 *   .Neutral-Palette-4-hex { color: #F8F8F8; } (Clean Off-White Canvas)
 *   .Neutral-Palette-5-hex { color: #262626; } (Deep Charcoal / High Contrast Text)
 */

:root {
  --pal-tan: #D7C6B4;
  --pal-stone: #B5AFA6;
  --pal-linen: #ECE7E4;
  --pal-canvas: #F8F8F8;
  --pal-charcoal: #262626;

  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* =============================================================================
   1. GLOBAL TYPOGRAPHY & SMOOTHING
   ============================================================================= */

body, button, input, select, textarea {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.font-mono {
  font-family: var(--font-mono) !important;
}

/* =============================================================================
   2. LIGHT MODE THEME (Crisp, High Contrast, Warm Neutral)
   ============================================================================= */

html:not(.dark) {
  color-scheme: light;
  background-color: var(--pal-canvas) !important;
  color: var(--pal-charcoal) !important;
}

html:not(.dark) body {
  background-color: var(--pal-canvas) !important;
  color: var(--pal-charcoal) !important;
}

html:not(.dark) header {
  background-color: #FFFFFF !important;
  border-bottom: 1.5px solid var(--pal-linen) !important;
  box-shadow: 0 1px 4px rgba(38, 38, 38, 0.05) !important;
}

html:not(.dark) footer {
  background-color: #FFFFFF !important;
  border-top: 1.5px solid var(--pal-linen) !important;
  color: #66615b !important;
}

/* Primary Cards (.bg-slate-800) in Light Mode */
html:not(.dark) .bg-slate-800 {
  background-color: #FFFFFF !important;
  border-color: #e5e0dc !important;
  box-shadow: 0 1px 3px rgba(38, 38, 38, 0.05) !important;
  color: var(--pal-charcoal) !important;
}

html:not(.dark) .bg-slate-800\/90,
html:not(.dark) .bg-slate-800\/80,
html:not(.dark) .bg-slate-800\/70,
html:not(.dark) .bg-slate-800\/60,
html:not(.dark) .bg-slate-800\/50,
html:not(.dark) .bg-slate-800\/40 {
  background-color: #FFFFFF !important;
  border-color: #e5e0dc !important;
  color: var(--pal-charcoal) !important;
}

/* Secondary Panels (.bg-slate-900) in Light Mode */
html:not(.dark) .bg-slate-900 {
  background-color: var(--pal-linen) !important;
  border-color: var(--pal-tan) !important;
  color: var(--pal-charcoal) !important;
}

html:not(.dark) .bg-slate-900\/95,
html:not(.dark) .bg-slate-900\/90,
html:not(.dark) .bg-slate-900\/80,
html:not(.dark) .bg-slate-900\/70,
html:not(.dark) .bg-slate-900\/60,
html:not(.dark) .bg-slate-900\/50,
html:not(.dark) .bg-slate-900\/40 {
  background-color: var(--pal-linen) !important;
  border-color: #dfd8d3 !important;
  color: var(--pal-charcoal) !important;
}

/* Deep insets (.bg-slate-950) in Light Mode */
html:not(.dark) .bg-slate-950,
html:not(.dark) .bg-slate-950\/90,
html:not(.dark) .bg-slate-950\/80,
html:not(.dark) .bg-slate-950\/70,
html:not(.dark) .bg-slate-950\/60 {
  background-color: #f2eee9 !important;
  border-color: var(--pal-stone) !important;
  color: var(--pal-charcoal) !important;
}

/* Backdrop for Modals in Light Mode */
html:not(.dark) .fixed.inset-0.bg-slate-950\/80 {
  background-color: rgba(38, 38, 38, 0.65) !important;
  backdrop-filter: blur(4px) !important;
}

/* Modal Inner Dialog Card in Light Mode */
html:not(.dark) #clientModal > div,
html:not(.dark) #clientEditModal > div,
html:not(.dark) #appointmentModal > div,
html:not(.dark) #caseModal > div,
html:not(.dark) #caseTasksModal > div,
html:not(.dark) #hojaViewerModal > div,
html:not(.dark) #attorneyDocVaultModal > div,
html:not(.dark) #attorneyVaultModal > div,
html:not(.dark) #directMatterModal > div {
  background-color: #FFFFFF !important;
  border: 1.5px solid var(--pal-tan) !important;
  box-shadow: 0 25px 50px -12px rgba(38, 38, 38, 0.25) !important;
  color: var(--pal-charcoal) !important;
}

/* Targeted Typography Overrides in Light Mode */
html:not(.dark) h1:not(.portal-header-banner *):not(.hoja-wizard-header *),
html:not(.dark) h2:not(.portal-header-banner *):not(.hoja-wizard-header *),
html:not(.dark) h3:not(.portal-header-banner *):not(.hoja-wizard-header *),
html:not(.dark) h4:not(.portal-header-banner *):not(.hoja-wizard-header *),
html:not(.dark) h5:not(.portal-header-banner *):not(.hoja-wizard-header *) {
  color: var(--pal-charcoal) !important;
}

/* =============================================================================
   UNIVERSAL CONTRAST RULE (LIGHT MODE)
   Rule: On light backgrounds, text MUST NEVER be white or faint low-contrast gray.
   White text (#FFFFFF) is STRICTLY restricted to elements with genuinely dark backgrounds
   (solid charcoal #262626, colored status badges/buttons red/emerald/amber/brand, dark hero banners).
   Any .text-white, .text-slate-100, .text-slate-200 anywhere else (including inside labels,
   spans, buttons, chips, insets) automatically renders in Deep Charcoal (#262626).
   ============================================================================= */

/* 1. Global High-Contrast Text Overrides for Light Mode */
html:not(.dark) .text-white:not([class*="bg-\[\#262626\]"]):not([class*="bg-\[\#262626\]"] *):not([class*="bg-\[\#1c1c1c\]"]):not([class*="bg-\[\#1c1c1c\]"] *):not([class*="bg-\[\#333333\]"]):not([class*="bg-\[\#333333\]"] *):not(.bg-brand-600 *):not(.bg-brand-700 *):not([class*="from-brand-"] *):not(.bg-emerald-600 *):not(.bg-emerald-700 *):not([class*="from-emerald-"] *):not(.bg-red-600 *):not(.bg-red-700 *):not(.bg-amber-600 *):not(.bg-amber-700 *):not(.bg-blue-600 *):not(.bg-blue-700 *):not(.action-queue-btn *):not(.portal-header-banner *):not(.portal-badge *):not(.status-submitted):not(.status-submitted *):not(#toastContainer *):not(.toast-banner *):not(.\!text-white),
html:not(.dark) .text-slate-100:not([class*="bg-\[\#262626\]"] *):not(.bg-brand-600 *):not(.bg-emerald-600 *):not(.bg-red-600 *):not(.bg-amber-600 *):not(.portal-header-banner *),
html:not(.dark) .text-slate-200:not([class*="bg-\[\#262626\]"] *):not(.bg-brand-600 *):not(.bg-emerald-600 *):not(.bg-red-600 *):not(.bg-amber-600 *):not(.portal-header-banner *) {
  color: var(--pal-charcoal) !important;
}

/* 2. Force white text on elements that actually have dark backgrounds in Light Mode */
html:not(.dark) [class*="bg-\[\#262626\]"],
html:not(.dark) [class*="bg-\[\#262626\]"] *,
html:not(.dark) [class*="bg-\[\#1c1c1c\]"],
html:not(.dark) [class*="bg-\[\#1c1c1c\]"] *,
html:not(.dark) [class*="bg-\[\#333333\]"],
html:not(.dark) [class*="bg-\[\#333333\]"] *,
html:not(.dark) .bg-brand-600,
html:not(.dark) .bg-brand-600 *,
html:not(.dark) .bg-brand-700,
html:not(.dark) .bg-brand-700 *,
html:not(.dark) .bg-emerald-600,
html:not(.dark) .bg-emerald-600 *,
html:not(.dark) .bg-emerald-700,
html:not(.dark) .bg-emerald-700 *,
html:not(.dark) .bg-red-600,
html:not(.dark) .bg-red-600 *,
html:not(.dark) .bg-red-700,
html:not(.dark) .bg-red-700 *,
html:not(.dark) .bg-amber-600,
html:not(.dark) .bg-amber-600 *,
html:not(.dark) .bg-blue-600,
html:not(.dark) .bg-blue-600 *,
html:not(.dark) .portal-header-banner,
html:not(.dark) .portal-header-banner *,
html:not(.dark) .portal-badge,
html:not(.dark) .portal-badge *,
html:not(.dark) .status-submitted,
html:not(.dark) .status-submitted *,
html:not(.dark) #toastContainer *,
html:not(.dark) .toast-banner *,
html:not(.dark) .\!text-white {
  color: #FFFFFF !important;
}

/* 3. Slate Tone Readability in Light Mode */
html:not(.dark) .text-slate-300:not(.portal-header-banner *):not(.hoja-wizard-header *):not(.action-queue-btn *) {
  color: #383838 !important;
}

html:not(.dark) .text-slate-400:not(.portal-header-banner *):not(.hoja-wizard-header *):not(.client-badge-attention *) {
  color: #55504a !important; /* Crisp & readable, not washed out */
}

html:not(.dark) .text-slate-500 {
  color: #6b6660 !important;
}

/* Brand Tones & Step Badges Contrast in Light Mode */
html:not(.dark) .text-brand-300,
html:not(.dark) .text-brand-400 {
  color: #735d43 !important; /* High-contrast warm bronze */
}
html:not(.dark) .bg-brand-500\/20 {
  background-color: rgba(140, 115, 85, 0.18) !important;
  color: #735d43 !important;
}

/* 4. Radio & Checkbox Card/Pill High-Contrast System */
html:not(.dark) label.cursor-pointer:has(input[type="radio"]):not([class*="bg-\[\#262626\]"]):not(.bg-brand-600):not(.bg-emerald-600):not(.bg-red-600):not(.bg-amber-600),
html:not(.dark) label.cursor-pointer:has(input[type="checkbox"]):not([class*="bg-\[\#262626\]"]):not(.bg-brand-600):not(.bg-emerald-600):not(.bg-red-600):not(.bg-amber-600) {
  background-color: #FFFFFF !important;
  border-color: #dfd8d3 !important;
  color: var(--pal-charcoal) !important;
}

html:not(.dark) label.cursor-pointer:has(input[type="radio"]):not([class*="bg-\[\#262626\]"]):not(.bg-brand-600):not(.bg-emerald-600):not(.bg-red-600):not(.bg-amber-600):hover,
html:not(.dark) label.cursor-pointer:has(input[type="checkbox"]):not([class*="bg-\[\#262626\]"]):not(.bg-brand-600):not(.bg-emerald-600):not(.bg-red-600):not(.bg-amber-600):hover {
  border-color: #8c7355 !important;
  background-color: #faf7f4 !important;
}

html:not(.dark) label.cursor-pointer:has(input[type="radio"]:checked):not([class*="bg-\[\#262626\]"]):not(.bg-brand-600):not(.bg-emerald-600):not(.bg-red-600):not(.bg-amber-600),
html:not(.dark) label.cursor-pointer:has(input[type="checkbox"]:checked):not([class*="bg-\[\#262626\]"]):not(.bg-brand-600):not(.bg-emerald-600):not(.bg-red-600):not(.bg-amber-600) {
  background-color: #ece5dc !important;
  border-color: #8c7355 !important;
  box-shadow: 0 0 0 1.5px #8c7355 !important;
  color: #262626 !important;
}

html:not(.dark) label.cursor-pointer:has(input[type="radio"]:checked) span,
html:not(.dark) label.cursor-pointer:has(input[type="checkbox"]:checked) span {
  color: #262626 !important;
  font-weight: 700 !important;
}

html.dark label.cursor-pointer:has(input[type="radio"]:checked):not([class*="bg-\[\#262626\]"]):not(.bg-brand-600):not(.bg-emerald-600):not(.bg-red-600):not(.bg-amber-600),
html.dark label.cursor-pointer:has(input[type="checkbox"]:checked):not([class*="bg-\[\#262626\]"]):not(.bg-brand-600):not(.bg-emerald-600):not(.bg-red-600):not(.bg-amber-600) {
  background-color: rgba(215, 198, 180, 0.15) !important;
  border-color: #D7C6B4 !important;
  box-shadow: 0 0 0 1.5px #D7C6B4 !important;
  color: #FFFFFF !important;
}

html.dark label.cursor-pointer:has(input[type="radio"]:checked) span,
html.dark label.cursor-pointer:has(input[type="checkbox"]:checked) span {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* Light Mode Borders */
html:not(.dark) .border-slate-700,
html:not(.dark) .border-slate-700\/80,
html:not(.dark) .border-slate-700\/70,
html:not(.dark) .border-slate-700\/60,
html:not(.dark) .border-slate-700\/50,
html:not(.dark) .border-slate-700\/40,
html:not(.dark) .border-slate-800,
html:not(.dark) .border-slate-800\/80,
html:not(.dark) .border-slate-800\/60,
html:not(.dark) .border-slate-800\/40 {
  border-color: #e5e0dc !important;
}

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

/* Forms, Inputs, Selects & Textareas in Light Mode */
html:not(.dark) input:not([type="checkbox"]):not([type="radio"]),
html:not(.dark) select,
html:not(.dark) textarea {
  background-color: #FFFFFF !important;
  border: 1.5px solid var(--pal-stone) !important;
  color: var(--pal-charcoal) !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 2px rgba(38, 38, 38, 0.04) !important;
}

html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus {
  border-color: var(--pal-charcoal) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(38, 38, 38, 0.12) !important;
}

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

html:not(.dark) select option {
  background-color: #FFFFFF !important;
  color: var(--pal-charcoal) !important;
}

html.dark select option {
  background-color: #1e1e1e !important;
  color: #f1f5f9 !important;
}

/* Universal Form Field Alignment in Grid Rows:
   Guarantees that input fields, selects, and textareas in any multi-column grid
   always align on the exact same bottom baseline and top border,
   even when labels wrap to 2 or more lines across different screen sizes.
*/
.grid > div:has(> label):has(> input),
.grid > div:has(> label):has(> select),
.grid > div:has(> label):has(> textarea) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.grid > div:has(> label):has(> input) > input,
.grid > div:has(> label):has(> select) > select,
.grid > div:has(> label):has(> textarea) > textarea {
  margin-top: auto !important;
}

/* Inset buttons & secondary action pills in Light Mode */
html:not(.dark) .bg-slate-700,
html:not(.dark) .bg-slate-700\/80,
html:not(.dark) .bg-slate-700\/60 {
  background-color: var(--pal-linen) !important;
  border: 1px solid var(--pal-stone) !important;
  color: var(--pal-charcoal) !important;
  font-weight: 600 !important;
}

html:not(.dark) .bg-slate-700:hover,
html:not(.dark) .bg-slate-700\/80:hover {
  background-color: var(--pal-tan) !important;
  color: var(--pal-charcoal) !important;
}

/* Table styling in Light Mode (High Contrast Standard) */
html:not(.dark) table thead {
  background-color: var(--pal-linen) !important;
  color: var(--pal-charcoal) !important;
  font-weight: 800 !important;
  border-bottom: 2px solid var(--pal-tan) !important;
}

html:not(.dark) table thead th {
  color: #44403c !important;
  font-weight: 800 !important;
  background-color: var(--pal-linen) !important;
}

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

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

html:not(.dark) table tbody td {
  color: var(--pal-charcoal) !important;
}

html:not(.dark) table tbody td div,
html:not(.dark) table tbody td span:not([class*="bg-"]):not(.status-badge),
html:not(.dark) table tbody td p,
html:not(.dark) table tbody td strong,
html:not(.dark) table tbody td b {
  color: var(--pal-charcoal);
}

html:not(.dark) table tbody td .text-white {
  color: var(--pal-charcoal) !important;
}

html:not(.dark) table tbody td .text-slate-100,
html:not(.dark) table tbody td .text-slate-200,
html:not(.dark) table tbody td .text-slate-300 {
  color: var(--pal-charcoal) !important;
  font-weight: 600 !important;
}

html:not(.dark) table tbody td .text-slate-400 {
  color: #55504a !important;
  font-weight: 600 !important;
}

html:not(.dark) table tbody td .text-slate-500 {
  color: #6b6660 !important;
  font-weight: 600 !important;
}

/* Primary Action Buttons in Light Mode */
html:not(.dark) .bg-brand-600,
html:not(.dark) .bg-indigo-600,
html:not(.dark) .bg-blue-600 {
  background-color: var(--pal-charcoal) !important;
  border-color: var(--pal-charcoal) !important;
  color: #FFFFFF !important;
}
html:not(.dark) .bg-brand-600:hover,
html:not(.dark) .bg-indigo-600:hover,
html:not(.dark) .bg-blue-600:hover {
  background-color: #3d3d3d !important;
  color: #FFFFFF !important;
}
html:not(.dark) .bg-brand-600 *,
html:not(.dark) .bg-brand-600 i,
html:not(.dark) .bg-indigo-600 *,
html:not(.dark) .bg-indigo-600 i,
html:not(.dark) .bg-blue-600 *,
html:not(.dark) .bg-blue-600 i {
  color: #FFFFFF !important;
}

/* Dropdowns in Light Mode */
html:not(.dark) #navNotificationDropdown {
  background-color: #FFFFFF !important;
  border: 1.5px solid var(--pal-tan) !important;
  box-shadow: 0 20px 25px -5px rgba(38, 38, 38, 0.15), 0 8px 10px -6px rgba(38, 38, 38, 0.1) !important;
}
html:not(.dark) #navNotificationDropdown .bg-slate-800\/90 {
  background-color: var(--pal-linen) !important;
  border-bottom-color: var(--pal-tan) !important;
}

/* =============================================================================
   3. DARK MODE POLISHED RULES (ZERO WHITE GAPS, WARM CHARCOAL)
   ============================================================================= */

html.dark {
  color-scheme: dark;
  background-color: #161616 !important;
  color: var(--pal-canvas) !important;
}

html.dark body {
  background-color: #161616 !important;
  color: var(--pal-canvas) !important;
}

html.dark main {
  background-color: transparent !important;
}

html.dark header {
  background-color: #242424 !important;
  border-bottom: 1px solid #333333 !important;
  color: var(--pal-canvas) !important;
}

html.dark footer {
  background-color: #161616 !important;
  border-top: 1px solid #2b2b2b !important;
  color: var(--pal-stone) !important;
}

/* Cards & Insets in Dark Mode */
html.dark .bg-slate-800 {
  background-color: #242424 !important;
  border-color: #383838 !important;
}

html.dark .bg-slate-900 {
  background-color: #1c1c1c !important;
  border-color: #333333 !important;
}

html.dark .bg-slate-950 {
  background-color: #141414 !important;
  border-color: #292929 !important;
}

html.dark input:not([type="checkbox"]):not([type="radio"]),
html.dark select,
html.dark textarea {
  background-color: #1c1c1c !important;
  border: 1px solid #3d3d3d !important;
  color: #FFFFFF !important;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: var(--pal-tan) !important;
  box-shadow: 0 0 0 2px rgba(215, 198, 180, 0.25) !important;
}

html.dark table thead {
  background-color: #1c1c1c !important;
  color: var(--pal-canvas) !important;
  border-bottom: 2px solid #383838 !important;
}

html.dark table thead th {
  color: var(--pal-stone) !important;
  font-weight: 800 !important;
}

html.dark table tbody tr {
  border-bottom: 1px solid #292929 !important;
}

html.dark table tbody tr:hover {
  background-color: #242424 !important;
}

html.dark table tbody td {
  color: var(--pal-canvas) !important;
}

html.dark table tbody td .text-white {
  color: #FFFFFF !important;
}

html.dark table tbody td .text-slate-200,
html.dark table tbody td .text-slate-300 {
  color: var(--pal-canvas) !important;
}

html.dark table tbody td .text-slate-400 {
  color: var(--pal-stone) !important;
}

/* Primary Action Buttons in Dark Mode */
html.dark .bg-brand-600,
html.dark .bg-indigo-600,
html.dark .bg-blue-600 {
  background-color: var(--pal-tan) !important;
  border-color: var(--pal-tan) !important;
  color: var(--pal-charcoal) !important;
}
html.dark .bg-brand-600:hover,
html.dark .bg-indigo-600:hover,
html.dark .bg-blue-600:hover {
  background-color: #ECE7E4 !important;
  color: var(--pal-charcoal) !important;
}
html.dark .bg-brand-600 *,
html.dark .bg-brand-600 i,
html.dark .bg-indigo-600 *,
html.dark .bg-indigo-600 i,
html.dark .bg-blue-600 *,
html.dark .bg-blue-600 i {
  color: var(--pal-charcoal) !important;
}

/* Gradients Neutralization */
html:not(.dark) .from-brand-600,
html:not(.dark) .from-indigo-600 {
  --tw-gradient-from: var(--pal-charcoal) !important;
  --tw-gradient-stops: var(--tw-gradient-from), #3d3d3d !important;
}
html.dark .from-brand-600,
html.dark .from-indigo-600 {
  --tw-gradient-from: var(--pal-tan) !important;
  --tw-gradient-stops: var(--tw-gradient-from), #c8b5a1 !important;
  color: var(--pal-charcoal) !important;
}
html.dark .from-brand-600 *,
html.dark .from-indigo-600 * {
  color: var(--pal-charcoal) !important;
}

/* =============================================================================
   4. ACTION QUEUE BANNER (100% CONTRAST GUARANTEE)
   ============================================================================= */

.action-queue-banner {
  background-color: var(--pal-linen) !important;
  border: 1.5px solid var(--pal-tan) !important;
  color: var(--pal-charcoal) !important;
}

.action-queue-icon-box {
  background-color: #ded7d1 !important;
  border: 1px solid var(--pal-stone) !important;
  color: var(--pal-charcoal) !important;
}

.action-queue-title {
  color: var(--pal-charcoal) !important;
  font-weight: 800 !important;
}

.action-queue-badge {
  background-color: var(--pal-charcoal) !important;
  color: var(--pal-canvas) !important;
}

.action-queue-desc {
  color: #4a4540 !important;
}

.action-queue-desc span {
  color: var(--pal-charcoal) !important;
}

.action-queue-btn {
  background-color: var(--pal-charcoal) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--pal-charcoal) !important;
}

.action-queue-btn * {
  color: #FFFFFF !important;
}

.action-queue-btn:hover {
  background-color: #3d3d3d !important;
  color: #FFFFFF !important;
}

html.dark .action-queue-banner {
  background-color: #262626 !important;
  border: 1.5px solid #444444 !important;
  color: var(--pal-canvas) !important;
}

html.dark .action-queue-icon-box {
  background-color: #333333 !important;
  border: 1px solid #555555 !important;
  color: var(--pal-tan) !important;
}

html.dark .action-queue-title {
  color: var(--pal-canvas) !important;
}

html.dark .action-queue-badge {
  background-color: var(--pal-tan) !important;
  color: var(--pal-charcoal) !important;
}

html.dark .action-queue-desc {
  color: var(--pal-stone) !important;
}

html.dark .action-queue-desc span {
  color: var(--pal-canvas) !important;
}

html.dark .action-queue-btn {
  background-color: var(--pal-tan) !important;
  color: var(--pal-charcoal) !important;
  border: 1px solid var(--pal-tan) !important;
}

html.dark .action-queue-btn * {
  color: var(--pal-charcoal) !important;
}

html.dark .action-queue-btn:hover {
  background-color: #ECE7E4 !important;
}

/* =============================================================================
   5. DASHBOARD FILTER TABS (ALL, ATTENTION, COMPLETED)
   ============================================================================= */

.filter-tab-inactive {
  background-color: #FFFFFF !important;
  border: 1.5px solid var(--pal-stone) !important;
  color: #4a4540 !important;
  font-weight: 700 !important;
}
.filter-tab-inactive:hover {
  background-color: var(--pal-linen) !important;
  color: var(--pal-charcoal) !important;
  border-color: var(--pal-charcoal) !important;
}
.filter-tab-inactive span:first-child {
  color: #4a4540 !important;
  font-weight: 700 !important;
}
.filter-tab-inactive .filter-tab-pill-all,
.filter-tab-inactive .filter-tab-pill-attention,
.filter-tab-inactive .filter-tab-pill-completed {
  background-color: var(--pal-linen) !important;
  color: var(--pal-charcoal) !important;
  border: 1px solid var(--pal-tan) !important;
}

.filter-tab-active-all {
  background-color: var(--pal-charcoal) !important;
  border: 1.5px solid var(--pal-charcoal) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 4px rgba(38, 38, 38, 0.15) !important;
}
.filter-tab-active-all span {
  color: #FFFFFF !important;
}
.filter-tab-active-all .filter-tab-pill-all {
  background-color: #3d3d3d !important;
  color: #FFFFFF !important;
  border: 1px solid #555555 !important;
}

.filter-tab-active-attention {
  background-color: #fef3c7 !important;
  border: 1.5px solid #d97706 !important;
  color: #78350f !important;
  box-shadow: 0 2px 4px rgba(217, 119, 6, 0.15) !important;
}
.filter-tab-active-attention span {
  color: #78350f !important;
  font-weight: 800 !important;
}
.filter-tab-active-attention .filter-tab-pill-attention {
  background-color: #d97706 !important;
  color: #FFFFFF !important;
}

.filter-tab-active-completed {
  background-color: #dcfce7 !important;
  border: 1.5px solid #16a34a !important;
  color: #14532d !important;
  box-shadow: 0 2px 4px rgba(22, 163, 74, 0.15) !important;
}
.filter-tab-active-completed span {
  color: #14532d !important;
  font-weight: 800 !important;
}
.filter-tab-active-completed .filter-tab-pill-completed {
  background-color: #16a34a !important;
  color: #FFFFFF !important;
}

/* Dark Mode Filter Tabs */
html.dark .filter-tab-inactive {
  background-color: #1f1f1f !important;
  color: var(--pal-stone) !important;
  border: 1.5px solid #383838 !important;
}
html.dark .filter-tab-inactive:hover {
  background-color: #292929 !important;
  color: #FFFFFF !important;
}
html.dark .filter-tab-inactive span:first-child {
  color: var(--pal-linen) !important;
}
html.dark .filter-tab-inactive .filter-tab-pill-all,
html.dark .filter-tab-inactive .filter-tab-pill-attention,
html.dark .filter-tab-inactive .filter-tab-pill-completed {
  background-color: #2b2b2b !important;
  color: var(--pal-tan) !important;
  border: 1px solid #444444 !important;
}

html.dark .filter-tab-active-all {
  background-color: var(--pal-tan) !important;
  color: var(--pal-charcoal) !important;
  border: 1.5px solid var(--pal-tan) !important;
}
html.dark .filter-tab-active-all span {
  color: var(--pal-charcoal) !important;
}
html.dark .filter-tab-active-all .filter-tab-pill-all {
  background-color: var(--pal-charcoal) !important;
  color: #FFFFFF !important;
}

html.dark .filter-tab-active-attention {
  background-color: #451a03 !important;
  color: #fef08a !important;
  border: 1.5px solid #b45309 !important;
}
html.dark .filter-tab-active-attention span {
  color: #fef08a !important;
}
html.dark .filter-tab-active-attention .filter-tab-pill-attention {
  background-color: #b45309 !important;
  color: #FFFFFF !important;
}

html.dark .filter-tab-active-completed {
  background-color: #052e16 !important;
  color: #bbf7d0 !important;
  border: 1.5px solid #15803d !important;
}
html.dark .filter-tab-active-completed span {
  color: #bbf7d0 !important;
}
html.dark .filter-tab-active-completed .filter-tab-pill-completed {
  background-color: #15803d !important;
  color: #FFFFFF !important;
}

/* =============================================================================
   6. CLIENT CARD BADGES & ACTION BUTTONS (NO BLANKS, HIGH CONTRAST)
   ============================================================================= */

/* Attention / Pending Badge on Client Card */
.client-badge-attention {
  background-color: #fef3c7 !important;
  color: #78350f !important;
  border: 1.5px solid #d97706 !important;
  box-shadow: 0 1px 2px rgba(217, 119, 6, 0.1) !important;
}
.client-badge-attention *,
.client-badge-attention i,
.client-badge-attention span {
  color: #78350f !important;
  font-weight: 800 !important;
}

html.dark .client-badge-attention {
  background-color: #451a03 !important;
  color: #fef08a !important;
  border: 1.5px solid #b45309 !important;
}
html.dark .client-badge-attention *,
html.dark .client-badge-attention i,
html.dark .client-badge-attention span {
  color: #fef08a !important;
  font-weight: 800 !important;
}

/* Intake Form Button (Top Right of Client Card - MUST BE 100% VISIBLE!) */
.client-card-btn-intake {
  background-color: #262626 !important;
  border: 1.5px solid #262626 !important;
  color: #FFFFFF !important;
}
.client-card-btn-intake *,
.client-card-btn-intake i,
.client-card-btn-intake span {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}
.client-card-btn-intake:hover {
  background-color: #3d3d3d !important;
  border-color: #3d3d3d !important;
}

html.dark .client-card-btn-intake {
  background-color: var(--pal-tan) !important;
  border: 1.5px solid var(--pal-tan) !important;
  color: var(--pal-charcoal) !important;
}
html.dark .client-card-btn-intake *,
html.dark .client-card-btn-intake i,
html.dark .client-card-btn-intake span {
  color: var(--pal-charcoal) !important;
  font-weight: 800 !important;
}
html.dark .client-card-btn-intake:hover {
  background-color: #ECE7E4 !important;
}

/* Status Badges */
.status-badge.status-submitted {
  background-color: #fef3c7 !important;
  color: #92400e !important;
  border: 1.5px solid #f59e0b !important;
  font-weight: 800 !important;
}
.status-badge.status-reviewed {
  background-color: #d1fae5 !important;
  color: #065f46 !important;
  border: 1.5px solid #10b981 !important;
  font-weight: 800 !important;
}
.status-badge.status-draft {
  background-color: var(--pal-linen) !important;
  color: var(--pal-charcoal) !important;
  border: 1.5px solid var(--pal-stone) !important;
  font-weight: 800 !important;
}

html.dark .status-badge.status-submitted {
  background-color: #78350f !important;
  color: #fef3c7 !important;
  border: 1.5px solid #d97706 !important;
  font-weight: 800 !important;
}
html.dark .status-badge.status-reviewed {
  background-color: #064e3b !important;
  color: #a7f3d0 !important;
  border: 1.5px solid #059669 !important;
  font-weight: 800 !important;
}
html.dark .status-badge.status-draft {
  background-color: #2b2b2b !important;
  color: var(--pal-linen) !important;
  border: 1.5px solid #444444 !important;
  font-weight: 800 !important;
}

/* Card Action Buttons (Tasks, Review, Vault, Copy, Portal, Delete) */
.card-action-btn-tasks {
  background-color: #FFFFFF !important;
  color: var(--pal-charcoal) !important;
  border: 1.5px solid var(--pal-stone) !important;
  font-weight: 700 !important;
}
.card-action-btn-tasks:hover {
  background-color: var(--pal-linen) !important;
  border-color: var(--pal-charcoal) !important;
}

html.dark .card-action-btn-tasks {
  background-color: #1f1f1f !important;
  color: var(--pal-canvas) !important;
  border: 1.5px solid #3d3d3d !important;
}
html.dark .card-action-btn-tasks:hover {
  background-color: #2b2b2b !important;
  border-color: var(--pal-tan) !important;
}

.card-action-btn-review {
  background-color: #f0fdf4 !important;
  color: #14532d !important;
  border: 1.5px solid #86efac !important;
  font-weight: 700 !important;
}
.card-action-btn-review:hover {
  background-color: #dcfce7 !important;
  border-color: #22c55e !important;
}

html.dark .card-action-btn-review {
  background-color: #052e16 !important;
  color: #bbf7d0 !important;
  border: 1.5px solid #166534 !important;
}
html.dark .card-action-btn-review:hover {
  background-color: #14532d !important;
}

.card-action-btn-vault {
  background-color: #eff6ff !important;
  color: #1e3a8a !important;
  border: 1.5px solid #93c5fd !important;
  font-weight: 700 !important;
}
.card-action-btn-vault:hover {
  background-color: #dbeafe !important;
  border-color: #3b82f6 !important;
}

html.dark .card-action-btn-vault {
  background-color: #0c2b5e !important;
  color: #bfdbfe !important;
  border: 1.5px solid #1d4ed8 !important;
}
html.dark .card-action-btn-vault:hover {
  background-color: #1e3a8a !important;
}

.card-action-btn-copy, .card-action-btn-portal {
  background-color: #FFFFFF !important;
  color: var(--pal-charcoal) !important;
  border: 1.5px solid var(--pal-stone) !important;
  font-weight: 700 !important;
}
.card-action-btn-copy:hover, .card-action-btn-portal:hover {
  background-color: var(--pal-linen) !important;
  border-color: var(--pal-charcoal) !important;
}

html.dark .card-action-btn-copy, html.dark .card-action-btn-portal {
  background-color: #1f1f1f !important;
  color: var(--pal-canvas) !important;
  border: 1.5px solid #3d3d3d !important;
}
html.dark .card-action-btn-copy:hover, html.dark .card-action-btn-portal:hover {
  background-color: #2b2b2b !important;
}

.card-action-btn-delete {
  background-color: #FFFFFF !important;
  color: #dc2626 !important;
  border: 1.5px solid var(--pal-stone) !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(38, 38, 38, 0.05) !important;
}
.card-action-btn-delete svg,
.card-action-btn-delete i {
  color: #dc2626 !important;
}
.card-action-btn-delete:hover {
  background-color: #fef2f2 !important;
  color: #b91c1c !important;
  border-color: #f87171 !important;
}
.card-action-btn-delete:hover svg,
.card-action-btn-delete:hover i {
  color: #b91c1c !important;
}

html.dark .card-action-btn-delete {
  background-color: #1f1f1f !important;
  color: #f87171 !important;
  border: 1.5px solid #3d3d3d !important;
}
html.dark .card-action-btn-delete svg,
html.dark .card-action-btn-delete i {
  color: #f87171 !important;
}
html.dark .card-action-btn-delete:hover {
  background-color: #2b2b2b !important;
  color: #ef4444 !important;
  border-color: #ef4444 !important;
}
html.dark .card-action-btn-delete:hover svg,
html.dark .card-action-btn-delete:hover i {
  color: #ef4444 !important;
}

/* Individual Square Action Delete Button (Matching Copy & Open Portal buttons) */
.card-btn-delete {
  background-color: #FFFFFF !important;
  color: #dc2626 !important;
  border: 1px solid #e5e0dc !important;
  box-shadow: 0 1px 3px rgba(38, 38, 38, 0.05) !important;
}
.card-btn-delete svg,
.card-btn-delete i {
  color: #dc2626 !important;
}
.card-btn-delete:hover {
  background-color: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}
.card-btn-delete:hover svg,
.card-btn-delete:hover i {
  color: #b91c1c !important;
}

html.dark .card-btn-delete {
  background-color: #1e293b !important;
  color: #f87171 !important;
  border: 1px solid rgba(51, 65, 85, 0.7) !important;
  box-shadow: none !important;
}
html.dark .card-btn-delete svg,
html.dark .card-btn-delete i {
  color: #f87171 !important;
}
html.dark .card-btn-delete:hover {
  background-color: #450a0a !important;
  border-color: #991b1b !important;
  color: #fca5a5 !important;
}
html.dark .card-btn-delete:hover svg,
html.dark .card-btn-delete:hover i {
  color: #fca5a5 !important;
}

/* =============================================================================
   7. QUESTIONNAIRE WIZARD HEADER & 6-STEP TABS
   ============================================================================= */

.hoja-wizard-header {
  background: linear-gradient(135deg, #262626 0%, #1c1c1c 100%) !important;
  border-bottom: 1.5px solid #383838 !important;
  color: var(--pal-canvas) !important;
}

.hoja-header-title {
  color: #FFFFFF !important;
}

.hoja-header-sub {
  color: var(--pal-tan) !important;
}

.hoja-badge-notice {
  background-color: var(--pal-tan) !important;
  color: var(--pal-charcoal) !important;
  border: 1px solid var(--pal-stone) !important;
  font-weight: 800 !important;
}

.hoja-header-step-count {
  color: var(--pal-linen) !important;
}

/* Inactive Wizard Tabs - Ultra Sharp on Light and Dark */
.wizard-step-tab.inactive-step {
  background-color: #FFFFFF !important;
  border: 1.5px solid var(--pal-stone) !important;
  color: var(--pal-charcoal) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}
.wizard-step-tab.inactive-step:hover {
  background-color: var(--pal-linen) !important;
  border-color: var(--pal-charcoal) !important;
}
.wizard-step-tab.inactive-step .tab-num-pill {
  background-color: var(--pal-linen) !important;
  color: var(--pal-charcoal) !important;
  border: 1px solid var(--pal-tan) !important;
}
.wizard-step-tab.inactive-step .tab-title {
  color: var(--pal-charcoal) !important;
  font-weight: 700 !important;
}
.wizard-step-tab.inactive-step .tab-sub {
  color: #55504a !important;
  font-weight: 500 !important;
}
.wizard-step-tab.inactive-step .tab-icon {
  color: #55504a !important;
}

/* Active Wizard Tab - Warm Tan Highlight */
.wizard-step-tab.active-step {
  background-color: var(--pal-tan) !important;
  border: 2px solid var(--pal-charcoal) !important;
  color: var(--pal-charcoal) !important;
  box-shadow: 0 2px 6px rgba(38, 38, 38, 0.15) !important;
}
.wizard-step-tab.active-step .tab-num-pill {
  background-color: var(--pal-charcoal) !important;
  color: #FFFFFF !important;
}
.wizard-step-tab.active-step .tab-title {
  color: var(--pal-charcoal) !important;
  font-weight: 800 !important;
}
.wizard-step-tab.active-step .tab-sub {
  color: var(--pal-charcoal) !important;
  font-weight: 600 !important;
}
.wizard-step-tab.active-step .tab-icon {
  color: var(--pal-charcoal) !important;
}

/* Dark Mode Wizard Tabs */
html.dark .wizard-step-tab.inactive-step {
  background-color: #1f1f1f !important;
  border: 1.5px solid #3d3d3d !important;
  color: var(--pal-canvas) !important;
}
html.dark .wizard-step-tab.inactive-step:hover {
  background-color: #2b2b2b !important;
  border-color: var(--pal-tan) !important;
}
html.dark .wizard-step-tab.inactive-step .tab-num-pill {
  background-color: #292929 !important;
  color: var(--pal-stone) !important;
  border: 1px solid #3d3d3d !important;
}
html.dark .wizard-step-tab.inactive-step .tab-title {
  color: var(--pal-canvas) !important;
}
html.dark .wizard-step-tab.inactive-step .tab-sub {
  color: var(--pal-stone) !important;
}
html.dark .wizard-step-tab.inactive-step .tab-icon {
  color: var(--pal-stone) !important;
}

html.dark .wizard-step-tab.active-step {
  background-color: var(--pal-tan) !important;
  border: 2px solid var(--pal-canvas) !important;
  color: var(--pal-charcoal) !important;
}
html.dark .wizard-step-tab.active-step .tab-num-pill {
  background-color: var(--pal-charcoal) !important;
  color: #FFFFFF !important;
}
html.dark .wizard-step-tab.active-step .tab-title {
  color: var(--pal-charcoal) !important;
  font-weight: 800 !important;
}
html.dark .wizard-step-tab.active-step .tab-sub {
  color: var(--pal-charcoal) !important;
  font-weight: 600 !important;
}
html.dark .wizard-step-tab.active-step .tab-icon {
  color: var(--pal-charcoal) !important;
}

/* =============================================================================
   8. CASE PREFIX BADGES (NO STARS, ULTRA-CLEAN TYPOGRAPHY)
   ============================================================================= */

.case-badge-fam { background-color: #f3e8ff !important; color: #6b21a8 !important; border: 1.5px solid #d8b4fe !important; }
.case-badge-aos { background-color: #e0f2fe !important; color: #0369a1 !important; border: 1.5px solid #7dd3fc !important; }
.case-badge-ead { background-color: #fef3c7 !important; color: #92400e !important; border: 1.5px solid #fcd34d !important; }
.case-badge-asy { background-color: #fef9c3 !important; color: #854d0e !important; border: 1.5px solid #fde047 !important; }
.case-badge-nat { background-color: #dcfce7 !important; color: #166534 !important; border: 1.5px solid #86efac !important; }
.case-badge-daca { background-color: #ccfbf1 !important; color: #115e59 !important; border: 1.5px solid #5eead4 !important; }
.case-badge-tps { background-color: #ffe4e6 !important; color: #9f1239 !important; border: 1.5px solid #fda4af !important; }
.case-badge-adm { background-color: var(--pal-linen) !important; color: var(--pal-charcoal) !important; border: 1.5px solid var(--pal-tan) !important; }

html.dark .case-badge-fam { background-color: #3b0764 !important; color: #e9d5ff !important; border: 1.5px solid #7e22ce !important; }
html.dark .case-badge-aos { background-color: #082f49 !important; color: #bae6fd !important; border: 1.5px solid #0284c7 !important; }
html.dark .case-badge-ead { background-color: #451a03 !important; color: #fde68a !important; border: 1.5px solid #b45309 !important; }
html.dark .case-badge-asy { background-color: #422006 !important; color: #fef08a !important; border: 1.5px solid #a16207 !important; }
html.dark .case-badge-nat { background-color: #052e16 !important; color: #bbf7d0 !important; border: 1.5px solid #15803d !important; }
html.dark .case-badge-daca { background-color: #042f2e !important; color: #99f6e4 !important; border: 1.5px solid #0f766e !important; }
html.dark .case-badge-tps { background-color: #4c0519 !important; color: #fecdd3 !important; border: 1.5px solid #be123c !important; }
html.dark .case-badge-adm { background-color: #2b2b2b !important; color: var(--pal-linen) !important; border: 1.5px solid #444444 !important; }

/* =============================================================================
   9. CLIENT PORTAL & DOCUMENT VAULT HEADERS (NO FLAG MOTIFS)
   ============================================================================= */

.portal-header-banner {
  background: linear-gradient(135deg, #262626 0%, #1f1f1f 100%) !important;
  border: 1.5px solid var(--pal-tan) !important;
  color: #FFFFFF !important;
}

.portal-header-banner * {
  color: #FFFFFF;
}

.portal-header-banner .text-slate-300,
.portal-header-banner .text-stone-300,
.portal-header-banner .text-brand-100 {
  color: var(--pal-linen) !important;
}

.portal-badge {
  background-color: var(--pal-tan) !important;
  color: var(--pal-charcoal) !important;
  border: 1px solid var(--pal-stone) !important;
  font-weight: 800 !important;
}

.portal-case-number {
  background-color: #383838 !important;
  color: var(--pal-tan) !important;
  border: 1px solid var(--pal-tan) !important;
}

/* =============================================================================
   10. SMOOTH TRANSITIONS
   ============================================================================= */

body, header, footer, .bg-slate-800, .bg-slate-900, table, input, select {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* =============================================================================
   11. ATTORNEY REVIEW MODAL (STRICT 5-COLOR PALETTE ENFORCEMENT)
   ============================================================================= */

#hojaViewerModal {
  background-color: rgba(38, 38, 38, 0.75) !important;
  backdrop-filter: blur(4px) !important;
}

#hojaViewerModal .hoja-review-modal {
  background-color: var(--pal-canvas) !important;
  border: 1.5px solid var(--pal-tan) !important;
  color: var(--pal-charcoal) !important;
}

#hojaViewerModal h1,
#hojaViewerModal h2,
#hojaViewerModal h3,
#hojaViewerModal h4 {
  color: var(--pal-charcoal) !important;
}

html.dark #hojaViewerModal .hoja-review-modal {
  background-color: #1a1a1a !important;
  border-color: #383838 !important;
  color: var(--pal-canvas) !important;
}

html.dark #hojaViewerModal h1,
html.dark #hojaViewerModal h2,
html.dark #hojaViewerModal h3,
html.dark #hojaViewerModal h4 {
  color: var(--pal-canvas) !important;
}

/* Legal Alert & Clean Risk Banners in Attorney Review */
.legal-alert-banner {
  background-color: var(--pal-linen) !important;
  border-color: var(--pal-charcoal) !important;
}
html:not(.dark) .legal-alert-banner,
html:not(.dark) .legal-alert-banner div,
html:not(.dark) .legal-alert-banner p,
html:not(.dark) .legal-alert-banner ul,
html:not(.dark) .legal-alert-banner li,
html:not(.dark) .legal-alert-banner strong,
html:not(.dark) .legal-alert-banner span:not(.badge-flag) {
  color: var(--pal-charcoal) !important;
}
html:not(.dark) .legal-alert-banner svg,
html:not(.dark) .legal-alert-banner i {
  color: var(--pal-charcoal) !important;
}
html:not(.dark) .legal-alert-banner .badge-flag {
  background-color: var(--pal-charcoal) !important;
  color: #FFFFFF !important;
}

html.dark .legal-alert-banner {
  background-color: #262626 !important;
  border-color: var(--pal-tan) !important;
}
html.dark .legal-alert-banner,
html.dark .legal-alert-banner div,
html.dark .legal-alert-banner p,
html.dark .legal-alert-banner ul,
html.dark .legal-alert-banner li,
html.dark .legal-alert-banner span:not(.badge-flag) {
  color: var(--pal-canvas) !important;
}
html.dark .legal-alert-banner strong {
  color: var(--pal-tan) !important;
}
html.dark .legal-alert-banner svg,
html.dark .legal-alert-banner i {
  color: var(--pal-tan) !important;
}
html.dark .legal-alert-banner .badge-flag {
  background-color: var(--pal-tan) !important;
  color: var(--pal-charcoal) !important;
}

html:not(.dark) .legal-clean-banner,
html:not(.dark) .legal-clean-banner * {
  color: var(--pal-charcoal) !important;
}

/* =============================================================================
   12. NO SCROLLBAR SLIDER UTILITY
   ============================================================================= */
.scrollbar-none {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}
.scrollbar-none::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* =============================================================================
   13. PORTAL SEARCH HIGHLIGHT PULSE
   ============================================================================= */
@keyframes portalFieldFlash {
  0% {
    box-shadow: 0 0 0 0 rgba(215, 198, 180, 0.9);
    background-color: rgba(215, 198, 180, 0.35);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(215, 198, 180, 0.4);
    background-color: rgba(215, 198, 180, 0.25);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(215, 198, 180, 0);
  }
}

.portal-field-highlight {
  animation: portalFieldFlash 2.5s ease-out;
  border-color: var(--pal-tan) !important;
  outline: 2px solid var(--pal-tan) !important;
}