/* ══════════════════════════════════════════════════════════════
   Theme toggle — light / dark
   Dark is default; light mode activates via [data-theme="light"]
   ══════════════════════════════════════════════════════════════ */

/* ── Toggle button ─────────────────────────────────────────── */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: transparent;
  color: var(--muted, #9ca3af);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  flex-shrink: 0;
  padding: 0;
}
.theme-toggle-btn:hover {
  border-color: var(--accent, #38bdf8);
  color: var(--text, #e5e7eb);
}

/* ── Light-mode variable overrides ─────────────────────────── */
[data-theme="light"] {
  --bg: #f8fafc;
  --card: #ffffff;
  --card2: #f1f5f9;
  --border: #cbd5e1;
  --text: #1e293b;
  --muted: #64748b;
  --accent: #0284c7;
  --accent2: #0369a1;
  --accent-dark: #0369a1;
  --accent-glow: rgba(2, 132, 199, 0.12);
  --accent-soft: rgba(2, 132, 199, 0.08);
  --success: #16a34a;
  --danger: #ef4444;
  --warning: #d97706;
  --tag: #ef4444;
  --surface: #f1f5f9;
  --surface-2: #e2e8f0;
  --purple: #7c3aed;
  color-scheme: light;
}

/* ── Body background ───────────────────────────────────────── */
[data-theme="light"] body {
  background: radial-gradient(circle at top, #e2e8f0 0, #f8fafc 40%, #f8fafc 100%) !important;
  color: var(--text) !important;
}

/* ── Header ────────────────────────────────────────────────── */
[data-theme="light"] header {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom-color: rgba(203, 213, 225, 0.6) !important;
}
[data-theme="light"] header h1,
[data-theme="light"] header .brand-title {
  color: var(--text) !important;
}
[data-theme="light"] header .sub,
[data-theme="light"] header span:not(.dot):not(.badge-dot) {
  color: var(--muted) !important;
}

/* Header SVG logo — flip to dark strokes/fills */
[data-theme="light"] header svg line,
[data-theme="light"] .header-row svg line,
[data-theme="light"] nav.nav-bar svg line { stroke: #334155 !important; }
[data-theme="light"] header svg circle,
[data-theme="light"] .header-row svg circle,
[data-theme="light"] nav.nav-bar svg circle { fill: #334155 !important; }

/* ── Nav bar (landing / flyer) ─────────────────────────────── */
[data-theme="light"] .nav-bar {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom-color: rgba(203, 213, 225, 0.5) !important;
  backdrop-filter: blur(12px);
}
[data-theme="light"] .nav-brand span {
  color: var(--text) !important;
}
[data-theme="light"] .nav-launch {
  background: var(--accent) !important;
  color: #ffffff !important;
}

/* ── Tabs ──────────────────────────────────────────────────── */
[data-theme="light"] .tabs {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom-color: rgba(203, 213, 225, 0.5) !important;
}
[data-theme="light"] .tab,
[data-theme="light"] .tab-link {
  color: var(--muted) !important;
}
[data-theme="light"] .tab:hover,
[data-theme="light"] .tab-link:hover {
  color: var(--text) !important;
}
[data-theme="light"] .tab.active,
[data-theme="light"] .tab-link.active {
  color: var(--text) !important;
  background: #ffffff !important;
  border-color: rgba(203, 213, 225, 0.5) !important;
  border-bottom-color: #ffffff !important;
}

/* ── Panels / cards ────────────────────────────────────────── */
[data-theme="light"] .panel {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(203, 213, 225, 0.5) !important;
}
[data-theme="light"] .card {
  background: #ffffff !important;
  border-color: rgba(203, 213, 225, 0.5) !important;
}
[data-theme="light"] .stat-card {
  background: #ffffff !important;
  border-color: rgba(203, 213, 225, 0.5) !important;
}

/* ── Inputs / textareas / selects ──────────────────────────── */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="tel"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="file"],
[data-theme="light"] input[type="month"],
[data-theme="light"] input[type="search"],
[data-theme="light"] input[type="date"],
[data-theme="light"] textarea,
[data-theme="light"] select,
[data-theme="light"] .search-input {
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: #94a3b8 !important;
}
[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15) !important;
}

/* ── Buttons ───────────────────────────────────────────────── */
[data-theme="light"] .btn-primary,
[data-theme="light"] button.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2, #0369a1)) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
}
[data-theme="light"] .btn-ghost,
[data-theme="light"] button.btn-ghost {
  border-color: rgba(203, 213, 225, 0.7) !important;
  color: var(--muted) !important;
  background: transparent !important;
}
[data-theme="light"] .btn-ghost:hover,
[data-theme="light"] button.btn-ghost:hover {
  border-color: var(--accent) !important;
  color: var(--text) !important;
}
[data-theme="light"] .btn-secondary,
[data-theme="light"] button.btn-secondary {
  background: #f1f5f9 !important;
  border-color: rgba(203, 213, 225, 0.7) !important;
  color: var(--text) !important;
}

/* ── Badges ────────────────────────────────────────────────── */
[data-theme="light"] .badge {
  border-color: rgba(203, 213, 225, 0.6) !important;
  color: var(--muted) !important;
  background: rgba(241, 245, 249, 0.8) !important;
}

/* ── Status dot — keep glow but adjust ─────────────────────── */
[data-theme="light"] .dot,
[data-theme="light"] .badge-dot {
  box-shadow: 0 0 8px rgba(22, 163, 74, 0.5) !important;
}

/* ── Login page frame ──────────────────────────────────────── */
[data-theme="light"] .frame {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(203, 213, 225, 0.5) !important;
  box-shadow: 0 24px 60px rgba(148, 163, 184, 0.25), 0 0 0 1px rgba(203, 213, 225, 0.3) !important;
}

/* ── Modals / overlays ─────────────────────────────────────── */
[data-theme="light"] .modal-overlay,
[data-theme="light"] .overlay {
  background: rgba(0, 0, 0, 0.3) !important;
}
[data-theme="light"] .modal,
[data-theme="light"] .modal-content,
[data-theme="light"] .modal-box {
  background: #ffffff !important;
  border-color: rgba(203, 213, 225, 0.5) !important;
  color: var(--text) !important;
}

/* ── Tables ────────────────────────────────────────────────── */
[data-theme="light"] table {
  color: var(--text) !important;
}
[data-theme="light"] th {
  background: #f1f5f9 !important;
  color: var(--muted) !important;
  border-color: rgba(203, 213, 225, 0.5) !important;
}
[data-theme="light"] td {
  border-color: rgba(203, 213, 225, 0.3) !important;
}
[data-theme="light"] tr:hover td {
  background: rgba(241, 245, 249, 0.6) !important;
}

/* ── List items / submission rows / incident rows ──────────── */
[data-theme="light"] .sub-item,
[data-theme="light"] .inc-row,
[data-theme="light"] .item,
[data-theme="light"] .list-item,
[data-theme="light"] .row {
  border-color: rgba(203, 213, 225, 0.3) !important;
}
[data-theme="light"] .sub-item:hover,
[data-theme="light"] .inc-row:hover,
[data-theme="light"] .item:hover,
[data-theme="light"] .list-item:hover,
[data-theme="light"] .row:hover {
  background: rgba(241, 245, 249, 0.6) !important;
}
[data-theme="light"] .sub-item.active,
[data-theme="light"] .inc-row.active {
  background: rgba(2, 132, 199, 0.06) !important;
  border-color: rgba(2, 132, 199, 0.2) !important;
}

/* ── Detail panel / right side ─────────────────────────────── */
[data-theme="light"] .detail,
[data-theme="light"] .detail-panel,
[data-theme="light"] #detail {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(203, 213, 225, 0.5) !important;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
[data-theme="light"] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
[data-theme="light"] ::-webkit-scrollbar-track {
  background: #f1f5f9;
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ── Toolbar ───────────────────────────────────────────────── */
[data-theme="light"] .toolbar {
  border-color: rgba(203, 213, 225, 0.3) !important;
}
[data-theme="light"] .toolbar-label {
  color: var(--muted) !important;
}

/* ── Filter selects ────────────────────────────────────────── */
[data-theme="light"] .filter-select,
[data-theme="light"] .filter-bar select {
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ── Section headers ───────────────────────────────────────── */
[data-theme="light"] .section-title,
[data-theme="light"] .section-header {
  color: var(--text) !important;
}

/* ── Field labels ──────────────────────────────────────────── */
[data-theme="light"] .field-label,
[data-theme="light"] label {
  color: var(--muted) !important;
}

/* ── Links ─────────────────────────────────────────────────── */
[data-theme="light"] a {
  color: var(--accent) !important;
}
[data-theme="light"] a:hover {
  color: var(--accent2, #0369a1) !important;
}

/* ── Hero sections (landing / flyer) ───────────────────────── */
[data-theme="light"] .hero {
  color: var(--text) !important;
}
[data-theme="light"] .hero::before {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(2, 132, 199, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(99, 102, 241, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(34, 197, 94, 0.03) 0%, transparent 50%) !important;
}
[data-theme="light"] .hero h1 {
  color: var(--text) !important;
}
[data-theme="light"] .hero .subtitle,
[data-theme="light"] .hero p {
  color: var(--muted) !important;
}

/* ── Landing hero section — dark, vibrant text for light bg ── */
[data-theme="light"] .hero h1 {
  background: linear-gradient(135deg, #0f172a 0%, #334155 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
[data-theme="light"] .hero h1 .accent {
  background: linear-gradient(135deg, #0369a1 0%, #4f46e5 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
[data-theme="light"] .hero-sub {
  color: #334155 !important;
}
[data-theme="light"] .hero-bg-image {
  filter: blur(4px) brightness(0.85) saturate(0.8) !important;
  opacity: 0.12 !important;
}
[data-theme="light"] .hero-stats {
  background: rgba(15, 23, 42, 0.05) !important;
  border-radius: 14px;
  padding: 20px 28px !important;
  border: 1px solid rgba(100, 116, 139, 0.2);
}
[data-theme="light"] .hero-stat-value {
  color: #0c4a6e !important;
}
[data-theme="light"] .hero-stat-label {
  color: #334155 !important;
}
[data-theme="light"] .impact-stats {
  border-top-color: rgba(100, 116, 139, 0.3) !important;
}
[data-theme="light"] .impact-stat {
  border-right-color: rgba(100, 116, 139, 0.25) !important;
}
[data-theme="light"] .impact-stat:nth-child(1) .impact-stat-value { color: #b91c1c !important; }
[data-theme="light"] .impact-stat:nth-child(2) .impact-stat-value { color: #6d28d9 !important; }
[data-theme="light"] .impact-stat:nth-child(3) .impact-stat-value { color: #b45309 !important; }
[data-theme="light"] .impact-stat:nth-child(4) .impact-stat-value { color: #15803d !important; }
[data-theme="light"] .impact-stat-label {
  color: #334155 !important;
}

/* ── Feature / section cards on landing ─────────────────────── */
[data-theme="light"] .feature-card,
[data-theme="light"] .use-case,
[data-theme="light"] .step,
[data-theme="light"] .integration-card,
[data-theme="light"] .testimonial,
[data-theme="light"] .pricing-card {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(203, 213, 225, 0.4) !important;
}

/* ── Policy pages (aup / privacy) ──────────────────────────── */
[data-theme="light"] .doc,
[data-theme="light"] .sidebar,
[data-theme="light"] .policy-card {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(203, 213, 225, 0.4) !important;
}
[data-theme="light"] .eyebrow {
  color: var(--accent) !important;
}

/* ── Catch-all: any element with hardcoded dark bg via style ── */
/* These use !important on common inline-style patterns         */
[data-theme="light"] [style*="background: rgba(15, 23, 42"] {
  background: rgba(255, 255, 255, 0.95) !important;
}
[data-theme="light"] [style*="background:rgba(15, 23, 42"] {
  background: rgba(255, 255, 255, 0.95) !important;
}
[data-theme="light"] [style*="background: #020617"] {
  background: #ffffff !important;
}
[data-theme="light"] [style*="background:#020617"] {
  background: #ffffff !important;
}
[data-theme="light"] [style*="color: #020617"] {
  color: var(--text) !important;
}

/* ── Additional dark hex catch-alls ─────────────────────────── */
[data-theme="light"] [style*="background: #0f172a"],
[data-theme="light"] [style*="background:#0f172a"] {
  background: rgba(255, 255, 255, 0.96) !important;
}
[data-theme="light"] [style*="background: #0b1224"],
[data-theme="light"] [style*="background:#0b1224"] {
  background: rgba(255, 255, 255, 0.96) !important;
}
[data-theme="light"] [style*="background: #0a1020"],
[data-theme="light"] [style*="background:#0a1020"] {
  background: rgba(255, 255, 255, 0.96) !important;
}
[data-theme="light"] [style*="background: #111827"],
[data-theme="light"] [style*="background:#111827"] {
  background: #f8fafc !important;
}
[data-theme="light"] [style*="background: #1e293b"],
[data-theme="light"] [style*="background:#1e293b"] {
  background: #f1f5f9 !important;
}
[data-theme="light"] [style*="border-bottom-color: #020617"],
[data-theme="light"] [style*="border-bottom-color:#020617"] {
  border-bottom-color: #ffffff !important;
}

/* ── Radial gradients in inline styles ─────────────────────── */
[data-theme="light"] [style*="radial-gradient"][style*="#020617"] {
  background: rgba(255, 255, 255, 0.95) !important;
}

/* ── Text that's hardcoded white ───────────────────────────── */
[data-theme="light"] [style*="color: white"],
[data-theme="light"] [style*="color:white"],
[data-theme="light"] [style*="color: #fff"],
[data-theme="light"] [style*="color:#fff"],
[data-theme="light"] [style*="color: #e5e7eb"],
[data-theme="light"] [style*="color:#e5e7eb"] {
  color: var(--text) !important;
}

/* ── Misc element overrides ────────────────────────────────── */
[data-theme="light"] code,
[data-theme="light"] pre {
  background: #f1f5f9 !important;
  color: var(--text) !important;
}

[data-theme="light"] hr {
  border-color: rgba(203, 213, 225, 0.4) !important;
}

/* ── Toast / alert messages ────────────────────────────────── */
[data-theme="light"] .toast,
[data-theme="light"] .alert {
  background: #ffffff !important;
  border-color: rgba(203, 213, 225, 0.5) !important;
  color: var(--text) !important;
}

/* ── Tip box ───────────────────────────────────────────────── */
[data-theme="light"] .tip-box,
[data-theme="light"] [style*="border-left: 3px solid var(--accent)"] {
  background: rgba(2, 132, 199, 0.04) !important;
}

/* ── Gallery grid items ────────────────────────────────────── */
[data-theme="light"] .gallery-item,
[data-theme="light"] .media-card,
[data-theme="light"] .thumb {
  background: #ffffff !important;
  border-color: rgba(203, 213, 225, 0.4) !important;
}

/* ── Map controls & popups ─────────────────────────────────── */
[data-theme="light"] .leaflet-control {
  background: #ffffff !important;
}
[data-theme="light"] .leaflet-popup-content-wrapper {
  background: #ffffff !important;
  color: var(--text) !important;
  box-shadow: 0 4px 16px rgba(148, 163, 184, 0.25) !important;
}
[data-theme="light"] .leaflet-popup-tip {
  background: #ffffff !important;
}
[data-theme="light"] .leaflet-popup-content {
  color: var(--text) !important;
}

/* ── Pagination ────────────────────────────────────────────── */
[data-theme="light"] .pagination button,
[data-theme="light"] .page-btn {
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
[data-theme="light"] .pagination button.active,
[data-theme="light"] .page-btn.active {
  background: var(--accent) !important;
  color: #ffffff !important;
}

/* ── Empty states ──────────────────────────────────────────── */
[data-theme="light"] .empty,
[data-theme="light"] .empty-state,
[data-theme="light"] .no-data {
  color: var(--muted) !important;
}

/* ── AI pills / scan badges — keep readable ────────────────── */
[data-theme="light"] .ai-badge,
[data-theme="light"] .scan-badge {
  opacity: 0.9;
}

/* ── Progress bar ──────────────────────────────────────────── */
[data-theme="light"] .progress-bar,
[data-theme="light"] .progress {
  background: #e2e8f0 !important;
}
[data-theme="light"] .progress-fill,
[data-theme="light"] .progress-bar-fill {
  background: var(--accent) !important;
}

/* ── Category pills (activity page) ────────────────────────── */
[data-theme="light"] .cat-pill {
  opacity: 0.85;
}

/* ── Footer ────────────────────────────────────────────────── */
[data-theme="light"] footer {
  background: rgba(255, 255, 255, 0.96) !important;
  border-top-color: rgba(203, 213, 225, 0.4) !important;
  color: var(--muted) !important;
}

/* ── Toggle button light-mode adjustments ──────────────────── */
[data-theme="light"] .theme-toggle-btn {
  border-color: rgba(203, 213, 225, 0.6);
  color: var(--muted);
}
[data-theme="light"] .theme-toggle-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* ── Selection ─────────────────────────────────────────────── */
[data-theme="light"] ::selection {
  background: rgba(2, 132, 199, 0.2);
  color: inherit;
}

/* ── Dropdown menus ────────────────────────────────────────── */
[data-theme="light"] .dropdown,
[data-theme="light"] .menu,
[data-theme="light"] .context-menu,
[data-theme="light"] [class*="dropdown-menu"] {
  background: #ffffff !important;
  border-color: rgba(203, 213, 225, 0.5) !important;
  box-shadow: 0 8px 24px rgba(148, 163, 184, 0.2) !important;
}

/* ── MFA modal ─────────────────────────────────────────────── */
[data-theme="light"] #mfa-modal,
[data-theme="light"] .mfa-modal {
  background: rgba(0, 0, 0, 0.3) !important;
}
[data-theme="light"] #mfa-modal > div,
[data-theme="light"] .mfa-box {
  background: #ffffff !important;
  border-color: rgba(203, 213, 225, 0.5) !important;
}

/* ── Upload overlay ────────────────────────────────────────── */
[data-theme="light"] #upload-overlay,
[data-theme="light"] .upload-overlay {
  background: rgba(248, 250, 252, 0.95) !important;
  color: var(--text) !important;
}

/* ── Key save banner ───────────────────────────────────────── */
[data-theme="light"] .key-banner,
[data-theme="light"] .save-banner {
  background: rgba(217, 119, 6, 0.1) !important;
  border-color: rgba(217, 119, 6, 0.3) !important;
}

/* ── Incident grid items ───────────────────────────────────── */
[data-theme="light"] .inc-card {
  background: #ffffff !important;
  border-color: rgba(203, 213, 225, 0.4) !important;
}

/* ── Org member rows ───────────────────────────────────────── */
[data-theme="light"] .member-row,
[data-theme="light"] .user-row,
[data-theme="light"] .org-row {
  border-color: rgba(203, 213, 225, 0.3) !important;
}
[data-theme="light"] .member-row:hover,
[data-theme="light"] .user-row:hover,
[data-theme="light"] .org-row:hover {
  background: rgba(241, 245, 249, 0.6) !important;
}

/* ── CTA / action buttons on landing ───────────────────────── */
[data-theme="light"] .cta-primary,
[data-theme="light"] .btn-cta {
  background: var(--accent) !important;
  color: #ffffff !important;
}
[data-theme="light"] .cta-secondary,
[data-theme="light"] .btn-outline {
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ── Info/warning/error boxes ──────────────────────────────── */
[data-theme="light"] .info-box {
  background: rgba(2, 132, 199, 0.06) !important;
  border-color: rgba(2, 132, 199, 0.2) !important;
}
[data-theme="light"] .warning-box {
  background: rgba(217, 119, 6, 0.06) !important;
  border-color: rgba(217, 119, 6, 0.2) !important;
}
[data-theme="light"] .error-box {
  background: rgba(239, 68, 68, 0.06) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
}

/* ══════════════════════════════════════════════════════════════
   Component-specific overrides (admin.html)
   ══════════════════════════════════════════════════════════════ */

/* ── HTML element background ───────────────────────────────── */
[data-theme="light"] html {
  background: #f8fafc !important;
}

/* ── Submissions list panel ────────────────────────────────── */
[data-theme="light"] .submissions-list,
[data-theme="light"] .incident-list {
  background: #ffffff !important;
}

/* ── Submission items ──────────────────────────────────────── */
[data-theme="light"] .submission-item {
  border-color: rgba(203, 213, 225, 0.3) !important;
}
[data-theme="light"] .submission-item:hover {
  background: rgba(241, 245, 249, 0.7) !important;
}
[data-theme="light"] .submission-item.active {
  background: rgba(2, 132, 199, 0.06) !important;
  border-color: rgba(2, 132, 199, 0.2) !important;
}

/* ── Detail section ────────────────────────────────────────── */
[data-theme="light"] .detail-section {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(203, 213, 225, 0.4) !important;
}

/* ── Media items / preview ─────────────────────────────────── */
[data-theme="light"] .media-item {
  background: #f8fafc !important;
  border-color: rgba(203, 213, 225, 0.4) !important;
}
[data-theme="light"] .media-preview,
[data-theme="light"] .preview {
  background: #f1f5f9 !important;
}

/* ── Incident cards ────────────────────────────────────────── */
[data-theme="light"] .incident-card {
  background: #ffffff !important;
  border-color: rgba(203, 213, 225, 0.4) !important;
}
[data-theme="light"] .incident-card:hover {
  background: rgba(241, 245, 249, 0.7) !important;
}

/* ── Private key box ───────────────────────────────────────── */
[data-theme="light"] .private-key-box textarea {
  background: #ffffff !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ── Incident form textareas ───────────────────────────────── */
[data-theme="light"] .incident-form-group textarea {
  background: #ffffff !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ── Danger / solid buttons ────────────────────────────────── */
[data-theme="light"] .btn.danger-solid,
[data-theme="light"] .danger-solid {
  color: #ffffff !important;
}

/* ── EXIF modal ────────────────────────────────────────────── */
[data-theme="light"] .exif-modal {
  background: #ffffff !important;
  color: var(--text) !important;
}
[data-theme="light"] .exif-table-wrapper {
  background: #f8fafc !important;
}

/* ── Media lightbox ────────────────────────────────────────── */
[data-theme="light"] .media-lightbox {
  background: rgba(248, 250, 252, 0.98) !important;
  color: var(--text) !important;
}

/* ── QR modal ──────────────────────────────────────────────── */
[data-theme="light"] .qr-modal {
  background: #ffffff !important;
  color: var(--text) !important;
}
[data-theme="light"] #qrCodeContainer {
  background: #ffffff !important;
}

/* ── MFA card ──────────────────────────────────────────────── */
[data-theme="light"] .mfa-card {
  background: #ffffff !important;
  border-color: rgba(203, 213, 225, 0.5) !important;
  color: var(--text) !important;
}
[data-theme="light"] .mfa-card input[type="text"] {
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ══════════════════════════════════════════════════════════════
   Component-specific overrides (gallery.html)
   ══════════════════════════════════════════════════════════════ */

/* ── AI pills ──────────────────────────────────────────────── */
[data-theme="light"] .ai-pill {
  color: #ffffff !important;
}
[data-theme="light"] .ai-pill.ai-pill-detected,
[data-theme="light"] .ai-pill.ai-pill-real {
  color: #ffffff !important;
}

/* ── Gallery modal ─────────────────────────────────────────── */
[data-theme="light"] .gallery-modal,
[data-theme="light"] .decrypt-modal {
  background: #ffffff !important;
  color: var(--text) !important;
}

/* ══════════════════════════════════════════════════════════════
   Component-specific overrides (audit.html)
   ══════════════════════════════════════════════════════════════ */

/* ── Audit detail modals ───────────────────────────────────── */
[data-theme="light"] .audit-detail,
[data-theme="light"] .justification-detail {
  background: #ffffff !important;
  color: var(--text) !important;
}

/* ══════════════════════════════════════════════════════════════
   Component-specific overrides (crowdcontrol.html)
   ══════════════════════════════════════════════════════════════ */

[data-theme="light"] .confirm-modal,
[data-theme="light"] .delete-modal {
  background: #ffffff !important;
  color: var(--text) !important;
}

/* ══════════════════════════════════════════════════════════════
   Component-specific overrides (index.html — public form)
   ══════════════════════════════════════════════════════════════ */

[data-theme="light"] .form-card,
[data-theme="light"] .upload-card {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(203, 213, 225, 0.4) !important;
  box-shadow: 0 12px 40px rgba(148, 163, 184, 0.15) !important;
}

/* ══════════════════════════════════════════════════════════════
   Broad catch-all for any remaining dark CSS-class backgrounds
   ══════════════════════════════════════════════════════════════ */

/* These target radial-gradient backgrounds in CSS rules (not inline styles) */
[data-theme="light"] .exif-modal,
[data-theme="light"] .media-lightbox,
[data-theme="light"] .qr-modal,
[data-theme="light"] .gallery-modal,
[data-theme="light"] .decrypt-modal,
[data-theme="light"] .confirm-modal,
[data-theme="light"] .audit-detail,
[data-theme="light"] .justification-detail {
  background: #ffffff !important;
  border-color: rgba(203, 213, 225, 0.4) !important;
  color: var(--text) !important;
}

/* ── Misc dark backgrounds on divs/sections ────────────────── */
[data-theme="light"] .grid > div,
[data-theme="light"] .col,
[data-theme="light"] .column {
  border-color: rgba(203, 213, 225, 0.3) !important;
}

/* ── Storage / billing cards ───────────────────────────────── */
[data-theme="light"] .storage-card,
[data-theme="light"] .billing-card,
[data-theme="light"] .summary-card {
  background: #ffffff !important;
  border-color: rgba(203, 213, 225, 0.4) !important;
}

/* ── Org settings panels ───────────────────────────────────── */
[data-theme="light"] .settings-panel,
[data-theme="light"] .org-panel,
[data-theme="light"] .slug-panel {
  background: #ffffff !important;
  border-color: rgba(203, 213, 225, 0.4) !important;
}

/* ── Activity table rows ───────────────────────────────────── */
[data-theme="light"] .activity-row {
  border-color: rgba(203, 213, 225, 0.3) !important;
}
[data-theme="light"] .activity-row:hover {
  background: rgba(241, 245, 249, 0.6) !important;
}

/* ── Pill / tag elements (keep text visible) ───────────────── */
[data-theme="light"] .pill {
  color: var(--text) !important;
}
[data-theme="light"] .pill strong {
  color: var(--text) !important;
}

/* ── Login-specific ────────────────────────────────────────── */
[data-theme="light"] .login-card,
[data-theme="light"] .auth-card {
  background: #ffffff !important;
  border-color: rgba(203, 213, 225, 0.5) !important;
}

/* ── Map view controls panel ───────────────────────────────── */
[data-theme="light"] .map-controls,
[data-theme="light"] .map-sidebar,
[data-theme="light"] #map-controls {
  background: #ffffff !important;
  border-color: rgba(203, 213, 225, 0.4) !important;
}

/* ══════════════════════════════════════════════════════════════
   Component-specific overrides (audit.html)
   ══════════════════════════════════════════════════════════════ */

/* ── Audit shell (main container) ──────────────────────────── */
[data-theme="light"] .audit-shell {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(203, 213, 225, 0.4) !important;
}
[data-theme="light"] .audit-title,
[data-theme="light"] .export-title,
[data-theme="light"] .unlock-title {
  color: var(--accent) !important;
}

/* ── Entry cards ───────────────────────────────────────────── */
[data-theme="light"] .entry-card {
  background: #ffffff !important;
  border-color: rgba(203, 213, 225, 0.4) !important;
}
[data-theme="light"] .entry-card:nth-child(odd) {
  background: rgba(241, 245, 249, 0.6) !important;
}
[data-theme="light"] .entry-line strong {
  color: var(--text) !important;
}
[data-theme="light"] .empty-state strong {
  color: var(--text) !important;
}

/* ── Export modal & overlay ────────────────────────────────── */
[data-theme="light"] .export-overlay,
[data-theme="light"] .unlock-overlay {
  background: rgba(0, 0, 0, 0.3) !important;
}
[data-theme="light"] .export-modal,
[data-theme="light"] .unlock-modal {
  background: #ffffff !important;
  border-color: rgba(203, 213, 225, 0.4) !important;
  box-shadow: 0 20px 45px rgba(148, 163, 184, 0.3) !important;
}
[data-theme="light"] .export-header,
[data-theme="light"] .unlock-header {
  background: rgba(241, 245, 249, 0.95) !important;
  border-bottom-color: rgba(203, 213, 225, 0.5) !important;
}
[data-theme="light"] .export-select,
[data-theme="light"] .export-textarea {
  background: #ffffff !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] .export-close:hover,
[data-theme="light"] .unlock-close:hover {
  color: var(--text) !important;
}

/* ── Toolbar buttons (audit / gallery) ─────────────────────── */
[data-theme="light"] .btn-toolbar {
  background: rgba(241, 245, 249, 0.8) !important;
  border-color: rgba(203, 213, 225, 0.6) !important;
  color: var(--text) !important;
}
[data-theme="light"] .btn-toolbar:hover {
  border-color: var(--accent) !important;
}

/* ══════════════════════════════════════════════════════════════
   Component-specific overrides (crowdcontrol.html)
   ══════════════════════════════════════════════════════════════ */

/* ── List containers ───────────────────────────────────────── */
[data-theme="light"] .list {
  background: #ffffff !important;
  border-color: rgba(203, 213, 225, 0.4) !important;
}

/* ── List items (.item) ────────────────────────────────────── */
[data-theme="light"] .item {
  background: #ffffff !important;
  border-color: rgba(203, 213, 225, 0.3) !important;
}
[data-theme="light"] .item:hover {
  background: rgba(241, 245, 249, 0.7) !important;
}

/* ── Generic .btn (crowdcontrol style) ─────────────────────── */
[data-theme="light"] .btn {
  background: rgba(241, 245, 249, 0.8) !important;
  border-color: rgba(203, 213, 225, 0.6) !important;
  color: var(--text) !important;
}
[data-theme="light"] .btn:hover {
  border-color: var(--accent) !important;
  color: var(--text) !important;
}
[data-theme="light"] .btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2, #0369a1)) !important;
  color: #ffffff !important;
}
[data-theme="light"] .btn.danger:hover {
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}

/* ── Confirmation modal (.modal-box in crowdcontrol) ───────── */
[data-theme="light"] .modal-box {
  background: #ffffff !important;
  color: var(--text) !important;
  border-color: rgba(203, 213, 225, 0.4) !important;
}

/* ══════════════════════════════════════════════════════════════
   Component-specific overrides (gallery.html)
   ══════════════════════════════════════════════════════════════ */

/* ── Modal head ────────────────────────────────────────────── */
[data-theme="light"] .mhead {
  background: rgba(241, 245, 249, 0.95) !important;
  border-bottom-color: rgba(203, 213, 225, 0.5) !important;
}
[data-theme="light"] .mtitle {
  color: var(--accent) !important;
}

/* ── Gallery card preview ──────────────────────────────────── */
[data-theme="light"] .preview {
  background: #f1f5f9 !important;
}

/* ── Gallery overlay ───────────────────────────────────────── */
[data-theme="light"] .gallery-overlay {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* ══════════════════════════════════════════════════════════════
   Shared heading color override (#cbd5f5 → accent)
   ══════════════════════════════════════════════════════════════ */
[data-theme="light"] .panel h2 {
  color: var(--accent) !important;
}

/* ══════════════════════════════════════════════════════════════
   Component-specific overrides (justification / storage)
   ══════════════════════════════════════════════════════════════ */

[data-theme="light"] .section {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(203, 213, 225, 0.4) !important;
}

/* ══════════════════════════════════════════════════════════════
   Component-specific overrides (index.html — public form)
   ══════════════════════════════════════════════════════════════ */

/* ── Upload modal (progress overlay) ──────────────────────── */
[data-theme="light"] .upload-modal {
  background: #ffffff !important;
  border-color: rgba(203, 213, 225, 0.4) !important;
}
[data-theme="light"] .upload-modal h3 {
  color: var(--text) !important;
}
[data-theme="light"] .upload-modal p {
  color: var(--muted) !important;
}

/* ── Card box-shadow (index.html main form) ────────────────── */
[data-theme="light"] .card {
  box-shadow: 0 12px 40px rgba(148, 163, 184, 0.15), 0 0 0 1px rgba(203, 213, 225, 0.3) !important;
}

/* ── Card right border ─────────────────────────────────────── */
[data-theme="light"] .card-right {
  border-left-color: rgba(203, 213, 225, 0.5) !important;
}

/* ══════════════════════════════════════════════════════════════
   Landing / flyer page sections
   ══════════════════════════════════════════════════════════════ */

[data-theme="light"] .section-grid,
[data-theme="light"] .features-grid,
[data-theme="light"] .use-cases,
[data-theme="light"] .steps-grid {
  color: var(--text) !important;
}
[data-theme="light"] .section-badge {
  color: var(--accent) !important;
}
[data-theme="light"] .section-title {
  color: var(--text) !important;
}

/* ══════════════════════════════════════════════════════════════
   Small action buttons (admin.html: EXIF, AI Check, Copy, QR, PEM)
   ══════════════════════════════════════════════════════════════ */

/* ── View EXIF / Upload .pem buttons ───────────────────────── */
[data-theme="light"] .btn-exif {
  background: rgba(241, 245, 249, 0.9) !important;
  border-color: rgba(203, 213, 225, 0.7) !important;
  color: var(--text) !important;
}
[data-theme="light"] .btn-exif:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ── AI Check button ───────────────────────────────────────── */
[data-theme="light"] .btn-ai {
  background: rgba(241, 245, 249, 0.9) !important;
  border-color: rgba(124, 58, 237, 0.5) !important;
  color: #7c3aed !important;
}
[data-theme="light"] .btn-ai:hover {
  border-color: #7c3aed !important;
  background: rgba(124, 58, 237, 0.08) !important;
}

/* ── Copy / QR icon buttons (incidents view) ───────────────── */
[data-theme="light"] .icon-button {
  background: rgba(241, 245, 249, 0.9) !important;
  border-color: rgba(203, 213, 225, 0.7) !important;
  color: var(--text) !important;
}
[data-theme="light"] .icon-button:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ══════════════════════════════════════════════════════════════
   Gallery tag elements (gallery.html)
   ══════════════════════════════════════════════════════════════ */

/* ── Tag button on images ──────────────────────────────────── */
[data-theme="light"] .tag-btn {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(203, 213, 225, 0.6) !important;
  color: var(--muted) !important;
  backdrop-filter: blur(4px) !important;
}
[data-theme="light"] .tag-btn:hover {
  background: rgba(185, 28, 28, 0.12) !important;
  color: #b91c1c !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
}
[data-theme="light"] .tag-btn.active {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
}

/* ── Tagged pill (count badge) ─────────────────────────────── */
[data-theme="light"] .pill {
  background: rgba(241, 245, 249, 0.85) !important;
  color: var(--muted) !important;
}
[data-theme="light"] .pill strong {
  color: var(--text) !important;
}

/* ══════════════════════════════════════════════════════════════
   Index.html — public form elements
   ══════════════════════════════════════════════════════════════ */

/* ── Use my current location button ────────────────────────── */
[data-theme="light"] .geo-btn {
  background: rgba(241, 245, 249, 0.9) !important;
  border-color: rgba(203, 213, 225, 0.6) !important;
  color: var(--muted) !important;
}
[data-theme="light"] .geo-btn:hover:not(:disabled) {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: rgba(2, 132, 199, 0.06) !important;
}

/* ── Media section (upload media card) ─────────────────────── */
[data-theme="light"] .media-section {
  background: rgba(2, 132, 199, 0.04) !important;
  border-color: rgba(203, 213, 225, 0.5) !important;
}

/* ── Tip section ───────────────────────────────────────────── */
[data-theme="light"] .tip-section {
  background: rgba(2, 132, 199, 0.04) !important;
  border-color: rgba(2, 132, 199, 0.3) !important;
}
[data-theme="light"] .tip-section textarea {
  background: #ffffff !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ── File pills ────────────────────────────────────────────── */
[data-theme="light"] .file-pill {
  background: rgba(241, 245, 249, 0.8) !important;
  border-color: rgba(203, 213, 225, 0.4) !important;
}

/* ══════════════════════════════════════════════════════════════
   Activity log category pills — darker for light mode readability
   ══════════════════════════════════════════════════════════════ */

[data-theme="light"] .cat-pill {
  opacity: 1 !important;
}
[data-theme="light"] .cat-incident {
  background: rgba(79, 70, 229, 0.12) !important;
  color: #4338ca !important;
  border-color: rgba(79, 70, 229, 0.4) !important;
}
[data-theme="light"] .cat-submission {
  background: rgba(2, 132, 199, 0.1) !important;
  color: #0369a1 !important;
  border-color: rgba(2, 132, 199, 0.35) !important;
}
[data-theme="light"] .cat-decryption {
  background: rgba(202, 138, 4, 0.1) !important;
  color: #a16207 !important;
  border-color: rgba(202, 138, 4, 0.35) !important;
}
[data-theme="light"] .cat-user {
  background: rgba(22, 163, 74, 0.1) !important;
  color: #15803d !important;
  border-color: rgba(22, 163, 74, 0.35) !important;
}
[data-theme="light"] .cat-malware {
  background: rgba(220, 38, 38, 0.1) !important;
  color: #b91c1c !important;
  border-color: rgba(220, 38, 38, 0.35) !important;
}
[data-theme="light"] .cat-org {
  background: rgba(124, 58, 237, 0.1) !important;
  color: #6d28d9 !important;
  border-color: rgba(124, 58, 237, 0.35) !important;
}
[data-theme="light"] .cat-storage {
  background: rgba(234, 88, 12, 0.1) !important;
  color: #c2410c !important;
  border-color: rgba(234, 88, 12, 0.35) !important;
}
[data-theme="light"] .cat-ai-detection {
  background: rgba(2, 132, 199, 0.1) !important;
  color: #0369a1 !important;
  border-color: rgba(2, 132, 199, 0.35) !important;
}

/* ══════════════════════════════════════════════════════════════
   Audit.html status pills — proper visible colors
   ══════════════════════════════════════════════════════════════ */

[data-theme="light"] .pill.success {
  background: rgba(22, 163, 74, 0.1) !important;
  border-color: rgba(22, 163, 74, 0.5) !important;
  color: #15803d !important;
}
[data-theme="light"] .pill.fail {
  background: rgba(220, 38, 38, 0.1) !important;
  border-color: rgba(220, 38, 38, 0.5) !important;
  color: #b91c1c !important;
}
[data-theme="light"] .pill.blocked {
  background: rgba(202, 138, 4, 0.1) !important;
  border-color: rgba(202, 138, 4, 0.5) !important;
  color: #a16207 !important;
}
[data-theme="light"] .pill.admin {
  background: rgba(2, 132, 199, 0.1) !important;
  border-color: rgba(2, 132, 199, 0.5) !important;
  color: #0369a1 !important;
}
[data-theme="light"] .pill.malware {
  background: rgba(220, 38, 38, 0.1) !important;
  border-color: rgba(220, 38, 38, 0.5) !important;
  color: #b91c1c !important;
}

/* ── Colored pills used in crowdcontrol.html ───────────────── */
[data-theme="light"] .pill.blue {
  border-color: rgba(2, 132, 199, 0.7) !important;
  color: #0369a1 !important;
}
[data-theme="light"] .pill.green {
  border-color: rgba(22, 163, 74, 0.7) !important;
  color: #15803d !important;
}
[data-theme="light"] .pill.red {
  border-color: rgba(220, 38, 38, 0.7) !important;
  color: #b91c1c !important;
}

/* ══════════════════════════════════════════════════════════════
   Remaining catch-all button styles
   ══════════════════════════════════════════════════════════════ */
[data-theme="light"] button {
  color: var(--text);
}
[data-theme="light"] button:not(.btn-primary):not(.btn-ghost):not(.btn-secondary):not(.tab):not(.tab-link):not(.theme-toggle-btn):not(.danger-solid):not(.ai-pill):not(.btn):not(.btn-toolbar):not(.btn-exif):not(.btn-ai):not(.icon-button):not(.tag-btn):not(.geo-btn) {
  border-color: rgba(203, 213, 225, 0.5);
}