/* ==========================================================================
   Light Theme – scoped under [data-theme="light"]
   Loaded AFTER all other stylesheets so it can override dark defaults.
   Does NOT modify any existing CSS file.
   ========================================================================== */

/* ========================
   1.  CSS Variable Overrides
   ======================== */

[data-theme="light"] {
  /* --- app.css :root --- */
  --bg-body: #f0f4f8;
  --bg-panel: rgba(255, 255, 255, 0.92);
  --bg-panel-strong: rgba(255, 255, 255, 0.98);
  --border-subtle: #cbd5e1;
  --accent: #2563eb;
  --accent-soft: rgba(37, 99, 235, 0.08);
  --text-main: #1e293b;
  --text-muted: #475569;
  --text-soft: #64748b;
  --danger: #dc2626;
  --success: #16a34a;
  --warning: #d97706;
  --gradient-body: linear-gradient(180deg, #e8edf3 0%, #f0f4f8 100%);
  --gradient-header: linear-gradient(135deg, #ffffff 0%, #f0f4f8 100%);
  --header-bg: rgba(255, 255, 255, 0.97);
  --header-border: #cbd5e1;

  /* --- admin.css :root --- */
  --bg-surface: #ffffff;
  --bg-panel-alt: #f0f4f8;
  --accent-strong: #1d4ed8;
  --danger-soft: rgba(220, 38, 38, 0.08);
  --text: #1e293b;
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-subtle: 0 2px 6px rgba(0, 0, 0, 0.07);

  /* --- variables.css :root --- */
  --border-soft: #94a3b8;
  --border-strong: #cbd5e1;
  --pill-ok: #16a34a;
  --pill-bad: #dc2626;
}


/* ========================
   2.  Body & Background
   ======================== */

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


/* ========================
   3.  App Header
   ========================
   admin-shell.js injects styles with !important.
   We need !important scoped under [data-theme] to override. */

[data-theme="light"] header.app-header,
[data-theme="light"] .app-header {
  background: #ffffff !important;
  border-bottom: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10) !important;
  backdrop-filter: none !important;
}

[data-theme="light"] .app-header-title {
  color: #1e293b !important;
}

/* Nav links (admin-shell.js <style>) */
[data-theme="light"] .nav-link {
  color: #475569 !important;
}

[data-theme="light"] .nav-link:hover {
  color: #1e293b !important;
  border-bottom-color: rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .nav-link.active {
  color: #1e293b !important;
  font-weight: 600 !important;
  border-bottom-color: var(--accent) !important;
}

[data-theme="light"] .nav-link[style*="color: #86efac"] {
  color: #16a34a !important;
}

[data-theme="light"] .nav-group-toggle {
  color: #475569 !important;
}

[data-theme="light"] .nav-group-toggle:hover {
  color: #1e293b !important;
  border-bottom-color: rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .nav-group-menu {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  backdrop-filter: none !important;
}

[data-theme="light"] .nav-group-menu a {
  color: #475569 !important;
}

[data-theme="light"] .nav-group-menu a:hover {
  background: rgba(37, 99, 235, 0.06) !important;
  color: #1e293b !important;
  border-left-color: #2563eb !important;
}

[data-theme="light"] .nav-group-menu a.active {
  color: #1e293b !important;
  background: rgba(37, 99, 235, 0.08) !important;
  border-left-color: #2563eb !important;
}

/* Header user info – inline styles from admin-shell.js */
[data-theme="light"] .app-header-user-info span {
  color: #1e293b !important;
}

[data-theme="light"] .app-header-user-info a span:last-child {
  color: #64748b !important;
}

[data-theme="light"] .app-header-user-info a {
  color: #1e293b !important;
}

[data-theme="light"] .app-header-user-info a:hover {
  background-color: rgba(37, 99, 235, 0.06) !important;
}

[data-theme="light"] .app-header-user-info img {
  border-color: rgba(0, 0, 0, 0.12) !important;
}

/* Role badge in header – inline styles */
[data-theme="light"] .app-header-user-info span[style*="border-radius: 999px"] {
  background: rgba(37, 99, 235, 0.08) !important;
  color: #2563eb !important;
  border-color: rgba(37, 99, 235, 0.25) !important;
}

/* Logout button – inline styles from admin-shell.js */
[data-theme="light"] .app-header-user-info button,
[data-theme="light"] .app-header-content > div:last-child button {
  background: rgba(220, 38, 38, 0.08) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(220, 38, 38, 0.25) !important;
}

[data-theme="light"] .app-header-user-info button:hover,
[data-theme="light"] .app-header-content > div:last-child button:hover {
  background: rgba(220, 38, 38, 0.14) !important;
  border-color: rgba(220, 38, 38, 0.4) !important;
}


/* ========================
   4.  Admin Layout
   ======================== */

[data-theme="light"] .admin-root {
  background: transparent;
}

[data-theme="light"] .admin-header {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: var(--shadow-subtle) !important;
}

[data-theme="light"] .admin-header h1 {
  color: #1e293b;
}

[data-theme="light"] .admin-subtitle {
  color: #64748b;
}

[data-theme="light"] .admin-main {
  color: #1e293b;
}

/* Page wrappers */
[data-theme="light"] .settings-page,
[data-theme="light"] .account-page,
[data-theme="light"] .sops-page {
  background: var(--gradient-body) !important;
}


/* ========================
   5.  Panels
   ======================== */

[data-theme="light"] .panel {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10) !important;
}

[data-theme="light"] .panel-header {
  border-bottom-color: #cbd5e1 !important;
}

[data-theme="light"] .panel-header h2 {
  color: #475569 !important;
}

[data-theme="light"] .panel-subtitle {
  color: #64748b;
}

[data-theme="light"] .panel-empty {
  color: #64748b;
}

[data-theme="light"] .panel-footer,
[data-theme="light"] .sop-status,
[data-theme="light"] .site-status {
  border-top-color: #cbd5e1;
}


/* ========================
   6.  Buttons
   ======================== */

/* Default button */
[data-theme="light"] .btn {
  background: #ffffff;
  border-color: #d1d5db;
  color: #374151;
}

[data-theme="light"] .btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

/* Primary */
[data-theme="light"] .btn-primary {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

[data-theme="light"] .btn-primary:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}

/* Secondary */
[data-theme="light"] .btn-secondary {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
}

[data-theme="light"] .btn-secondary:hover {
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
}

/* Ghost */
[data-theme="light"] .btn-ghost {
  background: transparent;
  border-color: #d1d5db;
  color: #64748b;
}

[data-theme="light"] .btn-ghost:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
  color: #374151;
}

/* Outline */
[data-theme="light"] .btn-outline {
  background: transparent;
  border-color: #2563eb;
  color: #2563eb;
}

[data-theme="light"] .btn-outline:hover {
  background: rgba(37, 99, 235, 0.06);
  color: #1d4ed8;
}

/* Danger */
[data-theme="light"] .btn-danger {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

[data-theme="light"] .btn-danger:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
}

[data-theme="light"] .btn-danger-outline {
  background: transparent;
  border-color: #fca5a5;
  color: #dc2626;
}

[data-theme="light"] .btn-danger-outline:hover {
  background: rgba(220, 38, 38, 0.06);
  color: #b91c1c;
}

/* Success */
[data-theme="light"] .btn-success {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #ffffff !important;
}

[data-theme="light"] .btn-success:hover {
  background: #15803d !important;
  border-color: #15803d !important;
}

/* Info */
[data-theme="light"] .btn-info {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}

[data-theme="light"] .btn-info:hover {
  background: #0369a1 !important;
  border-color: #0369a1 !important;
}

/* Link button */
[data-theme="light"] .link-button {
  color: #2563eb;
}

[data-theme="light"] .link-button:hover {
  color: #1d4ed8;
}


/* ========================
   7.  Forms & Inputs
   ======================== */

[data-theme="light"] .form-row input,
[data-theme="light"] .form-row select,
[data-theme="light"] .form-row textarea,
[data-theme="light"] .search-input,
[data-theme="light"] .site-name-input {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #1e293b !important;
}

[data-theme="light"] .form-row input:focus,
[data-theme="light"] .form-row select:focus,
[data-theme="light"] .form-row textarea:focus,
[data-theme="light"] .search-input:focus,
[data-theme="light"] .site-name-input:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important;
}

[data-theme="light"] .form-row label {
  color: #64748b;
}

/* Admin.css inputs */
[data-theme="light"] .input,
[data-theme="light"] .textarea {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #1e293b !important;
  box-shadow: none !important;
}

[data-theme="light"] .input:focus,
[data-theme="light"] .textarea:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important;
}

[data-theme="light"] .field-group label {
  color: #64748b;
}

[data-theme="light"] .field-help {
  color: #64748b;
}

/* Setting inputs (settings page) */
[data-theme="light"] .setting-input {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #1e293b !important;
}

[data-theme="light"] .setting-input:focus {
  border-color: #2563eb !important;
  background: #ffffff !important;
}

[data-theme="light"] .setting-label {
  color: #374151 !important;
}

[data-theme="light"] .setting-description {
  color: #64748b !important;
}

/* Account page form */
[data-theme="light"] .form-group label {
  color: #475569 !important;
}

[data-theme="light"] .form-group input {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #1e293b !important;
}

[data-theme="light"] .form-group input:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important;
}


/* ========================
   8.  Pills & Badges
   ======================== */

[data-theme="light"] .pill {
  background: #e8edf3;
  border-color: #cbd5e1;
  color: #475569;
}

[data-theme="light"] .pill-muted {
  background: #e8edf3;
  border-color: #cbd5e1;
  color: #64748b;
}

[data-theme="light"] .pill-site {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.25);
  color: #2563eb;
}

[data-theme="light"] .pill-error {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.25);
  color: #dc2626;
}

[data-theme="light"] .pill-role-admin {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.25);
  color: #7c3aed;
}

[data-theme="light"] .pill-role-reporter {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.25);
  color: #2563eb;
}

[data-theme="light"] .pill-status-active {
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.25);
  color: #16a34a;
}

[data-theme="light"] .pill-status-inactive {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.25);
  color: #dc2626;
}

[data-theme="light"] .pill-ok {
  background: rgba(22, 163, 74, 0.08);
  color: #16a34a;
  box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.3);
}

[data-theme="light"] .pill-bad {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.3);
}

/* Status badges */
[data-theme="light"] .status-badge.active,
[data-theme="light"] .status-badge.status-success {
  background: rgba(22, 163, 74, 0.08);
  color: #16a34a;
  border-color: rgba(22, 163, 74, 0.3);
}

[data-theme="light"] .status-badge.inactive,
[data-theme="light"] .status-badge.status-unknown,
[data-theme="light"] .status-badge.expired {
  background: #e8edf3;
  color: #64748b;
  border-color: #cbd5e1;
}

[data-theme="light"] .status-badge.status-failed,
[data-theme="light"] .status-badge.revoked {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.3);
}

[data-theme="light"] .status-badge.status-pending {
  background: rgba(217, 119, 6, 0.08);
  color: #d97706;
  border-color: rgba(217, 119, 6, 0.3);
}

[data-theme="light"] .status-badge.status-running {
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.3);
}

/* Badge scope (admin.css) */
[data-theme="light"] .badge--scope {
  background: #e8edf3;
  color: #475569;
}

[data-theme="light"] .badge--scope-global {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.25);
  color: #2563eb;
}

[data-theme="light"] .badge--scope-dealer {
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.25);
  color: #16a34a;
}

[data-theme="light"] .badge--scope-site {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.25);
  color: #dc2626;
}

/* Role badges (account page) */
[data-theme="light"] .role-admin {
  background: rgba(124, 58, 237, 0.08);
  color: #7c3aed;
  border-color: rgba(124, 58, 237, 0.25);
}

[data-theme="light"] .role-reporter {
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.25);
}

/* Scenario badges */
[data-theme="light"] .scenario-badge {
  background: #e8edf3;
  border-color: rgba(37, 99, 235, 0.25);
}


/* ========================
   9.  Modals
   ======================== */

[data-theme="light"] .modal-content {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .modal-title {
  color: #1e293b !important;
}

[data-theme="light"] .modal-close,
[data-theme="light"] .modal-close-btn {
  color: #64748b;
}

[data-theme="light"] .modal-close:hover,
[data-theme="light"] .modal-close-btn:hover {
  background: #e8edf3;
  color: #475569;
}

[data-theme="light"] .modal-footer {
  border-top-color: #cbd5e1;
}


/* ========================
   10. Status Messages
   ======================== */

[data-theme="light"] .status-message.success,
[data-theme="light"] .card-status-message.success {
  background: rgba(22, 163, 74, 0.08) !important;
  border-color: rgba(22, 163, 74, 0.3) !important;
  color: #16a34a !important;
}

[data-theme="light"] .status-message.error,
[data-theme="light"] .card-status-message.error {
  background: rgba(220, 38, 38, 0.08) !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
  color: #dc2626 !important;
}

[data-theme="light"] .status-message.info {
  background: rgba(37, 99, 235, 0.08) !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
  color: #2563eb !important;
}

/* Admin status */
[data-theme="light"] .admin-status.status-info {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.2);
  color: #2563eb;
}

[data-theme="light"] .admin-status.status-success {
  background: rgba(22, 163, 74, 0.06);
  border-color: rgba(22, 163, 74, 0.2);
  color: #16a34a;
}

[data-theme="light"] .admin-status.status-error {
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.2);
  color: #dc2626;
}

/* Account page messages */
[data-theme="light"] .message-success {
  background: rgba(22, 163, 74, 0.08) !important;
  color: #16a34a !important;
  border-color: rgba(22, 163, 74, 0.3) !important;
}

[data-theme="light"] .message-error {
  background: rgba(220, 38, 38, 0.08) !important;
  color: #dc2626 !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
}

/* Admin feedback */
[data-theme="light"] .admin-feedback--success-soft {
  background: rgba(22, 163, 74, 0.06);
  border-color: rgba(22, 163, 74, 0.25);
  color: #16a34a;
}


/* ========================
   11. Notifications (admin-shell.js)
   ======================== */

[data-theme="light"] .admin-notification {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  backdrop-filter: none;
}

[data-theme="light"] .admin-notification--error {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.3);
  color: #dc2626;
}

[data-theme="light"] .admin-notification--warning {
  background: rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.3);
  color: #d97706;
}

[data-theme="light"] .admin-notification--success {
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.3);
  color: #16a34a;
}

[data-theme="light"] .admin-notification--info {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.3);
  color: #2563eb;
}


/* ========================
   12. Error Log (admin-shell.js)
   ======================== */

[data-theme="light"] .error-log-button {
  background: #e8edf3 !important;
  border-color: #d1d5db !important;
  color: #64748b !important;
}

[data-theme="light"] .error-log-button.has-errors {
  background: rgba(220, 38, 38, 0.08) !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
  color: #dc2626 !important;
}

[data-theme="light"] .error-log-button:hover {
  background: #e2e8f0 !important;
  border-color: #9ca3af !important;
}

[data-theme="light"] .error-log-button.has-errors:hover {
  background: rgba(220, 38, 38, 0.12) !important;
  border-color: rgba(220, 38, 38, 0.5) !important;
}

[data-theme="light"] .error-log-button .error-count {
  background: #e2e8f0 !important;
}

[data-theme="light"] .error-log-button.has-errors .error-count {
  background: #dc2626 !important;
  color: #ffffff !important;
}

[data-theme="light"] .error-log-panel {
  background: #ffffff !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .error-log-header {
  background: rgba(220, 38, 38, 0.05) !important;
  border-bottom-color: rgba(220, 38, 38, 0.15) !important;
}

[data-theme="light"] .error-log-title {
  color: #dc2626 !important;
}

[data-theme="light"] .error-log-close {
  color: #dc2626 !important;
}

[data-theme="light"] .error-log-item {
  background: rgba(220, 38, 38, 0.04) !important;
  border-color: rgba(220, 38, 38, 0.15) !important;
}

[data-theme="light"] .error-log-item-message {
  color: #dc2626 !important;
}

[data-theme="light"] .error-log-item-time,
[data-theme="light"] .error-log-item-context {
  color: #64748b !important;
}

[data-theme="light"] .error-log-item-details {
  color: #475569 !important;
}

[data-theme="light"] .error-log-item-action a {
  color: #2563eb !important;
}

[data-theme="light"] .error-log-empty {
  color: #64748b !important;
}


/* ========================
   13. Scope Tree
   ======================== */

[data-theme="light"] .scope-tree {
  background: #f0f4f8;
  border-color: #cbd5e1;
}

[data-theme="light"] .scope-node:hover {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.15);
}

[data-theme="light"] .scope-node:hover::before {
  background: rgba(37, 99, 235, 0.4);
}

[data-theme="light"] .scope-node--active {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.2);
  color: #2563eb;
}

[data-theme="light"] .scope-node--active::before {
  background: #2563eb;
}

[data-theme="light"] .scope-node--global {
  color: #1e293b;
}

[data-theme="light"] .scope-node--global:hover::before {
  background: rgba(124, 58, 237, 0.5);
}

[data-theme="light"] .scope-node--global.scope-node--active {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.2);
  color: #7c3aed;
}

[data-theme="light"] .scope-node--global.scope-node--active::before {
  background: #7c3aed;
}

[data-theme="light"] .scope-node--dealer {
  color: #475569;
}

[data-theme="light"] .scope-node--dealer.scope-node--active {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.2);
  color: #2563eb;
}

[data-theme="light"] .scope-node--site {
  color: #64748b;
}

[data-theme="light"] .scope-node--site:hover::before {
  background: rgba(22, 163, 74, 0.4);
}

[data-theme="light"] .scope-node--site.scope-node--active {
  background: rgba(22, 163, 74, 0.06);
  border-color: rgba(22, 163, 74, 0.2);
  color: #16a34a;
}

[data-theme="light"] .scope-node--site.scope-node--active::before {
  background: #16a34a;
}


/* ========================
   14. Lists & Search
   ======================== */

[data-theme="light"] .site-list-item,
[data-theme="light"] .sop-list-item {
  background: #f0f4f8;
  color: #1e293b;
}

[data-theme="light"] .site-list-item .subtitle,
[data-theme="light"] .sop-list-item .subtitle {
  color: #64748b;
}

[data-theme="light"] .site-list-item.is-active,
[data-theme="light"] .sop-list-item.is-active {
  background: rgba(37, 99, 235, 0.08);
}

[data-theme="light"] .site-empty-state,
[data-theme="light"] .sop-empty-state {
  background: #f0f4f8;
  border-color: #d1d5db;
}


/* ========================
   15. Incident List (report-admin)
   ======================== */

[data-theme="light"] .incident-list-item {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10) !important;
  color: #1e293b !important;
}

[data-theme="light"] .incident-list-item:hover {
  background: #e8edf3 !important;
  border-color: #2563eb !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .incident-list-item.active {
  border-color: #2563eb !important;
  background: rgba(37, 99, 235, 0.04) !important;
}

[data-theme="light"] .incident-list-title {
  color: #1e293b;
}

[data-theme="light"] .incident-list-meta {
  color: #64748b;
}

[data-theme="light"] .incident-list-empty {
  color: #64748b;
}


/* ========================
   16. Tables (generic)
   ======================== */

[data-theme="light"] table {
  color: #1e293b;
}

[data-theme="light"] th {
  color: #475569;
  border-bottom-color: #cbd5e1;
}

[data-theme="light"] td {
  border-bottom-color: #e2e8f0;
}

[data-theme="light"] tr:hover td {
  background: #e8edf3;
}


/* ========================
   17. Settings Page
   ======================== */

[data-theme="light"] .settings-card {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .settings-card:hover {
  border-color: rgba(37, 99, 235, 0.3) !important;
  background: #e8edf3 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .settings-card.expanded {
  border-color: rgba(37, 99, 235, 0.3) !important;
}

[data-theme="light"] .settings-card-title {
  color: #1e293b !important;
}

[data-theme="light"] .settings-card-summary {
  color: #64748b !important;
}

[data-theme="light"] .settings-card-summary-stats {
  color: #64748b !important;
}

[data-theme="light"] .settings-card-arrow {
  color: #64748b !important;
}

[data-theme="light"] .settings-card-body {
  border-top-color: #cbd5e1 !important;
}

[data-theme="light"] .settings-card-summary-label.configured {
  background: rgba(22, 163, 74, 0.08) !important;
  color: #16a34a !important;
  border-color: rgba(22, 163, 74, 0.3) !important;
}

[data-theme="light"] .settings-card-summary-label.not-configured {
  background: rgba(220, 38, 38, 0.08) !important;
  color: #dc2626 !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
}

[data-theme="light"] .settings-card-summary-status.good {
  background: rgba(22, 163, 74, 0.08) !important;
  color: #16a34a !important;
  border-color: rgba(22, 163, 74, 0.3) !important;
}

[data-theme="light"] .settings-card-summary-status.error {
  background: rgba(220, 38, 38, 0.08) !important;
  color: #dc2626 !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
}

[data-theme="light"] .page-title {
  color: #1e293b !important;
}

[data-theme="light"] .page-subtitle {
  color: #64748b !important;
}

/* Messaging subsections */
[data-theme="light"] .messaging-subsection {
  background: #f0f4f8 !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .messaging-subsection:hover {
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .messaging-subsection-header:hover {
  background: rgba(0, 0, 0, 0.02) !important;
}

[data-theme="light"] .messaging-subsection-title {
  color: #1e293b !important;
}

[data-theme="light"] .messaging-subsection-body {
  border-top-color: #cbd5e1 !important;
}

[data-theme="light"] .messaging-subsection-arrow {
  color: #64748b !important;
}

[data-theme="light"] .messaging-method-last-error {
  color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.04) !important;
  border-top-color: rgba(220, 38, 38, 0.15) !important;
}

/* Card actions */
[data-theme="light"] .card-actions {
  border-top-color: #cbd5e1 !important;
}

/* SMTP test */
[data-theme="light"] .smtp-test-email {
  border-top-color: #cbd5e1;
}

/* Holiday settings */
[data-theme="light"] .holiday-sync-status {
  color: #64748b !important;
}

[data-theme="light"] .holiday-sync-warning {
  background: rgba(217, 119, 6, 0.06) !important;
  border-color: rgba(217, 119, 6, 0.25) !important;
  color: #d97706 !important;
}

[data-theme="light"] .holiday-preview-list th {
  color: #64748b !important;
}

[data-theme="light"] .holiday-preview-list td {
  color: #1e293b !important;
}

[data-theme="light"] .holiday-preview-list th,
[data-theme="light"] .holiday-preview-list td {
  border-bottom-color: #e2e8f0 !important;
}


/* ========================
   18. Account Page
   ======================== */

[data-theme="light"] .account-content {
  color: #1e293b;
}

[data-theme="light"] .info-row {
  border-bottom-color: #e2e8f0;
}

[data-theme="light"] .info-label {
  color: #64748b !important;
}

[data-theme="light"] .info-value {
  color: #1e293b !important;
}


/* ========================
   19. Media & Drop Zone
   ======================== */

[data-theme="light"] .media-card {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10) !important;
}

[data-theme="light"] .media-thumb {
  background: #e8edf3;
}

[data-theme="light"] .media-label {
  color: #64748b;
}

[data-theme="light"] .drop-zone {
  background: repeating-linear-gradient(
    135deg,
    #f0f4f8,
    #f0f4f8 4px,
    #e8edf3 4px,
    #e8edf3 8px
  ) !important;
  border-color: #d1d5db !important;
  color: #64748b;
}

[data-theme="light"] .drop-zone.dragover {
  border-color: #2563eb !important;
  background: rgba(37, 99, 235, 0.04) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1) !important;
}


/* ========================
   20. Details / Extraction blocks
   ======================== */

[data-theme="light"] details.admin-details,
[data-theme="light"] details.wizardSiteExtraction,
[data-theme="light"] details.wizardContactExtraction {
  color: #475569;
}

[data-theme="light"] details.admin-details summary,
[data-theme="light"] details.wizardSiteExtraction summary,
[data-theme="light"] details.wizardContactExtraction summary {
  color: #64748b;
}

[data-theme="light"] details.admin-details summary:hover,
[data-theme="light"] details.wizardSiteExtraction summary:hover,
[data-theme="light"] details.wizardContactExtraction summary:hover {
  color: #475569;
}

[data-theme="light"] details.admin-details pre,
[data-theme="light"] details.wizardSiteExtraction pre,
[data-theme="light"] details.wizardContactExtraction pre {
  background: #f0f4f8;
  border-color: #cbd5e1;
  color: #475569;
}

[data-theme="light"] details.admin-details summary::after,
[data-theme="light"] details.wizardSiteExtraction summary::after,
[data-theme="light"] details.wizardContactExtraction summary::after {
  color: #64748b;
}

[data-theme="light"] details.admin-details[open] summary::after,
[data-theme="light"] details.wizardSiteExtraction[open] summary::after,
[data-theme="light"] details.wizardContactExtraction[open] summary::after {
  color: #475569;
}


/* ========================
   21. Map Preview
   ======================== */

[data-theme="light"] .site-map-wrapper {
  border-color: #d1d5db;
}

[data-theme="light"] .site-map-preview {
  border-color: rgba(37, 99, 235, 0.2);
  color: #64748b;
}

[data-theme="light"] .site-map-header {
  color: #64748b;
}


/* ========================
   22. Status line
   ======================== */

[data-theme="light"] .status-info {
  color: #64748b;
}

[data-theme="light"] .status-success {
  color: #16a34a;
}

[data-theme="light"] .status-error {
  color: #dc2626;
}

[data-theme="light"] .status-warning {
  color: #d97706;
}


/* ========================
   23. Site Node / Tree Connectors
   ======================== */

[data-theme="light"] .site-node-children {
  border-left-color: #d1d5db;
}


/* ========================
   24. Spinner (settings)
   ======================== */

[data-theme="light"] .spinner {
  border-color: rgba(0, 0, 0, 0.15);
  border-top-color: #2563eb;
}


/* ========================
   25. Scrollbar Overrides
   ======================== */

[data-theme="light"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="light"] ::-webkit-scrollbar-track {
  background: #e8edf3;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}


/* ========================
   26. Selection / Highlight
   ======================== */

[data-theme="light"] ::selection {
  background: rgba(37, 99, 235, 0.2);
  color: #1e293b;
}


/* ========================
   27. Links
   ======================== */

[data-theme="light"] a {
  color: #2563eb;
}

[data-theme="light"] a:hover {
  color: #1d4ed8;
}


/* ========================
   28. Code & Pre
   ======================== */

[data-theme="light"] pre,
[data-theme="light"] code {
  background: #e8edf3;
  color: #475569;
}


/* ========================
   29. Theme Toggle Button
   ======================== */

.theme-toggle-btn {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 6px;
  cursor: pointer;
  padding: 5px 8px;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: #e5e7eb;
  margin-right: 8px;
  flex-shrink: 0;
}

.theme-toggle-btn:hover {
  background: rgba(148, 163, 184, 0.15);
  border-color: rgba(148, 163, 184, 0.5);
}

[data-theme="light"] .theme-toggle-btn {
  color: #475569;
  border-color: #d1d5db;
}

[data-theme="light"] .theme-toggle-btn:hover {
  background: #e8edf3;
  border-color: #9ca3af;
}


/* ========================
   30. Safety-net Inline Style Overrides (minimal)
   ========================
   Only for the handful of dynamic inline styles that remain in JS.
   Most inline styles have been moved to CSS classes in Phase 2. */

/* Dynamic dark backgrounds (e.g. roles.js, groups.js computed colors) */
[data-theme="light"] [style*="background: rgba(15, 23, 42"],
[data-theme="light"] [style*="background: rgba(2, 6, 23"],
[data-theme="light"] [style*="background: rgba(30, 41, 59"] {
  background: #f0f4f8 !important;
}

[data-theme="light"] [style*="background: #1e293b"],
[data-theme="light"] [style*="background: #0f172a"],
[data-theme="light"] [style*="background: #334155"] {
  background: #ffffff !important;
}


/* ========================
   31. Login Page Overrides
   ========================
   Login page is already light. Just ensure consistency. */

/* No changes needed for login in light mode (it's already light).
   If dark mode is selected, login stays as-is since it has its own CSS. */


/* ========================
   32. Report Page Overrides
   ========================
   Report page is print-neutral, minimal changes. */

/* No changes needed for report.html in light mode. */


/* ========================
   33. Timepicker Override
   ======================== */

[data-theme="light"] .timepicker-ui-modal {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}


/* ========================
   34. Miscellaneous
   ======================== */

/* text-muted class from admin.css */
[data-theme="light"] .text-muted {
  color: #64748b;
}

/* Saved / pending soft states */
[data-theme="light"] .saved-soft {
  background-color: rgba(22, 163, 74, 0.06);
  border-color: rgba(22, 163, 74, 0.2);
}

[data-theme="light"] .saved-soft-flash {
  background-color: rgba(22, 163, 74, 0.12);
  border-color: rgba(22, 163, 74, 0.3);
}

[data-theme="light"] .pending-soft {
  background-color: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

/* Section blocks */
[data-theme="light"] .section-block h4 {
  color: #1e293b;
}

[data-theme="light"] .section-caption {
  color: #64748b;
}

/* Panel border from admin.css */
[data-theme="light"] .panel {
  border-color: #cbd5e1 !important;
}

/* Placeholder text */
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder,
[data-theme="light"] .input::placeholder,
[data-theme="light"] .textarea::placeholder {
  color: #64748b !important;
}

/* HR */
[data-theme="light"] hr {
  border-color: #cbd5e1;
}

/* Disabled button override */
[data-theme="light"] .btn:disabled,
[data-theme="light"] .btn-primary:disabled {
  opacity: 0.5;
}

/* List section headers */
[data-theme="light"] .list-section-header span,
[data-theme="light"] .site-list-section-header span,
[data-theme="light"] .sop-list-header span {
  color: #64748b;
}

/* SOP list empty */
[data-theme="light"] .sop-list-empty {
  color: #64748b;
}

/* Panel header in admin.css */
[data-theme="light"] .panel-header h2 {
  color: #475569;
}

/* select elements */
[data-theme="light"] select {
  background: #ffffff;
  border-color: #d1d5db;
  color: #1e293b;
}

/* checkbox/radio */
[data-theme="light"] input[type="checkbox"],
[data-theme="light"] input[type="radio"] {
  accent-color: #2563eb;
}


/* ==========================================================================
   SECTION B: Overrides for JS-injected <style> blocks
   These target styles injected by admin-shell.js and bug-reporter.js
   ========================================================================== */

/* ========================
   B1. Admin Shell Nav Styles (injected by admin-shell.js)
   ======================== */

/* Header background override for the injected style */
[data-theme="light"] .app-header {
  background: #ffffff !important;
  border-bottom-color: #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10) !important;
}

/* Nav group menu dropdown */
[data-theme="light"] .nav-group-menu {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  backdrop-filter: none !important;
}

[data-theme="light"] .nav-group-menu a {
  color: #475569 !important;
  border-left-color: transparent !important;
}

[data-theme="light"] .nav-group-menu a:hover {
  background: rgba(37, 99, 235, 0.06) !important;
  color: #1e293b !important;
  border-left-color: #2563eb !important;
}

[data-theme="light"] .nav-group-menu a.active {
  background: rgba(37, 99, 235, 0.08) !important;
  color: #1e293b !important;
  border-left-color: #2563eb !important;
}


/* ========================
   B2. Bug Reporter Widget (injected by bug-reporter.js)
   ======================== */

[data-theme="light"] .bug-report-toggle {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .bug-report-toggle:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .bug-report-panel {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: none !important;
}

[data-theme="light"] .bug-report-panel h4 {
  color: #92400e !important;
}

[data-theme="light"] .bug-report-panel textarea {
  background: #f0f4f8 !important;
  border-color: #d1d5db !important;
  color: #1e293b !important;
}

[data-theme="light"] .bug-report-actions button {
  background: #e8edf3 !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
}

[data-theme="light"] .bug-report-actions button.primary {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

[data-theme="light"] .bug-report-status {
  color: #475569 !important;
}

[data-theme="light"] .bug-report-dropzone {
  background: #f0f4f8 !important;
  border-color: #d1d5db !important;
  color: #64748b !important;
}


/* ========================
   B3. Admin Notification Styles (injected by admin-shell.js)
   ======================== */

[data-theme="light"] .admin-notification-container {
  top: 60px;
}

[data-theme="light"] .admin-notification {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: none !important;
}

[data-theme="light"] .admin-notification--error {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #991b1b !important;
}

[data-theme="light"] .admin-notification--warning {
  background: #fffbeb !important;
  border-color: #fde68a !important;
  color: #92400e !important;
}

[data-theme="light"] .admin-notification--success {
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
  color: #166534 !important;
}

[data-theme="light"] .admin-notification--info {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1e40af !important;
}


/* ========================
   35. Class-based Overrides for Shared Components (from Phase 1)
   ======================== */

/* Data table / reports-table */
[data-theme="light"] .data-table,
[data-theme="light"] .reports-table {
  background: #ffffff;
  border-color: #cbd5e1;
}

[data-theme="light"] .data-table thead,
[data-theme="light"] .reports-table thead {
  background: #f0f4f8;
}

[data-theme="light"] .data-table th,
[data-theme="light"] .reports-table th {
  color: #64748b;
  border-bottom-color: #cbd5e1;
}

[data-theme="light"] .data-table td,
[data-theme="light"] .reports-table td {
  color: #1e293b;
  border-bottom-color: #e2e8f0;
}

[data-theme="light"] .data-table tbody tr:hover,
[data-theme="light"] .reports-table tbody tr:hover {
  background: #e8edf3;
}

[data-theme="light"] .data-table tbody tr.table-row-even,
[data-theme="light"] .reports-table tbody tr.table-row-even {
  background: #ffffff;
}

[data-theme="light"] .data-table tbody tr.table-row-odd,
[data-theme="light"] .reports-table tbody tr.table-row-odd {
  background: #f0f4f8;
}

[data-theme="light"] .reports-table tbody tr.group-header-row {
  background: rgba(37, 99, 235, 0.06);
  border-top-color: rgba(37, 99, 235, 0.2);
}

[data-theme="light"] .reports-table tbody tr.group-header-row td {
  color: #2563eb;
}

/* Form inputs */
[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea,
[data-theme="light"] .form-control {
  background: #ffffff;
  border-color: #d1d5db;
  color: #1e293b;
}

[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-select:focus,
[data-theme="light"] .form-textarea:focus,
[data-theme="light"] .form-control:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

[data-theme="light"] .form-label {
  color: #374151;
}

[data-theme="light"] .form-group label {
  color: #374151;
}

[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select,
[data-theme="light"] .form-group textarea {
  background: #ffffff;
  border-color: #d1d5db;
  color: #1e293b;
}

/* Button extensions */
[data-theme="light"] .btn-icon {
  color: #475569;
}

[data-theme="light"] .btn-edit {
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.2);
}

[data-theme="light"] .btn-edit:hover {
  background: rgba(37, 99, 235, 0.15);
}

[data-theme="light"] .btn-delete {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.2);
}

[data-theme="light"] .btn-delete:hover {
  background: rgba(220, 38, 38, 0.15);
}

/* Role badges */
[data-theme="light"] .role-badge {
  color: #475569;
}

[data-theme="light"] .role-admin {
  background: rgba(124, 58, 237, 0.08);
  color: #7c3aed;
  border-color: rgba(124, 58, 237, 0.2);
}

[data-theme="light"] .role-reporter {
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.2);
}

[data-theme="light"] .role-badge.system {
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.2);
}

[data-theme="light"] .role-badge.custom {
  background: rgba(22, 163, 74, 0.08);
  color: #16a34a;
  border-color: rgba(22, 163, 74, 0.2);
}

/* Message */
[data-theme="light"] .message-info {
  background: rgba(37, 99, 235, 0.06);
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.2);
}

/* Empty state */
[data-theme="light"] .empty-state {
  color: #64748b;
}

[data-theme="light"] .empty-state-icon {
  opacity: 0.4;
}

/* Ensure expanded stats cards are visible */
[data-theme="light"] .stats-card {
  background: rgba(37, 99, 235, 0.04) !important;
  border-color: rgba(37, 99, 235, 0.2) !important;
}

[data-theme="light"] .stats-card-body {
  background: #ffffff !important;
}

/* Date range picker specific */
[data-theme="light"] .date-range-picker-popup {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}