.beijing-clock { display: block; color: #596771; font-size: 12px; font-variant-numeric: tabular-nums; margin-top: 7px; line-height: 1.6; }
.attendance-panel { padding: 0 0 22px; margin-bottom: 26px; border-bottom: 1px solid #d9e2e5; }
.attendance-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 15px; }
.work-status-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start; }
.work-command-wrap { min-width: 0; text-align: center; }
.work-command { min-height: 42px; border: 1px solid transparent; border-radius: 5px; font: inherit; padding: 8px 10px; color: white; overflow-wrap: anywhere; }
.work-command-wrap .work-command { width: 100%; }
.work-command-wrap > span { display: block; min-height: 18px; padding-top: 3px; color: #596771; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.command-start { background: #18754f; }
.command-meal { background: #996013; }
.command-toilet { background: #247687; }
.command-nap { background: #665388; }
.command-off { background: #8c4242; }
.command-resume { background: #2568a0; }
.work-command:hover { filter: brightness(.94); }
.work-command:focus-visible { outline: 3px solid #17212b; outline-offset: 2px; }
.work-command:disabled { opacity: .5; cursor: default; }
.work-badge { display: inline-block; white-space: nowrap; font-size: 12px; padding: 5px 9px; border-radius: 4px; font-weight: 600; }
.status-working { color: #166b43; background: #e5f4eb; }
.status-meal { color: #7a4c0d; background: #fff1d7; }
.status-toilet { color: #176271; background: #e4f3f5; }
.status-nap { color: #61447f; background: #eee7f6; }
.status-off { color: #684c4c; background: #eee8e8; }
.status-leave { color: #805014; background: #f9ecd9; }
.attendance-meta { color: #596771; font-size: 12px; line-height: 1.7; margin-top: 11px; overflow-wrap: anywhere; }
.monitor-notice { background: #eaf1f3; border-left: 3px solid #4d7a83; padding: 10px 12px; margin-top: 12px; font-size: 12px; line-height: 1.7; }
.monitor-notice > span { font-weight: 600; }
.monitor-notice p { margin-top: 3px; color: #53616c; }
.leave-form { display: grid; grid-template-columns: minmax(0, 1fr) 170px auto; gap: 12px; align-items: end; margin-top: 8px; }
.leave-form .field-label { margin-bottom: 0; }
.leave-form input { margin-top: 7px; }
.leave-form button { min-height: 40px; }
.attendance-feedback { font-size: 12px; min-height: 24px; margin-top: 10px; color: #365667; overflow-wrap: anywhere; line-height: 1.6; }
.attendance-dialog { width: min(740px, calc(100% - 28px)); }
.attendance-dialog .attendance-panel { border: 0; margin: 18px 0 0; padding: 0; }
.attendance-dialog .work-status-buttons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.attendance-admin { margin-bottom: 18px; }
.attendance-summary { display: flex; gap: 18px; flex-wrap: wrap; padding: 0 20px 16px; color: #596771; font-size: 12px; }
.attendance-alerts { padding: 0 20px; }
.attendance-alert { border-left: 3px solid #c28a28; background: #fff5df; margin-bottom: 10px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 12px; line-height: 1.7; }
.attendance-alert > div { min-width: 0; overflow-wrap: anywhere; }
.attendance-alert time { color: #6a6254; display: block; }
.attendance-alert button { flex: 0 0 auto; }
.attendance-table td { vertical-align: top; }
.attendance-table .employee-cell { white-space: normal; overflow-wrap: anywhere; max-width: 160px; }
.attendance-table .reason-cell { white-space: normal; overflow-wrap: anywhere; min-width: 170px; max-width: 300px; }
.attendance-admin .section-heading { align-items: center; }
.attendance-log-event strong, .attendance-log-event .build { display: block; }
.attendance-log-event .build { white-space: normal; }
.attendance-filters { display: flex; gap: 10px; flex-wrap: wrap; }
#attendanceLogs > .attendance-filters { padding: 0 20px 14px; }
.attendance-log-tabs { display: flex; align-items: stretch; border-bottom: 1px solid #cdd8de; }
.attendance-log-tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 9px 12px; font: inherit; font-size: 13px; cursor: pointer; color: #63717a; }
.attendance-log-tabs button[aria-selected="true"] { color: #176271; border-bottom-color: #247687; font-weight: 600; }
.attendance-log-tabs button:focus-visible { outline: 2px solid #247687; outline-offset: 2px; }
.attendance-log-table { min-width: 1030px; }
.attendance-time { display: block; white-space: pre-line; font-variant-numeric: tabular-nums; }
.attendance-duration { min-width: 112px; font-weight: 600; font-variant-numeric: tabular-nums; }
.log-phase { color: #63717a; white-space: nowrap; }
.log-ongoing { color: #996013; font-weight: 600; }
.log-returned { color: #18754f; }
.attendance-pagination { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 12px 20px; font-size: 12px; }
.attendance-log-caption { padding: 0 20px 14px; color: #67727b; font-size: 12px; }
.monitor-idle { color: #a65a06; font-weight: 600; }
.monitor-offline, .monitor-unavailable { color: #866940; }
.monitor-tracking { color: #18754f; }
.monitor-paused { color: #78838b; }
@media (max-width: 760px) {
  .work-status-buttons, .attendance-dialog .work-status-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-command { min-height: 54px; }
  .leave-form { grid-template-columns: minmax(0, 1fr) 120px; }
  .leave-form > label:first-child { grid-column: 1 / -1; }
  .employee-header { flex-wrap: wrap; }
  .attendance-heading { align-items: flex-start; }
  .attendance-alert { align-items: flex-start; }
  .desktop-toolbar { padding: 8px 12px; }
  .desktop-toolbar .employee-actions { gap: 8px; }
}