/**
 * AIVANTA — Neon Glass UI (ThemeForest / ui-screens fidelity)
 * Matches Faivra-style: frosted glass cards, light streaks, neon KPI/table chrome
 *
 * Theme tokens: assets/css/tokens.css (imported below)
 * Customize light/dark by editing tokens — reuse vars everywhere.
 *
 * TOC:
 * 0. Design tokens
 * 1. Page atmosphere
 * 2. Glass surfaces
 * 3. KPI neon cards
 * 4. Tables / toolbar / pagination
 * 5. Sidebar upgrade + theme switch
 * 6. Buttons / header
 * 7. Light / dark semantic remaps
 */
@import url("./tokens.css");
@import url("./components.css");

/* --------------------------------------------------------------------------
   1. Page atmosphere — flowing blue/violet light streaks
   -------------------------------------------------------------------------- */
body.bg-midnight,
body {
  background-color: var(--av-bg) !important;
  color: var(--av-text);
  background-image:
    radial-gradient(ellipse 90% 60% at 10% -5%, var(--av-atmosphere-1), transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 0%, var(--av-atmosphere-2), transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 30%, var(--av-atmosphere-3), transparent 60%) !important;
  background-attachment: fixed;
  font-family: var(--av-font-sans);
}

#main-content {
  background: transparent;
  margin-left: var(--av-sidebar-width) !important;
  overflow-x: hidden;
  min-width: 0;
}
/* Modals / overlays above sticky header (z-60) — always viewport-fixed */
.app-modal,
#command-palette-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 120 !important;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  margin: 0 !important;
  width: 100vw !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.app-modal.flex,
#command-palette-modal.flex {
  display: flex !important;
}
.app-modal.hidden,
#command-palette-modal.hidden {
  display: none !important;
}
.app-modal > .card-dark {
  position: relative;
  z-index: 1;
  max-height: min(90vh, 42rem);
  overflow-y: auto;
  width: 100%;
}
/* Modal titles stay readable in light + dark (outside #main-content remaps) */
html.light .app-modal > .card-dark > .flex h3,
html.light .app-modal > .card-dark h3.text-white,
body.light .app-modal > .card-dark h3 {
  color: #0F172A !important;
}
html.light .app-modal > .card-dark .text-white,
body.light .app-modal > .card-dark .text-white {
  color: #0F172A !important;
}
html.dark .app-modal > .card-dark h3,
html:not(.light) .app-modal > .card-dark h3,
html.dark .app-modal > .card-dark .text-white {
  color: #FFFFFF !important;
}
.toast-container,
#toast-container,
[data-toast-root] {
  z-index: 130 !important;
}
#main-content > header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--av-header-height) !important;
  min-height: var(--av-header-height) !important;
  padding: 0 18px 0 18px !important;
  background: var(--av-header) !important;
  border-bottom: 1px solid var(--av-border-soft);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
#main-content > header .dropdown-menu {
  z-index: 80 !important;
}
#main-content > header .dropdown-menu.show {
  display: block !important;
}
#main-content > main {
  position: relative;
  isolation: isolate;
  z-index: 0;
  padding: 14px 14px 18px !important;
}
#main-content > header .flex-1.min-w-0.max-w-xl {
  max-width: 560px;
}
#app-sidebar {
  width: var(--av-sidebar-width) !important;
}
#main-content > main > * {
  position: relative;
  z-index: 1;
  margin-bottom: 0 !important;
}
#main-content > main > * + * {
  margin-top: 12px !important;
}
#app-sidebar .sidebar-brand-wrapper {
  height: 64px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}
#app-sidebar .sidebar-link {
  min-height: 36px;
  padding: 0.58rem 0.72rem !important;
  border-radius: 10px !important;
  gap: 0.65rem !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}
#app-sidebar .has-submenu > [data-submenu-toggle] {
  min-height: 36px;
}
#app-sidebar .submenu-items {
  margin-left: 1rem !important;
  padding-left: 0.72rem !important;
  padding-right: 0.2rem !important;
  margin-top: 0.3rem !important;
  margin-bottom: 0.3rem !important;
}
#app-sidebar .submenu-items .sidebar-link {
  min-height: 32px;
  padding: 0.45rem 0.6rem !important;
  font-size: 11.5px !important;
}
#app-sidebar .sidebar-footer-card {
  padding: 10px 10px 8px !important;
}
#main-content > main::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 280px;
  max-height: 40vh;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 50% 65% at 10% 0%, var(--av-atmosphere-1), transparent 70%),
    radial-gradient(ellipse 45% 60% at 92% 0%, var(--av-atmosphere-2), transparent 68%),
    linear-gradient(180deg, rgba(var(--av-blue-rgb), 0.06) 0%, transparent 80%);
  filter: blur(22px);
  opacity: 0.7;
}
html.light #main-content > main::before,
body.light #main-content > main::before {
  opacity: 0.45;
  height: 220px;
}
#main-content > main::after {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(90deg, transparent, var(--av-streak), transparent);
  opacity: 0.45;
}

/* --------------------------------------------------------------------------
   2. Glass surfaces
   -------------------------------------------------------------------------- */
.card-dark {
  background: var(--av-glass) !important;
  color: var(--av-text);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--av-border-soft) !important;
  border-radius: var(--av-radius-lg);
  box-shadow: var(--av-shadow-card) !important;
}
#app-sidebar {
  background: var(--av-sidebar) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-right: 1px solid var(--av-border-soft) !important;
}
#app-sidebar,
#app-sidebar .sidebar-nav-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#app-sidebar::-webkit-scrollbar,
#app-sidebar .sidebar-nav-scroll::-webkit-scrollbar {
  width: 0 !important;
  display: none !important;
}
#app-sidebar .sidebar-link,
#app-sidebar .submenu-items .sidebar-link {
  transition: background-color var(--av-duration) var(--av-ease), color var(--av-duration) var(--av-ease), box-shadow var(--av-duration) var(--av-ease), transform var(--av-duration) var(--av-ease);
}
#app-sidebar .sidebar-link:hover,
#app-sidebar .submenu-items .sidebar-link:hover {
  transform: translateX(1px);
  background: var(--av-nav-hover) !important;
  color: var(--av-text) !important;
}
#app-sidebar .has-submenu.open > [data-submenu-toggle] {
  background: rgba(148, 163, 184, 0.12) !important;
  color: var(--av-text) !important;
}
#app-sidebar .nav-item-active,
#app-sidebar a.nav-item-active {
  background: var(--av-gradient-nav) !important;
  color: #FFFFFF !important;
  box-shadow: var(--av-shadow-nav) !important;
}
#app-sidebar .nav-item-active:hover,
#app-sidebar a.nav-item-active:hover {
  color: #FFFFFF !important;
  transform: none;
}

/* --------------------------------------------------------------------------
   3. KPI neon cards
   -------------------------------------------------------------------------- */
/* Equal-height KPI rows wherever the 4-up grid is used */
.grid:has(> .kpi-neon) {
  align-items: stretch;
}
.kpi-neon {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 108px;
  height: 100%;
  overflow: hidden;
  position: relative;
  padding: 1.1rem 1.2rem !important;
  border-radius: var(--av-radius-xl) !important;
  border: 1px solid var(--av-border-soft) !important;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.07) 0%, transparent 42%),
    var(--av-glass) !important;
  color: var(--av-text);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--av-shadow-card) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.kpi-neon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 100% 100%, rgba(22, 139, 255, 0.1), transparent 48%);
  opacity: 0.85;
}
.kpi-neon::after {
  content: '';
  position: absolute;
  right: -32px;
  bottom: -46px;
  width: 120px;
  height: 120px;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(85, 69, 234, 0.14), transparent 70%);
  pointer-events: none;
}
.kpi-neon > .flex.items-center {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - 84px);
}
.kpi-neon .kpi-side {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  min-width: 72px;
}
.kpi-neon .kpi-side > [data-sparkline],
.kpi-neon .kpi-side > [id^="sparkline-"],
.kpi-neon > [data-sparkline],
.kpi-neon > [id^="sparkline-"] {
  position: relative;
  z-index: 1;
  flex: 0 0 68px !important;
  width: 68px !important;
  max-width: 68px !important;
  height: 36px !important;
  margin-left: 0 !important;
}
.kpi-neon .kpi-side > .text-xs {
  white-space: nowrap;
  line-height: 1 !important;
}
.kpi-neon .flex-1,
.kpi-neon .min-w-0 {
  overflow: visible !important;
}
.kpi-neon h3 {
  font-size: 1.5rem !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em;
  text-shadow: 0 0 24px rgba(255, 255, 255, 0.08);
}
.kpi-neon .text-xs.text-slate-400,
.kpi-neon span.truncate,
.kpi-neon .leading-snug {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
  max-width: none !important;
}
.kpi-neon:hover {
  transform: translateY(-2px);
}
.kpi-neon.hover\:border-accent-blue\/40:hover {
  border-color: rgba(22, 139, 255, 0.55) !important;
  box-shadow: 0 20px 44px -14px rgba(22, 139, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
.kpi-neon.hover\:border-accent-violet\/40:hover {
  border-color: rgba(85, 69, 234, 0.55) !important;
  box-shadow: 0 20px 44px -14px rgba(85, 69, 234, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
.kpi-neon.hover\:border-accent-emerald\/40:hover {
  border-color: rgba(18, 201, 149, 0.5) !important;
  box-shadow: 0 20px 44px -14px rgba(18, 201, 149, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
.kpi-neon.hover\:border-amber-500\/40:hover {
  border-color: rgba(245, 158, 11, 0.5) !important;
  box-shadow: 0 20px 44px -14px rgba(245, 158, 11, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
.kpi-neon .w-11.h-11 {
  width: 2.75rem !important;
  height: 2.75rem !important;
  border-radius: 0.9rem !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 18px -6px currentColor,
    0 8px 16px -10px rgba(0, 0, 0, 0.5);
}
.kpi-neon.kpi-mini {
  min-height: 92px;
  padding: 1rem 1.1rem !important;
}
.kpi-neon.kpi-mini > .flex.items-center {
  max-width: 100%;
}
.kpi-neon.kpi-mini .kpi-side {
  display: none;
}

[id^="sparkline-"],
[data-sparkline] {
  position: relative;
  overflow: hidden !important;
}
[id^="sparkline-"] .apexcharts-canvas,
[id^="sparkline-"] svg,
[data-sparkline] .apexcharts-canvas,
[data-sparkline] svg {
  overflow: hidden !important;
  max-width: 100% !important;
}

/* --------------------------------------------------------------------------
   4. Tables
   -------------------------------------------------------------------------- */
.table-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.1rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.table-toolbar::-webkit-scrollbar {
  height: 0;
  display: none;
}
/* Search grows; filters stay inline to the right */
.table-toolbar > .relative {
  flex: 1 1 auto;
  min-width: 11rem;
  max-width: none !important;
  width: auto !important;
}
.table-toolbar > .flex {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  margin-left: auto;
}
.table-toolbar select.input-control,
.table-toolbar > .flex select.input-control {
  width: auto !important;
  min-width: 7.25rem;
  flex-shrink: 0;
  padding-right: 1.75rem;
}
.table-toolbar .btn,
.table-toolbar a.btn {
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 639px) {
  .table-toolbar {
    flex-wrap: wrap;
  }
  .table-toolbar > .relative {
    flex: 1 1 100%;
    min-width: 100%;
  }
  .table-toolbar > .flex {
    margin-left: 0;
    width: 100%;
    overflow-x: auto;
  }
}
.card-dark table thead th {
  letter-spacing: 0.06em;
  font-size: 0.6875rem !important;
  color: var(--av-text-faint) !important;
  font-weight: 700 !important;
}
.card-dark table tbody tr {
  transition: background-color var(--av-duration-fast) ease;
}
.card-dark table tbody tr:hover {
  background-color: var(--av-row-hover) !important;
}
html.dark .card-dark table tbody tr:hover,
html:not(.light) .card-dark table tbody tr:hover {
  background-color: rgba(22, 139, 255, 0.08) !important;
}
html.dark .card-dark,
html:not(.light) body:not(.light) .card-dark {
  background: var(--av-glass) !important;
  border-color: var(--av-border-soft) !important;
  box-shadow: var(--av-shadow-card) !important;
}
html.dark .card-dark table tbody td,
html:not(.light) .card-dark table tbody td {
  color: var(--av-text-muted);
}
html.dark .card-dark table .lead-name,
html.dark .card-dark table .company-name,
html.dark .card-dark table .contact-name,
html.dark .card-dark table .font-bold.text-white,
html:not(.light) .card-dark table .lead-name,
html:not(.light) .card-dark table .company-name,
html:not(.light) .card-dark table .contact-name {
  color: #F8FAFC !important;
}
.card-dark table tbody td {
  padding-top: 0.65rem !important;
  padding-bottom: 0.65rem !important;
  vertical-align: middle;
}
/* Compact tables — fit viewport, hide L↔R scrollbar chrome */
.card-dark .overflow-x-auto,
.card-dark .overflow-x-auto.custom-kanban-scroll {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none; /* Firefox — hide horiz bar */
  -ms-overflow-style: none;
}
.card-dark .overflow-x-auto::-webkit-scrollbar,
.card-dark .overflow-x-auto.custom-kanban-scroll::-webkit-scrollbar {
  height: 0 !important;
  width: 0 !important;
  display: none !important;
}
/* Keep horiz scrollbar hidden; allow scroll only when truly needed */
.card-dark table {
  width: 100% !important;
  min-width: 0;
  table-layout: auto;
}
.card-dark table th,
.card-dark table td {
  padding-left: 0.55rem !important;
  padding-right: 0.55rem !important;
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
  vertical-align: middle;
}
.card-dark table tbody td {
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
}
.card-dark table td .w-9.h-9,
.card-dark table td img.w-9.h-9 {
  width: 2.15rem !important;
  height: 2.15rem !important;
  flex-shrink: 0;
}
.card-dark table td .flex.items-center.gap-3 {
  gap: 0.65rem !important;
  min-width: 0;
}
/* Checkbox column only — do NOT crush identity columns */
.card-dark table th:first-child:has(input[type="checkbox"]),
.card-dark table td:first-child:has(input[type="checkbox"]) {
  padding-left: 0.65rem !important;
  width: 2.25rem;
  min-width: 2.25rem;
  max-width: 2.5rem;
}
/* Single ⋯ actions column */
.card-dark table th:last-child:has(+ *),
.card-dark table th.text-right:last-child,
.card-dark table td:last-child {
  padding-right: 0.65rem !important;
  text-align: right;
  white-space: nowrap;
}
.card-dark table td:last-child:has(button:only-child),
.card-dark table th:last-child:is([class*="min-w-[48px]"], .w-12) {
  width: 3rem;
}
/* Soften Tailwind min-w on headers so tables fit, but keep identity readable */
.card-dark table thead th[class*="min-w-"] {
  min-width: 0 !important;
}
.card-dark table tbody td {
  min-width: 0;
}
/* Identity / email ellipsis — NOT every .font-bold (breaks Conversations names) */
.card-dark table td .lead-email,
.card-dark table td .lead-company,
.card-dark table td .truncate {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-dark table td .lead-name {
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-dark table td .text-\[11px\].text-slate-400 {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Customer cells: keep flex row usable even if td loses display:flex */
.card-dark table td > .flex.items-center,
.card-dark table td .flex.items-center.gap-3 {
  display: flex !important;
  align-items: center;
  min-width: 10rem;
}
.card-dark table .row-actions {
  justify-content: flex-end;
}
/* View Details removed from rows — actions live in ⋯ dropdown */
.card-dark table .btn-view-details,
.card-dark table a.btn-view-solid,
.card-dark table td .btn.btn-primary.text-\[11px\] {
  display: none !important;
}

.btn-view-details {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.95rem;
  border-radius: 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #168BFF 0%, #2563EB 55%, #5545EA 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 18px -8px rgba(22, 139, 255, 0.75) !important;
  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn-view-details:hover {
  color: #FFFFFF !important;
  filter: brightness(1.1);
  box-shadow: 0 12px 28px -8px rgba(22, 139, 255, 0.95) !important;
  transform: translateY(-1px);
}
/* Keep solid blue look even when row is hovered */
.card-dark table tbody tr:hover .btn-view-details {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #168BFF 0%, #2563EB 55%, #5545EA 100%) !important;
}
/* Solid blue View CTA used in Automations table */
.card-dark a.btn.btn-primary.text-\[11px\],
.card-dark .btn-view-solid {
  background: linear-gradient(135deg, #168BFF, #3B82F6) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 0.65rem !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 18px -10px rgba(22, 139, 255, 0.9);
}
.action-app-icons {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.action-app-icons span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.6);
}
.action-app-icons span i {
  width: 0.8rem;
  height: 0.8rem;
}
.table-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1.1rem;
  margin-top: 0.85rem;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}
.table-pagination .pagination-container {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.table-pagination button {
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.7rem !important;
  border-radius: 0.5rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #94A3B8 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  line-height: 1;
}
.table-pagination button:hover:not(:disabled):not(.page-active):not([aria-current="page"]) {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}
.table-pagination button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.table-pagination .btn-secondary,
.table-pagination button.btn-secondary {
  background: rgba(148, 163, 184, 0.1) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  color: #CBD5E1 !important;
  min-width: auto;
}
.table-pagination .btn-secondary:hover:not(:disabled),
.table-pagination button.btn-secondary:hover:not(:disabled) {
  background: rgba(148, 163, 184, 0.18) !important;
  color: #FFFFFF !important;
}
.table-pagination .page-active,
.table-pagination button[aria-current="page"],
.table-pagination button.bg-accent-violet,
.table-pagination button.bg-accent-blue,
.table-pagination button.bg-gradient-primary {
  background: linear-gradient(135deg, #5545EA, #168BFF) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px -6px rgba(85, 69, 234, 0.7) !important;
}
.table-pagination .pagination-ellipsis {
  color: #64748B;
  user-select: none;
}

/* --------------------------------------------------------------------------
   5. Sidebar upgrade + theme switch
   -------------------------------------------------------------------------- */
#app-sidebar .nav-item-active,
#sidebar-nav a.nav-item-active {
  background: linear-gradient(90deg, #4F46E5 0%, #2563EB 100%) !important;
  box-shadow: 0 10px 26px -8px rgba(79, 70, 229, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
.sidebar-footer-card .upgrade-pro-card,
.sidebar-footer-card > .px-2\.5.py-2.rounded-lg {
  display: block !important;
  padding: 0.85rem !important;
  background: linear-gradient(145deg, rgba(85, 69, 234, 0.22), rgba(22, 139, 255, 0.08)) !important;
  border: 1px solid rgba(85, 69, 234, 0.4) !important;
  border-radius: 0.95rem !important;
  box-shadow: 0 12px 28px -14px rgba(85, 69, 234, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.sidebar-footer-card .upgrade-pro-card .btn-primary {
  display: inline-flex;
  width: 100%;
}
.theme-switch-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.35rem;
  padding: 0.35rem;
  border-radius: 9999px;
  background: rgba(8, 15, 37, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.14);
}
.theme-switch-pill button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  height: 1.85rem;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 600;
  color: #94A3B8;
  background: transparent;
  border: none;
  cursor: pointer;
}
.theme-switch-pill button.active {
  background: linear-gradient(135deg, #168BFF, #5545EA);
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(22, 139, 255, 0.65);
}

/* --------------------------------------------------------------------------
   6. Buttons / header
   -------------------------------------------------------------------------- */
.btn-primary {
  background: linear-gradient(135deg, #168BFF 0%, #5545EA 100%) !important;
  box-shadow: 0 10px 26px -8px rgba(22, 139, 255, 0.7) !important;
  border: none !important;
}
.btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
[data-command-palette-trigger] > div {
  display: flex !important;
  align-items: center !important;
  background: rgba(17, 26, 56, 0.65) !important;
  backdrop-filter: blur(12px);
  border-color: rgba(148, 163, 184, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
[data-command-palette-trigger] kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-left: auto;
  flex-shrink: 0;
}
/* input-control base + states live in the forms section below */

/* Plan + status badges (neon glass pills) */
.card-dark table td span.inline-flex.items-center.rounded-full,
.card-dark table td span.inline-flex.items-center.gap-1,
.card-dark table td span.inline-flex.items-center.gap-1\.5 {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 6px 14px -8px rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(8px);
}
.card-dark table td span.bg-accent-violet\/15,
.card-dark table td span.bg-accent-violet\/20 {
  background: rgba(85, 69, 234, 0.18) !important;
  box-shadow: 0 0 16px -6px rgba(85, 69, 234, 0.55);
}
.card-dark table td span.bg-accent-blue\/15,
.card-dark table td span.bg-accent-blue\/20 {
  background: rgba(22, 139, 255, 0.16) !important;
  box-shadow: 0 0 16px -6px rgba(22, 139, 255, 0.5);
}
.card-dark table td span.bg-accent-emerald\/15,
.card-dark table td span.bg-accent-emerald\/10 {
  background: rgba(18, 201, 149, 0.14) !important;
  box-shadow: 0 0 16px -6px rgba(18, 201, 149, 0.45);
}
.card-dark table td span.bg-orange-500\/10 {
  background: rgba(249, 115, 22, 0.14) !important;
  box-shadow: 0 0 16px -6px rgba(249, 115, 22, 0.45);
}
.card-dark table td span.bg-rose-500\/10,
.card-dark table td span.bg-accent-rose\/15 {
  background: rgba(244, 63, 94, 0.14) !important;
  box-shadow: 0 0 16px -6px rgba(244, 63, 94, 0.45);
}
.card-dark table td span.bg-slate-500\/15 {
  background: rgba(100, 116, 139, 0.16) !important;
}

/* Status glow dots */
.card-dark table .rounded-full.bg-accent-emerald,
span.w-1\.5.h-1\.5.rounded-full.bg-accent-emerald {
  box-shadow: 0 0 10px rgba(18, 201, 149, 0.95);
}
span.w-1\.5.h-1\.5.rounded-full.bg-orange-400 {
  box-shadow: 0 0 10px rgba(251, 146, 60, 0.95);
}
span.w-1\.5.h-1\.5.rounded-full.bg-accent-rose,
span.w-1\.5.h-1\.5.rounded-full.bg-rose-400 {
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.95);
}

/* Identity text wrappers */
.card-dark table td .min-w-0 {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.card-dark table td .flex.items-center {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   7. Theme remaps — driven by tokens.css (no duplicate hex palettes)
   -------------------------------------------------------------------------- */
html.light body.bg-midnight,
body.light.bg-midnight,
html.light .bg-midnight,
body.light .bg-midnight,
html.light .bg-midnight-light,
body.light .bg-midnight-light {
  background-color: var(--av-bg) !important;
}

html.light .card-dark,
html.light .card-dark,
html.light .kpi-neon,
body.light .card-dark,
body.light .kpi-neon {
  background: var(--av-glass-strong) !important;
  border-color: var(--av-border-soft) !important;
  box-shadow: var(--av-shadow-card) !important;
  color: var(--av-text) !important;
}
html.light .kpi-neon::before,
body.light .kpi-neon::before {
  background: radial-gradient(circle at 100% 100%, rgba(22, 139, 255, 0.06), transparent 50%);
  opacity: 1;
}
html.light .kpi-neon::after,
body.light .kpi-neon::after {
  background: radial-gradient(circle, rgba(85, 69, 234, 0.07), transparent 70%);
}
html.light .kpi-neon .w-11.h-11,
body.light .kpi-neon .w-11.h-11 {
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.04),
    0 0 14px -8px currentColor,
    0 8px 14px -12px rgba(15, 23, 42, 0.18);
}
html.light .kpi-neon h3,
body.light .kpi-neon h3 {
  color: var(--av-text) !important;
  text-shadow: none;
}
html.light .kpi-neon .text-xs.text-slate-400,
html.light .kpi-neon .leading-snug,
body.light .kpi-neon .text-xs.text-slate-400,
body.light .kpi-neon .leading-snug {
  color: var(--av-text-faint) !important;
}

/* Text: dark copy on light surfaces — but keep white on filled CTAs / active nav */
/* Remap white→dark only inside the admin chrome — never auth dark panels */
html.light #app-sidebar .text-white:not(.nav-item-active):not(.btn-primary),
html.light #main-content .text-white:not(.btn):not(.btn-primary):not(.btn-view-details):not(.nav-item-active):not(.page-active):not(.badge):not([class*="bg-accent"]),
html.light #main-content h1.text-white,
html.light #main-content h2.text-white,
html.light #main-content h3.text-white,
body.light #main-content .text-white:not(.btn):not(.btn-primary):not(.btn-view-details):not(.nav-item-active):not(.page-active) {
  color: var(--av-text) !important;
}
html.light .btn-primary,
html.light .btn-view-details,
html.light .btn-view-solid,
html.light a.btn.btn-primary,
html.light .nav-item-active,
html.light .nav-item-active *,
html.light #sidebar-nav a.nav-item-active,
html.light #sidebar-nav a.nav-item-active span,
html.light #sidebar-nav a.nav-item-active i,
html.light #sidebar-nav a.nav-item-active .sidebar-text,
html.light .page-active,
html.light .theme-switch-pill button.active,
html.light .theme-switch-pill button.active *,
html.light .upgrade-pro-card .btn-primary,
html.light .upgrade-pro-card .btn-primary *,
body.light .btn-primary,
body.light .btn-view-details,
body.light .nav-item-active,
body.light .nav-item-active *,
body.light .page-active,
body.light .theme-switch-pill button.active {
  color: #FFFFFF !important;
}

/* Auth brand + form panels — light theme = light, dark theme = dark */
.auth-dark-panel,
.auth-dark-panel * {
  color: inherit;
}

/* Light: brand panel stays light (no forced navy) */
html.light .auth-dark-panel,
body.light .auth-dark-panel {
  background: linear-gradient(155deg, #F8FAFC 0%, #EEF2FF 55%, #E0E7FF 100%) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  color: #0F172A !important;
}
html.light .auth-dark-panel .text-white,
html.light .auth-dark-panel span.text-white,
html.light .auth-dark-panel h1,
html.light .auth-dark-panel h2,
html.light .auth-dark-panel h3,
body.light .auth-dark-panel .text-white,
body.light .auth-dark-panel h2 {
  color: #0F172A !important;
}
html.light .auth-dark-panel .text-slate-400,
html.light .auth-dark-panel .text-slate-300,
html.light .auth-dark-panel .text-slate-200,
html.light .auth-dark-panel .text-slate-500,
html.light .auth-dark-panel p,
body.light .auth-dark-panel .text-slate-400,
body.light .auth-dark-panel .text-slate-300,
body.light .auth-dark-panel p {
  color: #64748B !important;
}
html.light .auth-dark-panel .text-accent-blue,
body.light .auth-dark-panel .text-accent-blue {
  color: #2563EB !important;
}
html.light .auth-dark-panel .text-accent-emerald,
body.light .auth-dark-panel .text-accent-emerald {
  color: #059669 !important;
}
html.light .auth-dark-panel [class*="bg-midnight"],
html.light .auth-dark-panel .bg-midnight\/80,
html.light .auth-dark-panel [class*="bg-surface"],
body.light .auth-dark-panel [class*="bg-midnight"] {
  background-color: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  color: #475569 !important;
}

/* Dark: brand panel stays dark */
html.dark .auth-dark-panel,
html:not(.light) .auth-dark-panel,
body.dark .auth-dark-panel {
  background: linear-gradient(155deg, #0B1224 0%, #121A36 48%, rgba(85, 69, 234, 0.28) 100%) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  color: #E2E8F0 !important;
}
html.dark .auth-dark-panel .text-white,
html:not(.light) .auth-dark-panel .text-white,
html.dark .auth-dark-panel h2,
html:not(.light) .auth-dark-panel h2,
body.dark .auth-dark-panel .text-white {
  color: #FFFFFF !important;
}
html.dark .auth-dark-panel [class*="bg-midnight"],
html.dark .auth-dark-panel [class*="bg-surface"],
html:not(.light) .auth-dark-panel [class*="bg-midnight"],
body.dark .auth-dark-panel [class*="bg-midnight"] {
  background-color: rgba(2, 6, 23, 0.72) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: #CBD5E1 !important;
}

/* Auth form side — light = dark text, dark = light text */
html.light .auth-form-panel .text-white,
html.light .auth-form-panel h2.text-white,
html.light .auth-form-panel h1.text-white,
html.light .auth-form-panel span.text-white,
html.light .auth-form-panel a:hover,
body.light .auth-form-panel .text-white,
body.light .auth-form-panel h2 {
  color: #0F172A !important;
}
html.light .auth-form-panel a.hover\:text-white:hover,
body.light .auth-form-panel a:hover {
  color: #2563EB !important;
}
html.light .auth-form-panel .text-slate-300,
html.light .auth-form-panel label,
body.light .auth-form-panel .text-slate-300,
body.light .auth-form-panel label {
  color: #334155 !important;
}
html.light .auth-form-panel .text-slate-400,
body.light .auth-form-panel .text-slate-400 {
  color: #64748B !important;
}
html.light .auth-form-panel .bg-slate-800,
body.light .auth-form-panel .bg-slate-800 {
  background-color: #E2E8F0 !important;
}
html.dark .auth-form-panel .text-white,
html:not(.light) .auth-form-panel .text-white,
html.dark .auth-form-panel h2,
html:not(.light) .auth-form-panel h2 {
  color: #FFFFFF !important;
}
html.dark .auth-form-panel label,
html.dark .auth-form-panel .text-slate-300,
html:not(.light) .auth-form-panel label {
  color: #CBD5E1 !important;
}

/* Standalone error / status pages outside #main-content */
html.light body.error-shell,
body.light.error-shell,
html.light body.error-shell.bg-midnight {
  background-color: #F1F5F9 !important;
  color: #0F172A !important;
}
html.light .error-shell .text-white,
html.light body.error-shell .text-white,
html.light body.error-shell h1,
html.light body.error-shell h2,
html.light body.error-shell h1.text-white,
body.light.error-shell .text-white,
body.light.error-shell h1 {
  color: #0F172A !important;
}
html.light body.error-shell .text-slate-400,
html.light body.error-shell .text-slate-300,
html.light body.error-shell .text-slate-500,
body.light.error-shell .text-slate-400 {
  color: #64748B !important;
}
html.light body.error-shell .card-dark,
body.light.error-shell .card-dark {
  background: #FFFFFF !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
  color: #0F172A !important;
}
html.light body.error-shell .card-dark .text-white,
html.light body.error-shell .card-dark .font-extrabold.text-white,
html.light body.error-shell .card-dark .font-mono.text-white,
body.light.error-shell .card-dark .text-white {
  color: #0F172A !important;
}
html.light body.error-shell .bg-clip-text.text-transparent,
body.light.error-shell .bg-clip-text.text-transparent {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

html.light .text-slate-400,
html.light .text-slate-500,
html.light .text-slate-300,
html.light .text-slate-200,
body.light .text-slate-400,
body.light .text-slate-500,
body.light .text-slate-300,
body.light .text-slate-200 {
  color: var(--av-text-soft) !important;
}

html.light .border-surface-border,
html.light .border-slate-700,
html.light .border-slate-600,
body.light .border-surface-border {
  border-color: var(--av-border-soft) !important;
}

/* --------------------------------------------------------------------------
   Forms — hover / focus / disabled (light + dark via tokens)
   -------------------------------------------------------------------------- */
.input-control,
select.input-control,
textarea.input-control {
  background: var(--av-input-bg) !important;
  border: 1px solid var(--av-input-border) !important;
  color: var(--av-text) !important;
  box-shadow: none;
  transition:
    border-color var(--av-duration-fast) var(--av-ease),
    box-shadow var(--av-duration-fast) var(--av-ease),
    background-color var(--av-duration-fast) var(--av-ease);
}
.input-control::placeholder,
textarea.input-control::placeholder {
  color: var(--av-placeholder) !important;
}
.input-control:hover:not(:disabled):not(:focus):not(:focus-visible),
select.input-control:hover:not(:disabled):not(:focus):not(:focus-visible),
textarea.input-control:hover:not(:disabled):not(:focus):not(:focus-visible) {
  background: var(--av-input-hover-bg) !important;
  border-color: var(--av-input-hover-border) !important;
}
.input-control:focus,
.input-control:focus-visible,
select.input-control:focus,
select.input-control:focus-visible,
textarea.input-control:focus,
textarea.input-control:focus-visible {
  outline: none !important;
  background: var(--av-input-focus-bg) !important;
  border-color: var(--av-input-focus-border) !important;
  box-shadow: 0 0 0 3px var(--av-input-focus-ring) !important;
}
.input-control:disabled,
select.input-control:disabled,
textarea.input-control:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--av-surface-subtle) !important;
}
.input-control:active:not(:disabled),
select.input-control:active:not(:disabled) {
  border-color: var(--av-input-focus-border) !important;
}

/* Header command search — same hover/focus language */
[data-command-palette-trigger] > div {
  border: 1px solid var(--av-input-border) !important;
  background: var(--av-input-bg) !important;
  color: var(--av-text-soft) !important;
  transition:
    border-color var(--av-duration-fast) var(--av-ease),
    box-shadow var(--av-duration-fast) var(--av-ease),
    background-color var(--av-duration-fast) var(--av-ease);
}
[data-command-palette-trigger]:hover > div {
  background: var(--av-input-hover-bg) !important;
  border-color: var(--av-input-hover-border) !important;
}
[data-command-palette-trigger]:focus-within > div,
[data-command-palette-trigger].is-open > div {
  background: var(--av-input-focus-bg) !important;
  border-color: var(--av-input-focus-border) !important;
  box-shadow:
    0 0 0 3px var(--av-input-focus-ring),
    0 0 0 1px var(--av-input-focus-border) !important;
}
html.light [data-command-palette-trigger] > div,
body.light [data-command-palette-trigger] > div {
  background: var(--av-input-bg) !important;
  border-color: var(--av-input-border) !important;
  box-shadow: none !important;
  color: var(--av-text-soft) !important;
}

/* Generic bordered inputs used outside .input-control (chat composers, etc.) */
#main-content input[type="text"]:not(.input-control):not([class*="sr-only"]),
#main-content input[type="email"]:not(.input-control),
#main-content input[type="search"]:not(.input-control),
#main-content input[type="number"]:not(.input-control),
#main-content input[type="password"]:not(.input-control),
#main-content textarea:not(.input-control),
#main-content select:not(.input-control) {
  transition:
    border-color var(--av-duration-fast) var(--av-ease),
    box-shadow var(--av-duration-fast) var(--av-ease),
    background-color var(--av-duration-fast) var(--av-ease);
}
#main-content input[type="text"]:not(.input-control):not([class*="sr-only"]):hover:not(:disabled):not(:focus),
#main-content input[type="email"]:not(.input-control):hover:not(:disabled):not(:focus),
#main-content input[type="search"]:not(.input-control):hover:not(:disabled):not(:focus),
#main-content input[type="number"]:not(.input-control):hover:not(:disabled):not(:focus),
#main-content input[type="password"]:not(.input-control):hover:not(:disabled):not(:focus),
#main-content textarea:not(.input-control):hover:not(:disabled):not(:focus),
#main-content select:not(.input-control):hover:not(:disabled):not(:focus) {
  border-color: var(--av-input-hover-border) !important;
}
#main-content input[type="text"]:not(.input-control):not([class*="sr-only"]):focus,
#main-content input[type="text"]:not(.input-control):not([class*="sr-only"]):focus-visible,
#main-content input[type="email"]:not(.input-control):focus,
#main-content input[type="search"]:not(.input-control):focus,
#main-content input[type="number"]:not(.input-control):focus,
#main-content input[type="password"]:not(.input-control):focus,
#main-content textarea:not(.input-control):focus,
#main-content select:not(.input-control):focus {
  outline: none !important;
  border-color: var(--av-input-focus-border) !important;
  box-shadow: 0 0 0 3px var(--av-input-focus-ring) !important;
}
.app-modal .input-control:focus,
.app-modal .input-control:focus-visible {
  box-shadow: 0 0 0 3px var(--av-input-focus-ring) !important;
}

.theme-switch-pill {
  background: var(--av-surface-subtle) !important;
  border-color: var(--av-border-soft) !important;
}
.theme-switch-pill button {
  color: var(--av-text-soft) !important;
}
.theme-switch-pill button.active {
  color: #FFFFFF !important;
}

.sidebar-footer-card {
  border-top-color: var(--av-border-soft) !important;
}
html.light .sidebar-footer-card .upgrade-pro-card,
body.light .sidebar-footer-card .upgrade-pro-card {
  background: linear-gradient(145deg, rgba(var(--av-violet-rgb), 0.1), rgba(var(--av-blue-rgb), 0.06)) !important;
  border-color: rgba(var(--av-violet-rgb), 0.28) !important;
}
html.light .upgrade-pro-card .text-white,
html.light .upgrade-pro-card span.block.text-xs,
body.light .upgrade-pro-card .text-white {
  color: var(--av-text) !important;
}
html.light .upgrade-pro-card .btn-primary,
body.light .upgrade-pro-card .btn-primary {
  color: #FFFFFF !important;
}

.card-dark table thead th {
  color: var(--av-text-faint) !important;
}
html.light .card-dark table tbody tr:hover,
body.light .card-dark table tbody tr:hover {
  background-color: rgba(22, 139, 255, 0.06) !important;
}
html.light .table-pagination,
body.light .table-pagination {
  border-top-color: rgba(148, 163, 184, 0.28) !important;
  color: #64748B !important;
}
html.light .table-pagination button,
body.light .table-pagination button {
  color: #64748B !important;
  background: transparent !important;
  border-color: transparent !important;
}
html.light .table-pagination button:hover:not(:disabled):not(.page-active):not([aria-current="page"]),
body.light .table-pagination button:hover:not(:disabled):not(.page-active):not([aria-current="page"]) {
  color: #0F172A !important;
  background: rgba(22, 139, 255, 0.08) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}
html.light .table-pagination .btn-secondary,
html.light .table-pagination button.btn-secondary,
body.light .table-pagination .btn-secondary,
body.light .table-pagination button.btn-secondary {
  background: #F8FAFC !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
  color: #334155 !important;
}
html.light .table-pagination .btn-secondary:hover:not(:disabled),
html.light .table-pagination button.btn-secondary:hover:not(:disabled),
body.light .table-pagination .btn-secondary:hover:not(:disabled) {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}
html.light .table-pagination .page-active,
html.light .table-pagination button[aria-current="page"],
html.light .table-pagination button.bg-accent-blue,
html.light .table-pagination button.bg-accent-violet,
body.light .table-pagination .page-active,
body.light .table-pagination button[aria-current="page"] {
  background: linear-gradient(135deg, #5545EA, #168BFF) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px -6px rgba(85, 69, 234, 0.45) !important;
}
html.light .table-pagination .font-bold.text-white,
html.light .table-pagination strong.text-white,
body.light .table-pagination .font-bold.text-white,
body.light .table-pagination strong.text-white {
  color: #0F172A !important;
}
/* Breadcrumb bar under header */
#main-content > div.bg-midnight {
  position: relative;
  z-index: 40;
}
html.light #main-content > div.bg-midnight,
body.light #main-content > div.bg-midnight {
  background-color: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}
html.light #main-content > div.bg-midnight .text-slate-400,
html.light #main-content > div.bg-midnight .text-slate-500,
body.light #main-content > div.bg-midnight .text-slate-400,
body.light #main-content > div.bg-midnight .text-slate-500 {
  color: #64748B !important;
}
html.light #main-content > div.bg-midnight .text-slate-300,
body.light #main-content > div.bg-midnight .text-slate-300 {
  color: #334155 !important;
}
html.light footer.bg-midnight,
body.light footer.bg-midnight {
  background-color: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  color: #64748B !important;
}

html.light .bg-midnight-light,
html.light kbd.bg-midnight-light,
body.light .bg-midnight-light {
  background-color: #F1F5F9 !important;
  color: #64748B !important;
}
html.light #sidebar-nav button,
html.light #sidebar-nav a:not(.nav-item-active),
body.light #sidebar-nav button,
body.light #sidebar-nav a:not(.nav-item-active) {
  color: #475569 !important;
}
html.light #sidebar-nav .sidebar-link:hover,
html.light #sidebar-nav .submenu-items .sidebar-link:hover,
body.light #sidebar-nav .sidebar-link:hover {
  background: rgba(22, 139, 255, 0.1) !important;
  color: #0F172A !important;
}
html.light #sidebar-nav .sidebar-link:hover i,
html.light #sidebar-nav .submenu-items .sidebar-link:hover span,
body.light #sidebar-nav .sidebar-link:hover * {
  color: inherit !important;
}
/* Open section parents: soft light chip — never dark navy from bg-surface-subtle/70 */
html.light #sidebar-nav .has-submenu.open > [data-submenu-toggle],
html.light #app-sidebar .has-submenu.open > [data-submenu-toggle],
body.light #sidebar-nav .has-submenu.open > [data-submenu-toggle],
body.light #app-sidebar .has-submenu.open > [data-submenu-toggle] {
  background: rgba(22, 139, 255, 0.1) !important;
  color: #0F172A !important;
  box-shadow: none !important;
  font-weight: 600;
}
html.light #sidebar-nav .has-submenu.open > [data-submenu-toggle] i,
html.light #sidebar-nav .has-submenu.open > [data-submenu-toggle] span,
html.light #sidebar-nav .has-submenu.open > [data-submenu-toggle] .sidebar-text,
html.light #app-sidebar .has-submenu.open > [data-submenu-toggle] *,
body.light #sidebar-nav .has-submenu.open > [data-submenu-toggle] *,
body.light #app-sidebar .has-submenu.open > [data-submenu-toggle] * {
  color: #0F172A !important;
}
html.light #sidebar-nav .has-submenu.open > [data-submenu-toggle] .submenu-arrow,
html.light #app-sidebar .has-submenu.open > [data-submenu-toggle] .submenu-arrow,
body.light #sidebar-nav .has-submenu.open > [data-submenu-toggle] .submenu-arrow {
  color: #2563EB !important;
}
html.light #sidebar-nav .has-submenu.open > [data-submenu-toggle] .bg-accent-emerald,
html.light #app-sidebar .has-submenu.open > [data-submenu-toggle] .bg-accent-emerald,
body.light #sidebar-nav .has-submenu.open > [data-submenu-toggle] .bg-accent-emerald {
  background-color: #12C995 !important;
  color: transparent !important;
}
html.light #sidebar-nav .text-\[10px\],
html.light #sidebar-nav .uppercase,
body.light #sidebar-nav .uppercase {
  color: #94A3B8 !important;
}
html.light #sidebar-nav a.nav-item-active,
html.light #sidebar-nav a.nav-item-active span,
html.light #sidebar-nav a.nav-item-active i,
html.light #sidebar-nav a.nav-item-active .sidebar-text,
html.light #app-sidebar a.nav-item-active,
html.light #app-sidebar a.nav-item-active *,
body.light #sidebar-nav a.nav-item-active,
body.light #sidebar-nav a.nav-item-active *,
body.light #app-sidebar a.nav-item-active * {
  color: #FFFFFF !important;
}
html.light #sidebar-nav a.nav-item-active:hover,
html.light #sidebar-nav a.nav-item-active:hover *,
html.light #app-sidebar a.nav-item-active:hover,
html.light #app-sidebar a.nav-item-active:hover *,
body.light #sidebar-nav a.nav-item-active:hover {
  color: #FFFFFF !important;
  background: linear-gradient(90deg, #4F46E5 0%, #2563EB 100%) !important;
}
html.light #sidebar-nav .sidebar-badge,
html.light #app-sidebar .sidebar-badge {
  color: #FFFFFF !important;
  box-shadow: 0 0 12px rgba(85, 69, 234, 0.55);
}

/* Footer: Upgrade first, theme switch below */
html.light .sidebar-footer-card,
body.light .sidebar-footer-card,
.sidebar-footer-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.sidebar-footer-card .upgrade-pro-card {
  order: 1;
}
.sidebar-footer-card .theme-switch-pill {
  order: 2;
}

/* Light badges keep readable colors + soft neon */
html.light .card-dark table td span.bg-accent-violet\/15,
html.light .card-dark table td span.bg-accent-violet\/20 {
  color: #5545EA !important;
}
html.light .card-dark table td span.bg-accent-blue\/15 {
  color: #168BFF !important;
}
html.light .card-dark table td span.bg-accent-emerald\/15,
html.light .card-dark table td span.bg-accent-emerald\/10 {
  color: #059669 !important;
}
html.light .card-dark table td span.bg-orange-500\/10 {
  color: #EA580C !important;
}
html.light .card-dark table td span.bg-rose-500\/10 {
  color: #E11D48 !important;
}
html.light .card-dark table td span.bg-slate-500\/15,
html.light .card-dark table td span.bg-slate-500\/15.text-slate-300 {
  color: #475569 !important;
  background: rgba(100, 116, 139, 0.12) !important;
}

/* More (...) buttons readable on light rows */
html.light .card-dark table button.w-8.h-8:hover,
body.light .card-dark table button.w-8.h-8:hover {
  color: #0F172A !important;
  background: rgba(22, 139, 255, 0.1) !important;
  border-color: rgba(22, 139, 255, 0.35) !important;
}

/* Light modals / command palette — full contrast (modals live on body, not #main-content) */
html.light .app-modal > .card-dark,
html.light #command-palette-modal > div,
body.light .app-modal > .card-dark,
body.light #command-palette-modal > div {
  background: var(--av-glass-strong) !important;
  border-color: var(--av-border-soft) !important;
  box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.28) !important;
  color: var(--av-text) !important;
}
html.light #command-palette-modal,
body.light #command-palette-modal {
  background: var(--av-overlay) !important;
}
html.light #command-palette-modal .bg-midnight\/40,
html.light #command-palette-modal [class*="bg-midnight"],
body.light #command-palette-modal .bg-midnight\/40 {
  background-color: var(--av-surface-subtle) !important;
}
html.light .app-modal h3,
html.light .app-modal .text-white:not(.btn):not(.btn-primary):not(#row-delete-confirm),
html.light .app-modal #row-delete-name,
html.light .app-modal #row-status-name,
html.light #command-palette-modal,
body.light .app-modal h3,
body.light .app-modal .text-white:not(.btn):not(.btn-primary):not(#row-delete-confirm),
body.light .app-modal #row-delete-name,
body.light .app-modal #row-status-name {
  color: var(--av-text) !important;
}
html.light .app-modal p,
html.light .app-modal .text-slate-300,
html.light .app-modal .text-slate-400,
body.light .app-modal p,
body.light .app-modal .text-slate-300,
body.light .app-modal .text-slate-400 {
  color: var(--av-text-soft) !important;
}
html.light .app-modal #row-delete-name,
html.light .app-modal #row-status-name,
body.light .app-modal #row-delete-name,
body.light .app-modal #row-status-name {
  color: var(--av-text) !important;
  font-weight: 700;
}
html.light .app-modal [data-close-status]:hover,
html.light .app-modal [data-close-delete]:hover,
html.light .app-modal button.text-slate-400:hover,
body.light .app-modal button.text-slate-400:hover {
  color: var(--av-text) !important;
}
html.light .text-slate-100,
body.light .text-slate-100 {
  color: var(--av-text) !important;
}

/* --------------------------------------------------------------------------
   Row ⋯ CRUD action menus
   -------------------------------------------------------------------------- */
.row-actions {
  position: relative;
  z-index: 2;
}
/* Must beat .dropdown-menu { display:none } — menus are portaled to body */
.row-actions-menu,
.row-actions-menu.dropdown-menu,
.row-actions-menu.dropdown-menu.show {
  display: flex !important;
  position: fixed !important;
  z-index: 9999 !important;
  min-width: 11.75rem;
  padding: 0.45rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  flex-direction: column;
  gap: 0.15rem;
  animation: rowActionsIn 0.14s ease;
  isolation: isolate;
  overflow: hidden;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.row-actions-menu--dark {
  background: rgba(17, 26, 56, 0.98) !important;
  box-shadow: 0 22px 48px -14px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(22, 139, 255, 0.1);
  color: #E2E8F0;
}
.row-actions-menu--light {
  background: #FFFFFF !important;
  border-color: rgba(148, 163, 184, 0.4) !important;
  box-shadow: 0 22px 48px -14px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(148, 163, 184, 0.16) !important;
  color: #0F172A !important;
}
.row-actions-menu--light button {
  color: #0F172A !important;
}
.row-actions-menu--light button:hover {
  background: rgba(22, 139, 255, 0.12) !important;
  color: #0F172A !important;
}
.row-actions-menu--light button.is-danger {
  color: #E11D48 !important;
}
.row-actions-menu--dark button {
  color: #E2E8F0;
}
.row-actions-menu--dark button:hover {
  background: rgba(22, 139, 255, 0.16);
  color: #FFFFFF;
}
.row-actions-menu > * {
  position: relative;
  z-index: 1;
}
/* Table CTAs stay under portaled menus; keep horiz scrollbar hidden */
.card-dark .overflow-x-auto .btn-view-details {
  z-index: 1;
}
@keyframes rowActionsIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.row-actions-menu button {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: 0.55rem;
  border: none;
  background: transparent;
  color: #E2E8F0;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.row-actions-menu button:hover {
  background: rgba(22, 139, 255, 0.16);
  color: #FFFFFF;
}
.row-actions-menu button.is-danger {
  color: #FB7185;
}
.row-actions-menu button.is-danger:hover {
  background: rgba(244, 63, 94, 0.16);
  color: #FDA4AF;
}
.row-actions-sep {
  height: 1px;
  margin: 0.25rem 0.35rem;
  background: rgba(148, 163, 184, 0.18);
}
html.light .row-actions-menu,
body.light .row-actions-menu {
  background: #FFFFFF !important;
  border-color: rgba(148, 163, 184, 0.4) !important;
  box-shadow: 0 22px 48px -14px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(148, 163, 184, 0.18) !important;
}
html.light .row-actions-menu button,
body.light .row-actions-menu button {
  color: #0F172A !important;
}
html.light .row-actions-menu button span,
html.light .row-actions-menu button i,
html.light .row-actions-menu button svg,
body.light .row-actions-menu button * {
  color: #0F172A !important;
  stroke: currentColor;
}
html.light .row-actions-menu button:hover,
body.light .row-actions-menu button:hover {
  background: rgba(22, 139, 255, 0.12) !important;
  color: #0F172A !important;
}
html.light .row-actions-menu button:hover *,
body.light .row-actions-menu button:hover * {
  color: #0F172A !important;
}
html.light .row-actions-menu button.is-danger,
html.light .row-actions-menu button.is-danger *,
body.light .row-actions-menu button.is-danger,
body.light .row-actions-menu button.is-danger * {
  color: #E11D48 !important;
}
html.light .row-actions-menu button.is-danger:hover,
body.light .row-actions-menu button.is-danger:hover {
  background: rgba(225, 29, 72, 0.1) !important;
}
html.light .row-actions-sep,
body.light .row-actions-sep {
  background: rgba(148, 163, 184, 0.28) !important;
}

/* Sticky first col only when table actually scrolls (narrow viewports) */
.card-dark .overflow-x-auto {
  position: relative;
}
@media (max-width: 1023px) {
  .card-dark .overflow-x-auto table th:first-child,
  .card-dark .overflow-x-auto table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
  }
  html.light .card-dark .overflow-x-auto table th:first-child,
  html.light .card-dark .overflow-x-auto table td:first-child {
    background: #FFFFFF;
  }
  html.dark .card-dark .overflow-x-auto table th:first-child,
  html.dark .card-dark .overflow-x-auto table td:first-child {
    background: rgba(16, 24, 52, 0.98);
  }
}

/* Appointments / tables: keep avatar + title from overlapping */
.card-dark table td.flex,
.card-dark table td.font-medium.flex {
  display: table-cell !important;
}
.card-dark table td .inline-flex.items-center.gap-3,
.card-dark table td > img.rounded-full {
  vertical-align: middle;
}
.card-dark table td img.rounded-full + *,
.card-dark table td img.w-8 {
  margin-left: 0.65rem;
}

/* Hide broken sparkline hover tooltips on KPI cards */
.kpi-neon .apexcharts-tooltip,
[data-sparkline] .apexcharts-tooltip,
.kpi-neon .apexcharts-xaxistooltip,
.kpi-neon .apexcharts-yaxistooltip {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* --------------------------------------------------------------------------
   8. Dark mode reaffirm (when .dark / not .light)
   -------------------------------------------------------------------------- */
html.dark body,
html.dark body.bg-midnight {
  background-color: #080F25 !important;
  background-image:
    radial-gradient(ellipse 90% 60% at 10% -5%, rgba(37, 99, 235, 0.28), transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 0%, rgba(124, 58, 237, 0.22), transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 30%, rgba(22, 139, 255, 0.06), transparent 60%) !important;
  color: #F8FAFC !important;
}
html.dark .btn-primary,
html.dark .btn-view-details,
html.dark .nav-item-active,
html.dark .nav-item-active *,
html.dark .page-active,
html.dark .theme-switch-pill button.active {
  color: #FFFFFF !important;
}
html.dark .text-white {
  color: #FFFFFF !important;
}
html.dark h1,
html.dark h2,
html.dark h3.text-white,
html.dark .kpi-neon h3 {
  color: #FFFFFF !important;
}
html.dark .card-dark,
html.dark .kpi-neon {
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.07) 0%, transparent 42%),
    rgba(16, 24, 52, 0.72) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
  box-shadow:
    0 16px 40px -16px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  color: #E2E8F0 !important;
}
/* Dark mode uses :root tokens — keep selectors for specificity only */
html.dark #app-sidebar,
html.dark #main-content > header,
html.dark .input-control,
html.dark [data-command-palette-trigger] > div,
html.dark .theme-switch-pill {
  background: var(--av-header);
  border-color: var(--av-border-soft);
  color: var(--av-text);
}
html.dark #app-sidebar {
  background: var(--av-sidebar) !important;
}
html.dark #main-content > header {
  background: var(--av-header) !important;
}
html.dark .input-control:not(:hover):not(:focus):not(:focus-visible) {
  background: var(--av-input-bg) !important;
  border-color: var(--av-input-border) !important;
  color: var(--av-text) !important;
}
html.dark .text-slate-400,
html.dark .text-slate-500 {
  color: var(--av-text-soft) !important;
}
html.dark .text-slate-300,
html.dark .text-slate-200 {
  color: var(--av-text-muted) !important;
}
html.dark #main-content > div.bg-midnight,
html.dark footer.bg-midnight {
  background-color: var(--av-bg) !important;
  border-color: var(--av-border-soft) !important;
}

/* ThemeForest utility bridge — page chrome only (avoid killing opacity utilities) */
body.bg-midnight,
html.light body.bg-midnight,
body.light.bg-midnight {
  background-color: var(--av-bg) !important;
}
.btn-primary {
  background: var(--av-gradient-primary);
  color: #FFFFFF;
  box-shadow: var(--av-shadow-btn);
}

/* --------------------------------------------------------------------------
   Light mode — nested surfaces (pills, chat, notifs, lists)
   Tailwind hardcodes dark navy for bg-surface-subtle; remap for readable light UI.
   -------------------------------------------------------------------------- */
html.light .bg-surface,
html.light .bg-surface\/80,
html.light .bg-surface\/90,
body.light .bg-surface,
body.light .bg-surface\/80,
body.light .bg-surface\/90 {
  background-color: var(--av-surface) !important;
}
html.light .bg-surface-subtle,
html.light .bg-surface-subtle\/40,
html.light .bg-surface-subtle\/50,
html.light .bg-surface-subtle\/70,
html.light [class*="bg-surface-subtle"],
html.light .hover\:bg-surface-subtle:hover,
html.light .hover\:bg-surface-subtle\/50:hover,
html.light .hover\:bg-surface-subtle\/40:hover,
body.light .bg-surface-subtle,
body.light .bg-surface-subtle\/40,
body.light .bg-surface-subtle\/50,
body.light .bg-surface-subtle\/70,
body.light [class*="bg-surface-subtle"],
body.light .hover\:bg-surface-subtle:hover,
body.light .hover\:bg-surface-subtle\/50:hover,
body.light .hover\:bg-surface-subtle\/40:hover {
  background-color: #F1F5F9 !important;
}
html.light .bg-surface-hover,
html.light .hover\:bg-surface-hover:hover,
body.light .bg-surface-hover,
body.light .hover\:bg-surface-hover:hover {
  background-color: var(--av-surface-hover) !important;
}
html.light .bg-midnight-light,
html.light .bg-midnight\/40,
html.light .bg-midnight\/50,
html.light .bg-midnight\/85,
body.light .bg-midnight-light,
body.light .bg-midnight\/40,
body.light .bg-midnight\/50,
body.light .bg-midnight\/85 {
  background-color: var(--av-bg-midnight-light) !important;
}

/* Soft inset panels inside white cards */
html.light .card-dark .bg-surface-subtle,
html.light .card-dark .bg-surface-subtle\/40,
html.light .card-dark .bg-surface-subtle\/50,
html.light .card-dark [class*="bg-surface-subtle"],
body.light .card-dark .bg-surface-subtle,
body.light .card-dark .bg-surface-subtle\/40,
body.light .card-dark .bg-surface-subtle\/50,
body.light .card-dark [class*="bg-surface-subtle"] {
  background-color: #F5F8FC !important;
  border-color: rgba(148, 163, 184, 0.32) !important;
}
html.light .card-dark .bg-surface,
html.light .card-dark .bg-midnight,
html.light .card-dark .bg-midnight-light,
body.light .card-dark .bg-surface,
body.light .card-dark .bg-midnight,
body.light .card-dark .bg-midnight-light {
  background-color: #F8FAFC !important;
}

/* Dropdown / notifications popover */
html.light .dropdown-menu,
body.light .dropdown-menu {
  background: #FFFFFF !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
  box-shadow: 0 18px 40px -16px rgba(15, 23, 42, 0.22) !important;
  color: var(--av-text) !important;
}
html.light .dropdown-menu .bg-surface-subtle\/50,
html.light .dropdown-menu .bg-surface-subtle,
html.light .dropdown-menu [class*="bg-surface-subtle"],
body.light .dropdown-menu .bg-surface-subtle\/50,
body.light .dropdown-menu .bg-surface-subtle,
body.light .dropdown-menu [class*="bg-surface-subtle"] {
  background-color: #F1F5F9 !important;
}
html.light .dropdown-menu .text-white,
html.light .dropdown-menu strong.text-white,
body.light .dropdown-menu .text-white,
body.light .dropdown-menu strong.text-white {
  color: var(--av-text) !important;
}
html.light .dropdown-menu .text-slate-200,
html.light .dropdown-menu .text-slate-300,
body.light .dropdown-menu .text-slate-200,
body.light .dropdown-menu .text-slate-300 {
  color: var(--av-text-muted) !important;
}

/* Keep white type on filled brand surfaces */
html.light .bg-gradient-primary,
html.light .bg-gradient-primary *,
html.light .bg-accent-blue,
html.light .bg-accent-blue *,
html.light .bg-accent-violet,
html.light .bg-accent-violet *,
html.light .shadow-glow-blue\/20.bg-gradient-primary,
html.light .shadow-glow-blue\/20.bg-gradient-primary *,
body.light .bg-gradient-primary,
body.light .bg-gradient-primary *,
body.light .bg-accent-blue,
body.light .bg-accent-blue * {
  color: #FFFFFF !important;
}
html.light .bg-gradient-primary .text-white\/70,
html.light .bg-gradient-primary .text-cyan-300,
body.light .bg-gradient-primary .text-white\/70,
body.light .bg-gradient-primary .text-cyan-300 {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Incoming chat bubbles inside cards */
html.light .dash-chat-in,
html.light .card-dark .rounded-2xl.rounded-tl-none,
body.light .dash-chat-in,
body.light .card-dark .rounded-2xl.rounded-tl-none {
  background-color: #EEF2F7 !important;
  color: var(--av-text) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
}
html.light .dash-chat-in p,
html.light .dash-chat-in span,
body.light .dash-chat-in p,
body.light .dash-chat-in span {
  color: inherit !important;
}
html.light .dash-chat-in .text-slate-500,
body.light .dash-chat-in .text-slate-500 {
  color: var(--av-text-faint) !important;
}

/* Follow-up / lead / conversation list rows */
html.light .dash-conv-item:not([class*="bg-accent-blue"]),
body.light .dash-conv-item:not([class*="bg-accent-blue"]) {
  background-color: #F5F8FC !important;
}
html.light .dash-conv-item[class*="bg-accent-blue"],
body.light .dash-conv-item[class*="bg-accent-blue"] {
  background-color: rgba(22, 139, 255, 0.1) !important;
}

/* Widget Studio — website mock stays dark; chat chrome stays crisp */
.widget-preview-sticky {
  position: sticky;
  top: calc(var(--av-header-height) + 12px);
}
.widget-swatch {
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.35);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.widget-swatch:hover {
  transform: scale(1.06);
}
.widget-swatch-active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(22, 139, 255, 0.85), 0 8px 18px -8px rgba(22, 139, 255, 0.65);
}
html.light .widget-swatch-active,
body.light .widget-swatch-active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(22, 139, 255, 0.9), 0 8px 18px -8px rgba(22, 139, 255, 0.45);
}
.widget-embed-code {
  background: #0B1224 !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  color: #60A5FA !important;
}
html.light .widget-embed-code,
body.light .widget-embed-code {
  background: #0B1224 !important;
  color: #93C5FD !important;
  border-color: rgba(15, 23, 42, 0.2) !important;
}
.widget-embed-copy {
  z-index: 2;
}
.widget-site-mock {
  height: 560px;
  min-height: 560px;
  background:
    linear-gradient(180deg, #0B1224 0%, #111A38 55%, #0D1530 100%) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
}
.widget-site-mock .widget-site-skeleton > * {
  background-color: rgba(148, 163, 184, 0.18) !important;
}
.widget-site-mock .widget-site-skeleton .widget-site-cta {
  background-color: rgba(22, 139, 255, 0.35) !important;
}
.widget-chat-panel {
  width: 18rem;
  max-width: calc(100% - 1.5rem);
  background: #FFFFFF !important;
  border-color: rgba(22, 139, 255, 0.35) !important;
  box-shadow: 0 22px 48px -18px rgba(15, 23, 42, 0.45) !important;
}
.widget-chat-panel .widget-chat-thread {
  background: #F8FAFC !important;
}
.widget-chat-panel .widget-chat-bubble {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #E2E8F0 !important;
}
.widget-chat-panel .widget-chat-pill {
  background: #EFF6FF !important;
  color: #168BFF !important;
  border-color: rgba(22, 139, 255, 0.28) !important;
}
.widget-chat-panel .widget-chat-input {
  background: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
}
.widget-chat-panel .widget-chat-header,
.widget-chat-panel .widget-chat-header * {
  color: #FFFFFF !important;
}
html.light .widget-chat-panel .widget-chat-header h4,
html.light .widget-chat-panel .widget-chat-header span,
body.light .widget-chat-panel .widget-chat-header h4,
body.light .widget-chat-panel .widget-chat-header span {
  color: #FFFFFF !important;
}

/* Final input state lock (wins over theme remaps) */
html.light .input-control:hover:not(:disabled):not(:focus):not(:focus-visible),
body.light .input-control:hover:not(:disabled):not(:focus):not(:focus-visible),
html.dark .input-control:hover:not(:disabled):not(:focus):not(:focus-visible) {
  background: var(--av-input-hover-bg) !important;
  border-color: var(--av-input-hover-border) !important;
}
html.light .input-control:focus,
html.light .input-control:focus-visible,
body.light .input-control:focus,
body.light .input-control:focus-visible,
html.dark .input-control:focus,
html.dark .input-control:focus-visible {
  background: var(--av-input-focus-bg) !important;
  border-color: var(--av-input-focus-border) !important;
  box-shadow: 0 0 0 3px var(--av-input-focus-ring) !important;
}
.widget-chat-panel .widget-chat-input:hover:not(:focus) {
  border-color: var(--av-input-hover-border) !important;
  background: #FFFFFF !important;
}
.widget-chat-panel .widget-chat-input:focus {
  outline: none !important;
  border-color: var(--av-input-focus-border) !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px var(--av-input-focus-ring) !important;
}

/* Soften light-mode modal overlay so popups feel premium, not muddy */
html.light .app-modal,
body.light .app-modal {
  background: rgba(15, 23, 42, 0.45) !important;
}
html.dark .app-modal,
html:not(.light) .app-modal {
  background: rgba(0, 0, 0, 0.72) !important;
}

/* Playground response stream — readable in both themes */
.playground-output {
  background: rgba(2, 6, 23, 0.55);
  border: 1px solid var(--av-border-soft);
  color: #E2E8F0;
}
.playground-output p {
  margin: 0;
  color: inherit;
  line-height: 1.65;
}
.playground-output .playground-streaming {
  color: var(--av-accent-blue, #3B82F6);
  animation: pulse 1.4s ease-in-out infinite;
}
html.light .playground-output,
body.light .playground-output {
  background: #F1F5F9 !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
  color: #0F172A !important;
}
html.light .playground-output .playground-streaming,
body.light .playground-output .playground-streaming {
  color: #2563EB !important;
}

/* Readable text selection (avoid dark-on-dark blue) */
::selection {
  background: rgba(37, 99, 235, 0.28);
  color: inherit;
}
html.light ::selection,
body.light ::selection {
  background: rgba(37, 99, 235, 0.22);
  color: #0F172A;
}
html.dark ::selection,
html:not(.light) ::selection {
  background: rgba(96, 165, 250, 0.35);
  color: #F8FAFC;
}

/* Catch remaining nested midnight/80 panels in light cards */
html.light .card-dark [class*="bg-midnight"],
body.light .card-dark [class*="bg-midnight"] {
  background-color: #F8FAFC !important;
}

/* --------------------------------------------------------------------------
   Auth + error shells — FINAL theme overrides (must win over remaps above)
   Light = fully light. Dark = fully dark. No mixed navy/white split.
   -------------------------------------------------------------------------- */
html.light .auth-dark-panel,
body.light .auth-dark-panel {
  background: linear-gradient(155deg, #F8FAFC 0%, #EEF2FF 55%, #E0E7FF 100%) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  color: #0F172A !important;
}
html.light .auth-dark-panel .text-white,
html.light .auth-dark-panel h1,
html.light .auth-dark-panel h2,
html.light .auth-dark-panel h3,
html.light .auth-dark-panel span.text-white,
body.light .auth-dark-panel .text-white,
body.light .auth-dark-panel h2 {
  color: #0F172A !important;
}
html.light .auth-dark-panel .text-slate-400,
html.light .auth-dark-panel .text-slate-300,
html.light .auth-dark-panel .text-slate-200,
html.light .auth-dark-panel .text-slate-500,
html.light .auth-dark-panel p,
html.light .auth-dark-panel li,
body.light .auth-dark-panel .text-slate-400,
body.light .auth-dark-panel .text-slate-300,
body.light .auth-dark-panel p {
  color: #64748B !important;
}
html.light .auth-dark-panel .text-accent-blue,
body.light .auth-dark-panel .text-accent-blue {
  color: #2563EB !important;
}
html.light .auth-dark-panel .text-accent-emerald,
body.light .auth-dark-panel .text-accent-emerald {
  color: #059669 !important;
}
html.light .auth-dark-panel [class*="bg-midnight"],
html.light .auth-dark-panel [class*="bg-surface"],
body.light .auth-dark-panel [class*="bg-midnight"],
body.light .auth-dark-panel [class*="bg-surface"] {
  background-color: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  color: #475569 !important;
}

html.dark .auth-dark-panel,
html:not(.light) .auth-dark-panel,
body.dark .auth-dark-panel {
  background: linear-gradient(155deg, #0B1224 0%, #121A36 48%, rgba(85, 69, 234, 0.28) 100%) !important;
  color: #E2E8F0 !important;
}
html.dark .auth-dark-panel .text-white,
html:not(.light) .auth-dark-panel .text-white,
html.dark .auth-dark-panel h2,
html:not(.light) .auth-dark-panel h2,
body.dark .auth-dark-panel .text-white {
  color: #FFFFFF !important;
}
html.dark .auth-dark-panel [class*="bg-midnight"],
html.dark .auth-dark-panel [class*="bg-surface"],
html:not(.light) .auth-dark-panel [class*="bg-midnight"],
html:not(.light) .auth-dark-panel [class*="bg-surface"],
body.dark .auth-dark-panel [class*="bg-midnight"] {
  background-color: rgba(2, 6, 23, 0.72) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: #CBD5E1 !important;
}
html.dark .auth-form-panel .text-white,
html:not(.light) .auth-form-panel .text-white,
html.dark .auth-form-panel h2,
body.dark .auth-form-panel .text-white {
  color: #FFFFFF !important;
}
html.dark .auth-form-panel label,
html.dark .auth-form-panel .text-slate-300,
html:not(.light) .auth-form-panel label,
body.dark .auth-form-panel label {
  color: #CBD5E1 !important;
}
/* Outer auth card surface in dark */
html.dark .bg-surface.border.shadow-2xl,
html:not(.light) .bg-surface.border.shadow-2xl,
body.dark .bg-surface.border.shadow-2xl {
  background-color: var(--av-surface, #121A36) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
}

html.light .auth-form-panel .text-white,
html.light .auth-form-panel h1,
html.light .auth-form-panel h2,
html.light .auth-form-panel h3,
html.light .auth-form-panel span.text-white,
body.light .auth-form-panel .text-white,
body.light .auth-form-panel h2 {
  color: #0F172A !important;
}
html.light .auth-form-panel label,
html.light .auth-form-panel .text-slate-300,
body.light .auth-form-panel label,
body.light .auth-form-panel .text-slate-300 {
  color: #334155 !important;
}
html.light .auth-form-panel .text-slate-400,
html.light .auth-form-panel .text-slate-500,
html.light .auth-form-panel p,
body.light .auth-form-panel .text-slate-400,
body.light .auth-form-panel p {
  color: #64748B !important;
}
html.light .auth-form-panel a.hover\:text-white:hover,
html.light .auth-form-panel a:hover,
body.light .auth-form-panel a:hover {
  color: #2563EB !important;
}
html.light .auth-form-panel .bg-slate-800,
body.light .auth-form-panel .bg-slate-800 {
  background-color: #E2E8F0 !important;
}
html.dark .auth-form-panel .text-white,
html:not(.light) .auth-form-panel .text-white,
html.dark .auth-form-panel h2,
html:not(.light) .auth-form-panel h2 {
  color: #FFFFFF !important;
}
html.dark .auth-form-panel label,
html.dark .auth-form-panel .text-slate-300,
html:not(.light) .auth-form-panel label {
  color: #CBD5E1 !important;
}

html.light body.error-shell,
body.light.error-shell,
html.light body.error-shell.bg-midnight {
  background-color: #F1F5F9 !important;
  color: #0F172A !important;
}
html.light body.error-shell .text-white,
html.light body.error-shell h1,
html.light body.error-shell h2,
html.light body.error-shell h3,
html.light body.error-shell .font-extrabold.text-white,
html.light body.error-shell .font-black.text-white,
html.light body.error-shell .font-mono.text-white,
body.light.error-shell .text-white,
body.light.error-shell h1 {
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A;
}
html.light body.error-shell .text-slate-400,
html.light body.error-shell .text-slate-300,
html.light body.error-shell .text-slate-500,
body.light.error-shell .text-slate-400 {
  color: #64748B !important;
  -webkit-text-fill-color: #64748B;
}
html.light body.error-shell .card-dark,
body.light.error-shell .card-dark {
  background: #FFFFFF !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
  color: #0F172A !important;
}
html.light body.error-shell .card-dark .text-white,
html.light body.error-shell .card-dark .font-extrabold,
html.light body.error-shell .card-dark .font-mono,
body.light.error-shell .card-dark .text-white {
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A;
}
html.light body.error-shell .bg-clip-text.text-transparent,
body.light.error-shell .bg-clip-text.text-transparent {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
html.light body.error-shell .card-dark [class*="bg-midnight"],
body.light.error-shell .card-dark [class*="bg-midnight"] {
  background-color: #E2E8F0 !important;
}