/* ══════════════════════════════════════════
   THEME MODES — Bright chrome overrides + dark contrast fixes
   Loaded after nav.css / pages.css. Tokens live in theme.css.
══════════════════════════════════════════ */

/* ── Dark mode: ensure inputs/labels never use bootstrap dark-on-dark ── */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] input.form-control,
html[data-theme="dark"] textarea.form-control {
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="dark"] .form-control::placeholder {
  color: var(--muted);
}
html[data-theme="dark"] .form-control option {
  background: var(--surface);
  color: var(--text);
}
html[data-theme="dark"] label,
html[data-theme="dark"] .form-label {
  color: var(--text-2);
}
html[data-theme="dark"] .map-filter-row > label {
  color: var(--text-2);
}
html[data-theme="dark"] .ms-panel label,
html[data-theme="dark"] .ms-panel label span {
  color: var(--text);
}
html[data-theme="dark"] tbody td,
html[data-theme="dark"] tbody th,
html[data-theme="dark"] thead th {
  color: var(--text);
}

/* Bootstrap text utilities on dark surfaces */
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .text-muted {
  color: var(--muted) !important;
}

html[data-theme="dark"] #loading-overlay {
  background: rgba(9, 20, 33, 0.65) !important;
}

/* Ticker credit — Credit.png is dark ink on transparent; invert for navy footer */
html[data-theme="dark"] .ticker-credit,
html:not([data-theme]) .ticker-credit {
  border-left-color: rgba(212, 175, 55, 0.32);
  box-shadow: var(--ticker-credit-shadow);
}
html[data-theme="dark"] .ticker-credit::before,
html:not([data-theme]) .ticker-credit::before {
  background: linear-gradient(90deg, transparent, var(--ticker-bg-solid));
}
html[data-theme="dark"] .ticker-credit img {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* My Profile — nested cards used var(--surface) on a .page.active shell that
   also gradients from --surface, so sections read washed-out in dark mode. */
html[data-theme="dark"] #page-profile.page.active {
  background: linear-gradient(165deg, var(--bg-elevated) 0%, var(--surface) 100%);
}
html[data-theme="dark"] #page-profile #profile-content [style*="background:var(--surface)"] {
  background: var(--surface-3) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] #page-profile #profile-content [style*="background:var(--surface-2)"] {
  background: var(--surface-2) !important;
}
html[data-theme="dark"] #page-profile .breadcrumb {
  opacity: 1;
  color: var(--text-2);
}
html[data-theme="dark"] #page-profile .page-header h1 {
  color: var(--text);
}
.profile-user-avatar {
  background: var(--text);
  color: #fff;
}
html[data-theme="dark"] .profile-user-avatar {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(212, 175, 55, 0.1));
  color: var(--accent);
  border: 2px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.1);
}

/* ── Dark: modals, dropdowns, and pop-out panels ── */
html[data-theme="dark"] .coc-modal-panel,
html[data-theme="dark"] #crudModal > div {
  background: var(--bg-card) !important;
  color: var(--fg) !important;
  border: 1px solid rgba(212, 175, 55, 0.18);
}
html[data-theme="dark"] #crudModal h3,
html[data-theme="dark"] #crudModal label,
html[data-theme="dark"] #crudModal label span,
html[data-theme="dark"] #crudModal [data-bf-row],
html[data-theme="dark"] #crudModal [data-bf-row] span,
html[data-theme="dark"] #crudModal p,
html[data-theme="dark"] #crudModal div {
  color: inherit;
}
html[data-theme="dark"] #crudModal .form-control {
  color: var(--text);
}
html[data-theme="dark"] #crudModal [style*="background:#fff"],
html[data-theme="dark"] #crudModal [style*="background: #fff"] {
  background: var(--surface-2) !important;
}
html[data-theme="dark"] #bf-list,
html[data-theme="dark"] #ov-factory-list,
html[data-theme="dark"] #eu-fac-chips {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .ms-panel {
  background: var(--surface) !important;
  border-color: rgba(212, 175, 55, 0.2) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .entity-modal,
html[data-theme="dark"] .coc-modal {
  border-color: rgba(212, 175, 55, 0.18);
}
html[data-theme="dark"] .coc-modal-header {
  background: var(--surface-2) !important;
}
html[data-theme="dark"] .coc-modal-header h2 {
  color: var(--text) !important;
}
html[data-theme="dark"] .coc-quad-box {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .coc-quad-row .cqr-label,
html[data-theme="dark"] .coc-quad-row .cqr-value,
html[data-theme="dark"] .coc-line-items tbody td {
  color: var(--text) !important;
}
html[data-theme="dark"] .coc-line-items thead th {
  background: var(--surface-3) !important;
  color: var(--text-2) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] #lot-preview-overlay > div,
html[data-theme="dark"] [id$="-overlay"] > div[style*="border-radius"] {
  background: var(--bg-card) !important;
  color: var(--fg) !important;
}
html[data-theme="dark"] .country-picker-wrap,
html[data-theme="dark"] [id$="-dropdown"] {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .cert-preview {
  background: var(--surface) !important;
  color: var(--text);
}
html[data-theme="dark"] .archive-stat-card,
html[data-theme="dark"] .archive-filter-bar {
  background: var(--bg-card) !important;
  color: var(--fg) !important;
}
html[data-theme="dark"] .entity-pill:not(.active) {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .entity-pill.active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
html[data-theme="dark"] .archive-filter-bar .filter-group input,
html[data-theme="dark"] .archive-filter-bar .filter-group select,
html[data-theme="dark"] .inquiry-search-input-wrap input {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

/* Legacy fixed-overlay modals (inline background:#fff in JS) */
html[data-theme="dark"] [id$="Overlay"] > div,
html[data-theme="dark"] [id$="-overlay"] > div,
html[data-theme="dark"] #addRegModal > div,
html[data-theme="dark"] #testDetailsModal > div,
html[data-theme="dark"] #_trmOverlay > div,
html[data-theme="dark"] #vp-drill-overlay > div,
html[data-theme="dark"] #us-cc-overlay > div,
html[data-theme="dark"] div[style*="position:fixed"][style*="inset:0"] > div[style*="border-radius"] {
  background: var(--bg-card) !important;
  color: var(--fg) !important;
}
html[data-theme="dark"] [id$="Overlay"] h2,
html[data-theme="dark"] [id$="Overlay"] h3,
html[data-theme="dark"] [id$="-overlay"] h2,
html[data-theme="dark"] [id$="-overlay"] h3,
html[data-theme="dark"] [id$="-overlay"] label,
html[data-theme="dark"] [id$="-overlay"] td,
html[data-theme="dark"] [id$="-overlay"] th {
  color: inherit;
}
html[data-theme="dark"] [id$="-overlay"] [style*="background:#fff"],
html[data-theme="dark"] [id$="-overlay"] [style*="background: #fff"],
html[data-theme="dark"] [id$="Overlay"] [style*="background:#fff"],
html[data-theme="dark"] [id$="Overlay"] [style*="background: #fff"] {
  background: var(--surface-2) !important;
}

/* Compliance scanner vendor dropdown */
html[data-theme="dark"] #scannerVendorCombo {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] #compliance-scanner-panel [style*="background:#fff"] {
  background: var(--surface) !important;
}

/* Security hub navigation cards */
html[data-theme="dark"] #page-security [style*="background:#fff"] {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] #_bcovAddModal > div,
html[data-theme="dark"] #us-link-overlay > div,
html[data-theme="dark"] #us-detail-overlay > div,
html[data-theme="dark"] #page-compliance [style*="background:#fff"],
html[data-theme="dark"] #page-vendor-portal [style*="background:#fff"],
html[data-theme="dark"] #page-userstories [style*="background:#fff"] {
  background: var(--bg-card) !important;
  color: var(--fg) !important;
}
html[data-theme="dark"] #us-section-testrunner .tr-modal-card {
  background: var(--bg-card) !important;
  color: var(--fg) !important;
}

/* ── Bright theme: restore warm light shell ── */
html[data-theme="bright"] body {
  background: var(--bg);
}

html[data-theme="bright"] ::-webkit-scrollbar-thumb {
  background: #c5bfb4;
}
html[data-theme="bright"] ::-webkit-scrollbar-thumb:hover {
  background: #b5afa4;
}

/* Primary nav — white wwof.com style */
html[data-theme="bright"] .primary-nav {
  background: #ffffff;
  border-bottom: 1px solid var(--wwof-gray-light, #e9ecef);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
html[data-theme="bright"] .primary-nav.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
}
html[data-theme="bright"] .nav-tab {
  color: #3d4248;
}
html[data-theme="bright"] .nav-tab i {
  color: #6b7280;
}
html[data-theme="bright"] .nav-tab:hover,
html[data-theme="bright"] .nav-tab.active,
html[data-theme="bright"] .nav-tab-wrap.mega-active .nav-tab,
html[data-theme="bright"] .nav-tab-wrap.mega-active > .nav-tab,
html[data-theme="bright"] .nav-tab-wrap:hover .nav-tab,
html[data-theme="bright"] .nav-tab-wrap:hover .nav-tab:not(.active) {
  color: #000;
}
html[data-theme="bright"] .nav-tab:hover i,
html[data-theme="bright"] .nav-tab-wrap:hover .nav-tab i,
html[data-theme="bright"] .nav-tab-wrap.mega-active .nav-tab i,
html[data-theme="bright"] .nav-tab-wrap.mega-active > .nav-tab i {
  color: #2c3034;
}
html[data-theme="bright"] .nav-tab-wrap.mega-active .nav-tab i,
html[data-theme="bright"] .nav-tab-wrap.mega-active > .nav-tab i {
  color: var(--accent);
}
html[data-theme="bright"] .nav-divider {
  background: #e4e0d7;
}
html[data-theme="bright"] .nav-icon-btn {
  color: #6b7280;
}
html[data-theme="bright"] .nav-icon-btn:hover {
  background: rgba(44, 48, 52, 0.06);
  color: #2c3034;
}
html[data-theme="bright"] .nav-user-chip {
  background: rgba(44, 48, 52, 0.04);
  border-color: #e4e0d7;
  color: #2c3034;
}
html[data-theme="bright"] .nav-user-chip:hover {
  background: rgba(44, 48, 52, 0.08);
  border-color: #d4cfc6;
}
html[data-theme="bright"] .nav-logo-title {
  background: linear-gradient(135deg, var(--wwof-navy, #253948) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-theme="bright"] .nav-security-badge {
  color: #2e7d32;
  border-color: rgba(46, 125, 50, 0.15);
  background: #eaf6ed;
}
html[data-theme="bright"] .hamburger-btn {
  color: rgba(0, 0, 0, 0.6);
}
html[data-theme="bright"] .hamburger-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #2c3034;
}
html[data-theme="bright"] .nav-center.mobile-open {
  background: #ffffff;
  border-top-color: var(--wwof-gray-light, #e9ecef);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}
html[data-theme="bright"] .mobile-nav-backdrop {
  background: rgba(0, 0, 0, 0.2);
}

/* Mega menu — elevated panels on warm page bg (tokens in theme.css) */
html[data-theme="bright"] .mega-menu {
  background: var(--mega-menu-bg);
}
html[data-theme="bright"] .mega-col-section {
  background: var(--mega-col-surface);
  border-color: var(--mega-col-border);
  box-shadow: 0 1px 3px rgba(44, 48, 52, 0.04);
  padding: 14px 12px 12px;
}
html[data-theme="bright"] .mega-col-title {
  color: var(--wwof-navy, #253948);
  opacity: 0.72;
}
html[data-theme="bright"] .mega-col-title::before {
  background: var(--accent, #b5880b);
  opacity: 0.65;
}
html[data-theme="bright"] .mega-col-link-label {
  color: var(--wwof-navy, #253948);
}
html[data-theme="bright"] .mega-col-link-desc {
  color: var(--wwof-gray, #6c757d);
}
html[data-theme="bright"] .mega-col-link-icon {
  background: rgba(37, 57, 72, 0.04);
  border-color: rgba(37, 57, 72, 0.08);
  color: var(--wwof-gray, #6c757d) !important;
}
html[data-theme="bright"] .mega-col-link {
  background: var(--mega-link-surface);
  border-color: var(--mega-link-border);
  box-shadow: 0 1px 2px rgba(44, 48, 52, 0.03);
}
html[data-theme="bright"] .mega-col-link:hover {
  background: var(--accent-soft);
  border-color: rgba(181, 136, 11, 0.28);
  box-shadow: 0 2px 6px rgba(44, 48, 52, 0.05);
}
html[data-theme="bright"] .mega-col-link:hover .mega-col-link-label {
  color: #000;
}
html[data-theme="bright"] .mega-col-link:hover .mega-col-link-desc {
  color: #54585f;
}
html[data-theme="bright"] .mega-col-link:hover .mega-col-link-icon {
  color: var(--accent, #b5880b) !important;
  background: rgba(181, 136, 11, 0.08);
  border-color: rgba(181, 136, 11, 0.2);
}
html[data-theme="bright"] .mega-feature-card {
  background: var(--mega-feat-surface);
  border-color: var(--mega-feat-border);
  box-shadow: 0 1px 4px rgba(44, 48, 52, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
html[data-theme="bright"] #nav-alert-card.mega-feature-card,
html[data-theme="bright"] .mega-feature-card--alert {
  background: var(--mega-feat-surface);
  border-color: var(--mega-feat-border);
  border-left-color: var(--warning, #C47F17);
  box-shadow: 0 1px 4px rgba(44, 48, 52, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
html[data-theme="bright"] #nav-alert-detail,
html[data-theme="bright"] .mega-alert-detail,
html[data-theme="bright"] .mega-alert-line {
  color: var(--text-2, var(--wwof-gray, #6c757d)) !important;
}
html[data-theme="bright"] .mega-feature-card::before {
  background: linear-gradient(135deg, rgba(181, 136, 11, 0.05) 0%, transparent 55%);
}
html[data-theme="bright"] .mega-feature-card::after {
  background: linear-gradient(90deg, transparent, rgba(181, 136, 11, 0.22), transparent);
}
html[data-theme="bright"] .mega-feat-label {
  color: var(--accent, #b5880b);
  opacity: 0.85;
}
html[data-theme="bright"] .mega-feat-title {
  color: var(--wwof-navy, #253948);
}
html[data-theme="bright"] .mega-feat-sub {
  color: var(--wwof-gray, #6c757d);
}
html[data-theme="bright"] .mega-feat-arrow {
  color: var(--accent, #b5880b);
}
html[data-theme="bright"] #nav-alert-card {
  border-left-color: var(--warning, #C47F17);
}
html[data-theme="bright"] #nav-alert-card .mega-feat-label {
  color: var(--warning, #C47F17);
  opacity: 0.9;
}
html[data-theme="bright"] #nav-alert-card .mega-feat-title {
  color: var(--wwof-navy, #253948);
}
html[data-theme="bright"] #nav-alert-card .mega-feat-arrow {
  color: var(--warning, #C47F17);
}

/* Secondary nav */
html[data-theme="bright"] .secondary-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

/* Ticker — warm ivory bar with WWOF gold trim (tokens in theme.css) */
html[data-theme="bright"] .ticker::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(181, 136, 11, 0.35) 18%,
    rgba(212, 175, 55, 0.55) 50%,
    rgba(181, 136, 11, 0.35) 82%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}
html[data-theme="bright"] .ticker-credit img {
  filter: none;
  opacity: 0.92;
}
html[data-theme="bright"] .ticker-event:hover {
  color: var(--accent);
}
html[data-theme="bright"] .pod-val {
  color: var(--accent);
  font-weight: 700;
}
html[data-theme="bright"] .ticker-status {
  border-right-color: rgba(181, 136, 11, 0.22);
}
html[data-theme="bright"] .ticker-credit {
  border-left-color: rgba(181, 136, 11, 0.22);
}

/* Page cards — flat light */
html[data-theme="bright"] .page.active {
  background: var(--card);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03);
}
html[data-theme="bright"] .page.active:hover {
  border-color: rgba(181, 136, 11, 0.25);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}

/* Master Data Maintenance — bright */
html[data-theme="bright"] #page-maint .card-head {
  background: linear-gradient(180deg, rgba(181, 136, 11, 0.06) 0%, transparent 100%);
}
html[data-theme="bright"] #page-maint .card-body thead th,
html[data-theme="bright"] #page-maint .ptab-content > .card thead th {
  background: var(--surface-2);
}
html[data-theme="bright"] #page-maint .maint-card-filter-row {
  background: var(--surface-2);
}

/* Master Data Maintenance — dark */
html[data-theme="dark"] #page-maint .card-head,
html:not([data-theme]) #page-maint .card-head {
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.08) 0%, transparent 100%);
}
html[data-theme="dark"] #page-maint .card-body thead th,
html:not([data-theme]) #page-maint .card-body thead th,
html[data-theme="dark"] #page-maint .ptab-content > .card thead th,
html:not([data-theme]) #page-maint .ptab-content > .card thead th {
  background: rgba(0, 0, 0, 0.18);
}
html[data-theme="dark"] #page-maint .maint-hint code,
html:not([data-theme]) #page-maint .maint-hint code {
  background: rgba(0, 0, 0, 0.22);
}

/* Master Data — panels, previews, banners */
html[data-theme="bright"] #page-maint .maint-scroll-box,
html[data-theme="bright"] #page-maint .maint-grant-box {
  background: var(--surface);
}
html[data-theme="dark"] #page-maint .maint-scroll-box,
html:not([data-theme]) #page-maint .maint-scroll-box,
html[data-theme="dark"] #page-maint .maint-grant-box,
html:not([data-theme]) #page-maint .maint-grant-box {
  background: rgba(0, 0, 0, 0.12);
}
html[data-theme="bright"] #page-maint .maint-preview-stat {
  background: #fff;
}
html[data-theme="dark"] #page-maint .maint-preview-stat,
html:not([data-theme]) #page-maint .maint-preview-stat {
  background: var(--surface);
}
html[data-theme="bright"] #page-maint .maint-details > summary {
  background: var(--surface-2);
}
html[data-theme="dark"] #page-maint .maint-details > summary,
html:not([data-theme]) #page-maint .maint-details > summary {
  background: rgba(0, 0, 0, 0.18);
}
html[data-theme="bright"] #page-maint .maint-banner--warn {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}
html[data-theme="dark"] #page-maint .maint-banner--warn,
html:not([data-theme]) #page-maint .maint-banner--warn {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}
html[data-theme="bright"] #page-maint #brokerCoverageBody table.bcov tr:nth-child(even) td {
  background: #fcfcfd;
}
html[data-theme="dark"] #page-maint #brokerCoverageBody table.bcov tr:nth-child(even) td,
html:not([data-theme]) #page-maint #brokerCoverageBody table.bcov tr:nth-child(even) td {
  background: rgba(212, 175, 55, 0.04);
}
html[data-theme="bright"] .card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* ── Bright: forms, buttons, toggles (preserve variant colors) ── */
html[data-theme="bright"] .form-input,
html[data-theme="bright"] .form-select,
html[data-theme="bright"] .form-control,
html[data-theme="bright"] select.form-control,
html[data-theme="bright"] input.form-control,
html[data-theme="bright"] textarea.form-control,
html[data-theme="bright"] .inquiry-search-input-wrap input {
  background: #fff;
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="bright"] .form-input::placeholder,
html[data-theme="bright"] .form-control::placeholder {
  color: var(--muted-2);
}

html[data-theme="bright"] .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-ghost) {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="bright"] .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-ghost):hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
html[data-theme="bright"] .btn-primary,
html[data-theme="bright"] .btn-success {
  color: #fff;
}
html[data-theme="bright"] .btn-primary {
  background: var(--success);
  border-color: var(--success);
}
html[data-theme="bright"] .btn-primary:hover,
html[data-theme="bright"] .btn-success:hover {
  background: #256029;
  border-color: #256029;
  color: #fff;
}
html[data-theme="bright"] .btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
html[data-theme="bright"] .btn-danger:hover {
  filter: brightness(0.92);
  color: #fff;
}

html[data-theme="bright"] .view-toggle-btn:not(.active) {
  background: var(--surface-2);
  color: var(--muted);
}
html[data-theme="bright"] .view-toggle-btn.active {
  background: var(--accent);
  color: #fff;
}
html[data-theme="bright"] .map-toggle:not(.active) {
  background: var(--surface);
  color: var(--text);
}
html[data-theme="bright"] .map-toggle.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

html[data-theme="bright"] .entity-pill:not(.active) {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="bright"] .entity-pill.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
html[data-theme="bright"] .entity-pill:not(.active):hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

html[data-theme="bright"] .row-action-btn {
  background: var(--surface);
  color: var(--muted);
  border-color: var(--border);
}

html[data-theme="bright"] .coc-modal-panel,
html[data-theme="bright"] #crudModal > div {
  background: var(--bg-card);
  color: var(--fg);
  border-color: var(--border);
}
html[data-theme="bright"] .ms-panel {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
}

/* ── Dark: form surfaces (base components.css uses var(--surface)) ── */
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-select {
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="dark"] .map-ops-bar {
  background: rgba(21, 29, 43, 0.92);
}

/* Login — light card */
html[data-theme="bright"] #login-overlay {
  background: linear-gradient(135deg, #2c3034 0%, #3d4248 40%, #4a4f55 100%);
  background-size: 400% 400%;
}
html[data-theme="bright"] .login-card {
  background: #ffffff;
  border: none;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
html[data-theme="bright"] .login-header {
  background: linear-gradient(135deg, #faf8f5, #f0ede7);
  border-bottom: 1px solid #e4e0d7;
}
html[data-theme="bright"] .login-ms-btn {
  background: #ffffff;
  border-color: #e4e0d7;
  color: #2c3034;
}
html[data-theme="bright"] .login-field input {
  background: #faf8f5;
  color: #2c3034;
  border-color: #e4e0d7;
}
html[data-theme="bright"] .login-field input:focus {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
html[data-theme="bright"] .login-submit-btn {
  background: #2c3034;
  color: #fff;
  filter: none;
}
html[data-theme="bright"] .login-submit-btn:hover {
  background: var(--accent-deep, #b5880b);
  box-shadow: none;
}
html[data-theme="bright"] .login-submit-btn--ghost {
  background: #fff;
  color: #2c3034;
  border-color: #e4e0d7;
}
html[data-theme="bright"] .login-submit-btn--ghost:hover {
  background: #faf8f5;
  border-color: var(--accent);
}
html[data-theme="bright"] .login-vendor-panel {
  background: rgba(46, 125, 50, 0.06);
  border-color: rgba(46, 125, 50, 0.2);
}
html[data-theme="bright"] .login-vendor-link {
  color: #0078D4;
}

html[data-theme="bright"] #loading-overlay {
  background: rgba(255, 255, 255, 0.6) !important;
}

/* Mobile nav drawer */
html[data-theme="bright"] .nav-center {
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Profile theme toggle */
.profile-theme-row {
  padding: 8px 10px 10px;
}
.profile-theme-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.theme-toggle {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
}
.theme-toggle-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.theme-toggle-btn:hover {
  color: var(--text);
  background: var(--accent-soft);
}
.theme-toggle-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: var(--shadow-xs);
}

/* ── Dark theme — dashboard & nav type hardening ──
   Slightly heavier weights + brighter secondary text so labels don't
   wash out on navy/surface cards. subpixel-antialiased reads crisper
   than antialiased on dark backgrounds (Windows especially). */
html[data-theme="dark"] #page-dashboard,
html:not([data-theme]) #page-dashboard,
html[data-theme="dark"] .mega-menu,
html:not([data-theme]) .mega-menu {
  -webkit-font-smoothing:subpixel-antialiased;
  -moz-osx-font-smoothing:auto;
}
html[data-theme="dark"] .breadcrumb,
html:not([data-theme]) .breadcrumb {
  color:var(--text-2);
  opacity:1;
  font-weight:600;
}
html[data-theme="dark"] .page-header p,
html[data-theme="dark"] .page-header .ptab-desc,
html:not([data-theme]) .page-header p,
html:not([data-theme]) .page-header .ptab-desc {
  color:var(--text-2);
  font-weight:500;
}
html[data-theme="dark"] .db-portal-insights-eyebrow,
html:not([data-theme]) .db-portal-insights-eyebrow {
  color:var(--text-2);
  font-weight:800;
}
html[data-theme="dark"] .db-portal-insights-tagline,
html:not([data-theme]) .db-portal-insights-tagline {
  color:var(--text-2);
  font-weight:600;
}
html[data-theme="dark"] .dash-status-pill,
html:not([data-theme]) .dash-status-pill {
  color:var(--text-2);
  font-weight:700;
}
html[data-theme="dark"] .dash-status-pill[data-tone="green"],
html:not([data-theme]) .dash-status-pill[data-tone="green"] {
  color:var(--text);
}
html[data-theme="dark"] .db-stat-lbl,
html[data-theme="dark"] .db-stat-trend,
html:not([data-theme]) .db-stat-lbl,
html:not([data-theme]) .db-stat-trend {
  color:var(--text-2);
  font-weight:600;
}
html[data-theme="dark"] .db-graph-sub,
html:not([data-theme]) .db-graph-sub {
  color:var(--text-2);
  font-weight:600;
}
html[data-theme="dark"] .db-sidebar-title,
html:not([data-theme]) .db-sidebar-title {
  color:var(--text-2);
  font-weight:700;
}
html[data-theme="dark"] .sysref-tile-fresh,
html[data-theme="dark"] .sysref-tile-detail,
html[data-theme="dark"] .sysref-hero-text,
html:not([data-theme]) .sysref-tile-fresh,
html:not([data-theme]) .sysref-tile-detail,
html:not([data-theme]) .sysref-hero-text {
  font-weight:600;
}
html[data-theme="dark"] .sysref-tile-fresh,
html[data-theme="dark"] .sysref-tile-detail,
html:not([data-theme]) .sysref-tile-fresh,
html:not([data-theme]) .sysref-tile-detail {
  color:var(--text-2);
}
html[data-theme="dark"] .db-graph-legend,
html:not([data-theme]) .db-graph-legend {
  color:var(--text-2);
  font-weight:600;
}