/* Authenticated-only appearance theme. Login, signup, recovery, and setup remain light. */
/* Shared record-list footers and their page-size picker use the same theme
   attribute as the shell, including lists replaced during pagination. */
html[data-theme="dark"] .page:not(.login-only-layout) .pagination-records-footer {
    color: var(--text);
    border-color: var(--border);
    background: var(--soft);
}

html[data-theme="dark"] .page:not(.login-only-layout) .pagination-size-form {
    color: var(--muted);
}

html[data-theme="dark"] .page:not(.login-only-layout) .pagination-size-label {
    color: var(--text);
}

html[data-theme="dark"] .page:not(.login-only-layout) .pagination-size-picker > summary,
html[data-theme="dark"] .page:not(.login-only-layout) .pagination-size-form select {
    color: var(--text);
    border-color: var(--border-strong);
    background-color: var(--surface);
    color-scheme: dark;
}

html[data-theme="dark"] .page:not(.login-only-layout) .pagination-size-picker > summary::after {
    border-color: var(--muted);
}

html[data-theme="dark"] .page:not(.login-only-layout) .pagination-size-form select {
    background-image: linear-gradient(45deg, transparent 50%, #a8bac3 50%),
                      linear-gradient(135deg, #a8bac3 50%, transparent 50%);
}

html[data-theme="dark"] .page:not(.login-only-layout) .pagination-size-picker-menu,
html[data-theme="dark"] .page:not(.login-only-layout) .pagination-size-form select option {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--surface);
}

html[data-theme="dark"] .page:not(.login-only-layout) .pagination-size-picker-menu button {
    color: var(--text);
    background: transparent;
}

html[data-theme="dark"] .page:not(.login-only-layout) .pagination-size-picker > summary:hover,
html[data-theme="dark"] .page:not(.login-only-layout) .pagination-size-picker[open] > summary,
html[data-theme="dark"] .page:not(.login-only-layout) .pagination-size-form select:hover,
html[data-theme="dark"] .page:not(.login-only-layout) .pagination-size-picker-menu button:hover {
    color: #99eee5;
    border-color: var(--primary);
    background-color: var(--teal-soft);
}

html[data-theme="dark"] .page:not(.login-only-layout) .pagination-size-picker-menu button.is-selected {
    color: #0b1318;
    background: var(--primary);
}

html[data-theme="dark"] .page:not(.login-only-layout) .pagination-size-picker > summary:focus-visible,
html[data-theme="dark"] .page:not(.login-only-layout) .pagination-size-picker-menu button:focus-visible,
html[data-theme="dark"] .page:not(.login-only-layout) .pagination-size-form select:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

html[data-theme="dark"] .page:not(.login-only-layout) {
    --text: #e7f0f3;
    --muted: #a8bac3;
    --border: #2c414c;
    --border-strong: #435d69;
    --surface: #132229;
    --page: #0b1318;
    --soft: #17272f;
    --teal-soft: #173a35;
    --teal-selected: #1d4d46;
    --icon: #b6c6cd;
    --icon-hover: #ffffff;
    --primary: #42c9bb;
    --primary-hover: #68ddd2;
    --primary-pressed: #2eaa9f;
    --hris-page-bg: #0b1318;
    --hris-sidebar-bg: #0e1a20;
    --hris-surface: #132229;
    --hris-surface-muted: #17272f;
    --hris-border: #2c414c;
    --hris-border-strong: #435d69;
    --hris-text: #e7f0f3;
    --hris-text-muted: #a8bac3;
    --hris-primary-soft: #173a35;
    color: var(--text);
    background: var(--page);
}

html[data-theme="dark"] .page:not(.login-only-layout) main,
html[data-theme="dark"] .page:not(.login-only-layout) .content {
    color: var(--text);
    background: var(--page);
}

html[data-theme="dark"] .page:not(.login-only-layout) :where(h1, h2, h3, h4, h5, h6, legend, label, strong) {
    color: #f3f8fa;
}

html[data-theme="dark"] .page:not(.login-only-layout) :where(p, small, .text-muted, .form-text, .help-text, .subtitle, .description) {
    color: var(--muted);
}

/* Theme control beside notifications. */
.account-notification-area {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.theme-toggle {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    flex: 0 0 50px;
    padding: 0;
    color: #475569;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
    cursor: pointer;
}

.theme-toggle:hover {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 46%, var(--border));
    background: var(--teal-soft);
}

.theme-toggle:focus-visible {
    color: var(--primary);
    outline: 3px solid color-mix(in srgb, var(--primary) 36%, transparent);
    outline-offset: 3px;
}

.theme-toggle-icon { display: none; width: 1.38rem; height: 1.38rem; }
.theme-toggle-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.theme-toggle[data-mode="light"] .theme-toggle-icon-moon,
.theme-toggle[data-mode="dark"] .theme-toggle-icon-sun { display: block; }

.employee-mobile-theme-toggle {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    box-shadow: none;
}

html[data-theme="dark"] .page:not(.login-only-layout) .theme-toggle {
    color: #c7d5da;
    border-color: #36505b;
    background: #14242b;
    box-shadow: none;
}
html[data-theme="dark"] .page:not(.login-only-layout) .theme-toggle[data-mode="dark"] .theme-toggle-icon-sun,
html[data-theme="dark"] .page:not(.login-only-layout) .theme-toggle[data-mode="light"] .theme-toggle-icon-moon {
    display: block !important;
    color: #e8f4f6 !important;
    opacity: 1 !important;
    visibility: visible !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .theme-toggle .theme-toggle-icon svg,
html[data-theme="dark"] .page:not(.login-only-layout) .theme-toggle .theme-toggle-icon :where(path, circle) {
    display: block !important;
    fill: none !important;
    stroke: #e8f4f6 !important;
    stroke-width: 2 !important;
    opacity: 1 !important;
    visibility: visible !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .theme-toggle:hover .theme-toggle-icon :where(path, circle),
html[data-theme="dark"] .page:not(.login-only-layout) .theme-toggle:focus-visible .theme-toggle-icon :where(path, circle) {
    stroke: #74e2d7 !important;
}

/* Authenticated shell. */
html[data-theme="dark"] .page:not(.login-only-layout) .sidebar,
html[data-theme="dark"] .page:not(.login-only-layout) .brand-panel,
html[data-theme="dark"] .page:not(.login-only-layout) .nav-scrollable {
    color: var(--text);
    border-color: var(--border);
    background: #0e1a20;
}

html[data-theme="dark"] .page:not(.login-only-layout) .top-row {
    color: var(--text);
    border-bottom-color: var(--border);
    background: rgba(14, 26, 32, .95);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
}

html[data-theme="dark"] .page:not(.login-only-layout) :where(.system-title strong, .brand-name, .account-identity strong) { color: #f7fbfc; }
html[data-theme="dark"] .page:not(.login-only-layout) :where(.system-title span, .account-identity small, .nav-section-title, .nav-cos-break) { color: #9fb2bb; }

html[data-theme="dark"] .page:not(.login-only-layout) :where(.nav-link, .nav-submenu-link, .nav-reports-toggle, .sidebar-lock-button) { color: #c2d0d6; }
html[data-theme="dark"] .page:not(.login-only-layout) :where(.nav-link, .nav-submenu-link, .nav-reports-toggle):hover {
    color: #84e6dc;
    background: #16342f;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.nav-link.active, .nav-submenu-link.active) {
    color: #91ece3;
    background: linear-gradient(135deg, #18423c, #132d2a);
    box-shadow: inset 3px 0 0 #43c9bc;
}

html[data-theme="dark"] .page:not(.login-only-layout) .nav-reports-group[open] {
    border-color: #304852;
    background: #132229;
}
html[data-theme="dark"] .page:not(.login-only-layout) .nav-reports-group[open] > .nav-reports-toggle {
    color: #eef5f7;
    background: #172a31;
    box-shadow: inset 3px 0 0 #43c9bc;
}
html[data-theme="dark"] .page:not(.login-only-layout) .nav-reports-group[open] .nav-submenu {
    border-left-color: #3b535e;
}
html[data-theme="dark"] .page:not(.login-only-layout) .nav-reports-group[open] .nav-submenu-link {
    color: #9fb2bb;
}
html[data-theme="dark"] .page:not(.login-only-layout) .nav-reports-group[open] .nav-submenu-link:hover {
    color: #dff8f5;
    background: #193832;
}
html[data-theme="dark"] .page:not(.login-only-layout) .nav-reports-group[open] .nav-submenu-link.active {
    color: #99eee5;
    background: #173f39;
}

html[data-theme="dark"] .page:not(.login-only-layout) :where(.notification-button, .account-menu summary, .employee-mobile-header-button) {
    color: #c8d6dc;
    border-color: var(--border);
    background: var(--surface);
    box-shadow: none;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.notification-button, .account-menu summary):hover {
    color: #83e4da;
    background: #173a35;
}

html[data-theme="dark"] .page:not(.login-only-layout) :is(
    .notification-panel, .account-menu-panel, .dropdown-menu, .popover,
    .filter-panel, .search-panel, .smooth-select-menu, .dashboard-select-menu
) {
    color: var(--text);
    border-color: var(--border);
    background: #17272f;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .48);
}

html[data-theme="dark"] .page:not(.login-only-layout) :where(.notification-panel header strong, .notification-item strong, .notification-empty strong) { color: #f3f8fa; }
html[data-theme="dark"] .page:not(.login-only-layout) .notification-panel header { border-color: var(--border); }
html[data-theme="dark"] .page:not(.login-only-layout) .notification-item {
    color: var(--text);
    border-color: var(--border);
    background: #132229;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.notification-item:hover, .notification-item:focus-visible, .notification-item.is-unread) {
    border-color: #3d8179;
    background: #173630;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.notification-item span, .notification-item small, .notification-empty) { color: var(--muted); }
html[data-theme="dark"] .page:not(.login-only-layout) .notification-badge { border-color: var(--surface); }

/* Shared application surfaces. */
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .card, .panel, .content-panel, .form-panel, .report-panel, .table-panel,
    .employee-card, .profile-card, .settings-card, .dashboard-panel, .modal-content,
    .employee-edit-modal-panel, .hr-tools-dialog, .reference-modal-panel,
    .organization-department-chart-panel, .pwa-install-notice, dialog
) {
    color: var(--text);
    border-color: var(--border);
    background-color: var(--surface);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .2);
}

html[data-theme="dark"] .page:not(.login-only-layout) .print-list-lock-status {
    color: #9aeee6;
    border-color: #3d8179;
    background: #173630;
}

html[data-theme="dark"] .page:not(.login-only-layout) .step-list-print-toolbar .print-list-unlock-button {
    color: #fcd68a;
    border-color: #9a6823;
    background: #3b2a12;
}

html[data-theme="dark"] .page:not(.login-only-layout) .record-action-confirmation-panel {
    color: var(--text);
    border-color: var(--border);
    background: var(--surface);
    box-shadow: 0 24px 55px rgba(0, 0, 0, .5);
}

html[data-theme="dark"] .page:not(.login-only-layout) .record-action-confirmation-copy h2,
html[data-theme="dark"] .page:not(.login-only-layout) .record-action-password {
    color: var(--text);
}

html[data-theme="dark"] .page:not(.login-only-layout) .record-action-confirmation-copy p {
    color: var(--muted);
}

/* Employee profile: this page owns a light-only palette in app.css, so reset
   its surfaces and text explicitly while preserving the light theme. */
html[data-theme="dark"] .page:not(.login-only-layout) .employee-profile-shell {
    --profile-ink: #edf5f7;
    --profile-muted: #9fb2bb;
    --profile-line: #2c414c;
    --profile-card: #132229;
    color: var(--profile-ink);
    border-color: #2c414c;
    background: #0b1318;
}

html[data-theme="dark"] .page:not(.login-only-layout) .employee-profile-breadcrumb {
    color: #9fb2bb;
    border: 1px solid #2c414c;
    background: #132229;
}

html[data-theme="dark"] .page:not(.login-only-layout) .employee-profile-breadcrumb a {
    color: #9fded8;
}

html[data-theme="dark"] .page:not(.login-only-layout) .employee-profile-breadcrumb strong {
    color: #edf5f7;
}

html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .employee-profile-tools button,
    .employee-profile-panel-heading a,
    .employee-profile-edit-button,
    .employee-photo-modal-close
) {
    color: #dce8ec;
    border-color: #3a515c;
    background: #17272f;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .page:not(.login-only-layout) .employee-profile-password-reset-button {
    color: #9aeee6 !important;
    border-color: #3d8179 !important;
    background: #173630 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .employee-profile-tabs :where(a, button) {
    color: #aebfc6;
}

html[data-theme="dark"] .page:not(.login-only-layout) .employee-profile-tabs :where(a, button):hover,
html[data-theme="dark"] .page:not(.login-only-layout) .employee-profile-tabs :where(a, button):focus-visible {
    color: #ffffff;
    background: #17272f;
}

html[data-theme="dark"] .page:not(.login-only-layout) .employee-profile-tabs :where(a.is-active, button.is-active) {
    color: #ffffff;
    background: #18332f;
}

html[data-theme="dark"] .page:not(.login-only-layout) .employee-profile-card,
html[data-theme="dark"] .page:not(.login-only-layout) .employee-profile-shell .employee-profile-panel {
    color: #e7f0f3;
    border-color: #2c414c;
    background: #132229;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .26);
}

html[data-theme="dark"] .page:not(.login-only-layout) .employee-profile-cover {
    background:
        radial-gradient(circle at 24% 10%, rgba(92, 139, 145, .22), transparent 30%),
        repeating-linear-gradient(118deg, rgba(255, 255, 255, .035) 0 12px, rgba(0, 0, 0, .07) 12px 24px),
        linear-gradient(135deg, #1c3038, #203c3c);
}

html[data-theme="dark"] .page:not(.login-only-layout) .employee-profile-avatar,
html[data-theme="dark"] .page:not(.login-only-layout) .employee-profile-mini-avatar {
    border-color: #243942;
}

html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .employee-profile-name-row h1,
    .employee-profile-basic h2,
    .employee-profile-basic-item strong,
    .employee-profile-panel-heading h2,
    .employee-profile-table dt,
    .employee-profile-table dd
) {
    color: #edf5f7;
}

html[data-theme="dark"] .page:not(.login-only-layout) .employee-profile-basic-item small {
    color: #9fb2bb;
}

html[data-theme="dark"] .page:not(.login-only-layout) .employee-profile-basic-icon {
    background: #1b3038;
    box-shadow: inset 0 0 0 1px #344c57;
}

html[data-theme="dark"] .page:not(.login-only-layout) .employee-profile-table div,
html[data-theme="dark"] .page:not(.login-only-layout) .employee-profile-empty-state,
html[data-theme="dark"] .page:not(.login-only-layout) .employee-profile-history-wrap {
    border-color: #2c414c;
}

html[data-theme="dark"] .page:not(.login-only-layout) .employee-profile-empty-state {
    color: #a8bac3;
}

html[data-theme="dark"] .page:not(.login-only-layout) .employee-payslip-summary div,
html[data-theme="dark"] .page:not(.login-only-layout) .employee-payslip-year {
    color: #e7f0f3;
    border-color: #344c57;
    background: #101e25;
}

html[data-theme="dark"] .page:not(.login-only-layout) .employee-payslip-summary span {
    color: #a8bac3;
}

html[data-theme="dark"] .page:not(.login-only-layout) .employee-payslip-summary strong {
    color: #f3f8fa;
}

html[data-theme="dark"] .page:not(.login-only-layout) .employee-payslip-summary .net-pay {
    border-color: #3d8179;
    background: #173630;
}

html[data-theme="dark"] .page:not(.login-only-layout) .employee-payslip-year-toggle,
html[data-theme="dark"] .page:not(.login-only-layout) .employee-payslip-year[open] .employee-payslip-year-toggle {
    color: #dce8ec;
    border-color: #344c57;
    background: #17272f;
}

html[data-theme="dark"] .page:not(.login-only-layout) .employee-payslip-year-toggle:hover,
html[data-theme="dark"] .page:not(.login-only-layout) .employee-payslip-year-toggle:focus-visible {
    background: #193832;
}

html[data-theme="dark"] .page:not(.login-only-layout) .employee-payslip-month-link {
    color: #9dc1ff;
    border-color: #4f7fe1;
    background: #132229;
}

html[data-theme="dark"] .page:not(.login-only-layout) .employee-payslip-month-link.is-unavailable {
    color: #7f929b;
    border-color: #344c57;
    background: #101e25;
}

html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .employee-photo-modal-dialog,
    .employee-portal-password-dialog
) {
    color: #e7f0f3;
    border-color: #344c57;
    background: #132229;
}

html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .employee-photo-modal-dialog strong,
    .employee-portal-password-dialog h2,
    .employee-portal-password-value
) {
    color: #f3f8fa;
}

html[data-theme="dark"] .page:not(.login-only-layout) .employee-photo-modal-dialog span,
html[data-theme="dark"] .page:not(.login-only-layout) .employee-portal-password-help {
    color: #a8bac3;
}

html[data-theme="dark"] .page:not(.login-only-layout) .employee-portal-password-value {
    border-color: #3d8179;
    background: #0f1d24;
}

html[data-theme="dark"] .page:not(.login-only-layout) :where(
    input:not([type="checkbox"]):not([type="radio"]), select, textarea,
    .form-control, .form-select, .input-group-text
) {
    color: #e7f0f3;
    border-color: var(--border-strong);
    background-color: #0f1d24;
    caret-color: #ffffff;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(input, select, textarea, .form-control, .form-select):focus {
    color: #ffffff;
    border-color: #52d3c7;
    background-color: #102128;
    box-shadow: 0 0 0 .2rem rgba(82, 211, 199, .2);
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(input, textarea)::placeholder { color: #83969f; opacity: 1; }
html[data-theme="dark"] .page:not(.login-only-layout) option { color: #e7f0f3; background: #0f1d24; }
html[data-theme="dark"] .page:not(.login-only-layout) input[type="date"] { color-scheme: dark !important; }
html[data-theme="dark"] .page:not(.login-only-layout) :where(input[type="checkbox"], input[type="radio"]) { accent-color: #43c9bc; }
html[data-theme="dark"] .page:not(.login-only-layout) :where(input, select, textarea, button):disabled {
    color: #81939c;
    background-color: #1a2931;
    opacity: 1;
}

html[data-theme="dark"] .page:not(.login-only-layout) :where(table, .table) {
    --bs-table-color: #dce8ec;
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border);
    --bs-table-striped-color: #dce8ec;
    --bs-table-striped-bg: rgba(255,255,255,.025);
    --bs-table-hover-color: #ffffff;
    --bs-table-hover-bg: rgba(67,201,188,.08);
    color: #dce8ec;
    border-color: var(--border);
}

/* Print-list pages remain white paper in dark mode. Reset Bootstrap's dark
   table variables so ordinary rows and headers retain print-safe contrast. */
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .step-list-print-table,
    .loyalty-list-print-table
) {
    --bs-table-color: #111111;
    --bs-table-striped-color: #111111;
    --bs-table-hover-color: #111111;
    --bs-table-bg: transparent;
    color: #111111 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .step-list-print-table th,
    .step-list-print-table td,
    .loyalty-list-print-table th,
    .loyalty-list-print-table td
) {
    color: #111111 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .step-list-print-table tr.step-row-current-year td,
html[data-theme="dark"] .page:not(.login-only-layout) .loyalty-list-print-table tr.loyalty-row-current-year td {
    color: #1d4ed8 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .step-list-print-table tr.step-row-same-salary-grade td,
html[data-theme="dark"] .page:not(.login-only-layout) .loyalty-list-print-table tr.loyalty-row-not-budgeted td {
    color: #15803d !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .loyalty-list-print-table tr.loyalty-row-break-service td {
    color: #dc2626 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .step-list-print-table .maximum-step-note {
    color: #111111 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .step-list-print-page {
    color: #111111 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .step-list-print-page :where(
    .step-list-print-government,
    .step-list-print-government p,
    .step-list-print-government h3,
    .step-list-print-government h5,
    h2,
    h3,
    .loyalty-cutoff,
    .step-list-signatory p,
    .step-list-signatory strong,
    .step-list-signatory span,
    .loyalty-legend-title,
    .loyalty-color-legend li
) {
    color: #111111 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .step-list-print-page .step-list-signatory em {
    color: #dc2626 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .table-responsive,
html[data-theme="dark"] .page:not(.login-only-layout) .employee-records-table-wrap,
html[data-theme="dark"] .page:not(.login-only-layout) .service-records-table-wrap {
    color: #dce8ec;
    border-color: #344c57;
    background: #132229;
}

html[data-theme="dark"] .page:not(.login-only-layout) :where(thead, thead th, .table thead th) {
    color: #c6d6dc;
    border-color: var(--border-strong);
    background: #17272f;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(tbody tr, tbody td, .list-group-item) {
    color: #dce8ec;
    border-color: var(--border);
    background-color: #132229;
}
html[data-theme="dark"] .page:not(.login-only-layout) .table.dashboard-table tbody td,
html[data-theme="dark"] .page:not(.login-only-layout) .system-log-table tbody td,
html[data-theme="dark"] .page:not(.login-only-layout) .employee-profile-history-table tbody td {
    color: #dce8ec !important;
    border-bottom-color: #2c414c !important;
    background: #132229 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .table.dashboard-table tbody tr:nth-child(even) td,
html[data-theme="dark"] .page:not(.login-only-layout) .system-log-table tbody tr:nth-child(even) td,
html[data-theme="dark"] .page:not(.login-only-layout) .employee-profile-history-table tbody tr:nth-child(even) td {
    background: #101e25 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .table.dashboard-table tbody tr:hover td,
html[data-theme="dark"] .page:not(.login-only-layout) .system-log-table tbody tr:hover td,
html[data-theme="dark"] .page:not(.login-only-layout) .employee-profile-history-table tbody tr:hover td {
    color: #ffffff !important;
    background: #193832 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .dashboard-table :where(.employee-link, .employee-link strong, .position-text, td strong) {
    color: #e8f1f4 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .dashboard-table :where(td small, .employee-link + small) {
    color: #9fb2bb !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .dashboard-table .status-pill.active,
html[data-theme="dark"] .page:not(.login-only-layout) .dashboard-table .status-badge.active {
    color: #a9f3cb;
    border-color: #2d7550;
    background: #153c29;
}
html[data-theme="dark"] .page:not(.login-only-layout) .dashboard-table .action-button {
    color: #b9cad1;
    border-color: #4a626d;
    background: #17272f;
}
html[data-theme="dark"] .page:not(.login-only-layout) .dashboard-table .action-button:hover,
html[data-theme="dark"] .page:not(.login-only-layout) .dashboard-table .action-button:focus-visible {
    color: #ffffff;
    border-color: #5bd2c7;
    background: #1b403a;
}
html[data-theme="dark"] .page:not(.login-only-layout) .dashboard-table .action-button.disable {
    color: #ff9aa2;
    border-color: #72414a;
    background: #3a2026;
}

html[data-theme="dark"] .page:not(.login-only-layout) :where(.modal-backdrop, .hr-tools-modal, .employee-edit-modal, .reference-modal-backdrop) {
    background-color: rgba(0, 0, 0, .72);
}
html[data-theme="dark"] .page:not(.login-only-layout) .alert-success { color: #b7f2c9; border-color: #2e6944; background: #153625; }
html[data-theme="dark"] .page:not(.login-only-layout) .alert-warning { color: #ffe0a0; border-color: #735625; background: #3a2e17; }
html[data-theme="dark"] .page:not(.login-only-layout) .alert-danger { color: #ffc1c5; border-color: #78414a; background: #3b2025; }
html[data-theme="dark"] .page:not(.login-only-layout) .alert-info { color: #b9e8fb; border-color: #36677c; background: #173443; }

/* Dashboard cards, panels, charts, and graphs. */
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard {
    --dash-surface: #132229;
    --dash-panel: #17272f;
    --dash-border: #2d434e;
    --dash-text: #eef5f7;
    --dash-muted: #a8bac3;
    --dash-primary: #43c9bc;
    --dash-primary-dark: #31b3a7;
    --dash-soft: #173a35;
    color: #e7f0f3;
}

html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard :where(.summary-card, .dashboard-card) {
    color: #e7f0f3;
    border-color: var(--dash-border);
    background: var(--dash-surface);
    box-shadow: 0 7px 22px rgba(0, 0, 0, .2);
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .summary-card:hover {
    border-color: color-mix(in srgb, var(--summary-color, #43c9bc) 54%, #344c57);
    box-shadow: 0 12px 28px rgba(0,0,0,.3);
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .summary-total {
    color: #ffffff;
    border-color: #258f86;
    background: linear-gradient(145deg, #147d76, #0c5d59);
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .summary-cos {
    border-color: #39566b;
    background: #172733;
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard :where(.summary-label, .summary-card-note, .summary-percentage) { color: #b6c7ce; }
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard :where(.summary-card strong, .card-header h2) { color: #f7fbfc; }
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .summary-total :where(.summary-label, .summary-trend, strong) { color: #ffffff; }
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .summary-progress { background: #2a3d46; }

html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .card-header,
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .workforce-card .card-header {
    border-color: var(--dash-border);
    background: #17272f;
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .card-header p { color: var(--dash-muted); }

html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard :where(
    .modern-task-item, .gender-stat, .history-item, .recent-leave-table,
    .recent-leave-row, .employee-request-row, .empty-state
) {
    color: #dce8ec;
    border-color: var(--dash-border);
    background: #101e25;
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard :where(.modern-task-item:hover, .recent-leave-row:hover) {
    border-color: #3d8179;
    background: #17342f;
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard :where(.task-content p, .task-date, .gender-stat small, .recent-leave-row small, .employee-request-row small) { color: #a9bbc3; }
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard :where(.task-employee, .task-category, .gender-stat strong, .recent-leave-row strong, .employee-request-row strong) { color: #eef5f7; }
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .task-view-button {
    color: #dce8ec;
    border-color: var(--dash-border);
    background: #17272f;
}

html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard :where(
    .dashboard-filter-menu summary, .dashboard-select-button, .dashboard-native-select-button,
    .dashboard-filter-panel, .dashboard-native-select-menu
) {
    color: #dce8ec;
    border-color: var(--dash-border);
    background: #14242b;
    box-shadow: 0 12px 28px rgba(0,0,0,.32);
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard :where(.dashboard-filter-option, .dashboard-select-option) { color: #d4e1e5; background: transparent; }
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard :where(.dashboard-filter-option:hover, .dashboard-filter-option.is-selected, .dashboard-select-option:hover, .dashboard-select-option[aria-selected="true"]) {
    color: #96eee5;
    background: #1a403a;
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard :where(.dashboard-select-floating-label, .dashboard-filter-menu summary::before) {
    color: #a9bbc3;
    background: #14242b;
}

html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .recent-leave-head,
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .dashboard-table thead th {
    color: #c4d4da;
    border-color: var(--dash-border);
    background: #182a32;
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .dashboard-table :where(td, th) { border-color: var(--dash-border); }
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .dashboard-table tbody tr:hover td { color: #ffffff; background: #17342f; }

/* Appointment graph grid, axes, bars, legends, and tooltips. */
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .new-hired-plot {
    border-bottom-color: #49616c;
    background: linear-gradient(to top, #2a3d46 1px, transparent 1px) 0 0 / 100% 25%;
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard :where(.new-hired-y-axis, .month-labels, .chart-legend, .chart-legend span) { color: #b7c7ce; }
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .month-bar .regular { background: #4ac8f5; }
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .month-bar .casual { background: #fb923c; }

/* Gender donut remains vivid; its labels and hover details adapt for contrast. */
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .gender-pie-svg {
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.34));
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard :where(.gender-donut-total, .gender-donut-caption) { fill: #f5fafb; }
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .gender-pie-tooltip {
    color: #f3f8fa;
    border-color: #49616c;
    background: rgba(19, 34, 41, .97);
    box-shadow: 0 12px 28px rgba(0,0,0,.38);
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .gender-pie-legend { color: #d5e2e6; }

html[data-theme="dark"] .page:not(.login-only-layout) .saved-notification {
    color: #c9f7ef;
    border-color: #3e8179;
    background: #173630;
}

html[data-theme="dark"] .beta-welcome-dialog {
    color: #dbe7eb;
    border-color: #3a5660;
    background: #10242d;
}

html[data-theme="dark"] .beta-welcome-dialog h1 {
    color: #f1f7f8;
}

html[data-theme="dark"] .beta-welcome-dialog p {
    color: #b3c4cb;
}

html[data-theme="dark"] .beta-welcome-actions {
    border-color: #294550;
    background: #0d1f27;
}

/* Add Employee and employee-edit iframe surfaces. */
html.is-employee-editor-route[data-theme="dark"],
html.is-employee-editor-route[data-theme="dark"] body {
    color: #e7f0f3;
    background: #0b1318;
}

html[data-theme="dark"] body.is-embedded-edit,
html[data-theme="dark"] body.is-embedded-edit .page,
html[data-theme="dark"] body.is-embedded-edit .content {
    color: #e7f0f3;
    background: #0b1318;
}

html[data-theme="dark"] .employee-edit-modal {
    background: rgba(0, 0, 0, .74);
    backdrop-filter: blur(5px);
}
html[data-theme="dark"] .employee-edit-modal-panel,
html[data-theme="dark"] .employee-edit-modal-header,
html[data-theme="dark"] .employee-edit-tabs-shell,
html[data-theme="dark"] .employee-edit-modal-footer {
    color: #e7f0f3;
    border-color: #304852;
    background: #132229;
}
html[data-theme="dark"] .employee-edit-modal-panel { box-shadow: 0 30px 90px rgba(0,0,0,.58); }
html[data-theme="dark"] .employee-edit-modal-frame {
    color-scheme: dark;
    background: #0b1318;
}
html[data-theme="dark"] .employee-edit-modal-title,
html[data-theme="dark"] .employee-edit-modal-employee-name { color: #f3f8fa; }

html[data-theme="dark"] .page:not(.login-only-layout) :where(.employee-edit-tablist, .employee-edit-tab-panels) {
    border-color: #304852;
    background: #101e25;
}
html[data-theme="dark"] .page:not(.login-only-layout) .employee-edit-tab {
    color: #a8bac3;
    background: transparent;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.employee-edit-tab:hover, .employee-edit-tab:focus-visible) {
    color: #89e9df;
    background: #173a35;
}
html[data-theme="dark"] .page:not(.login-only-layout) .employee-edit-tab.is-active {
    color: #92ece3;
    background: #132229;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.edit-section, .employee-documents-empty-state) {
    color: #dce8ec;
    border-color: #304852;
    background: #132229;
    box-shadow: none;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.edit-section-heading h2, .employee-documents-empty-state h3) { color: #f3f8fa; }
html[data-theme="dark"] .page:not(.login-only-layout) :where(.edit-section-heading p, .edit-section-heading > span, .employee-documents-empty-state p, .employee-photo-file-name) { color: #9fb2bb; }

html[data-theme="dark"] .page:not(.login-only-layout) form[data-employee-edit-tabs] { color: #dce8ec; }
html[data-theme="dark"] .page:not(.login-only-layout) form[data-employee-edit-tabs] label > span:first-child,
html[data-theme="dark"] .page:not(.login-only-layout) .employee-edit-form label > span:first-child {
    color: #b8c9cf !important;
    background: #132229 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) form[data-employee-edit-tabs] label:focus-within > span:first-child,
html[data-theme="dark"] .page:not(.login-only-layout) form[data-employee-edit-tabs] label.has-floating-label > span:first-child,
html[data-theme="dark"] .page:not(.login-only-layout) form[data-employee-edit-tabs] label:has(.smooth-select-shell.is-open) > span:first-child {
    color: #7ee3d9 !important;
}

/* Retain entry-state label meaning in dark mode: saved/value, empty, and edited. */
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    form[data-employee-edit-tabs],
    .reference-department-popup-grid,
    .reference-position-popup-grid,
    .salary-annex-reference-grid,
    .cos-history-form-grid
) :is(label, .eligibility-field):not(.is-empty):not(.is-dirty):not(.is-required-invalid) > span:first-child {
    color: #5EEAD4 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) :is(
    form[data-employee-edit-tabs],
    .reference-department-popup-grid,
    .reference-position-popup-grid,
    .salary-annex-reference-grid,
    .cos-history-form-grid
) :is(label.is-empty, .eligibility-field.is-empty):not(.is-required-invalid) > span:first-child,
html[data-theme="dark"] .page:not(.login-only-layout) .cos-history-to-field.is-empty .cos-history-field-heading > label {
    color: #FDA4AF !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) :is(
    form[data-employee-edit-tabs],
    .reference-department-popup-grid,
    .reference-position-popup-grid,
    .salary-annex-reference-grid,
    .cos-history-form-grid
) :is(label.is-dirty, .eligibility-field.is-dirty):not(.is-required-invalid) > span:first-child,
html[data-theme="dark"] .page:not(.login-only-layout) .cos-history-to-field.is-dirty .cos-history-field-heading > label {
    color: #FACC15 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) :where(.smooth-select-button, .modern-date-control, .modern-date-display.form-control) {
    color: #e7f0f3;
    border-color: #435d69;
    background: #0f1d24;
    box-shadow: none;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.smooth-select-button:hover, .smooth-select-shell.is-open .smooth-select-button, .modern-date-control:hover, .modern-date-control.is-open, .modern-date-control.is-focused) {
    border-color: #52d3c7;
    background: #10252a;
    box-shadow: 0 0 0 .2rem rgba(82,211,199,.18);
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.smooth-select-menu, .modern-date-popover) {
    color: #dce8ec;
    border-color: #3d5662;
    background: #17272f;
    box-shadow: 0 20px 48px rgba(0,0,0,.48);
}
html[data-theme="dark"] .page:not(.login-only-layout) .smooth-select-option { color: #dce8ec; background: transparent; }
html[data-theme="dark"] .page:not(.login-only-layout) :where(.smooth-select-option:hover, .smooth-select-option.is-selected, .smooth-select-option[aria-selected="true"]) {
    color: #9aeee6;
    background: #1a403a;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.modern-date-trigger, .employee-photo-upload-button) {
    color: #b9cad1;
    border-color: #435d69;
    background: #17272f;
}

/* Add Position, Add Department, COS history, and other universal entry popups. */
html[data-theme="dark"] .page:not(.login-only-layout) :where(.reference-popup-backdrop, .fixed-modal-backdrop) {
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(4px);
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .reference-popup-panel, .universal-entry-modal, .fixed-modal-dialog,
    .psgc-dialog-panel, .loyalty-overrides-panel, .account-dialog-panel
) {
    color: #dce8ec;
    border-color: #304852;
    background: #132229;
    box-shadow: 0 28px 78px rgba(0,0,0,.52);
}
html[data-theme="dark"] .page:not(.login-only-layout) .universal-entry-modal .reference-popup-section {
    color: #dce8ec;
    border-color: #304852;
    background: #101e25;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .reference-popup-heading h2, .universal-entry-modal .modal-heading h2,
    .psgc-dialog-heading h3, .loyalty-overrides-heading h3, .account-dialog-heading h3
) { color: #62d9ce; }
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .reference-popup-heading p, .universal-entry-modal .modal-heading p,
    .psgc-dialog-heading p, .loyalty-overrides-heading p
) { color: #a8bac3; }
html[data-theme="dark"] .page:not(.login-only-layout) :where(.reference-popup-actions, .modal-actions, .psgc-dialog-actions, .account-dialog-actions) {
    border-color: #304852;
    background: #132229;
}
html[data-theme="dark"] .page:not(.login-only-layout) .reference-item-na-label {
    color: #98aab3;
    border-color: #3c5561;
    background: #1a2931;
}

/* Native Add User / Manage User dialogs. */
html[data-theme="dark"] .page:not(.login-only-layout) dialog::backdrop { background: rgba(0,0,0,.72); }
html[data-theme="dark"] .page:not(.login-only-layout) :where(.universal-entry-dialog, .system-user-dialog, .personnel-style-dialog, .add-system-user-dialog) {
    color: #dce8ec;
    border-color: #304852;
    background: #132229;
    box-shadow: 0 28px 78px rgba(0,0,0,.54);
}
html[data-theme="dark"] .page:not(.login-only-layout) .universal-entry-dialog :is(.system-user-dialog-heading, .personnel-style-dialog-heading) {
    border-bottom-color: #304852;
    background: #17272f;
}
html[data-theme="dark"] .page:not(.login-only-layout) .universal-entry-dialog :is(.system-user-dialog-heading, .personnel-style-dialog-heading) h3 { color: #62d9ce; }
html[data-theme="dark"] .page:not(.login-only-layout) .universal-entry-dialog :is(.system-user-dialog-heading, .personnel-style-dialog-heading) p { color: #a8bac3; }
html[data-theme="dark"] .page:not(.login-only-layout) .universal-entry-dialog :where(.universal-dialog-actions, .add-user-dialog-actions, .employee-search-form) {
    border-color: #304852;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.system-user-force-change, .add-user-form label, .employee-search-form label) { color: #cbd9de; }

/* Cancel buttons have legacy !important light colors, so override explicitly. */
html[data-theme="dark"] .page:not(.login-only-layout) .universal-cancel-button {
    color: #d5e2e6 !important;
    border-color: #4b6470 !important;
    background: #1a2b33 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .universal-cancel-button:hover,
html[data-theme="dark"] .page:not(.login-only-layout) .universal-cancel-button:focus-visible {
    color: #ffffff !important;
    border-color: #5bd2c7 !important;
    background: #1b403a !important;
}

/* Salary/add-annex editors and their sticky action area. */
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .salary-annex-editor-modal-panel, .salary-annex-editor-panel,
    .salary-annex-detail-panel, .salary-annex-list-panel,
    .salary-annex-reference-form, .salary-annex-active-status-box
) {
    color: #dce8ec;
    border-color: #304852;
    background: #132229;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.salary-annex-editor-backdrop, .salary-annex-settings-backdrop) {
    background: rgba(0,0,0,.72);
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.salary-annex-editor-modal-header, .salary-annex-detail-panel[open] .salary-annex-editor-grid) {
    border-color: #304852;
    background: #101e25;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.salary-annex-editor-modal-header h2, .salary-annex-detail-panel summary, .salary-annex-active-status-box strong) { color: #eef5f7; }
html[data-theme="dark"] .page:not(.login-only-layout) :where(.salary-annex-editor-modal-header p, .salary-annex-detail-panel summary small) { color: #a8bac3; }
html[data-theme="dark"] .page:not(.login-only-layout) .salary-annex-editor-modal-panel .salary-annex-actions {
    border-top-color: #304852 !important;
    background: linear-gradient(180deg, rgba(19,34,41,.88), #132229 22%) !important;
}

/* Employee editor controls whose legacy styles use light !important surfaces. */
html[data-theme="dark"] .page:not(.login-only-layout) .employee-status-toggle-field .employee-status-display,
html[data-theme="dark"] .page:not(.login-only-layout) .employee-status-toggle-field.is-status-active .employee-status-display,
html[data-theme="dark"] .page:not(.login-only-layout) .employee-status-toggle-field.is-status-inactive .employee-status-display {
    color: #dce8ec !important;
    border-color: #435d69 !important;
    background: #0f1d24 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .employee-status-toggle-field.is-status-active .employee-status-display {
    color: #85e5da !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .status-inline-confirm {
    color: #dce8ec;
    border-color: #435d69;
    background: #132229;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .38);
}

html[data-theme="dark"] .page:not(.login-only-layout) .status-inline-confirm strong {
    color: #f4fafb;
}

html[data-theme="dark"] .page:not(.login-only-layout) .status-inline-confirm small {
    color: #a8bac3;
}

html[data-theme="dark"] .page:not(.login-only-layout) .status-inline-confirm .btn-outline-secondary {
    color: #dce8ec;
    border-color: #58717d;
    background: #0f1d24;
}

html[data-theme="dark"] .page:not(.login-only-layout) .status-inline-confirm .btn-outline-secondary:hover,
html[data-theme="dark"] .page:not(.login-only-layout) .status-inline-confirm .btn-outline-secondary:focus-visible {
    color: #ffffff;
    border-color: #6f8d99;
    background: #20343d;
}

/* Loyalty override dialog contains independent light option cards and labels. */
html[data-theme="dark"] .page:not(.login-only-layout) .loyalty-overrides-option {
    color: #dce8ec;
    border-color: #3a525d;
    background: #101e25;
}
html[data-theme="dark"] .page:not(.login-only-layout) .loyalty-overrides-option-title { color: #eef5f7; }
html[data-theme="dark"] .page:not(.login-only-layout) .loyalty-overrides-option-description { color: #a9bdc5; }
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .loyalty-toggle-entry > span:first-child,
    .employee-edit-form .loyalty-break-toggle-field > span:first-child,
    .loyalty-budget-year-field > span:first-child
) {
    color: #7ee3d9 !important;
    background: #101e25 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .loyalty-toggle-display,
    .loyalty-break-toggle-field > input[type="date"],
    .loyalty-budget-year-field > select
) {
    color: #dce8ec !important;
    border-color: #435d69 !important;
    background-color: #0f1d24 !important;
}

/* Complete dark palette for the shared top-layer date picker. */
html[data-theme="dark"] .page:not(.login-only-layout) .modern-date-popover {
    color: #dce8ec;
    border-color: #435d69;
    background: rgba(19, 34, 41, .99);
    color-scheme: dark;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.modern-date-nav, .modern-date-month-select, .modern-date-year-select) {
    color: #dce8ec;
    border-color: #435d69;
    background: #0f1d24;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.modern-date-nav:hover, .modern-date-nav:focus-visible) {
    color: #9aeee6;
    border-color: #52d3c7;
    background: #1a403a;
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-date-weekdays { color: #a8bac3; }
html[data-theme="dark"] .page:not(.login-only-layout) .modern-date-day { color: #dce8ec; }
html[data-theme="dark"] .page:not(.login-only-layout) .modern-date-day.is-outside { color: #718892; }
html[data-theme="dark"] .page:not(.login-only-layout) .modern-date-day:disabled { color: #536a74; }
html[data-theme="dark"] .page:not(.login-only-layout) :where(.modern-date-day:hover:not(:disabled), .modern-date-day:focus-visible) {
    color: #9aeee6;
    background: #1a403a;
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-date-day.is-today:not(.is-selected) {
    color: #85e5da;
    box-shadow: inset 0 0 0 1px #52d3c7;
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-date-day.is-selected {
    color: #06201d;
    background: #72ddd2;
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-date-footer { border-top-color: #304852; }
html[data-theme="dark"] .page:not(.login-only-layout) .modern-date-footer-button { color: #b8c9cf; }
html[data-theme="dark"] .page:not(.login-only-layout) :where(.modern-date-footer-button:hover, .modern-date-footer-button:focus-visible) {
    color: #9aeee6;
    background: #1a403a;
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-date-footer-button.is-primary {
    color: #ffffff;
    background: #0f8a80;
}

/* Department division manager selection and editable table rows. */
html[data-theme="dark"] .page:not(.login-only-layout) .reference-division-manager-department label { color: #cbd9de; }
html[data-theme="dark"] .page:not(.login-only-layout) .reference-division-manager-table tbody tr.is-selected > td {
    color: #dff9f5 !important;
    background: #17433d !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .reference-division-manager-table tbody tr.is-selected > td:first-child {
    box-shadow: inset 4px 0 0 #52d3c7;
}
html[data-theme="dark"] .page:not(.login-only-layout) .reference-division-manager-table tbody tr.is-selected .reference-division-name-button {
    color: #9aeee6 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .reference-division-entry-row td {
    color: #dce8ec !important;
    background: #17272f !important;
}

/* New/Edit Annex: metadata, grade picker, and compact salary table. */
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .salary-annex-rate-section,
    .salary-annex-single-rate-wrap,
    .salary-annex-table-wrap,
    .salary-annex-grade-menu
) {
    color: #dce8ec !important;
    border-color: #3a525d !important;
    background: #101e25 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.salary-annex-table-title, .salary-annex-grade-field > span, .salary-annex-step-field > span) {
    color: #7ee3d9 !important;
    background: #101e25 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .salary-annex-grade-select {
    color: #dce8ec !important;
    border-color: #435d69 !important;
    background-color: #0f1d24 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .salary-annex-grade-option {
    color: #dce8ec;
    background: #132229;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.salary-annex-grade-option:hover, .salary-annex-grade-option:focus-visible) {
    color: #9aeee6;
    background: #1a403a;
}
html[data-theme="dark"] .page:not(.login-only-layout) .salary-annex-grade-option.is-selected {
    color: #ffffff;
    background: #0f766e;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .salary-annex-single-rate-table th,
    .salary-annex-single-rate-table td,
    .salary-annex-rate-table th,
    .salary-annex-rate-table td
) {
    color: #dce8ec !important;
    border-color: #38505b !important;
    background: #132229 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .salary-annex-single-rate-table input.salary-annex-rate-input,
    .salary-annex-rate-table input,
    .salary-annex-rate-table .salary-annex-rate-input
) {
    color: #eef5f7 !important;
    border-color: #4a6571 !important;
    background: #0d1a20 !important;
}

/* Main organizational structure canvas and cards. */
html[data-theme="dark"] .page:not(.login-only-layout) .organization-structure-shell {
    background: linear-gradient(180deg, #0f1d24, #0c181e);
}
html[data-theme="dark"] .page:not(.login-only-layout) .organization-chart-viewport {
    background-color: #0f1d24;
    background-image:
        linear-gradient(rgba(82, 211, 199, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(82, 211, 199, .07) 1px, transparent 1px);
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.organization-zoom-controls, .organization-chart-summary div) {
    color: #dce8ec;
    border-color: #3a525d;
    background: #132229;
}
html[data-theme="dark"] .page:not(.login-only-layout) .organization-zoom-controls .organization-zoom-value { color: #b8c9cf; border-color: #3a525d; }
html[data-theme="dark"] .page:not(.login-only-layout) :where(.organization-leadership-card, .organization-department-card) {
    color: #dce8ec;
    border-color: #3d5963;
    border-top-color: #52d3c7;
    background: #17272f;
    box-shadow: 0 10px 24px rgba(0,0,0,.24);
}
html[data-theme="dark"] .page:not(.login-only-layout) .organization-leadership-card.is-sanggunian { border-top-color: #7fa8df; }
html[data-theme="dark"] .page:not(.login-only-layout) :where(.organization-leadership-card h3, .organization-department-title h3) { color: #eef5f7; }
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .organization-leadership-card span,
    .organization-leadership-card p,
    .organization-leadership-card strong,
    .organization-department-title > span,
    .organization-chart-summary span
) { color: #a8bac3; }
html[data-theme="dark"] .page:not(.login-only-layout) .organization-head { border-top-color: #38505b; }
html[data-theme="dark"] .page:not(.login-only-layout) :where(.organization-department-card:hover, .organization-department-card:focus-visible) {
    border-color: #52d3c7;
    background: #1a3435;
}

/* Superseded by css/responsive-records.css; retained temporarily for safe cleanup. */
@media (max-width: 0px) {
    .personnel-submenu-panel,
    .reports-shell {
        min-width: 0;
        max-width: 100%;
    }

    .employee-reference-panel .reference-list-table-wrap,
    .personnel-submenu-panel .employee-records-table-wrap,
    .reports-shell .report-table-wrap {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    .employee-reference-panel .reference-list-table,
    .personnel-submenu-panel .employee-records-table,
    .reports-shell .report-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    .employee-reference-panel .reference-list-table thead,
    .personnel-submenu-panel .employee-records-table thead,
    .reports-shell .report-table thead {
        display: none !important;
    }

    .employee-reference-panel .reference-list-table tbody,
    .personnel-submenu-panel .employee-records-table tbody,
    .reports-shell .report-table tbody {
        display: grid !important;
        width: 100% !important;
        gap: .8rem !important;
    }

    .employee-reference-panel .reference-list-table tbody tr,
    .personnel-submenu-panel .employee-records-table tbody tr,
    .reports-shell .report-table tbody tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .55rem .7rem !important;
        width: 100% !important;
        padding: .9rem !important;
        color: #1e293b !important;
        border: 1px solid #dce6ee !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .07) !important;
    }

    .employee-reference-panel .reference-list-table td,
    .personnel-submenu-panel .employee-records-table td,
    .reports-shell .report-table td {
        position: static !important;
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        color: #334155 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    .employee-reference-panel .reference-list-table td::before,
    .personnel-submenu-panel .employee-records-table td::before,
    .reports-shell .report-table td::before {
        content: none !important;
        display: none !important;
    }

    .employee-reference-panel .reference-list-table td[data-label="#"],
    .personnel-submenu-panel .employee-records-table td[data-label="#"],
    .employee-reference-panel .department-reference-table td[data-label="SSL - TRANCHE"],
    .employee-reference-panel .position-reference-table td[data-label="SSL - Tranche"] {
        display: none !important;
    }

    .employee-reference-panel .department-reference-table td[data-label="CODE"],
    .employee-reference-panel .position-reference-table td[data-label="Item No."],
    .personnel-submenu-panel .employee-records-table td[data-label="ID No."],
    .reports-shell .report-table td[data-label="ID No."] {
        position: absolute !important;
        top: .9rem !important;
        right: .9rem !important;
        display: inline-flex !important;
        align-items: center;
        width: auto !important;
        max-width: 38% !important;
        min-height: 28px !important;
        padding: .25rem .55rem !important;
        color: #475569 !important;
        font-size: .74rem;
        font-weight: 800;
        white-space: nowrap;
        border: 1px solid #dce6ee !important;
        border-radius: 999px !important;
        background: #f1f5f9 !important;
    }

    .employee-reference-panel .department-reference-table td[data-label="DEPARTMENT"],
    .employee-reference-panel .position-reference-table td[data-label="Position"],
    .personnel-submenu-panel .employee-records-table td[data-label="Employee Name"],
    .reports-shell .report-table td[data-label="Employee Name"] {
        grid-column: 1 / -1 !important;
        padding-right: 5.5rem !important;
        color: #0f172a !important;
        font-size: .96rem;
        line-height: 1.3;
    }

    .employee-reference-panel .department-reference-table td[data-label="DEPARTMENT HEAD"],
    .employee-reference-panel .position-reference-table td[data-label="Department"],
    .personnel-submenu-panel .employee-records-table td[data-label="Position / Department"],
    .reports-shell .report-table td[data-label="Position / Department"] {
        grid-column: 1 / -1 !important;
        padding: .62rem .7rem !important;
        border: 1px solid #e7eef4 !important;
        border-radius: 11px !important;
        background: #f8fafc !important;
    }

    .employee-reference-panel .position-reference-table td[data-label="SG-SI"] {
        grid-column: 1 / -1 !important;
        width: max-content !important;
        padding: .3rem .58rem !important;
        color: #0f766e !important;
        font-size: .76rem;
        font-weight: 850;
        border: 1px solid #a7ded8 !important;
        border-radius: 999px !important;
        background: #edfafa !important;
    }

    .employee-reference-panel .reference-list-table td.action-cell,
    .personnel-submenu-panel .employee-records-table td.action-cell,
    .reports-shell .report-table td.action-cell {
        grid-column: 1 / -1 !important;
        padding-top: .6rem !important;
        border-top: 1px solid #e7eef4 !important;
    }

    .employee-reference-panel .reference-list-table .row-actions,
    .personnel-submenu-panel .employee-records-table .row-actions,
    .reports-shell .report-table .row-actions {
        display: flex !important;
        width: 100% !important;
        justify-content: flex-end !important;
        gap: .45rem !important;
        flex-wrap: wrap !important;
    }

    .employee-reference-panel .reference-list-table .inline-action-form {
        width: auto !important;
    }

    .employee-reference-panel .reference-list-table .action-button {
        width: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    html[data-theme="dark"] .page:not(.login-only-layout) :where(
        .employee-reference-panel .reference-list-table tbody tr,
        .personnel-submenu-panel .employee-records-table tbody tr,
        .reports-shell .report-table tbody tr
    ) {
        color: #dce8ec !important;
        border-color: #344c57 !important;
        background: #132229 !important;
        box-shadow: 0 10px 26px rgba(0, 0, 0, .24) !important;
    }

    html[data-theme="dark"] .page:not(.login-only-layout) :where(
        .employee-reference-panel .reference-list-table td,
        .personnel-submenu-panel .employee-records-table td,
        .reports-shell .report-table td
    ) {
        color: #dce8ec !important;
        background: transparent !important;
    }

    html[data-theme="dark"] .page:not(.login-only-layout) :where(
        .employee-reference-panel .department-reference-table td[data-label="CODE"],
        .employee-reference-panel .position-reference-table td[data-label="Item No."],
        .personnel-submenu-panel .employee-records-table td[data-label="ID No."],
        .reports-shell .report-table td[data-label="ID No."]
    ) {
        color: #c5d5db !important;
        border-color: #3a525d !important;
        background: #17272f !important;
    }

    html[data-theme="dark"] .page:not(.login-only-layout) :where(
        .employee-reference-panel .department-reference-table td[data-label="DEPARTMENT"],
        .employee-reference-panel .position-reference-table td[data-label="Position"],
        .personnel-submenu-panel .employee-records-table td[data-label="Employee Name"],
        .reports-shell .report-table td[data-label="Employee Name"]
    ) {
        color: #eef5f7 !important;
    }

    html[data-theme="dark"] .page:not(.login-only-layout) :where(
        .employee-reference-panel .department-reference-table td[data-label="DEPARTMENT HEAD"],
        .employee-reference-panel .position-reference-table td[data-label="Department"],
        .personnel-submenu-panel .employee-records-table td[data-label="Position / Department"],
        .reports-shell .report-table td[data-label="Position / Department"]
    ) {
        border-color: #304852 !important;
        background: #101e25 !important;
    }

    html[data-theme="dark"] .page:not(.login-only-layout) .employee-reference-panel .position-reference-table td[data-label="SG-SI"] {
        color: #9aeee6 !important;
        border-color: #36766f !important;
        background: #173a35 !important;
    }

    html[data-theme="dark"] .page:not(.login-only-layout) :where(
        .employee-reference-panel .reference-list-table td.action-cell,
        .personnel-submenu-panel .employee-records-table td.action-cell,
        .reports-shell .report-table td.action-cell
    ) {
        border-top-color: #304852 !important;
    }
}

/* Department organizational chart modal and every chart node. */
html[data-theme="dark"] .page:not(.login-only-layout) .organization-detail-backdrop { background: rgba(0,0,0,.76); }
html[data-theme="dark"] .page:not(.login-only-layout) .organization-department-chart-panel {
    color: #dce8ec;
    border-color: #304852;
    background: #101e25;
}
html[data-theme="dark"] .page:not(.login-only-layout) .organization-department-chart-header {
    border-bottom-color: #304852;
    background: #132229;
}
html[data-theme="dark"] .page:not(.login-only-layout) .organization-department-chart-heading h2 { color: #eef5f7; }
html[data-theme="dark"] .page:not(.login-only-layout) :where(.organization-department-chart-heading p, .organization-department-chart-help) { color: #a8bac3; }
html[data-theme="dark"] .page:not(.login-only-layout) :where(.organization-department-zoom-controls, .organization-department-chart-help kbd) {
    color: #dce8ec;
    border-color: #3a525d;
    background: #17272f;
}
html[data-theme="dark"] .page:not(.login-only-layout) .organization-department-zoom-controls .organization-department-zoom-value {
    color: #b8c9cf;
    border-color: #3a525d;
}
html[data-theme="dark"] .page:not(.login-only-layout) .organization-department-chart-body { background: #0d1a20; }
html[data-theme="dark"] .page:not(.login-only-layout) .organization-department-chart-viewport {
    border-color: #38505b;
    background-color: #0f1d24;
    background-image:
        linear-gradient(rgba(82, 211, 199, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(82, 211, 199, .07) 1px, transparent 1px);
    scrollbar-color: #49636e #0d1a20;
}
html[data-theme="dark"] .page:not(.login-only-layout) .department-org-chart-inner { color: #dce8ec; }
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .department-org-person-photo,
    .department-org-person-details,
    .department-org-unit-title,
    .department-org-section-title,
    .department-org-empty-position,
    .department-org-empty-unit,
    .department-org-chart-empty,
    .department-org-unassigned-title
) {
    color: #dce8ec;
    border-color: #526d78;
    background: #17272f;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .department-org-person-name,
    .department-org-person-position,
    .department-org-person-item,
    .department-org-unit-title-text,
    .department-org-section-title-text
) { color: #e8f1f4; }
html[data-theme="dark"] .page:not(.login-only-layout) .department-org-group-label { color: #a8bac3; }
html[data-theme="dark"] .page:not(.login-only-layout) .department-org-connector-line { background: #6ba9a3; }
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .department-org-person:hover .department-org-person-photo,
    .department-org-person:focus-visible .department-org-person-photo,
    .department-org-person:hover .department-org-person-details,
    .department-org-person:focus-visible .department-org-person-details,
    .department-org-unit-title:hover,
    .department-org-unit-title:focus-visible,
    .department-org-section-title:hover,
    .department-org-section-title:focus-visible
) {
    color: #f3fbfa;
    border-color: #52d3c7;
    background: #1a403a;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .department-org-person.is-selected .department-org-person-photo,
    .department-org-person.is-selected .department-org-person-details,
    .department-org-unit-title.is-selected,
    .department-org-section-title.is-selected,
    .department-org-empty-position.is-selected
) {
    color: #ffffff;
    border-color: #72ddd2;
    background: linear-gradient(145deg, #17433d, #1b5149);
}

/* Search, filter, print/export, and add controls shared by authenticated lists. */
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .search-toggle-button,
    .filter-toggle-button,
    .icon-button,
    .report-print-button,
    .retirement-icon-print-button,
    .step-list-print-close
) {
    color: #b9cad1 !important;
    border-color: #435d69 !important;
    background: #17272f !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .search-toggle-button:hover,
    .search-toggle-button:focus-visible,
    .filter-toggle-button:hover,
    .filter-toggle-button:focus-visible,
    .filter-toggle-button[aria-expanded="true"],
    .icon-button:hover,
    .icon-button:focus-visible,
    .report-print-button:hover,
    .report-print-button:focus-visible,
    .retirement-icon-print-button:hover,
    .retirement-icon-print-button:focus-visible,
    .step-list-print-close:hover,
    .step-list-print-close:focus-visible
) {
    color: #9aeee6 !important;
    border-color: #52d3c7 !important;
    background: #1a403a !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .search-composer.animated-search.is-open .search-toggle-button {
    color: #9aeee6 !important;
    border-color: #52d3c7 !important;
    background: #1a403a !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .search-composer.animated-search .search-toggle-button:hover,
html[data-theme="dark"] .page:not(.login-only-layout) .search-composer.animated-search .search-toggle-button:focus-visible,
html[data-theme="dark"] .page:not(.login-only-layout) .search-composer.animated-search.is-open .search-toggle-button {
    color: #9aeee6 !important;
    border-color: #52d3c7 !important;
    background: #1a403a !important;
    outline: none !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .search-composer.animated-search .form-control,
html[data-theme="dark"] .page:not(.login-only-layout) .records-toolbar .search-composer.animated-search .form-control,
html[data-theme="dark"] .page:not(.login-only-layout) .report-header .search-composer.animated-search .form-control {
    color: #eef5f7 !important;
    background-color: #0f1d24 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.search-suggestions, .search-suggestion) {
    color: #dce8ec;
    border-color: #3a525d;
    background: #17272f;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.search-suggestion:hover, .search-suggestion:focus-visible) {
    color: #9aeee6;
    background: #1a403a;
}
html[data-theme="dark"] .page:not(.login-only-layout) .filter-slide-panel,
html[data-theme="dark"] .page:not(.login-only-layout) .filter-slide-panel.is-open {
    color: #dce8ec;
    border-color: #3a525d;
    background: #132229;
    box-shadow: 0 18px 34px rgba(0,0,0,.34);
}
html[data-theme="dark"] .page:not(.login-only-layout) .filter-slide-panel label > span {
    color: #7ee3d9;
    background: #132229;
}
html[data-theme="dark"] .page:not(.login-only-layout) .filter-slide-panel .form-select,
html[data-theme="dark"] .page:not(.login-only-layout) .filter-slide-panel select.form-select option {
    color: #dce8ec;
    border-color: #438077;
    background-color: #0f1d24;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .dashboard-filter-menu summary,
    .records-filter-menu summary,
    .dashboard-filter-panel,
    .filter-select-shell .smooth-select-button,
    .filter-select-shell .smooth-select-menu
) {
    color: #dce8ec;
    border-color: #3d5662;
    background: #17272f;
    box-shadow: none;
}
/* Shared dark treatment for every dashboard and list filter menu. */
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .dashboard-filter-menu summary::before,
    .dashboard-native-select-shell .dashboard-select-floating-label
) {
    color: #7ee3d9;
    background: #14242b;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .dashboard-native-select,
    .dashboard-native-select-button,
    .dashboard-native-select-menu
) {
    color: #dce8ec;
    border-color: #3d5662;
    background-color: #14242b;
    box-shadow: none;
    color-scheme: dark;
}
html[data-theme="dark"] .page:not(.login-only-layout) .dashboard-native-select option {
    color: #dce8ec;
    background: #14242b;
}
html[data-theme="dark"] .page:not(.login-only-layout) .dashboard-native-select-shell .dashboard-select-chevron,
html[data-theme="dark"] .page:not(.login-only-layout) .filter-slide-panel .filter-select-shell .smooth-select-chevron {
    border-color: #9fb2bb;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .dashboard-select-option,
    .filter-select-shell .smooth-select-option
) {
    color: #dce8ec;
    background: transparent;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .dashboard-select-option:hover,
    .dashboard-select-option:focus-visible,
    .dashboard-select-option[aria-selected="true"],
    .filter-select-shell .smooth-select-option:hover,
    .filter-select-shell .smooth-select-option:focus-visible,
    .filter-select-shell .smooth-select-option[aria-selected="true"]
) {
    color: #9aeee6;
    background: #1a403a;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .dashboard-native-select:focus,
    .dashboard-native-select-button:focus-visible,
    .dashboard-native-select-shell.is-open .dashboard-native-select-button,
    .filter-slide-panel .form-select:focus,
    .filter-slide-panel .filter-select-shell.is-open .smooth-select-button
) {
    border-color: #55c6bc;
    box-shadow: 0 0 0 3px rgba(85, 198, 188, .13);
    outline: none;
}
html[data-theme="dark"] .page:not(.login-only-layout) .filter-slide-panel .records-filter-menu summary::before {
    color: #7ee3d9;
    background: #132229;
}
html[data-theme="dark"] .page:not(.login-only-layout) .filter-slide-panel .records-filter-menu summary::after {
    border-color: #9fb2bb;
}
html[data-theme="dark"] .page:not(.login-only-layout) .filter-slide-panel .records-filter-menu[open] summary {
    border-color: #55c6bc;
    box-shadow: 0 0 0 3px rgba(85, 198, 188, .13);
}
html[data-theme="dark"] .page:not(.login-only-layout) .filter-slide-panel .records-filter-menu .dashboard-filter-panel {
    border-color: #3d5662;
    background: #17272f;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .38);
    scrollbar-color: #5c7782 transparent;
}
html[data-theme="dark"] .page:not(.login-only-layout) .filter-slide-panel .records-filter-menu .dashboard-filter-panel::-webkit-scrollbar-thumb {
    background: #5c7782;
    border-color: #17272f;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.dashboard-filter-option, .records-filter-menu .dashboard-filter-option) {
    color: #dce8ec;
    background: transparent;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .dashboard-filter-option:hover,
    .dashboard-filter-option.is-selected,
    .dashboard-filter-option[aria-selected="true"]
) {
    color: #9aeee6;
    background: #1a403a;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .reference-heading-action-button,
    .reference-add-button,
    .reference-section-add-button,
    .users-add-button,
    .eligibility-add-button,
    .account-add-button,
    .btn-soft-add
) {
    color: #baf7f0 !important;
    border-color: #3d8179 !important;
    background: #173a35 !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .reference-heading-action-button:hover,
    .reference-heading-action-button:focus-visible,
    .reference-add-button:hover,
    .reference-add-button:focus-visible,
    .reference-section-add-button:hover,
    .reference-section-add-button:focus-visible,
    .users-add-button:hover,
    .users-add-button:focus-visible,
    .eligibility-add-button:hover,
    .eligibility-add-button:focus-visible,
    .account-add-button:hover,
    .account-add-button:focus-visible,
    .btn-soft-add:hover,
    .btn-soft-add:focus-visible
) {
    color: #ffffff !important;
    border-color: #72ddd2 !important;
    background: #1b5149 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .btn-primary {
    color: #ffffff;
    border-color: #159589;
    background: #0f8a80;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.btn-primary:hover, .btn-primary:focus-visible) {
    color: #ffffff;
    border-color: #62d9ce;
    background: #0d766e;
}
html[data-theme="dark"] .page:not(.login-only-layout) .btn-outline-secondary {
    color: #d5e2e6;
    border-color: #4b6470;
    background: #1a2b33;
}

/* Personnel Print Options and the related list-print dialogs. */
html[data-theme="dark"] .page:not(.login-only-layout) :where(.personnel-print-overlay, .retirement-print-overlay, .step-list-print-modal) {
    background: rgba(0,0,0,.76);
    backdrop-filter: blur(4px);
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .personnel-print-dialog,
    .personnel-print-dialog.personnel-coe-workspace,
    .personnel-print-standalone,
    .personnel-options-card,
    .step-list-print-dialog,
    .retirement-print-dialog
) {
    color: #dce8ec;
    border-color: #304852;
    background: #132229;
    box-shadow: 0 28px 78px rgba(0,0,0,.55);
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.personnel-options-card h2, .personnel-print-dialog h2, .step-list-print-dialog h2) {
    color: #72ddd2;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.personnel-options-subtitle, .personnel-print-dialog > p, .step-list-print-dialog p) {
    color: #a8bac3;
}
html[data-theme="dark"] .page:not(.login-only-layout) .personnel-options-card .personnel-doc-pill,
html[data-theme="dark"] .page:not(.login-only-layout) .personnel-options-card .coe-other-documents-stacked button {
    color: #e4eef1;
    border-color: #435d69;
    background: #17272f;
}
html[data-theme="dark"] .page:not(.login-only-layout) .personnel-options-card .personnel-doc-pill:hover,
html[data-theme="dark"] .page:not(.login-only-layout) .personnel-options-card .coe-other-documents-stacked button:hover {
    color: #9aeee6;
    border-color: #52d3c7;
    background: #1a403a;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .personnel-coe-panel,
    .personnel-clearance-panel[data-personnel-clearance-panel],
    .personnel-clearance-panel[data-personnel-clearance-panel].is-open
) {
    color: #dce8ec;
    border-color: #3a525d;
    background: #101e25;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .personnel-coe-checks,
    .personnel-coe-panel > label,
    .personnel-clearance-purpose-field > .personnel-clearance-outside-label,
    .personnel-clearance-effectivity-group > .personnel-clearance-outside-label
) { color: #cbd9de; }
html[data-theme="dark"] .page:not(.login-only-layout) .personnel-clearance-field > span {
    color: #7ee3d9;
    background: #101e25;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .personnel-clearance-field .form-control,
    .personnel-clearance-purpose-menu > summary,
    .personnel-clearance-purpose-options
) {
    color: #dce8ec;
    border-color: #435d69;
    background: #0f1d24;
}
html[data-theme="dark"] .page:not(.login-only-layout) .personnel-clearance-purpose-options button {
    color: #dce8ec !important;
    background: transparent !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .personnel-clearance-purpose-options button:hover,
html[data-theme="dark"] .page:not(.login-only-layout) .personnel-clearance-purpose-options button.is-selected {
    color: #9aeee6 !important;
    background: #1a403a !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .personnel-coe-workspace .retirement-dialog-close,
html[data-theme="dark"] .page:not(.login-only-layout) .personnel-dialog-close.retirement-dialog-close {
    color: #b9cad1;
    border-color: #435d69;
    background: #17272f;
}

/* Retirement print option cards and their optional-date panel. */
html[data-theme="dark"] .page:not(.login-only-layout) .retirement-print-dialog > p { color: #a8bac3; }
html[data-theme="dark"] .page:not(.login-only-layout) .retirement-dialog-close {
    color: #b9cad1 !important;
    border: 1px solid #435d69 !important;
    background: #17272f !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.retirement-dialog-close:hover, .retirement-dialog-close:focus-visible) {
    color: #9aeee6 !important;
    border-color: #52d3c7 !important;
    background: #1a403a !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .retirement-option-button {
    color: #e4eef1 !important;
    border-color: #435d69 !important;
    background: #17272f !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.retirement-option-button:hover, .retirement-option-button:focus-visible, .retirement-option-button.is-open) {
    color: #9aeee6 !important;
    border-color: #52d3c7 !important;
    background: #1a403a !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .retirement-option-chevron { color: #a8bac3; }
html[data-theme="dark"] .page:not(.login-only-layout) .retirement-optional-panel {
    color: #dce8ec;
    border-color: #3a525d;
    background: #101e25;
}
html[data-theme="dark"] .page:not(.login-only-layout) .retirement-optional-panel label { color: #cbd9de; }

/* Salary Annex metadata and status fields use late light component styles. */
html[data-theme="dark"] .page:not(.login-only-layout) .salary-annex-reference-form .salary-annex-reference-fields-section,
html[data-theme="dark"] .page:not(.login-only-layout) .salary-annex-reference-form .salary-annex-status-field {
    color: #dce8ec !important;
    border-color: #3a525d !important;
    background: #101e25 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .salary-annex-reference-form .salary-annex-reference-grid label > span,
html[data-theme="dark"] .page:not(.login-only-layout) .salary-annex-reference-form .salary-annex-status-field > span {
    color: #7ee3d9 !important;
    background: #101e25 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .salary-annex-reference-form .salary-annex-status-field strong { color: #eef5f7 !important; }
html[data-theme="dark"] .page:not(.login-only-layout) .salary-annex-reference-form .salary-annex-reference-grid .form-control,
html[data-theme="dark"] .page:not(.login-only-layout) .salary-annex-reference-form .salary-annex-reference-grid .form-select,
html[data-theme="dark"] .page:not(.login-only-layout) .salary-annex-reference-form .modern-date-control,
html[data-theme="dark"] .page:not(.login-only-layout) .salary-annex-reference-form .modern-date-display {
    color: #e7f0f3 !important;
    border-color: #435d69 !important;
    background-color: #0f1d24 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .salary-annex-reference-form :where(.form-control:disabled, .form-control[readonly], .modern-date-control.is-disabled .modern-date-display) {
    color: #a7bbc4 !important;
    -webkit-text-fill-color: #a7bbc4 !important;
    opacity: 1 !important;
}

/* Mass and individual Salary Adjustment print controls. */
html[data-theme="dark"] .page:not(.login-only-layout) .salary-adjustment-list-print-dialog {
    color: #dce8ec !important;
    border-color: #304852 !important;
    background: #132229 !important;
    box-shadow: 0 28px 78px rgba(0,0,0,.55) !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .salary-adjustment-list-print-dialog .step-list-print-header h2 { color: #72ddd2 !important; }
html[data-theme="dark"] .page:not(.login-only-layout) .salary-adjustment-list-print-dialog .step-list-print-header span { color: #a8bac3 !important; }
html[data-theme="dark"] .page:not(.login-only-layout) .salary-adjustment-print-field > span:first-child {
    color: #7ee3d9 !important;
    background: #132229 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .salary-adjustment-print-field .form-select,
html[data-theme="dark"] .page:not(.login-only-layout) .salary-adjustment-print-field .form-control {
    color: #e7f0f3 !important;
    border-color: #435d69 !important;
    background-color: #0f1d24 !important;
    color-scheme: dark;
}
html[data-theme="dark"] .page:not(.login-only-layout) .salary-adjustment-print-field .form-control:disabled {
    color: #a7bbc4 !important;
    -webkit-text-fill-color: #a7bbc4 !important;
    background-color: #17272f !important;
    opacity: 1 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .salary-adjustment-current-date-field .salary-adjustment-current-date-text {
    color: #dce8ec !important;
}

/* Reports replaces native selects with smooth-select buttons after the dialog opens. */
html[data-theme="dark"] .page:not(.login-only-layout) .salary-adjustment-list-print-dialog label.salary-adjustment-print-field > .print-list-select-shell > .smooth-select-button,
html[data-theme="dark"] .page:not(.login-only-layout) .salary-adjustment-list-print-dialog .print-list-select-shell > .smooth-select-button {
    color: #e7f0f3 !important;
    border-color: #435d69 !important;
    background: #0f1d24 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .salary-adjustment-list-print-dialog .print-list-select-shell > .smooth-select-button:hover,
html[data-theme="dark"] .page:not(.login-only-layout) .salary-adjustment-list-print-dialog .print-list-select-shell.is-open > .smooth-select-button,
html[data-theme="dark"] .page:not(.login-only-layout) .salary-adjustment-list-print-dialog .print-list-select-shell > .smooth-select-button:focus-visible {
    color: #f3f8fa !important;
    border-color: #4f8d88 !important;
    background: #172f36 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .salary-adjustment-list-print-dialog .print-list-select-shell .smooth-select-menu {
    color: #dce8ec !important;
    border-color: #435d69 !important;
    background: #132229 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .salary-adjustment-list-print-dialog .print-list-select-shell .smooth-select-option {
    color: #dce8ec !important;
    background: transparent !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .salary-adjustment-list-print-dialog .print-list-select-shell .smooth-select-option:hover,
html[data-theme="dark"] .page:not(.login-only-layout) .salary-adjustment-list-print-dialog .print-list-select-shell .smooth-select-option:focus-visible,
html[data-theme="dark"] .page:not(.login-only-layout) .salary-adjustment-list-print-dialog .print-list-select-shell .smooth-select-option[aria-selected="true"] {
    color: #f5fbfc !important;
    background: #1a3b3a !important;
}

/* Keep the concealed native date value from showing beneath "Use current date". */
html[data-theme="dark"] .page:not(.login-only-layout) .salary-adjustment-list-print-dialog .salary-adjustment-current-date-field.is-current > input.form-control:disabled {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    background-color: #0f1d24 !important;
    opacity: 1 !important;
}

/* Unified dashboard request table, including its pre-animation surface. */
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .employee-request-table.unified-dashboard-table {
    color: #dce8ec !important;
    border-color: #344c57 !important;
    background: #101e25 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .employee-request-table.unified-dashboard-table .employee-request-head {
    color: #b8cbd2 !important;
    border-bottom-color: #3a525d !important;
    background: #17272f !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .employee-request-table.unified-dashboard-table .employee-request-row {
    color: #e5eef1 !important;
    border-bottom-color: #2c414c !important;
    background: #101e25 !important;
    animation-name: dashboard-dark-row-enter !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .employee-request-table.unified-dashboard-table .employee-request-row:hover {
    color: #f4fbfc !important;
    background: #17342f !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .employee-request-table.unified-dashboard-table .employee-request-row > span,
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .employee-request-table.unified-dashboard-table .employee-request-row > strong {
    color: #eef5f7 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .employee-request-table.unified-dashboard-table .employee-request-row small {
    color: #a9bbc3 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .employee-request-action-button {
    color: #9ce8df !important;
    border-color: #41616d !important;
    background: #17272f !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .employee-request-action-button.finish {
    color: #78e2bd !important;
    border-color: #2f6b59 !important;
    background: #143128 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .employee-request-action-button.view > span {
    color: #a9f1ea !important;
    border-color: #a9f1ea !important;
    opacity: 1 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .employee-request-action-button.view > span::after {
    background: #a9f1ea !important;
    opacity: 1 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .employee-request-action-button.finish > span {
    color: #84efc7 !important;
    border-left-color: #84efc7 !important;
    border-bottom-color: #84efc7 !important;
    opacity: 1 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .employee-request-action-button:hover,
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .employee-request-action-button:focus-visible {
    border-color: #5d968f !important;
    background: #1c3938 !important;
    outline: 2px solid rgba(116, 226, 215, .28) !important;
    outline-offset: 2px !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .employee-request-link {
    color: #9ce8df !important;
    border-color: #365965 !important;
    background: #17302f !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .employee-request-link:hover,
html[data-theme="dark"] .page:not(.login-only-layout) .modern-dashboard .employee-request-link:focus-visible {
    color: #c7fff8 !important;
    border-color: #5d968f !important;
    background: #1c3938 !important;
}

@keyframes dashboard-dark-row-enter {
    from { opacity: 1; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Full-panel loading skeleton shown while changing record/report pages. */
html[data-theme="dark"] .page:not(.login-only-layout) .report-submenu-loading-overlay {
    color: #72ddd2;
    background: rgba(11, 19, 24, .98);
}
html[data-theme="dark"] .page:not(.login-only-layout) .report-submenu-skeleton-table {
    border-color: #344c57;
    background: rgba(19, 34, 41, .78);
}
html[data-theme="dark"] .page:not(.login-only-layout) .report-submenu-skeleton-table-head {
    border-bottom-color: #3a525d;
    background: rgba(23, 39, 47, .96);
}
html[data-theme="dark"] .page:not(.login-only-layout) .report-submenu-skeleton-table-row,
html[data-theme="dark"] .page:not(.login-only-layout) .report-submenu-skeleton-table-row.is-highlight {
    border-bottom-color: #2c414c;
    background: rgba(19, 34, 41, .92);
}
html[data-theme="dark"] .page:not(.login-only-layout) .report-submenu-skeleton-table-row:nth-child(even) {
    background: rgba(16, 30, 37, .94);
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.report-submenu-skeleton-box, .report-submenu-skeleton-line) {
    background: #314750;
}
html[data-theme="dark"] .page:not(.login-only-layout) .report-submenu-loading-center strong { color: #eef5f7; }
html[data-theme="dark"] .page:not(.login-only-layout) .report-submenu-loading-center span { color: #a8bac3; }

/* Validation, required-field, and disabled-control readability in all add forms. */
html[data-theme="dark"] .page:not(.login-only-layout) :where(.invalid-feedback, .field-validation-error, .validation-message) { color: #ff9da5; }
html[data-theme="dark"] .page:not(.login-only-layout) .employee-id-availability { color: #a8bac3; }
html[data-theme="dark"] .page:not(.login-only-layout) .employee-id-availability.is-available { color: #5EEAD4; }
html[data-theme="dark"] .page:not(.login-only-layout) .employee-id-availability.is-duplicate { color: #FDA4AF; }
html[data-theme="dark"] .page:not(.login-only-layout) .employee-id-availability.is-unavailable { color: #FDE68A; }
html[data-theme="dark"] .page:not(.login-only-layout) form[data-employee-edit-tabs] .employee-id-field.has-employee-id-duplicate > span:first-child { color: #FDA4AF !important; }
html[data-theme="dark"] .page:not(.login-only-layout) .employee-required-summary {
    color: #ffb0b7 !important;
    border-color: #78414a !important;
    background: #3b2025 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(.form-control.is-invalid, .form-select.is-invalid, [aria-invalid="true"]) {
    color: #fff1f2;
    border-color: #ff7d87;
    background-color: #2b1d22;
}
html[data-theme="dark"] .page:not(.login-only-layout) form[data-employee-edit-tabs] :where(
    .form-control.is-required-invalid,
    .form-select.is-required-invalid,
    label.is-required-invalid > .form-control,
    label.is-required-invalid > .form-select,
    .smooth-select-shell.is-required-invalid .smooth-select-button,
    label.is-required-invalid .smooth-select-button,
    .modern-date-control.is-required-invalid,
    .employee-date-field.is-required-invalid .modern-date-control,
    .employee-photo-upload-field.is-required-invalid .employee-photo-upload-button
) {
    color: #fff1f2 !important;
    border-color: #ff6b76 !important;
    background: #2b1d22 !important;
    box-shadow: 0 0 0 3px rgba(255,107,118,.14) !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) form[data-employee-edit-tabs] :where(
    .is-required-invalid > span:first-child,
    label.is-required-invalid > span:first-child,
    .employee-photo-upload-field.is-required-invalid .employee-photo-upload-caption
) {
    color: #ff9da5 !important;
    background: #2b1d22 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) form[data-employee-edit-tabs] :where(
    .form-control.is-required-invalid,
    .form-select.is-required-invalid,
    label.is-required-invalid > .form-control,
    label.is-required-invalid > .form-select
)::placeholder { color: #c99ba1 !important; }
html[data-theme="dark"] .page:not(.login-only-layout) :where(.form-control:disabled, .form-select:disabled, .form-control[readonly]) {
    color: #91a3ac;
    border-color: #344b56;
    background: #1a2931;
}

/* Dark-mode completion for employee entry, loyalty controls, and reference actions. */
html[data-theme="dark"] .page:not(.login-only-layout) .employee-photo-upload-field:not(.is-required-invalid) .employee-photo-upload-caption {
    color: #7ee3d9 !important;
    background: #132229 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .loyalty-overrides-button {
    color: #baf7f0 !important;
    border-color: #3d8179 !important;
    background: #173a35 !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .loyalty-overrides-button:hover,
html[data-theme="dark"] .page:not(.login-only-layout) .loyalty-overrides-button:focus-visible {
    color: #ffffff !important;
    border-color: #72ddd2 !important;
    background: #1b5149 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .appointment-documents-button:not(:disabled) {
    color: #baf7f0 !important;
    border-color: #3d8179 !important;
    background: #173a35 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .appointment-documents-button:hover:not(:disabled),
html[data-theme="dark"] .page:not(.login-only-layout) .appointment-documents-button:focus-visible:not(:disabled),
html[data-theme="dark"] .page:not(.login-only-layout) .appointment-documents-button[aria-expanded="true"] {
    color: #ffffff !important;
    border-color: #72ddd2 !important;
    background: #1b5149 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .appointment-documents-button:disabled {
    color: #baf7f0 !important;
    border-color: #3d8179 !important;
    background: #173a35 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* Employment dates use a generated text input. Keep both halves of that
   composite control on the dark palette, including its disabled state. */
html[data-theme="dark"] .page:not(.login-only-layout) form[data-employee-edit-tabs] .employee-date-field .modern-date-control,
html[data-theme="dark"] .page:not(.login-only-layout) form[data-employee-edit-tabs] .employee-date-field .modern-date-control.is-disabled {
    color: #dce8ec !important;
    border-color: #435d69 !important;
    background: #0f1d24 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) form[data-employee-edit-tabs] .employee-date-field .modern-date-display.form-control,
html[data-theme="dark"] .page:not(.login-only-layout) form[data-employee-edit-tabs] .employee-date-field .modern-date-display.form-control:disabled {
    color: #a7bbc4 !important;
    -webkit-text-fill-color: #a7bbc4 !important;
    background: #0f1d24 !important;
    background-color: #0f1d24 !important;
    opacity: 1 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) form[data-employee-edit-tabs] .employee-date-field .modern-date-display::placeholder {
    color: #7f949e !important;
    -webkit-text-fill-color: #7f949e !important;
    opacity: 1 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) form[data-employee-edit-tabs] .employee-date-field .modern-date-trigger,
html[data-theme="dark"] .page:not(.login-only-layout) form[data-employee-edit-tabs] .employee-date-field .modern-date-trigger:disabled {
    color: #8db0ba !important;
    border-left-color: #435d69 !important;
    background: #17272f !important;
    opacity: 1 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .loyalty-break-toggle-field:not(.is-required-invalid) :where(
    .modern-date-control,
    .modern-date-display,
    input[type="date"]
) {
    color: #dce8ec !important;
    border-color: #435d69 !important;
    background: #0f1d24 !important;
    -webkit-text-fill-color: #dce8ec !important;
    color-scheme: dark;
}

html[data-theme="dark"] .page:not(.login-only-layout) .loyalty-overrides-dialog .optional-switch-track {
    border-color: #536c78 !important;
    background: #3a505b !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .loyalty-overrides-dialog .optional-switch-track::after {
    background: #e2ecef !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .page:not(.login-only-layout) .loyalty-overrides-dialog .optional-field-switch.is-on .optional-switch-track {
    border-color: #3c9b86 !important;
    background: #246b5d !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .action-button:is(.view, .edit, .save, .delete) {
    color: #b9cad1 !important;
    border-color: #435d69 !important;
    background: #17272f !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .action-button.delete {
    color: #f2a2aa !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .action-button:is(.view, .edit, .save, .delete):hover,
html[data-theme="dark"] .page:not(.login-only-layout) .action-button:is(.view, .edit, .save, .delete):focus-visible {
    color: #8de8df !important;
    border-color: #5f8d89 !important;
    background: #1b3938 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .action-button.delete:hover,
html[data-theme="dark"] .page:not(.login-only-layout) .action-button.delete:focus-visible {
    color: #ffc1c7 !important;
    border-color: #8f5960 !important;
    background: #3a2429 !important;
}

/* Users and role-permission surfaces. */
html[data-theme="dark"] .page:not(.login-only-layout) .users-panel,
html[data-theme="dark"] .page:not(.login-only-layout) .permission-menu-access,
html[data-theme="dark"] .page:not(.login-only-layout) .permission-menu-access .permission-card {
    color: #e7f0f3 !important;
    border-color: #304852 !important;
    background: #132229 !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .users-panel-heading h2,
    .role-permissions-panel .panel-heading h2,
    .role-picker-form label,
    .permission-menu-access .permission-card-header h4,
    .permission-menu-access .permission-card-row
) {
    color: #e7f0f3 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .permission-section-heading h3 { color: #72ddd2 !important; }
html[data-theme="dark"] .page:not(.login-only-layout) .permission-section-heading p,
html[data-theme="dark"] .page:not(.login-only-layout) .users-panel .panel-heading span { color: #a8bac3 !important; }
html[data-theme="dark"] .page:not(.login-only-layout) .permission-menu-access .permission-card-header {
    border-bottom-color: #304852 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .permission-menu-access .permission-card-row,
html[data-theme="dark"] .page:not(.login-only-layout) .permission-menu-access .permission-child-action {
    border-color: #304852 !important;
    background: #17272f !important;
}

/* Devices, activity logs, and announcements use page-local light surfaces.
   Complete their dark-theme treatment so inherited light text never lands on white. */
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .device-summary-grid article,
    .device-table-panel,
    .system-log-card,
    .announcement-admin-card,
    .announcement-list-item
) {
    color: #dce8ec !important;
    border-color: #304852 !important;
    background: #132229 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .2) !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .device-table-panel-heading,
    .system-log-card-header,
    .system-log-pagination,
    .announcement-admin-card-header
) {
    color: #dce8ec !important;
    border-color: #304852 !important;
    background: #17272f !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .device-summary-grid span,
    .device-table-panel-heading p,
    .device-table td small,
    .system-log-pagination,
    .announcement-form-grid label,
    .announcement-list-item p,
    .announcement-list-item small,
    .announcement-empty-state
) {
    color: #a8bac3 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .device-summary-grid strong,
    .device-table-panel-heading h2,
    .system-log-card-header h2,
    .announcement-admin-card-header h2,
    .announcement-list-title-row h3
) {
    color: #f3f8fa !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .device-table-panel-heading > span,
    .announcement-admin-card-header span
) {
    color: #72ddd2 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .device-refresh-button {
    color: #9aeee6 !important;
    border-color: #41616d !important;
    background: #17272f !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .device-refresh-button:hover:not(:disabled) {
    color: #ffffff !important;
    border-color: #5bd2c7 !important;
    background: #1b403a !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .system-log-card .table-responsive {
    background: #132229 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .system-log-count {
    color: #92ece3 !important;
    background: #173a35 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .system-log-pagination-actions > :where(a, button) {
    color: #dce8ec !important;
    border-color: #435d69 !important;
    background: #132229 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .system-log-pagination-actions > :where(a, button):hover:not(.disabled):not(:disabled) {
    color: #ffffff !important;
    border-color: #5bd2c7 !important;
    background: #1b403a !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .announcement-form-grid {
    background: #132229 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .announcement-list-title-row span {
    color: #92ece3 !important;
    background: #173a35 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .announcement-list-item button {
    color: #dce8ec !important;
    border-color: #435d69 !important;
    background: #17272f !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .announcement-list-item button:hover,
html[data-theme="dark"] .page:not(.login-only-layout) .announcement-list-item button:focus-visible {
    color: #ffffff !important;
    border-color: #5bd2c7 !important;
    background: #1b403a !important;
}

/* Service Record action modal. */
html[data-theme="dark"] .page:not(.login-only-layout) .action-button.service-record {
    color: #8de8df !important;
    border-color: #3d8179 !important;
    background: #173a35 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .service-record-modal-dialog {
    color: #dce8ec !important;
    border-color: #304852 !important;
    background: #0b1318 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .service-record-modal-header {
    color: #ffffff !important;
    border-color: #2b8078 !important;
    background: linear-gradient(135deg, #0b5f59, #123f3c) !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .service-record-modal-header :where(h1, p, strong, span) {
    color: inherit !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .service-record-modal-toolbar,
    .service-record-new-entry,
    .service-record-existing-section,
    .service-record-entry-card
) {
    color: #dce8ec !important;
    border-color: #304852 !important;
    background: #132229 !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .service-record-section-heading,
    .service-record-entry-card-header
) {
    border-color: #304852 !important;
    background: #17272f !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .service-record-modal-toolbar strong,
    .service-record-section-heading h2,
    .service-record-entry-card-header strong
) { color: #f3f8fa !important; }
html[data-theme="dark"] .page:not(.login-only-layout) :where(
    .service-record-modal-toolbar span,
    .service-record-entry-form > label > span
) { color: #a8bac3 !important; }
html[data-theme="dark"] .page:not(.login-only-layout) .service-record-present-toggle { color: #dce8ec !important; }
html[data-theme="dark"] .page:not(.login-only-layout) .service-record-entry-form .employee-date-field .modern-date-control {
    color: #e7f0f3 !important;
    border-color: #435d69 !important;
    background: #0f1d24 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .service-record-entry-form .employee-date-field .modern-date-display {
    color: #e7f0f3 !important;
    -webkit-text-fill-color: #e7f0f3 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .service-record-entry-form .employee-date-field .modern-date-trigger {
    color: #8de8df !important;
    border-left-color: #435d69 !important;
    background: #173a35 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .service-record-entry-form > label.service-record-field:focus-within > span:first-child,
html[data-theme="dark"] .page:not(.login-only-layout) .service-record-entry-form > label.service-record-field.has-floating-label > span:first-child {
    color: #72ddd2 !important;
    background: #132229 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .service-record-entry-form > label.service-record-field:not(.is-empty):not(.is-dirty) > span:first-child {
    color: #5EEAD4 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .service-record-entry-form > label.service-record-field.is-empty > span:first-child {
    color: #FDA4AF !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .service-record-entry-form > label.service-record-field.is-dirty > span:first-child {
    color: #FDE68A !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .service-record-type-badge {
    color: #92ece3 !important;
    border-color: #3d8179 !important;
    background: #173a35 !important;
}
html[data-theme="dark"] .page:not(.login-only-layout) .service-record-type-badge.is-separation {
    color: #fdba74 !important;
    border-color: #7c4b2a !important;
    background: #3a271b !important;
}

/* Preserve printable documents as white paper. */
html[data-theme="dark"] .page:not(.login-only-layout) :where(.print-page, .report-print-page, .payslip-print-page, .coe-print-page) {
    color: #111827;
    background: #ffffff;
    color-scheme: light;
}

@media print {
    .theme-toggle { display: none !important; }
}

/* Add/Edit date controls: Chromium can retain a light-mode text fill even
   when the input itself has the correct dark background and foreground. */
html[data-theme="dark"] .page:not(.login-only-layout) :is(
    .employee-edit-form,
    .service-record-entry-form,
    .cos-history-dialog,
    .announcement-admin-card,
    .salary-annex-reference-form
) input[type="date"]:not(.modern-date-source) {
    color: #f3f8fa !important;
    -webkit-text-fill-color: #f3f8fa !important;
    color-scheme: dark !important;
    opacity: 1 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) :is(.employee-edit-form, .service-record-entry-form, .cos-history-dialog, .announcement-admin-card, .salary-annex-reference-form) input[type="date"]:not(.modern-date-source)::-webkit-datetime-edit,
html[data-theme="dark"] .page:not(.login-only-layout) :is(.employee-edit-form, .service-record-entry-form, .cos-history-dialog, .announcement-admin-card, .salary-annex-reference-form) input[type="date"]:not(.modern-date-source)::-webkit-datetime-edit-fields-wrapper,
html[data-theme="dark"] .page:not(.login-only-layout) :is(.employee-edit-form, .service-record-entry-form, .cos-history-dialog, .announcement-admin-card, .salary-annex-reference-form) input[type="date"]:not(.modern-date-source)::-webkit-datetime-edit-day-field,
html[data-theme="dark"] .page:not(.login-only-layout) :is(.employee-edit-form, .service-record-entry-form, .cos-history-dialog, .announcement-admin-card, .salary-annex-reference-form) input[type="date"]:not(.modern-date-source)::-webkit-datetime-edit-month-field,
html[data-theme="dark"] .page:not(.login-only-layout) :is(.employee-edit-form, .service-record-entry-form, .cos-history-dialog, .announcement-admin-card, .salary-annex-reference-form) input[type="date"]:not(.modern-date-source)::-webkit-datetime-edit-year-field,
html[data-theme="dark"] .page:not(.login-only-layout) :is(.employee-edit-form, .service-record-entry-form, .cos-history-dialog, .announcement-admin-card, .salary-annex-reference-form) input[type="date"]:not(.modern-date-source)::-webkit-datetime-edit-text {
    color: #f3f8fa !important;
    -webkit-text-fill-color: #f3f8fa !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) :is(
    .employee-edit-form,
    .service-record-entry-form,
    .cos-history-dialog,
    .announcement-admin-card,
    .salary-annex-reference-form
) .modern-date-display {
    color: #f3f8fa !important;
    -webkit-text-fill-color: #f3f8fa !important;
    opacity: 1 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) :is(
    .employee-edit-form,
    .service-record-entry-form,
    .cos-history-dialog,
    .announcement-admin-card,
    .salary-annex-reference-form
) :is(input[type="date"]:disabled, .modern-date-control.is-disabled .modern-date-display) {
    color: #a7bbc4 !important;
    -webkit-text-fill-color: #a7bbc4 !important;
    opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle,
    html[data-theme="dark"] .page:not(.login-only-layout) * { transition-duration: 0s !important; }
}

/* Appointment documents */
html[data-theme="dark"] .page:not(.login-only-layout) :is(
    .appointment-documents-summary,
    .appointment-document-sequence,
    .appointment-document-uploader
) {
    border-color: #2f4b55 !important;
    background: #12242c !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .25) !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) :is(
    .appointment-documents-page-heading h1,
    .appointment-documents-summary h2,
    .appointment-document-uploader-heading h2,
    .appointment-document-files-heading h3,
    .appointment-document-step-copy strong,
    .appointment-document-file-row strong,
    .appointment-document-dropzone strong
) {
    color: #f1f7f8 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) :is(
    .appointment-documents-page-heading p,
    .appointment-documents-summary p,
    .appointment-document-rule,
    .appointment-document-step-copy small,
    .appointment-document-step-status,
    .appointment-document-files-heading span,
    .appointment-document-no-files,
    .appointment-document-file-row small
) {
    color: #a9bec7 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .appointment-documents-progress {
    background: #29414a !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .appointment-document-sequence li.is-current {
    border-color: #2aa99e !important;
    background: #173a3a !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .appointment-document-step-number,
html[data-theme="dark"] .page:not(.login-only-layout) .appointment-document-requirement.is-optional {
    color: #c1d2d8 !important;
    background: #29414a !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .appointment-document-requirement.is-required {
    color: #fecdd3 !important;
    background: #5f1d32 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .appointment-document-dropzone {
    border-color: #3e746f !important;
    color: #a9bec7 !important;
    background: #0e1e25 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .appointment-document-dropzone:hover {
    border-color: #2bc0b2 !important;
    background: #11302f !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .appointment-document-dropzone.is-uploading {
    border-color: #2bc0b2 !important;
    background: #11302f !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .appointment-document-upload-progress {
    background: #29464d !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .appointment-document-upload-status {
    color: #bdd0d6 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) :is(
    .appointment-document-files-heading,
    .appointment-document-file-row,
    .appointment-document-navigation
) {
    border-color: #2c4650 !important;
}

html[data-theme="dark"] .appointment-sequence-confirmation {
    border-color: #36525c !important;
    background: #12242c !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55) !important;
}

html[data-theme="dark"] .appointment-sequence-confirmation h2 {
    color: #f1f7f8 !important;
}

html[data-theme="dark"] .appointment-sequence-confirmation p {
    color: #a9bec7 !important;
}

html[data-theme="dark"] .appointment-document-notice {
    border-color: #32645f !important;
    background: #14312f !important;
    color: #b8eee6 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .45) !important;
}

html[data-theme="dark"] .appointment-document-notice.is-error {
    border-color: #713a45 !important;
    background: #321c23 !important;
    color: #fecdd3 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .appointment-document-checklist-row {
    border-color: #2f4b55 !important;
    background: #12242c !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2) !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .appointment-document-checklist-row.is-current {
    border-color: #2bb5a9 !important;
    background: #143038 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .appointment-document-checklist-row.is-complete {
    border-color: #32645f !important;
    background: #142b30 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .appointment-document-checklist-row.is-locked {
    background: #102129 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) form[data-employee-edit-tabs] .employee-documents-workspace,
html[data-theme="dark"] .page:not(.login-only-layout) form[data-employee-edit-tabs] .employee-edit-document-grid {
    border-color: #304852 !important;
    background: #0b171d !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) form[data-employee-edit-tabs] .employee-edit-documents-summary {
    border-bottom-color: #304852 !important;
    background: #12242c !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) form[data-employee-edit-tabs] .employee-edit-documents-summary h3,
html[data-theme="dark"] .page:not(.login-only-layout) form[data-employee-edit-tabs] .employee-edit-document-card-name {
    color: #f1f7f8 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) form[data-employee-edit-tabs] .employee-edit-documents-summary p,
html[data-theme="dark"] .page:not(.login-only-layout) form[data-employee-edit-tabs] .employee-edit-document-card .appointment-document-checklist-copy p {
    color: #a9bec7 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) form[data-employee-edit-tabs] .employee-edit-document-card.is-locked .employee-edit-document-card-name {
    color: #8298a2 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) form[data-employee-edit-tabs] .employee-edit-document-card-body {
    border-top-color: #36515b !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) form[data-employee-edit-tabs] .employee-edit-document-card-chevron {
    border-color: #7896a2 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) :is(
    .appointment-document-checklist-title h2,
    .appointment-document-row-file strong
) {
    color: #f1f7f8 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) :is(
    .appointment-document-checklist-copy p,
    .appointment-document-row-status,
    .appointment-document-row-file small
) {
    color: #a9bec7 !important;
}

html[data-theme="dark"] .page:not(.login-only-layout) .appointment-document-row-file {
    border-color: #2d4852 !important;
    background: #0e2027 !important;
}

/* Superseded by css/responsive-records.css; retained temporarily for safe cleanup. */
@media (max-width: 0px) {
    .employee-reference-panel .reference-list-table.department-reference-table,
    .employee-reference-panel .reference-list-table.position-reference-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .employee-reference-panel .reference-list-table.department-reference-table tbody tr,
    .employee-reference-panel .reference-list-table.position-reference-table tbody tr,
    .personnel-submenu-panel .employee-records-table tbody tr,
    .reports-shell .report-table tbody tr {
        width: 100% !important;
        max-width: 100% !important;
        background-color: #ffffff !important;
    }

    html[data-theme="dark"] .page:not(.login-only-layout) .employee-reference-panel .reference-list-table.department-reference-table tbody tr,
    html[data-theme="dark"] .page:not(.login-only-layout) .employee-reference-panel .reference-list-table.position-reference-table tbody tr,
    html[data-theme="dark"] .page:not(.login-only-layout) .personnel-submenu-panel .employee-records-table tbody tr,
    html[data-theme="dark"] .page:not(.login-only-layout) .reports-shell .report-table tbody tr {
        color: #dce8ec !important;
        border-color: #344c57 !important;
        background: #132229 !important;
        background-color: #132229 !important;
    }

    .personnel-submenu-panel:not(.employee-reference-panel) .employee-records-table td[data-label="SG-SI"],
    .personnel-submenu-panel:not(.employee-reference-panel) .employee-records-table td[data-label="Basic Salary"],
    .reports-shell .report-table td[data-label="#"] {
        display: none !important;
    }

    .personnel-submenu-panel .employee-records-table td.action-cell .row-actions {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) !important;
        gap: .45rem !important;
        width: 100% !important;
    }

    .personnel-submenu-panel .employee-records-table td.action-cell :where(.action-button, .inline-action-form) {
        width: 100% !important;
    }
}