@font-face {
  font-family: 'AttendanceSarabun';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(attendance-fonts/sarabun-0.ttf) format('truetype');
}
@font-face {
  font-family: 'AttendanceSarabun';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(attendance-fonts/sarabun-1.ttf) format('truetype');
}
@font-face {
  font-family: 'AttendanceSarabun';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(attendance-fonts/sarabun-2.ttf) format('truetype');
}
@font-face {
  font-family: 'AttendanceSarabun';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(attendance-fonts/sarabun-3.ttf) format('truetype');
}

.attendance-filters{display:flex;flex-wrap:wrap;gap:16px;align-items:end}
.attendance-filters label{min-width:180px;flex:1}
.attendance-link-select{min-width:260px;width:100%}
.attendance-report{--attendance-green:#195a5b;--attendance-border:#dce4ef;color:#25344e;font-family:AttendanceSarabun,sans-serif;font-size:13.5px;background:#fff;padding:24px;border-radius:12px}
.attendance-period-caption{text-align:center;color:#536379;font-size:13px;margin:0 0 24px}
.attendance-overview,.attendance-vacation-grid,.attendance-latest-grid{display:grid;gap:16px}
.attendance-overview{grid-template-columns:repeat(6,minmax(0,1fr));margin-bottom:24px}
.attendance-metric{min-width:0;background:#fff;border:1px solid var(--attendance-border);border-left:4px solid var(--attendance-green);border-radius:10px;padding:15px 20px;box-shadow:0 2px 4px #00000005}
.attendance-metric h3{margin:0 0 5px;color:#7887a1;font-size:13px;font-weight:500;line-height:1.4}
.attendance-metric strong{display:block;color:var(--attendance-green);font-size:22px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.attendance-metric small{display:block;margin-top:3px;font-size:11px;color:#33445b;line-height:1.3}
.attendance-vacation-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:24px}
.attendance-metric-gold{border-left-color:#db7f00}
.attendance-latest,.attendance-summary-box{border:1px solid #99c7c8;border-radius:12px;padding:16px;margin-bottom:16px;background:#f7fcfc}
.attendance-latest{background:#f1fafa}
.attendance-latest>h3,.attendance-summary-box>h3{margin:0 0 8px;font-size:16px;font-weight:600;color:var(--attendance-green)}
.attendance-latest>p,.attendance-summary-box>p{margin:0 0 10px;font-size:12px;color:#596e79}
.attendance-latest-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.attendance-latest-grid .attendance-metric{border-top:0;border-right:0;border-bottom:0;box-shadow:none;padding:13px;border-left-width:5px}
.attendance-latest-grid .attendance-metric h3{color:#66728a}
.attendance-latest-grid .attendance-metric strong{font-size:18px}
.attendance-table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.attendance-table-scroll:focus-visible{outline:2px solid #72b8a4;outline-offset:3px}
.attendance-report table{width:100%;border-collapse:collapse;text-align:center;white-space:nowrap}
.attendance-report th{color:#fff;background:var(--attendance-green);border:1px solid #154b4b;font-size:12.5px;font-weight:600;padding:8px 10px;text-align:center}
.attendance-report td{border:1px solid var(--attendance-border);background:#fff;padding:8px 10px;font-size:13px;text-align:center;line-height:1.65}
.attendance-summary-table{min-width:1050px}
.attendance-report td.attendance-present-total{background:#f0fdf4;color:#166534;font-weight:600}
.attendance-daily-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 10px}
.attendance-daily-heading h3{font-size:16px;color:var(--attendance-green);margin:0}
.attendance-daily-heading span{font-size:12px;color:#71838e}
.attendance-daily-table{min-width:1060px}
.attendance-daily-table th:first-child{width:64px}
.attendance-daily-table th:nth-child(2){width:150px}
.attendance-daily-table tbody tr:nth-child(even) td{background:#fbfdfd}
.attendance-report td.attendance-note{white-space:normal;text-align:left;min-width:140px;max-width:300px;overflow-wrap:anywhere}
.attendance-report td.attendance-status-cell{white-space:normal;min-width:170px;max-width:320px}
.attendance-status{display:inline-block;border-radius:20px;padding:3px 9px;background:#f0f4f7;font-size:12px;font-weight:600;line-height:1.55;overflow-wrap:anywhere}
.attendance-report-note{font-size:11px;color:#6c7e88;margin:14px 0 0;line-height:1.8}
@media(max-width:1300px){.attendance-overview{grid-template-columns:repeat(3,minmax(0,1fr))}.attendance-latest-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.attendance-report{padding:14px}.attendance-overview{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-bottom:16px}.attendance-vacation-grid{grid-template-columns:1fr;gap:11px;margin-bottom:16px}.attendance-metric{padding:13px 14px}.attendance-metric strong{font-size:20px}.attendance-period-caption{text-align:left;font-size:12px;margin-bottom:16px}.attendance-latest,.attendance-summary-box{padding:13px}.attendance-latest>h3,.attendance-summary-box>h3{font-size:15px}}
@media(max-width:480px){.attendance-latest-grid{grid-template-columns:1fr}.attendance-latest-grid .attendance-metric strong{font-size:16px}.attendance-report td,.attendance-report th{font-size:11px;padding:8px}}
.attendance-person-picker{display:flex;gap:18px;align-items:center;justify-content:space-between;background:#edf7f2;border:1px solid #c5ddd0;border-radius:12px;padding:16px 20px;margin-bottom:20px}
.attendance-person-picker label{flex:1;max-width:650px;margin:0}
.attendance-person-picker select{width:100%}
.attendance-access-label{white-space:nowrap;margin:0;font-size:12px;font-weight:400}
.attendance-access-label input{margin:0 6px 0 0}
@media(max-width:760px){.attendance-person-picker{display:block;padding:14px}.attendance-person-picker .badge{margin-top:10px}}

.attendance-report-all{--attendance-green:#005a5b}
.attendance-report-all .attendance-overview{grid-template-columns:repeat(4,minmax(0,1fr))}
.attendance-all-table{min-width:1120px;table-layout:fixed}
.attendance-number-col{width:64px}
.attendance-name-col{width:23%}
.attendance-report .attendance-all-table th,.attendance-report .attendance-all-table td{padding:8px 7px;font-size:12.5px}
.attendance-report .attendance-all-table thead th{background:#005a5b;border-color:#004344;white-space:normal}
.attendance-report .attendance-all-table thead tr:nth-child(2) th:last-child{background:#004344}
.attendance-report td.attendance-person-cell{text-align:left;white-space:normal;overflow-wrap:anywhere}
.attendance-person-cell small{display:block;font-size:11px;color:#6c7e88;line-height:1.7}
.attendance-report .attendance-person-link{background:none;border:0;box-shadow:none;color:#006480;padding:0;font:inherit;font-weight:400;text-align:left;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.attendance-person-link:focus-visible{outline:2px solid #72b8a4;outline-offset:3px}
.attendance-report .attendance-all-table .attendance-group-header th{background:#f0fdf4;color:#166534;border:1px solid #dce4ef;text-align:center;font-weight:700;font-size:13px}
.attendance-all-table .attendance-person-row:nth-child(even) td{background:#fbfdfd}
.attendance-all-table .attendance-person-row:hover td{background:#eef9f8}
.attendance-report .attendance-all-table td.attendance-present-total{background:#f0fdf4;color:#166534;font-weight:700}
@media(max-width:1024px){.attendance-report-all .attendance-overview{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.attendance-report .attendance-all-table th,.attendance-report .attendance-all-table td{font-size:11px;padding:8px 6px}}

/* Keep the complete header, including rowspan/colspan rows, visible in long reports. */
@media screen {
  .attendance-table-scroll {
    max-height:72vh;
    max-height:min(72vh,720px);
    overflow:auto;
  }
  .attendance-table-scroll thead {
    position:sticky;
    top:0;
    z-index:2;
    background:var(--attendance-green);
    box-shadow:0 2px 3px #00434433;
  }
}

.attendance-daily-title{text-align:center;color:var(--attendance-green);font-size:18px;margin:0 0 12px}
.attendance-all-daily-table{min-width:1080px;table-layout:fixed}
.attendance-all-daily-table tbody tr:nth-child(even) td{background:#fbfdfd}
.attendance-report .attendance-all-daily-table th{white-space:normal}
.attendance-report .attendance-all-daily-table td.attendance-note{min-width:0;max-width:none}
.attendance-daily-counts{margin-top:24px}
.attendance-daily-counts-table{min-width:700px}
.attendance-report .attendance-daily-counts-table tbody th{background:#f0fdf4;color:#166534;border-color:var(--attendance-border);text-align:left;white-space:normal}

/* Keep the sequence column compact; wider screens give extra space to notes. */
.attendance-daily-name-col{width:260px}
.attendance-time-col{width:90px}
.attendance-report .attendance-all-daily-table thead tr:first-child th:first-child,.attendance-report .attendance-all-table thead tr:first-child th:first-child{white-space:nowrap;padding-left:6px;padding-right:6px}