/**
 * 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;
}

/* Global Light Mode High-Contrast Override for text-white */
html:not(.dark) .text-white:not(button):not(button *):not(label):not(label *):not([class*="bg-\[\#262626\]"]):not([class*="bg-\[\#262626\]"] *):not(.bg-brand-600 *):not(.bg-emerald-600 *):not(.bg-red-600 *):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) {
  color: var(--pal-charcoal) !important;
}

/* Force white text on elements that actually have dark charcoal background in Light Mode */
html:not(.dark) .bg-\[\#262626\],
html:not(.dark) .bg-\[\#262626\] *,
html:not(.dark) label.bg-\[\#262626\],
html:not(.dark) label.bg-\[\#262626\] *,
html:not(.dark) label.cursor-pointer.bg-\[\#262626\],
html:not(.dark) label.cursor-pointer.bg-\[\#262626\] *,
html:not(.dark) .\!text-white {
  color: #FFFFFF !important;
}

html:not(.dark) .text-slate-100,
html:not(.dark) .text-slate-200 {
  color: var(--pal-charcoal) !important;
}

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;
}

/* 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;
}

/* 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: #fff1f2 !important;
  color: #9f1239 !important;
  border: 1.5px solid #fecdd3 !important;
  font-weight: 700 !important;
}
.card-action-btn-delete:hover {
  background-color: #ffe4e6 !important;
  border-color: #f43f5e !important;
}

html.dark .card-action-btn-delete {
  background-color: #4c0519 !important;
  color: #fecdd3 !important;
  border: 1.5px solid #9f1239 !important;
}
html.dark .card-action-btn-delete:hover {
  background-color: #881337 !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;
}