/* Shared status bubbles. Loaded after style.css on every application page. */
:where(.account-state, .status, .step-state, .shift-badge, .notification-new, .approval-kind, .live-badge) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  min-height: 26px;
  padding: 4px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: .68rem;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}

:where(.account-state.active, .account-state.attendance-masuk, .account-state.attendance-pulang, .status.success, .step-state.ready) {
  border-color: #86d5a4 !important;
  background: #e9f9ef !important;
  color: #116b35 !important;
}

:where(.account-state.late, .account-state.attendance-alpha, .status.danger, .status.error) {
  border-color: #f2aaa5 !important;
  background: #fff0ef !important;
  color: #a5261e !important;
}

:where(.account-state.review, .status.warning, .status.pending) {
  border-color: #e4c44c !important;
  background: #fff7cf !important;
  color: #725600 !important;
}

:where(.account-state.attendance-belum, .account-state.attendance-exempt, .account-state.attendance-libur) {
  border-color: #cbd5e1 !important;
  background: #eef2f7 !important;
  color: #475569 !important;
}

:root[data-theme="dark"] :where(.account-state, .status, .step-state, .shift-badge, .notification-new, .approval-kind, .live-badge) {
  border-color: #60718f !important;
  background: #26344f !important;
  color: #f1f5ff !important;
}

:root[data-theme="dark"] :where(.account-state.active, .account-state.attendance-masuk, .account-state.attendance-pulang, .status.success, .step-state.ready) {
  border-color: #55d58b !important;
  background: #155d38 !important;
  color: #ffffff !important;
}

:root[data-theme="dark"] :where(.account-state.late, .account-state.attendance-alpha, .status.danger, .status.error) {
  border-color: #ff8f88 !important;
  background: #702b2b !important;
  color: #ffffff !important;
}

:root[data-theme="dark"] :where(.account-state.review, .status.warning, .status.pending) {
  border-color: #f7c928 !important;
  background: #6b4e00 !important;
  color: #fff6c4 !important;
}

:root[data-theme="dark"] :where(.account-state.attendance-belum, .account-state.attendance-exempt, .account-state.attendance-libur) {
  border-color: #71809b !important;
  background: #2a3852 !important;
  color: #f4f7ff !important;
}

@media (max-width: 480px) {
  :where(.account-state, .status, .step-state, .shift-badge, .notification-new, .approval-kind, .live-badge) {
    min-height: 24px;
    padding: 3px 8px;
    font-size: .64rem;
  }
}

/* Theme control belongs to the left drawer only. Keep legacy page controls
   hidden in case an older HTML document is restored from browser/server cache. */
#scheduleThemeToggle,
#approvalThemeToggle,
.schedule-page .schedule-theme-toggle,
.approvals-page .page-theme-toggle {
  display: none !important;
}

.schedule-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}
.schedule-week-picker{
  display:grid;
  gap:5px;
  min-width:190px;
  text-align:left;
}
.schedule-week-picker>span{
  color:var(--muted);
  font-size:.65rem;
  font-weight:850;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.schedule-week-picker input{width:100%;min-height:44px}
:root[data-theme="dark"] .calendar-section,
:root[data-theme="dark"] .planner-card,
:root[data-theme="dark"] .schedule-stats .stat-card {
  background: #131d35 !important;
  border-color: #34496f !important;
  color: #edf2ff !important;
}
:root[data-theme="dark"] .week-calendar-wrapper,
:root[data-theme="dark"] .calendar-table,
:root[data-theme="dark"] .calendar-table tbody,
:root[data-theme="dark"] .calendar-table tr,
:root[data-theme="dark"] .calendar-table td {
  background-color: #101a30 !important;
  border-color: #34496f !important;
  color: #edf2ff !important;
}
@media (max-width: 760px) {
  .schedule-heading-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }
  .schedule-heading-actions .btn { width: 100%; }
  .schedule-week-picker{width:100%;min-width:0}
}

:root[data-theme="dark"] .approvals-page .approval-stats .stat-card,
:root[data-theme="dark"] .approvals-page > .card,
:root[data-theme="dark"] .approvals-page .list-head,
:root[data-theme="dark"] .approvals-page .unified-approval {
  background: #131d35 !important;
  border-color: #34496f !important;
  color: #edf2ff !important;
}
:root[data-theme="dark"] .approvals-page .unified-approval {
  background: #101a30 !important;
}
:root[data-theme="dark"] .approvals-page .unified-approval strong,
:root[data-theme="dark"] .approvals-page .approval-stats strong {
  color: #ffffff !important;
}
:root[data-theme="dark"] .approvals-page .unified-approval span:not(.account-state):not(.approval-kind),
:root[data-theme="dark"] .approvals-page .unified-approval small {
  color: #b9c7df !important;
}
:root[data-theme="dark"] .approvals-page .approval-kind {
  border-color: #61718e !important;
  background: #26344f !important;
  color: #f1f5ff !important;
}
:root[data-theme="dark"] .approvals-page .cash-admin-actions {
  background: transparent !important;
  border-color: rgba(116, 143, 184, 0.42) !important;
}
:root[data-theme="dark"] .approvals-page .cash-counter-field {
  background: transparent !important;
  border-color: transparent !important;
  color: #edf2ff !important;
}
:root[data-theme="dark"] .approvals-page .money-input {
  background: linear-gradient(135deg, #182641 0%, #152139 100%) !important;
  border-color: rgba(109, 137, 180, 0.5) !important;
  color: #edf2ff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
:root[data-theme="dark"] .approvals-page .money-input:focus-within {
  border-color: rgba(246, 214, 90, 0.78) !important;
  box-shadow: 0 0 0 3px rgba(246, 214, 90, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
:root[data-theme="dark"] .approvals-page .cash-counter-field label {
  color: #f6d65a !important;
}
:root[data-theme="dark"] .approvals-page .cash-admin-actions button:not(.danger) {
  border-color: #55b77a !important;
  background: #155d38 !important;
  color: #ffffff !important;
}
:root[data-theme="dark"] .approvals-page .cash-admin-actions button.danger,
:root[data-theme="dark"] .approvals-page .ops-actions button.danger {
  border-color: #ff8f88 !important;
  background: #702b2b !important;
  color: #ffffff !important;
}
/* Softer destructive action on the Payroll & Slip adjustment list. */
.payroll-page #adjustmentAdminList [data-delete-adjustment] {
  min-width: 72px;
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid #efaaa5 !important;
  border-radius: 10px !important;
  background: #fff5f4 !important;
  color: #a92b23 !important;
  font: inherit;
  font-size: .72rem;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 7px rgba(180, 35, 24, .08);
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.payroll-page #adjustmentAdminList [data-delete-adjustment]:hover {
  border-color: #d94b42 !important;
  background: #ffe6e3 !important;
  color: #8f211a !important;
  box-shadow: 0 5px 12px rgba(180, 35, 24, .15);
  transform: translateY(-1px);
}
.payroll-page #adjustmentAdminList [data-delete-adjustment]:active {
  box-shadow: none;
  transform: translateY(0) scale(.97);
}
.payroll-page #adjustmentAdminList [data-delete-adjustment]:focus-visible {
  outline: 3px solid rgba(239, 105, 97, .28);
  outline-offset: 2px;
}
:root[data-theme="dark"] .payroll-page #adjustmentAdminList [data-delete-adjustment] {
  border-color: #a94d50 !important;
  background: #3a2027 !important;
  color: #ffaaa5 !important;
  box-shadow: none;
}
:root[data-theme="dark"] .payroll-page #adjustmentAdminList [data-delete-adjustment]:hover {
  border-color: #ff8f88 !important;
  background: #572a31 !important;
  color: #ffffff !important;
}

/* Daftar Gaji: one continuous card surface without a lighter payment stripe. */
:root[data-theme="dark"] .payroll-summary-list > .payroll-employee-card {
  background: #101a30 !important;
  border-color: #3a4b70 !important;
}
:root[data-theme="dark"] .payroll-summary-list .payroll-payment-panel {
  background: transparent !important;
  border-color: #3a4b70 !important;
  color: #edf2ff !important;
}
:root[data-theme="dark"] .payroll-summary-list .payroll-payment-history {
  background: #17243e !important;
  border-color: #3a4b70 !important;
}
:root[data-theme="dark"] .payroll-summary-list .payroll-bank-detail {
  border-color: #3a4b70 !important;
}
:root[data-theme="dark"] .payroll-summary-list .payroll-money-summary > div {
  background: #17243e !important;
  border: 1px solid #293b5d !important;
  box-shadow: none !important;
}
:root[data-theme="dark"] .payroll-summary-list .payroll-money-summary > .net {
  background: #123826 !important;
  border-color: #32845a !important;
}

/* Shared date, month, and time popup palette for every page. */
:root[data-theme="dark"] .datetime-panel {
  background: #131f38 !important;
  border-color: #405477 !important;
  color: #edf2ff !important;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .48) !important;
}
:root[data-theme="dark"] .datetime-panel-head strong,
:root[data-theme="dark"] .date-picker-nav strong,
:root[data-theme="dark"] .time-picker-fields label,
:root[data-theme="dark"] .calendar-weekday {
  color: #edf2ff !important;
}
:root[data-theme="dark"] .datetime-panel-head span { color: #aebbd3 !important; }
:root[data-theme="dark"] .date-picker-nav button,
:root[data-theme="dark"] .month-picker-option {
  border-color: #405477 !important;
  background: #1b2945 !important;
  color: #edf2ff !important;
}
:root[data-theme="dark"] .date-picker-nav button:hover,
:root[data-theme="dark"] .month-picker-option:hover {
  border-color: #f7c928 !important;
  background: #293958 !important;
  color: #ffffff !important;
}
:root[data-theme="dark"] .month-picker-option.current {
  border-color: #cfae27 !important;
  box-shadow: inset 0 0 0 1px #cfae27 !important;
}
:root[data-theme="dark"] .month-picker-option.selected {
  border-color: #f7c928 !important;
  background: #080f24 !important;
  color: #f7c928 !important;
}
:root[data-theme="dark"] .calendar-day {
  background: transparent !important;
  color: #dce5f8 !important;
}
:root[data-theme="dark"] .calendar-day:hover {
  background: #293958 !important;
  color: #ffffff !important;
}
:root[data-theme="dark"] .calendar-day.today {
  box-shadow: inset 0 0 0 1px #f7c928 !important;
}
:root[data-theme="dark"] .calendar-day.selected {
  background: #f7c928 !important;
  color: #101b3f !important;
}
:root[data-theme="dark"] .calendar-day.outside-month { color: #71809b !important; }
:root[data-theme="dark"] .time-wheel {
  border-color: #405477 !important;
  background: linear-gradient(to bottom, #101a30 0 39%, #283655 39% 61%, #101a30 61% 100%) !important;
}
:root[data-theme="dark"] .time-wheel button { color: #9fadc7 !important; }
:root[data-theme="dark"] .time-wheel button.is-selected { color: #ffffff !important; }
:root[data-theme="dark"] .datetime-actions .btn-secondary {
  border-color: #526382 !important;
  background: #1b2945 !important;
  color: #edf2ff !important;
}

/* Broadcast history uses one continuous surface instead of stacked color bands. */
:root[data-theme="dark"] .broadcast-page .broadcast-history-card,
:root[data-theme="dark"] .broadcast-page .broadcast-history-card > .list-head,
:root[data-theme="dark"] .broadcast-page .broadcast-history-card > #broadcastHistory,
:root[data-theme="dark"] .broadcast-page .broadcast-history-card .empty-state {
  background: #131d35 !important;
  color: #edf2ff !important;
}
:root[data-theme="dark"] .broadcast-page .broadcast-history-card > .list-head {
  border: 0 !important;
  border-bottom: 1px solid #34496f !important;
  border-radius: 0 !important;
}
:root[data-theme="dark"] .broadcast-page .broadcast-history-card > #broadcastHistory {
  border: 0 !important;
}
:root[data-theme="dark"] .broadcast-page .broadcast-history-card .empty-state {
  min-height: 104px;
  border: 0 !important;
  border-radius: 0 !important;
}
:root[data-theme="dark"] .broadcast-page .broadcast-history-card .broadcast-item {
  background: #101a30 !important;
  border-color: #34496f !important;
}

/* Status Karyawan: header, filters, and employee grid share one surface. */
:root[data-theme="dark"] #employees,
:root[data-theme="dark"] #employees > .settings-list-card,
:root[data-theme="dark"] #employees > .settings-list-card > .list-head,
:root[data-theme="dark"] #employees #employeeStatusFilters,
:root[data-theme="dark"] #employees #employeeList {
  background: #131d35 !important;
  color: #edf2ff !important;
}
:root[data-theme="dark"] #employees > .settings-list-card > .list-head {
  border: 0 !important;
  border-bottom: 1px solid #34496f !important;
  border-radius: 0 !important;
}
:root[data-theme="dark"] #employees #employeeStatusFilters,
:root[data-theme="dark"] #employees #employeeList {
  border: 0 !important;
}
:root[data-theme="dark"] #employees .employee-attendance-tools {
  background: transparent !important;
}
:root[data-theme="dark"] #employees .team-card.attendance-employee-card {
  background: #0b1429 !important;
  border-color: #34496f !important;
}

/* Accounts: one dark surface across accordion sections and compensation form. */
:root[data-theme="dark"] #accounts,
:root[data-theme="dark"] #accounts .settings-form-card,
:root[data-theme="dark"] #accounts .settings-list-card,
:root[data-theme="dark"] #accounts .account-form-section,
:root[data-theme="dark"] #accounts .account-form-section > summary,
:root[data-theme="dark"] #accounts .account-form-section-body,
:root[data-theme="dark"] #accounts .employee-detail-fields,
:root[data-theme="dark"] #accounts .account-salary-fields {
  background: #131d35 !important;
  border-color: #34496f !important;
  color: #edf2ff !important;
  box-shadow: none !important;
}
:root[data-theme="dark"] #accounts .account-form-section > summary {
  border-radius: 13px 13px 0 0;
}
:root[data-theme="dark"] #accounts .account-form-section:not([open]) > summary {
  border-radius: 13px;
}
:root[data-theme="dark"] #accounts .account-form-section > summary span,
:root[data-theme="dark"] #accounts .salary-fields-heading strong {
  color: #ffffff !important;
}
:root[data-theme="dark"] #accounts .account-form-section > summary small,
:root[data-theme="dark"] #accounts .salary-fields-heading small {
  color: #b9c7df !important;
}
:root[data-theme="dark"] #accounts .account-salary-fields .salary-fields-heading,
:root[data-theme="dark"] #accounts .account-salary-fields .allowance-total-row {
  border-color: #3a4b70 !important;
  background: #131d35 !important;
}
:root[data-theme="dark"] #accounts .account-salary-fields .allowance-total-row {
  color: #74dfa0 !important;
}
:root[data-theme="dark"] #accounts .account-salary-fields .input-prefix {
  background: #101a30 !important;
  border-color: #405477 !important;
}
:root[data-theme="dark"] #accounts .account-salary-fields .input-prefix > span,
:root[data-theme="dark"] #accounts .account-salary-fields .input-prefix input {
  color: #edf2ff !important;
}
:root[data-theme="dark"] #accounts .salary-group-label { color: #f6d65a !important; }
:root[data-theme="dark"] #accounts .deduction-label { color: #ffaaa5 !important; }
:root[data-theme="dark"] #accounts #accountList {
  background: #131d35 !important;
  border-color: #34496f !important;
}
:root[data-theme="dark"] #accounts #accountList > .settings-item {
  background: #101a30 !important;
  border-color: #34496f !important;
}
:root[data-theme="dark"] #accounts #accountList .item-actions button {
  border-color: #526382 !important;
  border-radius: 9px !important;
  background: #1b2945 !important;
  color: #edf2ff !important;
}
:root[data-theme="dark"] #accounts #accountList .item-actions button.danger,
:root[data-theme="dark"] #accounts #accountList .item-actions [data-action="archive-account"] {
  border-color: #a94d50 !important;
  background: #3a2027 !important;
  color: #ffaaa5 !important;
}

/* Login appearance settings: remove the remaining light upload/control surface. */
:root[data-theme="dark"] #loginAppearance,
:root[data-theme="dark"] #loginAppearance .login-appearance-settings,
:root[data-theme="dark"] #loginAppearance .settings-form-card,
:root[data-theme="dark"] #loginAppearance .login-appearance-preview-card {
  background: #131d35 !important;
  border-color: #34496f !important;
  color: #edf2ff !important;
  box-shadow: none !important;
}
:root[data-theme="dark"] #loginAppearance .login-image-upload {
  border-color: #526382 !important;
  background: #101a30 !important;
  color: #edf2ff !important;
}
:root[data-theme="dark"] #loginAppearance .login-image-upload:hover {
  border-color: #f7c928 !important;
  background: #17243e !important;
}
:root[data-theme="dark"] #loginAppearance .login-image-upload span {
  color: #ffffff !important;
}
:root[data-theme="dark"] #loginAppearance .login-image-upload small {
  color: #aebbd3 !important;
}
:root[data-theme="dark"] #loginAppearance .login-crop-controls label > span,
:root[data-theme="dark"] #loginAppearance .login-crop-controls label > span b {
  color: #edf2ff !important;
}
:root[data-theme="dark"] #loginAppearance .login-crop-controls input[type="range"] {
  accent-color: #f7c928;
}
:root[data-theme="dark"] #loginAppearance .login-crop-controls input[type="range"]::-webkit-slider-runnable-track {
  border-radius: 999px;
  background: #405477;
}
:root[data-theme="dark"] #loginAppearance .login-crop-controls input[type="range"]::-moz-range-track {
  border-radius: 999px;
  background: #405477;
}
:root[data-theme="dark"] #loginAppearance #removeLoginAppearance {
  border-color: #526382 !important;
  background: #1b2945 !important;
  color: #edf2ff !important;
}

/* Dashboard weekly schedule: calm, continuous surface with clearer off-days. */
:root[data-theme="dark"] .dashboard-page .calendar-section,
:root[data-theme="dark"] .dashboard-page .calendar-section #exportArea,
:root[data-theme="dark"] .dashboard-page .calendar-table,
:root[data-theme="dark"] .dashboard-page .calendar-table tbody,
:root[data-theme="dark"] .dashboard-page .calendar-table tbody tr,
:root[data-theme="dark"] .dashboard-page .calendar-table tbody td {
  background: #101a30 !important;
  color: #edf2ff !important;
}
:root[data-theme="dark"] .dashboard-page .calendar-table tbody td {
  border-color: #293b5d !important;
}
:root[data-theme="dark"] .dashboard-page .calendar-table tbody tr:has(.calendar-branch-cell) > td {
  border-top: 2px solid #526382 !important;
}
:root[data-theme="dark"] .dashboard-page .calendar-branch-cell {
  background: #0d172b !important;
  border-right: 1px solid #405477 !important;
}
:root[data-theme="dark"] .dashboard-page .calendar-event {
  background: #131f38 !important;
  border-color: #405477 !important;
  box-shadow: none !important;
}
:root[data-theme="dark"] .dashboard-page .calendar-event.reguler,
:root[data-theme="dark"] .dashboard-page .calendar-event.pagi {
  border-color: #c9a915 !important;
}
:root[data-theme="dark"] .dashboard-page .calendar-event.off {
  border-color: #60718f !important;
  background: #1a2743 !important;
}
:root[data-theme="dark"] .dashboard-page .calendar-event.off > b {
  color: #ffffff !important;
}
:root[data-theme="dark"] .dashboard-page .calendar-event.off > span {
  color: #c3d0e7 !important;
  font-size: .62rem;
}
:root[data-theme="dark"] .dashboard-page .calendar-event.off > .off-note {
  color: #9fadc7 !important;
  font-size: .59rem;
  font-weight: 750;
}

/* Complete dark-mode boundary for the standalone schedule page. */
:root[data-theme="dark"] .schedule-page-body,
:root[data-theme="dark"] .schedule-page {
  background-color: #0b1224 !important;
  color: #edf2ff !important;
}
:root[data-theme="dark"] .schedule-page .stat-card,
:root[data-theme="dark"] .schedule-page .planner-card,
:root[data-theme="dark"] .schedule-page .calendar-section {
  background: #131d35 !important;
  border-color: #34496f !important;
  color: #edf2ff !important;
  box-shadow: none !important;
}
:root[data-theme="dark"] .schedule-page .week-calendar-wrapper,
:root[data-theme="dark"] .schedule-page .calendar-table,
:root[data-theme="dark"] .schedule-page .calendar-table tbody,
:root[data-theme="dark"] .schedule-page .calendar-table tbody tr,
:root[data-theme="dark"] .schedule-page .calendar-table tbody td {
  background: #101a30 !important;
  border-color: #34496f !important;
  color: #edf2ff !important;
}
:root[data-theme="dark"] .schedule-page .calendar-branch-cell {
  background: #0d172b !important;
  border-right-color: #405477 !important;
}
:root[data-theme="dark"] .schedule-page .calendar-event {
  background: #131f38 !important;
  border-color: #526382 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
:root[data-theme="dark"] .schedule-page .calendar-event.pagi,
:root[data-theme="dark"] .schedule-page .calendar-event.reguler {
  border-color: #c9a915 !important;
}
:root[data-theme="dark"] .schedule-page .calendar-event.off {
  background: #1a2743 !important;
  border-color: #60718f !important;
}
:root[data-theme="dark"] .schedule-page .planner-day,
:root[data-theme="dark"] .schedule-page .employee-options,
:root[data-theme="dark"] .schedule-page .employee-options label,
:root[data-theme="dark"] .schedule-page .calendar-task-options label,
:root[data-theme="dark"] .schedule-page-body .calendar-edit-dialog {
  background: #131f38 !important;
  border-color: #405477 !important;
  color: #edf2ff !important;
}
:root[data-theme="dark"] .schedule-page .planner-help,
:root[data-theme="dark"] .schedule-page .settings-note {
  background: #1b2945 !important;
  border-color: #405477 !important;
  color: #c3d0e7 !important;
}
:root[data-theme="dark"] .schedule-page h1,
:root[data-theme="dark"] .schedule-page h2,
:root[data-theme="dark"] .schedule-page h3,
:root[data-theme="dark"] .schedule-page strong,
:root[data-theme="dark"] .schedule-page-body .calendar-edit-dialog h2 {
  color: #ffffff !important;
}
:root[data-theme="dark"] .schedule-page .muted,
:root[data-theme="dark"] .schedule-page small {
  color: #b9c7df !important;
}

/* Final shared bubble pass. Keep this at the end so legacy component rules
   cannot restore dark text or pale backgrounds in night mode. */
:root[data-theme="dark"] :is(
  .account-state,
  .status,
  .step-state,
  .shift-badge,
  .notification-new,
  .approval-kind,
  .live-badge,
  .role-badge,
  .date-chip,
  .selection-count
) {
  border-color: #7183a3 !important;
  background: #263650 !important;
  color: #f7f9ff !important;
  opacity: 1 !important;
}

:root[data-theme="dark"] :is(
  .account-state.active,
  .account-state.attendance-masuk,
  .account-state.attendance-pulang,
  .status.success,
  .step-state.ready,
  .date-chip,
  .live-badge
) {
  border-color: #58dc91 !important;
  background: #155d38 !important;
  color: #ffffff !important;
}

:root[data-theme="dark"] :is(
  .account-state.late,
  .account-state.attendance-alpha,
  .status.danger,
  .status.error
) {
  border-color: #ff9b94 !important;
  background: #702b2b !important;
  color: #ffffff !important;
}

:root[data-theme="dark"] :is(
  .account-state.review,
  .status.warning,
  .status.pending
) {
  border-color: #f7c928 !important;
  background: #674d00 !important;
  color: #fff7c7 !important;
}

:root[data-theme="dark"] :is(
  .account-state.attendance-belum,
  .account-state.attendance-exempt,
  .account-state.attendance-libur
) {
  border-color: #8292ad !important;
  background: #30415e !important;
  color: #ffffff !important;
}

:root[data-theme="dark"] :is(
  .role-badge.admin,
  .god-label,
  .selection-count,
  .salary-fields-heading > span
) {
  border-color: #f7c928 !important;
  background: #101b3f !important;
  color: #ffe36b !important;
}

:root[data-theme="dark"] .attendance-status-filters button {
  border-color: #526786 !important;
  background: #1b2945 !important;
  color: #e8eefb !important;
}

:root[data-theme="dark"] .attendance-status-filters button.active {
  border-color: #f7c928 !important;
  background: #f7c928 !important;
  color: #101b3f !important;
}

/* Employee attendance card: dedicate a second row to the status badge so it
   never sits on top of long employee names. */
#employees .team-card.attendance-employee-card {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "photo information"
    "photo attendance-status";
  align-items: center;
  row-gap: 6px;
}

#employees .team-card.attendance-employee-card > .team-photo {
  grid-area: photo;
}

#employees .team-card.attendance-employee-card > .team-info {
  grid-area: information;
  min-width: 0;
  padding-right: 0;
}

#employees .team-card.attendance-employee-card > .account-state {
  position: static !important;
  grid-area: attendance-status;
  justify-self: start;
  max-width: 100%;
  margin: 0;
}

/* Jadwal cabang: retain clear shift identities in night mode. */
:root[data-theme="dark"] body.schedule-page-body {
  background: #0b1224 !important;
}

:root[data-theme="dark"] body.schedule-page-body > .schedule-page {
  background: transparent !important;
}

:root[data-theme="dark"] .schedule-page .calendar-section {
  background: linear-gradient(145deg, #131f38 0%, #101a30 62%, #14213a 100%) !important;
  border-color: #405477 !important;
  box-shadow: 0 18px 45px rgba(2, 8, 23, .24) !important;
}

:root[data-theme="dark"] .schedule-page .calendar-table thead th {
  background: linear-gradient(180deg, #213253, #1b2945) !important;
}

:root[data-theme="dark"] .schedule-page .calendar-table tbody tr:nth-child(even) > td:not(.calendar-branch-cell) {
  background: #111d34 !important;
}

:root[data-theme="dark"] .schedule-page .calendar-event.pagi {
  background: linear-gradient(145deg, #3b3112, #2d2816) !important;
  border-color: #e2ba1c !important;
  color: #fff7cf !important;
}

:root[data-theme="dark"] .schedule-page .calendar-event.malam {
  background: linear-gradient(145deg, #172e58, #132441) !important;
  border-color: #527db8 !important;
  color: #eef5ff !important;
}

:root[data-theme="dark"] .schedule-page .calendar-event.reguler {
  background: linear-gradient(145deg, #153c42, #142f37) !important;
  border-color: #3d8f94 !important;
  color: #e8ffff !important;
}

:root[data-theme="dark"] .schedule-page .calendar-event.off {
  background: linear-gradient(145deg, #333d50, #293346) !important;
  border-color: #697894 !important;
  color: #f1f4fa !important;
}

:root[data-theme="dark"] .schedule-page .calendar-event.pagi .event-person {
  background: rgba(22, 18, 7, .58) !important;
  border-color: rgba(226, 186, 28, .4) !important;
}

:root[data-theme="dark"] .schedule-page .calendar-event.malam .event-person {
  background: rgba(7, 17, 36, .58) !important;
  border-color: rgba(82, 125, 184, .46) !important;
}

:root[data-theme="dark"] .schedule-page .calendar-event.reguler .event-person {
  background: rgba(7, 27, 31, .58) !important;
  border-color: rgba(61, 143, 148, .46) !important;
}

:root[data-theme="dark"] .schedule-page .calendar-event.pagi > span {
  color: #ffe790 !important;
}

:root[data-theme="dark"] .schedule-page .calendar-event.malam > span {
  color: #bfd8ff !important;
}

:root[data-theme="dark"] .schedule-page .calendar-event.reguler > span {
  color: #a8e8e5 !important;
}

:root[data-theme="dark"] .schedule-page .calendar-event.off > span,
:root[data-theme="dark"] .schedule-page .calendar-event.off > small {
  color: #cbd5e7 !important;
}

/* Libur dan tidak wajib adalah status berbeda, jangan memakai warna netral yang sama. */
.account-state.attendance-belum,
.attendance-status-filters button[data-status="belum"] {
  border-color: #d69e1f !important;
  background: #fff4cc !important;
  color: #7a5200 !important;
}
.attendance-status-filters button[data-status="belum"].active {
  border-color: #b77900 !important;
  background: #d99a13 !important;
  color: #ffffff !important;
}
.account-state.attendance-libur,
.attendance-status-filters button[data-status="libur"] {
  border-color: #7195e8 !important;
  background: #e8efff !important;
  color: #244a9b !important;
}
.account-state.attendance-exempt,
.attendance-status-filters button[data-status="exempt"] {
  border-color: #98a2b3 !important;
  background: #f2f4f7 !important;
  color: #475467 !important;
}
.attendance-status-filters button[data-status="libur"].active {
  border-color: #315eb8 !important;
  background: #315eb8 !important;
  color: #ffffff !important;
}
.attendance-status-filters button[data-status="exempt"].active {
  border-color: #475467 !important;
  background: #475467 !important;
  color: #ffffff !important;
}
:root[data-theme="dark"] .account-state.attendance-belum,
:root[data-theme="dark"] .attendance-status-filters button[data-status="belum"] {
  border-color: #e3b52b !important;
  background: #594515 !important;
  color: #fff0a6 !important;
}
:root[data-theme="dark"] .attendance-status-filters button[data-status="belum"].active {
  border-color: #f7c928 !important;
  background: #d6a900 !important;
  color: #101b3f !important;
}
:root[data-theme="dark"] .account-state.attendance-libur,
:root[data-theme="dark"] .attendance-status-filters button[data-status="libur"] {
  border-color: #7fa6ff !important;
  background: #263b76 !important;
  color: #edf3ff !important;
}
:root[data-theme="dark"] .account-state.attendance-exempt,
:root[data-theme="dark"] .attendance-status-filters button[data-status="exempt"] {
  border-color: #8290a8 !important;
  background: #344054 !important;
  color: #f2f4f7 !important;
}
:root[data-theme="dark"] .attendance-status-filters button[data-status="libur"].active {
  border-color: #91b2ff !important;
  background: #4269bf !important;
  color: #ffffff !important;
}
:root[data-theme="dark"] .attendance-status-filters button[data-status="exempt"].active {
  border-color: #a6b0c2 !important;
  background: #596579 !important;
  color: #ffffff !important;
}