/* Shared visual system based on Attendance Control. */

html[data-site-theme="light"] {
  --site-bg: #fbf8f1;
  --site-bg-deep: #f4eee1;
  --site-surface: rgba(255, 255, 255, .9);
  --site-surface-solid: #ffffff;
  --site-surface-soft: rgba(246, 242, 252, .82);
  --site-border: rgba(36, 27, 93, .14);
  --site-text: #2b2459;
  --site-heading: #241b5d;
  --site-muted: #6f678f;
  --site-blue: #4b5bdc;
  --site-blue-strong: #304de0;
  --site-gold: #f5aa18;
  --site-green: #218943;
  --site-red: #d84046;
  --site-blue-soft: rgba(75, 91, 220, .11);
  --site-green-soft: rgba(33, 137, 67, .11);
  --site-amber-soft: rgba(245, 170, 24, .14);
  --site-red-soft: rgba(216, 64, 70, .11);
  --site-neutral-soft: rgba(111, 103, 143, .1);
  --site-grid: rgba(36, 27, 93, .026);
  --site-grid-strong: rgba(36, 27, 93, .048);
  --site-shadow: 0 22px 54px rgba(36, 27, 93, .1);
  --site-sidebar: #1b2340;
  --site-sidebar-text: #ffffff;
  --site-focus: rgba(75, 91, 220, .2);
}

html[data-site-theme="dark"] {
  --site-bg: #061323;
  --site-bg-deep: #06111f;
  --site-surface: rgba(8, 24, 42, .9);
  --site-surface-solid: #091a2d;
  --site-surface-soft: rgba(17, 38, 61, .76);
  --site-border: rgba(147, 178, 216, .22);
  --site-text: #f5ead0;
  --site-heading: #fff0cf;
  --site-muted: #aab5c9;
  --site-blue: #7f9cff;
  --site-blue-strong: #5278ff;
  --site-gold: #ffb52e;
  --site-green: #6fd184;
  --site-red: #ff6965;
  --site-blue-soft: rgba(127, 156, 255, .1);
  --site-green-soft: rgba(111, 209, 132, .1);
  --site-amber-soft: rgba(255, 181, 46, .11);
  --site-red-soft: rgba(255, 105, 101, .1);
  --site-neutral-soft: rgba(170, 181, 201, .08);
  --site-grid: rgba(91, 130, 181, .065);
  --site-grid-strong: rgba(91, 130, 181, .12);
  --site-shadow: 0 26px 70px rgba(0, 0, 0, .24);
  --site-sidebar: #040d18;
  --site-sidebar-text: #f5ead0;
  --site-focus: rgba(127, 156, 255, .24);
}

html[data-site-theme] {
  --page-bg: var(--site-bg);
  --surface: var(--site-surface-solid);
  --surface-soft: var(--site-surface-soft);
  --border: var(--site-border);
  --text: var(--site-text);
  --muted: var(--site-muted);
  --navy: var(--site-blue);
  --navy-soft: var(--site-surface-soft);
  --gold: var(--site-gold);
  --shadow: var(--site-shadow);

  --wf-bg: var(--site-bg);
  --wf-surface: var(--site-surface);
  --wf-surface-soft: var(--site-surface-soft);
  --wf-border: var(--site-border);
  --wf-text: var(--site-text);
  --wf-muted: var(--site-muted);
  --wf-navy: var(--site-heading);
  --wf-gold: var(--site-gold);
  --wf-danger: var(--site-red);
  --wf-success: var(--site-green);
  --wf-shadow: var(--site-shadow);

  --ink: var(--site-heading);
  --paper: var(--site-bg);
  --card: var(--site-surface-solid);
  --line: var(--site-border);
  --amber: var(--site-gold);
  --amber-strong: var(--site-gold);
  --teal: var(--site-green);
  --coral: var(--site-red);
  --coral-bg: var(--site-red-soft);
  --violet: var(--site-blue);
  --violet-bg: var(--site-blue-soft);
  --text-1: var(--site-text);
  --text-2: var(--site-muted);
  --text-3: color-mix(in srgb, var(--site-muted) 72%, transparent);

  --home-bg: var(--site-bg);
  --home-bg-alt: var(--site-bg-deep);
  --home-panel: var(--site-surface);
  --home-line: var(--site-border);
  --home-text: var(--site-text);
  --home-muted: var(--site-muted);
  --home-navy: var(--site-heading);
  --home-navy-deep: var(--site-sidebar);
  --home-purple: var(--site-blue);
  --home-gold: var(--site-gold);
  --home-green: var(--site-green);
  --home-red: var(--site-red);
  --home-shadow: var(--site-shadow);

  --rate-bg: var(--site-bg);
  --rate-surface: var(--site-surface-solid);
  --rate-text: var(--site-text);
  --rate-muted: var(--site-muted);
  --rate-copy: var(--site-muted);
  --rate-border: var(--site-border);
  --rate-purple: var(--site-blue);
  --rate-purple-soft: var(--site-surface-soft);
  --rate-green: var(--site-green);
  --rate-green-soft: color-mix(in srgb, var(--site-green) 14%, transparent);
  --rate-red: var(--site-red);
  --rate-red-soft: color-mix(in srgb, var(--site-red) 14%, transparent);
  --rate-amber: var(--site-gold);
  --rate-amber-soft: color-mix(in srgb, var(--site-gold) 14%, transparent);
  --rate-gold: var(--site-gold);

  --payroll-bg: var(--site-bg);
  --payroll-surface: var(--site-surface-solid);
  --payroll-text: var(--site-text);
  --payroll-muted: var(--site-muted);
  --payroll-copy: var(--site-muted);
  --payroll-border: var(--site-border);
  --payroll-purple: var(--site-blue);
  --payroll-purple-soft: var(--site-surface-soft);
  --payroll-green: var(--site-green);
  --payroll-green-soft: color-mix(in srgb, var(--site-green) 14%, transparent);
  --payroll-red: var(--site-red);
  --payroll-red-soft: color-mix(in srgb, var(--site-red) 14%, transparent);
  --payroll-amber: var(--site-gold);
  --payroll-amber-soft: color-mix(in srgb, var(--site-gold) 14%, transparent);
  --payroll-blue: var(--site-blue);
  --payroll-blue-soft: color-mix(in srgb, var(--site-blue) 14%, transparent);
  --payroll-gold: var(--site-gold);

  --slip-bg: var(--site-bg);
  --slip-surface: var(--site-surface-solid);
  --slip-ink: var(--site-text);
  --slip-copy: var(--site-muted);
  --slip-muted: var(--site-muted);
  --slip-border: var(--site-border);
  --slip-purple: var(--site-blue);
  --slip-purple-soft: var(--site-surface-soft);
  --slip-gold: var(--site-gold);
  --slip-green: var(--site-green);
  --slip-green-soft: color-mix(in srgb, var(--site-green) 14%, transparent);

  --landing-paper: var(--site-bg);
  --landing-ink: var(--site-heading);
  --landing-soft: var(--site-text);
  --landing-slate: var(--site-muted);
  --landing-coral: var(--site-red);
  --landing-gold: var(--site-gold);
  --landing-sage: var(--site-surface-soft);
  --landing-line: var(--site-border);

  --sl-navy: var(--site-heading);
  --sl-navy-deep: var(--site-sidebar);
  --sl-cream: var(--site-bg);
  --sl-cream-soft: var(--site-bg-deep);
  --sl-gold: var(--site-gold);
  --sl-gold-soft: color-mix(in srgb, var(--site-gold) 48%, var(--site-surface-solid));
  --sl-text: var(--site-text);
  --sl-muted: var(--site-muted);
  --sl-card: var(--site-surface-solid);
  --sl-border: var(--site-border);
  --sl-shadow: var(--site-shadow);
}

html[data-site-theme] body {
  color: var(--site-text);
  background:
    linear-gradient(var(--site-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--site-grid) 1px, transparent 1px),
    linear-gradient(var(--site-grid-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--site-grid-strong) 1px, transparent 1px),
    radial-gradient(circle at 23% 8%, color-mix(in srgb, var(--site-gold) 14%, transparent), transparent 28rem),
    radial-gradient(circle at 86% 7%, color-mix(in srgb, var(--site-blue) 11%, transparent), transparent 30rem),
    var(--site-bg);
  background-attachment: fixed;
  background-size: 16px 16px, 16px 16px, 80px 80px, 80px 80px, auto, auto, auto;
  transition: color .2s ease, background-color .2s ease;
}

html[data-site-theme] :is(h1, h2, h3, h4, legend) {
  color: var(--site-heading);
}

html[data-site-theme] :is(
  .panel,
  .snapshot,
  .wf-card,
  .wf-summary,
  .wf-table-wrap,
  .dashboard-section,
  .metric-card,
  .chart-card,
  .table-card,
  .data-card,
  .detail-card,
  .rate-card,
  .payroll-card,
  .schedule-card,
  .schedule-calendar-shell,
  .schedule-detail-list > div,
  .schedule-day,
  .team-attendance-record,
  .team-attendance-advanced-filters[open],
  .team-attendance-record-actions > .wf-row-actions,
  .payroll-metric-card,
  .payslip-sheet,
  .payslip-page-message,
  .rate-panel,
  .editor-panel,
  .list-panel,
  .announcement-editor-field,
  .page-header,
  .landing-card,
  .auth-card,
  .login-card,
  dialog
) {
  border-color: var(--site-border);
  background: var(--site-surface);
  box-shadow: var(--site-shadow);
  backdrop-filter: blur(16px);
}

html[data-site-theme] :is(
  .section-content,
  .wf-range-bar,
  .wf-toolbar,
  .wf-advanced,
  .wf-check-grid,
  .team-attendance-flag-filters,
  .team-attendance-prepaid,
  .placeholder-badge
) {
  border-color: var(--site-border);
  background: var(--site-surface-soft);
}

html[data-site-theme] .wf-check-card {
  border-color: var(--site-border);
  color: var(--site-text);
  background: var(--site-surface-solid);
}

html[data-site-theme] .wf-check-card:has(input:checked) {
  border-color: color-mix(in srgb, var(--site-blue) 58%, var(--site-border));
  background: color-mix(in srgb, var(--site-blue) 10%, var(--site-surface-solid));
}

html[data-site-theme] :is(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .wf-control
) {
  border-color: var(--site-border);
  color: var(--site-text);
  background: var(--site-surface-solid);
}

html[data-site-theme] :is(input, select, textarea, button, a):focus-visible {
  outline: 2px solid var(--site-blue);
  outline-offset: 2px;
}

html[data-site-theme] :is(.wf-link, .wf-btn.secondary, .wf-row-btn, .action-link, .wf-close) {
  border-color: var(--site-border);
  color: var(--site-heading);
  background: var(--site-surface-solid);
}

html[data-site-theme] :is(.wf-btn:not(.secondary):not(.danger), .primary-button, .primary-btn) {
  border-color: var(--site-blue-strong);
  color: #fff;
  background: var(--site-blue-strong);
}

html[data-site-theme] :is(.wf-table, table) {
  color: var(--site-text);
  background: transparent;
}

html[data-site-theme] :is(.wf-table th, table th) {
  border-color: var(--site-border);
  color: var(--site-heading);
  background: var(--site-surface-soft);
}

html[data-site-theme] :is(.wf-table td, table td) {
  border-color: var(--site-border);
}

html[data-site-theme] :is(.wf-table tbody tr:hover, table tbody tr:hover) {
  background: color-mix(in srgb, var(--site-gold) 8%, transparent);
}

html[data-site-theme] :is(.wf-person, .wf-card h2, .wf-card h3, .title-block h1) {
  color: var(--site-heading);
}

html[data-site-theme] :is(.wf-message, .wf-subtext, .title-block p, .lede, .footer-note) {
  color: var(--site-muted);
}

html[data-site-theme="dark"] :is(.wf-dialog, .wf-schedule-dialog) {
  background: var(--site-surface-solid);
}

html[data-site-theme] .team-attendance-page {
  --ta-ink: var(--site-text);
  --ta-muted: var(--site-muted);
  --ta-line: var(--site-border);
  --ta-paper: var(--site-bg);
  --ta-blue: var(--site-blue);
  --ta-red: var(--site-red);
  --ta-amber: var(--site-gold);
  --ta-green: var(--site-green);
}

html[data-site-theme] body:has(.team-attendance-page) {
  background-color: var(--site-bg);
}

html[data-site-theme] :is(
  .schedule-details-button,
  .my-payslips-action,
  .payroll-button-secondary,
  .payslip-button,
  .team-attendance-search,
  .team-attendance-chip,
  .secondary-button,
  .back-link
) {
  border-color: var(--site-border);
  color: var(--site-text);
  background: var(--site-surface-solid);
}

html[data-site-theme="dark"] :is(
  .schedule-change-notice,
  .team-attendance-track,
  .team-attendance-correction-summary,
  .team-attendance-current-value,
  .announcement-format-toolbar,
  .form-status
) {
  border-color: var(--site-border);
  color: var(--site-text);
  background: var(--site-surface-soft);
}

html[data-site-theme="dark"] :is(
  .my-payslips-number,
  .my-payslips-money,
  .my-payslips-prepaid strong,
  .payroll-page-header h1,
  .payroll-metric-card strong,
  .payroll-section-heading h2,
  .payslip-document-title h2,
  .rate-page-header h1,
  .rate-card h2
) {
  color: var(--site-heading);
}

html[data-site-theme="dark"] .landing-tag {
  background: var(--site-surface);
}

/* Article Management uses the Attendance Control contrast hierarchy in dark mode. */
html[data-site-theme="dark"] .management-page {
  background: transparent;
}

html[data-site-theme="dark"] :is(
  .management-card,
  .article-preview-panel
) {
  border-color: var(--site-border);
  background: linear-gradient(
    180deg,
    rgba(9, 26, 45, .96),
    rgba(6, 20, 36, .96)
  );
  box-shadow: var(--site-shadow);
}

html[data-site-theme="dark"] .article-list-item {
  border-color: var(--site-border);
  color: var(--site-text);
  background: var(--site-surface-soft);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .13);
}

html[data-site-theme="dark"] .article-list-item:hover {
  border-color: color-mix(in srgb, var(--site-blue) 48%, var(--site-border));
  background: color-mix(in srgb, var(--site-blue) 8%, var(--site-surface-soft));
}

html[data-site-theme="dark"] .article-list-item.is-selected {
  border-color: color-mix(in srgb, var(--site-gold) 72%, transparent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--site-gold) 10%, transparent),
    0 12px 28px rgba(0, 0, 0, .18);
}

html[data-site-theme="dark"] :is(
  .management-title h1,
  .management-summary strong,
  .preview-toolbar strong,
  .article-list-heading h2,
  .preview-title,
  .article-preview-panel .rich-section-title,
  .article-preview-panel .step-card-title,
  .article-preview-panel .response-template-title,
  .article-preview-panel .callout-card-title,
  .article-preview-panel .rich-subheading
) {
  color: var(--site-heading) !important;
}

html[data-site-theme="dark"] :is(
  .management-title p,
  .management-summary span,
  .management-status,
  .article-description,
  .article-meta,
  .preview-meta,
  .preview-description,
  .preview-empty,
  .article-preview-panel p,
  .article-preview-panel li,
  .article-preview-panel td,
  .article-preview-panel .statement-card p
) {
  color: var(--site-muted) !important;
}

html[data-site-theme="dark"] :is(
  .article-preview-panel strong,
  .article-preview-panel .statement-card strong
) {
  color: var(--site-text) !important;
}

html[data-site-theme="dark"] :is(
  .management-link,
  .management-button
) {
  border-color: var(--site-border);
  color: var(--site-heading);
  background: var(--site-surface-solid);
}

html[data-site-theme="dark"] .management-button-primary {
  border-color: var(--site-gold);
  color: #071321;
  background: var(--site-gold);
}

html[data-site-theme="dark"] .management-button-danger {
  border-color: color-mix(in srgb, var(--site-red) 70%, transparent);
  color: #fff;
  background: color-mix(in srgb, var(--site-red) 78%, #471318);
}

html[data-site-theme="dark"] :is(
  .article-badge,
  .preview-category,
  .article-preview-panel .step-badge,
  .article-preview-panel .rule-number
) {
  border-color: color-mix(in srgb, var(--site-blue) 42%, transparent) !important;
  color: var(--site-blue) !important;
  background: color-mix(in srgb, var(--site-blue) 11%, transparent) !important;
}

html[data-site-theme="dark"] :is(
  .article-preview-panel .section,
  .article-preview-panel .step-card,
  .article-preview-panel .response-template-card,
  .article-preview-panel .nested-rich-unit,
  .article-preview-panel .rule-card,
  .article-preview-panel .statement-card
) {
  border-color: var(--site-border) !important;
  background: var(--site-surface-soft) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12) !important;
}

html[data-site-theme="dark"] .article-preview-panel .callout-card {
  border-color: var(--site-border) !important;
  border-left-color: var(--site-gold) !important;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--site-gold) 9%, var(--site-surface-soft)),
    var(--site-surface-soft)
  ) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12) !important;
}

html[data-site-theme="dark"] :is(
  .article-preview-panel .rich-table-wrapper,
  .preview-cover,
  .preview-empty,
  .article-empty
) {
  border-color: var(--site-border) !important;
  background: var(--site-surface-soft);
}

html[data-site-theme="dark"] .article-preview-panel .rich-table th {
  border-color: var(--site-border) !important;
  color: var(--site-blue) !important;
  background: color-mix(in srgb, var(--site-blue) 10%, transparent) !important;
}

html[data-site-theme="dark"] .article-preview-panel .rich-table td {
  border-color: var(--site-border) !important;
}

html[data-site-theme="dark"] .article-preview-panel .article-inline-link {
  color: var(--site-blue) !important;
  text-decoration-color: color-mix(in srgb, var(--site-blue) 55%, transparent) !important;
}

html[data-site-theme="dark"] .delete-dialog {
  border-color: var(--site-border);
  color: var(--site-text);
  background: var(--site-surface-solid);
}

/* Published Knowledge Base articles keep the same dark surface and contrast hierarchy. */
html[data-site-theme="dark"] body:has(#kbSearch) {
  --page-bg: var(--site-bg);
  --panel-bg: var(--site-surface-solid);
  --border: var(--site-border);
  --border-strong: color-mix(in srgb, var(--site-blue) 48%, var(--site-border));
  --text-primary: var(--site-text);
  --text-secondary: var(--site-muted);
  --text-muted: color-mix(in srgb, var(--site-muted) 82%, transparent);
  --pill-bg: var(--site-blue-soft);
  --pill-text: var(--site-blue);
  --cashout-bg: var(--site-green-soft);
  --cashout-text: var(--site-green);
  --link-bg: var(--site-amber-soft);
  --link-text: var(--site-gold);
  --logo-bg: var(--site-gold);
  --logo-text: #071321;
}

html[data-site-theme="dark"] body:has(#kbSearch) :is(
  .sidebar,
  .detail
) {
  border-color: var(--site-border);
  background: linear-gradient(
    180deg,
    rgba(9, 26, 45, .96),
    rgba(6, 20, 36, .96)
  );
  box-shadow: var(--site-shadow);
}

html[data-site-theme="dark"] body:has(#kbSearch) :is(
  .article-body .step-card,
  .article-body .response-template-card,
  .article-body .nested-rich-unit,
  .article-body .rule-card,
  .article-body .statement-card,
  .article-body .rich-table-wrapper
) {
  border-color: var(--site-border) !important;
  color: var(--site-text) !important;
  background: var(--site-surface-soft) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12) !important;
}

html[data-site-theme="dark"] body:has(#kbSearch) .article-body .callout-card {
  border-color: var(--site-border) !important;
  border-left-color: var(--site-gold) !important;
  color: var(--site-text) !important;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--site-gold) 9%, var(--site-surface-soft)),
    var(--site-surface-soft)
  ) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12) !important;
}

html[data-site-theme="dark"] body:has(#kbSearch) :is(
  .article-body .step-badge,
  .article-body .rule-number
) {
  border-color: color-mix(in srgb, var(--site-gold) 42%, transparent) !important;
  color: var(--site-gold) !important;
  background: var(--site-amber-soft) !important;
}

html[data-site-theme="dark"] body:has(#kbSearch) :is(
  .article-body .rich-table th,
  .article-body .rich-table td
) {
  border-color: var(--site-border) !important;
}

html[data-site-theme="dark"] body:has(#kbSearch) .article-body .rich-table th {
  color: var(--site-blue) !important;
  background: var(--site-blue-soft) !important;
}

html[data-site-theme="dark"] body:has(#kbSearch) .article-body .article-inline-link {
  color: var(--site-blue) !important;
  text-decoration-color: color-mix(in srgb, var(--site-blue) 55%, transparent) !important;
}

html[data-site-theme="dark"] body:has(#kbSearch) .back-to-top {
  border-color: color-mix(in srgb, var(--site-gold) 60%, var(--site-border));
  color: var(--site-gold);
  background: var(--site-surface-solid);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .24);
}

/* Payroll list rows should not fall back to white in the dark theme. */
html[data-site-theme="dark"] .payroll-period-row {
  border-color: var(--site-border);
  color: var(--site-text);
  background: var(--site-surface-soft);
}

html[data-site-theme="dark"] .payroll-period-row:hover {
  border-color: color-mix(in srgb, var(--site-blue) 48%, var(--site-border));
  background: color-mix(in srgb, var(--site-blue) 8%, var(--site-surface-soft));
}

html[data-site-theme="dark"] .payroll-period-row strong {
  color: var(--site-heading);
}

html[data-site-theme="dark"] :is(
  .payroll-period-row small,
  .payroll-period-meta span
) {
  color: var(--site-muted);
}

/* Shared semantic highlights: active, success, attention, and exception. */
html[data-site-theme="dark"] :is(
  .wf-badge:not(.success):not(.warning):not(.danger):not(.muted),
  .team-update-category,
  .celebration-kind,
  .event-type,
  .payroll-currency-pill,
  .payroll-count-pill
) {
  border-color: color-mix(in srgb, var(--site-blue) 34%, transparent);
  color: var(--site-blue);
  background: var(--site-blue-soft);
}

html[data-site-theme="dark"] :is(
  .wf-badge.success,
  .event-type.training,
  .celebration-kind.anniversary,
  .payroll-status-badge.finalized,
  .payroll-readiness-badge.ready,
  .team-attendance-record .wf-badge.completed
) {
  border-color: color-mix(in srgb, var(--site-green) 30%, transparent);
  color: var(--site-green);
  background: var(--site-green-soft);
}

html[data-site-theme="dark"] :is(
  .wf-badge.warning,
  .event-type.holiday,
  .payroll-status-badge.draft,
  .team-attendance-record .wf-badge.overtime
) {
  border-color: color-mix(in srgb, var(--site-gold) 30%, transparent);
  color: var(--site-gold);
  background: var(--site-amber-soft);
}

html[data-site-theme="dark"] :is(
  .wf-badge.danger,
  .event-type.deadline,
  .payroll-status-badge.reopened,
  .payroll-status-badge.void,
  .team-attendance-record .wf-badge.needs-review
) {
  border-color: color-mix(in srgb, var(--site-red) 30%, transparent);
  color: var(--site-red);
  background: var(--site-red-soft);
}

html[data-site-theme="dark"] .wf-badge.muted {
  border-color: var(--site-border);
  color: var(--site-muted);
  background: var(--site-neutral-soft);
}

/* Home calendar mirrors Attendance Control's restrained row highlights. */
html[data-site-theme="dark"] .calendar-day {
  color: var(--site-text);
  transition:
    color .14s ease,
    background-color .14s ease,
    box-shadow .14s ease;
}

html[data-site-theme="dark"] .calendar-day:hover:not(.muted):not(.today) {
  color: var(--site-blue);
  background: var(--site-blue-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--site-blue) 22%, transparent);
}

html[data-site-theme="dark"] .calendar-day.today {
  color: var(--site-heading);
  background: color-mix(in srgb, var(--site-blue) 16%, var(--site-surface-soft));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--site-blue) 62%, transparent),
    0 0 16px color-mix(in srgb, var(--site-blue) 10%, transparent);
}

html[data-site-theme="dark"] .calendar-day.has-event:not(.today) {
  background: var(--site-blue-soft);
}

html[data-site-theme="dark"] .calendar-day.training:not(.today) {
  background: var(--site-green-soft);
}

html[data-site-theme="dark"] .calendar-day.deadline:not(.today) {
  background: var(--site-red-soft);
}

html[data-site-theme="dark"] .calendar-day.has-work-schedule:not(.today) {
  background: var(--site-amber-soft);
}

html[data-site-theme="dark"] .calendar-day.work-shift:not(.today) {
  color: var(--site-blue);
  background: var(--site-blue-soft);
}

html[data-site-theme="dark"] .calendar-day.work-holiday:not(.today) {
  color: var(--site-gold);
  background: var(--site-amber-soft);
}

html[data-site-theme="dark"] .calendar-day.work-rest-day:not(.today) {
  color: var(--site-muted);
  background: var(--site-neutral-soft);
}

html[data-site-theme="dark"] .calendar-day.work-leave:not(.today) {
  color: var(--site-blue);
  background: color-mix(in srgb, var(--site-blue-soft) 72%, var(--site-surface));
}

html[data-site-theme="dark"] .calendar-day.work-absent:not(.today) {
  color: var(--site-red);
  background: var(--site-red-soft);
}

html[data-site-theme="dark"] .calendar-day.has-google-calendar-event:not(.today) {
  color: var(--site-blue);
  background: var(--site-blue-soft);
}

html[data-site-theme="dark"] .calendar-day.muted {
  color: color-mix(in srgb, var(--site-muted) 62%, transparent);
  background: transparent;
}

html[data-site-theme="dark"] .calendar-day.has-event::after,
html[data-site-theme="dark"] .calendar-day.has-google-calendar-event::before {
  background: var(--site-blue);
}

html[data-site-theme="dark"] .calendar-day.has-work-schedule::before {
  background: var(--site-gold);
}

html[data-site-theme="dark"] .calendar-day.training::after {
  background: var(--site-green);
}

html[data-site-theme="dark"] .calendar-day.deadline::after {
  background: var(--site-red);
}

html[data-site-theme="dark"] .calendar-day.today::before,
html[data-site-theme="dark"] .calendar-day.today::after {
  background: var(--site-heading);
}

html[data-site-theme="dark"] :is(
  .cal-nav button,
  .event-date-box,
  .celebration-date,
  .snap-pill
) {
  border-color: var(--site-border);
  color: var(--site-text);
  background: var(--site-surface-soft);
}

html[data-site-theme="dark"] .cal-nav button:hover {
  border-color: color-mix(in srgb, var(--site-blue) 42%, transparent);
  color: var(--site-blue);
  background: var(--site-blue-soft);
}

html[data-site-theme="dark"] .snap-cell.lead {
  background: var(--site-red-soft);
}

html[data-site-theme="dark"] .team-update-item:hover {
  background: var(--site-blue-soft);
}

html[data-site-theme="dark"] .todo-item input:checked + span {
  color: var(--site-green);
}

html[data-site-theme="dark"] .event-type.shift,
html[data-site-theme="dark"] .event-type.google-calendar {
  color: var(--site-blue);
  background: var(--site-blue-soft);
}

html[data-site-theme="dark"] .event-type.rest-day {
  color: var(--site-muted);
  background: var(--site-neutral-soft);
}

html[data-site-theme="dark"] .event-type.leave {
  color: var(--site-blue);
  background: var(--site-blue-soft);
}

html[data-site-theme="dark"] .event-type.absent {
  color: var(--site-red);
  background: var(--site-red-soft);
}

/* Workforce and Schedule Management dark highlights. */
html[data-site-theme="dark"] .wf-view-switcher {
  border: 0;
  background: transparent;
  box-shadow: none;
}

html[data-site-theme="dark"] .wf-view-switcher button {
  border-bottom-color: transparent !important;
  color: var(--site-muted) !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
}

html[data-site-theme="dark"] .wf-view-switcher button:not(.active) {
  border-bottom-color: transparent !important;
  color: var(--site-muted) !important;
}

html[data-site-theme="dark"] .wf-view-switcher button:not(.active):hover {
  border-bottom-color: transparent !important;
  color: var(--site-heading) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-site-theme="dark"] .wf-view-switcher button.active,
html[data-site-theme="dark"] .wf-view-switcher button.active:hover {
  border-bottom-color: var(--site-gold) !important;
  color: var(--site-heading) !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-site-theme="dark"] .wf-schedule-grid-table th {
  color: var(--site-blue);
  background: var(--site-surface-soft);
}

html[data-site-theme="dark"] .wf-schedule-grid-table th strong {
  color: var(--site-heading);
}

html[data-site-theme="dark"] .wf-schedule-grid-table th span {
  color: var(--site-blue);
}

html[data-site-theme="dark"] .wf-range-bar strong {
  color: var(--site-heading);
}

html[data-site-theme="dark"] .wf-grid-user strong {
  color: var(--site-heading);
}

html[data-site-theme="dark"] .wf-grid-user span {
  color: var(--site-muted);
}

html[data-site-theme] .wf-schedule-chip.open {
  border-color: color-mix(in srgb, var(--site-blue) 34%, var(--site-border));
  border-left: 3px solid var(--site-blue);
  background: color-mix(in srgb, var(--site-blue) 10%, var(--site-surface-solid));
}

html[data-site-theme] .wf-schedule-chip.open .wf-chip-main {
  color: var(--site-blue);
}

html[data-site-theme] .wf-schedule-chip.open .wf-chip-main small {
  color: var(--site-muted);
  opacity: 1;
}

html[data-site-theme="dark"] .wf-schedule-chip {
  border: 1px solid var(--site-border);
  box-shadow: none;
}

html[data-site-theme="dark"] .wf-schedule-chip.shift {
  border-color: color-mix(in srgb, var(--site-blue) 24%, var(--site-border));
  border-left: 3px solid var(--site-blue);
  background: var(--site-blue-soft);
}

html[data-site-theme="dark"] .wf-schedule-chip.rest {
  border-color: var(--site-border);
  border-left: 3px solid var(--site-muted);
  background: var(--site-neutral-soft);
}

html[data-site-theme="dark"] .wf-schedule-chip.leave {
  border-color: color-mix(in srgb, var(--site-blue) 24%, var(--site-border));
  border-left: 3px solid var(--site-blue);
  background: var(--site-blue-soft);
}

html[data-site-theme="dark"] .wf-schedule-chip.absent {
  border-color: color-mix(in srgb, var(--site-red) 24%, var(--site-border));
  border-left: 3px solid var(--site-red);
  background: var(--site-red-soft);
}

html[data-site-theme="dark"] .wf-schedule-chip.holiday {
  border-color: color-mix(in srgb, var(--site-gold) 24%, var(--site-border));
  border-left: 3px solid var(--site-gold);
  background: var(--site-amber-soft);
}

html[data-site-theme="dark"] .wf-schedule-chip.empty {
  border-color: transparent;
  border-left: 3px dashed color-mix(in srgb, var(--site-muted) 62%, transparent);
  color: var(--site-muted);
  background: transparent;
}

html[data-site-theme="dark"] .wf-schedule-chip:not(.empty):hover {
  border-color: color-mix(in srgb, var(--site-blue) 52%, var(--site-border));
  filter: brightness(1.08);
}

html[data-site-theme="dark"] .wf-chip-main {
  color: var(--site-heading);
}

html[data-site-theme="dark"] .wf-chip-main small {
  color: var(--site-muted);
  opacity: 1;
}

html[data-site-theme="dark"] .wf-chip-delete {
  color: var(--site-red);
}

html[data-site-theme="dark"] .wf-schedule-chip::after,
html[data-site-theme="dark"] .wf-schedule-legend .published {
  background: var(--site-green);
}

html[data-site-theme="dark"] .wf-schedule-chip.draft::after,
html[data-site-theme="dark"] .wf-schedule-legend .draft {
  background: var(--site-gold);
}

html[data-site-theme="dark"] .wf-schedule-legend {
  color: var(--site-muted);
}

html[data-site-theme="dark"] .wf-schedule-legend .shift {
  border-left-color: var(--site-blue);
  background: var(--site-blue-soft);
}

html[data-site-theme="dark"] .wf-schedule-legend .rest {
  border-left-color: var(--site-muted);
  background: var(--site-neutral-soft);
}

html[data-site-theme="dark"] .wf-schedule-legend .holiday {
  border-left-color: var(--site-gold);
  background: var(--site-amber-soft);
}

html[data-site-theme="dark"] .wf-stat-icon.violet {
  color: var(--site-blue);
  background: var(--site-blue-soft);
}

html[data-site-theme="dark"] .wf-stat-icon.mint {
  color: var(--site-green);
  background: var(--site-green-soft);
}

html[data-site-theme="dark"] .wf-stat-icon.gold {
  color: var(--site-gold);
  background: var(--site-amber-soft);
}

html[data-site-theme="dark"] .wf-stat-icon.coral {
  color: var(--site-red);
  background: var(--site-red-soft);
}

html[data-site-theme="dark"] :is(
  .wf-summary strong,
  .wf-stat-copy > strong,
  .wf-user-cell strong,
  .wf-permission-cell strong
) {
  color: var(--site-heading);
}

html[data-site-theme="dark"] :is(
  .wf-summary span,
  .wf-stat-copy > span,
  .wf-card-header .wf-message,
  .wf-field > span,
  .wf-field-label,
  .wf-user-cell small,
  .wf-profile-panel-foot > .wf-message,
  .wf-table-pagination > span
) {
  color: var(--site-muted);
}

html[data-site-theme="dark"] .wf-team-cell {
  color: var(--site-text);
}

html[data-site-theme="dark"] .wf-permission-cell {
  color: var(--site-muted);
}

html[data-site-theme="dark"] .wf-team-cell i.palette-0 {
  background: var(--site-gold);
}

html[data-site-theme="dark"] .wf-team-cell i.palette-1 {
  background: var(--site-blue);
}

html[data-site-theme="dark"] .wf-team-cell i.palette-2 {
  background: var(--site-green);
}

html[data-site-theme="dark"] .wf-team-cell.unassigned i {
  background: var(--site-red);
}

html[data-site-theme="dark"] #refreshEmployeesButton {
  border-color: var(--site-border);
  color: var(--site-heading);
  background: var(--site-surface-solid);
}

html[data-site-theme="dark"] :is(
  .wf-kebab,
  .wf-action-menu
) {
  border-color: var(--site-border);
  color: var(--site-text);
  background: var(--site-surface-solid);
}

html[data-site-theme="dark"] .wf-action-menu button {
  color: var(--site-text);
}

html[data-site-theme="dark"] .wf-action-menu button:hover {
  color: var(--site-blue);
  background: var(--site-blue-soft);
}

html[data-site-theme="dark"] :is(
  .wf-schedule-summary,
  .wf-control:disabled,
  .wf-control[readonly],
  .dashboard-loading-content
) {
  color: var(--site-muted);
  background: var(--site-surface-soft);
}

html[data-site-theme] .side,
html[data-site-theme] .home-sidebar {
  color: var(--site-sidebar-text);
  background:
    radial-gradient(circle at 18% 5%, color-mix(in srgb, var(--site-gold) 14%, transparent), transparent 13rem),
    var(--site-sidebar);
}

html[data-site-theme] .brand-mark,
html[data-site-theme] .avatar {
  color: var(--site-sidebar);
  background: var(--site-gold);
}

html[data-site-theme] .side-foot {
  position: relative;
}

.site-settings-button {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  margin-left: auto;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  color: rgba(255, 255, 255, .72);
  background: transparent;
  cursor: pointer;
}

.site-settings-button:hover,
.site-settings-button[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--site-gold) 58%, transparent);
  color: var(--site-gold);
  background: rgba(255, 255, 255, .06);
}

.site-settings-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-settings-menu {
  position: absolute;
  z-index: 80;
  right: auto;
  bottom: 44px;
  left: 0;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--site-border);
  border-radius: 12px;
  color: var(--site-text);
  background: var(--site-surface-solid);
  box-shadow: var(--site-shadow);
}

.site-settings-menu[hidden] {
  display: none;
}

.site-settings-menu strong,
.site-settings-menu small {
  display: block;
}

.site-settings-menu strong {
  color: var(--site-heading);
  font-size: 12px;
}

.site-settings-menu small {
  margin-top: 3px;
  color: var(--site-muted);
  font-size: 10px;
}

.site-theme-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: 10px;
  padding: 4px;
  border-radius: 9px;
  background: var(--site-surface-soft);
}

.site-theme-choice {
  min-height: 32px;
  padding: 5px 7px;
  border: 0;
  border-radius: 7px;
  color: var(--site-muted);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.site-theme-choice.active {
  color: var(--site-heading);
  background: var(--site-surface-solid);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

.site-settings-account {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--site-border);
}

.site-settings-action {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border-radius: 8px;
  color: var(--site-text);
  text-decoration: none;
  transition: color .16s ease, background-color .16s ease;
}

.site-settings-action:hover {
  color: var(--site-heading);
  background: var(--site-blue-soft);
}

.site-settings-action-icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 8px;
  color: var(--site-gold);
  background: var(--site-amber-soft);
}

.site-settings-action-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-settings-action strong {
  font-size: 11px;
}

.site-settings-action small {
  font-size: 9.5px;
}

.home-layout.sidebar-collapsed .who > span:nth-child(2) {
  display: none;
}

.home-layout.sidebar-collapsed .who {
  flex-direction: column;
}

.home-layout.sidebar-collapsed .site-settings-button {
  margin-left: 0;
}

.home-layout.sidebar-collapsed .site-settings-menu {
  right: auto;
  bottom: 0;
  left: calc(100% + 8px);
  width: 224px;
}

html[data-site-theme="dark"] .home-timezone-popover,
html[data-site-theme="dark"] .announcement-dialog {
  border-color: var(--site-border);
  color: var(--site-text);
  background: var(--site-surface-solid);
}

/* Change Password follows the Attendance Control dark contrast hierarchy. */
html[data-site-theme="dark"] body:has(.password-card) {
  --card-bg: var(--site-surface-solid);
  --border: var(--site-border);
  --border-strong: var(--site-blue);
  --text-primary: var(--site-text);
  --text-secondary: var(--site-muted);
  --text-muted: color-mix(in srgb, var(--site-muted) 86%, transparent);
  --banner-bg: var(--site-amber-soft);
  --banner-border: color-mix(in srgb, var(--site-gold) 38%, transparent);
  --banner-text: var(--site-heading);
  --link: var(--site-blue);
  --danger: var(--site-red);
  --warning: var(--site-gold);
  --success: var(--site-green);
  --button-bg: var(--site-gold);
  --button-hover: color-mix(in srgb, var(--site-gold) 84%, #fff);
  --button-text: #071321;
}

html[data-site-theme="dark"] body:has(.password-card) .password-card {
  border-color: var(--site-border);
  color: var(--site-text);
  background: linear-gradient(
    180deg,
    rgba(9, 26, 45, .98),
    rgba(6, 20, 36, .98)
  );
  box-shadow: var(--site-shadow);
}

html[data-site-theme="dark"] body:has(.password-card) .mode-banner {
  border-color: color-mix(in srgb, var(--site-gold) 38%, transparent);
  color: var(--site-heading);
  background: var(--site-amber-soft);
}

html[data-site-theme="dark"] body:has(.password-card) :is(
  input[type="password"],
  input[type="text"]
) {
  border-color: var(--site-border);
  color: var(--site-text);
  background: var(--site-bg-deep);
}

html[data-site-theme="dark"] body:has(.password-card) :is(
  input[type="password"],
  input[type="text"]
):focus {
  border-color: var(--site-blue);
  box-shadow: 0 0 0 3px var(--site-focus);
}

html[data-site-theme="dark"] body:has(.password-card) .icon-button {
  color: var(--site-muted);
  background: transparent;
  box-shadow: none;
}

html[data-site-theme="dark"] body:has(.password-card) .icon-button:hover {
  color: var(--site-blue);
  background: var(--site-blue-soft);
}

html[data-site-theme="dark"] body:has(.password-card) .submit-button {
  border: 1px solid var(--site-gold);
  color: #071321;
  background: var(--site-gold);
  box-shadow: none;
}

html[data-site-theme="dark"] body:has(.password-card) .submit-button:hover:not(:disabled) {
  color: #071321;
  background: color-mix(in srgb, var(--site-gold) 84%, #fff);
}

html[data-site-theme="dark"] body:has(.password-card) .back-link {
  border: 0;
  color: var(--site-muted);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

html[data-site-theme="dark"] body:has(.password-card) .back-link a {
  color: var(--site-blue);
}

@media (prefers-reduced-motion: reduce) {
  html[data-site-theme] body {
    transition: none;
  }
}

@media (max-width: 720px) {
  .home-layout.sidebar-collapsed .who {
    flex-direction: row;
  }

  .home-layout.sidebar-collapsed .site-settings-button {
    margin-left: auto;
  }

  .home-layout.sidebar-collapsed .site-settings-menu {
    right: 0;
    bottom: 44px;
    left: auto;
  }
}