/* Theme tokens — light / dark via data-theme. No filter:invert. No pure #000. */

:root,
[data-theme="light"] {
  --theme-bg: #e8eef3;
  --theme-bg-secondary: #f4f7fa;
  --theme-bg-elevated: #ffffff;
  --theme-bg-muted: #e2e8f0;
  --theme-card: #ffffff;
  --theme-sidebar: linear-gradient(180deg, #015289 0%, #014076 100%);
  --theme-topbar: #ffffff;
  --theme-border: #cbd5e1;
  --theme-border-strong: #015289;
  --theme-text: #1e293b;
  --theme-text-secondary: #475569;
  --theme-text-muted: #64748b;
  --theme-text-inverse: #f8fafc;
  --theme-accent: #015289;
  --theme-accent-hover: #014076;
  --theme-danger: #c70b46;
  --theme-success: #059669;
  --theme-warning: #d97706;
  --theme-info: #0284c8;
  --theme-input-bg: #ffffff;
  --theme-input-border: #cbd5e1;
  --theme-modal-overlay: rgba(15, 23, 42, 0.45);
  --theme-shadow: 0 4px 12px rgba(1, 82, 137, 0.08);
  --theme-scrollbar: #94a3b8;
  --theme-scrollbar-track: #e2e8f0;
  --theme-table-stripe: #f8fafc;
  --theme-hover: rgba(1, 82, 137, 0.06);
  --theme-chart-grid: rgba(100, 116, 139, 0.25);
  --theme-chart-text: #475569;
  /* Align public-site vars when theme.css is loaded */
  --bg-primary: #dedede;
  --bg-secondary: #e8e8e8;
  --bg-card: rgba(255, 255, 255, 0.92);
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --border-color: #015289;
}

[data-theme="dark"] {
  --theme-bg: #1a2332;
  --theme-bg-secondary: #141c28;
  --theme-bg-elevated: #243044;
  --theme-bg-muted: #2a3a4f;
  --theme-card: #243044;
  --theme-sidebar: linear-gradient(180deg, #0f3a5c 0%, #0c2d48 100%);
  --theme-topbar: #1e2a3a;
  --theme-border: #3d4f66;
  --theme-border-strong: #4a90b8;
  --theme-text: #e8eef4;
  --theme-text-secondary: #b8c5d6;
  --theme-text-muted: #8fa0b5;
  --theme-text-inverse: #0f172a;
  --theme-accent: #3b9dd6;
  --theme-accent-hover: #5bb0e0;
  --theme-danger: #e84a6f;
  --theme-success: #34d399;
  --theme-warning: #fbbf24;
  --theme-info: #38bdf8;
  --theme-input-bg: #1e2a3a;
  --theme-input-border: #3d4f66;
  --theme-modal-overlay: rgba(8, 12, 18, 0.65);
  --theme-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --theme-scrollbar: #5a6f88;
  --theme-scrollbar-track: #1a2332;
  --theme-table-stripe: #1e2a3a;
  --theme-hover: rgba(59, 157, 214, 0.12);
  --theme-chart-grid: rgba(148, 163, 184, 0.2);
  --theme-chart-text: #b8c5d6;
  --bg-primary: #1a2332;
  --bg-secondary: #141c28;
  --bg-card: rgba(36, 48, 68, 0.95);
  --text-primary: #e8eef4;
  --text-secondary: #b8c5d6;
  --border-color: #4a90b8;
  --bg-brand-tint: #1e2a3a;
  --bg-brand-tint-strong: #243044;
}

html {
  color-scheme: light;
}
html[data-theme="dark"] {
  color-scheme: dark;
}

/* Admin panel shell */
body.admin-panel-body,
.admin-panel-shell {
  background: var(--theme-bg) !important;
  color: var(--theme-text);
}

[data-theme="dark"] body {
  background: var(--theme-bg) !important;
  color: var(--theme-text);
}

[data-theme="dark"] .sidebar {
  background: var(--theme-sidebar) !important;
}

[data-theme="dark"] .top-bar,
[data-theme="dark"] header.top-bar,
[data-theme="dark"] .bg-white {
  background-color: var(--theme-card) !important;
  color: var(--theme-text);
}

[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100,
[data-theme="dark"] .bg-slate-50,
[data-theme="dark"] .bg-slate-100 {
  background-color: var(--theme-bg-muted) !important;
}

/* Secondary/cancel buttons: gray fills must not keep light-on-light in dark mode */
[data-theme="dark"] .bg-gray-200,
[data-theme="dark"] .bg-gray-300,
[data-theme="dark"] .bg-slate-200,
[data-theme="dark"] .bg-slate-300 {
  background-color: var(--theme-bg-muted) !important;
  color: var(--theme-text) !important;
}

[data-theme="dark"] button.bg-gray-200,
[data-theme="dark"] button.bg-gray-300,
[data-theme="dark"] a.bg-gray-200,
[data-theme="dark"] a.bg-gray-300 {
  background-color: var(--theme-bg-muted) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border);
}

[data-theme="dark"] .hover\:bg-gray-200:hover,
[data-theme="dark"] .hover\:bg-gray-300:hover,
[data-theme="dark"] button.bg-gray-200:hover,
[data-theme="dark"] button.bg-gray-300:hover,
[data-theme="dark"] a.bg-gray-200:hover,
[data-theme="dark"] a.bg-gray-300:hover {
  background-color: #354860 !important;
  color: var(--theme-text) !important;
}

[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-slate-900 {
  color: var(--theme-text) !important;
}

[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-slate-700,
[data-theme="dark"] .text-slate-600 {
  color: var(--theme-text-secondary) !important;
}

[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-400,
[data-theme="dark"] .text-slate-500 {
  color: var(--theme-text-muted) !important;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300,
[data-theme="dark"] .border-slate-200 {
  border-color: var(--theme-border) !important;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: var(--theme-input-bg) !important;
  border-color: var(--theme-input-border) !important;
  color: var(--theme-text) !important;
}

[data-theme="dark"] table thead:not(.table-header-brand),
[data-theme="dark"] th:not(.table-header-brand) {
  background-color: var(--theme-bg-muted) !important;
  color: var(--theme-text-secondary) !important;
}

[data-theme="dark"] table tbody tr:nth-child(even) {
  background-color: var(--theme-table-stripe);
}

[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-lg,
[data-theme="dark"] .shadow-md,
[data-theme="dark"] .shadow-xl {
  box-shadow: var(--theme-shadow) !important;
}

[data-theme="dark"] .stat-card,
[data-theme="dark"] .admin-card {
  background: var(--theme-card) !important;
  border-color: var(--theme-border);
  color: var(--theme-text);
}

[data-theme="dark"] #profileDropdown,
[data-theme="dark"] .modal-content,
[data-theme="dark"] [id$="Modal"] .bg-white {
  background-color: var(--theme-card) !important;
  color: var(--theme-text);
}

[data-theme="dark"] .hover\:bg-gray-100:hover,
[data-theme="dark"] .hover\:bg-gray-50:hover {
  background-color: var(--theme-hover) !important;
}

/* Header profile avatar — Discord-like 46px circular */
.header-avatar-wrap,
#headerAvatarWrap {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
}
.header-avatar-img,
#headerAvatarImg {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}
#profileBtn {
  align-items: center;
}

/* Never invert brand media */
[data-theme="dark"] img.logo-image,
[data-theme="dark"] #headerAvatarImg,
[data-theme="dark"] #welcomeBannerLogo,
[data-theme="dark"] .office-logo,
[data-theme="dark"] img[src*="/static/offices/"],
[data-theme="dark"] img[src*="/static/avatars/"],
[data-theme="dark"] img[src*="UnitedStates911"],
[data-theme="dark"] canvas.map,
[data-theme="dark"] .leaflet-container,
[data-theme="dark"] #map {
  filter: none !important;
}

/* Scrollbars */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--theme-scrollbar-track);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--theme-scrollbar);
  border-radius: 6px;
}

/* Login page */
[data-theme="dark"] .login-container {
  background: rgba(36, 48, 68, 0.96) !important;
  color: var(--theme-text);
}

/* Profile hub */
.profile-hub {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  min-height: 60vh;
}
.profile-hub-nav {
  width: 220px;
  flex-shrink: 0;
  background: var(--theme-card);
  border: 1px solid var(--theme-border);
  border-radius: 10px;
  padding: 0.5rem;
  box-shadow: var(--theme-shadow);
}
.profile-hub-nav button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--theme-text-secondary);
  font-size: 0.875rem;
  cursor: pointer;
  margin-bottom: 2px;
}
.profile-hub-nav button:hover {
  background: var(--theme-hover);
  color: var(--theme-text);
}
.profile-hub-nav button.active {
  background: rgba(1, 82, 137, 0.12);
  color: var(--theme-accent);
  font-weight: 600;
}
[data-theme="dark"] .profile-hub-nav button.active {
  background: rgba(59, 157, 214, 0.18);
  color: var(--theme-accent);
}
.profile-hub-panel {
  flex: 1;
  min-width: 0;
  background: var(--theme-card);
  border: 1px solid var(--theme-border);
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: var(--theme-shadow);
}
.profile-avatar-preview {
  width: 96px;
  height: 96px;
  border-radius: 9999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #015289, #014076);
  color: #fff;
  font-size: 1.75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.profile-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pw-strength-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--theme-bg-muted);
  overflow: hidden;
  margin-top: 0.35rem;
}
.pw-strength-bar > span {
  display: block;
  height: 100%;
  width: 0;
  transition: width 0.2s ease, background 0.2s ease;
}
.profile-crop-stage {
  position: relative;
  width: 100%;
  max-width: 360px;
  height: 280px;
  background: #0f172a;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 auto 1rem;
  touch-action: none;
  user-select: none;
}
.profile-crop-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}
.profile-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.profile-field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--theme-text-muted);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.profile-field input,
.profile-field select {
  width: 100%;
  border: 1px solid var(--theme-input-border);
  background: var(--theme-input-bg);
  color: var(--theme-text);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
}
.profile-field input:disabled,
.profile-field input[readonly] {
  opacity: 0.85;
  cursor: not-allowed;
}
.profile-session-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--theme-border);
}
@media (max-width: 768px) {
  .profile-hub {
    flex-direction: column;
  }
  .profile-hub-nav {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .profile-hub-nav button {
    width: auto;
    flex: 1 1 auto;
  }
}

/* ---- Dark mode: content shells (override hardcoded white in panel CSS) ---- */
[data-theme="dark"] .main-content,
[data-theme="dark"] .main-content-area {
  background: var(--theme-bg) !important;
  color: var(--theme-text);
}

[data-theme="dark"] .content-section {
  background-color: var(--theme-card) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border-strong) !important;
  box-shadow: var(--theme-shadow) !important;
}

[data-theme="dark"] .content-section:hover {
  border-color: var(--theme-danger, #c70b46) !important;
}

[data-theme="dark"] .admin-card,
[data-theme="dark"] .stat-card {
  background-color: var(--theme-bg-elevated) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border-strong) !important;
}

[data-theme="dark"] .profile-dropdown {
  background: var(--theme-card) !important;
  color: var(--theme-text);
}

/* Headings that used theme tokens while shell was still white */
[data-theme="dark"] .content-section > h1,
[data-theme="dark"] .content-section > h2,
[data-theme="dark"] .content-section > h3,
[data-theme="dark"] .content-section > h4,
[data-theme="dark"] .content-section .text-gray-900,
[data-theme="dark"] .content-section .text-gray-800,
[data-theme="dark"] .content-section .text-slate-900,
[data-theme="dark"] .content-section .font-semibold.text-lg {
  color: var(--theme-text) !important;
}

[data-theme="dark"] .content-section .text-gray-600,
[data-theme="dark"] .content-section .text-gray-500,
[data-theme="dark"] .content-section .text-gray-400,
[data-theme="dark"] .content-section .text-slate-500,
[data-theme="dark"] .content-section .text-slate-400 {
  color: var(--theme-text-muted) !important;
}

/* Nested white cards inside themed sections */
[data-theme="dark"] .content-section .bg-white {
  background-color: var(--theme-bg-elevated) !important;
  color: var(--theme-text) !important;
}

[data-theme="dark"] .content-section .bg-slate-50,
[data-theme="dark"] .content-section .bg-gray-50 {
  background-color: var(--theme-bg-muted) !important;
}

/* ---- Dark mode: admin panel comprehensive remaps ---- */

/* Shell / chrome */
[data-theme="dark"] .main-content,
[data-theme="dark"] .main-content-area {
  background: var(--theme-bg) !important;
  color: var(--theme-text) !important;
}

[data-theme="dark"] .top-bar,
[data-theme="dark"] header.top-bar {
  background: var(--theme-topbar) !important;
  border-bottom-color: var(--theme-border-strong) !important;
  color: var(--theme-text) !important;
}

[data-theme="dark"] .stat-card,
[data-theme="dark"] .admin-card,
[data-theme="dark"] .profile-dropdown {
  background: var(--theme-card) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border-strong) !important;
}

/* Gray / slate scale (full) */
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100,
[data-theme="dark"] .bg-slate-50,
[data-theme="dark"] .bg-slate-100,
[data-theme="dark"] .bg-zinc-50,
[data-theme="dark"] .bg-zinc-100,
[data-theme="dark"] .bg-neutral-50,
[data-theme="dark"] .bg-neutral-100 {
  background-color: var(--theme-bg-muted) !important;
}

[data-theme="dark"] .bg-gray-200,
[data-theme="dark"] .bg-gray-300,
[data-theme="dark"] .bg-slate-200,
[data-theme="dark"] .bg-slate-300 {
  background-color: var(--theme-bg-muted) !important;
  color: var(--theme-text) !important;
}

[data-theme="dark"] .bg-gray-400,
[data-theme="dark"] .bg-gray-500 {
  background-color: #4a5d75 !important;
}

[data-theme="dark"] .text-black,
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-slate-900,
[data-theme="dark"] .text-slate-800,
[data-theme="dark"] .text-zinc-900 {
  color: var(--theme-text) !important;
}

[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-slate-700,
[data-theme="dark"] .text-slate-600,
[data-theme="dark"] .text-zinc-700 {
  color: var(--theme-text-secondary) !important;
}

[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-400,
[data-theme="dark"] .text-slate-500,
[data-theme="dark"] .text-slate-400,
[data-theme="dark"] .text-zinc-500 {
  color: var(--theme-text-muted) !important;
}

[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300,
[data-theme="dark"] .border-slate-100,
[data-theme="dark"] .border-slate-200,
[data-theme="dark"] .border-slate-300,
[data-theme="dark"] .border-zinc-200 {
  border-color: var(--theme-border) !important;
}

[data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
[data-theme="dark"] .divide-gray-300 > :not([hidden]) ~ :not([hidden]),
[data-theme="dark"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--theme-border) !important;
}

/* Secondary / cancel / outline buttons — never light-on-light */
[data-theme="dark"] button.bg-gray-200,
[data-theme="dark"] button.bg-gray-300,
[data-theme="dark"] a.bg-gray-200,
[data-theme="dark"] a.bg-gray-300,
[data-theme="dark"] .bg-gray-200.text-gray-600,
[data-theme="dark"] .bg-gray-200.text-gray-700,
[data-theme="dark"] .bg-gray-200.text-gray-800,
[data-theme="dark"] .bg-gray-300.text-gray-600,
[data-theme="dark"] .bg-gray-300.text-gray-700,
[data-theme="dark"] .bg-gray-300.text-gray-800 {
  background-color: var(--theme-bg-muted) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

[data-theme="dark"] button.border.border-gray-300,
[data-theme="dark"] button.border.border-gray-200,
[data-theme="dark"] a.border.border-gray-300,
[data-theme="dark"] button.border:not([class*="bg-"]):not(.bg-brand-primary):not(.bg-brand-accent) {
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
  background-color: var(--theme-bg-elevated) !important;
}

[data-theme="dark"] button.border:hover:not(:disabled):not([class*="bg-red"]):not([class*="bg-green"]):not([class*="bg-blue"]):not(.bg-brand-primary),
[data-theme="dark"] .hover\:bg-gray-50:hover,
[data-theme="dark"] .hover\:bg-gray-100:hover,
[data-theme="dark"] .hover\:bg-slate-50:hover,
[data-theme="dark"] .hover\:bg-slate-100:hover {
  background-color: var(--theme-hover) !important;
  color: var(--theme-text) !important;
}

[data-theme="dark"] .hover\:bg-gray-200:hover,
[data-theme="dark"] .hover\:bg-gray-300:hover,
[data-theme="dark"] button.bg-gray-200:hover,
[data-theme="dark"] button.bg-gray-300:hover {
  background-color: #354860 !important;
  color: var(--theme-text) !important;
}

[data-theme="dark"] .hover\:text-gray-700:hover,
[data-theme="dark"] .hover\:text-gray-900:hover,
[data-theme="dark"] .hover\:text-slate-900:hover {
  color: var(--theme-text) !important;
}

/* Pastel tint surfaces → translucent brand-safe tones */
[data-theme="dark"] .bg-blue-50,
[data-theme="dark"] .bg-sky-50,
[data-theme="dark"] .bg-cyan-50 {
  background-color: rgba(59, 157, 214, 0.14) !important;
}
[data-theme="dark"] .bg-blue-100,
[data-theme="dark"] .bg-sky-100 {
  background-color: rgba(59, 157, 214, 0.22) !important;
}
[data-theme="dark"] .bg-green-50,
[data-theme="dark"] .bg-emerald-50,
[data-theme="dark"] .bg-teal-50 {
  background-color: rgba(52, 211, 153, 0.12) !important;
}
[data-theme="dark"] .bg-green-100,
[data-theme="dark"] .bg-emerald-100 {
  background-color: rgba(52, 211, 153, 0.2) !important;
}
[data-theme="dark"] .bg-red-50,
[data-theme="dark"] .bg-rose-50,
[data-theme="dark"] .bg-pink-50 {
  background-color: rgba(232, 74, 111, 0.14) !important;
}
[data-theme="dark"] .bg-red-100,
[data-theme="dark"] .bg-rose-100 {
  background-color: rgba(232, 74, 111, 0.22) !important;
}
[data-theme="dark"] .bg-amber-50,
[data-theme="dark"] .bg-yellow-50,
[data-theme="dark"] .bg-orange-50 {
  background-color: rgba(251, 191, 36, 0.12) !important;
}
[data-theme="dark"] .bg-amber-100,
[data-theme="dark"] .bg-yellow-100,
[data-theme="dark"] .bg-orange-100 {
  background-color: rgba(251, 191, 36, 0.2) !important;
}
[data-theme="dark"] .bg-purple-50,
[data-theme="dark"] .bg-violet-50,
[data-theme="dark"] .bg-fuchsia-50 {
  background-color: rgba(167, 139, 250, 0.14) !important;
}
[data-theme="dark"] .bg-purple-100,
[data-theme="dark"] .bg-violet-100 {
  background-color: rgba(167, 139, 250, 0.22) !important;
}
[data-theme="dark"] .bg-indigo-50 {
  background-color: rgba(129, 140, 248, 0.14) !important;
}
[data-theme="dark"] .bg-indigo-100 {
  background-color: rgba(129, 140, 248, 0.22) !important;
}
[data-theme="dark"] .bg-lime-50 {
  background-color: rgba(163, 230, 53, 0.12) !important;
}
[data-theme="dark"] .bg-lime-100 {
  background-color: rgba(163, 230, 53, 0.2) !important;
}
[data-theme="dark"] .bg-teal-50 {
  background-color: rgba(45, 212, 191, 0.12) !important;
}
[data-theme="dark"] .bg-teal-100 {
  background-color: rgba(45, 212, 191, 0.2) !important;
}

/* Colored text on pastel / links / metrics */
[data-theme="dark"] .text-blue-600,
[data-theme="dark"] .text-blue-700,
[data-theme="dark"] .text-sky-600,
[data-theme="dark"] .text-sky-700 {
  color: #7ec8f0 !important;
}
[data-theme="dark"] .text-blue-800,
[data-theme="dark"] .text-blue-900,
[data-theme="dark"] .hover\:text-blue-800:hover,
[data-theme="dark"] .hover\:text-blue-900:hover {
  color: #a5d8f5 !important;
}
[data-theme="dark"] .text-green-600,
[data-theme="dark"] .text-green-700,
[data-theme="dark"] .text-emerald-600,
[data-theme="dark"] .text-emerald-700 {
  color: #6ee7b7 !important;
}
[data-theme="dark"] .text-green-800,
[data-theme="dark"] .text-green-900 {
  color: #a7f3d0 !important;
}
[data-theme="dark"] .text-red-600,
[data-theme="dark"] .text-red-700,
[data-theme="dark"] .text-rose-600 {
  color: #f587a0 !important;
}
[data-theme="dark"] .text-red-800,
[data-theme="dark"] .text-red-900 {
  color: #fbb6c4 !important;
}
[data-theme="dark"] .text-amber-600,
[data-theme="dark"] .text-amber-700,
[data-theme="dark"] .text-yellow-600,
[data-theme="dark"] .text-yellow-700,
[data-theme="dark"] .text-orange-600 {
  color: #fcd34d !important;
}
[data-theme="dark"] .text-amber-800,
[data-theme="dark"] .text-amber-900,
[data-theme="dark"] .text-yellow-800 {
  color: #fde68a !important;
}
[data-theme="dark"] .text-purple-600,
[data-theme="dark"] .text-purple-700,
[data-theme="dark"] .text-violet-600,
[data-theme="dark"] .text-indigo-600 {
  color: #c4b5fd !important;
}
[data-theme="dark"] .text-purple-800,
[data-theme="dark"] .text-indigo-800 {
  color: #ddd6fe !important;
}
[data-theme="dark"] .text-pink-600,
[data-theme="dark"] .text-pink-700,
[data-theme="dark"] .text-fuchsia-600 {
  color: #f9a8d4 !important;
}
[data-theme="dark"] .text-cyan-600,
[data-theme="dark"] .text-cyan-700 {
  color: #67e8f9 !important;
}
[data-theme="dark"] .text-teal-600,
[data-theme="dark"] .text-teal-700 {
  color: #5eead4 !important;
}
[data-theme="dark"] .text-lime-600,
[data-theme="dark"] .text-lime-700 {
  color: #bef264 !important;
}
[data-theme="dark"] .text-violet-600,
[data-theme="dark"] .text-violet-700 {
  color: #c4b5fd !important;
}
[data-theme="dark"] .text-orange-700,
[data-theme="dark"] .text-orange-800 {
  color: #fdba74 !important;
}

/* Colored borders on alerts / badges */
[data-theme="dark"] .border-blue-100,
[data-theme="dark"] .border-blue-200,
[data-theme="dark"] .border-sky-200 {
  border-color: rgba(59, 157, 214, 0.35) !important;
}
[data-theme="dark"] .border-green-100,
[data-theme="dark"] .border-green-200,
[data-theme="dark"] .border-emerald-200 {
  border-color: rgba(52, 211, 153, 0.35) !important;
}
[data-theme="dark"] .border-red-100,
[data-theme="dark"] .border-red-200,
[data-theme="dark"] .border-rose-200 {
  border-color: rgba(232, 74, 111, 0.4) !important;
}
[data-theme="dark"] .border-amber-100,
[data-theme="dark"] .border-amber-200,
[data-theme="dark"] .border-yellow-200 {
  border-color: rgba(251, 191, 36, 0.35) !important;
}
[data-theme="dark"] .border-purple-100,
[data-theme="dark"] .border-purple-200,
[data-theme="dark"] .border-indigo-200 {
  border-color: rgba(167, 139, 250, 0.35) !important;
}
[data-theme="dark"] .border-blue-500,
[data-theme="dark"] .border-blue-600 {
  border-color: #3b9dd6 !important;
}

/* Hover pastel rows / autocomplete */
[data-theme="dark"] .hover\:bg-blue-50:hover,
[data-theme="dark"] .hover\:bg-sky-50:hover {
  background-color: rgba(59, 157, 214, 0.16) !important;
}
[data-theme="dark"] .hover\:bg-red-50:hover {
  background-color: rgba(232, 74, 111, 0.14) !important;
}
[data-theme="dark"] .hover\:bg-green-50:hover {
  background-color: rgba(52, 211, 153, 0.14) !important;
}
[data-theme="dark"] .hover\:bg-amber-50:hover,
[data-theme="dark"] .hover\:bg-yellow-50:hover {
  background-color: rgba(251, 191, 36, 0.14) !important;
}

/* Tabs: active blue underline stays readable */
[data-theme="dark"] .border-b-2.border-blue-600,
[data-theme="dark"] .border-blue-600 {
  border-color: #3b9dd6 !important;
}

/* Keep white text on solid colored buttons */
[data-theme="dark"] .text-white,
[data-theme="dark"] button.text-white,
[data-theme="dark"] a.text-white,
[data-theme="dark"] .bg-brand-primary,
[data-theme="dark"] .bg-brand-accent,
[data-theme="dark"] .bg-blue-500,
[data-theme="dark"] .bg-blue-600,
[data-theme="dark"] .bg-blue-700,
[data-theme="dark"] .bg-green-500,
[data-theme="dark"] .bg-green-600,
[data-theme="dark"] .bg-red-500,
[data-theme="dark"] .bg-red-600,
[data-theme="dark"] .bg-yellow-500,
[data-theme="dark"] .bg-purple-500,
[data-theme="dark"] .bg-purple-600 {
  color: #f8fafc !important;
}

[data-theme="dark"] .bg-brand-primary {
  background-color: #015289 !important;
}
[data-theme="dark"] .bg-brand-accent {
  background-color: #c70b46 !important;
}

/* Brand table headers stay blue + white (do not let generic th remaps win) */
[data-theme="dark"] .table-header-brand,
[data-theme="dark"] thead.table-header-brand,
[data-theme="dark"] .table-header-brand th,
[data-theme="dark"] thead.table-header-brand th {
  background-color: #015289 !important;
  color: #f8fafc !important;
}

/* Forms */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .profile-field input,
[data-theme="dark"] .profile-field select {
  background-color: var(--theme-input-bg) !important;
  border-color: var(--theme-input-border) !important;
  color: var(--theme-text) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] .placeholder-gray-400::placeholder,
[data-theme="dark"] .placeholder-gray-500::placeholder {
  color: var(--theme-text-muted) !important;
  opacity: 1;
}

[data-theme="dark"] option,
[data-theme="dark"] optgroup {
  background-color: var(--theme-input-bg);
  color: var(--theme-text);
}

[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] {
  accent-color: var(--theme-accent);
}

/* Tables */
[data-theme="dark"] table tbody,
[data-theme="dark"] table tbody td,
[data-theme="dark"] table tbody tr {
  color: var(--theme-text) !important;
}

[data-theme="dark"] table thead:not(.table-header-brand),
[data-theme="dark"] th:not(.table-header-brand) {
  background-color: var(--theme-bg-muted) !important;
  color: var(--theme-text-secondary) !important;
}

[data-theme="dark"] table tbody tr:nth-child(even) {
  background-color: var(--theme-table-stripe);
}

[data-theme="dark"] tbody.bg-white,
[data-theme="dark"] tr.bg-white,
[data-theme="dark"] td.bg-white {
  background-color: transparent !important;
}

/* Modals / overlays / dynamic dialogs */
[data-theme="dark"] .modal-content,
[data-theme="dark"] [id$="Modal"] .bg-white,
[data-theme="dark"] [id*="Modal"] > .bg-white,
[data-theme="dark"] .fixed.inset-0 .bg-white,
[data-theme="dark"] .fixed.inset-0 > div.bg-white,
[data-theme="dark"] .password-view-unlock-modal .bg-white {
  background-color: var(--theme-card) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

/* Dropdown menus / autocomplete lists */
[data-theme="dark"] .absolute.bg-white,
[data-theme="dark"] .absolute.z-50.bg-white,
[data-theme="dark"] .dropdown-menu {
  background-color: var(--theme-card) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

/* Chart containers */
[data-theme="dark"] canvas {
  color: var(--theme-chart-text);
}

/* Ring / focus */
[data-theme="dark"] .focus\:ring-blue-500:focus,
[data-theme="dark"] .focus\:ring-2:focus {
  --tw-ring-color: rgba(59, 157, 214, 0.45);
}

[data-theme="dark"] .text-brand-primary {
  color: var(--theme-accent) !important;
}

[data-theme="dark"] .border-brand-primary {
  border-color: var(--theme-border-strong) !important;
}

/* Notification / toast surfaces if light */
[data-theme="dark"] .bg-opacity-90.bg-white,
[data-theme="dark"] .bg-white.bg-opacity-95 {
  background-color: rgba(36, 48, 68, 0.95) !important;
}

/* PDF wizard already tokenized; reinforce secondary */
[data-theme="dark"] .pdf-wizard-btn.secondary {
  background: var(--theme-bg-elevated) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

[data-theme="dark"] .pdf-wizard-header {
  background: linear-gradient(180deg, rgba(59, 157, 214, 0.12), transparent);
}

/* ---- AoO metric tiles: never light-on-pastel in dark mode ---- */
html[data-theme="dark"] #nationalStatsAoo > div,
html[data-theme="dark"] #infrastructureStatsAoo > div {
  background-color: var(--theme-bg-muted) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border-strong) !important;
}

html[data-theme="dark"] #nationalStatsAoo > div .text-gray-600,
html[data-theme="dark"] #nationalStatsAoo > div .text-gray-500,
html[data-theme="dark"] #nationalStatsAoo > div .text-xs,
html[data-theme="dark"] #nationalStatsAoo > div .text-sm,
html[data-theme="dark"] #infrastructureStatsAoo > div .text-gray-600,
html[data-theme="dark"] #infrastructureStatsAoo > div .text-gray-500,
html[data-theme="dark"] #infrastructureStatsAoo > div .text-xs,
html[data-theme="dark"] #infrastructureStatsAoo > div .text-sm {
  color: var(--theme-text-secondary) !important;
}

html[data-theme="dark"] #nationalStatsAoo > div .font-bold,
html[data-theme="dark"] #infrastructureStatsAoo > div .font-bold {
  /* Keep accent colors from text-*-600 remaps; do not force theme-text */
  color: inherit;
}

html[data-theme="dark"] #nationalStatsAoo > div .text-blue-600,
html[data-theme="dark"] #nationalStatsAoo > div.bg-blue-50 .font-bold { color: #7ec8f0 !important; }
html[data-theme="dark"] #nationalStatsAoo > div .text-green-600,
html[data-theme="dark"] #nationalStatsAoo > div.bg-green-50 .font-bold { color: #6ee7b7 !important; }
html[data-theme="dark"] #nationalStatsAoo > div .text-purple-600,
html[data-theme="dark"] #nationalStatsAoo > div.bg-purple-50 .font-bold { color: #c4b5fd !important; }
html[data-theme="dark"] #nationalStatsAoo > div .text-yellow-600,
html[data-theme="dark"] #nationalStatsAoo > div.bg-yellow-50 .font-bold { color: #fcd34d !important; }
html[data-theme="dark"] #nationalStatsAoo > div .text-orange-600,
html[data-theme="dark"] #nationalStatsAoo > div.bg-orange-50 .font-bold { color: #fdba74 !important; }
html[data-theme="dark"] #nationalStatsAoo > div .text-indigo-600,
html[data-theme="dark"] #nationalStatsAoo > div.bg-indigo-50 .font-bold { color: #a5b4fc !important; }
html[data-theme="dark"] #nationalStatsAoo > div .text-pink-600,
html[data-theme="dark"] #nationalStatsAoo > div.bg-pink-50 .font-bold { color: #f9a8d4 !important; }
html[data-theme="dark"] #nationalStatsAoo > div .text-cyan-600,
html[data-theme="dark"] #nationalStatsAoo > div.bg-cyan-50 .font-bold { color: #67e8f9 !important; }
html[data-theme="dark"] #nationalStatsAoo > div .text-amber-600,
html[data-theme="dark"] #nationalStatsAoo > div.bg-amber-50 .font-bold { color: #fcd34d !important; }
html[data-theme="dark"] #nationalStatsAoo > div .text-lime-600,
html[data-theme="dark"] #nationalStatsAoo > div.bg-lime-50 .font-bold { color: #bef264 !important; }
html[data-theme="dark"] #nationalStatsAoo > div .text-emerald-600,
html[data-theme="dark"] #nationalStatsAoo > div.bg-emerald-50 .font-bold { color: #6ee7b7 !important; }
html[data-theme="dark"] #nationalStatsAoo > div .text-teal-600,
html[data-theme="dark"] #nationalStatsAoo > div.bg-teal-50 .font-bold { color: #5eead4 !important; }
html[data-theme="dark"] #nationalStatsAoo > div .text-violet-600,
html[data-theme="dark"] #nationalStatsAoo > div.bg-violet-50 .font-bold { color: #c4b5fd !important; }

html[data-theme="dark"] #infrastructureStatsAoo > div .text-red-600,
html[data-theme="dark"] #infrastructureStatsAoo > div.bg-red-50 .font-bold { color: #f587a0 !important; }
html[data-theme="dark"] #infrastructureStatsAoo > div .text-gray-600.font-bold,
html[data-theme="dark"] #infrastructureStatsAoo > div.bg-gray-50 .font-bold { color: var(--theme-text) !important; }
html[data-theme="dark"] #infrastructureStatsAoo > div .text-indigo-600,
html[data-theme="dark"] #infrastructureStatsAoo > div.bg-indigo-50 .font-bold { color: #a5b4fc !important; }
html[data-theme="dark"] #infrastructureStatsAoo > div .text-teal-600,
html[data-theme="dark"] #infrastructureStatsAoo > div.bg-teal-50 .font-bold { color: #5eead4 !important; }
html[data-theme="dark"] #infrastructureStatsAoo > div .text-yellow-600,
html[data-theme="dark"] #infrastructureStatsAoo > div.bg-yellow-50 .font-bold { color: #fcd34d !important; }

/* Subtle left accent so tiles keep their color identity on shared dark fills */
html[data-theme="dark"] #nationalStatsAoo > div.bg-blue-50,
html[data-theme="dark"] #infrastructureStatsAoo > div.bg-blue-50 { box-shadow: inset 4px 0 0 #3b9dd6, var(--theme-shadow) !important; }
html[data-theme="dark"] #nationalStatsAoo > div.bg-green-50 { box-shadow: inset 4px 0 0 #34d399, var(--theme-shadow) !important; }
html[data-theme="dark"] #nationalStatsAoo > div.bg-purple-50 { box-shadow: inset 4px 0 0 #a78bfa, var(--theme-shadow) !important; }
html[data-theme="dark"] #nationalStatsAoo > div.bg-yellow-50,
html[data-theme="dark"] #infrastructureStatsAoo > div.bg-yellow-50 { box-shadow: inset 4px 0 0 #fbbf24, var(--theme-shadow) !important; }
html[data-theme="dark"] #nationalStatsAoo > div.bg-orange-50 { box-shadow: inset 4px 0 0 #fb923c, var(--theme-shadow) !important; }
html[data-theme="dark"] #nationalStatsAoo > div.bg-indigo-50,
html[data-theme="dark"] #infrastructureStatsAoo > div.bg-indigo-50 { box-shadow: inset 4px 0 0 #818cf8, var(--theme-shadow) !important; }
html[data-theme="dark"] #nationalStatsAoo > div.bg-pink-50 { box-shadow: inset 4px 0 0 #f472b6, var(--theme-shadow) !important; }
html[data-theme="dark"] #nationalStatsAoo > div.bg-cyan-50 { box-shadow: inset 4px 0 0 #22d3ee, var(--theme-shadow) !important; }
html[data-theme="dark"] #nationalStatsAoo > div.bg-amber-50 { box-shadow: inset 4px 0 0 #fbbf24, var(--theme-shadow) !important; }
html[data-theme="dark"] #nationalStatsAoo > div.bg-lime-50 { box-shadow: inset 4px 0 0 #a3e635, var(--theme-shadow) !important; }
html[data-theme="dark"] #nationalStatsAoo > div.bg-emerald-50 { box-shadow: inset 4px 0 0 #34d399, var(--theme-shadow) !important; }
html[data-theme="dark"] #nationalStatsAoo > div.bg-teal-50,
html[data-theme="dark"] #infrastructureStatsAoo > div.bg-teal-50 { box-shadow: inset 4px 0 0 #2dd4bf, var(--theme-shadow) !important; }
html[data-theme="dark"] #nationalStatsAoo > div.bg-violet-50 { box-shadow: inset 4px 0 0 #a78bfa, var(--theme-shadow) !important; }
html[data-theme="dark"] #infrastructureStatsAoo > div.bg-red-50 { box-shadow: inset 4px 0 0 #e84a6f, var(--theme-shadow) !important; }
html[data-theme="dark"] #infrastructureStatsAoo > div.bg-gray-50 { box-shadow: inset 4px 0 0 #94a3b8, var(--theme-shadow) !important; }

/* ---- Admin panel tables: force readable contrast (beats Tailwind CDN) ---- */
html[data-theme="dark"] body.admin-panel-body table tbody td,
html[data-theme="dark"] body.admin-panel-body table tbody td.text-gray-900,
html[data-theme="dark"] body.admin-panel-body table tbody td.text-sm,
html[data-theme="dark"] body.admin-panel-body table tbody .text-gray-900 {
  color: var(--theme-text) !important;
}

html[data-theme="dark"] body.admin-panel-body table thead:not(.table-header-brand) th,
html[data-theme="dark"] body.admin-panel-body table thead:not(.table-header-brand) th.bg-gray-50,
html[data-theme="dark"] body.admin-panel-body table thead:not(.table-header-brand) tr.bg-gray-50,
html[data-theme="dark"] body.admin-panel-body table thead.sticky th {
  background-color: var(--theme-bg-muted) !important;
  color: var(--theme-text-secondary) !important;
}

/* ---- Task Management: readable dark mode (description, comments, selects, file) ---- */
html[data-theme="dark"] #tasksContent,
html[data-theme="dark"] #tasksContent select,
html[data-theme="dark"] #tasksContent input,
html[data-theme="dark"] #tasksContent textarea {
  color-scheme: dark;
}

html[data-theme="dark"] #tasksContent .task-detail-card,
html[data-theme="dark"] #tasksContent .bg-white {
  background-color: var(--theme-card) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

html[data-theme="dark"] #tasksContent h2,
html[data-theme="dark"] #tasksContent h3,
html[data-theme="dark"] #tasksContent h4,
html[data-theme="dark"] #tasksContent .font-semibold,
html[data-theme="dark"] #tasksContent .font-medium,
html[data-theme="dark"] #tasksContent #tdTitle,
html[data-theme="dark"] #tasksContent .text-gray-900,
html[data-theme="dark"] #tasksContent .text-gray-800 {
  color: var(--theme-text) !important;
}

html[data-theme="dark"] #tasksContent .task-desc-body,
html[data-theme="dark"] #tasksContent .task-desc-body *,
html[data-theme="dark"] #tasksContent #tdDescView,
html[data-theme="dark"] #tasksContent #tdDescView *,
html[data-theme="dark"] #tasksContent .task-comment-body,
html[data-theme="dark"] #tasksContent .task-comment-body *,
html[data-theme="dark"] #tasksContent .prose,
html[data-theme="dark"] #tasksContent .prose * {
  color: var(--theme-text) !important;
  background-color: transparent !important;
}

html[data-theme="dark"] #tasksContent .task-desc-body .text-gray-400,
html[data-theme="dark"] #tasksContent #tdDescView .text-gray-400,
html[data-theme="dark"] #tasksContent .text-gray-400 {
  color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] #tasksContent .text-gray-500,
html[data-theme="dark"] #tasksContent .text-gray-600 {
  color: var(--theme-text-secondary) !important;
}

html[data-theme="dark"] #tasksContent select,
html[data-theme="dark"] #tasksContent textarea,
html[data-theme="dark"] #tasksContent input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme="dark"] #tasksContent #tdTitle {
  background-color: var(--theme-input-bg) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border-strong) !important;
}

html[data-theme="dark"] #tasksContent select option {
  background-color: var(--theme-input-bg) !important;
  color: var(--theme-text) !important;
}

html[data-theme="dark"] #tasksContent .task-file-input,
html[data-theme="dark"] #tasksContent input[type="file"] {
  color: var(--theme-text-secondary) !important;
}

html[data-theme="dark"] #tasksContent .task-comment-card {
  background-color: var(--theme-bg-muted) !important;
  border-color: var(--theme-border) !important;
}

html[data-theme="dark"] #tasksContent .bg-gray-100 {
  background-color: var(--theme-bg-muted) !important;
}

html[data-theme="dark"] #tasksContent .divide-y > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--theme-border) !important;
}