/**
 * 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"] .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;
}