/* ========================================
   Dark Mode — overrides via [data-theme="dark"]
   ======================================== */

[data-theme="dark"] {
  --clr-background: #1a1d23;
  --clr-background-modal: #242830;
  --clr-primary: #15171c;
  --clr-secondary: #2d3139;
  --clr-gray: #2a2d35;
  --clr-soft-gray: rgba(42, 45, 53, 0.75);
  --clr-text: #e4e6eb;
  --clr-text-alt: #f0f2f5;
  --clr-text-dark: #c4c7cc;
  --clr-text-gray: #8a8f9a;
  --clr-text-offwhite: #b0b5bf;
  --clr-related-text: #9ca0a8;
  --clr-nav-text: #e4e6eb;
  --clr-accent: #4a7fdb;
  --clr-cta-text: #e4e6eb;
  --clr-input-outline: rgba(74, 127, 219, 0.4);
  --clr-approved-bg: #1a3a2e;
  --clr-pending-bg: #3a3220;
  --clr-danger-bg: #3a1a1e;
  --bg: #242830;
  --fg: #e4e6eb;
  --link: #6a9ff5;
  --muted: #8a8f9a;
  --panel: #242830;
  --panel-2: #2d3139;
  --border: #33373f;
  --border-color: #33373f;
  --bs-border-color: #33373f;
  --bs-body-color: #e4e6eb;
  --bs-body-bg: #1a1d23;
  --bs-light: #242830;
  --bs-dark: #e4e6eb;
}

/* ---- html / body ---- */
[data-theme="dark"] body {
  color: var(--clr-text);
}

/* ---- sidebar ---- */
[data-theme="dark"] .dashboard_sidebar .sidebar_content {
  background-color: #15171c;
}

[data-theme="dark"] .dashboard_sidebar .sidebar_content .sidebar_menu .menu_item.active {
  background: linear-gradient(90deg, rgba(74, 127, 219, 0.15), rgba(74, 127, 219, 0.08) 50%, transparent);
}

/* ---- main content ---- */
[data-theme="dark"] .dashboard_main {
  background: #1a1d23;
}

[data-theme="dark"] .dashboard_nav {
  background-color: #242830;
  color: var(--clr-text);
  box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.3);
}

/* ---- cards / boxes ---- */
[data-theme="dark"] .dashboard_table {
  background-color: #242830;
  border-color: var(--border);
}

[data-theme="dark"] .dashboard_table thead th {
  background-color: #2d3139;
  color: var(--clr-text);
  border-bottom-color: var(--border);
}

[data-theme="dark"] .dashboard_table tbody td {
  border-bottom-color: var(--border);
}

[data-theme="dark"] .dashboard_table tbody tr:nth-child(even) td {
  background-color: rgba(255, 255, 255, 0.02);
}

/* ---- dialog / modal ---- */
[data-theme="dark"] dialog.dialog_container,
[data-theme="dark"] .dialog_container {
  background-color: #242830;
  color: var(--clr-text);
}

[data-theme="dark"] dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

/* ---- forms / inputs ---- */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: #2d3139;
  border-color: var(--border);
  color: var(--clr-text);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--clr-accent);
}

[data-theme="dark"] input::placeholder {
  color: #6b7080;
}

/* ---- buttons ---- */
[data-theme="dark"] .custom_cta {
  background-color: var(--clr-accent);
  color: #fff;
}

[data-theme="dark"] .custom_cta.btn-secondary {
  background-color: #2d3139;
  color: var(--clr-text);
  border: 1px solid var(--border);
}

[data-theme="dark"] .custom_cta.btn-secondary:hover {
  background-color: #3a3f49;
}

/* ---- labels / headings ---- */
[data-theme="dark"] label,
[data-theme="dark"] .label {
  color: var(--clr-related-text);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] .header_title {
  color: var(--clr-text);
}

/* ---- tables general ---- */
[data-theme="dark"] table {
  color: var(--clr-text);
}

[data-theme="dark"] .table_actions .custom_cta {
  background: #2d3139;
  color: var(--clr-text);
  border: 1px solid var(--border);
}

/* ---- status badges / pills ---- */
[data-theme="dark"] .badge_preview {
  background: #3a3220;
  color: #fcb92c;
}

[data-theme="dark"] .badge_approved {
  background: #1a3a2e;
  color: #1cbb8c;
}

[data-theme="dark"] .badge_paid {
  background: #1a3a2e;
  color: #1cbb8c;
}

[data-theme="dark"] .badge_none {
  background: #2d3139;
  color: #8a8f9a;
}

/* ---- payroll ---- */
[data-theme="dark"] .rate_input {
  background: #2d3139;
  color: var(--clr-text);
  border-color: var(--border);
}

[data-theme="dark"] .run_detail_card {
  background: #242830;
  border-color: var(--border);
  color: var(--clr-text);
}

[data-theme="dark"] .row_highlight_green {
  background: rgba(28, 187, 140, 0.08) !important;
}

/* ---- text utilities ---- */
[data-theme="dark"] .text_muted {
  color: var(--muted) !important;
}

[data-theme="dark"] .text-dark {
  color: var(--clr-text) !important;
}

/* ---- dropdowns ---- */
[data-theme="dark"] .dropdown_menu {
  background: #242830;
  border-color: var(--border);
}

[data-theme="dark"] .dropdown_item {
  color: var(--clr-text);
}

[data-theme="dark"] .dropdown_item:hover {
  background: #2d3139;
}

/* ---- account_toggle ---- */
[data-theme="dark"] .account_toggle {
  color: var(--clr-text);
}

/* ---- spinner ---- */
[data-theme="dark"] .spinner svg circle {
  stroke: var(--clr-text-gray);
}

/* ---- details grid ---- */
[data-theme="dark"] .details_grid.details_block {
  background: #2d3139;
  border-color: var(--border);
}

/* ---- login page ---- */
[data-theme="dark"] .login_container {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* ---- sections ---- */
[data-theme="dark"] .section_title h5 {
  color: var(--clr-text);
}

/* ---- close buttons ---- */
[data-theme="dark"] .close_btn {
  color: var(--clr-text-gray);
}

[data-theme="dark"] .close_btn:hover {
  color: var(--clr-text);
}

/* ---- summary cards ---- */
[data-theme="dark"] .dashboard_actions .text_content p {
  color: var(--clr-related-text);
}

/* ---- responsive ---- */
@media (max-width: 48rem) {
  [data-theme="dark"] .dashboard_sidebar .sidebar_content .sidebar_header .sidebar_close {
    color: var(--clr-text-alt);
  }
}