/*
 * SLT SME Incentive System | Shared Light/Dark Theme (v2)
 * Light mode is the default. All accent colors are blue. Logo retains official colors.
 * The light sidebar is intentionally not navy in light mode.
 */
:root {
  --chart-grid: #e3eaf4;
  --chart-axis: #6b7c93;
  --chart-target: #b8d5f7;
  --chart-bar: #075fc1;
  --chart-bar-muted: #94bff0;
  --chart-value: #496785;
  --chart-line: #075fc1;
  --chart-dot: #ffffff;
  --donut-track: #e7eef8;
}

/* LIGHT: Change previous v1 navy sidebar into a unified white navigation. */
.sidebar {
  background: #ffffff;
  border-right: 1px solid #e3eaf3;
  color: #334c6e;
}
.nav-caption { color: #8090a4; }
.nav-item { color: #39516e; }
.nav-item svg.icon { color: #637c9c; }
.nav-item:hover { background: #f0f6ff; color: #075fc1; }
.nav-item:hover svg.icon { color: #075fc1; }
.nav-item.active { background: #e6f1ff; color: #0756b1; }
.nav-item.active svg.icon { color: #0756b1; }
.nav-item.active:before { background: #075fc1; }
.sidebar-status { background: #f2f7ff; border-color: #dce8f7; color: #214367; }
.sidebar-status .icon { color: #075fc1; }
.sidebar-status small { color: #71849d; }
.sidebar-version { color: #8b9bae; }

/* Header theme control: explicit light/dark action, not an unlabeled icon. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: #f5f8fd;
  color: #1c4f87;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.theme-toggle:hover { background: #e9f3ff; border-color: #a7c8ee; }
.theme-toggle:focus-visible { outline: 2px solid #2579d0; outline-offset: 2px; }
.theme-toggle .icon { width: 17px; height: 17px; }
.theme-sun { display: none; }
.theme-moon { display: block; }

/* DARK: All major surfaces, controls, typography, SVGs, charts and modals. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0b1322;
  --white: #15243a;
  --ink: #f1f6ff;
  --text: #c2d0e4;
  --muted: #9bafc8;
  --border: #293b53;
  --border-strong: #3a4e68;
  --primary: #71b5ff;
  --primary-dark: #4897ed;
  --primary-quiet: #162f4f;
  --blue-soft: #1b3350;
  --navy: #101e33;
  --navy-deep: #0d192c;
  --shadow: 0 1px 2px rgba(0,0,0,.11);
  --focus: 0 0 0 3px rgba(97,171,247,.4);
  --chart-grid: #314158;
  --chart-axis: #afbed2;
  --chart-target: #395e8c;
  --chart-bar: #4a9cf0;
  --chart-bar-muted: #2e619e;
  --chart-value: #dceaff;
  --chart-line: #8cc5ff;
  --chart-dot: #13233a;
  --donut-track: #314157;
}
:root[data-theme="dark"] body { background: var(--canvas); color: var(--text); }
:root[data-theme="dark"] .topbar {
  background: #111e32;
  border-bottom-color: var(--border);
}
:root[data-theme="dark"] .brand {
  /* The supplied blue/green logo requires a light brand plate to remain faithful and legible. */
  background: #ffffff;
  border-right-color: #2b3b51;
}
:root[data-theme="dark"] .topbar-title,
:root[data-theme="dark"] .user-label strong { color: var(--ink); }
:root[data-theme="dark"] .header-context {
  background: #1c304a;
  border-color: #354d6a;
  color: #c5d8ed;
}
:root[data-theme="dark"] .icon-button { color: #bbcee7; }
:root[data-theme="dark"] .icon-button:hover { background: #243a56; color: #d9ebff; }
:root[data-theme="dark"] .avatar { background: #256ebc; color: #ffffff; }
:root[data-theme="dark"] .sidebar {
  background: #101e33;
  border-right: 1px solid #2a3d56;
  color: #dce9fa;
}
:root[data-theme="dark"] .nav-caption { color: #8ea3c0; }
:root[data-theme="dark"] .nav-item { color: #c4d5ea; }
:root[data-theme="dark"] .nav-item svg.icon { color: #97b4d5; }
:root[data-theme="dark"] .nav-item:hover { background: #1c3552; color: #ffffff; }
:root[data-theme="dark"] .nav-item:hover svg.icon { color: #bfe2ff; }
:root[data-theme="dark"] .nav-item.active { background: #174576; color: #ffffff; }
:root[data-theme="dark"] .nav-item.active svg.icon { color: #b3dbff; }
:root[data-theme="dark"] .nav-item.active:before { background: #77b8ff; }
:root[data-theme="dark"] .sidebar-status { background: #192c47; border-color: #344c6a; color: #dfebfa; }
:root[data-theme="dark"] .sidebar-status .icon { color: #a8d1ff; }
:root[data-theme="dark"] .sidebar-status small,
:root[data-theme="dark"] .sidebar-version { color: #a2b5ce; }
:root[data-theme="dark"] .theme-toggle {
  background: #213755;
  color: #e1efff;
  border-color: #416187;
}
:root[data-theme="dark"] .theme-toggle:hover { background: #2c486d; border-color: #6495c8; }
:root[data-theme="dark"] .theme-sun { display: block; }
:root[data-theme="dark"] .theme-moon { display: none; }

/* Page title, controls, and informational banners */
:root[data-theme="dark"] .breadcrumb { color: #94a9c4; }
:root[data-theme="dark"] .page-heading h1 { color: var(--ink); }
:root[data-theme="dark"] .page-heading p { color: var(--muted); }
:root[data-theme="dark"] .button { background: #1a2e49; color: #aad7ff; border-color: var(--border-strong); }
:root[data-theme="dark"] .button-outline:hover { background: #253f60; border-color: #6a9dce; }
:root[data-theme="dark"] .button-primary { background: #2179d5; color: #ffffff; border-color: #2179d5; }
:root[data-theme="dark"] .button-primary:hover { background: #2c88e9; }
:root[data-theme="dark"] .demo-banner {
  background: #152d4c;
  border-color: #2c4e75;
  color: #c8dcef;
}
:root[data-theme="dark"] .demo-banner .icon,
:root[data-theme="dark"] .demo-banner strong { color: #afd7ff; }
:root[data-theme="dark"] .field-label { color: #b4c3d8; }
:root[data-theme="dark"] .select-wrap {
  background: #192b44;
  border-color: #3b516e;
  color: #afc9e6;
}
:root[data-theme="dark"] .select-wrap select { color: #f1f6ff; color-scheme: dark; }
:root[data-theme="dark"] .select-wrap select option { background: #192b44; color: #f1f6ff; }
:root[data-theme="dark"] .select-chevron { color: #a0b9d8; }
:root[data-theme="dark"] .reset-filters { color: #9bcaff; }
:root[data-theme="dark"] .period-state {
  background: #18375b;
  border-color: #3b6292;
  color: #bfdeff;
}

/* KPIs and data panels */
:root[data-theme="dark"] .metric-card,
:root[data-theme="dark"] .panel {
  background: #15243a;
  border-color: #2b3e57;
  box-shadow: none;
}
:root[data-theme="dark"] .metric-icon { background: #203e61; color: #9bcaff; }
:root[data-theme="dark"] .metric-label { color: #c0cde0; }
:root[data-theme="dark"] .tiny-info { color: #9bb1cc; }
:root[data-theme="dark"] .metric-value { color: #f1f6ff; }
:root[data-theme="dark"] .metric-value.metric-status,
:root[data-theme="dark"] .delta-up { color: #9bcaff; }
:root[data-theme="dark"] .delta-down { color: #b1c3db; }
:root[data-theme="dark"] .metric-sub { color: #a7bad2; }
:root[data-theme="dark"] .panel-heading h2 { color: #f1f6ff; }
:root[data-theme="dark"] .panel-description,
:root[data-theme="dark"] .chart-footer { color: #acbed4; }
:root[data-theme="dark"] .segmented { background: #1a2d46; border-color: #364c67; }
:root[data-theme="dark"] .segment { color: #bbcee4; }
:root[data-theme="dark"] .segment.active {
  background: #294d76;
  color: #e9f5ff;
  box-shadow: none;
}
:root[data-theme="dark"] .chart-summary { color: #b5c4d9; }
:root[data-theme="dark"] .key-square { background: #4a9cf0; }
:root[data-theme="dark"] .key-line,
:root[data-theme="dark"] .key-line:after { background: #8cc5ff; }
:root[data-theme="dark"] .key-line:after { border-color: #15243a; }
:root[data-theme="dark"] .donut-center span,
:root[data-theme="dark"] .donut-center small { color: #afc1d8; }
:root[data-theme="dark"] .donut-center strong { color: #f2f7ff; }
:root[data-theme="dark"] .legend-row { color: #bfcee1; }
:root[data-theme="dark"] .legend-row:hover,
:root[data-theme="dark"] .legend-row.selected { background: #203c5d; border-color: #365879; }
:root[data-theme="dark"] .legend-value { color: #e2edff; }
:root[data-theme="dark"] .subtle-link { color: #a3d0ff; }
:root[data-theme="dark"] .inline-stat { background: #203d60; color: #c4e1ff; }

/* DataTable surface and selected rows */
:root[data-theme="dark"] .data-table th { background: #203149; color: #c2d1e5; border-bottom-color: #3a4b65; }
:root[data-theme="dark"] .data-table td { color: #d0dded; border-bottom-color: #2c3e54; }
:root[data-theme="dark"] .data-table tbody tr:hover,
:root[data-theme="dark"] .data-table tbody tr:focus { background: #1d3858; }
:root[data-theme="dark"] .data-table tbody tr.selected { background: #21456e; }
:root[data-theme="dark"] .data-table tfoot td {
  background: #24384f;
  color: #f0f5ff;
  border-top-color: #45617e;
}
:root[data-theme="dark"] .achievement-pill { background: #254d77; color: #d4ebff; }
:root[data-theme="dark"] .panel-footnote { color: #a8bbd1; }

/* Monthly workflow and reporting states */
:root[data-theme="dark"] .workflow-label { background: #214367; color: #cae3ff; }
:root[data-theme="dark"] .stage:not(:last-child):after { background: #46566d; }
:root[data-theme="dark"] .stage.completed:not(:last-child):after { background: #4c99e9; }
:root[data-theme="dark"] .stage-mark { background: #15243a; border-color: #52627a; color: #a1b4cb; }
:root[data-theme="dark"] .stage.completed .stage-mark { background: #2276ca; border-color: #2276ca; color: #ffffff; }
:root[data-theme="dark"] .stage.current .stage-mark { background: #183a5d; border-color: #71b5ff; color: #d2e9ff; }
:root[data-theme="dark"] .stage-name,
:root[data-theme="dark"] .stage.completed .stage-name { color: #b8cce4; }
:root[data-theme="dark"] .stage.current .stage-name { color: #d3eaff; }
:root[data-theme="dark"] .workflow-separator { background: #2d425d; }
:root[data-theme="dark"] .workflow-summary { background: #1a3554; border-color: #355675; }
:root[data-theme="dark"] .workflow-info > .icon { color: #9bcaff; }
:root[data-theme="dark"] .workflow-info strong { color: #e8f4ff; }
:root[data-theme="dark"] .workflow-info p { color: #afc6df; }
:root[data-theme="dark"] .workflow-bottom,
:root[data-theme="dark"] .workflow-bottom span:last-child { color: #b1c2d7; }
:root[data-theme="dark"] .content-footer { color: #a6bbd0; border-top-color: #2b3e57; }

/* Dialogs, exports and feedback */
:root[data-theme="dark"] .modal-backdrop { background: rgba(0, 6, 16, .74); }
:root[data-theme="dark"] .modal {
  background: #16263d;
  border-color: #3b506d;
  box-shadow: 0 20px 55px rgba(0,0,0,.45);
}
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer { border-color: #324862; }
:root[data-theme="dark"] .modal-header h2,
:root[data-theme="dark"] .modal-body strong { color: #f4f8ff; }
:root[data-theme="dark"] .modal-body { color: #ccdaea; }
:root[data-theme="dark"] .detail-table th { color: #bbcee3; }
:root[data-theme="dark"] .detail-table td { border-color: #354960; }
:root[data-theme="dark"] .detail-table td:last-child { color: #f0f6ff; }
:root[data-theme="dark"] .detail-table .total-line td { background: #213c5c; }
:root[data-theme="dark"] .toast { background: #2b5485; color: #ffffff; }

/* Compact header: toggle always remains visible as an icon. */
@media (max-width: 1360px) {
  .theme-toggle { padding: 8px 10px; }
  .topbar-right { gap: 10px; }
}
@media (max-width: 950px) {
  .theme-toggle { min-width: 35px; padding: 8px; }
  .theme-toggle span { display: none; }
}
@media (max-width: 800px) {
  .sidebar { box-shadow: 0 15px 35px rgba(8, 30, 66, .13); }
  :root[data-theme="dark"] .sidebar { box-shadow: 0 15px 35px rgba(0,0,0,.36); }
  .topbar-right { gap: 5px; }
  .theme-toggle { min-width: 34px; min-height: 34px; }
}
@media (max-width: 540px) {
  .theme-toggle { width: 31px; min-width: 31px; min-height: 31px; padding: 6px; }
  .theme-toggle .icon { width: 16px; height: 16px; }
  .theme-toggle span { display: none; }
}

/* Preserve muted chart panel dividers when rendering in the dark theme. */
:root[data-theme="dark"] .chart-footer { border-top-color: #31435c; }