/* ================================================================
   Scarab Warsha — Dark Theme Variables
   (Modern Teal/Workshop Design - Dark Mode)
   ================================================================ */
[data-theme="dark"] {
  --sidebar-width: 280px;
  --topbar-height: 76px;
  --card-radius: 20px;
  --card-radius-lg: 24px;
  --input-radius: 12px;
  --btn-radius: 12px;

  /* Brighter teal for dark mode contrast */
  --primary: #14b8a6;
  --primary-light: #2dd4bf;
  --primary-dark: #0d9488;
  --primary-hover: #2dd4bf;
  --primary-ghost: rgba(20, 184, 166, 0.15);
  --primary-glow: rgba(20, 184, 166, 0.35);

  --success: #34d399; --success-ghost: rgba(52, 211, 153, 0.15);
  --danger:  #f87171; --danger-ghost:  rgba(248, 113, 113, 0.15);
  --warning: #fbbf24; --warning-ghost: rgba(251, 191, 36, 0.15);
  --info:    #38bdf8; --info-ghost:    rgba(56, 189, 248, 0.15);
  --purple:  #a78bfa; --purple-ghost:  rgba(167, 139, 250, 0.15);

  /* Deep slate/navy dark mode */
  --body-bg: #0f172a;
  --surface-1: #1e293b;
  --surface-2: #334155;
  --surface-3: #475569;

  /* Subtle background pattern */
  --body-pattern: radial-gradient(rgba(255,255,255,0.06) 1.5px, transparent 1.5px);

  --sidebar-bg:        #0b1120;
  --sidebar-hover:     rgba(255,255,255,.04);
  --sidebar-active-bg: rgba(20, 184, 166, 0.15);
  --sidebar-text:      #94a3b8;
  --sidebar-text-active: #2dd4bf;
  --sidebar-text-hover: #f1f5f9;
  --sidebar-section:   #475569;
  --sidebar-border:    rgba(255,255,255,.05);
  --sidebar-brand-text: #ffffff;
  --sidebar-user-text:  #e2e8f0;

  --topbar-bg: rgba(15, 23, 42, 0.85); /* Glassmorphism supported */
  --topbar-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.4);

  --text-primary:   #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted:     #64748b;

  --border-color: #334155;
  --border-strong: #475569;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.3);
  --shadow-lg: 0 10px 30px -5px rgba(0,0,0,.6);
  --shadow-xl: 0 25px 50px -12px rgba(0,0,0,.7);

  --card-bg: var(--surface-1);
  --card-shadow: 0 4px 20px -2px rgba(0,0,0,.25);
  --card-shadow-hover: 0 10px 30px -5px rgba(0,0,0,.35);

  --input-bg: var(--surface-2);
  --input-group-bg: var(--surface-1);
  --modal-bg: var(--surface-1);

  --table-head-bg: #1e293b;
  --table-stripe-bg: rgba(255,255,255,.015);
  --table-hover-bg: rgba(20, 184, 166, 0.12);
  --table-border-color: var(--border-color);

  --transition-fast: background-color .15s ease, color .15s ease;

  --alert-success-bg: rgba(52,211,153,.15); --alert-success-text: #6ee7b7;
  --alert-danger-bg:  rgba(248,113,113,.15); --alert-danger-text:  #fca5a5;
  --alert-warning-bg: rgba(251,191,36,.15); --alert-warning-text: #fcd34d;
  --alert-info-bg:    rgba(56,189,248,.15);  --alert-info-text:    #7dd3fc;

  /* Override Bootstrap's --bs-body-color so table cells inherit correct text color */
  --bs-body-color: #f8fafc;
  --bs-body-bg: #0f172a;
}

/* ----------------------------------------------------------------
   Dark mode — Bootstrap table overrides
   Bootstrap uses color: var(--bs-table-color, var(--bs-body-color))
   on all table cells. Contextual classes (table-success, table-light,
   etc.) set --bs-table-color: #000 which becomes invisible on dark bg.
   ---------------------------------------------------------------- */
[data-theme="dark"] .table > :not(caption) > * > * {
  color: var(--text-primary);
}

[data-theme="dark"] tr.table-success > *,
[data-theme="dark"] tr.table-warning > *,
[data-theme="dark"] tr.table-danger  > *,
[data-theme="dark"] tr.table-info    > *,
[data-theme="dark"] tr.table-light   > *,
[data-theme="dark"] tfoot.table-light td,
[data-theme="dark"] thead.table-light th,
[data-theme="dark"] thead.table-secondary th {
  color: var(--text-primary) !important;
}

/* Ensure card body text, strong, labels stay readable in dark mode */
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-header {
  color: var(--text-primary);
}

/* Permissions checkboxes — red accent in dark mode */
[data-theme="dark"] .form-check-input:checked {
  background-color: var(--danger);
  border-color: var(--danger);
}
[data-theme="dark"] .form-check-input:checked:focus {
  box-shadow: 0 0 0 0.25rem var(--danger-ghost);
}