:root {
  color-scheme: light;
  --ink: #17332d;
  --muted: #64756f;
  --line: #dce6e1;
  --surface: #ffffff;
  --soft: #f3f8f5;
  --brand: #12483d;
  --brand-2: #1f6a59;
  --danger: #a23a36;
  --warning: #8a5d12;
  --shadow: 0 16px 50px rgba(24, 57, 49, .09);
  font-family: "Noto Sans Thai", "Leelawadee UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--soft); }
body { margin: 0; color: var(--ink); background: linear-gradient(180deg, #edf6f1 0, #f8faf9 320px); min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }

.app-header {
  position: sticky; top: 0; z-index: 20; min-height: 68px; padding: 12px max(18px, env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  color: #fff; background: rgba(18, 72, 61, .96); backdrop-filter: blur(12px);
}
.app-header strong, .app-header small { display: block; }
.app-header small { margin-top: 1px; opacity: .78; }
.header-user { text-align: right; font-size: .9rem; }
.text-button { border: 0; padding: 3px 0; color: #dceee7; background: transparent; }

main { width: min(920px, 100%); margin: 0 auto; padding: 28px 18px calc(100px + env(safe-area-inset-bottom)); }
.auth-card { max-width: 480px; margin: 9vh auto 0; padding: 34px; border: 1px solid var(--line); border-radius: 28px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); }
.login-form { display: grid; gap: 12px; margin-top: 20px; }
.admin-login { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.admin-login summary { color: var(--brand); cursor: pointer; font-weight: 750; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(1.55rem, 5vw, 2.25rem); line-height: 1.2; }
h2 { margin-bottom: 8px; font-size: 1.18rem; }
.eyebrow { margin-bottom: 5px; color: var(--brand-2); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.muted, .status { color: var(--muted); }
.status { min-height: 1.5em; margin: 12px 0 0; font-size: .92rem; }
.status.error { color: var(--danger); }
.page-heading, .section-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.role-chip, .badge { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border-radius: 999px; background: #dceee7; color: var(--brand); font-size: .78rem; font-weight: 700; }
.badge.warning { background: #fff2d2; color: var(--warning); }
.badge.danger { background: #fae5e4; color: var(--danger); }

.panel, .status-card, .list-card { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: 0 8px 28px rgba(24,57,49,.055); }
.panel { padding: 18px; }
.status-card { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 22px; }
.status-card div { padding: 10px; border-radius: 15px; background: var(--soft); }
.status-card span, .status-card strong { display: block; }
.status-card span { color: var(--muted); font-size: .82rem; }
.status-card strong { margin-top: 2px; font-size: 1.65rem; }
.status-card p { grid-column: 1 / -1; margin: 4px 4px 0; color: var(--muted); }
.attendance-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.button { min-height: 48px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: #fff; font-weight: 750; }
.button.primary { border-color: var(--brand); color: #fff; background: var(--brand); }
.button.secondary { color: var(--brand); background: #edf6f1; border-color: #c7ddd4; }
.button.danger { color: var(--danger); background: #fff; border-color: #e8c1bf; }
.button.full { width: 100%; }
.action-button { min-height: 64px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
label { display: grid; gap: 6px; color: #3f5851; font-size: .88rem; font-weight: 700; }
input, select, textarea { width: 100%; min-width: 0; border: 1px solid #cbd9d3; border-radius: 12px; padding: 11px 12px; color: var(--ink); background: #fff; }
textarea { resize: vertical; }
.wide { grid-column: 1 / -1; }
.section-title { margin: 28px 0 12px; }
.stack { display: grid; gap: 10px; }
.list-card { padding: 15px 16px; }
.list-card header { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.list-card strong, .list-card small { display: block; }
.list-card small { margin-top: 3px; color: var(--muted); }
.list-card footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.filters { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; margin-bottom: 14px; }
.summary-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.summary-strip div { padding: 12px; border-radius: 14px; background: #e7f2ed; }
.summary-strip strong, .summary-strip span { display: block; }
.summary-strip span { color: var(--muted); font-size: .78rem; }
.attendance-overview { margin: 14px 0 18px; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 8px 28px rgba(24,57,49,.055); }
.live-refresh { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 7px 10px; border: 1px solid #c7ddd4; border-radius: 999px; color: var(--brand-2); background: #edf6f1; font-size: .72rem; font-weight: 750; }
.live-refresh i { width: 8px; height: 8px; border-radius: 50%; background: #2c9a70; box-shadow: 0 0 0 4px rgba(44,154,112,.12); }
.attendance-overview-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.attendance-overview-header > div:first-child span, .attendance-overview-header > div:first-child strong { display: block; }
.attendance-overview-header > div:first-child span { color: var(--muted); font-size: .78rem; }
.attendance-overview-header > div:first-child strong { margin-top: 2px; font-size: 1.05rem; }
.attendance-rate { display: flex; align-items: baseline; gap: 8px; color: var(--brand); }
.attendance-rate strong { font-size: 1.8rem; line-height: 1; }
.attendance-rate span { color: var(--muted); font-size: .76rem; }
.attendance-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 14px; }
.attendance-metric { position: relative; min-width: 0; padding: 13px 14px 12px 17px; overflow: hidden; border-radius: 15px; background: var(--metric-bg, var(--soft)); }
.attendance-metric::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--metric-color, var(--brand)); }
.attendance-metric span, .attendance-metric strong, .attendance-metric small { display: block; }
.attendance-metric span { color: var(--muted); font-size: .76rem; font-weight: 700; }
.attendance-metric strong { margin: 2px 0; color: var(--metric-color, var(--brand)); font-size: 1.7rem; line-height: 1.1; }
.attendance-metric small { overflow: hidden; color: var(--muted); font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.attendance-metric.total { --metric-color: #12483d; --metric-bg: #edf6f1; }
.attendance-metric.checked-in, .attendance-metric.completed { --metric-color: #26755d; --metric-bg: #edf8f3; }
.attendance-metric.working { --metric-color: #a66a0b; --metric-bg: #fff7e8; }
.attendance-metric.leave { --metric-color: #405c9a; --metric-bg: #f0f3fb; }
.attendance-metric.absent { --metric-color: #a23a36; --metric-bg: #fff0ef; }
.attendance-metric.pending { --metric-color: #697872; --metric-bg: #f0f3f2; }
.attendance-distribution { display: flex; width: 100%; height: 12px; margin-top: 16px; overflow: hidden; border-radius: 999px; background: #e5ebe8; }
.attendance-distribution span { min-width: 3px; height: 100%; }
.attendance-distribution .completed, .attendance-legend .completed i { background: #26755d; }
.attendance-distribution .working, .attendance-legend .working i { background: #d18a1d; }
.attendance-distribution .leave, .attendance-legend .leave i { background: #4d69a8; }
.attendance-distribution .pending, .attendance-legend .pending i { background: #a5b0ac; }
.attendance-distribution .absent, .attendance-legend .absent i { background: #bd4b45; }
.attendance-distribution .empty { background: #d9dfdc; }
.attendance-legend { display: flex; flex-wrap: wrap; gap: 8px 15px; margin-top: 10px; color: var(--muted); font-size: .72rem; }
.attendance-legend span { display: inline-flex; align-items: center; gap: 5px; }
.attendance-legend i { width: 8px; height: 8px; border-radius: 50%; }
.attendance-legend strong { color: var(--ink); }
.attendance-badge.present, .attendance-badge.late, .attendance-badge.remote { color: #216550; background: #e1f2ea; }
.attendance-badge.completed { color: #216550; background: #e1f2ea; }
.attendance-badge.working { color: #8a5d12; background: #fff2d2; }
.attendance-badge.pending { color: #596a64; background: #edf1ef; }
.attendance-badge.half_day { color: #8a5d12; background: #fff2d2; }
.attendance-badge.leave { color: #405c9a; background: #edf0fa; }
.attendance-badge.absent { color: var(--danger); background: #fae5e4; }
.branch-infographics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.branch-infographic { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 8px 28px rgba(24,57,49,.045); }
.branch-infographic > header { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.branch-infographic > header button { min-width: 0; padding: 0; border: 0; color: var(--ink); background: transparent; text-align: left; }
.branch-infographic > header span, .branch-infographic > header small { display: block; }
.branch-infographic > header span { overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.branch-infographic > header small { margin-top: 2px; color: var(--muted); font-size: .68rem; }
.branch-infographic > header > strong { flex: 0 0 auto; color: var(--brand); font-size: 1.25rem; }
.employee-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 14px 8px; margin-top: 16px; }
.employee-icon { min-width: 0; padding: 0; border: 0; color: var(--status-color); background: transparent; }
.employee-icon.completed { --status-color: #26755d; }
.employee-icon.working { --status-color: #d18a1d; }
.employee-icon.leave { --status-color: #4d69a8; }
.employee-icon.pending { --status-color: #929f9a; }
.employee-icon.absent { --status-color: #bd4b45; }
.employee-figure { position: relative; display: block; width: 48px; height: 53px; margin: 0 auto; }
.employee-figure::before { content: ''; position: absolute; top: 0; left: 50%; width: 19px; height: 19px; border-radius: 50%; background: currentColor; transform: translateX(-50%); }
.employee-figure::after { content: ''; position: absolute; bottom: 1px; left: 50%; width: 41px; height: 29px; border-radius: 20px 20px 9px 9px; background: currentColor; transform: translateX(-50%); }
.employee-figure i { position: absolute; z-index: 1; right: 0; bottom: 0; width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; background: currentColor; }
.employee-figure b { position: absolute; z-index: 2; right: 0; bottom: 0; width: 20px; height: 20px; color: #fff; font-size: .72rem; line-height: 20px; text-align: center; }
.employee-figure.has-photo { width: 53px; height: 53px; border: 3px solid currentColor; border-radius: 50%; background: #fff; }
.employee-figure.has-photo::before, .employee-figure.has-photo::after { display: none; }
.employee-photo { display: block; width: 100%; height: 100%; border: 2px solid #fff; border-radius: 50%; object-fit: cover; }
.employee-figure.has-photo i { right: -4px; bottom: -3px; }
.employee-figure.has-photo b { right: -4px; bottom: -3px; }
.employee-icon small { display: block; margin-top: 5px; overflow: hidden; color: var(--ink); font-size: .76rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.employee-icon:focus-visible .employee-figure { outline: 3px solid #91bdb0; outline-offset: 3px; border-radius: 14px; }
.employee-attendance-detail { margin: 12px 0; padding: 15px 16px; border: 1px solid #bfd9cf; border-radius: 17px; background: #f5faf8; }
.employee-attendance-detail header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.employee-attendance-detail strong, .employee-attendance-detail small { display: block; }
.employee-attendance-detail small { color: var(--muted); }
.employee-attendance-detail p { margin: 10px 0 0; color: var(--muted); }
.employee-attendance-detail .detail-close { min-width: 38px; min-height: 38px; color: var(--muted); font-size: 1.5rem; line-height: 1; }
.icon-attendance-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.detail-note { padding: 10px 12px; border-radius: 12px; background: #fff; }
.manager-panel { margin-top: 28px; }
.admin-subnav { position: sticky; top: 68px; z-index: 15; display: flex; gap: 6px; margin: -8px -4px 18px; padding: 8px 4px; overflow-x: auto; background: rgba(248,250,249,.94); backdrop-filter: blur(12px); }
.admin-subnav button { flex: 0 0 auto; min-height: 42px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #fff; font-weight: 750; }
.admin-subnav button.active { border-color: var(--brand); color: #fff; background: var(--brand); }
.admin-section[hidden] { display: none; }
.compact-form { margin-top: 16px; }
details.panel > summary { cursor: pointer; color: var(--brand); }
.table-wrap { margin-top: 14px; overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.data-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.data-table th, .data-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.data-table th { color: var(--muted); background: var(--soft); font-size: .78rem; }
.data-table td { font-size: .88rem; }
.inline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.inline-fields .button { min-height: 42px; }
.employee-admin-card { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 1.5fr); gap: 18px; align-items: start; }
.employee-photo-editor { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 13px; align-items: start; }
.employee-photo-editor strong, .employee-photo-editor small { display: block; }
.employee-photo-editor small { margin: 2px 0 9px; color: var(--muted); }
.employee-photo-editor input[type="file"] { padding: 8px; font-size: .78rem; }
.employee-photo-preview { display: grid; place-items: center; width: 76px; height: 76px; overflow: hidden; border: 2px solid #c7ddd4; border-radius: 50%; color: var(--muted); background: var(--soft); font-size: 2rem; }
.employee-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.employee-photo-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.employee-photo-actions .button { min-height: 38px; padding: 7px 10px; font-size: .78rem; }
.list-card.inactive { opacity: .65; }
.history-controls { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-bottom: 12px; }
.history-controls strong { text-align: center; }
.history-summary { grid-template-columns: repeat(4, 1fr); }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; color: var(--muted); font-size: .76rem; }
.calendar-legend span::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; background: var(--status-color); }
.calendar-legend .present, .calendar-day.present { --status-color: #26755d; }
.calendar-legend .half_day, .calendar-day.half_day { --status-color: #d18a1d; }
.calendar-legend .absent, .calendar-day.absent { --status-color: #bd4b45; }
.calendar-legend .leave, .calendar-day.leave { --status-color: #4d69a8; }
.calendar-legend .off, .calendar-day.off { --status-color: #9aa7a2; }
.calendar-legend .no_data, .calendar-day.no_data { --status-color: #d9dfdc; }
.attendance-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
.calendar-weekday { padding: 4px 0; color: var(--muted); font-size: .74rem; font-weight: 750; text-align: center; }
.calendar-spacer { min-height: 1px; }
.calendar-day { position: relative; min-height: 74px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: #fff; text-align: left; }
.calendar-day::after { content: ''; position: absolute; right: 8px; bottom: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--status-color); }
.calendar-day strong, .calendar-day small, .calendar-day em { display: block; }
.calendar-day small { margin-top: 3px; color: var(--muted); font-size: .67rem; }
.calendar-day em { margin: 3px 13px 0 0; overflow: hidden; color: #405c9a; font-size: .61rem; font-style: normal; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.calendar-day.selected { outline: 2px solid var(--brand); outline-offset: 1px; }
.history-detail { margin-top: 14px; }
.export-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.payroll-calendar-card { overflow: hidden; }
.payroll-calendar-card > header, .payroll-print-sheet > header { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.payroll-calendar-card h2, .payroll-calendar-card p, .payroll-print-sheet h2, .payroll-print-sheet p { margin: 0; }
.payroll-person-summary { color: var(--muted); font-size: .82rem; text-align: right; }
.payroll-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.payroll-calendar-grid > b { padding: 4px; color: var(--muted); font-size: .72rem; text-align: center; }
.payroll-day { min-height: 60px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.payroll-day strong, .payroll-day small, .payroll-day em { display: block; }
.payroll-day small { margin-top: 1px; color: var(--status-color, var(--muted)); font-size: .64rem; font-weight: 750; }
.payroll-day em { margin-top: 2px; color: var(--muted); font-size: .58rem; font-style: normal; }
.payroll-day.present { --status-color: #26755d; background: #edf8f3; }
.payroll-day.half_day { --status-color: #a66a0b; background: #fff7e8; }
.payroll-day.absent { --status-color: #a23a36; background: #fff0ef; }
.payroll-day.leave { --status-color: #405c9a; background: #f0f3fb; }
.payroll-day.off, .payroll-day.no_data { --status-color: #7d8d87; background: #f4f6f5; }
.payroll-day.spacer { visibility: hidden; }
.print-report { display: none; }

.bottom-nav { position: fixed; z-index: 30; left: 50%; bottom: 0; transform: translateX(-50%); width: min(920px, 100%); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); display: flex; gap: 4px; border-top: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(14px); }
.bottom-nav button { flex: 1; min-width: 0; min-height: 50px; border: 0; border-radius: 13px; color: var(--muted); background: transparent; font-weight: 700; }
.bottom-nav button.active { color: var(--brand); background: #e6f1ec; }
.toast { position: fixed; z-index: 50; left: 50%; bottom: calc(82px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(90vw, 460px); padding: 13px 16px; border-radius: 14px; color: #fff; background: #233d36; box-shadow: var(--shadow); text-align: center; }

@media (min-width: 1024px) {
  main { width: min(1500px, 100%); padding-left: 28px; padding-right: 28px; }
  .view:not([data-view="manager"]) { width: min(920px, 100%); margin-inline: auto; }
  .attendance-tv-grid { display: grid; grid-template-columns: minmax(330px, 390px) minmax(0, 1fr); gap: 18px; align-items: start; }
  .attendance-tv-grid .attendance-overview { position: sticky; top: 138px; margin: 16px 0; }
  .attendance-tv-grid .attendance-overview-header { display: block; }
  .attendance-tv-grid .attendance-rate { margin-top: 12px; }
  .attendance-tv-grid .attendance-metrics { grid-template-columns: 1fr 1fr; }
  .attendance-tv-grid .branch-infographics { margin-top: 16px; }
  .attendance-tv-grid .employee-icon-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 24px 14px; }
  .attendance-tv-grid .employee-figure { width: 76px; height: 84px; }
  .attendance-tv-grid .employee-figure.has-photo { width: 84px; height: 84px; }
  .attendance-tv-grid .employee-figure::before { width: 30px; height: 30px; }
  .attendance-tv-grid .employee-figure::after { width: 64px; height: 46px; border-radius: 28px 28px 12px 12px; }
  .attendance-tv-grid .employee-figure i,
  .attendance-tv-grid .employee-figure b { width: 28px; height: 28px; line-height: 28px; font-size: .82rem; }
  .attendance-tv-grid .employee-figure.has-photo i,
  .attendance-tv-grid .employee-figure.has-photo b { right: -5px; bottom: -4px; }
  .attendance-tv-grid .employee-icon small { margin-top: 10px; font-size: 1.04rem; line-height: 1.2; }
  .attendance-tv-grid .branch-infographic { padding: 18px; }
  .attendance-tv-grid .branch-infographic > header span { font-size: 1rem; }
}

@media (max-width: 620px) {
  main { padding: 22px 14px calc(94px + env(safe-area-inset-bottom)); }
  .auth-card { margin-top: 5vh; padding: 24px 20px; border-radius: 22px; }
  .app-header { padding-left: 16px; padding-right: 16px; }
  .form-grid, .filters { grid-template-columns: 1fr; }
  .wide { grid-column: auto; }
  .attendance-actions { grid-template-columns: 1fr; }
  .status-card { padding: 14px; }
  .status-card strong { font-size: 1.35rem; }
  .inline-fields { grid-template-columns: 1fr; }
  .employee-admin-card { grid-template-columns: 1fr; }
  .history-controls { grid-template-columns: 1fr 1fr; }
  .history-controls strong { grid-column: 1 / -1; grid-row: 1; }
  .history-summary { grid-template-columns: 1fr 1fr; }
  .attendance-overview { padding: 14px; border-radius: 17px; }
  .attendance-overview-header { align-items: flex-start; }
  .attendance-rate { display: block; text-align: right; }
  .attendance-rate span { display: block; margin-top: 3px; }
  .attendance-metrics { grid-template-columns: 1fr 1fr; gap: 7px; }
  .attendance-metric { padding: 11px 10px 10px 14px; }
  .attendance-metric strong { font-size: 1.45rem; }
  .attendance-legend { gap: 7px 11px; }
  .branch-infographics { grid-template-columns: 1fr; }
  .live-refresh { display: none; }
  .attendance-calendar { gap: 4px; }
  .calendar-day { min-height: 62px; padding: 6px; border-radius: 11px; }
  .calendar-day small { display: none; }
  .calendar-day.leave em { display: block; margin-right: 0; font-size: .58rem; }
  .payroll-calendar-card > header { display: block; }
  .payroll-person-summary { margin-top: 6px; text-align: left; }
  .payroll-calendar-grid { gap: 3px; }
  .payroll-day { min-height: 48px; padding: 4px; border-radius: 7px; }
  .payroll-day em { display: none; }
}

@media print {
  @page { size: A4 portrait; margin: 10mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { color: #17332d; background: #fff; }
  body > .app-header, body > main, body > .bottom-nav, body > .toast { display: none !important; }
  .print-report { display: block; }
  .print-cover { margin-bottom: 7mm; padding-bottom: 4mm; border-bottom: 2px solid #12483d; }
  .print-cover p, .print-cover h1, .print-cover span { margin: 0; }
  .print-cover p { color: #1f6a59; font-size: 9pt; font-weight: 800; }
  .print-cover h1 { margin: 2mm 0 1mm; font-size: 19pt; }
  .print-cover span { color: #64756f; font-size: 8pt; }
  .payroll-print-sheet { page-break-after: always; break-after: page; }
  .payroll-print-sheet:last-child { page-break-after: auto; break-after: auto; }
  .payroll-print-sheet > header { padding-bottom: 3mm; border-bottom: 1px solid #dce6e1; }
  .payroll-print-sheet h2 { font-size: 15pt; }
  .payroll-print-sheet p, .payroll-person-summary { font-size: 8.5pt; }
  .payroll-calendar-grid { gap: 1.5mm; }
  .payroll-calendar-grid > b { font-size: 8pt; }
  .payroll-day { min-height: 27mm; padding: 2mm; border-radius: 2mm; }
  .payroll-day strong { font-size: 11pt; }
  .payroll-day small { font-size: 8pt; }
  .payroll-day em { font-size: 7pt; }
}

@media (prefers-reduced-motion: no-preference) {
  .view { animation: rise .18s ease-out; }
  @keyframes rise { from { opacity: .2; transform: translateY(5px); } }
}