:root{--att-blue:#087da7;--att-navy:#093f58;--att-soft:#eaf5f9;--att-line:#cbdde6;--att-green:#16734f;--att-red:#ad3d3d}.attendance-app{min-height:100vh;background:#f3f7fa;color:#173247}.attendance-loading{padding:60px;text-align:center}.att-header{background:linear-gradient(135deg,var(--att-navy),var(--att-blue));color:#fff;padding:20px clamp(16px,4vw,54px)}.att-header-inner{max-width:1500px;margin:auto;display:flex;align-items:center;gap:16px}.att-logo{width:58px;height:58px;background:#fff;color:var(--att-navy);border-radius:16px;display:grid;place-items:center;font-size:25px;font-weight:800}.att-title h1{margin:0;font-size:26px}.att-title p{margin:4px 0 0;opacity:.8}.att-home{margin-left:auto;color:#fff;text-decoration:none;border:1px solid #ffffff55;padding:9px 14px;border-radius:10px}.att-shell{max-width:1500px;margin:auto;padding:20px clamp(12px,3vw,36px) 60px}.att-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.att-tabs button{border:0;border-radius:12px;padding:12px 18px;background:#dceaf0;color:#24485d;font-weight:700}.att-tabs button.active{background:var(--att-blue);color:#fff}.att-filter{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.att-filter label{display:flex;flex-direction:column;gap:6px;font-weight:700}.att-filter input{border:1px solid var(--att-line);padding:10px;border-radius:9px;background:#fff}.att-filter .btn{margin-bottom:0}.att-metrics{display:grid;grid-template-columns:repeat(6,minmax(115px,1fr));gap:10px;margin:16px 0}.att-metric{background:#fff;border:1px solid var(--att-line);border-radius:14px;padding:14px}.att-metric span{display:block;color:#657d8b;font-size:13px}.att-metric b{display:block;font-size:27px;color:var(--att-blue);margin-top:3px}.att-status{margin:12px 0;padding:10px 13px;border-radius:10px;background:#fff5d9;color:#765b14}.att-status.ok{background:#e7f7f0;color:var(--att-green)}.att-table-wrap{overflow:auto;background:#fff;border:1px solid var(--att-line);border-radius:14px}.att-table{width:100%;border-collapse:collapse;white-space:nowrap}.att-table th,.att-table td{border:1px solid #d9e5eb;padding:8px;text-align:center}.att-table thead th{background:#e9f3f7;color:#204b61}.att-table thead tr:first-child th{background:#d9edf5}.att-table td:first-child,.att-table td.teacher,.att-table td.note{text-align:left}.att-table input[type=number]{width:54px;border:1px solid #bcd0da;border-radius:7px;padding:7px;text-align:center}.att-table input[type=text]{width:150px;border:1px solid #bcd0da;border-radius:7px;padding:7px}.att-table input:disabled{background:#edf2f4;color:#65727a}.att-table tfoot{font-weight:800;background:#eef6f9}.att-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin:16px 0}.att-actions .save{background:var(--att-blue);color:#fff}.att-note{font-size:13px;color:#647d8c}.att-chart{height:260px;display:flex;align-items:flex-end;gap:4px;padding:20px 8px 30px;border-left:1px solid #ccdce4;border-bottom:1px solid #ccdce4;overflow:auto}.att-chart-day{min-width:28px;height:100%;display:flex;align-items:flex-end;position:relative}.att-chart-day i{display:block;width:100%;background:linear-gradient(#27a5ce,#087da7);border-radius:5px 5px 0 0;min-height:2px}.att-chart-day span{position:absolute;bottom:-23px;width:100%;text-align:center;font-size:10px}.pin-dialog{border:0;border-radius:18px;padding:24px;box-shadow:0 25px 80px #00263d66;max-width:390px;width:calc(100% - 32px)}.pin-dialog::backdrop{background:#001a2888}.pin-dialog h2{margin-top:0}.pin-dialog input{width:100%;border:1px solid var(--att-line);border-radius:10px;padding:12px;font-size:20px;text-align:center;letter-spacing:5px}.pin-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}.att-school-form{max-width:480px;margin:60px auto;background:#fff;border-radius:18px;padding:26px;border:1px solid var(--att-line)}.att-school-form input{width:100%;padding:12px;border:1px solid var(--att-line);border-radius:10px;margin:12px 0}.report-title{text-align:center;display:none}.att-empty{text-align:center;padding:35px;color:#728692}.daily-form-details{margin-top:10px;font-family:SarabunPP,"TH Sarabun New",Tahoma,sans-serif;color:#111}.daily-form-block{margin-top:6px}.daily-form-block h2,.daily-duty-group h3{font-size:18px;line-height:1.2;margin:0 0 3px;text-decoration:underline}.daily-line{display:flex;align-items:center;gap:5px;margin:2px 0}.daily-line input,.daily-form-block textarea,.daily-duty-row input,.daily-inspector input{font:inherit;color:#111;background:transparent;border:0;border-bottom:1px dotted #222;border-radius:0;padding:2px 4px}.daily-line input{flex:1}.daily-form-block textarea{display:block;width:100%;resize:vertical}.daily-event{min-height:28px;border-bottom:1px dotted #222;white-space:pre-wrap}.daily-duty-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:8px}.daily-duty-row{display:grid;grid-template-columns:20px 1fr minmax(120px,.7fr);align-items:center;gap:5px;min-height:27px}.duty-name,.duty-signature{border-bottom:1px dotted #222;min-height:22px}.duty-signature{text-align:center}.daily-inspector{margin:16px auto 0;max-width:520px;display:grid;grid-template-columns:auto 1fr 1fr auto;align-items:center;gap:8px;text-align:center}.daily-inspector input{min-width:0}.inspector-sign{min-width:160px;border-bottom:1px dotted #222}.daily-inspector b{font-weight:500}@media(max-width:900px){.att-metrics{grid-template-columns:repeat(3,1fr)}.att-title h1{font-size:20px}.att-header-inner{align-items:flex-start}.att-home{font-size:12px}}@media(max-width:800px){.daily-duty-grid{grid-template-columns:1fr;gap:12px}.daily-inspector{grid-template-columns:auto 1fr}.daily-inspector input{width:100%}}@media(max-width:520px){.att-metrics{grid-template-columns:repeat(2,1fr)}.att-logo{width:46px;height:46px}.att-title p{font-size:12px}.att-filter>*{width:100%}.att-filter .btn{width:auto}}@page{size:A4 portrait;margin:8mm}@media print{body{background:#fff}.att-header,.att-tabs,.att-filter,.att-actions,.att-note,.toast{display:none!important}.att-shell{padding:0}.report-title{display:block}.att-metrics{grid-template-columns:repeat(6,1fr);gap:4px}.att-metric{box-shadow:none;padding:6px}.att-metric b{font-size:18px}.att-table-wrap{overflow:visible;border:0}.att-table{white-space:normal;font-size:10pt}.att-table th,.att-table td{padding:3px}.att-table input{border:0!important;padding:0!important;width:100%!important;background:transparent!important}.daily-form-details input,.daily-form-details textarea{border:0!important;border-bottom:1px dotted #111!important;background:transparent!important}.att-chart{page-break-before:always}.card{box-shadow:none;border:0;padding:0}.no-print{display:none!important}}
/* Staff selectors for the daily attendance duty and inspector form. */
.daily-duty-row select,.daily-inspector select{font:inherit;color:#111;background:transparent;border:0;border-bottom:1px dotted #222;border-radius:0;padding:2px 4px;min-width:0;width:100%}.duty-signature-placeholder{color:#60747f;font-size:.9em}@media print{.daily-form-details select{appearance:none;-webkit-appearance:none;border:0!important;border-bottom:1px dotted #111!important;background:transparent!important}}

/* Signature layout shared by the screen preview, print view and PDF export. */
.daily-inspector{margin:32px auto 0;max-width:520px;display:grid;grid-template-columns:1fr;gap:4px;text-align:center}
.inspector-sign-row,.inspector-position-row{display:flex;align-items:flex-end;justify-content:center;gap:8px}
.inspector-sign-row .inspector-sign{display:block;min-width:260px;height:28px;border-bottom:1px dotted #222}
.inspector-name-row{min-height:24px;display:flex;justify-content:center;align-items:center}
.inspector-name-row select{max-width:340px;text-align:center}
.inspector-position-row input{width:230px;min-width:0;text-align:center}
.inspector-position-row b{min-width:230px;font-weight:500;border-bottom:1px dotted #222;padding:0 4px 2px}
@media(max-width:800px){.daily-inspector{margin-top:24px}.inspector-sign-row .inspector-sign{min-width:190px}.inspector-position-row input,.inspector-position-row b{width:190px;min-width:190px}}
@media print{.daily-inspector{margin-top:26px!important}.inspector-sign-row .inspector-sign{height:24px}.inspector-name-row select{border-bottom:0!important}.inspector-position-row input{border-bottom:1px dotted #111!important}}

/* Print every recorded day in the selected month, one daily form per A4 page. */
.attendance-month-daily-print{display:none}
@media print{
  body.printing-attendance-month-daily>.attendance-app{display:none!important}
  body.printing-attendance-month-daily>.attendance-month-daily-print{display:block!important}
  .attendance-month-daily-page{break-after:page;page-break-after:always}
  .attendance-month-daily-page:last-child{break-after:auto;page-break-after:auto}
  .attendance-month-daily-page .daily-report-heading,.attendance-month-daily-page .daily-school-logo{display:block}
  .attendance-month-daily-page .att-table-wrap{overflow:visible;border:0}
  .attendance-month-daily-page .att-table{white-space:normal;font-size:10pt}
  .attendance-month-daily-page .att-table th,.attendance-month-daily-page .att-table td{padding:3px}
}

/* Per-classroom attendance save status. Hidden from print/PDF reports. */
.row-save-status{min-width:150px;white-space:normal;text-align:center;vertical-align:middle}
.row-save-status .badge{display:inline-flex;align-items:center;justify-content:center;margin:2px;padding:4px 8px;border-radius:999px;font-weight:700;font-size:.82rem}
.row-save-status .badge.ok{background:#dff7e9;color:#087443}
.row-save-status .badge.warn{background:#fff0c9;color:#8a6200}
.row-save-status .badge.full{background:#e2f4ff;color:#087da7}
.row-save-status .badge.pending{background:#e8edff;color:#3452a4}
.row-save-status small{display:block;margin-top:4px;color:#60747f;line-height:1.3}
.row-confirm-present{display:block;margin:7px auto 0;border:1px solid #0b86b2;border-radius:8px;background:#fff;color:#087da7;padding:5px 8px;font:inherit;font-weight:700;cursor:pointer}
.row-confirm-present:hover{background:#e9f8fe}
.attendance-missing-rooms,.attendance-all-saved{margin:14px 0;padding:12px 16px;border-radius:12px;line-height:1.55}
.attendance-missing-rooms{background:#fff5d9;border:1px solid #f0d78d;color:#785400}
.attendance-all-saved{background:#e5f8ed;border:1px solid #a8dfbe;color:#087443;font-weight:700}
.attendance-report-columns .col-status{width:9%}
.attendance-report-columns .col-teacher.with-status{width:18%}
.attendance-report-columns .col-note.with-status{width:13%}
@media(max-width:900px){.row-save-status{min-width:135px}.attendance-missing-rooms,.attendance-all-saved{margin-inline:8px}}