/* ==========================================================================
   InstaHub & KaroPost — Unified High-Performance Design System
   WCAG 2.2 AAA Compliant Contrast & Modern Responsive Component System
   Light Mode & Dark Mode Token Specifications
   ========================================================================== */

/* 1. Global CSS Design Tokens */
:root {
  color-scheme: dark;
  --bg-primary: #090a0f;
  --bg-surface: #12141c;
  --bg-elevated: #1a1d28;
  --bg-hover: #222634;
  --bg-muted: #171923;

  --border-subtle: #1f2430;
  --border-medium: #2a2f42;
  --border-strong: #3b4259;

  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  --accent-indigo: #6366f1;
  --accent-indigo-hover: #4f46e5;
  --accent-indigo-bg: rgba(99, 102, 241, 0.15);
  --accent-indigo-text: #818cf8;

  --accent-emerald: #10b981;
  --accent-emerald-bg: rgba(16, 185, 129, 0.15);
  --accent-emerald-text: #34d399;

  --accent-purple: #a855f7;
  --accent-purple-bg: rgba(168, 85, 247, 0.15);
  --accent-purple-text: #c084fc;

  --accent-amber: #f59e0b;
  --accent-amber-bg: rgba(245, 158, 11, 0.15);
  --accent-amber-text: #fbbf24;

  --accent-rose: #f43f5e;
  --accent-rose-bg: rgba(244, 63, 94, 0.15);
  --accent-rose-text: #fb7185;

  --accent-cyan: #06b6d4;
  --accent-cyan-bg: rgba(6, 182, 212, 0.15);
  --accent-cyan-text: #38bdf8;

  --input-bg: #161924;
  --input-border: #2a2f42;
  --input-text: #f8fafc;
  --input-placeholder: #64748b;

  --table-header-bg: #12141d;
  --table-header-text: #94a3b8;
  --table-row-hover: #161a26;

  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.5);
  --shadow-elevated: 0 10px 30px -5px rgba(0, 0, 0, 0.6);
}

/* 2. Light Mode Design Tokens (WCAG 2.2 AAA Compliant) */
html.light,
html:not(.dark) {
  color-scheme: light;
  --bg-primary: #f8fafc;       /* Slate 50 neutral canvas */
  --bg-surface: #ffffff;       /* Pure white elevated cards */
  --bg-elevated: #f1f5f9;      /* Slate 100 panels/boxes */
  --bg-hover: #e2e8f0;         /* Slate 200 interaction states */
  --bg-muted: #f8fafc;

  --border-subtle: #e2e8f0;    /* Slate 200 crisp borders */
  --border-medium: #cbd5e1;    /* Slate 300 visible structure */
  --border-strong: #94a3b8;    /* Slate 400 high-emphasis borders */

  --text-primary: #0f172a;     /* Slate 900 ultra contrast */
  --text-secondary: #1e293b;   /* Slate 800 */
  --text-muted: #475569;       /* Slate 600 */
  --text-dim: #64748b;         /* Slate 500 */

  --accent-indigo: #4f46e5;
  --accent-indigo-hover: #4338ca;
  --accent-indigo-bg: #eef2ff;
  --accent-indigo-text: #3730a3;

  --accent-emerald: #059669;
  --accent-emerald-bg: #ecfdf5;
  --accent-emerald-text: #047857;

  --accent-purple: #7e22ce;
  --accent-purple-bg: #faf5ff;
  --accent-purple-text: #6b21a8;

  --accent-amber: #b45309;
  --accent-amber-bg: #fffbeb;
  --accent-amber-text: #92400e;

  --accent-rose: #be185d;
  --accent-rose-bg: #fff1f2;
  --accent-rose-text: #9f1239;

  --accent-cyan: #0369a1;
  --accent-cyan-bg: #f0f9ff;
  --accent-cyan-text: #0284c7;

  --input-bg: #ffffff;
  --input-border: #cbd5e1;
  --input-text: #0f172a;
  --input-placeholder: #64748b;

  --table-header-bg: #f1f5f9;
  --table-header-text: #334155;
  --table-row-hover: #f8fafc;

  --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
  --shadow-elevated: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   Light Mode Rules & Overrides
   ========================================================================== */

/* Canvas & Body */
html.light body,
html:not(.dark) body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* Universal Dark Borders Cleaned Up to Crisp Slate 200 in Light Mode */
html.light [class*="border-[#"],
html:not(.dark) [class*="border-[#"],
html.light .border-slate-800,
html:not(.dark) .border-slate-800,
html.light .border-slate-700,
html:not(.dark) .border-slate-700,
html.light .border-slate-700\/50,
html:not(.dark) .border-slate-700\/50,
html.light .border-slate-600,
html:not(.dark) .border-slate-600,
html.light .border-white\/5,
html:not(.dark) .border-white\/5,
html.light .border-white\/10,
html:not(.dark) .border-white\/10,
html.light .border-white\/20,
html:not(.dark) .border-white\/20 {
  border-color: #e2e8f0 !important;
}

/* Header & Navigation in Light Mode */
html.light header,
html:not(.dark) header {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.03) !important;
}

html.light header nav a,
html:not(.dark) header nav a {
  background-color: transparent !important;
  color: #334155 !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}

html.light header nav a.text-emerald-400,
html:not(.dark) header nav a.text-emerald-400,
html.light header nav a.text-indigo-400,
html:not(.dark) header nav a.text-indigo-400 {
  color: #334155 !important;
}

html.light header nav a:hover,
html:not(.dark) header nav a:hover {
  background-color: transparent !important;
  color: #4f46e5 !important;
}

html.light header a.group,
html:not(.dark) header a.group {
  background-color: transparent !important;
  border-color: transparent !important;
}

html.light header #themeToggleBtnLanding,
html:not(.dark) header #themeToggleBtnLanding,
html.light header #mobileMenuToggleBtn,
html:not(.dark) header #mobileMenuToggleBtn {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

html.light header #themeToggleBtnLanding:hover,
html:not(.dark) header #themeToggleBtnLanding:hover,
html.light header #mobileMenuToggleBtn:hover,
html:not(.dark) header #mobileMenuToggleBtn:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Primary Action Buttons (Gradients with Crisp White Text) */
html.light [class*="bg-gradient-to-r from-indigo-500"],
html:not(.dark) [class*="bg-gradient-to-r from-indigo-500"],
html.light a[class*="bg-gradient-to-r"],
html:not(.dark) a[class*="bg-gradient-to-r"],
html.light button[class*="bg-gradient-to-r"],
html:not(.dark) button[class*="bg-gradient-to-r"] {
  background-image: linear-gradient(to right, #4f46e5, #6366f1) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px 0 rgba(79, 70, 229, 0.35) !important;
}

html.light [class*="bg-gradient-to-r from-indigo-500"] *,
html:not(.dark) [class*="bg-gradient-to-r from-indigo-500"] *,
html.light a[class*="bg-gradient-to-r"] *,
html:not(.dark) a[class*="bg-gradient-to-r"] *,
html.light button[class*="bg-gradient-to-r"] *,
html:not(.dark) button[class*="bg-gradient-to-r"] * {
  color: #ffffff !important;
}

/* Secondary Action Buttons & Outline Buttons in Light Mode */
html.light a[class*="bg-[#1a1d28]"],
html:not(.dark) a[class*="bg-[#1a1d28]"],
html.light button[class*="bg-[#1a1d28]"],
html:not(.dark) button[class*="bg-[#1a1d28]"],
html.light #pricing a[class*="bg-[#1a1d28]"],
html:not(.dark) #pricing a[class*="bg-[#1a1d28]"] {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #1e293b !important;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.06) !important;
  font-weight: 700 !important;
}

html.light a[class*="bg-[#1a1d28]"]:hover,
html:not(.dark) a[class*="bg-[#1a1d28]"]:hover,
html.light button[class*="bg-[#1a1d28]"]:hover,
html:not(.dark) button[class*="bg-[#1a1d28]"]:hover,
html.light #pricing a[class*="bg-[#1a1d28]"]:hover,
html:not(.dark) #pricing a[class*="bg-[#1a1d28]"]:hover {
  background-color: #f5f3ff !important;
  border-color: #6366f1 !important;
  color: #4338ca !important;
}

/* Cards & Surface Containers (Pure White + Crisp Borders) */
html.light [class*="bg-[#12141c]"],
html:not(.dark) [class*="bg-[#12141c]"],
html.light [class*="bg-[#121520]"],
html:not(.dark) [class*="bg-[#121520]"],
html.light [class*="bg-[#0c0e15]"],
html:not(.dark) [class*="bg-[#0c0e15]"],
html.light [class*="bg-[#0d1017]"],
html:not(.dark) [class*="bg-[#0d1017]"],
html.light [class*="bg-[#181d2f]"],
html:not(.dark) [class*="bg-[#181d2f]"],
html.light [class*="bg-[#141724]"],
html:not(.dark) [class*="bg-[#141724]"],
html.light [class*="bg-[#111111]"],
html:not(.dark) [class*="bg-[#111111]"],
html.light [class*="bg-[#161924]"],
html:not(.dark) [class*="bg-[#161924]"],
html.light [class*="bg-[#161922]"],
html:not(.dark) [class*="bg-[#161922]"],
html.light [class*="bg-[#161a26]"],
html:not(.dark) [class*="bg-[#161a26]"],
html.light [class*="bg-[#131622]"],
html:not(.dark) [class*="bg-[#131622]"] {
  background-color: var(--bg-surface) !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04);
}

/* Secondary Panels, Sub-cards & Muted Boxes (Slate 100) */
html.light [class*="bg-[#1a1d28]"],
html:not(.dark) [class*="bg-[#1a1d28]"],
html.light [class*="bg-[#1a1f2e]"],
html:not(.dark) [class*="bg-[#1a1f2e]"],
html.light [class*="bg-[#161a28]"],
html:not(.dark) [class*="bg-[#161a28]"],
html.light [class*="bg-[#1d2232]"],
html:not(.dark) [class*="bg-[#1d2232]"],
html.light [class*="bg-[#262b3b]"],
html:not(.dark) [class*="bg-[#262b3b]"],
html.light [class*="bg-[#232a3c]"],
html:not(.dark) [class*="bg-[#232a3c]"],
html.light [class*="border-[#1f2430]"],
html:not(.dark) [class*="border-[#1f2430]"],
html.light .border-\[\#1f2430\],
html:not(.dark) .border-\[\#1f2430\],
html.light [class*="bg-[#1f2430]"],
html:not(.dark) [class*="bg-[#1f2430]"] {
  background-color: var(--bg-elevated) !important;
  border-color: #e2e8f0 !important;
}

/* Hero Preview Mockup Container & Inside Cards */
html.light .max-w-6xl.bg-\[\#12141c\],
html:not(.dark) .max-w-6xl.bg-\[\#12141c\] {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.08) !important;
}

html.light .max-w-6xl [class*="bg-[#1a1d28]"],
html:not(.dark) .max-w-6xl [class*="bg-[#1a1d28]"] {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* Neutralize Dark Gradients on Landing Sections */
html.light [class*="from-[#18121f]"],
html:not(.dark) [class*="from-[#18121f]"],
html.light [class*="from-[#101928]"],
html:not(.dark) [class*="from-[#101928]"],
html.light [class*="from-[#101d1c]"],
html:not(.dark) [class*="from-[#101d1c]"],
html.light [class*="from-[#1d1710]"],
html:not(.dark) [class*="from-[#1d1710]"],
html.light [class*="from-[#1b1224]"],
html:not(.dark) [class*="from-[#1b1224]"],
html.light [class*="from-[#101b24]"],
html:not(.dark) [class*="from-[#101b24]"],
html.light [class*="from-[#101b17]"],
html:not(.dark) [class*="from-[#101b17]"],
html.light [class*="from-[#101925]"],
html:not(.dark) [class*="from-[#101925]"],
html.light [class*="from-[#1b1612]"],
html:not(.dark) [class*="from-[#1b1612]"],
html.light [class*="from-[#161220]"],
html:not(.dark) [class*="from-[#161220]"],
html.light [class*="from-[#18121d]"],
html:not(.dark) [class*="from-[#18121d]"],
html.light [class*="from-[#121b19]"],
html:not(.dark) [class*="from-[#121b19]"],
html.light [class*="from-[#121a1f]"],
html:not(.dark) [class*="from-[#121a1f]"],
html.light [class*="from-[#181223]"],
html:not(.dark) [class*="from-[#181223]"],
html.light [class*="from-[#1f1812]"],
html:not(.dark) [class*="from-[#1f1812]"],
html.light [class*="from-[#121422]"],
html:not(.dark) [class*="from-[#121422]"],
html.light [class*="from-[#19151c]"],
html:not(.dark) [class*="from-[#19151c]"],
html.light [class*="from-[#121a22]"],
html:not(.dark) [class*="from-[#121a22]"],
html.light [class*="from-[#1d1218]"],
html:not(.dark) [class*="from-[#1d1218]"],
html.light [class*="from-[#1c1810]"],
html:not(.dark) [class*="from-[#1c1810]"],
html.light [class*="from-[#101b22]"],
html:not(.dark) [class*="from-[#101b22]"],
html.light [class*="from-[#101924]"],
html:not(.dark) [class*="from-[#101924]"],
html.light [class*="from-[#1a1224]"],
html:not(.dark) [class*="from-[#1a1224]"],
html.light [class*="from-[#101620]"],
html:not(.dark) [class*="from-[#101620]"],
html.light [class*="to-[#171b30]"],
html:not(.dark) [class*="to-[#171b30]"],
html.light [class*="to-[#16121f]"],
html:not(.dark) [class*="to-[#16121f]"],
html.light [class*="to-[#121520]"],
html:not(.dark) [class*="to-[#121520]"],
html.light [class*="to-[#12141c]"],
html:not(.dark) [class*="to-[#12141c]"],
html.light [class*="to-[#0c0e15]"],
html:not(.dark) [class*="to-[#0c0e15]"],
html.light [class*="to-[#181d2f]"],
html:not(.dark) [class*="to-[#181d2f]"],
html.light [class*="bg-gradient-to-br"][class*="to-[#12141c]"],
html:not(.dark) [class*="bg-gradient-to-br"][class*="to-[#12141c]"] {
  background-image: none !important;
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
}

/* Featured Pro Plan Pricing Card */
html.light #pricing [class*="from-indigo-950"],
html:not(.dark) #pricing [class*="from-indigo-950"] {
  background-image: linear-gradient(to bottom, #f5f3ff, #ffffff) !important;
  border-color: #6366f1 !important;
  box-shadow: 0 12px 30px -5px rgba(99, 102, 241, 0.2) !important;
}

/* CTA Banner Box */
html.light [class*="from-indigo-900\/40"],
html:not(.dark) [class*="from-indigo-900\/40"] {
  background-image: linear-gradient(135deg, #eef2ff, #fdf2f8) !important;
  border-color: #c7d2fe !important;
}

html.light [class*="from-indigo-900\/40"] h2,
html:not(.dark) [class*="from-indigo-900\/40"] h2 {
  color: #1e1b4b !important;
}

html.light [class*="from-indigo-900\/40"] p,
html:not(.dark) [class*="from-indigo-900\/40"] p {
  color: #4338ca !important;
}

/* Typography Hierarchy in Light Mode */
html.light h1:not([class*="text-transparent"]),
html:not(.dark) h1:not([class*="text-transparent"]),
html.light h2:not([class*="text-transparent"]),
html:not(.dark) h2:not([class*="text-transparent"]),
html.light h3,
html:not(.dark) h3,
html.light .text-white,
html:not(.dark) .text-white {
  color: var(--text-primary) !important; /* Deep Obsidian Slate #0f172a */
}

/* Protect white text on colored/gradient badges and primary buttons */
html.light [class*="bg-gradient-to-r"] .text-white,
html:not(.dark) [class*="bg-gradient-to-r"] .text-white,
html.light .bg-indigo-600 .text-white,
html:not(.dark) .bg-indigo-600 .text-white,
html.light .bg-indigo-500 .text-white,
html:not(.dark) .bg-indigo-500 .text-white,
html.light button.bg-indigo-500,
html:not(.dark) button.bg-indigo-500,
html.light button.bg-indigo-600,
html:not(.dark) button.bg-indigo-600,
html.light [class*="bg-gradient-to-r"] span,
html:not(.dark) [class*="bg-gradient-to-r"] span {
  color: #ffffff !important;
}

/* Hero Gradient Subtitle */
html.light .bg-clip-text,
html:not(.dark) .bg-clip-text {
  background-image: linear-gradient(to right, #4338ca, #7c3aed, #db2777) !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
}

/* Light Mode Sticky Header Blur & Background */
html.light nav.backdrop-blur-md,
html:not(.dark) nav.backdrop-blur-md,
html.light header.backdrop-blur-md,
html:not(.dark) header.backdrop-blur-md {
  background-color: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
}

/* Badge Overrides for Light Mode */
html.light span[class*="bg-sky-500/10"],
html:not(.dark) span[class*="bg-sky-500/10"],
html.light [class*="text-sky-300"],
html:not(.dark) [class*="text-sky-300"],
html.light [class*="text-sky-400"],
html:not(.dark) [class*="text-sky-400"] {
  color: #0369a1 !important;
}

html.light span[class*="bg-emerald-500/10"],
html:not(.dark) span[class*="bg-emerald-500/10"],
html.light [class*="text-emerald-300"],
html:not(.dark) [class*="text-emerald-300"],
html.light [class*="text-emerald-400"],
html:not(.dark) [class*="text-emerald-400"] {
  color: #047857 !important;
}

html.light span[class*="bg-amber-500/10"],
html:not(.dark) span[class*="bg-amber-500/10"],
html.light [class*="text-amber-300"],
html:not(.dark) [class*="text-amber-300"],
html.light [class*="text-amber-400"],
html:not(.dark) [class*="text-amber-400"] {
  color: #b45309 !important;
}

html.light span[class*="bg-purple-500/10"],
html:not(.dark) span[class*="bg-purple-500/10"],
html.light [class*="text-purple-300"],
html:not(.dark) [class*="text-purple-300"],
html.light [class*="text-purple-400"],
html:not(.dark) [class*="text-purple-400"] {
  color: #6d28d9 !important;
}

html.light span[class*="bg-pink-500/10"],
html:not(.dark) span[class*="bg-pink-500/10"],
html.light [class*="text-pink-300"],
html:not(.dark) [class*="text-pink-300"],
html.light [class*="text-pink-400"],
html:not(.dark) [class*="text-pink-400"] {
  color: #be185d !important;
}

/* Paragraphs & Reading Text */
html.light p,
html:not(.dark) p,
html.light .text-slate-300,
html:not(.dark) .text-slate-300,
html.light .text-slate-400,
html:not(.dark) .text-slate-400 {
  color: #334155 !important; /* Slate 700 - sharp readable contrast */
}

html.light .text-slate-200,
html:not(.dark) .text-slate-200 {
  color: #1e293b !important; /* Slate 800 */
}

html.light .text-slate-500,
html:not(.dark) .text-slate-500 {
  color: #64748b !important; /* Slate 500 */
}

/* Deep High-Contrast Accent Text Colors in Light Mode (WCAG AAA >= 5.0:1) */
html.light .text-emerald-400,
html:not(.dark) .text-emerald-400,
html.light .text-emerald-300,
html:not(.dark) .text-emerald-300 {
  color: #047857 !important; /* Deep Emerald 700 (5.4:1) */
}

html.light .text-amber-400,
html:not(.dark) .text-amber-400,
html.light .text-amber-300,
html:not(.dark) .text-amber-300,
html.light .text-yellow-400,
html:not(.dark) .text-yellow-400 {
  color: #b45309 !important; /* Deep Amber 700 (4.8:1) */
}

html.light .text-indigo-400,
html:not(.dark) .text-indigo-400,
html.light .text-indigo-300,
html:not(.dark) .text-indigo-300 {
  color: #4338ca !important; /* Deep Indigo 700 (6.2:1) */
}

html.light .text-pink-400,
html:not(.dark) .text-pink-400,
html.light .text-pink-300,
html:not(.dark) .text-pink-300,
html.light .text-rose-400,
html:not(.dark) .text-rose-400 {
  color: #be185d !important; /* Deep Pink 700 (5.8:1) */
}

html.light .text-sky-400,
html:not(.dark) .text-sky-400,
html.light .text-sky-300,
html:not(.dark) .text-sky-300,
html.light .text-cyan-400,
html:not(.dark) .text-cyan-400 {
  color: #0369a1 !important; /* Deep Sky 700 (5.5:1) */
}

html.light .text-purple-400,
html:not(.dark) .text-purple-400,
html.light .text-purple-300,
html:not(.dark) .text-purple-300 {
  color: #6b21a8 !important; /* Deep Purple 700 (6.5:1) */
}

/* Badges & Accent Chips */
html.light [class*="bg-indigo-500/10"],
html:not(.dark) [class*="bg-indigo-500/10"] {
  background-color: #eef2ff !important;
  border-color: #c7d2fe !important;
  color: #3730a3 !important;
}

html.light [class*="bg-emerald-500/10"],
html:not(.dark) [class*="bg-emerald-500/10"] {
  background-color: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #047857 !important;
}

html.light [class*="bg-pink-500/10"],
html:not(.dark) [class*="bg-pink-500/10"] {
  background-color: #fdf2f8 !important;
  border-color: #fbcfe8 !important;
  color: #be185d !important;
}

html.light [class*="bg-amber-500/10"],
html:not(.dark) [class*="bg-amber-500/10"] {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
  color: #b45309 !important;
}

html.light [class*="bg-purple-500/10"],
html:not(.dark) [class*="bg-purple-500/10"] {
  background-color: #faf5ff !important;
  border-color: #e9d5ff !important;
  color: #6b21a8 !important;
}

html.light [class*="bg-sky-500/10"],
html:not(.dark) [class*="bg-sky-500/10"] {
  background-color: #f0f9ff !important;
  border-color: #bae6fd !important;
  color: #0369a1 !important;
}

/* Form Inputs, Selects & Textareas */
html.light input:not([type="checkbox"]):not([type="radio"]),
html:not(.dark) input:not([type="checkbox"]):not([type="radio"]),
html.light textarea,
html:not(.dark) textarea,
html.light select,
html:not(.dark) select,
html.light #contactForm [class*="bg-[#1a1d28]"],
html:not(.dark) #contactForm [class*="bg-[#1a1d28]"] {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04) !important;
}

html.light #contactForm label,
html:not(.dark) #contactForm label {
  color: #1e293b !important;
  font-weight: 700 !important;
}

html.light input:focus,
html:not(.dark) input:focus,
html.light textarea:focus,
html:not(.dark) textarea:focus,
html.light select:focus,
html:not(.dark) select:focus {
  border-color: #4f46e5 !important;
  outline: 2px solid rgba(79, 70, 229, 0.2) !important;
}

html.light input::placeholder,
html:not(.dark) input::placeholder,
html.light textarea::placeholder,
html:not(.dark) textarea::placeholder {
  color: #64748b !important; /* Crisp Slate 500 placeholder (meets WCAG AA) */
}

/* Mobile Nav Drawer in Light Mode */
html.light #mobileNavDrawer,
html:not(.dark) #mobileNavDrawer {
  background-color: rgba(255, 255, 255, 0.98) !important;
  border-color: #e2e8f0 !important;
}

html.light #mobileNavDrawer a,
html:not(.dark) #mobileNavDrawer a {
  background-color: #f8fafc !important;
  color: #1e293b !important;
  border-color: #e2e8f0 !important;
}

/* Details FAQ dropdowns */
html.light details,
html:not(.dark) details {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html.light details summary,
html:not(.dark) details summary {
  color: #0f172a !important;
}

/* Footer */
html.light footer,
html:not(.dark) footer {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
}

html.light footer [class*="bg-[#131622]"],
html:not(.dark) footer [class*="bg-[#131622]"] {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* Prevent Fixed Header from Overlapping Sections on Anchor Clicks */
html {
  scroll-padding-top: 90px;
}

section[id] {
  scroll-margin-top: 90px;
}

/* Guarantee Login Button has High Contrast White Text in ALL Views */
header a[href="/login"],
header a[href="/login"]:hover,
header a[href="/login"] span,
header a[href="/login"] i,
header a[href="/login"] svg {
  color: #ffffff !important;
  background-image: linear-gradient(135deg, #4f46e5, #6366f1) !important;
}

/* Guarantee Mockup Cards in Light Mode */
html.light .max-w-6xl,
html:not(.dark) .max-w-6xl {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html.light .max-w-6xl .bg-slate-50,
html:not(.dark) .max-w-6xl .bg-slate-50 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* ==========================================================================
   Comprehensive Dashboard (app.html) Light Mode Contrast Fixes
   ========================================================================== */

/* 1. Universal Slate Text Contrast in Light Mode */
html.light .text-slate-100,
html:not(.dark) .text-slate-100,
html.light .text-slate-50,
html:not(.dark) .text-slate-50,
html.light .text-gray-100,
html:not(.dark) .text-gray-100,
html.light .text-zinc-100,
html:not(.dark) .text-zinc-100 {
  color: #0f172a !important; /* Deep Obsidian Slate 900 */
}

html.light .text-slate-200,
html:not(.dark) .text-slate-200,
html.light .text-gray-200,
html:not(.dark) .text-gray-200 {
  color: #1e293b !important; /* Slate 800 */
}

html.light .text-slate-300,
html:not(.dark) .text-slate-300,
html.light .text-gray-300,
html:not(.dark) .text-gray-300 {
  color: #334155 !important; /* Slate 700 */
}

/* Ensure all headings in cards/modals are deep black in light mode */
html.light h1, html.light h2, html.light h3, html.light h4, html.light h5, html.light h6,
html:not(.dark) h1, html:not(.dark) h2, html:not(.dark) h3, html:not(.dark) h4, html:not(.dark) h5, html:not(.dark) h6 {
  color: #0f172a !important;
}

/* 2. Sidebar Navigation Tabs in Light Mode */
html.light .nav-tab.bg-indigo-500\/10,
html:not(.dark) .nav-tab.bg-indigo-500\/10,
html.light button[id^="tabBtn-"].bg-indigo-500\/10,
html:not(.dark) button[id^="tabBtn-"].bg-indigo-500\/10 {
  background-color: #4f46e5 !important;
  color: #ffffff !important;
  border-color: #4338ca !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25) !important;
}

html.light .nav-tab.bg-indigo-500\/10 *,
html:not(.dark) .nav-tab.bg-indigo-500\/10 *,
html.light button[id^="tabBtn-"].bg-indigo-500\/10 *,
html:not(.dark) button[id^="tabBtn-"].bg-indigo-500\/10 * {
  color: #ffffff !important;
}

html.light .nav-tab:not(.bg-indigo-500\/10),
html:not(.dark) .nav-tab:not(.bg-indigo-500\/10) {
  color: #334155 !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

html.light .nav-tab:not(.bg-indigo-500\/10):hover,
html:not(.dark) .nav-tab:not(.bg-indigo-500\/10):hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* 3. Post Creation Mode Switch (Instant vs Schedule) */
html.light #btnModeNow.bg-indigo-500\/20,
html:not(.dark) #btnModeNow.bg-indigo-500\/20,
html.light #btnModeSchedule.bg-indigo-500\/20,
html:not(.dark) #btnModeSchedule.bg-indigo-500\/20 {
  background-color: #4f46e5 !important;
  color: #ffffff !important;
  border-color: #4338ca !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25) !important;
}

html.light #btnModeNow:not(.bg-indigo-500\/20),
html:not(.dark) #btnModeNow:not(.bg-indigo-500\/20),
html.light #btnModeSchedule:not(.bg-indigo-500\/20),
html:not(.dark) #btnModeSchedule:not(.bg-indigo-500\/20) {
  background-color: #ffffff !important;
  color: #475569 !important;
  border: 1.5px solid #cbd5e1 !important;
  font-weight: 500 !important;
}

/* 4. Team Tab & Cyan Elements */
html.light .text-cyan-400,
html:not(.dark) .text-cyan-400,
html.light .text-cyan-300,
html:not(.dark) .text-cyan-300 {
  color: #0e7490 !important; /* Deep Cyan 700 */
}

html.light button[class*="text-cyan-400"],
html:not(.dark) button[class*="text-cyan-400"],
html.light button[class*="border-cyan-500"],
html:not(.dark) button[class*="border-cyan-500"] {
  background-color: #0891b2 !important;
  color: #ffffff !important;
  border-color: #0e7490 !important;
  box-shadow: 0 2px 6px rgba(8, 145, 178, 0.25) !important;
}

html.light button[class*="text-cyan-400"] *,
html:not(.dark) button[class*="text-cyan-400"] * {
  color: #ffffff !important;
}

/* 5. Drag & Drop File Upload Box & Helper Text */
html.light #mediaUploadBox,
html:not(.dark) #mediaUploadBox {
  border-color: #94a3b8 !important;
  background-color: #f8fafc !important;
}

html.light #mediaUploadBox:hover,
html:not(.dark) #mediaUploadBox:hover {
  border-color: #4f46e5 !important;
  background-color: #f5f3ff !important;
}

html.light #charCount,
html:not(.dark) #charCount {
  color: #475569 !important;
  font-weight: 600 !important;
}

/* 6. Action Icons & Status in Cards */
html.light button[onclick*="deleteAccount"],
html:not(.dark) button[onclick*="deleteAccount"] {
  color: #64748b !important;
}

html.light button[onclick*="deleteAccount"]:hover,
html:not(.dark) button[onclick*="deleteAccount"]:hover {
  color: #ef4444 !important;
  background-color: #fee2e2 !important;
}

html.light span.text-emerald-400,
html:not(.dark) span.text-emerald-400 {
  color: #047857 !important; /* Deep emerald */
  font-weight: 600 !important;
}

html.light .text-sky-400,
html:not(.dark) .text-sky-400 {
  color: #0369a1 !important; /* Sky 700 */
}

html.light .text-pink-400,
html:not(.dark) .text-pink-400 {
  color: #be185d !important; /* Pink 700 */
}

html.light .text-purple-400,
html:not(.dark) .text-purple-400 {
  color: #7e22ce !important; /* Purple 700 */
}

/* Teal & Team Tab Enhancements in Light Mode */
html.light #addTeamMemberBtn,
html:not(.dark) #addTeamMemberBtn {
  background-color: #0d9488 !important; /* Rich Teal 600 */
  color: #ffffff !important;
  border-color: #0f766e !important;
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25) !important;
}

html.light #addTeamMemberBtn *,
html:not(.dark) #addTeamMemberBtn * {
  color: #ffffff !important;
}

html.light .text-teal-300,
html:not(.dark) .text-teal-300,
html.light .text-teal-400,
html:not(.dark) .text-teal-400 {
  color: #0f766e !important; /* Deep Teal 700 */
  font-weight: 700 !important;
}

html.light .bg-teal-500\/15,
html:not(.dark) .bg-teal-500\/15 {
  background-color: #ccfbf1 !important; /* Teal 100 */
  border-color: #5eead4 !important;
}

/* Modals High Contrast in Light Mode */
html.light [id*="Modal"] > div,
html:not(.dark) [id*="Modal"] > div {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html.light [id*="Modal"] h2,
html.light [id*="Modal"] h3,
html.light [id*="Modal"] h4,
html:not(.dark) [id*="Modal"] h2,
html:not(.dark) [id*="Modal"] h3,
html:not(.dark) [id*="Modal"] h4 {
  color: #0f172a !important;
}


/* ==================== استایل‌های مودال مدیریت دسترسی در لایت‌مود ==================== */
html.light #adminEditUserModal .bg-\[\#12141c\] {
  background-color: #ffffff !important;
}
html.light #adminEditUserModal .bg-\[\#161924\] {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
html.light #adminEditUserModal .bg-\[\#1a1d28\]\/60,
html.light #adminEditUserModal .bg-\[\#1a1d28\]\/70,
html.light #adminEditUserModal .bg-\[\#1a1d28\] {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
html.light #adminEditUserModal .border-\[\#1f2430\],
html.light #adminEditUserModal .border-\[\#2a2f42\] {
  border-color: #e2e8f0 !important;
}
html.light #adminEditUserModal .text-white {
  color: #0f172a !important;
}
html.light #adminEditUserModal .text-slate-400 {
  color: #475569 !important;
}
html.light #adminEditUserModal .text-slate-300 {
  color: #334155 !important;
}
html.light #adminEditUserModal input[type="text"],
html.light #adminEditUserModal input[type="password"],
html.light #adminEditUserModal select {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
html.light #adminEditUserModal .bg-indigo-950\/20 {
  background-color: #eef2ff !important;
  border-color: #c7d2fe !important;
}
html.light #adminEditUserModal .text-indigo-300,
html.light #adminEditUserModal .text-indigo-400 {
  color: #4338ca !important;
}
html.light #adminEditUserModal .ws-assignment-row {
  background-color: #ffffff !important;
  border-color: #99f6e4 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
html.light #adminEditUserModal .ws-assignment-row .bg-\[\#161924\] {
  background-color: #f0fdfa !important;
  border-color: #ccfbf1 !important;
}
html.light #adminEditUserModal .text-teal-300 {
  color: #0f766e !important;
}

/* Comprehensive Full Site Light Mode Catch-all for Dark Colors */
html.light [class*="bg-[#05070a]"],
html:not(.dark) [class*="bg-[#05070a]"],
html.light [class*="bg-[#080808]"],
html:not(.dark) [class*="bg-[#080808]"],
html.light [class*="bg-[#090909]"],
html:not(.dark) [class*="bg-[#090909]"],
html.light [class*="bg-[#0b1329]"],
html:not(.dark) [class*="bg-[#0b1329]"],
html.light [class*="bg-[#0c0c0c]"],
html:not(.dark) [class*="bg-[#0c0c0c]"],
html.light [class*="bg-[#0d0f17]"],
html:not(.dark) [class*="bg-[#0d0f17]"],
html.light [class*="bg-[#0e1017]"],
html:not(.dark) [class*="bg-[#0e1017]"],
html.light [class*="bg-[#0e1621]"],
html:not(.dark) [class*="bg-[#0e1621]"],
html.light [class*="bg-[#0f1115]"],
html:not(.dark) [class*="bg-[#0f1115]"],
html.light [class*="bg-[#0f1118]"],
html:not(.dark) [class*="bg-[#0f1118]"],
html.light [class*="bg-[#0f1d17]"],
html:not(.dark) [class*="bg-[#0f1d17]"],
html.light [class*="bg-[#10121a]"],
html:not(.dark) [class*="bg-[#10121a]"],
html.light [class*="bg-[#10131d]"],
html:not(.dark) [class*="bg-[#10131d]"],
html.light [class*="bg-[#10141f]"],
html:not(.dark) [class*="bg-[#10141f]"],
html.light [class*="bg-[#101423]"],
html:not(.dark) [class*="bg-[#101423]"],
html.light [class*="bg-[#111317]"],
html:not(.dark) [class*="bg-[#111317]"],
html.light [class*="bg-[#111318]"],
html:not(.dark) [class*="bg-[#111318]"],
html.light [class*="bg-[#11131a]"],
html:not(.dark) [class*="bg-[#11131a]"],
html.light [class*="bg-[#11131c]"],
html:not(.dark) [class*="bg-[#11131c]"],
html.light [class*="bg-[#12141a]"],
html:not(.dark) [class*="bg-[#12141a]"],
html.light [class*="bg-[#12151f]"],
html:not(.dark) [class*="bg-[#12151f]"],
html.light [class*="bg-[#121722]"],
html:not(.dark) [class*="bg-[#121722]"],
html.light [class*="bg-[#121826]"],
html:not(.dark) [class*="bg-[#121826]"],
html.light [class*="bg-[#141414]"],
html:not(.dark) [class*="bg-[#141414]"],
html.light [class*="bg-[#14151b]"],
html:not(.dark) [class*="bg-[#14151b]"],
html.light [class*="bg-[#14161b]"],
html:not(.dark) [class*="bg-[#14161b]"],
html.light [class*="bg-[#141721]"],
html:not(.dark) [class*="bg-[#141721]"],
html.light [class*="bg-[#141722]"],
html:not(.dark) [class*="bg-[#141722]"],
html.light [class*="bg-[#141824]"],
html:not(.dark) [class*="bg-[#141824]"],
html.light [class*="bg-[#141829]"],
html:not(.dark) [class*="bg-[#141829]"],
html.light [class*="bg-[#141b2a]"],
html:not(.dark) [class*="bg-[#141b2a]"],
html.light [class*="bg-[#141e2b]"],
html:not(.dark) [class*="bg-[#141e2b]"],
html.light [class*="bg-[#151821]"],
html:not(.dark) [class*="bg-[#151821]"],
html.light [class*="bg-[#151822]"],
html:not(.dark) [class*="bg-[#151822]"],
html.light [class*="bg-[#151824]"],
html:not(.dark) [class*="bg-[#151824]"],
html.light [class*="bg-[#151924]"],
html:not(.dark) [class*="bg-[#151924]"],
html.light [class*="bg-[#161616]"],
html:not(.dark) [class*="bg-[#161616]"],
html.light [class*="bg-[#161820]"],
html:not(.dark) [class*="bg-[#161820]"],
html.light [class*="bg-[#161a29]"],
html:not(.dark) [class*="bg-[#161a29]"],
html.light [class*="bg-[#16212e]"],
html:not(.dark) [class*="bg-[#16212e]"],
html.light [class*="bg-[#171a22]"],
html:not(.dark) [class*="bg-[#171a22]"],
html.light [class*="bg-[#171a24]"],
html:not(.dark) [class*="bg-[#171a24]"],
html.light [class*="bg-[#171a26]"],
html:not(.dark) [class*="bg-[#171a26]"],
html.light [class*="bg-[#17212b]"],
html:not(.dark) [class*="bg-[#17212b]"],
html.light [class*="bg-[#181818]"],
html:not(.dark) [class*="bg-[#181818]"],
html.light [class*="bg-[#181a20]"],
html:not(.dark) [class*="bg-[#181a20]"],
html.light [class*="bg-[#181a24]"],
html:not(.dark) [class*="bg-[#181a24]"],
html.light [class*="bg-[#181b26]"],
html:not(.dark) [class*="bg-[#181b26]"],
html.light [class*="bg-[#181c28]"],
html:not(.dark) [class*="bg-[#181c28]"],
html.light [class*="bg-[#181c2a]"],
html:not(.dark) [class*="bg-[#181c2a]"],
html.light [class*="bg-[#181c2b]"],
html:not(.dark) [class*="bg-[#181c2b]"],
html.light [class*="bg-[#181d2a]"],
html:not(.dark) [class*="bg-[#181d2a]"],
html.light [class*="bg-[#181d2c]"],
html:not(.dark) [class*="bg-[#181d2c]"],
html.light [class*="bg-[#181d2e]"],
html:not(.dark) [class*="bg-[#181d2e]"],
html.light [class*="bg-[#182533]"],
html:not(.dark) [class*="bg-[#182533]"],
html.light [class*="bg-[#191d2a]"],
html:not(.dark) [class*="bg-[#191d2a]"],
html.light [class*="bg-[#1a1828]"],
html:not(.dark) [class*="bg-[#1a1828]"],
html.light [class*="bg-[#1a1829]"],
html:not(.dark) [class*="bg-[#1a1829]"],
html.light [class*="bg-[#1a1a1a]"],
html:not(.dark) [class*="bg-[#1a1a1a]"],
html.light [class*="bg-[#1a1c22]"],
html:not(.dark) [class*="bg-[#1a1c22]"],
html.light [class*="bg-[#1a1d26]"],
html:not(.dark) [class*="bg-[#1a1d26]"],
html.light [class*="bg-[#1a1e2b]"],
html:not(.dark) [class*="bg-[#1a1e2b]"],
html.light [class*="bg-[#1a2035]"],
html:not(.dark) [class*="bg-[#1a2035]"],
html.light [class*="bg-[#1a2233]"],
html:not(.dark) [class*="bg-[#1a2233]"],
html.light [class*="bg-[#1a233a]"],
html:not(.dark) [class*="bg-[#1a233a]"],
html.light [class*="bg-[#1b1b1b]"],
html:not(.dark) [class*="bg-[#1b1b1b]"],
html.light [class*="bg-[#1b2234]"],
html:not(.dark) [class*="bg-[#1b2234]"],
html.light [class*="bg-[#1c1f26]"],
html:not(.dark) [class*="bg-[#1c1f26]"],
html.light [class*="bg-[#1c202e]"],
html:not(.dark) [class*="bg-[#1c202e]"],
html.light [class*="bg-[#1c2232]"],
html:not(.dark) [class*="bg-[#1c2232]"],
html.light [class*="bg-[#1c2233]"],
html:not(.dark) [class*="bg-[#1c2233]"],
html.light [class*="bg-[#1e1e1e]"],
html:not(.dark) [class*="bg-[#1e1e1e]"],
html.light [class*="bg-[#1e2330]"],
html:not(.dark) [class*="bg-[#1e2330]"],
html.light [class*="bg-[#1e2333]"],
html:not(.dark) [class*="bg-[#1e2333]"],
html.light [class*="bg-[#1e2338]"],
html:not(.dark) [class*="bg-[#1e2338]"],
html.light [class*="bg-[#1e233a]"],
html:not(.dark) [class*="bg-[#1e233a]"],
html.light [class*="bg-[#1e2433]"],
html:not(.dark) [class*="bg-[#1e2433]"],
html.light [class*="bg-[#1e2438]"],
html:not(.dark) [class*="bg-[#1e2438]"],
html.light [class*="bg-[#1f1624]"],
html:not(.dark) [class*="bg-[#1f1624]"],
html.light [class*="bg-[#1f2432]"],
html:not(.dark) [class*="bg-[#1f2432]"],
html.light [class*="bg-[#1f2434]"],
html:not(.dark) [class*="bg-[#1f2434]"],
html.light [class*="bg-[#1f2438]"],
html:not(.dark) [class*="bg-[#1f2438]"],
html.light [class*="bg-[#201115]"],
html:not(.dark) [class*="bg-[#201115]"],
html.light [class*="bg-[#202020]"],
html:not(.dark) [class*="bg-[#202020]"],
html.light [class*="bg-[#20222c]"],
html:not(.dark) [class*="bg-[#20222c]"],
html.light [class*="bg-[#202534]"],
html:not(.dark) [class*="bg-[#202534]"],
html.light [class*="bg-[#20273a]"],
html:not(.dark) [class*="bg-[#20273a]"],
html.light [class*="bg-[#202b36]"],
html:not(.dark) [class*="bg-[#202b36]"],
html.light [class*="bg-[#221c10]"],
html:not(.dark) [class*="bg-[#221c10]"],
html.light [class*="bg-[#222736]"],
html:not(.dark) [class*="bg-[#222736]"],
html.light [class*="bg-[#222738]"],
html:not(.dark) [class*="bg-[#222738]"],
html.light [class*="bg-[#222838]"],
html:not(.dark) [class*="bg-[#222838]"],
html.light [class*="bg-[#22283a]"],
html:not(.dark) [class*="bg-[#22283a]"],
html.light [class*="bg-[#223347]"],
html:not(.dark) [class*="bg-[#223347]"],
html.light [class*="bg-[#232838]"],
html:not(.dark) [class*="bg-[#232838]"],
html.light [class*="bg-[#23293a]"],
html:not(.dark) [class*="bg-[#23293a]"],
html.light [class*="bg-[#232f47]"],
html:not(.dark) [class*="bg-[#232f47]"],
html.light [class*="bg-[#242424]"],
html:not(.dark) [class*="bg-[#242424]"],
html.light [class*="bg-[#252525]"],
html:not(.dark) [class*="bg-[#252525]"],
html.light [class*="bg-[#252830]"],
html:not(.dark) [class*="bg-[#252830]"],
html.light [class*="bg-[#252834]"],
html:not(.dark) [class*="bg-[#252834]"],
html.light [class*="bg-[#252a3a]"],
html:not(.dark) [class*="bg-[#252a3a]"],
html.light [class*="bg-[#252a3b]"],
html:not(.dark) [class*="bg-[#252a3b]"],
html.light [class*="bg-[#252a3d]"],
html:not(.dark) [class*="bg-[#252a3d]"],
html.light [class*="bg-[#252b3b]"],
html:not(.dark) [class*="bg-[#252b3b]"],
html.light [class*="bg-[#252b3d]"],
html:not(.dark) [class*="bg-[#252b3d]"],
html.light [class*="bg-[#252c40]"],
html:not(.dark) [class*="bg-[#252c40]"],
html.light [class*="bg-[#252c42]"],
html:not(.dark) [class*="bg-[#252c42]"],
html.light [class*="bg-[#252e46]"],
html:not(.dark) [class*="bg-[#252e46]"],
html.light [class*="bg-[#262626]"],
html:not(.dark) [class*="bg-[#262626]"],
html.light [class*="bg-[#272e42]"],
html:not(.dark) [class*="bg-[#272e42]"],
html.light [class*="bg-[#282828]"],
html:not(.dark) [class*="bg-[#282828]"],
html.light [class*="bg-[#282e42]"],
html:not(.dark) [class*="bg-[#282e42]"],
html.light [class*="bg-[#282f42]"],
html:not(.dark) [class*="bg-[#282f42]"],
html.light [class*="bg-[#28304a]"],
html:not(.dark) [class*="bg-[#28304a]"],
html.light [class*="bg-[#2a3042]"],
html:not(.dark) [class*="bg-[#2a3042]"],
html.light [class*="bg-[#2c2f3d]"],
html:not(.dark) [class*="bg-[#2c2f3d]"],
html.light [class*="bg-[#2c3349]"],
html:not(.dark) [class*="bg-[#2c3349]"],
html.light [class*="bg-[#2e2e2e]"],
html:not(.dark) [class*="bg-[#2e2e2e]"],
html.light [class*="bg-[#2e323c]"],
html:not(.dark) [class*="bg-[#2e323c]"],
html.light [class*="bg-[#2e3240]"],
html:not(.dark) [class*="bg-[#2e3240]"],
html.light [class*="bg-[#2e3448]"],
html:not(.dark) [class*="bg-[#2e3448]"],
html.light [class*="bg-[#303030]"],
html:not(.dark) [class*="bg-[#303030]"],
html.light [class*="bg-[#32384d]"],
html:not(.dark) [class*="bg-[#32384d]"],
html.light [class*="bg-[#383838]"],
html:not(.dark) [class*="bg-[#383838]"] {
  background-color: var(--bg-surface) !important;
  border-color: #e2e8f0 !important;
}

html.light [class*="from-[#101a18]"],
html:not(.dark) [class*="from-[#101a18]"],
html.light [class*="from-[#121624]"],
html:not(.dark) [class*="from-[#121624]"],
html.light [class*="from-[#121626]"],
html:not(.dark) [class*="from-[#121626]"],
html.light [class*="from-[#16131c]"],
html:not(.dark) [class*="from-[#16131c]"],
html.light [class*="from-[#171a22]"],
html:not(.dark) [class*="from-[#171a22]"],
html.light [class*="from-[#181124]"],
html:not(.dark) [class*="from-[#181124]"],
html.light [class*="from-[#191512]"],
html:not(.dark) [class*="from-[#191512]"],
html.light [class*="from-[#19151f]"],
html:not(.dark) [class*="from-[#19151f]"],
html.light [class*="from-[#1d1910]"],
html:not(.dark) [class*="from-[#1d1910]"],
html.light [class*="from-[#201a0e]"],
html:not(.dark) [class*="from-[#201a0e]"],
html.light [class*="from-[#221526]"],
html:not(.dark) [class*="from-[#221526]"],
html.light [class*="from-[#241c0e]"],
html:not(.dark) [class*="from-[#241c0e]"],
html.light [class*="from-[#2a2211]"],
html:not(.dark) [class*="from-[#2a2211]"],
html.light [class*="to-[#0c0c0c]"],
html:not(.dark) [class*="to-[#0c0c0c]"],
html.light [class*="to-[#121212]"],
html:not(.dark) [class*="to-[#121212]"],
html.light [class*="to-[#12141a]"],
html:not(.dark) [class*="to-[#12141a]"],
html.light [class*="to-[#141414]"],
html:not(.dark) [class*="to-[#141414]"],
html.light [class*="to-[#151515]"],
html:not(.dark) [class*="to-[#151515]"] {
  background-image: none !important;
  background-color: var(--bg-surface) !important;
  border-color: #e2e8f0 !important;
}

html.light [class*="bg-[#090a0f]"], html:not(.dark) [class*="bg-[#090a0f]"],
html.light [class*="bg-[#121422]"], html:not(.dark) [class*="bg-[#121422]"],
html.light [class*="bg-[#2a2f42]"], html:not(.dark) [class*="bg-[#2a2f42]"],
html.light [class*="from-[#12141c]"], html:not(.dark) [class*="from-[#12141c]"],
html.light [class*="from-[#16121f]"], html:not(.dark) [class*="from-[#16121f]"],
html.light [class*="from-[#161a26]"], html:not(.dark) [class*="from-[#161a26]"],
html.light [class*="to-[#0d1017]"], html:not(.dark) [class*="to-[#0d1017]"],
html.light [class*="to-[#161a26]"], html:not(.dark) [class*="to-[#161a26]"] {
  background-image: none !important;
  background-color: var(--bg-surface) !important;
  border-color: #e2e8f0 !important;
}

/* General Dashboard Tabs & Tables Light Mode Normalization */
html.light table,
html:not(.dark) table {
  color: #0f172a !important;
}

html.light thead,
html:not(.dark) thead,
html.light th,
html:not(.dark) th {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}

html.light tbody tr,
html:not(.dark) tbody tr {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

html.light tbody tr:hover,
html:not(.dark) tbody tr:hover {
  background-color: #f8fafc !important;
}

/* Modals Core Overlay Container */
html.light [id*="modal" i] > div,
html:not(.dark) [id*="modal" i] > div,
html.light [id*="Modal" i] > div,
html:not(.dark) [id*="Modal" i] > div {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
}

/* Notification Drawer */
html.light #notificationDrawer,
html:not(.dark) #notificationDrawer {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Datepicker popup container */
html.light .datepicker-plot-area,
html:not(.dark) .datepicker-plot-area {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}