/* ── 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 */

  --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(255, 255, 255, 0.08) !important;
  --panel: #070c18 !important;
  /* Sleek Deep Midnight Canvas */
  --white: #0c1425 !important;
  /* Rich Darker Glass Card Panel */
  --blue: #3b82f6;
  /* Glowing vibrant cobalt blue in dark mode */
  --blue-dark: #2563eb;
  --blue-light: rgba(59, 130, 246, 0.15);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.7);
  --glass-bg: rgba(12, 20, 37, 0.85) !important;
  --glass-border: rgba(255, 255, 255, 0.08) !important;
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3) !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;
}

/* ── Ultra-Smooth Global Animation & Transition Engine ── */
body,
nav,
.topbar,
.topbar-wrap,
.sidebar,
.card,
.kpi,
.seg-card,
.price-card,
.dept-card-premium,
.emp-report-row,
.insight-compact-card,
.dept-insight-card,
.metric-card-strip,
.btn,
.filter-pill,
.tab-btn,
th,
td,
h1,
h2,
h3,
p,
li,
span,
input,
select,
textarea,
.modal,
.modal-bg {
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Hover Elevation & Smooth Glow */
.card:hover,
.kpi:hover,
.dept-card-premium:hover,
.emp-report-row:hover,
.insight-compact-card:hover,
.dept-insight-card:hover,
.metric-card-strip:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.4), 0 0 1px rgba(155, 111, 208, 0.2) !important;
}

/* 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: #60a5fa !important;
  background-color: rgba(59, 130, 246, 0.12) !important;
  border-color: rgba(59, 130, 246, 0.2) !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;
}

/* ── Sentinel Co-Pilot Floating Button Styling & Pulse Animation ── */
#sentinelFloatingBtn {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #6B3FA0, #4A2070) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(107, 63, 160, 0.4) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999 !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  outline: none !important;
  animation: copilotPulse 3s infinite ease-in-out !important;
}

#sentinelFloatingBtn:hover {
  transform: translateY(-4px) scale(1.08) !important;
  box-shadow: 0 12px 28px rgba(107, 63, 160, 0.55) !important;
}

#sentinelFloatingBtn svg {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#sentinelFloatingBtn:hover svg {
  transform: scale(1.1) rotate(15deg) !important;
}

@keyframes copilotPulse {
  0% {
    box-shadow: 0 4px 20px rgba(107, 63, 160, 0.4);
  }
  50% {
    box-shadow: 0 4px 28px rgba(107, 63, 160, 0.7), 0 0 0 12px rgba(107, 63, 160, 0.15);
  }
  100% {
    box-shadow: 0 4px 20px rgba(107, 63, 160, 0.4);
  }
}

/* ── Theme Button Crystal Diamond Style ── */
.theme-toggle {
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(10px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  color: var(--ink-3) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important; /* diamond corners */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  position: relative !important;
  flex-shrink: 0;
  transform: rotate(45deg) !important;
  box-shadow: 0 4px 16px rgba(31, 38, 135, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html[data-theme='dark'] .theme-toggle {
  background: rgba(16, 31, 66, 0.45) !important;
  border: 1.5px solid rgba(250, 246, 240, 0.15) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
  color: var(--ink-3) !important;
}

.theme-toggle:hover {
  transform: rotate(135deg) scale(1.06) !important;
  background: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 8px 24px rgba(31, 38, 135, 0.22), inset 0 1px 2px rgba(255, 255, 255, 0.8) !important;
  color: var(--ink-2) !important;
}

html[data-theme='dark'] .theme-toggle:hover {
  background: rgba(16, 31, 66, 0.65) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.25) !important;
  color: var(--ink) !important;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  position: absolute;
  transform: rotate(-45deg) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.theme-toggle:hover svg {
  transform: rotate(-135deg) !important;
}

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

/* ── Dark Mode Sub-Panel, Dropzone, and Smooth Transition System ── */
html[data-theme='dark'] .card,
html[data-theme='dark'] .kpi,
html[data-theme='dark'] .table-wrap,
html[data-theme='dark'] .dept-hero-card,
html[data-theme='dark'] .dept-card-premium,
html[data-theme='dark'] .campaign-builder-card {
  background-color: #0c1425 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme='dark'] .sub-card,
html[data-theme='dark'] .drop-zone,
html[data-theme='dark'] .upload-dropzone,
html[data-theme='dark'] .csv-upload-dropzone,
html[data-theme='dark'] div[style*="background: var(--blue-light)"],
html[data-theme='dark'] div[style*="background: #f8fafc"],
html[data-theme='dark'] div[style*="background:#f8fafc"] {
  background-color: rgba(6, 11, 22, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme='dark'] input,
html[data-theme='dark'] select,
html[data-theme='dark'] textarea,
html[data-theme='dark'] .camp-input-field {
  background-color: #070c18 !important;
  color: var(--ink) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Global Keyframe Motion */
@keyframes smoothFadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.fade-in,
.tab-panel.active,
.emp-animated-row {
  animation: smoothFadeInUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !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;
}

/* ── Unified Theme Toggle Component Styling ── */
.theme-toggle {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  padding: 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.theme-toggle:hover {
  background: var(--blue-light);
  color: var(--blue);
  border-color: var(--blue);
  transform: scale(1.05);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  position: absolute;
}

.theme-toggle .sun-icon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.theme-toggle .moon-icon {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
}

html[data-theme='dark'] .theme-toggle .sun-icon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
}

html[data-theme='dark'] .theme-toggle .moon-icon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Smooth Scroll & View Transitions */
html {
  scroll-behavior: smooth;
}

body {
  transition: opacity 0.15s ease-in-out;
}

.page-transition-exit {
  opacity: 0.2 !important;
}

/* ── Bicycle Cycling Loading Animation (#cycle loading animation) ── */
.aca-bicycle-loader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  animation: aca-bicycle-bounce 0.4s ease-in-out infinite alternate;
}

.aca-bicycle-wheel {
  transform-origin: center;
  animation: aca-bicycle-wheel-spin 0.6s linear infinite;
}

@keyframes aca-bicycle-bounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-1.5px); }
}

@keyframes aca-bicycle-wheel-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.btn-checking {
  background: var(--blue, #2563eb) !important;
  color: #ffffff !important;
  opacity: 0.9;
  cursor: wait !important;
  pointer-events: none !important;
}

.btn-redirecting {
  background: #10b981 !important; /* Emerald green redirecting success */
  color: #ffffff !important;
  cursor: wait !important;
  pointer-events: none !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4) !important;
}

.btn-not-assessed {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #f59e0b !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  cursor: default !important;
  font-weight: 700 !important;
}