/* ===================================================================
   evolv-light.css — White / Light Theme Override
   Loaded by default. Disabled when user switches to dark mode.
   =================================================================== */

/* ---- Root variables: light palette, gold accent ---- */
:root {
  --surface: rgba(255, 255, 255, 0.97) !important;
  --surface-strong: #ffffff !important;
  --surface-muted: rgba(241, 245, 249, 0.6) !important;
  --border-soft: rgba(212, 168, 83, 0.18) !important;
  --border-strong: rgba(212, 168, 83, 0.32) !important;
  --glass-bg: rgba(255, 255, 255, 0.92) !important;
  --glass-brd: rgba(212, 168, 83, 0.2) !important;
  --muted: #6b7280 !important;
  --text-primary: #0f172a !important;
  --text-strong: #111827 !important;
  --accent: #d4a853 !important;
  --accent-hover: #c4973e !important;
  --accent-bg: rgba(212, 168, 83, 0.12) !important;
  --accent-soft: rgba(212, 168, 83, 0.2) !important;
  --green: #16a34a !important;
  --green-bg: #15803d !important;
  --btn-text: #0a0a0a !important;
  --shadow-soft: 0 18px 40px rgba(212, 168, 83, 0.12) !important;
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
  --nav-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
  --bg-gradient-top: #ffffff !important;
  --bg-gradient-bottom: #fafafa !important;
  --bg-accent: rgba(212, 168, 83, 0.08) !important;
  --badge-text: #92400e !important;
  --ember: #c2410c !important;
  --crimson: #b91c1c !important;
  color-scheme: light !important;
}

/* ---- Body ---- */
body {
  color: #0f172a !important;
  background: #f9fafb !important;
}

body::after {
  background:
    radial-gradient(circle at 20% 80%, rgba(212, 168, 83, 0.05), transparent 55%),
    radial-gradient(circle at 75% 15%, rgba(212, 168, 83, 0.04), transparent 58%) !important;
}

/* ---- White text → dark text (Tailwind utility class) ---- */
.text-white {
  color: #111827 !important;
}

/* ---- Light text classes that need darkening on white backgrounds ---- */
.text-gray-100 { color: #1e293b !important; }
.text-gray-200 { color: #374151 !important; }
.text-gray-300 { color: #4b5563 !important; }
.text-gray-400 { color: #6b7280 !important; }

/* ---- Dark hardcoded background classes → white / off-white ---- */
.bg-\[\#0a0a0a\] { background-color: #ffffff !important; }
.bg-\[\#0d0d0d\] { background-color: #ffffff !important; }
.bg-\[\#111113\] { background-color: #f8fafc !important; }
.bg-\[\#1a1a1a\] { background-color: #f1f5f9 !important; }
.bg-\[\#1a1a1e\] { background-color: #f8fafc !important; }
.bg-\[\#111\]    { background-color: #f8fafc !important; }

/* Dark glass / panel backgrounds */
.glass {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(212, 168, 83, 0.15) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.07) !important;
}

.card {
  background: #ffffff !important;
  color: #0f172a !important;
}

.glass.card {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(212, 168, 83, 0.15) !important;
}

.glass.card:hover {
  border-color: rgba(212, 168, 83, 0.28) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.09), 0 0 24px rgba(212, 168, 83, 0.06) !important;
}

.panel {
  background: #ffffff !important;
  border: 1px solid rgba(212, 168, 83, 0.15) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  color: #0f172a !important;
}

/* ---- Dark border classes → light ---- */
.border-gray-600 { border-color: #d1d5db !important; }
.border-gray-700 { border-color: #e5e7eb !important; }
.border-gray-800 { border-color: #e2e8f0 !important; }
.border-\[\#1a1a1a\] { border-color: #e5e7eb !important; }

/* Dashed dark borders */
.border-dashed.border-gray-600,
.border-dashed.border-gray-700 { border-color: #d1d5db !important; }

/* ---- Inputs & selects ---- */
.input,
textarea,
select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="date"],
input:not([type]) {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  color: #0f172a !important;
}

/* Tailwind-styled inputs with hardcoded dark bg */
input.bg-\[\#0a0a0a\],
textarea.bg-\[\#0a0a0a\] {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #0f172a !important;
}

input.bg-\[\#1a1a1a\],
textarea.bg-\[\#1a1a1a\] {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #0f172a !important;
}

input.bg-\[\#1a1a1e\],
select.bg-\[\#1a1a1e\],
textarea.bg-\[\#1a1a1e\] {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #0f172a !important;
}

.border-\[\#2a2a2e\] { border-color: #d1d5db !important; }

.input:focus,
textarea:focus,
select:focus,
input:focus {
  border-color: #d4a853 !important;
  box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.15) !important;
  outline: none !important;
}

.input::placeholder,
textarea::placeholder,
input::placeholder {
  color: #9ca3af !important;
}

.input-select,
.tl-letter-select,
.tl-playbook-select {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #d1d5db !important;
}

select option {
  background: #ffffff !important;
  color: #0f172a !important;
}

/* ---- Buttons ---- */
.btn {
  background: linear-gradient(135deg, #d4a853 0%, #c4973e 100%) !important;
  color: #0a0a0a !important;
  box-shadow: 0 4px 14px rgba(212, 168, 83, 0.2) !important;
}

.btn:hover {
  box-shadow: 0 8px 20px rgba(212, 168, 83, 0.3) !important;
  filter: brightness(1.06) !important;
}

.btn-outline {
  background: transparent !important;
  color: #92400e !important;
  border: 1px solid rgba(212, 168, 83, 0.5) !important;
}

.btn-outline:hover {
  background: rgba(212, 168, 83, 0.1) !important;
  border-color: #d4a853 !important;
}

.btn-ghost {
  background: rgba(212, 168, 83, 0.08) !important;
  color: #92400e !important;
  border: 1px solid rgba(212, 168, 83, 0.2) !important;
}

.btn-ghost:hover {
  background: rgba(212, 168, 83, 0.15) !important;
}

.btn-soft {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #374151 !important;
}

.btn-soft:hover {
  background: rgba(212, 168, 83, 0.1) !important;
  color: #92400e !important;
}

.btn-icon { color: #6b7280 !important; }
.btn-icon:hover { color: #d4a853 !important; }

.btn-destructive {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

/* ---- Nav ---- */
.nav-elevated {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(212, 168, 83, 0.15) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
  backdrop-filter: blur(20px) !important;
}

.nav-shell { color: #0f172a !important; }
.nav-subtitle { color: rgba(15, 23, 42, 0.5) !important; }

.nav-links .btn,
.nav-actions .nav-btn {
  background: #f8fafc !important;
  border: 1px solid #e5e7eb !important;
  color: #374151 !important;
}

.nav-links .btn:hover,
.nav-actions .nav-btn:hover {
  background: rgba(212, 168, 83, 0.1) !important;
  border-color: rgba(212, 168, 83, 0.3) !important;
  color: #92400e !important;
}

/* ---- Dark hover states (Tailwind hover:bg-gray-800, hover:bg-gray-900) ---- */
.hover\:bg-gray-800:hover,
.hover\:bg-gray-900:hover { background-color: #f1f5f9 !important; }
.hover\:bg-gray-700:hover { background-color: #f1f5f9 !important; }

/* ---- Modals / Dialogs with dark backgrounds ---- */
.bg-black\/60 { background-color: rgba(0, 0, 0, 0.25) !important; }
.bg-black\/80 { background-color: rgba(0, 0, 0, 0.35) !important; }

/* ---- Tables ---- */
thead, th {
  background: #f8fafc !important;
  color: #374151 !important;
  border-color: #e5e7eb !important;
}

tr { border-color: #f1f5f9 !important; }
tr:hover { background: #fffbf0 !important; }
td { color: #374151 !important; }

/* ---- Sidebar overrides ---- */
.evolv-sidebar {
  background: #ffffff !important;
  border-right: 1px solid #e5e7eb !important;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.06) !important;
}

/* Sidebar FAB (.evolv-tour-fab): same red ? as .back-to-top in all themes */
.evolv-tour-fab {
  background: #dc2626 !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(220, 38, 38, 0.35) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Fallback FAB (.back-to-top): red in both themes */
.back-to-top {
  background: #dc2626 !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(220, 38, 38, 0.35) !important;
}

.evolv-sb-item { color: #374151 !important; }
.evolv-sb-item:hover { background: rgba(212, 168, 83, 0.1) !important; color: #92400e !important; }
.evolv-sb-item.active { background: rgba(212, 168, 83, 0.12) !important; color: #92400e !important; }

.evolv-sb-section-label { color: #9ca3af !important; }
.evolv-sb-brand { color: #0f172a !important; }
.evolv-sb-brand-sub { color: #6b7280 !important; }

.evolv-sb-avatar {
  background: linear-gradient(135deg, #d4a853 0%, #c4973e 100%) !important;
  color: #0a0a0a !important;
}

/* ---- Notifications panel (injected dark by sidebar.js) ---- */
.evolv-notif-panel {
  background: #ffffff !important;
  border-left: 1px solid #e5e7eb !important;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12) !important;
}
.evolv-notif-header { border-bottom: 1px solid #eef2f7 !important; }
.evolv-notif-title { color: #0f172a !important; }
.evolv-notif-close { color: #94a3b8 !important; }
.evolv-notif-close:hover { background: rgba(0, 0, 0, 0.05) !important; color: #475569 !important; }
.evolv-notif-list { scrollbar-color: rgba(0, 0, 0, 0.15) transparent !important; }
.evolv-notif-list::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15) !important; }
.evolv-notif-empty { color: #94a3b8 !important; }
.evolv-notif-item { border-bottom: 1px solid #f1f5f9 !important; }
.evolv-notif-item:hover { background: #f8fafc !important; }
.evolv-notif-item.unread { background: rgba(212, 168, 83, 0.08) !important; }
.evolv-notif-item.unread:hover { background: rgba(212, 168, 83, 0.12) !important; }
.evolv-notif-msg { color: #475569 !important; }
.evolv-notif-item.unread .evolv-notif-msg { color: #0f172a !important; }
.evolv-notif-time { color: #94a3b8 !important; }
.evolv-notif-sub { color: #64748b !important; }
.evolv-notif-item.unread .evolv-notif-sub { color: #92400e !important; }
.evolv-sb-bell-badge { border-color: #f8f9ff !important; }

/* ---- Command palette / Spotlight (injected dark by command-palette.js) ---- */
.cmd-palette-backdrop { background: rgba(15, 23, 42, 0.45) !important; }
.cmd-palette-modal {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}
.cmd-palette-input-wrap { border-bottom: 1px solid #eef2f7 !important; }
.cmd-palette-input-wrap svg { color: #94a3b8 !important; }
.cmd-palette-input { color: #0f172a !important; }
.cmd-palette-input::placeholder { color: #94a3b8 !important; }
.cmd-palette-kbd {
  color: #64748b !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}
.cmd-palette-list { scrollbar-color: rgba(0, 0, 0, 0.15) transparent !important; }
.cmd-palette-list::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15) !important; }
.cmd-palette-category { color: #94a3b8 !important; }
.cmd-palette-item-icon {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}
.cmd-palette-item-label { color: #0f172a !important; }
.cmd-palette-item-desc { color: #94a3b8 !important; }
.cmd-palette-empty { color: #94a3b8 !important; }
.cmd-palette-footer { border-top: 1px solid #eef2f7 !important; color: #94a3b8 !important; }
.cmd-palette-sidebar-btn { color: #64748b !important; }
.cmd-palette-sidebar-btn:hover { background: rgba(0, 0, 0, 0.05) !important; color: #475569 !important; }

/* ---- Dropdowns / Menus ---- */
.nav-dropdown-menu,
.dropdown-menu,
[class*="dropdown"] > div {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}

/* ---- Badges / Tags ---- */
.badge { color: #92400e !important; background: rgba(212, 168, 83, 0.12) !important; }

/* ---- Tooltip ---- */
[data-tooltip]::after,
.tooltip-content {
  background: #1e293b !important;
  color: #ffffff !important;
}

/* ---- Scrollbar (light) ---- */
::-webkit-scrollbar-track { background: #f1f5f9 !important; }
::-webkit-scrollbar-thumb { background: #d1d5db !important; }
::-webkit-scrollbar-thumb:hover { background: #d4a853 !important; }

/* ---- Chart.js canvas backgrounds ---- */
canvas { filter: none !important; }

/* ---- Misc text corrections ---- */
.text-\[\#f0f0f0\] { color: #0f172a !important; }
.text-\[\#cccccc\] { color: #374151 !important; }
.text-\[\#888\], .text-\[\#888888\] { color: #6b7280 !important; }

/* =============================================
   EXTENDED LIGHT OVERRIDES — dark remnants fix
   ============================================= */

/* --- Client Journey Tracker card (style.css .hero-tracker uses rgba(15,15,20,0.85)) --- */
.hero-tracker {
  background: #ffffff !important;
  border-color: rgba(212, 168, 83, 0.2) !important;
}
.hero-tracker-title { color: #0f172a !important; }
.hero-tracker-description { color: #6b7280 !important; }

/* --- Tracker step circles, rails, names --- */
.tracker-step-circle {
  background: #f8fafc !important;
  border-color: #d1d5db !important;
  color: #6b7280 !important;
}
.tracker-step.current .tracker-step-circle {
  border-color: #d4a853 !important;
  color: #92400e !important;
  background: #fffbf0 !important;
}
.tracker-step-line { background: #e5e7eb !important; }
.tracker-step-name { color: #374151 !important; }
.tracker-step.current .tracker-step-name { color: #111827 !important; font-weight: 600; }
.tracker-step.completed .tracker-step-name { color: #9ca3af !important; }

/* --- Invoice table: bg-[rgba(18,18,22,0.95)] Tailwind class used on thead + empty state --- */
.bg-\[rgba\(18\,18\,22\,0\.95\)\] { background-color: #f8fafc !important; }

/* --- Invoice table dividers --- */
.divide-gray-800 > * + * { border-color: #f1f5f9 !important; }

/* --- Facebook Social Media: Live Preview card --- */
.preview-card {
  background: #f8fafc !important;
  border: 1px solid #e5e7eb !important;
}
.preview-page-name { color: #111827 !important; }
.preview-time { color: #6b7280 !important; }
.preview-content { color: #374151 !important; }
.preview-link {
  background: #f1f5f9 !important;
  border: 1px solid #e5e7eb !important;
}

/* --- Facebook: inline code/path chips (rgba(255,255,255,0.06) on dark) --- */
.setup-path {
  background: rgba(212, 168, 83, 0.08) !important;
  border-color: rgba(212, 168, 83, 0.2) !important;
  color: #374151 !important;
}
.setup-path span { color: #6b7280 !important; }

/* --- Affiliate page: aff-card and rate inputs --- */
.aff-card {
  background: #f8fafc !important;
  border: 1px solid #e5e7eb !important;
}
.rate-input {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #0f172a !important;
}
.aff-edit-row input {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #0f172a !important;
}

/* --- Disputes: floating selection toolbar (inline style rgba(30,30,34,0.95)) --- */
#selectionToolbar {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(212, 168, 83, 0.3) !important;
  color: #0f172a !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
}
#selectionToolbar input {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #0f172a !important;
}

/* --- Disputes: selection toolbar item text/border colors --- */
#itemsPerLetterInput {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #0f172a !important;
}

/* --- Letters page progress bar track --- */
#generatingBar { background: var(--border-soft, #e5e7eb) !important; }

/* --- My-company / settings: any rgba(0,0,0,0.2) tinted sections --- */
.glass .rounded-xl[style*="rgba(0,0,0"] { background: #f8fafc !important; }

/* --- Specific modal inner divs (inline dark styles overridden via !important) --- */
/* index.html portal invite modal */
#portalInviteModal > div {
  background: #ffffff !important;
  border-color: rgba(212, 168, 83, 0.25) !important;
}
#portalInviteLinkInput {
  background: #f8fafc !important;
  border-color: #d1d5db !important;
  color: #0f172a !important;
}

/* index.html send contract modal */
#crmSendContractModal > div {
  background: #ffffff !important;
  border-color: rgba(212, 168, 83, 0.25) !important;
}

/* facebook-manager page picker modal */
#pagePickerOverlay > div {
  background: #ffffff !important;
  border-color: rgba(212, 168, 83, 0.25) !important;
}
#pagePickerOverlay h3 { color: #111827 !important; }
#pagePickerOverlay p { color: #6b7280 !important; }
#pagePickerOverlay button#btnCancelPagePicker { color: #6b7280 !important; }

/* facebook-manager article picker modal */
#articlePickerOverlay > div {
  background: #ffffff !important;
  border-color: rgba(212, 168, 83, 0.25) !important;
}
#articlePickerOverlay h3 { color: #111827 !important; }
#articlePickerOverlay label { color: #6b7280 !important; }
#articlePickerOverlay button { color: #6b7280 !important; }

/* Preflight address modal — always dark regardless of page theme */
#addrPreflightModal > div {
  background: #111113 !important;
  border-color: rgba(212, 168, 83, 0.22) !important;
}
#addrPreflightModal input,
#addrPreflightModal textarea {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #e5e5e5 !important;
}
#addrPreflightModal input::placeholder,
#addrPreflightModal textarea::placeholder {
  color: rgba(255,255,255,0.35) !important;
}
#addrPreflightModal .pf-row {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.09) !important;
}
#addrPreflightModal label,
#addrPreflightModal .pf-status,
#addrPreflightModal p {
  color: #9ca3af !important;
}
#addrPreflightModal div[style*="color:#e5e5e5"],
#addrPreflightModal div[style*="color: #e5e5e5"] {
  color: #e5e5e5 !important;
}

/* ===================================================================
   SCHEDULE PAGE — schedule.html <style> block overrides
   =================================================================== */
.schedule-hero {
  background: linear-gradient(135deg, #fff9ed 0%, #fffbf0 100%) !important;
  border-color: rgba(212, 168, 83, 0.25) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
}
.schedule-hero h1 { color: #111827 !important; }
.schedule-hero .hero-sub { color: #6b7280 !important; }

.summary-tile {
  background: #ffffff !important;
  border-color: rgba(212, 168, 83, 0.2) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}
.summary-tile strong { color: #111827 !important; }
.summary-tile .tile-helper { color: #6b7280 !important; }

.calendar-shell {
  background: #ffffff !important;
  border-color: rgba(212, 168, 83, 0.18) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
}
.calendar-cell {
  background: #f9fafb !important;
  border-color: #e5e7eb !important;
}
.calendar-cell:hover {
  background: rgba(212, 168, 83, 0.06) !important;
  border-color: rgba(212, 168, 83, 0.22) !important;
}
.calendar-cell .day-number { color: #374151 !important; }
.calendar-cell .event-text { color: #374151 !important; }

.sidebar-card {
  background: #ffffff !important;
  border-color: rgba(212, 168, 83, 0.18) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}
.sidebar-card h2,
.sidebar-card h3 { color: #111827 !important; }

.empty-state {
  background: #f8fafc !important;
  border-color: rgba(212, 168, 83, 0.25) !important;
  color: #9ca3af !important;
}

/* Schedule: event modal */
#eventModal .modal-panel {
  background: #ffffff !important;
  border-color: rgba(212, 168, 83, 0.2) !important;
}
#eventModal .modal-hero {
  background: linear-gradient(135deg, #fff9ed 0%, #fffbf0 100%) !important;
  border-color: rgba(212, 168, 83, 0.25) !important;
}
#eventModal .modal-hero-title { color: #111827 !important; }
#eventModal .modal-hero-subcopy { color: #6b7280 !important; }
#eventModal .modal-hero-meta-value { color: #111827 !important; }
#eventModal .modal-card {
  background: #f9fafb !important;
  border-color: #e5e7eb !important;
}
#eventModal .modal-card.accent {
  background: linear-gradient(135deg, #fff9ed 0%, #fffbf0 100%) !important;
  border-color: rgba(212, 168, 83, 0.25) !important;
  color: #111827 !important;
}
#eventModal .modal-card.accent p { color: #6b7280 !important; }
#eventModal .modal-card label span { color: #6b7280 !important; }
#eventModal .section-label { color: #6b7280 !important; }
#eventModal .modal-card.accent .section-label { color: #d4a853 !important; }

.slot-button {
  background: #f9fafb !important;
  border-color: #e5e7eb !important;
}
.slot-button:hover:not(.busy) {
  background: rgba(212, 168, 83, 0.06) !important;
  border-color: rgba(212, 168, 83, 0.3) !important;
}
.slot-time { color: #111827 !important; }

/* ===================================================================
   MY COMPANY PAGE — my-company.html <style> block overrides
   =================================================================== */
.company-section {
  background: #ffffff !important;
  border-color: rgba(212, 168, 83, 0.15) !important;
}
.company-section .section-title { color: #111827 !important; }
.company-section .section-desc { color: #6b7280 !important; }
.form-group label { color: #374151 !important; }
.form-group input,
.form-group textarea,
.form-group select {
  background: #f8fafc !important;
  border-color: #d1d5db !important;
  color: #0f172a !important;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: #9ca3af !important; }
.form-group .hint { color: #9ca3af !important; }
.team-member-row {
  background: #f8fafc !important;
  border-color: #e5e7eb !important;
}

/* ===================================================================
   SETTINGS / API PAGE — settings.html <style> block overrides
   =================================================================== */
.api-card {
  background: #ffffff !important;
  border-color: rgba(212, 168, 83, 0.15) !important;
}
.api-card:hover {
  border-color: rgba(212, 168, 83, 0.3) !important;
  box-shadow: 0 4px 20px rgba(212, 168, 83, 0.08) !important;
}
.api-card-title { color: #111827 !important; }
.api-card-desc { color: #6b7280 !important; }
.api-card .input-row label { color: #6b7280 !important; }
.api-card input {
  background: #f8fafc !important;
  border-color: #d1d5db !important;
  color: #0f172a !important;
}
.api-card input::placeholder { color: #9ca3af !important; }

.section-divider { background: #e5e7eb !important; }

.hotkey-item {
  background: #f8fafc !important;
  border-color: #e5e7eb !important;
}
.hotkey-item span { color: #374151 !important; }
.hotkey-item input {
  background: #ffffff !important;
  border-color: #d1d5db !important;
}

.system-status-card {
  background: #ffffff !important;
  border-color: rgba(212, 168, 83, 0.15) !important;
}
.system-status-badge.connected { color: #16a34a !important; }
.system-status-badge.not-connected { color: #d97706 !important; }

/* Settings page — tabbed redesign additions */

/* Tab navigation */
.settings-tabs {
  border-bottom-color: rgba(212, 168, 83, 0.2) !important;
  background: transparent !important;
}
.settings-tab-btn { color: #6b7280 !important; }
.settings-tab-btn:hover { color: #374151 !important; }
.settings-tab-btn.stab-active {
  color: #d4a853 !important;
  border-bottom-color: #d4a853 !important;
}

/* Section divider */
.tab-section-divider { background: rgba(212, 168, 83, 0.12) !important; }

/* Notification event groups */
.notif-group {
  background: #ffffff !important;
  border-color: rgba(212, 168, 83, 0.15) !important;
}
.notif-group:hover {
  border-color: rgba(212, 168, 83, 0.28) !important;
}
.notif-group-title { color: #92400e !important; }
.notif-badge-essential {
  background: rgba(212, 168, 83, 0.12) !important;
  color: #92400e !important;
}
.notif-badge-advanced {
  background: rgba(99, 102, 241, 0.1) !important;
  color: #4f46e5 !important;
}
.notif-label { color: #4b5563 !important; }
.notif-label:hover { color: #111827 !important; }

/* Delivery channel sub-inputs (email address / SMS number) */
#notifEmailAddress, #notifSmsNumber {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #0f172a !important;
}

/* Collector address form (inline-styled inputs inside caAddForm) */
#caAddForm {
  background: #f8fafc !important;
  border-color: rgba(212, 168, 83, 0.2) !important;
}
#caAddForm input {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #0f172a !important;
}
#caSearch {
  background: #f8fafc !important;
  border-color: #d1d5db !important;
  color: #0f172a !important;
}
#caTable thead tr { border-bottom-color: #e5e7eb !important; }
#caTable th { color: #6b7280 !important; }
#caTable td { color: #374151 !important; }
#caTableBody tr { border-bottom-color: #f3f4f6 !important; }

/* Letter IntelliSense — group containers and selects (rendered via JS) */
.is-group {
  border-color: rgba(212, 168, 83, 0.15) !important;
}
.is-group-header {
  background: rgba(212, 168, 83, 0.04) !important;
}
.is-group-header:hover { background: rgba(212, 168, 83, 0.08) !important; }
.is-group-header span { color: #374151 !important; }
.is-group-header .is-chevron { color: #9ca3af !important; }
.is-group-body { background: #ffffff; }
.is-group-body span[style*="color:#9ca3af"] { color: #4b5563 !important; }
.is-group-body select[data-scenario] {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #0f172a !important;
}
#intelliSenseNoResults { color: #9ca3af !important; }

/* Letter IntelliSense search input */
#intelliSenseSearch {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #0f172a !important;
}

/* User permissions list */
#userList {
  background: #f8fafc !important;
  border-color: rgba(212, 168, 83, 0.15) !important;
}

/* Advanced env row inputs are standard inputs and already covered */

/* Save button text in Advanced tab (inherits .btn styling) */
#saveSettingsAdvanced { color: #0a0a0a !important; }

/* ===================================================================
   TOUR GUIDE MODAL — tour-guide.css overrides
   =================================================================== */
.tour-bubble {
  background: #ffffff !important;
  border-color: rgba(212, 168, 83, 0.35) !important;
  color: #0f172a !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 0 30px rgba(212, 168, 83, 0.06) !important;
}
.tour-bubble::before {
  background: #ffffff !important;
}
.tour-bubble__close {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #6b7280 !important;
}
.tour-bubble__body { color: #374151 !important; }
.tour-bubble__body .font-semibold,
.tour-bubble__body p.font-semibold { color: #111827 !important; }
.tour-bubble__dot { background: rgba(0, 0, 0, 0.1) !important; }

/* ===================================================================
   INVOICING — additional tbody Tailwind class (0.9 variant)
   =================================================================== */
.bg-\[rgba\(18\,18\,22\,0\.9\)\] { background-color: #f8fafc !important; }

/* ===================================================================
   FLOATING TOUR FAB — light-theme tooltip
   =================================================================== */
.evolv-tour-fab-tooltip {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid rgba(212,168,83,0.3) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* ===================================================================
   LOGIN PAGE — light theme overrides
   login.html uses inline <style> dark classes + Tailwind dark utilities
   =================================================================== */

/* Login body background */
.gradient-bg {
  background: linear-gradient(135deg, #f9fafb 0%, #fff9ed 100%) !important;
}

/* Login card */
.glass-card {
  background: #ffffff !important;
  border: 1px solid rgba(212, 168, 83, 0.2) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: none !important;
}

/* Login role selector buttons */
.role-option {
  background: #f8fafc !important;
  border-color: #e5e7eb !important;
}
.role-option:hover {
  background: rgba(212, 168, 83, 0.08) !important;
  border-color: rgba(212, 168, 83, 0.35) !important;
}
.role-option.selected {
  background: rgba(212, 168, 83, 0.1) !important;
  border-color: #d4a853 !important;
}
.role-option span.text-white {
  color: #111827 !important;
}

/* Login secondary button ("Create Account") */
.btn-secondary {
  background: #f1f5f9 !important;
  border: 1px solid rgba(212, 168, 83, 0.35) !important;
  color: #92400e !important;
}
.btn-secondary:hover {
  background: rgba(212, 168, 83, 0.1) !important;
  border-color: rgba(212, 168, 83, 0.5) !important;
  color: #92400e !important;
}

/* Reset Password button: bg-white/5 → light surface */
.bg-white\/5 {
  background-color: #f1f5f9 !important;
}
.hover\:bg-white\/10:hover {
  background-color: rgba(212, 168, 83, 0.08) !important;
}

/* Login "Back to home" link */
.gradient-bg a .text-gray-400,
.gradient-bg a:hover {
  color: #6b7280 !important;
}

/* Login error box */
#err {
  background: rgba(239, 68, 68, 0.06) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
  color: #dc2626 !important;
}

/* Login inputs: placeholder-gray-500 Tailwind utility */
.placeholder-gray-500::placeholder {
  color: #9ca3af !important;
}

/* ===================================================================
   EDUCATION PAGE — Lesson player: always dark (immersive modal)
   Keep dark even in light mode — all inner text uses white/near-white
   values designed for a dark canvas; forcing it white breaks contrast.
   =================================================================== */
.lesson-player {
  background: #111113 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  color: #f0f0f0 !important;
}
.lesson-player-header {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
.lesson-header-title { color: #ffffff !important; }
.lesson-header-step  { color: #888888 !important; }
.lesson-progress-bar { background: rgba(255, 255, 255, 0.06) !important; }
.lesson-close-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #999999 !important;
}
.lesson-close-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}
.lesson-player-body {
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent !important;
}
.lesson-player-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1) !important;
}
.lesson-section-title { color: #ffffff !important; }
.lesson-section-body  { color: #cccccc !important; }
.lesson-section-body strong { color: #f0c674 !important; }

/* ===================================================================
   EDUCATION PAGE — Final Exam section light-mode overrides
   style.css uses near-transparent white colors designed for dark mode
   =================================================================== */

/* Locked exam section: invisible on white bg in dark-mode CSS → visible muted */
.edu-tier-quiz-section.locked {
  background: #f8fafc !important;
  border-color: #e5e7eb !important;
  opacity: 0.7 !important;
}

/* Disabled "Take Final Exam" button: dark #333 bg → light grey */
.edu-quiz-btn.disabled,
button.edu-quiz-btn[disabled] {
  background: #e5e7eb !important;
  color: #9ca3af !important;
  opacity: 1 !important;
}

/* Exam info text inside locked section */
.edu-tier-quiz-section.locked .edu-quiz-title {
  color: #92400e !important;
}
.edu-tier-quiz-section.locked .edu-quiz-desc {
  color: #6b7280 !important;
}

/* ============================================================
   Tour guide — light mode overrides
   tour-guide.css loads BEFORE evolv-light.css so same-
   specificity rules here win by source order. !important added
   as extra insurance against any injected styles.
   ============================================================ */

/* Tour menu popup ("Explore Evolv") */
.tour-menu {
  background: #ffffff !important;
  border-color: rgba(212, 168, 83, 0.25) !important;
  color: #1a1a1a !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15) !important;
}
.tour-menu__title {
  color: #d4a853 !important;
}
.tour-menu__subtitle {
  color: #6b7280 !important;
}
.tour-menu__item {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.09) !important;
  color: #374151 !important;
}
.tour-menu__item:hover {
  background: rgba(212, 168, 83, 0.08) !important;
  border-color: rgba(212, 168, 83, 0.25) !important;
  color: #92400e !important;
}
.tour-menu__item--full {
  border-color: rgba(212, 168, 83, 0.25) !important;
  background: rgba(212, 168, 83, 0.06) !important;
}
.tour-menu__item-icon {
  background: rgba(212, 168, 83, 0.12) !important;
}
.tour-menu__item-label {
  color: #1a1a1a !important;
}
.tour-menu__item-desc {
  color: #6b7280 !important;
}
.tour-menu__close {
  color: #9ca3af !important;
}
.tour-menu__close:hover {
  color: #374151 !important;
  background: rgba(0, 0, 0, 0.06) !important;
}
.tour-menu__footer {
  border-top-color: rgba(0, 0, 0, 0.1) !important;
}
.tour-menu__footer-label {
  color: #6b7280 !important;
}

/* Tour step bubble (popover during guided tour) */
.tour-bubble {
  background: #ffffff !important;
  border-color: rgba(212, 168, 83, 0.25) !important;
  color: #1a1a1a !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 0 30px rgba(212, 168, 83, 0.06) !important;
}
.tour-bubble::before {
  background: #ffffff !important;
}
.tour-bubble__title {
  color: #d4a853 !important;
}
.tour-bubble__body {
  color: #374151 !important;
}
.tour-bubble__body p,
.tour-bubble__body span,
.tour-bubble__body div {
  color: #374151 !important;
}
.tour-bubble__body .font-semibold,
.tour-bubble__body p.font-semibold {
  color: #1a1a1a !important;
}
.tour-bubble__body .text-gray-500 {
  color: #6b7280 !important;
}
.tour-bubble__close {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #6b7280 !important;
}
.tour-bubble__close:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}
.tour-bubble__dot {
  background: rgba(0, 0, 0, 0.15) !important;
}
.tour-btn--skip {
  color: #9ca3af !important;
}
.tour-btn--skip:hover {
  color: #374151 !important;
}
.tour-btn--prev {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #374151 !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
.tour-btn--prev:hover {
  background: rgba(0, 0, 0, 0.09) !important;
}

/* Tour welcome / intro card */
.tour-welcome__card {
  background: #ffffff !important;
  border-color: rgba(212, 168, 83, 0.2) !important;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.12) !important;
}
.tour-welcome__title {
  color: #d4a853 !important;
}
.tour-welcome__body {
  color: #6b7280 !important;
}
.tour-welcome__opt-out-label {
  color: #6b7280 !important;
}
.tour-welcome__btn--skip {
  color: #6b7280 !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
.tour-welcome__btn--skip:hover {
  color: #374151 !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
}

/* ═══════════════════════════════════════════════════════
   NEW SPOTLIGHT TOUR ENGINE — light-mode overrides
   Classes: .evolv-tm, .evolv-tour-ring, .evolv-tour-modal
   ════════════════════════════════════════════════════════ */

/* Centered modal card */
.evolv-tm {
  background: #ffffff !important;
  border-color: rgba(212, 168, 83, 0.2) !important;
  color: #111827 !important;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.14),
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 0 40px -8px rgba(212, 168, 83, 0.1) !important;
}

.evolv-tm::before {
  background: linear-gradient(90deg, transparent, rgba(212, 168, 83, 0.35), transparent) !important;
}

.evolv-tm__label { color: #b8922e !important; }

.evolv-tm__counter { color: #9ca3af !important; }

.evolv-tm__close {
  border-color: rgba(0, 0, 0, 0.1) !important;
  background: rgba(0, 0, 0, 0.04) !important;
  color: #6b7280 !important;
}
.evolv-tm__close:hover {
  background: rgba(0, 0, 0, 0.09) !important;
  color: #111827 !important;
}

.evolv-tm__title { color: #111827 !important; }

.evolv-tm__body { color: #374151 !important; }

.evolv-tm__footer { border-top-color: rgba(0, 0, 0, 0.06) !important; }

.evolv-tm__dot { background: rgba(0, 0, 0, 0.1) !important; }
.evolv-tm__dot:hover { background: rgba(212, 168, 83, 0.4) !important; }
.evolv-tm__dot--active { background: #d4a853 !important; }
.evolv-tm__dot--done { background: rgba(212, 168, 83, 0.4) !important; }

.evolv-tm__btn--primary {
  background: #d4a853 !important;
  border-color: #d4a853 !important;
  color: #ffffff !important;
}
.evolv-tm__btn--primary:hover {
  background: #c49a45 !important;
  border-color: #c49a45 !important;
}

.evolv-tm__btn--ghost {
  color: #9ca3af !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  background: transparent !important;
}
.evolv-tm__btn--ghost:hover {
  color: #374151 !important;
  background: rgba(0, 0, 0, 0.05) !important;
}

/* Spotlight ring — unchanged in light mode (gold on white looks good) */
.evolv-tour-ring {
  box-shadow:
    0 0 0 5000px rgba(0, 0, 0, 0.52),
    0 0 0 6px rgba(212, 168, 83, 0.18),
    0 0 28px 10px rgba(212, 168, 83, 0.22) !important;
}


/* ===================================================================
   DATA BREACHES & DOCUMENTS pages — Send Contract modal inner card
   =================================================================== */
#docsSendModal .glass.card {
  background: #ffffff !important;
  border-color: rgba(212, 168, 83, 0.25) !important;
}
#docsSendModal p { color: #374151 !important; }
#docsSendModal .text-xs { color: #6b7280 !important; }
#docsSendModal #docsSendInviteSection {
  background: rgba(212, 168, 83, 0.06) !important;
}

/* ===================================================================
   PUBLIC / MARKETING PAGES — light-mode overrides
   Pages: privacy.html, terms.html, coming-soon.html, lead-capture.html,
          client-setup.html, welcome.html, whats-in-evolv.html,
          learn-more-*.html, learn-more-specialist.html, specialists.html
   These pages embed dark backgrounds directly in their <style> blocks.
   evolv-light.css is loaded after those blocks so !important wins here.
   =================================================================== */

/* Prose legal pages (privacy.html / terms.html) */
.prose h1, .prose h2, .prose h3, .prose strong { color: #0f172a !important; }
.prose p, .prose li { color: #374151 !important; }
.prose a { color: #7c3aed !important; }
.prose .text-gray-500 { color: #6b7280 !important; }
.croa-box { background: rgba(212,168,83,0.06) !important; border-color: rgba(212,168,83,0.25) !important; }
.croa-box p { color: #374151 !important; }
.croa-box strong { color: #92400e !important; }

/* Nav bars on public pages (inline style and <style> block selectors) */
nav[style*="rgba(15,23,42"] {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(212,168,83,0.15) !important;
}

/* Specialists page nav (.sp-nav) */
.sp-nav {
  background: rgba(255,255,255,0.92) !important;
  border-bottom-color: rgba(212,168,83,0.15) !important;
}
.nav-logo-text { color: #0f172a !important; }
.nav-back { color: #6b7280 !important; }
.nav-back:hover { color: #0f172a !important; }

/* Section backgrounds on marketing pages (.section-dark) */
.section-dark { background: #f8fafc !important; }
.section-darker { background: #f1f5f9 !important; }

/* Feature / step / choice / pricing cards */
.feature-card,
.step-card,
.choice-card,
.pricing-card,
.cost-card,
.transform-card,
.stat-card {
  background: #ffffff !important;
  border-color: rgba(212,168,83,0.18) !important;
  color: #0f172a !important;
}
.feature-card:hover,
.step-card:hover,
.choice-card:hover,
.cost-card:hover {
  background: #fefdf8 !important;
  border-color: rgba(212,168,83,0.4) !important;
}
.pricing-card.featured {
  background: rgba(139,92,246,0.06) !important;
  border-color: rgba(139,92,246,0.25) !important;
}

/* Coming-soon / lead-capture inner card */
.card {
  background: #ffffff !important;
  border-color: rgba(212,168,83,0.2) !important;
}

/* Sticky CTA bar (welcome.html) */
.sticky-cta {
  background: rgba(255,255,255,0.96) !important;
  border-top-color: rgba(212,168,83,0.2) !important;
}

/* Proof gallery cards (welcome.html) */
.proof-card {
  background: #ffffff !important;
  border-color: rgba(212,168,83,0.18) !important;
}
.proof-img-wrap { background: #f1f5f9 !important; }
.proof-caption { color: #374151 !important; }

/* Specialists page inner cards & panels */
.bp-inner {
  background: rgba(255,255,255,0.94) !important;
  border-color: rgba(212,168,83,0.25) !important;
}
.bp-name { color: #0f172a !important; }
.bp-city, .bp-coords, .bp-tagline, .bp-stat-label, .bp-subtext { color: #6b7280 !important; }
.bp-stat-val, .bp-headline { color: #0f172a !important; }

/* Compare table (welcome.html) */
.compare-table th { color: #6b7280 !important; }
.compare-table td { color: #374151 !important; border-bottom-color: #e5e7eb !important; }
.compare-table .evolv-col { background: rgba(139,92,246,0.04) !important; }
.compare-table .evolv-col.head { background: rgba(139,92,246,0.1) !important; color: #6d28d9 !important; }

/* Range slider (welcome.html calculator) */
.cost-input { color: #0f172a !important; }

/* Tab buttons (whats-in-evolv.html) */
.tab-btn.inactive { background: rgba(0,0,0,0.04) !important; color: #6b7280 !important; border-color: #e5e7eb !important; }
.tab-btn.inactive:hover { color: #374151 !important; border-color: #d1d5db !important; }

/* Section divider */
.section-divider { border-top-color: #e5e7eb !important; }