/* ==========================================================================
   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-[#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]"] {
  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-[#262b3b]"],
html:not(.dark) [class*="bg-[#262b3b]"],
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-[#101620]"],
html:not(.dark) [class*="from-[#101620]"] {
  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;
}

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