/* ── Global Theme Colors & Variables ── */
:root {
  /* Light theme values */
  --blue: #0875e1;
  --blue-dark: #0558b0;
  --blue-light: #eff6ff;
  --ink: #1f2937;
  --ink-2: #374151;
  --ink-3: #6b7280;
  --ink-4: #9ca3af;
  --border: #e5e7eb;
  --panel: #f9fafb;
  --white: #fff;
  --green: #16a34a;
  --red: #dc2626;
  --amber: #d97706;
  --shadow: 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, .10);

  /* Button variables - Light mode */
  --toggle-socket-bg: hsl(0 0% 90%);
  --toggle-button-bg: hsl(223 4% 73%);
  --toggle-line: hsl(0 0% 10% / 0.3);
  --font-size: 11px; /* Scales the 3em height button to 33px height */
  
  --step: 0.4s;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark theme overrides with high specificity to win CSS cascade */
html[data-theme='dark'], :root[data-theme='dark'] {
  --ink: #FAF6F0;         /* Soft warm Cream text */
  --ink-2: #EADEC9;       /* Secondary Cream */
  --ink-3: #B5A895;       /* Muted Cream */
  --ink-4: #7C715E;       /* Dark Muted Cream */
  --border: rgba(250, 246, 240, 0.15);
  --panel: #0A1128;       /* Deep Navy Sea Blue Canvas */
  --white: #101F42;       /* Deep Navy Card Panel */
  --blue: #9B6FD0;        /* Glowing vibrant purple in dark mode */
  --blue-dark: #7B4FB0;
  --blue-light: rgba(107, 63, 160, 0.15);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
  --glass-bg: rgba(16, 31, 66, 0.75) !important;
  --glass-border: rgba(250, 246, 240, 0.15) !important;
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2) !important;

  /* Button variables - Dark mode */
  --toggle-socket-bg: #030712;
  --toggle-button-bg: #1f2937;
  --toggle-line: rgba(250, 246, 240, 0.3);
}

/* Logo light/dark switching helpers */
.logo-light-mode { display: block !important; }
.logo-dark-mode  { display: none !important; }
html[data-theme='dark'] .logo-light-mode { display: none !important; }
html[data-theme='dark'] .logo-dark-mode  { display: block !important; }

/* ── Smooth Theme Transitions ── */
body, nav, .topbar, .topbar-wrap, .card, .kpi, .seg-card, .price-card, th, td, h1, h2, h3, p, li, span, input, select, textarea, .modal, .modal-bg {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

/* Force body background clean overwrite to clear light gradients in dark mode */
html[data-theme='dark'] body, :root[data-theme='dark'] body {
  background: var(--panel) !important;
  background-color: var(--panel) !important;
  background-image: none !important;
  color: var(--ink);
}

html[data-theme='dark'] select, :root[data-theme='dark'] select,
html[data-theme='dark'] input, :root[data-theme='dark'] input,
html[data-theme='dark'] textarea, :root[data-theme='dark'] textarea {
  background-color: var(--panel);
  color: var(--ink);
  border-color: var(--border);
}

html[data-theme='dark'] input::placeholder, :root[data-theme='dark'] input::placeholder,
html[data-theme='dark'] textarea::placeholder, :root[data-theme='dark'] textarea::placeholder {
  color: var(--ink-4);
}

/* ── Dark Mode Dashboard Sidebar & Topbar Glassmorphism Override ── */
html[data-theme='dark'] .sidebar {
  background: rgba(14, 23, 38, 0.9) !important;
  border-right-color: var(--border) !important;
}

html[data-theme='dark'] .topbar,
html[data-theme='dark'] .topbar-wrap {
  background: rgba(14, 23, 38, 0.7) !important;
  border-bottom-color: var(--border) !important;
}

/* ── Dark Mode Page Card & KPI Adjustments ── */
html[data-theme='dark'] .card,
html[data-theme='dark'] .kpi {
  background-color: var(--white) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
}

html[data-theme='dark'] .card:hover,
html[data-theme='dark'] .kpi:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4) !important;
}

/* ── Dark Mode Table Custom Styling ── */
html[data-theme='dark'] th {
  background-color: var(--panel) !important;
  color: var(--ink-2) !important;
}

html[data-theme='dark'] td {
  border-bottom-color: var(--border) !important;
}

html[data-theme='dark'] tr:hover td {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

/* ── Dark Mode Sentinel Drawer & Chat Intercepts ── */
html[data-theme='dark'] #sentinelMessages {
  background: var(--panel) !important;
}

/* Intercept system message background: white style dynamically */
html[data-theme='dark'] #sentinelMessages > div,
html[data-theme='dark'] #sentinelMessages > div[style*="background: white"],
html[data-theme='dark'] #sentinelMessages > div[style*="background:white"] {
  background-color: var(--white) !important;
  color: var(--ink-2) !important;
  border-color: var(--border) !important;
}

/* Intercept user message background: blue (#2563eb) style dynamically */
html[data-theme='dark'] #sentinelMessages > div[style*="background: rgb(37, 99, 235)"],
html[data-theme='dark'] #sentinelMessages > div[style*="background:#2563eb"],
html[data-theme='dark'] #sentinelMessages > div[style*="background: #2563eb"] {
  background-color: var(--blue) !important;
  color: white !important;
  border: none !important;
}

/* Sentinel Input Wrapper and Box */
html[data-theme='dark'] #sentinelMessages + div,
html[data-theme='dark'] div[style*="border-top:1px solid #e2e8f0"],
html[data-theme='dark'] div[style*="border-top: 1px solid #e2e8f0"] {
  background-color: var(--white) !important;
  border-top-color: var(--border) !important;
}

html[data-theme='dark'] #sentinelInput {
  background-color: var(--panel) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

/* ── Dark Mode Threats & Strengths Box Intercepts ── */
html[data-theme='dark'] div[style*="background:#fef2f2"],
html[data-theme='dark'] div[style*="background: #fef2f2"] {
  background-color: rgba(239, 68, 68, 0.12) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

html[data-theme='dark'] div[style*="background:#f0fdf4"],
html[data-theme='dark'] div[style*="background: #f0fdf4"] {
  background-color: rgba(74, 222, 128, 0.12) !important;
  color: #86efac !important;
  border: 1px solid rgba(74, 222, 128, 0.25) !important;
}

html[data-theme='dark'] div[style*="background:#fffbeb"],
html[data-theme='dark'] div[style*="background: #fffbeb"] {
  background-color: rgba(245, 158, 11, 0.12) !important;
  color: #fde047 !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
}

/* ── Dark Mode Badge Highlights Override ── */
html[data-theme='dark'] .badge-admin {
  color: #818cf8 !important;
  background-color: rgba(129, 140, 248, 0.1) !important;
  border-color: rgba(129, 140, 248, 0.15) !important;
}

html[data-theme='dark'] .badge-active {
  color: #34d399 !important;
  background-color: rgba(52, 211, 153, 0.1) !important;
  border-color: rgba(52, 211, 153, 0.15) !important;
}

html[data-theme='dark'] .badge-invited {
  color: #fbbf24 !important;
  background-color: rgba(251, 191, 36, 0.1) !important;
  border-color: rgba(251, 191, 36, 0.15) !important;
}

/* ── Theme Button Base Style ── */
.theme-toggle {
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--ink-3);
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  flex-shrink: 0;

.theme-toggle svg {
  width: 20px;
  height: 20px;
  position: absolute;
}

/* Floating version of the theme toggle for pages without standard headers */
.floating-theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100000;
  box-shadow: var(--shadow-lg);
  border-radius: 3em;
  background: var(--white);
  padding: 4px;
}

/* ── Screen Reader Utilities ── */
.theme-toggle .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ── Dark Mode Additional Visibility & Contrast Polish ── */
html[data-theme='dark'] .user-dd,
html[data-theme='dark'] .user-dropdown {
  background: var(--white) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}

html[data-theme='dark'] .user-dd-head,
html[data-theme='dark'] .user-dd-div {
  border-bottom-color: var(--border) !important;
  border-color: var(--border) !important;
}

html[data-theme='dark'] .user-dd-name {
  color: var(--ink) !important;
}

html[data-theme='dark'] .user-dd-email {
  color: var(--ink-3) !important;
}

html[data-theme='dark'] .user-dd a,
html[data-theme='dark'] .user-dd-btn {
  color: var(--ink-2) !important;
}

html[data-theme='dark'] .user-dd a:hover {
  background: var(--blue-light) !important;
  color: var(--blue) !important;
}

/* Checklist Cards Override */
html[data-theme='dark'] .sprint-card,
html[data-theme='dark'] .skill-card {
  background: var(--white) !important;
  border-color: var(--border) !important;
}

/* Stats Bar Adjustments */
.stats-bar {
  background: #111827 !important; /* Constant dark backing in light mode */
}

.stat-value {
  color: #ffffff !important;
}

html[data-theme='dark'] .stats-bar {
  background: var(--white) !important; /* Premium Midnight card panel in dark mode */
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}

html[data-theme='dark'] .stat-label {
  color: var(--ink-3) !important;
}

/* Solutions section wrapper overrides */
html[data-theme='dark'] .segments {
  background: var(--panel) !important;
  border-bottom-color: var(--border) !important;
}

html[data-theme='dark'] .seg-card {
  border-color: var(--border) !important;
}

/* Footer Adjustments */
footer {
  background: #111827 !important; /* Constant dark backing in light mode */
  color: rgba(255, 255, 255, 0.6) !important;
}

footer .footer-brand {
  color: #ffffff !important;
}

html[data-theme='dark'] footer {
  background: var(--white) !important; /* Card Panel in dark mode */
  border-top: 1px solid var(--border) !important;
  color: var(--ink-3) !important;
}

html[data-theme='dark'] footer .footer-brand,
html[data-theme='dark'] footer .footer-col-title {
  color: var(--ink) !important;
}

html[data-theme='dark'] footer .footer-col a {
  color: var(--ink-3) !important;
}

html[data-theme='dark'] footer .footer-col a:hover {
  color: var(--blue) !important;
}

/* ── Smooth Modal Spring Scale Animations ── */
.modal, .modal-card {
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease, color 0.25s ease !important;
}

.modal-bg.open .modal,
.modal-bg.open .modal-card,
.modal-backdrop.open .modal-card {
  transform: scale(1) !important;
}

/* ── Dark Mode Dashboard Dropdown Overrides ── */
html[data-theme='dark'] .dropdown,
html[data-theme='dark'] .notif-dropdown,
html[data-theme='dark'] .user-dd,
html[data-theme='dark'] .user-dropdown {
  background: var(--white) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}

html[data-theme='dark'] .dropdown a,
html[data-theme='dark'] .dropdown div,
html[data-theme='dark'] .dd-item {
  color: var(--ink-2) !important;
}

html[data-theme='dark'] .dropdown a:hover,
html[data-theme='dark'] .dd-item:hover {
  background: var(--blue-light) !important;
  color: var(--blue) !important;
}

html[data-theme='dark'] .dd-head {
  border-bottom-color: var(--border) !important;
}

html[data-theme='dark'] .dd-name {
  color: var(--ink) !important;
}

html[data-theme='dark'] .dd-sub,
html[data-theme='dark'] .dd-email {
  color: var(--ink-3) !important;
}

html[data-theme='dark'] .dd-div {
  border-bottom-color: var(--border) !important;
  background-color: var(--border) !important;
}