/**
 * Cixcent HRMS — locked palette (no green)
 * Primary accent: #d1c8e7
 * White #ffffff · Light gray #f5f5f5
 * Deeper lilac used only for button/text contrast.
 */
:root,
html[data-theme="light"] {
  color-scheme: light;

  --white: #ffffff;
  --lavender: #d1c8e7;
  --accent: #d1c8e7;
  --gray: #f5f5f5;

  --primary-bg: #f5f5f5;
  --surface: #ffffff;
  --surface-2: #f5f5f5;
  --ink: #2c2a33;
  --ink-muted: #6b6875;
  --ink-soft: #9a97a3;
  --line: #e4e0ec;
  --line-soft: #efeaf6;

  /* #d1c8e7 family — never green */
  --brand-green: #8f7eb8;
  --brand-green-dark: #7566a0;
  --brand-green-bright: #d1c8e7;
  --brand-color: #8f7eb8;
  --brand-soft: #d1c8e7;
  --brand-glow: rgba(209, 200, 231, 0.7);

  --nav-active: #8f7eb8;
  --nav-active-soft: #d1c8e7;

  --cixcent-green: #8f7eb8;
  --cool-gray: #f5f5f5;
  --warm-beige: #f5f5f5;

  --sky: #8f7eb8;
  --sky-soft: #d1c8e7;
  --sky-line: #e4e0ec;
  --accent-lavender: #d1c8e7;
  --accent-apricot: #d1c8e7;
  --accent-cyan: #f5f5f5;
  --accent-magenta: #8f7eb8;
  --accent-pink: #d1c8e7;

  --success: #8f7eb8;
  --success-soft: #d1c8e7;
  --warn: #a898c0;
  --warn-soft: #efeaf6;
  --danger: #b07090;
  --danger-soft: #f9eef3;
  --rose: #d1c8e7;

  --sidebar-width: 70px;
  --sidebar-bg: #2c2a33;
  --sidebar-text: #c8c5d0;
  --sidebar-hover: #ffffff;
  --flyout-bg: #3a3744;
  --header-bg: #ffffff;
  --header-text: #2c2a33;
  --header-border: #e4e0ec;

  --banner-from: #d1c8e7;
  --banner-mid: #ddd6ec;
  --banner-to: #f5f5f5;
  --banner-shadow: rgba(44, 42, 51, 0.05);

  --time-from: #d1c8e7;
  --time-to: #c4b8de;
  --time-shadow: rgba(143, 126, 184, 0.18);

  --card-shadow: 0 1px 3px rgba(44, 42, 51, 0.04);
  --card-shadow-lg: 0 8px 20px rgba(44, 42, 51, 0.06);

  --bs-primary: #8f7eb8;
  --bs-primary-rgb: 143, 126, 184;
  --bs-link-color: #8f7eb8;
  --bs-link-hover-color: #7566a0;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --white: #2a2832;
  --lavender: #d1c8e7;
  --accent: #d1c8e7;
  --gray: #24222c;

  --primary-bg: #18161e;
  --surface: #24222c;
  --surface-2: #2e2c36;
  --surface-3: #38353f;
  --ink: #f0eef5;
  --ink-muted: #a8a4b3;
  --ink-soft: #7e7a8a;
  --line: #3c3946;
  --line-soft: #322f3a;

  --brand-green: #d1c8e7;
  --brand-green-dark: #e4dcf5;
  --brand-green-bright: #d1c8e7;
  --brand-color: #d1c8e7;
  --brand-soft: #3a3450;
  --brand-glow: rgba(209, 200, 231, 0.22);

  --nav-active: #d1c8e7;
  --nav-active-soft: #3a3450;

  --cixcent-green: #d1c8e7;
  --cool-gray: #2e2c36;
  --warm-beige: #2e2c36;

  --sky: #d1c8e7;
  --sky-soft: #3a3450;
  --sky-line: #3c3946;
  --accent-lavender: #d1c8e7;
  --accent-apricot: #d1c8e7;
  --accent-cyan: #2e2c36;
  --accent-magenta: #d1c8e7;
  --accent-pink: #d1c8e7;

  --success: #c9bfde;
  --success-soft: #3a3450;
  --warn: #d4c4a0;
  --warn-soft: #3a3428;
  --danger: #d48896;
  --danger-soft: #3a282c;
  --rose: #d1c8e7;

  --sidebar-bg: #121018;
  --sidebar-text: #a8a4b3;
  --sidebar-hover: #f0eef5;
  --flyout-bg: #24222c;
  --header-bg: #1f1d26;
  --header-text: #f0eef5;
  --header-border: #3c3946;

  --banner-from: #3a3450;
  --banner-mid: #443e5c;
  --banner-to: #24222c;
  --banner-shadow: rgba(0, 0, 0, 0.4);

  --time-from: #3a3450;
  --time-to: #443e5c;
  --time-shadow: rgba(0, 0, 0, 0.35);

  --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.28);
  --card-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);

  --bs-primary: #d1c8e7;
  --bs-primary-rgb: 209, 200, 231;
  --bs-link-color: #d1c8e7;
  --bs-link-hover-color: #e4dcf5;
  --bs-body-bg: #18161e;
  --bs-body-color: #f0eef5;
  --bs-border-color: #3c3946;
  --bs-secondary-bg: #2e2c36;
  --bs-tertiary-bg: #24222c;
}

html {
  transition: background-color 0.2s ease, color 0.2s ease;
}

body {
  background-color: var(--primary-bg) !important;
  color: var(--ink);
}

.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface-2);
  color: var(--ink-muted);
  cursor: pointer;
  padding: 0;
}
.theme-toggle-btn:hover {
  color: var(--brand-green);
  border-color: var(--lavender);
  background: var(--lavender);
}
.theme-toggle-btn .theme-icon-dark,
.theme-toggle-btn .theme-icon-light {
  display: none;
  font-size: 1.1rem;
}
html[data-theme="light"] .theme-toggle-btn .theme-icon-dark { display: inline; }
html[data-theme="dark"] .theme-toggle-btn .theme-icon-light { display: inline; }

.top-navbar {
  background: var(--header-bg) !important;
  color: var(--header-text);
  border-bottom: 1px solid var(--header-border);
}
.top-navbar .search-bar {
  background: var(--gray) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.top-navbar .search-bar::placeholder { color: var(--ink-soft); }
.top-navbar .company-name { color: var(--ink-muted) !important; }
.content-area { background: var(--primary-bg); }

.card,
.home-card,
.leave-balances-card,
.home-tab-panel {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}

.dropdown-menu {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink);
}
.dropdown-item { color: var(--ink) !important; }
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--lavender) !important;
  color: var(--ink) !important;
}
.dropdown-header { color: var(--ink-muted) !important; }

.form-control,
.form-select,
textarea.form-control {
  background-color: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--brand-green) !important;
  box-shadow: 0 0 0 0.2rem var(--brand-glow) !important;
}

.modal-content {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink);
  --bs-table-border-color: var(--line);
}

.inbox-popup { background: var(--surface) !important; }
.inbox-popup .inbox-pop-item { color: var(--ink); }
.inbox-popup .count-pill {
  background: var(--lavender);
  color: var(--ink);
}

.text-success,
.text-primary { color: var(--brand-green) !important; }
.bg-success,
.bg-primary { background-color: var(--brand-green) !important; }
.border-primary { border-color: var(--brand-green) !important; }

html[data-theme="dark"] .btn-light {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary {
  color: var(--ink-muted) !important;
}

.sidebar-item:hover .nav-link,
.sidebar-item .nav-link.active {
  background-color: rgba(209, 200, 231, 0.16) !important;
}
.sidebar-item .nav-link.active i {
  color: #d1c8e7 !important;
}
.flyout-menu .flyout-item:hover {
  background-color: rgba(209, 200, 231, 0.18) !important;
}

.btn-primary {
  background-color: var(--brand-green) !important;
  border-color: var(--brand-green) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background-color: var(--brand-green-dark) !important;
  border-color: var(--brand-green-dark) !important;
}
html[data-theme="dark"] .btn-primary {
  color: #2c2a33 !important;
}

/* Soft accent buttons / fills use #d1c8e7 */
.ta-btn-approve,
.btn[style*="39B54A"],
.btn[style*="39b54a"],
.btn[style*="d1c8e7"] {
  background: #d1c8e7 !important;
  border-color: #d1c8e7 !important;
  color: #2c2a33 !important;
}
.ta-btn-approve:hover,
.btn[style*="d1c8e7"]:hover {
  background: #c4b8de !important;
  border-color: #c4b8de !important;
  color: #2c2a33 !important;
}

/* Force readable dark text on soft accent fills */
[style*="background:#d1c8e7"],
[style*="background: #d1c8e7"],
[style*="background:#efeaf6"],
[style*="background: #efeaf6"] {
  color: #2c2a33 !important;
}

/* Active nav — lilac, never green */
.sub-nav-item.active,
.org-sub-nav-item.active,
.secondary-nav-item.active,
.settings-secondary-item.active,
.home-top-tab.active,
.ta-mod-item.active,
.ta-sub-item.active,
.py-mod-item.active,
.py-sub-item.active,
.composer-tab.active,
.celebrate-tab.active,
.scope-tab.active,
.perf-module-item.active,
.hiring-inner-tab.active,
.exp-module-item.active,
.log-tabs a.active,
.exp-tabs a.active,
.ibx-tabs a.active,
.login-subtab.active,
.cs-subtab.active,
.pc-subtab.active,
.pr-subtab.active,
.ppol-tab.active,
.dept-tab.active,
.le-tab.active,
.rbac-panel-tab.active,
.pol-tab.active,
.sp-tabs button.active,
.emp-month-tabs a.active {
  color: var(--nav-active) !important;
  border-bottom-color: var(--nav-active) !important;
}
.home-top-tab.active::after {
  background: var(--nav-active) !important;
}
.scope-tab.active {
  background: var(--nav-active) !important;
  border-color: var(--nav-active) !important;
  color: #fff !important;
}
.ta-metric-tabs a.active,
.ta-toggle-links a.active,
.py-metric-tabs a.active,
.ta-sync-tool.active,
.py-compare-dim.active,
.py-entity-card.active,
.ta-side-list a.active,
.ta-rep-cats a.active,
.py-rep-cats a.active {
  color: var(--nav-active) !important;
  border-color: var(--nav-active) !important;
  background: var(--nav-active-soft) !important;
}

/* Kill leftover green utility classes */
.person-avatar.bg-success,
.ed-avatar {
  background: #8f7eb8 !important;
}
a.ta-emp-name,
.ta-link,
.py-link {
  color: #8f7eb8 !important;
}

/* ── Dark theme polish: cohesive surfaces, no harsh white cards ── */
html[data-theme="dark"] .content-area,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .page-content {
  background: var(--primary-bg) !important;
  color: var(--ink);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .home-card,
html[data-theme="dark"] .leave-balances-card,
html[data-theme="dark"] .home-tab-panel,
html[data-theme="dark"] .me-card,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-body,
html[data-theme="dark"] .bg-body-tertiary,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .toast {
  background-color: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  box-shadow: var(--card-shadow);
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .accordion-button {
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .table,
html[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: transparent !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink);
  --bs-table-border-color: var(--line);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-hover-bg: rgba(209, 200, 231, 0.08);
}

html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table > thead {
  background: var(--surface-2) !important;
  color: var(--ink-muted) !important;
  border-bottom-color: var(--line) !important;
  font-weight: 600;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea.form-control,
html[data-theme="dark"] .input-group-text {
  background-color: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .form-control::placeholder {
  color: var(--ink-soft) !important;
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-select:disabled {
  background-color: var(--surface-3, #38353f) !important;
  color: var(--ink-soft) !important;
}

html[data-theme="dark"] .top-navbar .search-bar {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .alert,
html[data-theme="dark"] .alert-light,
html[data-theme="dark"] .alert-secondary {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--ink-muted) !important;
}
html[data-theme="dark"] .alert-warning {
  background: var(--warn-soft) !important;
  border-color: rgba(212, 196, 160, 0.35) !important;
  color: var(--warn) !important;
}
html[data-theme="dark"] .alert-info {
  background: var(--brand-soft) !important;
  border-color: rgba(209, 200, 231, 0.35) !important;
  color: var(--lavender) !important;
}
html[data-theme="dark"] .alert-danger {
  background: var(--danger-soft) !important;
  border-color: rgba(212, 136, 150, 0.35) !important;
  color: var(--danger) !important;
}
html[data-theme="dark"] .alert-success {
  background: var(--success-soft) !important;
  border-color: rgba(209, 200, 231, 0.35) !important;
  color: var(--lavender) !important;
}

html[data-theme="dark"] .badge.bg-warning,
html[data-theme="dark"] .badge.bg-warning.text-dark {
  background: var(--warn-soft) !important;
  color: var(--warn) !important;
  border: 1px solid rgba(212, 196, 160, 0.35);
}
html[data-theme="dark"] .badge.bg-light,
html[data-theme="dark"] .badge.bg-secondary-subtle {
  background: var(--surface-2) !important;
  color: var(--ink-muted) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .btn-outline-secondary {
  color: var(--ink-muted) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .btn-outline-secondary:hover {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  border-color: var(--lavender) !important;
}
html[data-theme="dark"] .btn-outline-danger {
  color: var(--danger) !important;
  border-color: rgba(212, 136, 150, 0.45) !important;
}
html[data-theme="dark"] .btn-outline-danger:hover {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
}
html[data-theme="dark"] .btn-outline-primary {
  color: var(--lavender) !important;
  border-color: rgba(209, 200, 231, 0.45) !important;
}
html[data-theme="dark"] .btn-outline-primary:hover {
  background: var(--brand-soft) !important;
  color: var(--lavender) !important;
}

html[data-theme="dark"] code,
html[data-theme="dark"] pre {
  background: var(--surface-2) !important;
  color: var(--lavender) !important;
  border-color: var(--line);
}
html[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.flyout-item) {
  color: var(--lavender);
}
html[data-theme="dark"] hr {
  border-color: var(--line) !important;
  opacity: 1;
}
html[data-theme="dark"] .text-dark {
  color: var(--ink) !important;
}
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end {
  border-color: var(--line) !important;
}

html[data-theme="dark"] .theme-toggle-btn:hover {
  background: var(--brand-soft);
  color: var(--lavender);
  border-color: rgba(209, 200, 231, 0.4);
}

html[data-theme="dark"] .scope-tab.active {
  color: #1e1c24 !important;
}

html[data-theme="dark"] a.ta-emp-name,
html[data-theme="dark"] .ta-link,
html[data-theme="dark"] .py-link {
  color: var(--lavender) !important;
}
html[data-theme="dark"] .person-avatar.bg-success,
html[data-theme="dark"] .ed-avatar {
  background: #8f7eb8 !important;
}

/* Soften inline light fills left over from light-theme pages */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:#f9fafb"],
html[data-theme="dark"] [style*="background: #f9fafb"],
html[data-theme="dark"] [style*="background:#fafafa"],
html[data-theme="dark"] [style*="background: #fafafa"],
html[data-theme="dark"] [style*="background:#f5f5f5"],
html[data-theme="dark"] [style*="background: #f5f5f5"],
html[data-theme="dark"] [style*="background:#f3f4f6"],
html[data-theme="dark"] [style*="background: #f3f4f6"] {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] [style*="color:#111827"],
html[data-theme="dark"] [style*="color: #111827"],
html[data-theme="dark"] [style*="color:#1f2937"],
html[data-theme="dark"] [style*="color: #1f2937"] {
  color: var(--ink) !important;
}

/* Org tab bar: swipeable single-line strip on phones; desktop unchanged */
@media (max-width: 767.98px) {
  .content-area .sub-nav.org-primary-nav,
  .content-area .secondary-nav,
  .content-area .settings-secondary-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 1.15rem !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-left: 1.15rem;
    /* Match mobile .content-area padding (0.85rem) so labels aren't flush to the edge */
    padding: 0.35rem 1.15rem 0.5rem !important;
    margin-left: -0.85rem !important;
    margin-right: -0.85rem !important;
    margin-bottom: 0.85rem;
    scrollbar-width: thin;
    scrollbar-color: var(--brand-soft) transparent;
  }
  .content-area .sub-nav.org-primary-nav {
    margin-bottom: 0;
    padding-top: 0.2rem !important;
  }
  .content-area .sub-nav.org-primary-nav::-webkit-scrollbar,
  .content-area .secondary-nav::-webkit-scrollbar,
  .content-area .settings-secondary-nav::-webkit-scrollbar {
    height: 3px;
  }
  .content-area .sub-nav.org-primary-nav::-webkit-scrollbar-track,
  .content-area .secondary-nav::-webkit-scrollbar-track {
    background: transparent;
  }
  .content-area .sub-nav.org-primary-nav::-webkit-scrollbar-thumb,
  .content-area .secondary-nav::-webkit-scrollbar-thumb {
    background: var(--brand-soft);
    border-radius: 999px;
  }
  .content-area .sub-nav.org-primary-nav .sub-nav-item,
  .content-area .secondary-nav .secondary-nav-item,
  .content-area .settings-secondary-nav .secondary-nav-item {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
    padding: 0.75rem 0.15rem !important;
    font-size: 0.7rem;
    letter-spacing: 0.4px;
  }
  .content-area .secondary-nav .secondary-nav-item,
  .content-area .settings-secondary-nav .secondary-nav-item {
    font-size: 0.82rem;
    padding: 0.7rem 0.15rem !important;
  }

  /* Org analytics dept charts: 2-across swipe row on mobile only */
  .content-area .an-dept-charts-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.75rem;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
  }
  .content-area .an-dept-charts-row > .an-dept-chart-card {
    flex: 0 0 88% !important;
    max-width: 88% !important;
    min-width: 88% !important;
    margin-bottom: 0 !important;
    scroll-snap-align: start;
  }
  .content-area .an-dim-toggle {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.4rem !important;
    width: 100% !important;
    background: transparent !important;
  }
  .content-area .an-insights {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(7.5rem, 1fr)) !important;
    gap: 0.75rem !important;
  }

  /* Org analytics filters: equal 2-col grid on mobile */
  .content-area .an-filters {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
    padding: 0.75rem !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .content-area .an-filters select,
  .content-area .an-filters input[type="date"],
  .content-area .an-filters .an-filter-disabled,
  .content-area .an-filters .btn-clear {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .content-area .an-filters .btn-clear {
    grid-column: 1 / -1;
  }

  .content-area .an-pie-grid.row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-left: 0 !important;
    margin-right: 0 !important;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
  }
  .content-area .an-pie-grid.row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ── App-wide theme cohesion (desktop + mobile) ── */
.sub-nav,
.home-top-tabs,
.emp-month-bar,
.ta-section-head,
.exp-tabs,
.ibx-tabs {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}

.rounded-3.shadow-sm,
.rounded-4.shadow-sm,
.shadow-sm.border,
.daily-attendance-panel,
.leave-balance-tile,
.stat-card,
.kpi-card,
.ta-card,
.ta-panel,
.exp-card,
.home-banner,
.me-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

.table-light,
.table thead.table-light,
thead.table-light th {
  background: var(--surface-2) !important;
  color: var(--ink-muted) !important;
  border-color: var(--line) !important;
}

.text-dark { color: var(--ink) !important; }
.text-muted { color: var(--ink-muted) !important; }
.border-light { border-color: var(--line) !important; }

html[data-theme="dark"] .sub-nav,
html[data-theme="dark"] .log-tabs,
html[data-theme="dark"] .home-top-tabs,
html[data-theme="dark"] .emp-month-bar,
html[data-theme="dark"] .emp-month-tabs,
html[data-theme="dark"] .ta-section-head,
html[data-theme="dark"] .exp-tabs,
html[data-theme="dark"] .ibx-tabs,
html[data-theme="dark"] .req-section,
html[data-theme="dark"] .req-section-head,
html[data-theme="dark"] .req-item,
html[data-theme="dark"] .cal-grid,
html[data-theme="dark"] .cal-cell,
html[data-theme="dark"] .cal-head,
html[data-theme="dark"] .week-dot,
html[data-theme="dark"] .bal-pill,
html[data-theme="dark"] .att-log-toggle,
html[data-theme="dark"] .leave-balance-tile,
html[data-theme="dark"] .daily-attendance-panel,
html[data-theme="dark"] .attendance-table,
html[data-theme="dark"] .bg-white.rounded-3,
html[data-theme="dark"] .bg-white.rounded-4,
html[data-theme="dark"] .bg-white.shadow-sm {
  background-color: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .cal-head,
html[data-theme="dark"] .req-section,
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .stat-row:hover {
  background-color: var(--surface-2) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .fw-bold,
html[data-theme="dark"] .fw-semibold,
html[data-theme="dark"] .me-card-title,
html[data-theme="dark"] .me-live-clock,
html[data-theme="dark"] #currentTime,
html[data-theme="dark"] .cal-month,
html[data-theme="dark"] .req-date,
html[data-theme="dark"] .stat-vals span {
  color: var(--ink) !important;
}

html[data-theme="dark"] .sub-nav-item,
html[data-theme="dark"] .log-tabs a,
html[data-theme="dark"] .home-top-tab,
html[data-theme="dark"] .emp-month-tabs a {
  color: var(--ink-muted) !important;
}
html[data-theme="dark"] .sub-nav-item.active,
html[data-theme="dark"] .log-tabs a.active,
html[data-theme="dark"] .home-top-tab.active,
html[data-theme="dark"] .emp-month-tabs a.active {
  color: var(--nav-active) !important;
  border-bottom-color: var(--nav-active) !important;
}

html[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%);
  opacity: 0.7;
}
/* Keep dismiss X visible on light success banners (even in dark theme) */
html[data-theme="dark"] .alert-success .btn-close,
.alert-success .btn-close {
  filter: none;
  opacity: 0.75;
  background-color: transparent;
}

html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .dropdown-menu {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--ink-muted) !important;
  border-color: transparent !important;
}
html[data-theme="dark"] .nav-tabs .nav-link.active {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) var(--line) var(--surface) !important;
}

html[data-theme="dark"] .pagination .page-link {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .pagination .page-item.active .page-link {
  background: var(--brand-soft) !important;
  border-color: var(--lavender) !important;
  color: var(--lavender) !important;
}

html[data-theme="dark"] .progress {
  background: var(--surface-2) !important;
}
html[data-theme="dark"] .list-group-item {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* Directory / org cards and shared page chrome */
.ed-card,
.ed-stub,
.ed-filters,
.secondary-nav,
.settings-secondary-nav,
.org-card,
.person-card,
.team-card,
.asset-card,
.exp-claim-card,
.exit-card,
.helpdesk-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

.ed-name,
.ed-meta-row dd,
.ed-title,
.ed-emp-id {
  color: var(--ink) !important;
}
.ed-title-text,
.ed-meta-row dt,
.ed-count,
.secondary-nav-item {
  color: var(--ink-muted) !important;
}
.ed-emp-id {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
}
.ed-email {
  color: var(--brand-green) !important;
}
.secondary-nav-item.active {
  color: var(--nav-active) !important;
  border-bottom-color: var(--nav-active) !important;
}

html[data-theme="dark"] .ed-card,
html[data-theme="dark"] .ed-stub,
html[data-theme="dark"] .ed-filters,
html[data-theme="dark"] .secondary-nav,
html[data-theme="dark"] .ed-card-top {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .ed-filters {
  background: var(--surface-2) !important;
}
html[data-theme="dark"] .ed-card-menu,
html[data-theme="dark"] .ed-card .text-muted,
html[data-theme="dark"] .ed-card .btn-link {
  color: var(--ink-muted) !important;
}

/* Login registrations + shared employee login chrome */
.login-subtabs,
.el-filters,
.el-table-wrap {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.el-title { color: var(--ink) !important; }
.el-subtitle,
.el-total,
.login-subtab { color: var(--ink-muted) !important; }
.login-subtab.active {
  color: var(--nav-active) !important;
  border-bottom-color: var(--nav-active) !important;
}
.el-table thead th {
  background: var(--surface-2) !important;
  color: var(--ink-muted) !important;
  border-color: var(--line) !important;
}
.el-table tbody td {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
.el-table tbody tr:hover td {
  background: var(--surface-2) !important;
}

/*
 * App-wide dark override for leftover light page CSS (#fff panels / tables).
 * Targets content area so shell stays consistent without editing every template.
 */
html[data-theme="dark"] .content-area [class*="-filters"],
html[data-theme="dark"] .content-area [class*="-filter-bar"],
html[data-theme="dark"] .content-area [class*="-toolbar"],
html[data-theme="dark"] .content-area [class*="-table-wrap"],
html[data-theme="dark"] .content-area [class*="-panel"],
html[data-theme="dark"] .content-area [class*="-box"],
html[data-theme="dark"] .content-area [class*="-stub"],
html[data-theme="dark"] .content-area [class*="-empty"],
html[data-theme="dark"] .content-area [class$="-card"],
html[data-theme="dark"] .content-area [class*="-card "],
html[data-theme="dark"] .login-subtabs,
html[data-theme="dark"] .secondary-nav,
html[data-theme="dark"] .settings-secondary-nav {
  background-color: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .content-area [class$="-title"],
html[data-theme="dark"] .content-area [class*="-title "] {
  color: var(--ink) !important;
}
html[data-theme="dark"] .content-area [class$="-subtitle"],
html[data-theme="dark"] .content-area [class$="-muted"],
html[data-theme="dark"] .content-area [class$="-total"],
html[data-theme="dark"] .content-area [class$="-count"],
html[data-theme="dark"] .content-area [class$="-hint"],
html[data-theme="dark"] .content-area [class$="-meta"] {
  color: var(--ink-muted) !important;
}

html[data-theme="dark"] .content-area table {
  color: var(--ink) !important;
  border-color: var(--line) !important;
  --bs-table-bg: var(--surface);
  --bs-table-color: var(--ink);
  --bs-table-border-color: var(--line);
  --bs-table-striped-bg: var(--surface-2);
  --bs-table-hover-bg: rgba(209, 200, 231, 0.08);
}
html[data-theme="dark"] .content-area table thead th,
html[data-theme="dark"] .content-area table thead td {
  background: var(--surface-2) !important;
  color: var(--ink-muted) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .content-area table tbody td,
html[data-theme="dark"] .content-area table tbody th {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .content-area table.table-striped > tbody > tr:nth-of-type(odd) > * ,
html[data-theme="dark"] .content-area table tbody tr:nth-child(even) td {
  background: var(--surface-2) !important;
}
html[data-theme="dark"] .content-area table tbody tr:hover > * {
  background: rgba(209, 200, 231, 0.1) !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .content-area .form-control,
html[data-theme="dark"] .content-area .form-select {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .content-area [style*="background:#fff"],
html[data-theme="dark"] .content-area [style*="background: #fff"],
html[data-theme="dark"] .content-area [style*="background:#ffffff"],
html[data-theme="dark"] .content-area [style*="background: #ffffff"],
html[data-theme="dark"] .content-area [style*="background:#f9fafb"],
html[data-theme="dark"] .content-area [style*="background: #f9fafb"],
html[data-theme="dark"] .content-area [style*="background:#fafafa"],
html[data-theme="dark"] .content-area [style*="background: #fafafa"],
html[data-theme="dark"] .content-area [style*="background:#f5f5f5"],
html[data-theme="dark"] .content-area [style*="background: #f5f5f5"],
html[data-theme="dark"] .content-area [style*="background:#f3f4f6"],
html[data-theme="dark"] .content-area [style*="background: #f3f4f6"],
html[data-theme="dark"] .content-area [style*="background-color:#fff"],
html[data-theme="dark"] .content-area [style*="background-color: #fff"],
html[data-theme="dark"] .content-area [style*="background-color:#ffffff"],
html[data-theme="dark"] .content-area [style*="background-color: #ffffff"] {
  background: var(--surface) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .content-area [style*="color:#111827"],
html[data-theme="dark"] .content-area [style*="color: #111827"],
html[data-theme="dark"] .content-area [style*="color:#1f2937"],
html[data-theme="dark"] .content-area [style*="color: #1f2937"],
html[data-theme="dark"] .content-area [style*="color:#374151"],
html[data-theme="dark"] .content-area [style*="color: #374151"] {
  color: var(--ink) !important;
}
html[data-theme="dark"] .content-area [style*="color:#6b7280"],
html[data-theme="dark"] .content-area [style*="color: #6b7280"],
html[data-theme="dark"] .content-area [style*="color:#9ca3af"],
html[data-theme="dark"] .content-area [style*="color: #9ca3af"] {
  color: var(--ink-muted) !important;
}

/* Employees module tables / boards */
.pc-table-wrap,
.pp-table-wrap,
.pr-table-wrap,
.cs-table-wrap,
.ot-canvas,
.ot-canvas-wrap,
.ot-board,
.pc-filters,
.pp-filters,
.pr-filters,
.pp-add,
.pc-banner,
.pr-tabs,
.pc-subtabs,
.pr-subtabs,
.ppol-panel,
.ff-panel,
.ot-toolbar {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.pc-table thead th,
.pp-table thead th,
.pr-table thead th,
.cs-table thead th {
  background: var(--surface-2) !important;
  color: var(--ink-muted) !important;
  border-color: var(--line) !important;
}
.pc-table tbody td,
.pp-table tbody td,
.pr-table tbody td,
.cs-table tbody td {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
.pc-subtab.active,
.pr-subtab.active,
.ppol-tab.active {
  color: var(--nav-active) !important;
  border-color: var(--nav-active) !important;
  background: var(--brand-soft) !important;
}
.ot-node,
.ot-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.ot-node .ot-name,
.ot-card .ot-name { color: var(--ink) !important; }
.ot-node .ot-role,
.ot-card .ot-role,
.ot-node .ot-dept,
.ot-card .ot-dept { color: var(--ink-muted) !important; }

/* Exits / offboarding module */
.es-kpi,
.es-card,
.es-table-card,
.es-filters,
.es-flow,
.ep-stat,
.ep-table-card,
.ep-filters,
.ep-detail-panel,
.ep-card,
.re-table-card,
.re-toolbar,
.tt-sidebar,
.tt-main,
.ba-section,
.bulk-card,
.survey-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.es-kpi .n,
.es-kpi .l,
.ep-stat-value,
.re-title,
.tt-title,
.ba-page-title,
.ba-section-title,
.es-title,
.ep-title {
  color: var(--ink) !important;
}
.es-kpi .l,
.re-subtitle,
.tt-sub,
.es-muted,
.es-blurb,
.ep-blurb,
.ba-section-desc {
  color: var(--ink-muted) !important;
}
.es-table thead th,
.ep-table thead th,
.re-table thead th,
.tt-table thead th {
  background: var(--surface-2) !important;
  color: var(--ink-muted) !important;
  border-color: var(--line) !important;
}
.es-table tbody td,
.ep-table tbody td,
.re-table tbody td,
.tt-table tbody td {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
.es-table tr:hover td,
.ep-table tbody tr:hover,
.re-table tbody tr:hover td {
  background: var(--surface-2) !important;
}
html[data-theme="dark"] .es-kpi,
html[data-theme="dark"] .es-card,
html[data-theme="dark"] .ep-stat,
html[data-theme="dark"] .ep-table-card,
html[data-theme="dark"] .re-table-card,
html[data-theme="dark"] .ba-section,
html[data-theme="dark"] .tt-sidebar,
html[data-theme="dark"] .tt-main {
  background: var(--surface) !important;
  box-shadow: var(--card-shadow);
}
html[data-theme="dark"] .es-flow,
html[data-theme="dark"] .ep-flow {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--ink-muted) !important;
}

/* Expenses & Travel module */
.exp-page,
.exp-card,
.exp-metric,
.exp-table-wrap,
.claim-table-wrap,
.exp-panel,
.exp-empty,
.adv-card,
.adv-table-wrap,
.pol-layout,
.pol-sidebar,
.pol-main,
.pol-card,
.rep-layout,
.rep-sidebar,
.rep-main,
.rep-card,
.imp-card,
.exp-charts-row .exp-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.exp-title,
.exp-metric-value,
.exp-card-title,
.pol-title,
.rep-title,
.ba-page-title {
  color: var(--ink) !important;
}
.exp-metric-label,
.exp-subtitle,
.fi-label,
.pol-desc,
.rep-desc {
  color: var(--ink-muted) !important;
}
.exp-table thead th,
.adv-table thead th,
.pol-table thead th,
.claim-table th {
  background: var(--surface-2) !important;
  color: var(--ink-muted) !important;
  border-color: var(--line) !important;
}
.exp-table tbody td,
.adv-table tbody td,
.pol-table tbody td,
.claim-table td {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
.org-sub-nav,
.exp-module-nav + .org-sub-nav {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
.org-sub-nav-item { color: var(--ink-muted) !important; }
.org-sub-nav-item.active {
  color: var(--nav-active) !important;
  border-bottom-color: var(--nav-active) !important;
}
html[data-theme="dark"] .exp-card,
html[data-theme="dark"] .exp-metric,
html[data-theme="dark"] .exp-table-wrap,
html[data-theme="dark"] .pol-sidebar,
html[data-theme="dark"] .pol-main,
html[data-theme="dark"] .rep-sidebar,
html[data-theme="dark"] .rep-main,
html[data-theme="dark"] .adv-table-wrap,
html[data-theme="dark"] .imp-card {
  background: var(--surface) !important;
  box-shadow: var(--card-shadow);
}
html[data-theme="dark"] .pol-list-item.active,
html[data-theme="dark"] .rep-cat.active {
  background: var(--brand-soft) !important;
  color: var(--lavender) !important;
}

/* Time Attend — force theme on desktop + mobile */
.ta-page {
  background: var(--primary-bg) !important;
  color: var(--ink) !important;
}
.ta-mod-nav,
.ta-sub-nav,
.ta-kpi,
.ta-card,
.ta-panel,
.ta-table-wrap,
.ta-section-head,
.ta-metric-tabs a {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.ta-mod-item,
.ta-sub-item,
.ta-kpi .label,
.ta-metric-tabs a {
  color: var(--ink-muted) !important;
}
.ta-mod-item.active,
.ta-sub-item.active {
  color: var(--nav-active) !important;
  border-bottom-color: var(--nav-active) !important;
}
.ta-section-head h2,
.ta-kpi .value,
.ta-card h3,
.ta-dept-list strong {
  color: var(--ink) !important;
}
.ta-table thead th,
.ta-card table thead th {
  background: var(--surface-2) !important;
  color: var(--ink-muted) !important;
  border-color: var(--line) !important;
}
.ta-table tbody td,
.ta-card table tbody td {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .ta-page,
html[data-theme="dark"] .ta-mod-nav,
html[data-theme="dark"] .ta-sub-nav,
html[data-theme="dark"] .ta-kpi,
html[data-theme="dark"] .ta-card {
  background: var(--surface) !important;
  box-shadow: var(--card-shadow);
}
html[data-theme="dark"] .ta-page {
  background: var(--primary-bg) !important;
}

/* Ensure shell chrome follows theme on all viewports */
.btn-global-back,
.mobile-menu-btn,
.qa-panel,
.top-navbar .search-bar {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.top-navbar .search-bar:focus {
  background: var(--surface) !important;
}

/* Org module — Summary / Analytics / Reports / Audit (desktop + mobile) */
.org-dash {
  --org-brand: var(--brand-green-dark);
  --org-brand-soft: var(--brand-soft);
  --org-border: var(--line);
  --org-muted: var(--ink-muted);
  --org-ink: var(--ink);
  color: var(--ink);
}
.sub-nav,
.secondary-nav,
.org-card,
.org-kpi,
.an-card,
.an-filters,
.an-dim-toggle,
.er-layout,
.er-sidebar,
.er-main,
.er-card,
.er-empty,
.er-search,
.al-wrap,
.al-table-wrap,
.al-toolbar,
.ds-card,
.sb-card,
.as-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.org-kpi,
.org-kpi.primary,
.an-card-icon,
.er-cat.active,
.er-empty {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
}
.org-card-title,
.org-kpi-val,
.an-card-title,
.an-page-title,
.er-page-title,
.al-title,
.ds-title,
.sb-title {
  color: var(--ink) !important;
}
.org-card-sub,
.org-kpi-label,
.org-muted,
.an-card-subtitle,
.er-card-desc,
.al-subtitle,
.sub-nav-item,
.secondary-nav-item {
  color: var(--ink-muted) !important;
}
.sub-nav-item.active,
.secondary-nav-item.active {
  color: var(--nav-active) !important;
  border-bottom-color: var(--nav-active) !important;
}
.al-table thead th,
.er-sidebar,
.an-filters {
  background: var(--surface-2) !important;
  color: var(--ink-muted) !important;
  border-color: var(--line) !important;
}
.al-table tbody td {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .org-card,
html[data-theme="dark"] .org-kpi,
html[data-theme="dark"] .an-card,
html[data-theme="dark"] .er-card,
html[data-theme="dark"] .er-sidebar,
html[data-theme="dark"] .er-main,
html[data-theme="dark"] .al-table-wrap,
html[data-theme="dark"] .sub-nav,
html[data-theme="dark"] .secondary-nav {
  background: var(--surface) !important;
  box-shadow: var(--card-shadow);
}
html[data-theme="dark"] .org-kpi.primary,
html[data-theme="dark"] .org-badge,
html[data-theme="dark"] .an-card-icon,
html[data-theme="dark"] .er-cat.active {
  background: var(--brand-soft) !important;
  color: var(--lavender) !important;
}
html[data-theme="dark"] .org-card-icon.green,
html[data-theme="dark"] .org-card-icon.amber,
html[data-theme="dark"] .org-card-icon.rose,
html[data-theme="dark"] .org-card-icon.blue,
html[data-theme="dark"] .org-card-icon.sky {
  background: var(--brand-soft) !important;
  color: var(--lavender) !important;
}
html[data-theme="dark"] .org-kpi-delta.up {
  background: rgba(34, 197, 94, 0.18) !important;
  color: #86efac !important;
}
html[data-theme="dark"] .org-kpi-delta.down {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #fca5a5 !important;
}

/* Assets / Docs / Hiring / Learning / Perf shared chrome */
.as-page,
.docs-page,
.hire-page,
.ld-page,
.perf-page {
  background: var(--primary-bg) !important;
  color: var(--ink) !important;
}
.as-card,
.docs-card,
.hire-card,
.ld-card,
.perf-card,
.alist-card,
.cat-item,
.inv-group,
.bc-card,
.det-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

/* Performance module — nav, PIP, cards (desktop + mobile) */
.perf-module-nav,
.pip-sub-nav,
.perf-kpi,
.perf-card,
.pip-empty,
.pip-set-section,
.pip-scope,
.rev-scope,
.sk-scope,
.sk-top-tabs,
.sk-admin-tabs {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.perf-module-item,
.pip-sub-item {
  color: var(--ink-muted) !important;
}
.perf-module-item.active,
.pip-sub-item.active {
  color: var(--nav-active) !important;
  border-bottom-color: var(--nav-active) !important;
}
.pip-info,
.perf-info,
.pip-chain-box {
  background: var(--brand-soft) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.pip-scope a.active,
.rev-scope a.active,
.sk-scope a.active,
.sk-top-tabs a.active,
.sk-admin-tabs a.active {
  background: var(--brand-soft) !important;
  color: var(--nav-active) !important;
}
html[data-theme="dark"] .perf-page,
html[data-theme="dark"] .perf-module-nav,
html[data-theme="dark"] .pip-sub-nav,
html[data-theme="dark"] .perf-kpi,
html[data-theme="dark"] .perf-card,
html[data-theme="dark"] .pip-empty,
html[data-theme="dark"] .pip-set-section {
  background: var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: var(--card-shadow);
}
html[data-theme="dark"] .perf-page {
  background: var(--primary-bg) !important;
}
html[data-theme="dark"] .content-area .table-responsive {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}


/* Payroll module — full page theme (desktop + mobile) */
.py-page {
  background: var(--primary-bg) !important;
  color: var(--ink) !important;
  min-height: 60vh;
}
.py-mod-nav,
.py-sub-nav,
.py-kpi,
.py-card,
.py-table-wrap,
.py-toolbar,
.py-compare-panel,
.py-compare-workspace,
.py-compare-side,
.py-compare-main,
.py-compare-dim,
.py-entity-card,
.py-metric-tabs a,
.py-run-month,
.py-rep-layout,
.py-rep-cats,
.py-rep-main {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.py-mod-item,
.py-sub-item,
.py-kpi .label,
.py-kpi .meta,
.py-section-head p {
  color: var(--ink-muted) !important;
}
.py-mod-item.active,
.py-sub-item.active {
  color: var(--nav-active) !important;
  border-bottom-color: var(--nav-active) !important;
}
.py-section-head h2,
.py-kpi .value,
.py-card h3,
.py-card strong {
  color: var(--ink) !important;
}
.py-table thead th,
.py-pager {
  background: var(--surface-2) !important;
  color: var(--ink-muted) !important;
  border-color: var(--line) !important;
}
.py-table tbody td {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
.py-metric-tabs a.active,
.py-compare-dim.active,
.py-entity-card.active,
.py-rep-cats a.active {
  background: var(--brand-soft) !important;
  color: var(--nav-active) !important;
  border-color: var(--lavender) !important;
}
html[data-theme="dark"] .py-page {
  background: var(--primary-bg) !important;
}
html[data-theme="dark"] .py-mod-nav,
html[data-theme="dark"] .py-sub-nav,
html[data-theme="dark"] .py-card,
html[data-theme="dark"] .py-kpi,
html[data-theme="dark"] .py-table-wrap,
html[data-theme="dark"] .py-compare-panel,
html[data-theme="dark"] .py-compare-workspace,
html[data-theme="dark"] .py-compare-side,
html[data-theme="dark"] .py-compare-main,
html[data-theme="dark"] .py-compare-dim {
  background: var(--surface) !important;
  box-shadow: var(--card-shadow);
}
html[data-theme="dark"] .py-info-banner {
  background: var(--brand-soft) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .py-info-banner a {
  color: var(--lavender) !important;
}
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .content-area,
html[data-theme="dark"] body {
  background-color: var(--primary-bg) !important;
  color: var(--ink) !important;
}

/* Payroll accent actions (Add Pay Group, etc.) — theme-aware */
.btn-py-accent {
  background: var(--lavender) !important;
  border: 1px solid var(--lavender) !important;
  color: #2c2a33 !important;
  font-weight: 700;
}
html[data-theme="dark"] .btn-py-accent {
  background: var(--brand-soft) !important;
  border-color: var(--lavender) !important;
  color: var(--lavender) !important;
}
.btn-py-accent:hover {
  filter: brightness(0.96);
  color: #2c2a33 !important;
}
html[data-theme="dark"] .btn-py-accent:hover {
  color: var(--lavender) !important;
  filter: brightness(1.08);
}
html[data-theme="dark"] #payGroupModal .modal-content {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] #payGroupModal .modal-header,
html[data-theme="dark"] #payGroupModal .modal-footer {
  border-color: var(--line) !important;
}
html[data-theme="dark"] #payGroupModal .btn-close {
  filter: invert(1);
}

html[data-theme="dark"] .content-area input[type="date"].form-control,
html[data-theme="dark"] .content-area input[type="date"].form-control-sm {
  background: var(--surface-2) !important;
  border-color: var(--ink-soft) !important;
  color: var(--ink) !important;
  color-scheme: dark;
}
html[data-theme="dark"] .content-area input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.95;
}

.lb-actions a.lb-btn-primary:hover {
  background: #c4b8de !important;
  border-color: #c4b8de !important;
  color: #2c2a33 !important;
}
.lb-actions a.lb-btn-outline {
  color: var(--ink) !important;
  border-color: var(--line) !important;
}