:root {
  --navy:#0f2044; --navy-mid:#1a3460; --navy-light:#234080;
  --blue:#2563eb; --blue-light:#3b82f6; --blue-pale:#eff6ff;
  --gold:#c8972b; --gold-light:#f0c050;
  --amber:#d97706; --amber-pale:#fffbeb;
  --emerald:#059669; --emerald-pale:#ecfdf5;
  --red:#dc2626; --red-pale:#fef2f2;
  --orange:#ea580c; --orange-pale:#fff7ed;
  --purple:#7c3aed; --purple-pale:#f5f3ff;
  --indigo:#4338ca; --indigo-pale:#eef2ff;
  --g50:#f8fafc; --g100:#f1f5f9; --g200:#e2e8f0;
  --g300:#cbd5e1; --g400:#94a3b8; --g500:#64748b;
  --g600:#475569; --g700:#334155; --g800:#1e293b; --g900:#0f172a;
  --border:#e2e8f0;
  --navy2:#1a3460; --gold2:#f0c050; --blue2:#1d4ed8;
  --sh-sm:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --sh:0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
  --sh-lg:0 10px 24px rgba(0,0,0,.10),0 4px 8px rgba(0,0,0,.06);
  /* Theme colour tokens (overridden per [data-theme]) */
  --t-hdr-a:#071628; --t-hdr-b:#0f2449; --t-hdr-c:#122a56;
  --t-nav:#1a3460;   --t-nav-border:rgba(201,162,39,.28);
  --t-hero-a:#071628; --t-hero-b:#0f2449; --t-hero-c:#1d3a6e;
  --t-blob:rgba(37,99,235,.18);
}
/* ── Colour Themes ─────────────────────────────────── */
[data-theme="ocean"]{
  --t-hdr-a:#062847; --t-hdr-b:#0c3d62; --t-hdr-c:#0e5280;
  --t-nav:#0c3d62;   --t-nav-border:rgba(56,189,248,.28);
  --t-hero-a:#052038; --t-hero-b:#0a3358; --t-hero-c:#0e4d7a;
  --t-blob:rgba(14,165,233,.22);
  --navy:#0e5280; --navy-mid:#0c3d62; --navy-light:#0d4875;
  --blue:#0ea5e9; --blue-light:#38bdf8; --blue-pale:#e0f2fe;
  --gold:#38bdf8; --gold-light:#7dd3fc;
}
[data-theme="forest"]{
  --t-hdr-a:#071c10; --t-hdr-b:#0d2e1a; --t-hdr-c:#124023;
  --t-nav:#0d2e1a;   --t-nav-border:rgba(34,197,94,.28);
  --t-hero-a:#071c10; --t-hero-b:#0d2e1a; --t-hero-c:#144d26;
  --t-blob:rgba(22,163,74,.22);
  --navy:#124023; --navy-mid:#0d2e1a; --navy-light:#165930;
  --blue:#16a34a; --blue-light:#22c55e; --blue-pale:#f0fdf4;
  --gold:#ca8a04; --gold-light:#eab308;
}
[data-theme="purple"]{
  --t-hdr-a:#1a0830; --t-hdr-b:#2a0f50; --t-hdr-c:#3b1278;
  --t-nav:#2a0f50;   --t-nav-border:rgba(139,92,246,.32);
  --t-hero-a:#1a0830; --t-hero-b:#2a0f50; --t-hero-c:#3d1580;
  --t-blob:rgba(124,58,237,.25);
  --navy:#3b1278; --navy-mid:#2a0f50; --navy-light:#4a1d8a;
  --blue:#7c3aed; --blue-light:#8b5cf6; --blue-pale:#f5f3ff;
  --gold:#c026d3; --gold-light:#e879f9;
}
[data-theme="dark"]{
  --t-hdr-a:#090e1a; --t-hdr-b:#101624; --t-hdr-c:#162035;
  --t-nav:#13192b;   --t-nav-border:rgba(250,189,47,.28);
  --t-hero-a:#090e1a; --t-hero-b:#101624; --t-hero-c:#162035;
  --t-blob:rgba(59,130,246,.2);
  --navy:#162035; --navy-mid:#13192b; --navy-light:#1f2844;
  --blue:#3b82f6; --blue-light:#60a5fa;
  --gold:#fbbf24; --gold-light:#fde68a;
  /* พลิกสเกลเทา: ค่าที่เคย "อ่อน" (พื้นหลัง) → มืด, ค่าที่เคย "เข้ม" (ตัวอักษร) → สว่าง */
  --g50:#161d2e; --g100:#1b2333; --g200:#2a3346; --g300:#3a465e;
  --g400:#8b96a8; --g500:#9aa6b8; --g600:#bcc6d4; --g700:#d6dce6; --g800:#e8edf4; --g900:#f4f7fb;
  --border:#2a3346;
  --blue-pale:#17233c; --emerald-pale:#0e2a20; --amber-pale:#2a2411;
  --red-pale:#2e1717; --orange-pale:#2a1d10; --purple-pale:#221a39; --indigo-pale:#1a1e3c;
  --sh-sm:0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
  --sh:0 4px 12px rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.3);
  --sh-lg:0 10px 24px rgba(0,0,0,.55),0 4px 8px rgba(0,0,0,.4);
  --surface:#151d2e; --surface-2:#0f1626;
}
/* ── Dark mode: พื้นผิวหลัก (สโคปใต้ dark เท่านั้น — ธีมสว่างไม่กระทบ) ── */
[data-theme="dark"] body{background:#0b1120;background-image:radial-gradient(ellipse at 0% 0%,rgba(59,130,246,.10) 0%,transparent 55%),radial-gradient(ellipse at 100% 100%,rgba(37,99,235,.08) 0%,transparent 55%);color:var(--g800)}
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .modal-box,
[data-theme="dark"] .db-kpi-card{background:var(--surface);border-color:var(--border);color:var(--g800)}
[data-theme="dark"] .db-kpi-card.kpi-blue{background:linear-gradient(160deg,#151d2e 55%,#17233c 100%)}
[data-theme="dark"] .db-kpi-card.kpi-green,[data-theme="dark"] .db-kpi-card.kpi-emerald{background:linear-gradient(160deg,#151d2e 55%,#0e2a20 100%)}
[data-theme="dark"] .db-kpi-card.kpi-red{background:linear-gradient(160deg,#151d2e 55%,#2e1717 100%)}
[data-theme="dark"] .db-kpi-card.kpi-purple{background:linear-gradient(160deg,#151d2e 55%,#221a39 100%)}
[data-theme="dark"] .db-kpi-card.kpi-amber{background:linear-gradient(160deg,#151d2e 55%,#2a2411 100%)}
[data-theme="dark"] .feat-quick-card{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .hero-chart-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .fi,
[data-theme="dark"] input:not([type=checkbox]):not([type=radio]),
[data-theme="dark"] select,
[data-theme="dark"] textarea{background:var(--surface-2);color:var(--g800);border-color:var(--g300)}
[data-theme="dark"] .fi::placeholder,[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:var(--g500)}
[data-theme="dark"] table.dt th{background:#1b2333;color:var(--g700);border-color:var(--border)}
[data-theme="dark"] table.dt td{border-color:var(--g200)}
[data-theme="dark"] table.dt tbody tr:hover{background:#17233c}
[data-theme="dark"] .modal-hdr{border-color:var(--border)}
[data-theme="dark"] select option{background:#151d2e;color:var(--g800)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Sarabun',sans-serif;background:#dde4ef;background-image:radial-gradient(ellipse at 0% 0%,rgba(15,36,73,.09) 0%,transparent 55%),radial-gradient(ellipse at 100% 100%,rgba(37,99,235,.06) 0%,transparent 55%);color:var(--g800);font-size:15px;line-height:1.6}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}

/* GOV TOP UTILITY BAR */
.sticky-shell{position:sticky;top:0;z-index:960}
.gov-topbar{background:#030c1a;color:rgba(255,255,255,.55);font-size:11px;padding:5px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,255,255,.06)}
.gov-topbar-left{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px}
.gov-topbar-sep{opacity:.3;margin:0 3px}
.gov-topbar-right{font-size:11px;color:rgba(255,255,255,.5);white-space:nowrap;flex-shrink:0}
@media(max-width:600px){.gov-topbar{display:none}}

/* HEADER */
header{background:linear-gradient(135deg,var(--t-hdr-a) 0%,var(--t-hdr-b) 60%,var(--t-hdr-c) 100%);border-bottom:3px solid var(--gold);box-shadow:0 4px 20px rgba(0,0,0,.5)}
.hdr{margin:0;padding:12px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.hdr-brand{display:flex;align-items:center;gap:14px}
/* นาฬิกากลาง header */
.hdr-clock{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;padding:5px 18px;border-radius:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);flex-shrink:0;margin-left:auto}
.hdr-clock-time{font-size:19px;font-weight:700;color:#fff;letter-spacing:1.5px;font-variant-numeric:tabular-nums;text-shadow:0 1px 4px rgba(0,0,0,.3)}
.hdr-clock-time .sec{color:#f0c050;font-size:14px;letter-spacing:1px}
.hdr-clock-date{font-size:10.5px;color:rgba(255,255,255,.55);margin-top:1px;white-space:nowrap}
.hdr-logos{display:flex;align-items:center;gap:8px}
.hdr-logos img{height:50px;width:auto;object-fit:contain;filter:brightness(1.08) drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.hdr-title h1{font-size:17px;font-weight:700;color:#fff;line-height:1.3;text-shadow:0 1px 4px rgba(0,0,0,.3)}
.hdr-title p{font-size:11.5px;color:rgba(255,255,255,.5);margin-top:2px}
.hdr-room{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:7px 12px;backdrop-filter:blur(4px);flex-shrink:0}
.hdr-room label{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.65);display:flex;align-items:center;gap:5px;white-space:nowrap}
.hdr-room select{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#fff;font-family:inherit;font-size:14px;font-weight:600;padding:4px 26px 4px 9px;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center}
.hdr-room select option{background:#0f2044;color:#fff}

/* NAV */
nav{background:var(--t-nav);border-bottom:2px solid var(--t-nav-border)}
.nav-inner{max-width:1440px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:46px}
.nav-tabs{display:flex;align-items:center;height:100%;gap:1px}
.nav-btn{height:100%;padding:0 16px;background:transparent;border:none;color:rgba(255,255,255,.6);font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;border-bottom:3px solid transparent;transition:all .15s;white-space:nowrap}
.nav-btn:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav-btn.active{color:var(--gold-light);border-bottom-color:var(--gold-light);background:rgba(0,0,0,.2)}
.nav-btn svg{width:14px;height:14px}
.btn-print{background:#1a5c3c;color:#fff;border:none;border-radius:4px;padding:6px 14px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.btn-print:hover{background:#144d32}
.btn-print svg{width:14px;height:14px}

/* MAIN */
main{max-width:1440px;margin:0 auto;padding:24px}
.view-hidden{display:none!important}
/* แอนิเมชันเข้าเมื่อสลับหน้า */
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.view-anim{animation:viewIn .28s cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){.view-anim{animation:none}}

/* PAGE HEADER */
.pg-hdr{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.pg-title{display:flex;align-items:center;gap:12px}
.pg-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pg-icon i{font-size:24px}
.pg-title-text{}
.pg-title h2{font-size:19px;font-weight:700;color:var(--g900)}
.pg-title h2 .room{font-size:14px;font-weight:600;color:var(--blue);margin-left:6px}
.pg-title p{font-size:12.5px;color:var(--g500);margin-top:2px}
.btn-group{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:4px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;border:none}
.btn svg{width:14px;height:14px}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 2px 6px rgba(37,99,235,.3)}
.btn-primary:hover{background:#1d4ed8}
.btn-amber{background:var(--amber);color:#fff;box-shadow:0 2px 6px rgba(217,119,6,.3)}
.btn-amber:hover{background:#b45309}
.btn-outline{background:#fff;color:var(--g700);border:1px solid var(--border);box-shadow:var(--sh-sm)}
.btn-outline:hover{background:var(--g50);border-color:var(--g300)}
.btn-sm{padding:5px 11px;font-size:12px}
.btn-icon{padding:6px;border-radius:6px}

/* CARD */
.card{background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--sh-sm);overflow:hidden}

/* INFO BADGE */
.info-badge{display:inline-flex;align-items:center;gap:5px;background:var(--blue-pale);color:var(--navy-mid);border:1px solid #bfdbfe;border-radius:7px;padding:6px 12px;font-size:12.5px;font-weight:600}
.info-badge svg{width:13px;height:13px}
.badge-success{background:var(--emerald-pale);color:var(--emerald);border-color:#a7f3d0}

/* STATS */
.stats-strip{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.stat-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 18px;flex:1;min-width:120px;box-shadow:var(--sh-sm)}
.stat-val{font-size:24px;font-weight:700;color:var(--navy-mid);line-height:1}
.stat-lbl{font-size:11.5px;color:var(--g500);margin-top:3px}
.stat-warn .stat-val{color:var(--red)}

/* TABLE */
.tbl-wrap{overflow-x:auto}
table.dt{width:100%;border-collapse:collapse;font-size:13px}
table.dt th{background:var(--g50);color:var(--g700);font-weight:600;font-size:12px;padding:10px 12px;text-align:center;border-bottom:2px solid var(--border);border-right:1px solid var(--border);white-space:nowrap}
table.dt th:last-child{border-right:none}
table.dt td{padding:9px 12px;border-bottom:1px solid var(--g100);border-right:1px solid var(--g100);vertical-align:middle}
table.dt td:last-child{border-right:none}
table.dt tbody tr:hover{background:var(--blue-pale)}
table.dt td.cell-sel{background:#bfdbfe!important;outline:1px solid #3b82f6;outline-offset:-1px;user-select:none}
table.dt tbody tr:last-child td{border-bottom:none}
table.dt td.td-input{padding:0!important}
.grid-input{width:100%;height:36px;border:none;text-align:center;background:transparent;outline:none;font-family:inherit;font-size:13px;color:var(--g800)}
.grid-input:focus{background:#eff6ff;box-shadow:inset 0 0 0 2px var(--blue-light)}
.grid-input.exceed{color:var(--red)!important;background:var(--red-pale)!important;font-weight:700}
/* highlight reds like real PP5 */
.row-att-warn td{background:rgba(220,38,38,.04)!important}
.row-att-danger td{background:rgba(220,38,38,.08)!important}
.cell-miss{background:var(--red-pale)!important;color:var(--red)!important;font-weight:700}

/* SCORE TABLE COLORS */
.th-pre{background:#eff6ff;color:var(--navy-mid)}
.th-mid{background:var(--amber-pale);color:#92400e}
.th-post{background:#eff6ff;color:var(--navy-mid)}
.th-final{background:var(--indigo-pale);color:#3730a3}
.th-total{background:var(--g100);color:var(--g800)}
.th-grade{background:var(--purple-pale);color:var(--purple)}
.td-pre-sum{background:#dbeafe;font-weight:700;color:var(--navy-mid);text-align:center}
.td-post-sum{background:#dbeafe;font-weight:700;color:var(--navy-mid);text-align:center}
.td-mid-sum{background:#fef3c7;font-weight:700;color:#92400e;text-align:center}
.td-total{background:var(--g100);font-weight:700;text-align:center}
.td-grade{background:var(--purple-pale);font-weight:700;color:var(--purple);text-align:center}

/* GRADE BADGES */
.gb{display:inline-block;padding:2px 9px;border-radius:20px;font-weight:700;font-size:12.5px}
.gb-4{background:#dcfce7;color:#15803d}
.gb-3{background:#d1fae5;color:#059669}
.gb-2{background:#fef3c7;color:#d97706}
.gb-1{background:#fee2e2;color:#dc2626}
.gb-0{background:var(--g100);color:var(--g600)}
.gb-r{background:#fef9c3;color:#854d0e}
/* ช่องเกรดแบบแก้ไขได้ (dropdown หน้าตาเหมือน badge เดิม) */
.grade-sel{font-family:inherit;border:none;cursor:pointer;text-align:center;text-align-last:center;
  padding:2px 6px;border-radius:20px;font-weight:700;font-size:12.5px;appearance:none;-webkit-appearance:none;
  width:62px;min-width:62px;max-width:62px;transition:box-shadow .15s}
.grade-sel:hover{box-shadow:0 0 0 2px rgba(37,99,235,.25)}
.grade-sel:focus{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.35)}
.grade-sel option{background:#fff;color:var(--g800);font-weight:600}

/* RESULT BADGES */
.result-pass{display:inline-block;padding:2px 9px;border-radius:20px;font-weight:700;font-size:12px;background:#dcfce7;color:#15803d}
.result-r   {display:inline-block;padding:2px 9px;border-radius:20px;font-weight:700;font-size:12px;background:#fef3c7;color:#b45309}
.result-ms  {display:inline-block;padding:2px 9px;border-radius:20px;font-weight:700;font-size:12px;background:#fee2e2;color:#dc2626}
.result-no  {display:inline-block;padding:2px 9px;border-radius:20px;font-weight:600;font-size:12px;background:var(--g100);color:var(--g400)}

/* NO PILL */
.no-pill{width:28px;height:28px;background:var(--navy-mid);color:#fff;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}

/* ATTENDANCE */
.att-radio{display:none}
.att-label{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:7px;cursor:pointer;font-weight:700;border:1.5px solid var(--border);transition:all .15s;font-size:12.5px;color:var(--g500)}
.att-label:hover{border-color:var(--g400);color:var(--g700);background:var(--g50)}
.att-radio:checked+.att-label.s-p{background:var(--emerald);color:#fff;border-color:var(--emerald)}
.att-radio:checked+.att-label.s-a{background:var(--red);color:#fff;border-color:var(--red)}
.att-radio:checked+.att-label.s-l{background:var(--amber);color:#fff;border-color:var(--amber)}
.att-radio:checked+.att-label.s-lt{background:var(--blue);color:#fff;border-color:var(--blue)}

/* PROMOTE / REORDER */
.promote-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;margin-bottom:6px;background:#fff}
.promote-row:has(input:checked){border-color:var(--blue);background:var(--blue-pale)}
.room-arrow{display:flex;align-items:center;gap:6px;flex:1;flex-wrap:wrap}
.room-tag{display:inline-block;background:var(--navy-mid);color:#fff;border-radius:6px;padding:2px 10px;font-size:12.5px;font-weight:700}
.room-tag.grad{background:var(--emerald);color:#fff}
.room-tag.new{background:var(--amber);color:#fff}
.reorder-list{display:flex;flex-direction:column;gap:6px;max-height:420px;overflow-y:auto;padding:2px}
.reorder-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:#fff;cursor:grab;user-select:none;transition:box-shadow .15s}
.reorder-item:hover{box-shadow:var(--sh);border-color:var(--g300)}
.reorder-item.drag-over{border-color:var(--blue);background:var(--blue-pale)}
.reorder-item.dragging{opacity:.4;cursor:grabbing}
.reorder-no{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--g100);border-radius:6px;font-size:12px;font-weight:700;color:var(--g600);flex-shrink:0}
.drag-handle{color:var(--g300);font-size:18px;line-height:1;flex-shrink:0}

/* ATTLOG — ปพ.5 document */
.attlog-doc{background:#fff;max-width:1400px;margin:0 auto;padding:20px 28px;border:1px solid var(--border);border-radius:10px;box-shadow:var(--sh)}
.attlog-doc-title{text-align:center;margin-bottom:10px}
.attlog-doc-title .school{font-size:15px;font-weight:700;color:var(--navy)}
.attlog-doc-title .doctitle{font-size:13.5px;font-weight:600;color:var(--g700);margin-top:2px}
.attlog-meta{display:flex;flex-wrap:wrap;gap:4px 20px;border:1px solid var(--g300);border-radius:7px;padding:8px 14px;margin-bottom:12px;font-size:12.5px;background:var(--g50)}
.attlog-meta span{display:inline-flex;gap:4px;align-items:center}
.attlog-meta b{color:var(--g900)}
.attlog-tbl-wrap{overflow-x:auto}
table.attlog-tbl{border-collapse:collapse;font-size:12px;width:100%;min-width:600px}
table.attlog-tbl th,table.attlog-tbl td{border:1px solid #aaa;padding:0}
table.attlog-tbl thead th{background:#e8edf5;color:#1e293b;font-weight:700;text-align:center;padding:3px 4px;white-space:nowrap;font-size:11px}
table.attlog-tbl thead th.th-wk{background:#c7d7f0;border-right:2px solid #888;font-size:10.5px}
table.attlog-tbl thead th.th-sum{background:#d1fae5;color:#065f46;border-left:2px solid #888}
table.attlog-tbl thead th.th-pct{background:#fef9c3;color:#713f12}
table.attlog-tbl tbody td{text-align:center;padding:2px 3px;font-size:12.5px}
table.attlog-tbl tbody td.td-no{color:var(--g500);font-size:11px}
table.attlog-tbl tbody td.td-name{text-align:left;padding:3px 8px;white-space:nowrap;font-size:12.5px}
table.attlog-tbl tbody td.td-border-r{border-right:2px solid #888}
table.attlog-tbl tbody td.td-border-l{border-left:2px solid #888}
table.attlog-tbl tbody tr:nth-child(even){background:#f8fafc}
.attlog-ok{background:#dcfce7;color:#166534;font-weight:700}
.attlog-ab{background:#fee2e2;color:#991b1b;font-weight:700}
.attlog-leave{background:#fef9c3;color:#854d0e;font-weight:700}
.attlog-late{background:#dbeafe;color:#1e40af;font-weight:700}
.attlog-sum-ok{color:#166534;font-weight:700}
.attlog-sum-ab{color:#991b1b;font-weight:700}
.attlog-sum-lv{color:#854d0e;font-weight:700}
.attlog-sum-lt{color:#1e40af;font-weight:700}
.attlog-sum-tot{font-weight:700;color:var(--g800)}
.attlog-sum-pct{font-weight:700}
.attlog-legend{display:flex;gap:14px;font-size:11.5px;margin-bottom:10px;flex-wrap:wrap}
.attlog-legend span{display:inline-flex;align-items:center;gap:5px}
.attlog-legend .leg-dot{width:14px;height:14px;border-radius:3px;display:inline-block;flex-shrink:0}
.attlog-footer{display:flex;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px dashed var(--g300)}
.attlog-sig{text-align:center;min-width:220px;font-size:12.5px}
.attlog-sig .sig-line{border-bottom:1px solid var(--g400);height:32px;margin:0 20px 4px}
@media print{
  header,nav,.pg-hdr,.no-print{display:none!important}
  main:not(#view-attlog){display:none!important}
  #view-attlog{padding:0!important;margin:0!important;max-width:none!important}
  .attlog-doc{box-shadow:none!important;border:none!important;padding:4mm 6mm!important}
  table.attlog-tbl th,table.attlog-tbl td{font-size:9px!important;padding:1px 2px!important}
  .attlog-doc-title .school{font-size:13px!important}
  .attlog-meta{font-size:10px!important}
}
@page{size:A4 landscape;margin:8mm}

/* FORM */
.fi{border:1.5px solid var(--g300);border-radius:7px;padding:7px 11px;font-family:inherit;font-size:13.5px;width:100%;transition:all .15s;color:var(--g800);background:#fff}
.fi:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.fi[readonly]{background:var(--g50);color:var(--g500)}
.fi-sm{padding:5px 9px;font-size:13px}

/* SETTINGS */
.set-section{background:#fff;border:1px solid var(--border);border-radius:12px;padding:22px;margin-bottom:18px;box-shadow:var(--sh-sm)}
.set-section h3{font-size:15px;font-weight:700;color:var(--g900);margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px}
.set-section h3 svg{width:16px;height:16px;color:var(--blue)}
.struct-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.struct-item label{display:block;font-size:11.5px;font-weight:700;margin-bottom:5px}
.obj-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.obj-section{background:var(--blue-pale);border:1px solid #bfdbfe;border-radius:9px;padding:16px}
.obj-section h4{font-size:13px;font-weight:700;color:var(--navy-mid);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #bfdbfe}
.obj-row{display:grid;grid-template-columns:26px 1fr 72px;gap:7px;align-items:center;margin-bottom:7px}
.obj-num{width:24px;height:24px;background:var(--navy-mid);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700}
.obj-sum{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid #bfdbfe}
.sum-badge{padding:3px 12px;border-radius:20px;font-weight:700;font-size:13px}
.sum-ok{background:#dcfce7;color:#15803d}
.sum-err{background:var(--red-pale);color:var(--red)}
.struct-alert{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:9px 14px;border-radius:7px;margin-top:14px}
.struct-alert svg{width:14px;height:14px}
.alert-warn{background:var(--red-pale);color:var(--red);border:1px solid #fecaca}
.alert-ok{background:var(--emerald-pale);color:var(--emerald);border:1px solid #a7f3d0}

/* ATT BAR */
.att-bar{background:var(--g50);border-bottom:1px solid var(--border);padding:10px 18px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.att-bar-info{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.att-cur{background:var(--blue-pale);color:var(--blue);border:1px solid #bfdbfe;border-radius:6px;padding:3px 10px;font-size:12.5px;font-weight:700}
/* week date fields */
.week-date-row{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:8px;padding:10px 14px;box-shadow:var(--sh-sm);flex-wrap:wrap}
.week-date-row label{font-size:11.5px;font-weight:700;color:var(--g600);white-space:nowrap}
.week-date-row input[type=date]{border:1.5px solid var(--g300);border-radius:6px;padding:5px 9px;font-family:inherit;font-size:13px;color:var(--g800)}
.week-date-row input[type=date]:focus{outline:none;border-color:var(--blue)}

/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(15,32,68,.55);backdrop-filter:blur(2px);z-index:2000;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}
.modal-overlay.show{display:flex}
/* modal-box เป็น flex column — header/footer ติดอยู่เสมอ เฉพาะ body ที่ scroll */
.modal-box{background:#fff;border-radius:16px;box-shadow:var(--sh-lg);width:100%;max-width:700px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;animation:modal-in .2s ease}
@keyframes modal-in{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes lo-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.modal-hdr{display:flex;justify-content:space-between;align-items:center;padding:18px 22px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.modal-hdr h3{font-size:16px;font-weight:700;color:var(--g900)}
.modal-close{background:none;border:none;cursor:pointer;color:var(--g400);padding:4px;border-radius:6px;display:flex}
.modal-close:hover{color:var(--g700);background:var(--g100)}
.modal-close svg{width:18px;height:18px}
.modal-body{padding:18px 22px;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.modal-footer{padding:14px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;background:var(--g50);border-radius:0 0 12px 12px;flex-shrink:0}
.form-section{background:var(--g50);border:1px solid var(--border);border-radius:9px;padding:14px;margin-bottom:12px}
.form-section.blue-bg{background:var(--blue-pale);border-color:#bfdbfe}
.form-section.amber-bg{background:var(--amber-pale);border-color:#fcd34d}
.form-section.indigo-bg{background:var(--indigo-pale);border-color:#c7d2fe}
.form-section.orange-bg{background:var(--orange-pale);border-color:#fed7aa}
.form-section h4{font-size:12.5px;font-weight:700;margin-bottom:10px;color:var(--g800)}
.fg{display:grid;gap:9px}
.fg-2{grid-template-columns:1fr 1fr}
.fg-3{grid-template-columns:repeat(3,1fr)}
.fg-4{grid-template-columns:repeat(4,1fr)}
.fg-5{grid-template-columns:repeat(5,1fr)}
.fgroup label{display:block;font-size:11.5px;font-weight:600;color:var(--g600);margin-bottom:4px}

/* TOAST */
#toast{position:fixed;bottom:24px;right:24px;background:var(--g900);color:#fff;padding:11px 18px;border-radius:9px;font-size:13.5px;font-weight:500;box-shadow:var(--sh-lg);z-index:9999;display:none;align-items:center;gap:8px;animation:toast-in .2s ease}
#toast.show{display:flex}
#toast.success{border-left:4px solid var(--emerald)}
#toast.error{border-left:4px solid var(--red)}
#toast svg{width:15px;height:15px}
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ATT % warning colors */
.pct-danger{color:var(--red);font-weight:700}
.pct-warn{color:var(--amber);font-weight:700}
.pct-ok{color:var(--emerald);font-weight:600}

/* ══════════════════════════════════════
   TIMETABLE STYLES  (แถว=วัน  คอลัมน์=คาบ)
══════════════════════════════════════ */
.tt-wrap{overflow-x:auto}
.tt-table{border-collapse:collapse;width:100%;table-layout:auto}
/* header */
.tt-table th{background:var(--navy2);color:#fff;font-size:11px;font-weight:600;
  padding:7px 4px;text-align:center;border:1px solid #2d4a7a;white-space:nowrap}
.tt-table th.th-day{background:var(--navy2);width:72px;font-size:12px}
.tt-table th.th-period{background:var(--navy-mid)}
.tt-table th.th-period .p-num{font-size:12.5px;font-weight:700;line-height:1.3}
.tt-table th.th-period .p-time{font-size:9.5px;opacity:.7;margin-top:2px}
/* break col */
.tt-table th.th-break,.tt-table td.td-break{
  background:#e2e8f0;width:36px;text-align:center;vertical-align:middle;
  border:1px solid var(--g300);font-size:9px;color:var(--g500);font-weight:600;padding:2px}
/* day header cell */
.tt-table td.td-day{
  background:#1a3460 !important;color:#fff !important;text-align:center;vertical-align:middle;
  padding:8px 6px;border:1px solid #2d4a7a;line-height:1.4;width:76px;min-width:76px}
.tt-table td.td-day .day-th{font-size:13px;font-weight:700;color:#fff !important;display:block}
.tt-table td.td-day .day-en{font-size:9.5px;color:rgba(255,255,255,.5) !important;letter-spacing:.05em;margin-top:2px;display:block}
.tt-table td.td-day .today-badge{font-size:9px;background:var(--gold2);color:var(--navy2);border-radius:10px;padding:1px 6px;margin-top:3px;font-weight:700;display:inline-block}
/* today row — เพิ่ม border ซ้ายสีทอง ไม่เปลี่ยน background */
.tt-table td.td-day.today-row{background:#1d4ed8 !important;border-left:4px solid var(--gold2) !important}
.tt-table td.td-slot.today-row{background:rgba(37,99,235,.05);border-left:3px solid rgba(240,192,80,.5) !important}
/* slot cells */
.tt-table td.td-slot{border:1px solid var(--g200);vertical-align:top;padding:0;
  height:72px;position:relative}
/* slot content */
.tt-slot{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;cursor:pointer;transition:background .12s;padding:4px 3px;gap:3px;background:var(--g0)}
.tt-slot:hover{background:#f0f9ff}
.tt-slot.filled{background:#f0f7ff}
.tt-slot.filled:hover{background:#dbeafe}
.slot-subj{font-size:11px;font-weight:700;color:var(--navy2);text-align:center;
  line-height:1.2;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
.slot-room{font-size:10px;color:var(--blue);font-weight:600;background:#dbeafe;
  padding:1px 6px;border-radius:10px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.slot-empty{font-size:18px;color:var(--g300);line-height:1}
.slot-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
/* legend */
.tt-legend{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.legend-pill{display:flex;align-items:center;gap:5px;background:var(--g0);border:1px solid var(--bd);
  border-radius:20px;padding:3px 10px;font-size:12px;font-weight:600}
.legend-pill.active{border-color:var(--blue2);background:var(--blue-pale);color:var(--navy2)}
.legend-pill .ldot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
/* summary */
.tt-summary{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.tt-sum-card{background:#fff;border:1px solid var(--bd);border-radius:8px;padding:10px 14px;flex:1;min-width:110px;box-shadow:0 1px 4px rgba(0,0,0,.07)}
.tt-sum-card .sv{font-size:20px;font-weight:700;color:var(--navy2)}
.tt-sum-card .sl{font-size:11px;color:var(--g500);margin-top:2px}
/* =============================================
   RESPONSIVE — มือถือ & แท็บเล็ต
   ============================================= */

/* แท็บเล็ต (≤900px) */
@media(max-width:900px){
  .hdr{padding:10px 16px;gap:10px}
  .hdr-clock{display:none}
  .hdr-logos img{height:38px}
  .hdr-title h1{font-size:14px}
  .hdr-title p{display:none}
  .nav-inner{padding:0 12px;height:42px}
  .nav-btn{padding:0 10px;font-size:12px;gap:4px}
  .nav-btn svg{width:13px;height:13px}
  main{padding:16px}
  .struct-grid{grid-template-columns:1fr 1fr}
  .obj-grid{grid-template-columns:1fr}
  .stats-strip{flex-wrap:wrap}
}

/* มือถือ (≤600px) */
@media(max-width:600px){
  /* Header — ทุกอย่างอยู่แถวเดียว ไม่ wrap */
  .hdr{flex-wrap:nowrap;padding:8px 10px;gap:8px;align-items:center}
  /* ซ่อนโลโก้ สพฐ. และ World Class เหลือแค่โลโก้โรงเรียน */
  .hdr-logos img:first-child,.hdr-logos img:last-child{display:none}
  .hdr-logos img{height:34px}
  .hdr-brand{gap:8px;min-width:0;flex:1;overflow:hidden}
  .hdr-logos{flex-shrink:0}
  /* ชื่อระบบ — ย่อ ไม่ wrap */
  .hdr-title{min-width:0;overflow:hidden}
  .hdr-title h1{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hdr-title p{display:none}
  /* Teacher selector — compact ขวาสุด */
  .hdr-room{flex-shrink:0;padding:5px 8px;gap:5px}
  .hdr-room label span,.hdr-room label svg{display:none} /* ซ่อน icon + ข้อความ "ครูผู้สอน" */
  .hdr-room label{display:none}
  .hdr-room select{font-size:12.5px;max-width:130px;padding:3px 22px 3px 7px}

  /* Nav — scroll แนวนอนได้ */
  .nav-inner{padding:0 8px;height:auto;min-height:40px;flex-wrap:wrap;gap:0}
  .nav-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;gap:0;padding-bottom:2px}
  .nav-tabs::-webkit-scrollbar{height:2px}
  .nav-btn{padding:0 10px;font-size:11.5px;gap:3px;height:40px;flex-shrink:0}
  .nav-btn svg{display:none} /* ซ่อน icon บนมือถือ */
  .btn-print{font-size:11px;padding:5px 10px;white-space:nowrap}
  .btn-print svg{display:none}

  /* Main content */
  main{padding:12px}
  .pg-hdr{margin-bottom:12px;gap:8px}
  .pg-title h2{font-size:16px}
  .pg-title p{font-size:11.5px}
  .btn-group{gap:6px}
  .btn{padding:6px 12px;font-size:12px}
  .btn-sm{padding:4px 9px;font-size:11px}

  /* Dashboard grid */
  #db-kpi{grid-template-columns:repeat(3,1fr)!important;gap:8px}
  #db-kpi .stat-card{padding:10px 12px}
  #db-kpi .stat-val{font-size:20px}

  /* Dashboard 2-col → 1-col */
  main > div[style*="grid-template-columns:1fr 1fr"]{
    display:flex!important;flex-direction:column!important;gap:12px!important
  }

  /* Cards */
  .card{border-radius:8px}
  .stat-card{min-width:100px;padding:10px 12px}
  .stat-val{font-size:20px}

  /* Tables — scroll แนวนอน */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.dt{font-size:12px;min-width:480px}
  table.dt th,table.dt td{padding:7px 8px}

  /* Score grid */
  .td-pre-sum,.td-mid-sum,.td-post-sum,.td-total,.td-grade{min-width:36px}

  /* Attendance */
  .att-bar{flex-direction:column;align-items:flex-start;gap:8px}
  .att-bar-info{flex-wrap:wrap;gap:6px}
  #att-tt-info{font-size:11.5px}

  /* Modal — มือถือ/iPad: ลด padding, header-footer ติดอยู่เสมอ, body scroll */
  .modal-overlay{padding:8px;align-items:flex-end}
  .modal-box{
    width:100%!important;max-width:100%!important;margin:0;
    max-height:calc(100dvh - 40px)!important;
    border-radius:16px 16px 0 0
  }
  .modal-hdr{padding:14px 16px 12px}
  .modal-hdr h3{font-size:15px}
  .modal-body{padding:12px 14px}
  .modal-footer{
    padding:12px 14px;
    padding-bottom:max(12px, env(safe-area-inset-bottom));
    gap:8px;flex-wrap:wrap
  }
  /* ปุ่มใน footer เต็มแถวบนมือถือเล็ก */
  .modal-footer .btn{flex:1;min-width:120px;justify-content:center}
  .fg-2,.fg-3,.fg-4,.fg-5{grid-template-columns:1fr!important}
  .fg-3.allow-2col{grid-template-columns:1fr 1fr!important}

  /* Settings */
  .struct-grid{grid-template-columns:1fr!important}
  .obj-grid{grid-template-columns:1fr!important}
  .set-section{padding:14px}

  /* Timetable — scroll แนวนอน */
  .tt-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tt-table{min-width:600px;font-size:11px}
  .tt-table td.td-slot{height:60px}
  .slot-subj{font-size:10px}
  .slot-room{font-size:9.5px;padding:1px 4px}
  .tt-summary{gap:7px}
  .tt-sum-card{min-width:80px;padding:8px 10px}
  .tt-sum-card .sv{font-size:16px}
  .tt-sum-card .sl{font-size:10px}
  .tt-legend{gap:5px}
  .legend-pill{font-size:11px;padding:2px 8px}

  /* Week date row */
  .week-date-row{flex-direction:column;align-items:flex-start;gap:6px}
  .week-date-row input[type=date]{width:100%}

  /* Manage table ซ่อนบางคอลัมน์ */
  .hide-mobile{display:none!important}

  /* Teacher/Room selects ใน header */
  .hdr-room select{max-width:130px}

  /* Dashboard mobile */
  .db-hero{flex-direction:column!important;padding:14px}
  .db-hero-left{border-right:none!important;border-bottom:1px solid rgba(255,255,255,.15);padding-right:0!important;padding-bottom:10px;width:100%}
  .db-hero-center{justify-content:flex-start!important}
  .db-hero-right{min-width:auto!important;max-width:none!important;width:100%}
  .db-cards-grid{grid-template-columns:1fr!important}
  .db-kpi-wrap{grid-template-columns:repeat(3,1fr)!important;gap:8px}
}

/* ── iPad / Tablet (701–1024px) ── */
@media(min-width:701px) and (max-width:1024px){
  /* Modal ปรับขนาดให้เหมาะ iPad ทั้ง portrait/landscape */
  .modal-overlay{padding:16px}
  .modal-box{max-height:calc(100dvh - 32px)!important;max-width:min(700px,94vw)!important}
  .modal-hdr{padding:16px 20px 12px}
  .modal-body{padding:14px 18px}
  .modal-footer{padding:12px 18px;padding-bottom:max(12px, env(safe-area-inset-bottom))}
}

/* ====== DASHBOARD REDESIGN ====== */
.db-hero{background:linear-gradient(135deg,var(--t-hero-a) 0%,var(--t-hero-b) 50%,var(--t-hero-c) 100%);color:#fff;border-radius:18px;padding:16px 22px;margin-bottom:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-left:5px solid var(--gold);position:relative;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.28)}
.db-hero::before{content:'';position:absolute;top:-55px;right:-55px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.09) 0%,transparent 70%);pointer-events:none}
.db-hero::after{content:'';position:absolute;bottom:-80px;left:22%;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,var(--t-blob) 0%,transparent 65%);pointer-events:none}
.db-hero-left{flex:0 0 auto;min-width:180px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1;padding-right:14px;border-right:1px solid rgba(255,255,255,.15)}
.db-hero-center{flex:1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:relative;z-index:1;justify-content:center}
.db-hero-stat{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:14px 10px;min-width:80px;backdrop-filter:blur(4px)}
.db-hero-stat-val{font-size:26px;font-weight:800;line-height:1}
.db-hero-stat-lbl{font-size:11px;opacity:.75;white-space:nowrap}
.db-hero-right{flex:0 0 auto;min-width:210px;max-width:320px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:12px 14px;position:relative;z-index:1;backdrop-filter:blur(8px)}
.db-today-hdr{font-size:11px;font-weight:700;letter-spacing:.07em;opacity:.6;margin-bottom:8px;text-transform:uppercase}
.db-today-item{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:12.5px}
.db-today-item:last-child{border-bottom:none}
.db-today-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
/* KPI GRID */
.db-kpi-wrap{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:18px}
.db-kpi-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px 16px 14px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--sh-sm);transition:transform .2s,box-shadow .2s;cursor:default;border-top:4px solid var(--navy-mid)}
.db-kpi-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.13);transform:translateY(-3px)}
.db-kpi-card.kpi-blue{border-top-color:#3b82f6;background:linear-gradient(160deg,#fff 55%,#eff6ff 100%)}
.db-kpi-card.kpi-green{border-top-color:#22c55e;background:linear-gradient(160deg,#fff 55%,#f0fdf4 100%)}
.db-kpi-card.kpi-emerald{border-top-color:#16a34a;background:linear-gradient(160deg,#fff 55%,#ecfdf5 100%)}
.db-kpi-card.kpi-red{border-top-color:#ef4444;background:linear-gradient(160deg,#fff 55%,#fff1f2 100%)}
.db-kpi-card.kpi-purple{border-top-color:#8b5cf6;background:linear-gradient(160deg,#fff 55%,#faf5ff 100%)}
.db-kpi-card.kpi-amber{border-top-color:#f59e0b;background:linear-gradient(160deg,#fff 55%,#fffbeb 100%)}
.db-kpi-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.db-kpi-val{font-size:32px;font-weight:800;line-height:1;color:var(--g900);font-variant-numeric:tabular-nums}
.db-kpi-lbl{font-size:12px;color:var(--g500);font-weight:500;margin-top:6px}
/* theme swatch active ring */
.theme-swatch.swatch-active{border-color:var(--blue)!important;background:var(--blue-pale)!important}
.db-cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.db-card{padding:18px}

/* ====== FEATURE QUICK-ACCESS GRID ====== */
.feat-section{margin-bottom:20px}
.feat-section-title{font-size:11px;font-weight:700;color:#1a3460;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;padding-left:10px;padding-bottom:7px;border-bottom:2px solid var(--gold);display:inline-block}
.feat-quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.feat-quick-card{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:14px;border:1.5px solid #e8edf5;cursor:pointer;font-family:inherit;text-align:left;transition:all .2s ease;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.04);width:100%}
.feat-quick-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.1);border-color:var(--gold)}
.feat-quick-card.fq-blue{background:linear-gradient(135deg,#1a2e6b 0%,#1d4ed8 100%);border-color:transparent;box-shadow:0 4px 16px rgba(29,78,216,.25)}
.feat-quick-card.fq-blue:hover{box-shadow:0 10px 30px rgba(29,78,216,.4);border-color:transparent;transform:translateY(-2px)}
.feat-quick-card.fq-purple{background:linear-gradient(135deg,#2d1b69 0%,#5b21b6 100%);border-color:transparent;box-shadow:0 4px 16px rgba(91,33,182,.25)}
.feat-quick-card.fq-purple:hover{box-shadow:0 10px 30px rgba(91,33,182,.4);border-color:transparent;transform:translateY(-2px)}
.fq-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.feat-quick-card.fq-blue .fq-icon,.feat-quick-card.fq-purple .fq-icon{background:rgba(255,255,255,.18);backdrop-filter:blur(4px)}
.fq-text{flex:1;min-width:0}
.fq-label{font-size:14px;font-weight:700;color:var(--g800);line-height:1.2}
.fq-sub{font-size:11.5px;color:var(--g500);margin-top:2px}
.feat-quick-card.fq-blue .fq-label,.feat-quick-card.fq-purple .fq-label{color:#fff}
.feat-quick-card.fq-blue .fq-sub,.feat-quick-card.fq-purple .fq-sub{color:rgba(255,255,255,.72)}

/* ====== MOBILE BOTTOM NAV ====== */
.mob-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e2e8f0;z-index:900;padding:6px 0 env(safe-area-inset-bottom,6px);justify-content:space-around;align-items:center;box-shadow:0 -2px 12px rgba(0,0,0,.08)}
.mob-nav-btn{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;font-family:inherit;cursor:pointer;padding:4px 8px;border-radius:10px;transition:background .15s;min-width:56px;color:var(--g500)}
.mob-nav-btn.active{color:var(--t-nav)}
.mob-nav-btn svg{width:22px;height:22px}
.mob-nav-btn span{font-size:10px;font-weight:600}
.mob-nav-print{background:#1a3460;color:#fff!important;border-radius:4px;padding:6px 10px!important}
@media(max-width:700px){
  .mob-nav{display:flex}
  body{padding-bottom:68px}
  /* ซ่อน top nav บนมือถือ เพราะ mob-nav รับหน้าที่แทน */
  #top-nav{display:none!important}
  .feat-quick-grid{grid-template-columns:repeat(2,1fr)!important;gap:8px}
  .fq-label{font-size:13px}
  .fq-sub{font-size:11px}
  .fq-icon{width:38px;height:38px}
}

/* ===== LOGIN OVERLAY ===== */
#login-overlay{position:fixed;inset:0;background:#e8ecf8;display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px;overflow-y:auto}
#login-overlay.lo-hidden{display:none!important}
.lo-wrap{position:relative;width:100%;max-width:440px}
.lo-blob{position:absolute;border-radius:50%;filter:blur(55px);pointer-events:none;z-index:0}
.lo-blob1{width:280px;height:280px;background:rgba(99,102,241,.18);top:-90px;right:-70px}
.lo-blob2{width:220px;height:220px;background:rgba(139,92,246,.14);bottom:-70px;left:-70px}
.lo-card{background:#fff;border-radius:22px;padding:36px 36px 28px;position:relative;z-index:1;box-shadow:0 12px 60px rgba(0,0,0,.13)}
.lo-school{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:18px}
.lo-school img{height:44px;width:auto;object-fit:contain}
.lo-school-name{font-size:13px;font-weight:700;color:#1a3460;line-height:1.4;text-align:left}
.lo-school-name small{display:block;font-size:10.5px;color:#94a3b8;font-weight:400}
.lo-icon-wrap{width:90px;height:90px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:6px}
.lo-title{text-align:center;font-size:24px;font-weight:800;color:#1e293b;margin-bottom:5px}
.lo-sub{text-align:center;font-size:12.5px;color:#94a3b8;margin-bottom:24px;line-height:1.6}
.lo-field{display:flex;align-items:center;gap:10px;border:1.5px solid #e8ecf0;border-radius:12px;padding:12px 16px;margin-bottom:12px;transition:all .15s;background:#fcfcfd}
.lo-field:focus-within{border-color:#6366f1;background:#fff;box-shadow:0 0 0 3px rgba(99,102,241,.1)}
.lo-ficon{color:#94a3b8;flex-shrink:0;display:flex;align-items:center;width:18px;height:18px}
.lo-field select,.lo-field input{flex:1;border:none;outline:none;font-family:inherit;font-size:14px;color:#1e293b;background:transparent}
.lo-field select{cursor:pointer}
.lo-field input::placeholder{color:#cbd5e1}
.lo-eye{background:none;border:none;cursor:pointer;color:#94a3b8;padding:2px;display:flex;align-items:center;flex-shrink:0}
.lo-eye:hover{color:#6366f1}
.lo-row{display:flex;justify-content:flex-end;margin-bottom:18px;margin-top:-4px}
.lo-forgot{font-size:12px;color:#6366f1;background:none;border:none;cursor:pointer;font-family:inherit;font-weight:600}
.lo-btn{width:100%;background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);color:#fff;border:none;border-radius:12px;padding:14px;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:opacity .15s,transform .1s;margin-bottom:20px;letter-spacing:.01em;box-shadow:0 4px 18px rgba(99,102,241,.35)}
.lo-btn:hover{opacity:.92}
.lo-btn:active{transform:scale(.98)}
.lo-divider{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.lo-divider::before,.lo-divider::after{content:'';flex:1;height:1px;background:#f1f5f9}
.lo-divider span{font-size:12px;color:#94a3b8;white-space:nowrap;font-weight:500}
.lo-socials{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}
.lo-social{display:flex;align-items:center;justify-content:center;gap:6px;border:1.5px solid #e8ecf0;border-radius:10px;padding:10px 6px;background:#fff;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;color:#374151;transition:all .15s}
.lo-social:hover{border-color:#c7d2fe;background:#f5f3ff;color:#4f46e5}
.lo-social svg{width:18px;height:18px;flex-shrink:0}
.lo-footer{text-align:center;font-size:10.5px;color:#d1d9e0;line-height:1.7}
.lo-logout-btn{display:inline-flex;align-items:center;gap:5px;background:rgba(201,162,39,.14);border:1px solid rgba(201,162,39,.32);color:var(--gold-light);border-radius:6px;padding:5px 12px;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.lo-logout-btn:hover{background:rgba(201,162,39,.24);border-color:rgba(201,162,39,.5)}
@media(max-width:480px){
  .lo-card{padding:28px 20px 22px;border-radius:16px}
  .lo-title{font-size:21px}
  .lo-socials{gap:8px}
}

/* ===== SIDEBAR ===== */
:root{--sidebar-w:240px;--sidebar-cw:64px;--hdr-total-h:106px}
#sb-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:840;backdrop-filter:blur(1px)}
#sb-backdrop.show{display:block}
.sidebar{position:fixed;top:var(--hdr-total-h);left:0;bottom:0;width:var(--sidebar-w);background:linear-gradient(180deg,#152a52 0%,#1a3460 40%,#163058 100%);border-right:1px solid rgba(201,162,39,.18);z-index:850;display:flex;flex-direction:column;overflow:hidden;transition:width .25s cubic-bezier(.4,0,.2,1)}
body.sb-collapsed .sidebar{width:var(--sidebar-cw)}
.sb-top{display:flex;align-items:center;padding:0 14px;height:48px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0;gap:10px}
.sb-toggle{background:none;border:none;cursor:pointer;color:rgba(255,255,255,.7);padding:5px;border-radius:5px;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;width:32px;height:32px}
.sb-toggle:hover{color:#fff;background:rgba(255,255,255,.12)}
.sb-toggle svg{width:18px;height:18px}
.sb-title{font-size:11.5px;font-weight:700;color:rgba(255,255,255,.4);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;overflow:hidden;transition:opacity .2s}
body.sb-collapsed .sb-title{opacity:0}
.sb-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}
.sb-nav::-webkit-scrollbar{width:3px}
.sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:2px}
.sb-section-lbl{font-size:9.5px;font-weight:700;color:rgba(255,255,255,.26);letter-spacing:.12em;text-transform:uppercase;padding:12px 20px 4px;white-space:nowrap;overflow:hidden;transition:opacity .2s}
body.sb-collapsed .sb-section-lbl{opacity:0}
.sb-item{display:flex;align-items:center;gap:13px;padding:10px 20px;color:rgba(255,255,255,.65);cursor:pointer;transition:all .15s;border:none;background:transparent;font-family:inherit;font-size:13.5px;font-weight:500;width:100%;text-align:left;border-left:3px solid transparent;white-space:nowrap;flex-shrink:0;position:relative}
.sb-item:hover{background:rgba(255,255,255,.08);color:#fff;border-left-color:rgba(255,255,255,.25)}
.sb-item.active{color:var(--gold-light);background:rgba(0,0,0,.22);border-left-color:var(--gold-light);font-weight:600}
.sb-icon{flex-shrink:0;opacity:.75;transition:opacity .15s;display:flex;align-items:center;justify-content:center;width:22px;height:22px}
.sb-item:hover .sb-icon,.sb-item.active .sb-icon{opacity:1}
.sb-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s,max-width .25s;max-width:180px}
body.sb-collapsed .sb-lbl{opacity:0;max-width:0}
body.sb-collapsed .sb-item{justify-content:center;padding:10px 0}
body.sb-collapsed .sb-item:hover::after{content:attr(data-label);position:absolute;left:calc(var(--sidebar-cw) + 8px);top:50%;transform:translateY(-50%);background:#0b1e45;color:#fff;font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:6px;white-space:nowrap;pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,.3);z-index:200;border:1px solid rgba(255,255,255,.12)}
.sb-divider{height:1px;background:rgba(255,255,255,.1);margin:6px 12px}
.sb-print-item{color:var(--gold-light)!important;background:rgba(201,162,39,.1)!important;border-left-color:rgba(201,162,39,.4)!important}
.sb-print-item:hover{background:rgba(201,162,39,.2)!important}

/* Sidebar footer — teacher info */
.sb-footer{border-top:1px solid rgba(255,255,255,.1);padding:10px 14px;display:flex;align-items:center;gap:10px;flex-shrink:0;transition:padding .25s}
.sb-footer-avatar{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sb-footer-info{flex:1;overflow:hidden;transition:opacity .2s,width .25s;min-width:0}
.sb-footer-name{font-size:12.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-footer-role{font-size:10px;color:rgba(255,255,255,.4);font-weight:500;margin-top:1px}
.sb-footer-btn{background:none;border:none;cursor:pointer;color:rgba(255,255,255,.4);padding:5px;border-radius:6px;display:flex;align-items:center;transition:all .15s;flex-shrink:0}
.sb-footer-btn:hover{color:var(--gold-light);background:rgba(255,255,255,.08)}
body.sb-collapsed .sb-footer{padding:10px 0;justify-content:center}
body.sb-collapsed .sb-footer-info{opacity:0;width:0;overflow:hidden}
body.sb-collapsed .sb-footer-btn{display:none}

/* Content margin offset — sidebar layout replaces auto-centering */
[id^="view-"]{margin-left:var(--sidebar-w);margin-right:0;max-width:none;transition:margin-left .25s cubic-bezier(.4,0,.2,1)}
body.sb-collapsed [id^="view-"]{margin-left:var(--sidebar-cw)}

/* Hamburger for mobile header */
.sb-ham{display:none;background:none;border:none;cursor:pointer;color:rgba(255,255,255,.8);padding:6px;border-radius:4px;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s;margin-right:4px}
.sb-ham:hover{background:rgba(255,255,255,.12)}
.sb-ham svg{width:22px;height:22px}

/* Responsive */
@media(min-width:901px){body>nav{display:none!important}}
@media(max-width:900px){
  .sb-ham{display:flex}
  .sidebar{width:var(--sidebar-w)!important;transform:translateX(calc(-100% - 2px));transition:transform .25s cubic-bezier(.4,0,.2,1);box-shadow:4px 0 24px rgba(0,0,0,.2);top:0!important}
  .sidebar.sb-open{transform:translateX(0)}
  [id^="view-"]{margin-left:0!important}
  body.sb-collapsed [id^="view-"]{margin-left:0!important}
}

/* ── PROFILE VIEW ── */
.profile-photo-wrap{position:relative;width:110px;height:110px;margin:0 auto 16px}
.profile-photo{width:110px;height:110px;border-radius:50%;background:var(--g100);border:3px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;object-fit:cover}
.profile-photo img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.profile-photo-btn{position:absolute;bottom:2px;right:2px;width:32px;height:32px;border-radius:50%;background:var(--navy-mid);border:2px solid #fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s}
.profile-photo-btn:hover{background:var(--navy)}
.profile-info-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:28px 24px;text-align:center;box-shadow:var(--sh-sm)}
.profile-name{font-size:17px;font-weight:700;color:var(--g900);margin-top:4px}
.profile-id{font-size:12px;color:var(--g400);margin-top:3px}
.profile-form-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:28px 24px;box-shadow:var(--sh-sm)}
.profile-form-card h3{font-size:15px;font-weight:700;color:var(--g900);margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.pf-section-label{font-size:12px;font-weight:700;color:var(--navy-mid);margin-bottom:10px;display:flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.4px}
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.pf-field label{display:block;font-size:12px;font-weight:700;color:var(--g600);margin-bottom:5px}
/* ── SweetAlert2 overrides ── */
.swal2-thai { font-family:'Sarabun',sans-serif !important; }
.swal2-thai .swal2-title { font-size:18px !important; font-weight:700 !important; }
.swal2-thai .swal2-html-container { font-size:14px !important; line-height:1.7 !important; }
.swal2-thai .swal2-confirm, .swal2-thai .swal2-cancel { font-family:'Sarabun',sans-serif !important; font-size:14px !important; font-weight:600 !important; border-radius:7px !important; padding:8px 20px !important; }
.swal2-thai.swal2-toast .swal2-title { font-size:14px !important; font-weight:600 !important; }
.swal2-thai.swal2-toast { padding:10px 16px !important; }
/* ====== DASHBOARD CHARTS ====== */
.db-charts-section{margin-bottom:22px}
.db-charts-hdr{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.db-charts-hdr-icon{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;box-shadow:0 4px 12px rgba(99,102,241,.3)}
.db-charts-hdr-title{font-size:14px;font-weight:800;color:var(--g900)}
.db-charts-hdr-sub{font-size:11.5px;color:var(--g400);margin-top:1px}
.db-charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.chart-card{background:#fff;border-radius:16px;padding:20px 22px;border:1px solid #e8edf5;box-shadow:0 2px 12px rgba(0,0,0,.05),0 1px 3px rgba(0,0,0,.04);transition:box-shadow .2s,transform .2s}
.chart-card:hover{box-shadow:0 8px 28px rgba(0,0,0,.1);transform:translateY(-2px)}
.chart-card-title{font-size:12.5px;font-weight:700;color:var(--g700);margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--g100);display:flex;align-items:center;gap:6px}
@media(max-width:700px){.db-charts-grid{grid-template-columns:1fr}}
.hero-chart-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:12px 14px;backdrop-filter:blur(4px)}
.hero-chart-title{font-size:11px;font-weight:700;color:rgba(255,255,255,.85);margin-bottom:10px;display:flex;align-items:center;gap:5px}
/* ── Global Search ────────────────────────────────────── */
#gs-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:10000;align-items:flex-start;justify-content:center;padding:56px 16px 16px;backdrop-filter:blur(3px)}
.gs-result-item{padding:10px 16px;border-bottom:1px solid var(--g100);cursor:pointer;display:flex;align-items:center;gap:12px;transition:background .12s}
.gs-result-item:hover,.gs-result-item.gs-active{background:var(--blue-pale)}
.gs-result-item:last-child{border-bottom:none}
/* ── Student Profile Modal ──────────────────────────── */
#sp-overlay .modal-box{padding:0;overflow:hidden;max-width:640px}
.sp-score-pip{flex:1;min-width:56px;background:var(--g50);border-radius:10px;padding:10px;text-align:center;border:1px solid var(--border)}
/* ── Weekly Attendance Trend ────────────────────────── */
.wtrend-bar-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;position:relative}
.wtrend-bar{width:calc(100% - 2px);background:currentColor;border-radius:3px 3px 0 0;min-height:4px;opacity:.85;transition:height .5s ease}
.wtrend-lbl{font-size:8.5px;color:var(--g400);margin-top:3px;white-space:nowrap}

/* ── Dashboard v2 ── */
.db-sec-hdr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.db-sec-title{font-size:14px;font-weight:800;color:var(--g900)}
.db-sec-sub{font-size:12px;color:var(--g500)}
.db-empty{text-align:center;padding:26px 12px;color:var(--g500);font-size:13px;line-height:1.7}
.db-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media (max-width:900px){.db-two{grid-template-columns:minmax(0,1fr)}}
.db-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px;margin-bottom:14px}
.db-charts:empty{display:none}

/* ── Dashboard v2: แถบหัวข้อ + ตัวเลขสรุป ── */
.db-titlebar{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:800;color:var(--g900);margin:2px 2px 14px;flex-wrap:wrap}
.db-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px;margin-bottom:16px}
.db-kpi2{background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px 14px;display:flex;gap:12px;align-items:center;min-width:0;box-shadow:var(--sh-sm)}
.db-kpi2-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.db-band{font-size:12px;font-weight:800;color:var(--g500);letter-spacing:.02em;margin:2px 2px 8px}