.attendance-panel { color: #23343c; }
.attendance-toolbar { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; margin: 24px 0; }
.attendance-toolbar label, .attendance-auth label { display: grid; gap: 8px; font-size: 13px; font-weight: 600; }
.attendance-toolbar input, .attendance-toolbar select, .attendance-auth input { min-height: 46px; min-width: 150px; padding: 10px 12px; border: 1px solid #d9d5d2; border-radius: 8px; background: #fffdf8; color: inherit; font: inherit; }
.attendance-employee { flex: 1; }
.attendance-toolbar button, .attendance-auth button { min-height: 46px; padding: 10px 16px; }
.attendance-summary { display: flex; flex-wrap: wrap; gap: 24px 56px; padding: 22px 0; margin: 0; border-block: 1px solid #d9d5d2; }
.attendance-summary dt { font-size: 13px; color: #62615f; }
.attendance-summary dd { margin: 8px 0 0; font-size: 23px; font-weight: 650; font-variant-numeric: tabular-nums; }
.attendance-table-wrap { overflow-x: auto; border: 1px solid #e0dad5; border-radius: 10px; background: #fffdf8; }
.attendance-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
.attendance-table th, .attendance-table td { padding: 17px 18px; border-bottom: 1px solid #e8e1db; vertical-align: top; }
.attendance-table thead th { background: #f2ede8; color: #65615f; font-size: 12px; font-weight: 650; white-space: nowrap; }
.attendance-table tbody th { min-width: 160px; font-weight: 600; }
.attendance-table tbody tr:last-child > * { border-bottom: 0; }
.attendance-table td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.attendance-table td > span { display: block; min-height: 25px; }
.attendance-table small { display: block; margin-top: 3px; font-size: 11px; color: #716661; }
.attendance-hours { font-weight: 700; }
.attendance-table .attendance-state { display: inline-flex; min-height: 28px; align-items: center; border-radius: 5px; padding: 4px 8px; font-size: 12px; background: #eee9e4; color: #625b56; }
.attendance-table .attendance-state.is-working { color: #256449; background: #e8f0e9; }
.attendance-note { color: #70665e; font-size: 12px; line-height: 1.6; margin: 16px 0; }
.attendance-table .attendance-empty { padding: 40px 24px; text-align: center; white-space: normal; color: #716661; }
.attendance-auth { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-top: 20px; }
.attendance-auth[hidden], #attendanceReport[hidden] { display: none; }
.attendance-warning { max-width: 230px; color: #93451e !important; font-weight: 500; }
#attendanceMessage { font-size: 14px; color: #873542; }
.attendance-panel button:disabled { opacity: .55; cursor: wait; }
.attendance-panel :focus-visible, .pos-attendance-toggle:focus-visible { outline: 3px solid #a34d5f; outline-offset: 3px; }
.pos-attendance-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 108px; margin: 12px auto 0; padding: 9px 16px; border: 1px solid #b04551; border-radius: 7px; background: #fff8f5; color: #a02e3e; font: 650 13px/1.2 "DM Sans", Arial, sans-serif; cursor: pointer; }
.pos-attendance-toggle:hover, .pos-attendance-toggle[aria-pressed="true"] { background: #a02e3e; color: #fff8f5; }
.pos-attendance-toggle:disabled { opacity: .55; cursor: wait; }
.pos-attendance-result { margin: 10px auto 0; max-width: 320px; color: #27674c; font: 600 14px/1.6 "DM Sans", Arial, sans-serif; }
.pos-attendance-result:empty { display: none; }
.pos-login-dialog[data-clock-mode="out"] .pos-login-card h2 { color: #a02e3e; }
@media(max-width:700px) { .attendance-toolbar { gap: 12px; } .attendance-toolbar label { flex: 1 1 calc(50% - 12px); min-width: 0; } .attendance-toolbar input, .attendance-toolbar select { min-width: 0; width: 100%; } .attendance-toolbar .attendance-employee { flex-basis: 100%; } .attendance-summary { gap: 20px; } .attendance-summary dd { font-size: 20px; } .attendance-table th, .attendance-table td { padding: 14px 12px; } }