*{box-sizing:border-box}html{font-family:"Noto Sans Thai","Tahoma",sans-serif;background:#f4f7fb;color:#172033}body{margin:0}a{color:inherit}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:270px;background:#111827;color:#fff;display:flex;flex-direction:column;z-index:30;box-shadow:8px 0 28px rgba(15,23,42,.12)}.brand{padding:22px 18px;display:flex;gap:12px;align-items:center;border-bottom:1px solid rgba(255,255,255,.1)}.brand img{width:48px;height:48px;object-fit:contain;background:#fff;border-radius:14px;padding:4px}.brand strong{display:block;font-size:17px}.brand small{display:block;color:#bac3d4;margin-top:3px;line-height:1.35}.side-nav{padding:14px 10px;display:grid;gap:7px}.side-nav a{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;color:#dbe4f2;text-decoration:none;font-weight:700}.side-nav a:hover,.side-nav a.active{background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 75%,#000));color:#fff}.side-nav .nav-icon{font-size:19px}.side-nav .nav-text{min-width:0}.side-nav .nav-badge{margin-left:auto;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:#ef4444;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;box-shadow:0 4px 12px rgba(239,68,68,.35)}.sidebar-footer{margin-top:auto;padding:14px;border-top:1px solid rgba(255,255,255,.1);display:grid;gap:8px}.sidebar-footer>a{font-size:14px;text-decoration:none;color:#dbe4f2;padding:7px 4px}.user-chip{display:flex;gap:9px;align-items:center;background:rgba(255,255,255,.08);padding:10px;border-radius:12px}.user-chip b,.user-chip small{display:block}.user-chip small{color:#b9c3d3;font-size:12px;margin-top:2px}.main-wrap{margin-left:270px;min-height:100vh;display:flex;flex-direction:column}.topbar{height:84px;background:#fff;border-bottom:1px solid #e6ebf2;display:flex;align-items:center;gap:14px;padding:0 28px;position:sticky;top:0;z-index:20}.topbar h1{margin:2px 0 0;font-size:24px}.eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#718096;font-weight:800}.topbar .button{margin-left:auto}.menu-button{display:none;border:0;background:#eef2f7;border-radius:10px;width:42px;height:42px;font-size:22px}.content{padding:28px;flex:1;max-width:1600px;width:100%;margin:0 auto}.app-footer{padding:18px 28px;color:#718096;text-align:center;font-size:13px}.button{border:1px solid #d9e1ec;border-radius:11px;background:#fff;color:#27364d;text-decoration:none;padding:10px 15px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:inherit}.button:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(31,41,55,.08)}.button.primary{background:var(--primary);border-color:var(--primary);color:#fff}.button.success{background:#16875a;border-color:#16875a;color:#fff}.button.danger{background:#dc3748;border-color:#dc3748;color:#fff}.button.warning{background:#f59e0b;border-color:#f59e0b;color:#fff}.button.ghost{background:#f8fafc}.button.compact{padding:8px 12px;font-size:14px}.button.small{padding:6px 10px;font-size:12px}.page-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:20px}.page-tools .spacer{margin-left:auto}.card{background:#fff;border:1px solid #e2e8f0;border-radius:18px;box-shadow:0 8px 25px rgba(15,23,42,.045);padding:22px}.card+.card{margin-top:18px}.card-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:17px}.card-header h2,.card-header h3{margin:0}.card-header p{margin:4px 0 0;color:#718096}.card-header .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}.stats-grid{display:grid;grid-template-columns:repeat(6,minmax(130px,1fr));gap:14px;margin-bottom:20px}.stat-card{background:#fff;border:1px solid #e4eaf1;border-radius:17px;padding:18px;min-height:118px;position:relative;overflow:hidden}.stat-card:after{content:"";position:absolute;right:-20px;bottom:-30px;width:90px;height:90px;border-radius:50%;background:currentColor;opacity:.07}.stat-card .label{color:#64748b;font-weight:700;font-size:13px}.stat-card .number{font-size:32px;line-height:1;margin-top:12px;font-weight:900}.stat-card .sub{color:#718096;font-size:12px;margin-top:8px}.stat-card.total{color:#334155}.stat-card.male{color:#2563eb}.stat-card.female{color:#db2777}.stat-card.present{color:#0f9f6e}.stat-card.late{color:#d97706}.stat-card.sick{color:#0891b2}.stat-card.leave{color:#7c3aed}.stat-card.absent{color:#dc2626}.stat-card.unmarked{color:#64748b}.class-grid{display:grid;grid-template-columns:repeat(3,minmax(260px,1fr));gap:16px}.class-card{background:#fff;border:1px solid #e2e8f0;border-radius:17px;padding:18px;display:flex;flex-direction:column;gap:13px}.class-card h3{margin:0}.class-card .meta{color:#718096;font-size:13px}.mini-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.mini-stat{text-align:center;padding:9px 5px;border-radius:10px;background:#f5f7fb}.mini-stat b{display:block;font-size:18px}.mini-stat span{font-size:11px;color:#6b7280}.progress{height:8px;border-radius:999px;background:#e9eef5;overflow:hidden}.progress>span{display:block;height:100%;background:var(--primary);border-radius:inherit}.field{display:grid;gap:6px}.field label{font-weight:800;font-size:13px;color:#334155}.input,.select,.textarea{width:100%;border:1px solid #cfd8e5;border-radius:11px;background:#fff;padding:10px 12px;font:inherit;color:#172033}.textarea{min-height:80px;resize:vertical}.input:focus,.select:focus,.textarea:focus{outline:3px solid color-mix(in srgb,var(--primary) 16%,transparent);border-color:var(--primary)}.filter-grid{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:13px;align-items:end}.filter-grid.wide{grid-template-columns:repeat(5,minmax(150px,1fr))}.alert{border-radius:13px;padding:13px 16px;margin-bottom:18px;font-weight:700}.alert.success{background:#eafaf4;color:#087a53;border:1px solid #b9efd9}.alert.error{background:#fff0f1;color:#b42332;border:1px solid #ffcdd2}.alert.warning{background:#fff8e7;color:#a45d00;border:1px solid #f9ddb1}.alert.info{background:#edf6ff;color:#145a98;border:1px solid #cce6ff}.table-wrap{overflow:auto;border:1px solid #e2e8f0;border-radius:14px}.data-table{width:100%;border-collapse:collapse;min-width:760px;background:#fff}.data-table th,.data-table td{padding:11px 12px;border-bottom:1px solid #e8edf3;text-align:left;vertical-align:middle}.data-table th{background:#f7f9fc;font-size:12px;color:#526175;white-space:nowrap}.data-table tr:last-child td{border-bottom:0}.data-table .center{text-align:center}.data-table .right{text-align:right}.muted{color:#718096}.small-text{font-size:12px}.status-badge{display:inline-flex;align-items:center;justify-content:center;min-width:66px;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:900}.status-badge.present{background:#e6f8f0;color:#087a53}.status-badge.late{background:#fff4df;color:#a15b00}.status-badge.sick{background:#e6f8fb;color:#087c91}.status-badge.leave{background:#f1ebff;color:#6730bd}.status-badge.absent{background:#ffebee;color:#b42332}.status-badge.unmarked{background:#edf1f5;color:#64748b}.attendance-toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px}.live-summary{display:grid;grid-template-columns:repeat(6,minmax(76px,1fr));gap:9px;margin-left:auto}.live-pill{border-radius:12px;background:#f5f7fb;padding:8px 10px;text-align:center;font-size:12px}.live-pill b{font-size:20px;display:block}.attendance-list{display:grid;gap:10px}.attendance-row{display:grid;grid-template-columns:60px minmax(220px,1.4fr) minmax(360px,2fr) minmax(180px,1fr);gap:12px;align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:12px}.student-no{text-align:center;font-weight:900;color:#64748b}.student-name b{display:block}.student-name small{color:#718096}.status-options{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.status-option{position:relative}.status-option input{position:absolute;opacity:0;pointer-events:none}.status-option span{display:block;text-align:center;border:1px solid #dbe3ed;border-radius:10px;padding:9px 5px;font-weight:900;cursor:pointer;background:#f9fafb}.status-option input:checked+span{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 18%,transparent);background:#eef5ff;color:var(--primary)}.status-option.present input:checked+span{background:#e7f8f1;color:#087a53;border-color:#8ed9bb}.status-option.late input:checked+span{background:#fff3df;color:#a15b00;border-color:#efc06f}.status-option.sick input:checked+span{background:#e6f8fb;color:#087c91;border-color:#8ed5df}.status-option.leave input:checked+span{background:#f1ebff;color:#6730bd;border-color:#c5a9f1}.status-option.absent input:checked+span{background:#ffebee;color:#b42332;border-color:#f2aab2}.sticky-actions{position:sticky;bottom:12px;margin-top:16px;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border:1px solid #dfe6ee;border-radius:14px;padding:12px;display:flex;justify-content:flex-end;gap:9px;box-shadow:0 12px 32px rgba(15,23,42,.12)}.month-options{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:8px;margin-top:10px}.month-check{display:flex;gap:7px;align-items:center;background:#f7f9fc;border:1px solid #e1e7ef;border-radius:10px;padding:9px}.rate{font-weight:900}.rate.good{color:#087a53}.rate.mid{color:#a15b00}.rate.low{color:#b42332}.empty-state{text-align:center;padding:50px 18px;color:#718096}.empty-state .icon{font-size:45px}.share-box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}.share-url{background:#f5f7fb;border:1px solid #dce3ec;border-radius:10px;padding:10px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,#eff6ff,#f8fafc 50%,#fff7ed)}.login-card{width:min(900px,100%);display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid #dfe6ef;border-radius:24px;overflow:hidden;box-shadow:0 26px 70px rgba(15,23,42,.14)}.login-intro{padding:42px;background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 65%,#111827));color:#fff}.login-intro img{width:90px;height:90px;object-fit:contain;background:#fff;border-radius:22px;padding:8px}.login-intro h1{font-size:30px;margin:22px 0 10px}.login-intro p{line-height:1.75;opacity:.9}.login-form{padding:42px}.login-form h2{margin:5px 0 8px;font-size:28px}.login-form form{display:grid;gap:14px;margin-top:24px}.public-body{background:#eef3f8;min-height:100vh;padding:24px}.public-container{max-width:980px;margin:auto}.public-header{background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 70%,#111827));color:#fff;border-radius:22px;padding:24px;display:flex;gap:16px;align-items:center}.public-header img{width:70px;height:70px;object-fit:contain;background:#fff;border-radius:16px;padding:5px}.public-header h1{margin:0}.public-header p{margin:5px 0 0;opacity:.9}.public-nav{display:flex;gap:8px;align-items:center;justify-content:center;margin:16px 0}.public-note{font-size:13px;color:#6b7280;text-align:center;margin-top:16px}.public-status-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.public-status-group{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:16px}.public-status-group h3{margin:0 0 10px;display:flex;justify-content:space-between}.name-list{margin:0;padding-left:22px;line-height:1.8}.setup-card{max-width:720px;margin:60px auto}.no-print{display:block}
@media(max-width:1150px){.stats-grid{grid-template-columns:repeat(4,1fr)}.class-grid{grid-template-columns:repeat(2,1fr)}.attendance-row{grid-template-columns:50px minmax(180px,1fr);}.status-options,.attendance-note{grid-column:2}.filter-grid.wide{grid-template-columns:repeat(3,1fr)}.month-options{grid-template-columns:repeat(4,1fr)}}
@media(max-width:800px){.sidebar{transform:translateX(-105%);transition:.2s}.menu-open .sidebar{transform:translateX(0)}.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:25}.menu-open .sidebar-backdrop{display:block}.main-wrap{margin-left:0}.menu-button{display:block}.topbar{padding:0 14px}.topbar h1{font-size:19px}.topbar .button{display:none}.content{padding:16px}.stats-grid{grid-template-columns:repeat(2,1fr)}.class-grid{grid-template-columns:1fr}.filter-grid,.filter-grid.wide{grid-template-columns:1fr 1fr}.month-options{grid-template-columns:repeat(2,1fr)}.live-summary{width:100%;grid-template-columns:repeat(6,1fr);margin:0}.attendance-row{grid-template-columns:40px 1fr;padding:10px}.status-options{grid-template-columns:repeat(2,1fr)}.login-card{grid-template-columns:1fr}.login-intro{padding:28px}.login-form{padding:28px}.public-body{padding:12px}.public-status-list{grid-template-columns:1fr}.public-header{align-items:flex-start}.share-box{grid-template-columns:1fr}}
@media(max-width:500px){.stats-grid{grid-template-columns:1fr 1fr;gap:9px}.stat-card{padding:14px;min-height:100px}.stat-card .number{font-size:27px}.filter-grid,.filter-grid.wide{grid-template-columns:1fr}.attendance-row{grid-template-columns:1fr}.student-no{text-align:left}.status-options,.attendance-note{grid-column:1}.month-options{grid-template-columns:1fr 1fr}.live-summary{grid-template-columns:repeat(3,1fr)}.public-header{display:block}.public-header img{margin-bottom:12px}}
@media print{body{background:#fff}.sidebar,.topbar,.app-footer,.no-print,.sticky-actions,.sidebar-backdrop{display:none!important}.main-wrap{margin:0}.content{padding:0;max-width:none}.card,.stat-card{box-shadow:none;border-color:#cbd5e1;break-inside:avoid}.table-wrap{overflow:visible}.data-table{min-width:0;font-size:11px}.data-table th,.data-table td{padding:6px}.stats-grid{grid-template-columns:repeat(6,1fr)}.public-body{padding:0;background:#fff}.public-container{max-width:none}.public-nav,.line-share{display:none!important}}


/* V1.2: compact attendance controls on phones; desktop appearance is unchanged. */
@media(max-width:800px){
  .attendance-row{grid-template-columns:34px minmax(0,1fr);gap:8px;padding:9px}
  .attendance-row .status-options,.attendance-row .attendance-note{grid-column:1/-1}
  .attendance-row .status-options{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
  .attendance-row .status-option>span{padding:8px 2px;border-radius:9px;font-size:0;line-height:1;min-height:34px;display:flex;align-items:center;justify-content:center}
  .attendance-row .status-option>span:after{content:attr(data-mobile-label);font-size:16px;font-weight:900}
  .attendance-row .attendance-note .input{padding:8px 10px;font-size:13px}
  .attendance-row .student-name{min-width:0}
  .attendance-row .student-name b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .attendance-row .student-name small{font-size:11px}
  .sticky-actions{padding:9px;gap:7px}
  .sticky-actions .button{flex:1;padding:9px 7px}
}
@media(max-width:500px){
  .attendance-row{grid-template-columns:30px minmax(0,1fr);padding:8px;gap:7px}
  .attendance-row .student-no{text-align:center}
  .attendance-row .status-options,.attendance-row .attendance-note{grid-column:1/-1}
}


/* V1.6: board-style report, compact header actions and weekly print entry points. */
.attendance-header-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.board-like-table{min-width:1040px;border-collapse:collapse}
.board-like-table th,.board-like-table td{border:1px solid #cbd5e1}
.board-like-table thead th{background:#eef3f8;color:#1e3a5f;font-weight:900}
.board-like-table .summary-row td{background:#fff7e6;font-weight:900}
.board-like-table .grand-total td{background:#e8f2ff}
@media(max-width:800px){.attendance-header-actions{width:100%;justify-content:flex-start}.attendance-header-actions .button{flex:1;min-width:140px}}
@media print{.board-like-table{font-size:10px}.board-like-table th,.board-like-table td{padding:4px}}


/* V2.0: ระบบเฝ้าระวังการมาเรียน */
.monitor-rule-card{display:flex;gap:14px;align-items:flex-start;background:linear-gradient(135deg,#fff8e7,#fff);border:1px solid #f4d8a0;border-radius:16px;padding:16px 18px;margin-bottom:18px;color:#7a4900;line-height:1.65}
.monitor-rule-icon{font-size:28px;line-height:1}
.monitoring-stats{grid-template-columns:repeat(7,minmax(120px,1fr))}
.stat-card.monitor-critical{color:#b91c1c}.stat-card.monitor-combined{color:#be123c}
.monitoring-class-card{break-inside:avoid}
.monitoring-table{min-width:1420px}
.risk-badges{display:flex;flex-wrap:wrap;gap:6px;min-width:230px}
.risk-badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:900;line-height:1.3}
.risk-badge.warning{background:#fff4df;color:#9a5700;border:1px solid #f4ce88}
.risk-badge.critical{background:#ffebee;color:#a91d2c;border:1px solid #f3b4bc}
@media(max-width:1300px){.monitoring-stats{grid-template-columns:repeat(4,1fr)}}
@media(max-width:800px){.monitoring-stats{grid-template-columns:repeat(2,1fr)}.monitor-rule-card{align-items:flex-start}.side-nav .nav-badge{margin-left:auto}}
@media print{.monitor-rule-card{box-shadow:none}.monitoring-table{min-width:0;font-size:8px}.monitoring-table th,.monitoring-table td{padding:4px}.risk-badges{min-width:0}.risk-badge{font-size:8px;padding:3px 5px}}

/* V2.1: ช่วงเดือนแบบภาคเรียนและการตั้งค่าเกณฑ์โดยผู้ดูแล */
.monitoring-filter-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:13px;align-items:end}
.grid{display:grid;gap:18px}.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid .full{grid-column:1/-1}
.hint{font-size:11px;color:#718096;line-height:1.45}.actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.monitor-threshold-grid{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:14px}
.monitor-threshold-field{padding:14px;border:1px solid #e2e8f0;border-radius:14px;background:#f8fafc}
.monitor-setting-notes{display:grid;gap:10px;color:#526175;line-height:1.65}.monitor-setting-notes p{margin:0;padding:11px 13px;background:#f8fafc;border-radius:11px}
@media(max-width:1200px){.monitoring-filter-grid{grid-template-columns:repeat(3,minmax(150px,1fr))}.monitor-threshold-grid{grid-template-columns:repeat(3,minmax(170px,1fr))}}
@media(max-width:800px){.monitoring-filter-grid{grid-template-columns:1fr 1fr}.grid.cols-2{grid-template-columns:1fr}.monitor-threshold-grid{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.monitoring-filter-grid,.form-grid,.monitor-threshold-grid{grid-template-columns:1fr}}

/* V2.2: หนังสือติดตามนักเรียนขาดเรียน */
.table-actions{display:flex;gap:6px;flex-wrap:wrap;min-width:130px}
.letter-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:14px;margin-bottom:18px}
.letter-guide-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:15px 17px;box-shadow:0 6px 18px rgba(15,23,42,.035)}
.letter-guide-card>span{flex:0 0 36px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 12%,#fff);color:var(--primary);font-weight:900}
.letter-guide-card b,.letter-guide-card small{display:block}.letter-guide-card small{color:#718096;margin-top:3px;line-height:1.45}
.letter-list-table{min-width:1280px}.letter-summary-stats{grid-template-columns:repeat(6,minmax(130px,1fr))}
.letter-body-editor{min-height:320px;line-height:1.7}.letter-template-input{min-height:135px}.letter-address-input{min-height:120px}
@media(max-width:1100px){.letter-guide-grid{grid-template-columns:1fr}.letter-summary-stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.letter-summary-stats{grid-template-columns:repeat(2,1fr)}.letter-guide-card{align-items:flex-start}}
@media(max-width:500px){.letter-summary-stats{grid-template-columns:1fr 1fr}}

/* V2.4 สถานะและปุ่มจัดการหนังสือติดตาม */
.status-badge.cancelled{background:#fee2e2;color:#991b1b}
.letter-row-cancelled td{background:#fffafa;color:#64748b}
.letter-row-cancelled td b{color:#475569}
.letter-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-width:220px}
.letter-actions form{display:inline-flex;margin:0}
@media(max-width:1200px){.filter-grid.wide[style]{grid-template-columns:repeat(3,minmax(150px,1fr))!important}}
@media(max-width:760px){.filter-grid.wide[style]{grid-template-columns:1fr!important}.letter-actions{min-width:180px}}