/* ==========================================================================
   WHALE OS — Dark Mode Override v3.0
   ─────────────────────────────────────────────────────────────────────────
   This file patches GAPS that body.dark-theme in style-ultra-upgrade.css
   does NOT cover. It works in tandem with body.dark-theme (not instead of).

   Priority hierarchy for dark mode:
     body.dark-theme (ultra-upgrade) — overrides glass tokens to dark blue
     [data-theme="dark"] (here)      — covers DS components + specific fixes
   ========================================================================== */

/* ══════════════════════════════════════════════════════════
   §0 · BODY BACKGROUND — ensure full dark even without class timing
══════════════════════════════════════════════════════════ */
[data-theme="dark"] body,
body.dark-theme {
  background: #020410 !important;
  background-attachment: initial !important;
  color: #f8fafc !important;
}

/* ══════════════════════════════════════════════════════════
   §1 · TABLE WRAPPERS
   ultra-upgrade applies var(--glass-white) to .em-table-wrap
   body.dark-theme sets --glass-white to rgba(13,20,47,0.65)
   But the OUTER TABLE WRAP still shows as a rounded gray box.
   We force it to a solid dark background.
══════════════════════════════════════════════════════════ */
body.dark-theme .em-table-wrap,
[data-theme="dark"] .em-table-wrap,
body.dark-theme .em-table-wrapper,
[data-theme="dark"] .em-table-wrapper,
body.dark-theme [class*="table-wrap"],
[data-theme="dark"] [class*="table-wrap"] {
  background: #0d1728 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  outline: none !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important;
}

/* Table head */
body.dark-theme .em-table thead th,
[data-theme="dark"] .em-table thead th,
body.dark-theme table thead th,
[data-theme="dark"] table thead th {
  background: rgba(37, 99, 235, 0.1) !important;
  color: #6fb4ff !important;
  border-bottom: 1px solid rgba(37, 99, 235, 0.2) !important;
}

/* Table body */
body.dark-theme .em-table tbody td,
[data-theme="dark"] .em-table tbody td,
body.dark-theme table tbody td,
[data-theme="dark"] table tbody td {
  color: #c8d3e6 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  background: transparent !important;
}
body.dark-theme .em-table tbody tr:hover,
[data-theme="dark"] .em-table tbody tr:hover,
body.dark-theme table tbody tr:hover,
[data-theme="dark"] table tbody tr:hover {
  background: rgba(37, 99, 235, 0.06) !important;
}

/* ══════════════════════════════════════════════════════════
   §2 · HEADING GRADIENT TEXT — kill it in dark mode
   employee.css has gradient text on h1 that bleeds through
══════════════════════════════════════════════════════════ */
body.dark-theme h1,
[data-theme="dark"] h1,
body.dark-theme h2,
[data-theme="dark"] h2,
body.dark-theme h3,
[data-theme="dark"] h3,
body.dark-theme h4,
[data-theme="dark"] h4 {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #f8fafc !important;
  color: #f8fafc !important;
}

/* Specific module headings */
body.dark-theme .em-header-info h1,
[data-theme="dark"] .em-header-info h1,
body.dark-theme [class*="page-title"],
[data-theme="dark"] [class*="page-title"],
body.dark-theme [class*="view-title"],
[data-theme="dark"] [class*="view-title"] {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #f8fafc !important;
  color: #f8fafc !important;
}

/* ══════════════════════════════════════════════════════════
   §3 · PAGINATION
══════════════════════════════════════════════════════════ */
body.dark-theme .em-pagination-bar,
[data-theme="dark"] .em-pagination-bar {
  background: rgba(13, 23, 40, 0.8) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
body.dark-theme .em-pagination-info,
[data-theme="dark"] .em-pagination-info {
  color: #8d9ab1 !important;
}
body.dark-theme .em-page-btn,
[data-theme="dark"] .em-page-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #c8d3e6 !important;
}
body.dark-theme .em-page-btn.active,
[data-theme="dark"] .em-page-btn.active {
  background: #005dff !important;
  border-color: #005dff !important;
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════
   §4 · PAYROLL & ATTENDANCE LAYOUT WRAPPERS
   These module-specific wrappers may not be in ultra-upgrade list
══════════════════════════════════════════════════════════ */
body.dark-theme .payroll-layout,
body.dark-theme .payroll-container,
body.dark-theme .payroll-card,
body.dark-theme [class*="payrun"],
body.dark-theme [class*="attendance-layout"],
body.dark-theme [class*="audit-log"],
body.dark-theme .view-header-flex,
[data-theme="dark"] .payroll-layout,
[data-theme="dark"] .payroll-container,
[data-theme="dark"] .payroll-card,
[data-theme="dark"] [class*="payrun"],
[data-theme="dark"] [class*="attendance-layout"],
[data-theme="dark"] [class*="audit-log"],
[data-theme="dark"] .view-header-flex {
  background: #0d1728 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  outline: none !important;
}

/* ══════════════════════════════════════════════════════════
   §5 · MODAL INNER ELEMENTS
══════════════════════════════════════════════════════════ */
body.dark-theme .modal-container table,
body.dark-theme .modal-content table,
[data-theme="dark"] .modal-container table,
[data-theme="dark"] .modal-content table {
  background: transparent !important;
}
body.dark-theme .modal-container table thead th,
body.dark-theme .modal-content table thead th,
[data-theme="dark"] .modal-container table thead th,
[data-theme="dark"] .modal-content table thead th {
  background: rgba(37, 99, 235, 0.1) !important;
  color: #6fb4ff !important;
}
body.dark-theme .modal-container .em-stat-card,
body.dark-theme .modal-content .em-stat-card,
[data-theme="dark"] .modal-container .em-stat-card,
[data-theme="dark"] .modal-content .em-stat-card {
  background: rgba(13, 23, 40, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ══════════════════════════════════════════════════════════
   §6 · INPUTS — fix glass-white inputs in dark
══════════════════════════════════════════════════════════ */
body.dark-theme input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.dark-theme textarea,
body.dark-theme select {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
  backdrop-filter: none !important;
}
body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder {
  color: #64748b !important;
}

/* ══════════════════════════════════════════════════════════
   §7 · HEADER
══════════════════════════════════════════════════════════ */
body.dark-theme .header-desktop,
[data-theme="dark"] .header-desktop {
  background: rgba(2, 4, 16, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: none !important;
}
body.dark-theme .header-desktop *,
[data-theme="dark"] .header-desktop * {
  color: #f8fafc !important;
}

/* ══════════════════════════════════════════════════════════
   §8 · DS-SPECIFIC COMPONENT TOKENS
   For components rendered by DS files (cards.css, tables.css, etc.)
══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* Override glass vars that ultra-upgrade sets in :root */
  --card-bg:          #0d1728;
  --card-hover-bg:    #111f35;
  --panel-bg:         #0d1728;
  --panel-hover:      #111f35;
  --border-color:     rgba(255, 255, 255, 0.08);
}