/* ===========================================================
   ระบบจัดการสอนแทน — โรงเรียนหนองตาคงพิทยาคาร
   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 .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;}
.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-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);}

/* ---------- 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;}

/* ---------- 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-school{font-size:17px;color:#cfe0f7;font-weight:300;margin-top:4px;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);}