/* ===========================================================
   ระบบจัดการสอนแทน — โรงเรียนหนองตาคงพิทยาคาร
   Palette: navy + white (official / institutional)
   Type: Prompt (body), Kanit (display/numerics)
   =========================================================== */

:root{
  --brand-900:#0f1f3d;
  --brand-800:#13284f;
  --brand-700:#1b3a73;
  --brand-600:#1f4ba0;
  --brand-500:#2563c9;
  --brand-400:#4d86e0;
  --brand-300:#7ba6ea;
  --brand-100:#dde8fb;
  --brand-50:#eef4fd;

  --ink:#101725;
  --ink-2:#46546b;
  --ink-3:#8290a6;
  --line:#e4e9f1;
  --line-2:#eef1f7;
  --bg:#eef1f6;
  --bg-2:#f6f8fb;
  --card:#ffffff;

  --amber:#b45309; --amber-bg:#fdf0d5; --amber-line:#f3d9a3;
  --green:#15723f; --green-bg:#dcf3e3; --green-line:#a8e0bf;
  --red:#c0322b;   --red-bg:#fbe2e0;   --red-line:#f0bdb8;
  --grey-bg:#eef1f6; --grey-line:#dce2ec;

  --line-green:#06C755;

  --r-lg:18px; --r-md:13px; --r-sm:9px;
  --shadow-sm:0 1px 2px rgba(16,23,37,.06), 0 1px 3px rgba(16,23,37,.05);
  --shadow-md:0 6px 20px rgba(16,23,37,.10), 0 2px 6px rgba(16,23,37,.06);
  --shadow-lg:0 18px 50px rgba(15,31,61,.22);
  --maxw:1180px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Prompt',-apple-system,system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
h1,h2,h3,h4{font-family:'Kanit',sans-serif;font-weight:600;margin:0;line-height:1.25;letter-spacing:-.01em;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}
.num{font-family:'Kanit',sans-serif;font-variant-numeric:tabular-nums;}

/* ---------- App shell ---------- */
.app{min-height:100vh;display:flex;flex-direction:column;}

.appbar{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,var(--brand-800),var(--brand-700));
  color:#fff;
  box-shadow:0 2px 10px rgba(15,31,61,.25);
}
.appbar-in{max-width:var(--maxw);margin:0 auto;padding:11px 22px;display:flex;align-items:center;gap:16px;}
.brand{display:flex;align-items:center;gap:13px;min-width:0;}
.crest{
  width:44px;height:44px;border-radius:50%;flex:none;
  background:#fff;
  border:2px solid #c2d4f3;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);
}
.crest img{width:38px;height:38px;object-fit:contain;display:block;}
.brand-txt{min-width:0;}
.brand-txt .t1{font-family:'Kanit';font-weight:600;font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brand-txt .t1 .t1-en{font-family:'Prompt';font-weight:300;font-size:12px;color:#bcd0f1;letter-spacing:.01em;margin-left:7px;}
.brand-txt .t2{font-size:11.5px;color:#bcd0f1;font-weight:300;letter-spacing:.02em;}
.appbar .spacer{flex:1;}

.me-pick{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:5px 6px 5px 13px;}
.me-pick label{font-size:11.5px;color:#cfe0f7;font-weight:300;white-space:nowrap;}
.me-pick select{
  appearance:none;border:none;background:#fff;color:var(--ink);
  border-radius:999px;padding:6px 30px 6px 13px;font-size:13px;font-weight:500;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2346546b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;cursor:pointer;max-width:200px;
}

.line-btn{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  background:var(--line-green);color:#063d1c;border:none;border-radius:999px;
  padding:8px 15px;font-weight:600;font-size:13px;box-shadow:0 2px 8px rgba(6,199,85,.4);
}
.line-btn:hover{filter:brightness(1.05);}
.line-btn .dot{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#e8233c;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #0f4a26;}

/* ---------- Tabs ---------- */
.tabs-wrap{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:64px;z-index:30;}
.tabs{max-width:var(--maxw);margin:0 auto;padding:0 22px;display:flex;gap:4px;overflow-x:auto;}
.tab{
  appearance:none;background:none;border:none;padding:15px 16px 13px;
  font-size:14px;font-weight:500;color:var(--ink-2);white-space:nowrap;
  border-bottom:3px solid transparent;display:flex;align-items:center;gap:8px;position:relative;
}
.tab:hover{color:var(--brand-600);}
.tab.active{color:var(--brand-700);border-bottom-color:var(--brand-600);font-weight:600;}
.tab .pill{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-line);font-size:11px;font-weight:700;border-radius:999px;padding:1px 7px;font-family:'Kanit';}

/* ---------- Layout ---------- */
.main{flex:1;}
.container{max-width:var(--maxw);margin:0 auto;padding:26px 22px 90px;}
.page-head{margin-bottom:20px;}
.page-head h1{font-size:23px;color:var(--brand-900);}
.page-head p{margin:5px 0 0;color:var(--ink-2);font-size:14px;}

.grid-2{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:start;}
@media(max-width:880px){.grid-2{grid-template-columns:1fr;}}

/* ---------- Card ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);}
.card-pad{padding:20px 22px;}
.card-hd{padding:16px 22px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:11px;}
.card-hd h3{font-size:16px;color:var(--brand-900);}
.card-hd .sub{font-size:12.5px;color:var(--ink-3);font-weight:300;margin-top:1px;}
.card-hd .ic{color:var(--brand-600);}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-md);padding:11px 18px;font-size:14px;font-weight:600;border:1px solid transparent;transition:.14s;white-space:nowrap;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-primary{background:var(--brand-600);color:#fff;box-shadow:0 2px 6px rgba(31,75,160,.3);}
.btn-primary:hover:not(:disabled){background:var(--brand-700);}
.btn-ghost{background:#fff;color:var(--brand-700);border-color:var(--brand-100);}
.btn-ghost:hover:not(:disabled){background:var(--brand-50);}
.btn-green{background:var(--green);color:#fff;}
.btn-green:hover:not(:disabled){filter:brightness(1.08);}
.btn-danger{background:#fff;color:var(--red);border-color:var(--red-line);}
.btn-danger:hover:not(:disabled){background:var(--red-bg);}
.btn-sm{padding:8px 13px;font-size:13px;border-radius:var(--r-sm);}
.btn-block{width:100%;}

/* ---------- Form ---------- */
.field{margin-bottom:16px;}
.field>label{display:block;font-size:13px;font-weight:500;color:var(--ink);margin-bottom:7px;}
.field .hint{font-size:12px;color:var(--ink-3);font-weight:300;margin-top:5px;}
.leave-daycount{display:inline-flex;align-items:center;gap:6px;background:var(--brand-50);border:1px solid var(--brand-100);color:var(--brand-700);border-radius:9px;padding:9px 13px;font-size:13.5px;font-weight:600;}
.leave-day-block{margin-bottom:18px;}
.leave-day-head{display:flex;align-items:center;gap:8px;font-family:'Kanit';font-weight:600;font-size:14.5px;color:var(--brand-800);margin:0 0 10px;padding:7px 12px;background:var(--brand-50);border-radius:9px;border-left:3px solid var(--brand-500);}
.leave-day-head .tiny{font-weight:400;color:var(--ink-3);}
.inp,.sel,.ta{
  width:100%;border:1.4px solid var(--line);border-radius:var(--r-md);
  padding:11px 13px;font-size:14px;color:var(--ink);background:#fff;transition:.14s;
}
.inp:focus,.sel:focus,.ta:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-50);}
.sel{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2346546b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:38px;cursor:pointer;}
.ta{resize:vertical;min-height:74px;}

/* reason chips */
.chips{display:flex;gap:10px;flex-wrap:wrap;}
.chip-r{
  flex:1;min-width:120px;border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:13px 14px;background:#fff;display:flex;flex-direction:column;gap:2px;text-align:left;transition:.14s;
}
.chip-r:hover{border-color:var(--brand-400);}
.chip-r.on{border-color:var(--brand-600);background:var(--brand-50);box-shadow:0 0 0 3px var(--brand-50);}
.chip-r .ttl{font-weight:600;font-size:14px;color:var(--ink);}
.chip-r .ds{font-size:11.5px;color:var(--ink-3);font-weight:300;}
.chip-r .ic{margin-bottom:4px;}

/* ---------- Badges / status ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;border:1px solid transparent;white-space:nowrap;}
.b-pending{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-line);}
.b-ack{background:var(--green-bg);color:var(--green);border-color:var(--green-line);}
.b-reject{background:var(--red-bg);color:var(--red);border-color:var(--red-line);}
.b-done{background:var(--brand-50);color:var(--brand-600);border-color:var(--brand-100);}
.b-chair{background:#efe7fb;color:#6b41ad;border-color:#d8c6f2;}
.b-dot{width:6px;height:6px;border-radius:50%;background:currentColor;}

.reason-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;border-radius:7px;padding:3px 9px;white-space:nowrap;}
.rt-kit{background:#eaf0fb;color:var(--brand-600);}
.rt-sick{background:#fbeae9;color:#b5403a;}
.rt-gov{background:#f0ebf9;color:#6b41ad;}
.rt-early{background:#fdeede;color:#a85b08;}

/* ---------- Avatar ---------- */
.av{border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-family:'Kanit';font-weight:600;color:#fff;}
.av-sm{width:34px;height:34px;font-size:13px;}
.av-md{width:42px;height:42px;font-size:15px;}
.av-lg{width:54px;height:54px;font-size:19px;}

/* ---------- Period grid ---------- */
.slot{
  display:flex;align-items:center;gap:13px;border:1.4px solid var(--line);
  border-radius:var(--r-md);padding:13px 15px;background:#fff;transition:.14s;
}
.slot.sel{border-color:var(--brand-600);background:var(--brand-50);}
.slot .pno{
  width:46px;height:46px;flex:none;border-radius:11px;background:var(--brand-700);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
}
.slot .pno b{font-family:'Kanit';font-size:19px;}
.slot .pno span{font-size:9.5px;opacity:.8;margin-top:2px;}
.slot .info{flex:1;min-width:0;}
.slot .info .s1{font-weight:600;font-size:14px;}
.slot .info .s2{font-size:12.5px;color:var(--ink-2);display:flex;gap:10px;flex-wrap:wrap;margin-top:2px;}
.slot .info .s2 .c{color:var(--brand-600);font-weight:500;}

.free-note{font-size:12px;color:var(--green);font-weight:500;display:flex;align-items:center;gap:5px;}
.busy-note{font-size:12px;color:var(--amber);font-weight:500;display:flex;align-items:center;gap:5px;}

/* substitute picker rows */
.subrow{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1.3px solid var(--line);border-radius:var(--r-md);background:#fff;transition:.13s;width:100%;text-align:left;}
.subrow:hover{border-color:var(--brand-400);background:var(--bg-2);}
.subrow.on{border-color:var(--brand-600);background:var(--brand-50);box-shadow:0 0 0 3px var(--brand-50);}
.subrow .nm{flex:1;min-width:0;}
.subrow .nm .n1{font-weight:600;font-size:13.5px;}
.subrow .nm .n2{font-size:11.5px;color:var(--ink-3);}

/* makeup-slot picker (วัน/คาบกลับมาสอนชดเชย) */
.mk-label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:8px;}
.mk-label .mk-sublabel{font-weight:400;color:var(--ink-3);font-size:11.5px;}
.mk-opts{display:flex;flex-direction:column;gap:7px;}
.mk-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 12px;border:1.3px solid var(--line);border-radius:var(--r-md);background:#fff;transition:.13s;}
.mk-opt:hover{border-color:var(--brand-400);background:var(--bg-2);}
.mk-opt.on{border-color:var(--green);background:var(--green-bg);box-shadow:0 0 0 3px var(--green-bg);}
.mk-opt .mk-rad{width:19px;height:19px;flex:none;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;color:#fff;}
.mk-opt.on .mk-rad{background:var(--green);border-color:var(--green);}
.mk-opt .mk-day{font-family:'Kanit';font-weight:600;font-size:13.5px;color:var(--brand-800);min-width:58px;}
.mk-opt .mk-per{font-size:12.5px;color:var(--ink);font-weight:600;}
.mk-opt .mk-time{font-size:11.5px;color:var(--ink-3);}
.mk-opt .mk-subj{font-size:12px;color:var(--ink-2);margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42%;}
.icon-btn{width:32px;height:32px;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--brand-100);background:#fff;color:var(--brand-600);transition:.12s;cursor:pointer;}
.icon-btn:hover{background:var(--brand-50);border-color:var(--brand-400);}
.icon-btn.danger{border-color:var(--red-line);color:var(--red);}
.icon-btn.danger:hover{background:var(--red-bg);}
.seg-full{display:flex;width:100%;}
.seg-full button{flex:1;}
.mk-inline{display:inline-block;margin:2px 4px 2px 0;padding:2px 9px;border-radius:7px;border:1px solid var(--brand-100);background:#fff;color:var(--brand-600);font-size:12px;font-weight:500;cursor:pointer;font-family:'Kanit';}
.mk-inline:hover{background:var(--brand-50);border-color:var(--brand-400);}

/* ---------- Table ---------- */
.tbl-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm);}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:920px;}
.tbl thead th{
  background:var(--brand-800);color:#dbe6fa;font-family:'Kanit';font-weight:500;font-size:12px;
  text-align:left;padding:12px 14px;white-space:nowrap;position:sticky;top:0;letter-spacing:.01em;
}
.tbl thead th:first-child{border-top-left-radius:0;}
.tbl tbody td{padding:12px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle;color:var(--ink);}
.tbl tbody tr:hover{background:var(--bg-2);}
.tbl tbody tr:last-child td{border-bottom:none;}
.tbl .tc-code{font-family:'Kanit';color:var(--brand-600);font-weight:500;}
.tbl .tc-cls{font-weight:600;}
.tbl .muted{color:var(--ink-3);}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr);}}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--shadow-sm);}
.stat .k{font-size:12.5px;color:var(--ink-2);font-weight:400;display:flex;align-items:center;gap:7px;}
.stat .v{font-family:'Kanit';font-size:30px;font-weight:600;margin-top:6px;line-height:1;}
.stat .v small{font-size:13px;color:var(--ink-3);font-weight:400;font-family:'Prompt';}
.stat.s-amber .v{color:var(--amber);} .stat.s-green .v{color:var(--green);}
.stat.s-blue .v{color:var(--brand-600);} .stat.s-red .v{color:var(--red);}

/* filter bar */
.filterbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px;}
.seg{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;}
.seg button{border:none;background:none;padding:7px 14px;border-radius:999px;font-size:13px;font-weight:500;color:var(--ink-2);}
.seg button.on{background:var(--brand-600);color:#fff;}

/* ---------- Empty ---------- */
.empty{text-align:center;padding:52px 20px;color:var(--ink-3);}
.empty .ic{margin-bottom:12px;color:var(--brand-100);}
.empty .t{font-weight:600;color:var(--ink-2);font-size:15px;font-family:'Kanit';}
.empty .d{font-size:13px;margin-top:4px;}

/* ---------- Web Push: bell button + banner + status ---------- */
.notif-btn{position:relative;display:inline-flex;align-items:center;gap:8px;background:var(--brand-600);color:#fff;border:none;border-radius:999px;padding:8px 16px;font-weight:600;font-size:13px;box-shadow:0 2px 8px rgba(31,75,160,.35);cursor:pointer;}
.notif-btn:hover{background:var(--brand-700);}
.notif-btn .dot{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#e8233c;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff;}

.push-banner{display:flex;align-items:center;gap:13px;background:linear-gradient(100deg,#eef4fd,#f5f9ff);border:1px solid var(--brand-100);border-left:4px solid var(--brand-500);border-radius:var(--r-md);padding:13px 16px;margin-bottom:16px;}
.push-banner .lb-ic{width:38px;height:38px;border-radius:10px;background:var(--brand-600);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;}
.push-banner .lb-t{flex:1;min-width:0;}
.push-banner .lb-t b{font-family:'Kanit';font-size:14px;color:var(--brand-900);}
.push-banner .lb-t div{font-size:12.5px;color:var(--ink-2);font-weight:300;}
.push-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#0a5c2e;background:#e0f7ea;border:1px solid var(--green-line);border-radius:999px;padding:3px 11px;}
.push-status .ds{width:7px;height:7px;border-radius:50%;background:var(--green);}

/* ---------- Notification Center (dock) ---------- */
.notif-overlay{position:fixed;inset:0;z-index:80;background:rgba(15,31,61,.45);backdrop-filter:blur(3px);display:flex;justify-content:flex-end;}
.notif-dock{width:392px;max-width:100%;height:100%;background:#eff3f9;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);animation:slideIn .22s ease;}
.notif-hd{display:flex;align-items:center;gap:11px;padding:16px 18px;background:var(--brand-800);color:#fff;}
.notif-hd .nh-ic{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex:none;}
.notif-hd .nh-t{flex:1;min-width:0;}
.notif-hd .nh-t b{font-family:'Kanit';font-size:15px;display:block;line-height:1.2;}
.notif-hd .nh-t span{font-size:11.5px;color:#bcd0f1;}
.notif-hd .nh-x{background:rgba(255,255,255,.14);border:none;color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;}
.notif-hd .nh-x:hover{background:rgba(255,255,255,.26);}

.push-setup{margin:14px;background:#fff;border:1px solid var(--brand-100);border-radius:var(--r-md);padding:20px 18px;text-align:center;box-shadow:var(--shadow-sm);}
.push-setup .ps-ic{width:54px;height:54px;border-radius:15px;background:var(--brand-50);color:var(--brand-600);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;}
.push-setup .ps-t{font-family:'Kanit';font-weight:600;font-size:15px;color:var(--ink);}
.push-setup .ps-d{font-size:12.5px;color:var(--ink-2);line-height:1.65;margin:7px 0 15px;font-weight:300;}
.push-setup .ps-btn{display:inline-flex;align-items:center;gap:7px;background:var(--brand-600);color:#fff;border:none;border-radius:10px;padding:11px 18px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:'Prompt';}
.push-setup .ps-btn:hover{background:var(--brand-700);}
.push-on{display:flex;align-items:center;gap:8px;margin:14px 14px 0;padding:9px 13px;background:#e0f7ea;border:1px solid var(--green-line);border-radius:10px;font-size:12.5px;font-weight:600;color:#0a5c2e;}
.push-on .po-dot{width:8px;height:8px;border-radius:50%;background:var(--green);}
.push-on .po-test{margin-left:auto;display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--green-line);color:var(--green);border-radius:8px;padding:4px 10px;font-size:11.5px;font-weight:600;cursor:pointer;font-family:'Prompt';}
.push-on .po-test:hover{background:var(--green-bg);}

.notif-list{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;}
.notif-empty{margin:auto;text-align:center;color:var(--ink-3);font-size:13px;padding:30px;}
.notif-item{display:flex;gap:11px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 13px;box-shadow:var(--shadow-sm);border-left:3px solid var(--brand-400);}
.notif-item.tone-green{border-left-color:var(--green);}
.notif-item.tone-red{border-left-color:var(--red);}
.notif-item.tone-amber{border-left-color:var(--amber);}
.notif-item.tone-chair{border-left-color:#6b41ad;}
.notif-item .ni-ic{width:30px;height:30px;border-radius:9px;background:var(--brand-50);color:var(--brand-600);display:flex;align-items:center;justify-content:center;flex:none;}
.notif-item.tone-green .ni-ic{background:var(--green-bg);color:var(--green);}
.notif-item.tone-red .ni-ic{background:var(--red-bg);color:var(--red);}
.notif-item.tone-amber .ni-ic{background:var(--amber-bg);color:var(--amber);}
.notif-item.tone-chair .ni-ic{background:#efe7fb;color:#6b41ad;}
.notif-item .ni-body{flex:1;min-width:0;}
.notif-item .ni-top{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.notif-item .ni-top b{font-family:'Kanit';font-size:13px;color:var(--ink);flex:1;min-width:0;}
.notif-item .ni-top .num{font-size:11px;color:var(--ink-3);}
.notif-item .ni-text{font-size:12.5px;color:var(--ink-2);line-height:1.55;white-space:pre-wrap;}
.notif-item .ni-act{display:inline-flex;align-items:center;gap:5px;margin-top:9px;background:var(--brand-600);color:#fff;border:none;border-radius:8px;padding:7px 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:'Prompt';}
.notif-item .ni-act:hover{background:var(--brand-700);}
.notif-foot{padding:10px 14px;font-size:11px;color:var(--ink-3);display:flex;align-items:center;gap:6px;border-top:1px solid var(--line-2);background:#fff;}

/* ---------- LINE phone ---------- */
.line-overlay{position:fixed;inset:0;z-index:80;background:rgba(15,31,61,.5);backdrop-filter:blur(3px);display:flex;justify-content:flex-end;}
.line-dock{
  width:404px;max-width:100%;height:100%;background:#0b1b33;
  display:flex;flex-direction:column;box-shadow:var(--shadow-lg);
  animation:slideIn .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes slideIn{from{transform:translateX(40px);opacity:.4;}to{transform:none;opacity:1;}}
.line-dock-hd{padding:14px 16px;display:flex;align-items:center;gap:10px;color:#fff;}
.line-dock-hd .x{margin-left:auto;background:rgba(255,255,255,.12);border:none;color:#fff;width:32px;height:32px;border-radius:50%;font-size:17px;display:flex;align-items:center;justify-content:center;}
.line-dock-hd .x:hover{background:rgba(255,255,255,.22);}
.line-dock-hd .who{font-size:12px;color:#9fb6da;}
.line-dock-hd .who b{color:#fff;font-family:'Kanit';font-weight:600;font-size:14px;display:block;}

.phone{
  flex:1;margin:0 16px 16px;border-radius:30px;background:#7c97c4;overflow:hidden;
  border:9px solid #060d1c;box-shadow:0 14px 40px rgba(0,0,0,.5);display:flex;flex-direction:column;position:relative;
}
.phone-status{height:30px;background:#06351c;display:flex;align-items:center;justify-content:space-between;padding:0 18px;color:#fff;font-size:11px;font-weight:500;}
.line-hd{background:#06351c;color:#fff;padding:8px 14px 12px;display:flex;align-items:center;gap:10px;}
.line-hd .bk{font-size:20px;opacity:.8;}
.line-hd .oa{width:38px;height:38px;border-radius:50%;background:var(--line-green);display:flex;align-items:center;justify-content:center;color:#063d1c;font-size:20px;flex:none;}
.line-hd .oa-t b{font-size:14px;font-family:'Kanit';display:block;line-height:1.2;}
.line-hd .oa-t span{font-size:11px;color:#9fd9b5;}
.chat{flex:1;overflow-y:auto;padding:14px 12px 18px;background:#8aa4cf;display:flex;flex-direction:column;gap:10px;}
.chat-day{align-self:center;background:rgba(0,0,0,.18);color:#fff;font-size:11px;padding:3px 12px;border-radius:999px;margin:2px 0;}
.msg{max-width:84%;align-self:flex-start;display:flex;gap:7px;align-items:flex-end;}
.msg .ava{width:30px;height:30px;border-radius:50%;background:var(--line-green);flex:none;display:flex;align-items:center;justify-content:center;color:#063d1c;font-size:14px;}
.bubble{background:#fff;border-radius:4px 16px 16px 16px;padding:11px 13px;font-size:13px;line-height:1.5;color:#1a1a1a;box-shadow:0 1px 1px rgba(0,0,0,.12);}
.bubble.confirm{background:#dff3e4;}
.bubble.reject{background:#fbe4e2;}
.bubble .tl{font-size:11px;font-weight:600;color:var(--brand-700);margin-bottom:4px;display:flex;align-items:center;gap:5px;}
.bubble .lk{display:inline-flex;align-items:center;gap:5px;margin-top:9px;background:var(--brand-600);color:#fff;border:none;border-radius:8px;padding:7px 12px;font-size:12px;font-weight:600;}
.bubble .lk:hover{background:var(--brand-700);}
.msg .tm{font-size:9.5px;color:rgba(255,255,255,.85);align-self:flex-end;margin-bottom:3px;}
.chat-empty{margin:auto;text-align:center;color:rgba(255,255,255,.85);font-size:13px;padding:30px;}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:90;background:var(--brand-900);color:#fff;padding:13px 20px;border-radius:12px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:11px;font-size:14px;font-weight:500;animation:tin .3s ease;max-width:92vw;}
@keyframes tin{from{transform:translate(-50%,16px);opacity:0;}to{transform:translate(-50%,0);opacity:1;}}
.toast .ic{color:var(--line-green);}

/* modal */
.modal-bg{position:fixed;inset:0;z-index:85;background:rgba(15,31,61,.45);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:20px;}
.modal{background:#fff;border-radius:var(--r-lg);max-width:480px;width:100%;box-shadow:var(--shadow-lg);overflow:hidden;animation:tin .24s ease;}
.modal-hd{padding:18px 22px;border-bottom:1px solid var(--line-2);}
.modal-hd h3{font-size:17px;color:var(--brand-900);}
.modal-bd{padding:20px 22px;}
.modal-ft{padding:14px 22px;border-top:1px solid var(--line-2);display:flex;gap:10px;justify-content:flex-end;background:var(--bg-2);}

/* misc */
.divider{height:1px;background:var(--line-2);margin:18px 0;}
.kv{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font-size:13.5px;border-bottom:1px dashed var(--line);}
.kv:last-child{border-bottom:none;}
.kv .k{color:var(--ink-2);}
.kv .v{font-weight:500;text-align:right;}
.note-box{background:var(--brand-50);border:1px solid var(--brand-100);border-radius:var(--r-md);padding:13px 15px;font-size:13px;color:var(--brand-700);display:flex;gap:10px;}
.scroll-x-hint{font-size:11.5px;color:var(--ink-3);margin-bottom:8px;display:none;}
@media(max-width:760px){.scroll-x-hint{display:block;}}

.list-gap{display:flex;flex-direction:column;gap:12px;}
.flex{display:flex;} .ac{align-items:center;} .jc{justify-content:center;} .jb{justify-content:space-between;}
.gap6{gap:6px;}.gap8{gap:8px;}.gap10{gap:10px;}.gap12{gap:12px;}
.wrap{flex-wrap:wrap;}
.mt8{margin-top:8px;}.mt12{margin-top:12px;}.mt16{margin-top:16px;}
.mb0{margin-bottom:0;}
.grow{flex:1;}
.right{text-align:right;}
.tiny{font-size:11.5px;color:var(--ink-3);}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;}
@media(max-width:860px){.login-wrap{grid-template-columns:1fr;}}
.login-aside{
  background:linear-gradient(150deg,var(--brand-900),var(--brand-700) 70%,var(--brand-600));
  color:#fff;padding:56px 52px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;
}
.login-aside:after{content:"";position:absolute;right:-120px;bottom:-120px;width:360px;height:360px;border-radius:50%;background:rgba(255,255,255,.05);}
.login-aside:before{content:"";position:absolute;right:40px;top:-80px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.04);}
.login-crest{width:84px;height:84px;border-radius:50%;background:#fff;border:3px solid rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:26px;position:relative;z-index:1;box-shadow:0 8px 24px rgba(0,0,0,.18);}
.login-crest img{width:74px;height:74px;object-fit:contain;display:block;}
.login-aside h1{font-size:34px;font-weight:700;position:relative;z-index:1;letter-spacing:-.02em;}
.login-aside .la-eng{font-family:'Prompt';font-size:14px;font-weight:300;letter-spacing:.06em;color:#9fc0ee;text-transform:uppercase;margin-top:2px;position:relative;z-index:1;}
.login-aside .la-school{font-size:17px;color:#cfe0f7;font-weight:300;margin-top:4px;position:relative;z-index:1;}
.login-aside .la-office{font-size:13px;color:#aec8ec;font-weight:300;margin-top:2px;position:relative;z-index:1;}
.login-aside .la-desc{font-size:14px;color:#bcd0f1;font-weight:300;line-height:1.7;margin:22px 0 28px;max-width:440px;position:relative;z-index:1;}
.la-feats{display:flex;flex-direction:column;gap:13px;position:relative;z-index:1;}
.la-feat{display:flex;align-items:center;gap:11px;font-size:14px;color:#e7eefb;font-weight:300;}
.la-feat svg{color:#9fc0f2;flex:none;}

.login-main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 28px;background:var(--bg);}
.login-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);width:100%;max-width:420px;padding:34px 32px;}
.login-card h2{font-size:24px;color:var(--brand-900);}
.lc-sub{color:var(--ink-2);font-size:14px;margin:5px 0 24px;}
.login-err{display:flex;align-items:center;gap:8px;background:var(--red-bg);color:var(--red);border:1px solid var(--red-line);border-radius:var(--r-md);padding:10px 13px;font-size:13px;font-weight:500;margin-bottom:14px;}
.demo-toggle{width:100%;margin-top:18px;display:flex;align-items:center;gap:8px;background:var(--bg-2);border:1px dashed var(--line);border-radius:var(--r-md);padding:11px 14px;font-size:13px;font-weight:500;color:var(--brand-700);}
.demo-toggle:hover{background:var(--brand-50);}
.demo-box{margin-top:12px;border:1px solid var(--line);border-radius:var(--r-md);padding:13px;background:var(--bg-2);}
.demo-hint{font-size:12px;color:var(--ink-2);line-height:1.6;margin-bottom:11px;}
.demo-search{margin:4px 0 9px;}
.demo-list{max-height:230px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;}
.demo-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 11px;transition:.12s;}
.demo-row:hover{border-color:var(--brand-400);background:var(--brand-50);}
.demo-row.admin{margin-bottom:10px;border-color:var(--brand-100);}
.demo-row .nm{flex:1;min-width:0;}
.demo-row .n1{font-weight:500;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.demo-row .n2{font-size:11px;color:var(--ink-3);}
.demo-user{font-size:11.5px;color:var(--brand-600);background:var(--brand-50);padding:2px 7px;border-radius:6px;}
.login-foot{margin-top:22px;font-size:12px;color:var(--ink-3);}

/* user chip in appbar */
.user-chip{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:4px 6px 4px 12px;}
.user-chip .ui{color:#fff;font-size:12.5px;font-weight:500;line-height:1.15;}
.user-chip .ur{font-size:10.5px;color:#bcd0f1;font-weight:300;}
.logout-btn{background:rgba(255,255,255,.14);border:none;color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.logout-btn:hover{background:rgba(255,255,255,.26);}

/* ---------- Schedule (my teaching load) ---------- */
.wk-grid{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-sm);}
table.wk{border-collapse:collapse;width:100%;min-width:860px;table-layout:fixed;}
.wk th,.wk td{border:1px solid var(--line-2);padding:0;vertical-align:top;}
.wk thead th{background:var(--brand-800);color:#dbe6fa;font-family:'Kanit';font-weight:500;font-size:12px;padding:9px 4px;text-align:center;line-height:1.25;}
.wk thead th small{display:block;font-family:'Prompt';font-weight:300;font-size:9.5px;color:#a9c2ea;}
.wk .daycol{background:var(--brand-50);color:var(--brand-800);font-family:'Kanit';font-weight:600;font-size:13px;text-align:center;width:62px;padding:8px 4px;}
.wk td.cell{height:64px;position:relative;}
.wk .cell-in{padding:6px 7px;height:100%;cursor:pointer;transition:.12s;display:flex;flex-direction:column;gap:1px;}
.wk .cell-in:hover{background:var(--brand-50);}
.wk .cell.has .cell-in{background:#fff;}
.wk .cc-code{font-family:'Kanit';font-size:11px;color:var(--brand-600);font-weight:500;}
.wk .cc-cls{font-size:12.5px;font-weight:600;color:var(--ink);}
.wk .cc-room{font-size:10.5px;color:var(--ink-3);}
.wk .cc-act{font-size:11.5px;color:var(--amber);font-weight:500;background:var(--amber-bg);border-radius:5px;padding:2px 5px;align-self:flex-start;}
.wk .cell-empty{color:var(--line);display:flex;align-items:center;justify-content:center;height:100%;font-size:16px;opacity:0;transition:.12s;}
.wk .cell-in:hover .cell-empty{opacity:1;color:var(--brand-300);}
.duty-item{display:flex;align-items:center;gap:11px;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;}
.duty-item .di{width:34px;height:34px;border-radius:9px;background:var(--brand-50);color:var(--brand-600);display:flex;align-items:center;justify-content:center;flex:none;}

/* read-only field (username) */
.readonly-field{display:flex;align-items:center;gap:10px;border:1.4px solid var(--line);border-radius:var(--r-md);padding:11px 13px;background:var(--bg-2);font-size:14px;color:var(--ink);}
.readonly-field .num{font-weight:600;color:var(--brand-700);}
.ro-tag{margin-left:auto;font-size:11px;color:var(--ink-3);background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px 8px;}

/* user management */
.usr-row{display:flex;align-items:center;gap:12px;padding:11px 15px;border-bottom:1px solid var(--line-2);}
.usr-row:last-child{border-bottom:none;}
.usr-row .nm{flex:1;min-width:0;}
.usr-row .nm .n1{font-weight:500;font-size:14px;}
.usr-row .nm .n2{font-size:12px;color:var(--ink-3);}
.usr-user{font-family:'Kanit';font-size:13px;color:var(--brand-700);background:var(--brand-50);border:1px solid var(--brand-100);border-radius:7px;padding:3px 11px;white-space:nowrap;}
.usr-new-note{display:flex;align-items:center;gap:10px;background:var(--green-bg);border:1px solid var(--green-line);color:var(--green);border-radius:var(--r-md);padding:12px 14px;font-size:13.5px;}
.usr-new-note .num{font-weight:700;}

/* ---------- LINE link modal ---------- */
.ll-hd{display:flex;align-items:center;gap:11px;background:var(--line-green);color:#063d1c;padding:14px 18px;}
.ll-logo{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;color:#06351c;flex:none;}
.ll-logo.lg{width:48px;height:48px;border-radius:13px;background:var(--line-green);color:#fff;}
.ll-hd b{font-family:'Kanit';font-size:15px;display:block;line-height:1.2;}
.ll-hd span:not(.ll-logo){font-size:11.5px;color:#0a5c2e;}
.ll-hd .ll-x{margin-left:auto;background:rgba(255,255,255,.35);border:none;color:#063d1c;width:30px;height:30px;border-radius:50%;font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.ll-hd .ll-x:hover{background:rgba(255,255,255,.6);}
.ll-steps{display:flex;align-items:center;justify-content:center;gap:0;padding:16px 18px 4px;}
.ll-dot{width:26px;height:26px;border-radius:50%;background:var(--line-2);color:var(--ink-3);font-family:'Kanit';font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none;transition:.2s;}
.ll-dot.on{background:var(--brand-600);color:#fff;}
.ll-dot.done{background:var(--green);color:#fff;}
.ll-bar{width:48px;height:3px;background:var(--line-2);transition:.2s;}
.ll-bar.on{background:var(--green);}
.ll-center{text-align:center;}
.ll-title{font-family:'Kanit';font-weight:600;font-size:14.5px;color:var(--brand-900);margin-bottom:14px;}
.ll-qr{display:inline-flex;padding:12px;background:#fff;border:2px solid var(--line-green);border-radius:14px;box-shadow:var(--shadow-sm);}
.ll-oa-name{display:flex;align-items:center;justify-content:center;gap:7px;font-weight:600;font-size:13.5px;margin-top:13px;color:var(--ink);}
.ll-oa-badge{width:17px;height:17px;border-radius:50%;background:var(--line-green);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;}
.ll-desc{font-size:12.5px;color:var(--ink-2);line-height:1.6;margin:12px auto 0;max-width:330px;font-weight:300;}
.ll-consent-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);}
.ll-consent-top{background:var(--bg-2);padding:18px;text-align:center;border-bottom:1px solid var(--line-2);}
.ll-consent-top .ll-logo{margin:0 auto 10px;}
.ll-consent-name{font-family:'Kanit';font-weight:600;font-size:15px;color:var(--brand-900);}
.ll-consent-sub{font-size:12px;color:var(--ink-3);margin-top:2px;}
.ll-perms{padding:12px 16px;}
.ll-perm{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink);padding:7px 0;border-bottom:1px dashed var(--line);}
.ll-perm:last-child{border-bottom:none;}
.ll-perm svg{color:var(--brand-600);flex:none;}
.ll-consent-card .field{padding:0 16px 14px;}
.ll-bind{display:flex;align-items:center;justify-content:center;gap:14px;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:18px 14px;}
.ll-bind-side{text-align:center;flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;}
.ll-bind-side .ll-logo{margin:0;}
.ll-bind-nm{font-weight:600;font-size:13px;line-height:1.2;}
.ll-bind-sub{font-size:11px;color:var(--ink-3);}

/* link banner + status */
.line-banner{display:flex;align-items:center;gap:13px;background:linear-gradient(100deg,#eafaf0,#f3fbf6);border:1px solid var(--line-green);border-left:4px solid var(--line-green);border-radius:var(--r-md);padding:13px 16px;margin-bottom:18px;}
.line-banner .lb-ic{width:38px;height:38px;border-radius:10px;background:var(--line-green);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;}
.line-banner .lb-t{flex:1;min-width:0;}
.line-banner .lb-t b{font-family:'Kanit';font-size:14px;color:#0a5c2e;}
.line-banner .lb-t div{font-size:12.5px;color:var(--ink-2);font-weight:300;}
.line-link-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#0a5c2e;background:#e0f7ea;border:1px solid var(--line-green);border-radius:999px;padding:3px 11px;}
.line-link-status .ds{width:7px;height:7px;border-radius:50%;background:var(--line-green);}

/* chair (ประธานกลุ่มสาระ) */
.chair-badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;color:#7c4408;background:var(--amber-bg);border:1px solid var(--amber-line);border-radius:999px;padding:1px 8px;vertical-align:middle;}
.chair-badge svg{flex:none;}
.chair-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-2);}
@media(max-width:680px){.chair-grid{grid-template-columns:1fr;}}
.chair-cell{background:#fff;padding:13px 15px;}
.chair-cell .cc-grp{font-weight:600;font-size:13.5px;color:var(--brand-900);margin-bottom:9px;font-family:'Kanit';}
.chair-cell .cc-grp .tiny{font-family:'Prompt';font-weight:300;}

/* ---------- approval stepper ---------- */
.appr-box{border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-2);padding:14px 16px;}
.appr-box .ab-hd{font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:12px;display:flex;align-items:center;gap:7px;}
.appr-steps{display:flex;align-items:flex-start;}
.as-node{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;width:88px;text-align:center;}
.as-ic{width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid var(--line);color:var(--ink-3);font-family:'Kanit';font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center;transition:.2s;}
.as-node.approved .as-ic{background:var(--green);border-color:var(--green);color:#fff;}
.as-node.rejected .as-ic{background:var(--red);border-color:var(--red);color:#fff;}
.as-node.cur .as-ic{background:var(--amber);border-color:var(--amber);color:#fff;box-shadow:0 0 0 4px var(--amber-bg);}
.as-lb{font-size:11px;line-height:1.3;color:var(--ink-2);font-weight:500;}
.as-st{font-size:10px;color:var(--ink-3);}
.as-node.approved .as-st{color:var(--green);} .as-node.rejected .as-st{color:var(--red);} .as-node.cur .as-st{color:var(--amber);font-weight:600;}
.as-bar{flex:1;height:2px;background:var(--line);margin-top:14px;min-width:14px;transition:.2s;}
.as-bar.on{background:var(--green);}
.appr-final{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);font-size:12.5px;}

/* dashboard reason bars */
.rsn-bars{display:flex;flex-direction:column;gap:11px;}
.rsn-row{display:flex;align-items:center;gap:12px;}
.rsn-track{flex:1;height:14px;background:var(--line-2);border-radius:999px;overflow:hidden;}
.rsn-fill{height:100%;border-radius:999px;min-width:2px;transition:width .4s;}
.rsn-fill.rt-kit{background:var(--brand-500);}
.rsn-fill.rt-sick{background:#b5403a;}
.rsn-fill.rt-gov{background:#6b41ad;}
.rsn-fill.rt-early{background:#a85b08;}
.rsn-val{font-size:12.5px;color:var(--ink-2);min-width:108px;text-align:right;white-space:nowrap;}
@media(max-width:560px){.rsn-val{min-width:78px;font-size:11px;}}

/* not-linked prompt inside phone */
.ll-notlinked{text-align:center;background:#fff;border-radius:16px;padding:26px 22px;margin:auto;max-width:280px;box-shadow:0 2px 10px rgba(0,0,0,.12);}
.ll-notlinked .nl-ic{width:60px;height:60px;border-radius:16px;background:#e0f7ea;color:var(--line-green);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.ll-notlinked .nl-t{font-family:'Kanit';font-weight:600;font-size:15px;color:var(--ink);}
.ll-notlinked .nl-d{font-size:12.5px;color:var(--ink-2);line-height:1.6;margin:7px 0 16px;font-weight:300;}
.ll-notlinked .nl-btn{display:inline-flex;align-items:center;gap:7px;background:var(--line-green);color:#063d1c;border:none;border-radius:999px;padding:10px 18px;font-family:'Prompt';font-weight:600;font-size:13px;cursor:pointer;}
.ll-notlinked .nl-btn:hover{filter:brightness(1.05);}

/* ============================================================
   ใบลาอิเล็กทรอนิกส์ (LeaveFormDoc) + print
   ============================================================ */
.lf-overlay{position:fixed;inset:0;z-index:95;background:rgba(15,31,61,.55);backdrop-filter:blur(3px);display:flex;flex-direction:column;}
.lf-toolbar{flex:none;display:flex;align-items:center;gap:12px;padding:11px 18px;background:var(--brand-900);color:#fff;}
.lf-toolbar .lf-tt{flex:1;display:flex;align-items:center;gap:8px;justify-content:center;font-family:'Kanit';font-weight:600;font-size:15px;}
.lf-x,.lf-print{display:inline-flex;align-items:center;gap:7px;border:none;border-radius:9px;padding:9px 15px;font-family:'Prompt';font-weight:600;font-size:13px;cursor:pointer;}
.lf-x{background:rgba(255,255,255,.16);color:#fff;}
.lf-x:hover{background:rgba(255,255,255,.28);}
.lf-print{background:#fff;color:var(--brand-800);}
.lf-print:hover{background:#e9f0fb;}
.lf-scroll{flex:1;overflow-y:auto;padding:26px 16px 60px;display:flex;justify-content:center;}

.lf-sheet{background:#fff;width:210mm;max-width:100%;min-height:297mm;padding:15mm 17mm;box-shadow:0 8px 36px rgba(0,0,0,.3);font-family:'TH Sarabun New','TH SarabunPSK','Sarabun','Prompt',sans-serif;color:#1a1a1a;font-size:15px;line-height:1.5;align-self:flex-start;}
.lf-head{display:flex;align-items:center;gap:16px;padding-bottom:12px;border-bottom:2px solid #1a1a1a;}
.lf-logo{width:62px;height:62px;object-fit:contain;flex:none;}
.lf-head-mid{flex:1;text-align:center;}
.lf-form-title{font-family:'Kanit';font-weight:700;font-size:21px;color:#13284f;}
.lf-school{font-weight:600;font-size:16px;margin-top:2px;}
.lf-office{font-size:13px;color:#555;}
.lf-no{flex:none;text-align:center;font-size:11.5px;color:#555;border:1px solid #999;border-radius:6px;padding:6px 10px;min-width:96px;}
.lf-no-v{font-family:'Sarabun';font-weight:700;color:#13284f;font-size:12.5px;margin-top:3px;}

.lf-place{display:flex;justify-content:flex-end;gap:36px;margin-top:14px;font-size:14px;}
.lf-row{margin-top:5px;}
.lf-row b{font-weight:700;}
.lf-body{margin-top:5px;text-align:justify;}
.lf-body p{margin:5px 0;text-indent:2.5em;}
.lf-noindent{text-indent:0 !important;}
.lf-body u,.lf-place u,.lf-fill{text-decoration:none;border-bottom:1px dotted #777;display:inline-block;min-width:40px;line-height:1.3;}
.lf-fill{padding:0 2px;}
/* ช่องกรอกข้อมูลในใบลา (input) */
.lf-inp{border:none;border-bottom:1px dotted #777;background:transparent;font-family:inherit;font-size:inherit;color:#13284f;padding:0 4px 1px;line-height:1.3;vertical-align:middle;}
.lf-inp:focus{outline:none;border-bottom-color:#1f4ba0;background:#f4f8ff;}
.lf-inp::placeholder{color:#9fb0c9;font-style:italic;font-size:13px;}
.lf-check-inline{line-height:2;}
.lf-dateline{line-height:2.1;}
.lf-days{color:#13284f;min-width:30px;display:inline-block;text-align:center;border-bottom:1px dotted #777;}
.lf-datefield{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;}
.lf-dinp{border:1px solid #c3d2e8;border-radius:6px;background:#f7faff;font-family:'Prompt';font-size:12.5px;color:#13284f;padding:2px 6px;}
.lf-dinp:focus{outline:none;border-color:#1f4ba0;}
.lf-dthai{display:none;border-bottom:1px dotted #777;padding:0 6px 1px;color:#13284f;min-width:120px;text-align:center;}
.lf-paren{font-family:'Sarabun';white-space:pre;color:#13284f;font-weight:700;}

/* ── ใบลาป่วย/ลากิจ (HTML) ใช้ฟอนต์ TH Sarabun ทั้งเอกสาร ── */
.lf-sheet-slip{font-family:'TH Sarabun New','TH SarabunPSK','Sarabun',serif;}
.lf-doc-slip, .lf-doc-slip *{font-family:'TH Sarabun New','TH SarabunPSK','Sarabun',serif !important;}

/* บันทึกข้อความขอไปราชการ — ใช้ฟอนต์ TH Sarabun ทั้งเอกสาร */
.lf-doc-memo, .lf-doc-memo *{font-family:'TH Sarabun New','TH SarabunPSK','Sarabun',serif !important;}

/* รายชื่อผู้ไปราชการด้วย (เพิ่ม/ลบ/พิมพ์) */
.lf-companions{display:flex;align-items:flex-start;gap:8px;margin:3px 0;flex-wrap:wrap;}
.lf-comp-label{flex:none;padding-top:3px;}
.lf-comp-items{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0;}
.lf-comp-item{display:flex;align-items:center;gap:6px;}
.lf-comp-num{flex:none;color:#11357e;min-width:18px;}
.lf-comp-inp{flex:1;min-width:0;}
.lf-comp-del{flex:none;width:21px;height:21px;border-radius:50%;border:1px solid var(--red-line);background:var(--red-bg);color:var(--red);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.lf-comp-del:hover{background:var(--red);color:#fff;}
.lf-comp-add{display:inline-flex;align-items:center;gap:5px;border:1px dashed #9fb4d6;background:#f3f7fd;color:#1f4ba0;border-radius:7px;padding:4px 11px;font-family:'Prompt';font-size:12.5px;font-weight:500;cursor:pointer;align-self:flex-start;}
.lf-comp-add:hover{background:#e7effb;border-color:#1f4ba0;}
@media print{ .lf-comp-del,.lf-comp-add{display:none !important;} .lf-comp-num{color:#000 !important;} }
.lf-garuda{display:block;flex:none;}
.lf-memo-head{position:relative;}
.lf-doc-memo{font-size:16px;line-height:1.3;}
.lf-doc-memo .lf-memo-title{font-size:25px;font-weight:700;letter-spacing:.02em;}
.lf-doc-memo .lf-memo-meta{font-size:16px;}
.lf-doc-memo .lf-body{font-size:16px;}
.lf-doc-memo .lf-body p{margin:2px 0;}
.lf-doc-memo .lf-grid2{margin-top:8px;}
.lf-doc-memo .lf-sign-applicant{margin:8px 0 4px auto;width:48%;text-align:center;}
.lf-doc-memo .lf-appr{padding:8px 12px 9px;}
.lf-doc-memo .lf-appr-opts{margin-bottom:8px;}
.lf-doc-memo .lf-appr-lines{margin-top:10px;margin-bottom:8px;}
.lf-doc-memo .lf-appr-h{margin-bottom:6px;}
.lf-doc-memo .lf-appr-date{margin-top:4px;}
.lf-doc-memo .lf-appr, .lf-doc-memo .lf-appr-h, .lf-doc-memo .lf-appr-opts, .lf-doc-memo .lf-sign-name, .lf-doc-memo .lf-cmd-title{font-size:16px;}

/* แบบใบลา: วันที่บรรทัดบน + ช่องติ๊กแนวตั้ง */
/* บีบระยะแบบใบลาป่วย/ลากิจ ให้ช่องเซ็นอยู่หน้าเดียวกับเนื้อความ */
.lf-doc:not(.lf-doc-memo){line-height:1.32;}
.lf-doc:not(.lf-doc-memo) .lf-body p{margin:2px 0;}
.lf-doc:not(.lf-doc-memo) .lf-row{margin-top:3px;}
.lf-doc:not(.lf-doc-memo) .lf-head{padding-bottom:8px;}
.lf-doc:not(.lf-doc-memo) .lf-cmd-lines{margin-top:18px;}
.lf-doc:not(.lf-doc-memo) .lf-stat-tb tbody td{height:14px;}
.lf-doc:not(.lf-doc-memo) .lf-cmd{padding:8px 12px 10px;}
.lf-doc:not(.lf-doc-memo) .lf-inspector{margin-top:7px;}
.lf-doc:not(.lf-doc-memo) .lf-sign-applicant{margin:8px 0 5px auto;width:55%;}
.lf-date-top{text-align:right;margin-top:6px;font-size:15px;}
.lf-slip-title{text-align:center;font-family:'Kanit';font-weight:700;font-size:20px;color:#1a1a1a;margin-bottom:2px;}
.lf-org{font-size:15px;}
.lf-leave-checks{margin:5px 0 4px;padding:0 0 0 30px;display:flex;flex-direction:column;gap:4px;font-size:15px;}

/* บันทึกข้อความ (ไปราชการ) */
.lf-memo-head{display:flex;align-items:center;gap:16px;}
.lf-memo-title{flex:1;text-align:center;font-family:'Kanit';font-weight:700;font-size:26px;color:#13284f;letter-spacing:.04em;}
.lf-memo-meta{margin-top:8px;padding-bottom:10px;border-bottom:2px solid #1a1a1a;font-size:15px;}
.lf-memo-meta>div{margin-top:4px;}
.lf-memo-line2{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;}

.lf-sec-h{margin:20px 0 9px;font-family:'Kanit';font-weight:600;font-size:15px;color:#13284f;border-left:4px solid #1f4ba0;padding-left:10px;}
.lf-table{width:100%;border-collapse:collapse;font-size:13px;}
.lf-table th,.lf-table td{border:1px solid #888;padding:6px 8px;vertical-align:middle;}
.lf-table th{background:#eef3fa;font-family:'Kanit';font-weight:600;font-size:12.5px;color:#13284f;text-align:center;}
.lf-table td.c{text-align:center;}
.lf-table i{color:#a85b08;font-style:italic;font-size:12px;}

.lf-sign-applicant{margin:12px 0 6px;text-align:center;margin-left:auto;width:62%;font-size:15px;}
.lf-sign-name{font-size:15px;margin-top:4px;}

/* สถิติการลา (2 ตาราง) */
.lf-stats{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px;}
.lf-stats > *{width:calc(50% - 7px);box-sizing:border-box;}
.lf-stat-tb{width:100%;border-collapse:collapse;font-size:11.5px;}
.lf-stat-tb caption{caption-side:top;font-size:12px;color:#1a1a1a;margin-bottom:3px;text-align:center;font-weight:600;}
.lf-stat-tb th,.lf-stat-tb td{border:1px solid #444;padding:2px 4px;text-align:center;}
.lf-stat-tb th{background:#fff;font-weight:600;color:#1a1a1a;}
.lf-stat-tb tbody td:first-child{text-align:left;padding-left:6px;}
.lf-stat-tb tbody td{height:17px;}

/* คำสั่ง/ความเห็น แบบใบลา (2 ช่อง) */
.lf-cmd-grid{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;}
.lf-cmd-grid > *{width:calc(50% - 7px);box-sizing:border-box;}
.lf-cmd{border:1px solid #444;border-radius:0;padding:10px 12px 12px;text-align:center;font-size:15px;}
.lf-cmd-h{font-weight:700;color:#1a1a1a;margin-bottom:6px;}
.lf-cmd-lines{display:flex;flex-direction:column;gap:7px;margin-top:26px;margin-bottom:10px;}
.lf-cmd-opts{display:flex;justify-content:center;gap:26px;margin:5px 0 3px;font-size:15px;}
.lf-cmd-sign{margin-top:6px;}
.lf-cmd-title{font-size:15px;color:#1a1a1a;margin-top:2px;}
.lf-inspector{margin-top:10px;text-align:center;width:58%;margin-left:auto;font-size:15px;}

/* ความเห็น 4 ช่อง แบบไปราชการ (2x2) */
.lf-grid2{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px;}
.lf-grid2 > *{width:calc(50% - 7px);box-sizing:border-box;}
.lf-appr{border:1px solid #bbb;border-radius:8px;padding:13px 14px 15px;font-size:15px;text-align:center;}
.lf-appr-h{font-weight:700;color:#13284f;margin-bottom:10px;font-size:15px;}
.lf-appr-lines{margin-top:14px;margin-bottom:14px;}
.lf-appr-opts{margin-bottom:16px;font-size:15px;}
.lf-appr-sign{margin-top:8px;}
.lf-appr-date{font-size:15px;color:#666;margin-top:6px;}

/* เอกสารแนบ (หน้า 2) */
.lf-attach{margin-top:30px;}
.lf-attach-h{font-family:'Kanit';font-weight:700;font-size:17px;color:#13284f;text-align:center;}
.lf-attach-sub{text-align:center;font-size:12.5px;color:#555;margin:4px 0 16px;}
.lf-attach-note{margin-top:14px;font-size:13px;text-indent:2.5em;text-align:justify;}
.lf-foot{margin-top:24px;padding-top:10px;border-top:1px dashed #bbb;font-size:11px;color:#888;text-align:center;}
@media screen and (max-width:760px){.lf-sheet{padding:14mm 10mm;}.lf-grid2 > *,.lf-cmd-grid > *,.lf-stats > *{width:100%;}}

@media print{
  @page{size:A4;margin:14mm 16mm;}
  html,body{background:#fff !important;}
  body *{visibility:hidden !important;}
  .lf-overlay,.lf-overlay *{visibility:visible !important;}
  .lf-overlay{position:absolute;inset:0;background:#fff;backdrop-filter:none;display:block;}
  .lf-toolbar{display:none !important;}
  .lf-scroll{overflow:visible !important;padding:0 !important;display:block !important;}
  .lf-sheet{width:100% !important;max-width:none !important;min-height:auto;box-shadow:none !important;padding:0 !important;margin:0 !important;font-size:15px;}
  /* รักษาเลย์เอาต์ 2 คอลัมน์ตอนพิมพ์ (กันยุบเป็นคอลัมน์เดียวเพราะหน้า A4 แคบกว่า 760px) */
  .lf-grid2,.lf-cmd-grid,.lf-stats{display:flex !important;flex-wrap:wrap !important;}
  .lf-grid2 > *,.lf-cmd-grid > *,.lf-stats > *{width:calc(50% - 7px) !important;box-sizing:border-box !important;}
  .lf-doc-memo{font-size:16px !important;}
  .lf-doc{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;}
  .lf-table{page-break-inside:auto;}
  .lf-dinp{display:none !important;}
  .lf-dthai{display:inline-block !important;}
  .lf-inp{background:transparent !important;}
  .lf-inp::placeholder{color:transparent !important;}
  .lf-table tr,.lf-stat-tb tr{page-break-inside:avoid;}
  .lf-stats,.lf-stat-tb,.lf-grid2,.lf-cmd-grid,.lf-sign-applicant,.lf-inspector,.lf-appr,.lf-cmd,.lf-sec-h{page-break-inside:avoid;}
  .lf-sec-h{page-break-after:avoid;}
  .lf-attach{page-break-before:always;}
  .lf-foot{color:#888 !important;}
}