﻿:root[data-theme="dark"] {
  --app-primary: #38bdf8;
  --app-secondary: #22d3ee;
  --app-accent: #f97316;
  --app-bg: #0b1224;
  --app-surface: #111c33;
  --app-surface-2: #16243f;
  --app-text: #e2e8f0;
  --app-muted: #94a3b8;
  --app-border: #1f2a44;
  --bs-primary: #38bdf8;
  --bs-primary-rgb: 56, 189, 248;
  --bs-link-color: #38bdf8;
  --bs-link-hover-color: #0ea5e9;
  --bs-body-bg: #0b1224;
  --bs-body-bg-rgb: 11, 18, 36;
  --bs-body-color: #e2e8f0;
  --bs-secondary-color: #94a3b8;
  --bs-tertiary-bg: #111c33;
  --bs-border-color: #1f2a44;
  --bs-card-bg: #111c33;
  --bs-card-color: #e2e8f0;
  --bs-table-bg: #111c33;
  --bs-table-color: #e2e8f0;
  --bs-table-striped-bg: rgba(148, 163, 184, 0.08);
  --bs-table-hover-bg: rgba(148, 163, 184, 0.12);
  --bs-input-bg: #111c33;
  --bs-input-color: #e2e8f0;
  --bs-input-border-color: #1f2a44;
  --bs-heading-color: #f8fafc;
}

/* Explicit table styling for dark mode */
:root[data-theme="dark"] .table {
  background-color: var(--app-surface);
  color: var(--app-text);
}

:root[data-theme="dark"] .table th {
  background-color: var(--app-surface-2);
  color: var(--app-muted);
  border-color: var(--app-border);
}

:root[data-theme="dark"] .table td {
  background-color: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border);
}

:root[data-theme="dark"] .table tbody tr:hover td {
  background-color: var(--app-surface-2);
}

/* GDPR Code in dark mode */
:root[data-theme="dark"] .gdpr-code {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.4);
}

/* Status alert boxes in dark mode */
:root[data-theme="dark"] .alert-warning-box {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.3);
  color: var(--app-text);
}

:root[data-theme="dark"] .alert-success-box {
  background: rgba(22, 163, 74, 0.12);
  border-color: rgba(22, 163, 74, 0.3);
  color: var(--app-text);
}

:root[data-theme="dark"] .alert-success-box strong {
  color: #86efac;
}

/* ID Card in dark mode */
:root[data-theme="dark"] .id-card {
  background-color: var(--app-surface-2);
  border-color: var(--app-border);
}

:root[data-theme="dark"] .id-card-label {
  color: var(--app-muted);
}

:root[data-theme="dark"] .id-card-value {
  background-color: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border);
}

/* Table code in dark mode */
:root[data-theme="dark"] .table-code {
  background-color: var(--app-surface-2);
  color: var(--app-text);
}

/* Add form in dark mode */
:root[data-theme="dark"] .add-form {
  background: var(--app-surface-2);
  color: var(--app-text);
  border-color: var(--app-border);
}

/* Info box in dark mode */
:root[data-theme="dark"] .info-box {
  background: var(--app-surface-2) !important;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
}
