/* ════════════════════════════════════════════════════════════════════════════
   cal_style.css — ระบบปฏิทินงาน (CalWorks)
   สไตล์เดียวกับระบบ ปพ.5: ฟอนต์ Sarabun · น้ำเงิน #0c447c · ส้ม #f6821f
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  --navy:#0c447c; --navy-d:#092f57; --navy-l:#1a5a9c;
  --orange:#f6821f; --green:#16a34a; --red:#dc2626; --amber:#b45309;
  --ink:#0f172a; --ink-2:#334155; --muted:#64748b;
  --line:#e2e8f0; --line-2:#cbd5e1;
  --bg:#f1f5f9; --card:#ffffff; --soft:#f8fafc; --soft-2:#eef2f7;
  --r:12px; --r-lg:14px;
  --sh:0 1px 2px rgba(15,23,42,.06), 0 2px 8px rgba(15,23,42,.05);
  --sh-lg:0 10px 30px rgba(12,68,124,.14);
}

*{box-sizing:border-box; font-family:'Sarabun',-apple-system,'Segoe UI',sans-serif}
html,body{margin:0;padding:0}
body{background:var(--bg); color:var(--ink); font-size:15px; line-height:1.55; -webkit-text-size-adjust:100%}
a{color:var(--navy)}
button{font-size:inherit; cursor:pointer}
body.is-busy{cursor:progress}
body.is-busy button{pointer-events:none; opacity:.72}
[hidden]{display:none !important}

/* ── ปุ่ม ───────────────────────────────────────────────────────────────── */
.btn-primary,.btn-ghost,.btn-danger,.btn-soft{
  border-radius:10px; border:1px solid transparent; padding:9px 16px;
  font-weight:600; display:inline-flex; align-items:center; gap:7px;
  transition:.15s ease; line-height:1.2; white-space:nowrap;
}
.btn-primary{background:var(--navy); color:#fff}
.btn-primary:hover{background:var(--navy-l)}
.btn-primary:disabled{background:#94a3b8; cursor:not-allowed}
.btn-ghost{background:#fff; color:var(--navy); border-color:var(--line-2)}
.btn-ghost:hover{background:var(--soft-2); border-color:var(--navy)}
.btn-soft{background:var(--soft-2); color:var(--ink-2); border-color:var(--line)}
.btn-soft:hover{background:#e3e9f1}
.btn-danger{background:#fff; color:var(--red); border-color:#fecaca}
.btn-danger:hover{background:#fef2f2; border-color:var(--red)}
.btn-lg{width:100%; justify-content:center; padding:12px 18px; font-size:16px; margin-top:6px}
.btn-sm{padding:6px 11px; font-size:13.5px; border-radius:8px}
.btn-icon{padding:7px; border-radius:9px}
.btn-primary svg,.btn-ghost svg,.btn-danger svg,.btn-soft svg{width:17px;height:17px;stroke-width:1.9;fill:none;stroke:currentColor}

/* ── ฟอร์ม ──────────────────────────────────────────────────────────────── */
.fld{display:block; margin:0 0 14px}
.fld > span{display:block; font-size:13.5px; font-weight:600; color:var(--ink-2); margin-bottom:6px}
.fld input,.fld select,.fld textarea,.inp{
  width:100%; padding:10px 12px; border:1px solid var(--line-2); border-radius:10px;
  background:#fff; color:var(--ink); font-size:15px; outline:none; transition:.15s;
}
.fld input:focus,.fld select:focus,.fld textarea:focus,.inp:focus{
  border-color:var(--navy); box-shadow:0 0 0 3px rgba(12,68,124,.12)
}
.fld textarea{min-height:88px; resize:vertical}
.fld-row{display:flex; gap:12px; flex-wrap:wrap}
.fld-row > .fld{flex:1 1 180px; min-width:0}
.hint{font-size:12.5px; color:var(--muted); margin:4px 0 0}
.chk{display:flex; align-items:center; gap:9px; margin:12px 0; font-size:14.5px; color:var(--ink-2); cursor:pointer}
.chk input{width:17px; height:17px; accent-color:var(--navy)}
.pw-wrap{position:relative; display:block}
.pw-wrap input{padding-right:44px}
.pw-eye{position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:0; padding:7px; color:var(--muted); line-height:0}
.pw-eye svg{width:19px; height:19px; fill:none; stroke:currentColor}

/* ════════════════════════════════════════════════════════════════════════
   หน้าเข้าสู่ระบบ / ติดตั้ง
   ════════════════════════════════════════════════════════════════════════ */
.auth-body{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px;
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(246,130,31,.13), transparent 60%),
    radial-gradient(900px 480px at 100% 110%, rgba(12,68,124,.18), transparent 60%),
    #eef2f7;
}
.auth-wrap{width:100%; max-width:470px}
.auth-card{background:var(--card); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--sh-lg); padding:28px 26px 26px}
.auth-head{display:flex; align-items:center; gap:14px; padding-bottom:14px; margin-bottom:18px;
  border-bottom:3px solid var(--orange)}
.auth-logo{width:46px; height:46px; flex:0 0 46px; border-radius:12px; background:var(--navy);
  color:#fff; display:grid; place-items:center}
.auth-logo svg{width:26px; height:26px; fill:none; stroke:currentColor}
.auth-head h1{margin:0; font-size:19px; font-weight:700; color:var(--navy); line-height:1.3}
.auth-sub{margin:2px 0 0; font-size:12.5px; color:var(--muted)}
.auth-h2{margin:0 0 10px; font-size:16.5px; color:var(--navy); font-weight:700}
.auth-note{font-size:14px; color:var(--ink-2); margin:0 0 14px}
.auth-warn{font-size:13.5px; color:var(--amber); background:#fffbeb; border:1px solid #fde68a;
  border-radius:10px; padding:10px 12px; margin:0 0 14px}
.auth-hello{font-size:15px; margin:0 0 4px; color:var(--ink-2)}
.auth-hello b{color:var(--navy)}
.auth-foot{margin:14px 0 0; font-size:12px; color:var(--muted); text-align:center}
.auth-copy{text-align:center; font-size:12px; color:var(--muted); margin:16px 0 0}
.auth-msg{border-radius:10px; padding:10px 13px; font-size:14px; margin:0 0 14px; border:1px solid}
.auth-msg.err{background:#fef2f2; border-color:#fecaca; color:#b91c1c}
.auth-msg.ok{background:#f0fdf4; border-color:#bbf7d0; color:#15803d}
.auth-links{display:flex; justify-content:space-between; gap:10px; margin-top:14px; flex-wrap:wrap}
.lnk{background:none; border:0; padding:0; color:var(--navy); font-size:13.5px;
  text-decoration:underline; text-underline-offset:3px}
.otp-input{text-align:center; font-size:26px !important; letter-spacing:9px;
  font-weight:600; font-variant-numeric:tabular-nums}
.setup-steps{margin:0 0 16px; padding-left:22px; font-size:14px; color:var(--ink-2)}
.setup-steps li{margin:5px 0}
.qr-box{display:grid; place-items:center; padding:14px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-lg); margin-bottom:12px}
.qr-box img,.qr-box canvas{display:block}
.qr-fail{font-size:13.5px; color:var(--red); margin:18px 10px; text-align:center}
.secret-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--soft);
  border:1px dashed var(--line-2); border-radius:10px; padding:10px 12px; margin-bottom:16px}
.secret-label{font-size:12.5px; color:var(--muted); flex:1 1 100%}
.secret-row code{font-family:ui-monospace,'SFMono-Regular',monospace; font-size:15px;
  letter-spacing:1.5px; color:var(--navy); font-weight:600}
.codes-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin:0 0 14px}
.codes-grid code{background:var(--soft); border:1px solid var(--line); border-radius:9px;
  padding:9px 6px; text-align:center; font-family:ui-monospace,monospace;
  font-size:15px; letter-spacing:1px; color:var(--navy); font-weight:600}
.code-block{background:#0f1f33; color:#e2e8f0; border-radius:10px; padding:14px;
  font-family:ui-monospace,monospace; font-size:13px; overflow:auto; margin:0 0 14px}
table.kv{width:100%; border-collapse:collapse; margin:0 0 16px; font-size:14.5px}
table.kv th{text-align:left; width:38%; padding:8px 10px; background:var(--soft-2);
  border:1px solid var(--line); color:var(--ink-2); font-weight:600}
table.kv td{padding:8px 10px; border:1px solid var(--line)}

/* ════════════════════════════════════════════════════════════════════════
   โครงหน้าแอป
   ════════════════════════════════════════════════════════════════════════ */
.topbar{position:sticky; top:0; z-index:40; background:var(--navy); color:#fff;
  box-shadow:0 2px 10px rgba(9,47,87,.25)}
.topbar-in{max-width:1480px; margin:0 auto; padding:9px 16px;
  display:flex; align-items:center; gap:12px}
.brand{display:flex; align-items:center; gap:10px; min-width:0; margin-right:auto}
.brand-ic{width:34px; height:34px; flex:0 0 34px; border-radius:9px;
  background:rgba(255,255,255,.14); display:grid; place-items:center}
.brand-ic svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9}
.brand-t{font-size:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand-s{font-size:11.5px; opacity:.8; white-space:nowrap}
.top-btn{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  color:#fff; border-radius:10px; padding:7px 11px; display:inline-flex;
  align-items:center; gap:7px; font-size:14px; font-weight:500; position:relative}
.top-btn:hover{background:rgba(255,255,255,.22)}
.top-btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9}
.top-btn .badge{position:absolute; top:-5px; right:-5px; min-width:19px; height:19px;
  border-radius:10px; background:var(--orange); color:#fff; font-size:11.5px; font-weight:700;
  display:grid; place-items:center; padding:0 5px; border:2px solid var(--navy)}
.who{font-size:13.5px; text-align:right; line-height:1.3; max-width:190px}
.who b{display:block; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.who span{opacity:.78; font-size:11.5px}

.tabs{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:52px; z-index:30}
.tabs-in{max-width:1480px; margin:0 auto; padding:0 10px; display:flex; gap:2px; overflow-x:auto}
.tab{background:none; border:0; border-bottom:3px solid transparent; padding:11px 14px;
  font-size:14.5px; font-weight:600; color:var(--muted); white-space:nowrap;
  display:inline-flex; align-items:center; gap:7px}
.tab svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9}
.tab:hover{color:var(--navy)}
.tab.on{color:var(--navy); border-bottom-color:var(--orange)}

main{max-width:1480px; margin:0 auto; padding:18px 16px 60px}

/* ── แถบ "กำลังดูในมุมมองบทบาทอื่น" ─────────────────────────────────────── */
.viewas-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:#fffbeb; border:1px solid #fde68a; border-left:4px solid var(--orange);
  border-radius:var(--r); padding:10px 14px; margin:0 0 16px;
  color:var(--amber); font-size:13.5px}
.viewas-bar svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; flex:0 0 18px}
.viewas-bar b{color:#92400e}
.viewas-bar button{margin-left:auto; background:var(--amber); color:#fff; border:0;
  border-radius:9px; padding:6px 13px; font-weight:600; font-size:13px; white-space:nowrap}
.viewas-bar button:hover{background:#92400e}
#viewAsBtn.on{background:var(--orange); border-color:var(--orange)}
#viewAsBtn.on:hover{background:#d96d10}

/* ตัวเลือกบทบาทใน modal */
.va-list{display:flex; flex-direction:column; gap:9px}
.va-item{text-align:left; background:#fff; border:1px solid var(--line-2); border-radius:12px;
  padding:12px 14px; display:flex; flex-direction:column; gap:3px; font-family:inherit; width:100%}
.va-item:hover{border-color:var(--navy); background:var(--soft)}
.va-item.on{border-color:var(--navy); background:#eef4fb}
.va-item b{font-size:15px; color:var(--navy)}
.va-item span{font-size:13px; color:var(--muted)}
.page-h{display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap;
  border-bottom:3px solid var(--orange); padding-bottom:9px; margin:0 0 18px}
.page-h h2{margin:0; font-size:20px; font-weight:700; color:var(--navy)}
.page-h .sp{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.page-sub{font-size:13px; color:var(--muted); margin:0 0 0 2px}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh); padding:16px; margin-bottom:16px}
.card-h{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px}
.card-h h3{margin:0; font-size:16px; color:var(--navy); font-weight:700}
.card-h .sp{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}

/* ── แถบเครื่องมือช่วงเวลา ──────────────────────────────────────────────── */
.toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.seg{display:inline-flex; background:var(--soft-2); border:1px solid var(--line);
  border-radius:11px; padding:3px; gap:2px}
.seg button{background:none; border:0; border-radius:8px; padding:7px 13px;
  font-size:14px; font-weight:600; color:var(--ink-2)}
.seg button.on{background:#fff; color:var(--navy); box-shadow:var(--sh)}
.navgrp{display:inline-flex; align-items:center; gap:6px}
.nav-ic{background:#fff; border:1px solid var(--line-2); border-radius:9px; padding:7px;
  color:var(--navy); line-height:0}
.nav-ic svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2}
.period-label{font-size:17px; font-weight:700; color:var(--navy); min-width:190px; text-align:center}
.range-box{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; color:var(--ink-2)}
.range-box input[type=date]{padding:8px 10px; border:1px solid var(--line-2);
  border-radius:9px; font-size:14px; color:var(--ink)}
.filters{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-left:auto}
.filters select,.filters input{padding:8px 10px; border:1px solid var(--line-2);
  border-radius:9px; font-size:14px; background:#fff; max-width:200px}

/* ── ปฏิทินเดือน ────────────────────────────────────────────────────────── */
.mgrid{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh)}
.mhead,.mrow{display:grid; grid-template-columns:repeat(7,1fr)}
.mhead{background:var(--soft-2); border-bottom:1px solid var(--line)}
.mhead div{padding:9px 6px; text-align:center; font-size:13px; font-weight:700; color:var(--ink-2)}
.mhead div.we{color:var(--red)}
.mcell{min-height:112px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:5px 6px 6px; position:relative; background:#fff; overflow:hidden}
.mcell:nth-child(7n){border-right:0}
.mcell.out{background:var(--soft); color:#94a3b8}
.mcell.we{background:#fdf7f7}
.mcell.hol{background:#fef5f5}
.mcell.today{box-shadow:inset 0 0 0 2px var(--navy)}
.mcell.pick{cursor:pointer}
.mcell.pick:hover{background:#f5f9ff}
.mdate{font-size:13.5px; font-weight:700; color:var(--ink-2); display:flex;
  align-items:center; gap:5px; margin-bottom:3px}
.mcell.we .mdate,.mcell.hol .mdate{color:#b91c1c}
.mcell.today .mdate{color:var(--navy)}
.mcell.out .mdate{color:#aab6c6; font-weight:500}
.mdate .dnum{display:inline-grid; place-items:center; min-width:23px; height:23px;
  border-radius:50%; font-size:13px; border:0; background:transparent;
  color:inherit; font-weight:inherit; font-family:inherit; padding:0; cursor:pointer}
.mdate .dnum:hover{background:var(--soft-2); color:var(--navy)}
.mcell.today .dnum{background:var(--navy); color:#fff}
.mcell.today .dnum:hover{background:var(--navy-l); color:#fff}
/* ป้ายจำนวนรายการของวัน — กดเพื่อดูทุกรายการ */
.mdate .dcount{margin-left:auto; border:0; cursor:pointer; font-family:inherit;
  min-width:19px; height:19px; padding:0 5px; border-radius:10px;
  background:var(--soft-2); color:var(--navy); font-size:11px; font-weight:700;
  display:inline-grid; place-items:center}
.mdate .dcount:hover{background:var(--navy); color:#fff}
.wk-h[data-day],.ag-h[data-day]{cursor:pointer}
.wk-h[data-day]:hover,.ag-h[data-day]:hover{background:#e3e9f1}
.wk-c{display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 6px;
  border-radius:10px; background:var(--navy); color:#fff; font-size:11px; font-weight:700;
  vertical-align:2px}
.ag-h .wk-c{margin-left:4px}

/* ── รายการทั้งหมดของวันหนึ่ง (modal) ──────────────────────────────────── */
.day-list{border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.day-row{display:flex; gap:11px; align-items:center; padding:10px 12px;
  border-top:1px solid #f1f5f9; flex-wrap:wrap}
.day-row:first-child{border-top:0}
.day-row:hover{background:var(--soft)}
.day-row .ag-main{flex:1 1 230px; min-width:0; cursor:pointer}
.day-row .ag-main:hover .ag-t{color:var(--navy); text-decoration:underline; text-underline-offset:3px}
.day-row.done .ag-t{text-decoration:line-through; color:var(--muted)}
.day-row.cancelled{opacity:.62}
.day-row.cancelled .ag-t{text-decoration:line-through}
.day-act{display:flex; gap:6px; flex-wrap:wrap; margin-left:auto}
.prio{display:inline-block; font-size:11px; font-weight:700; border-radius:5px;
  padding:1px 7px; vertical-align:1px}
.prio.p1{background:#fffbeb; color:var(--amber); border:1px solid #fde68a}
.prio.p2{background:#fef2f2; color:var(--red); border:1px solid #fecaca}
.hol-tag{font-size:11px; color:#b91c1c; background:#fee2e2; border-radius:5px;
  padding:1px 5px; margin-bottom:3px; display:block; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.ev{display:block; width:100%; text-align:left; border:0; border-left:3px solid var(--navy);
  background:#eef4fb; color:var(--ink); border-radius:5px; padding:2px 5px; margin-bottom:2px;
  font-size:12px; line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ev:hover{filter:brightness(.96)}
.ev .t{font-size:11px; color:var(--muted); margin-right:4px; font-variant-numeric:tabular-nums}
.ev.done{opacity:.6; text-decoration:line-through}
.ev.cancelled{opacity:.52; text-decoration:line-through; background:#f1f5f9; border-left-color:#94a3b8}
.ev.p2{font-weight:700}
.ev-more{font-size:11.5px; color:var(--navy); background:none; border:0;
  padding:1px 4px; text-decoration:underline}

/* ── สัปดาห์ ────────────────────────────────────────────────────────────── */
.wk{display:grid; grid-template-columns:repeat(7,1fr); gap:10px}
.wk-col{background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh); min-height:160px; display:flex; flex-direction:column; overflow:hidden}
.wk-h{padding:8px 9px; border-bottom:1px solid var(--line); background:var(--soft-2)}
.wk-h .d{font-size:13px; color:var(--muted); font-weight:600}
.wk-h .n{font-size:18px; font-weight:700; color:var(--navy)}
.wk-col.we .wk-h{background:#fdeeee}
.wk-col.we .wk-h .n{color:#b91c1c}
.wk-col.today{box-shadow:0 0 0 2px var(--navy), var(--sh)}
.wk-b{padding:7px 8px; flex:1}

/* ── วาระ / รายการ ──────────────────────────────────────────────────────── */
.agenda{display:flex; flex-direction:column; gap:10px}
.ag-day{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh); overflow:hidden}
.ag-h{display:flex; align-items:center; gap:10px; padding:9px 13px;
  background:var(--soft-2); border-bottom:1px solid var(--line)}
.ag-h .dd{font-size:15px; font-weight:700; color:var(--navy)}
.ag-h .dw{font-size:13px; color:var(--muted)}
.ag-h.hol{background:#fee2e2}
.ag-h.hol .dd{color:#b91c1c}
.ag-h .hn{margin-left:auto; font-size:12.5px; color:#b91c1c; font-weight:600}
.ag-h.today .dd::after{content:'วันนี้'; margin-left:8px; font-size:11.5px;
  background:var(--navy); color:#fff; border-radius:5px; padding:1px 7px; vertical-align:2px}
.ag-list{padding:6px 0}
.ag-item{display:flex; gap:11px; padding:9px 13px; border-top:1px solid #f1f5f9;
  align-items:flex-start; cursor:pointer}
.ag-item:first-child{border-top:0}
.ag-item:hover{background:var(--soft)}
.ag-bar{width:4px; border-radius:3px; align-self:stretch; min-height:36px; background:var(--navy); flex:0 0 4px}
.ag-main{flex:1; min-width:0}
.ag-t{font-size:15px; font-weight:600; margin:0 0 2px}
.ag-m{font-size:12.5px; color:var(--muted); display:flex; gap:10px; flex-wrap:wrap}
.ag-item.done .ag-t{text-decoration:line-through; color:var(--muted)}
.ag-item.cancelled{opacity:.6}
.ag-item.cancelled .ag-t{text-decoration:line-through}

/* ── ปีทั้งปี (12 เดือนย่อ) ─────────────────────────────────────────────── */
.ygrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:12px}
.ymon{background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh); padding:10px}
.ymon h4{margin:0 0 7px; font-size:14.5px; color:var(--navy); font-weight:700; text-align:center}
.ymini{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.ymini span{font-size:10.5px; color:var(--muted); text-align:center; font-weight:700}
.ymini b{font-size:11.5px; text-align:center; padding:3px 0; border-radius:5px;
  font-weight:400; cursor:pointer; position:relative}
.ymini b:hover{background:var(--soft-2)}
.ymini b.we{color:#b91c1c}
.ymini b.hol{background:#fee2e2; color:#b91c1c}
.ymini b.has{font-weight:700; color:var(--navy); background:#dbeafe}
.ymini b.today{outline:2px solid var(--navy); outline-offset:-2px}
.ymini b.pad{color:#cbd5e1; cursor:default}

/* ── ตาราง ──────────────────────────────────────────────────────────────── */
.tbl-wrap{overflow:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff}
table.tbl{width:100%; border-collapse:collapse; font-size:14px; min-width:620px}
table.tbl th{background:var(--soft-2); color:var(--ink-2); font-weight:700; font-size:13px;
  text-align:left; padding:10px 11px; border-bottom:1px solid var(--line); white-space:nowrap}
table.tbl td{padding:9px 11px; border-bottom:1px solid #f1f5f9; vertical-align:middle}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover{background:var(--soft)}
.pill{display:inline-block; font-size:12px; font-weight:600; border-radius:20px;
  padding:2px 9px; border:1px solid}
.pill.admin{background:#eef4fb; color:var(--navy); border-color:#c7dbf2}
.pill.recorder{background:#f3edff; color:#6d28d9; border-color:#ddd0fb}
.pill.user{background:var(--soft-2); color:var(--ink-2); border-color:var(--line-2)}
.pill.on{background:#f0fdf4; color:#15803d; border-color:#bbf7d0}
.pill.off{background:#fef2f2; color:#b91c1c; border-color:#fecaca}
.pill.warn{background:#fffbeb; color:#b45309; border-color:#fde68a}
.row-act{display:flex; gap:6px; flex-wrap:wrap}
.empty{text-align:center; padding:40px 16px; color:var(--muted)}
.empty svg{width:42px; height:42px; stroke:#cbd5e1; fill:none; stroke-width:1.5; margin-bottom:10px}

/* ── กระดิ่งแจ้งเตือน ───────────────────────────────────────────────────── */
.notif-pop{position:fixed; top:56px; right:12px; width:min(400px,calc(100vw - 24px));
  max-height:min(560px,calc(100vh - 80px)); background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-lg); z-index:60; display:flex; flex-direction:column}
.notif-h{display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--line)}
.notif-h b{font-size:15px; color:var(--navy)}
.notif-h .sp{margin-left:auto}
.notif-list{overflow:auto; padding:5px 0}
.nitem{display:flex; gap:11px; padding:10px 14px; border-bottom:1px solid #f1f5f9;
  cursor:pointer; text-align:left; background:none; border-left:0; border-right:0; border-top:0; width:100%}
.nitem:hover{background:var(--soft)}
.nitem.unread{background:#f5f9ff}
.nitem.unread:hover{background:#eef4fb}
.ndot{width:9px; height:9px; border-radius:50%; background:var(--orange);
  margin-top:7px; flex:0 0 9px}
.nitem:not(.unread) .ndot{background:#cbd5e1}
.nitem .nt{font-size:14.5px; font-weight:600; margin:0 0 2px; color:var(--ink)}
.nitem .nb{font-size:12.5px; color:var(--muted)}
.nitem .nlead{font-size:11.5px; font-weight:700; border-radius:5px; padding:1px 6px;
  background:#fee2e2; color:#b91c1c; margin-left:6px}
.nitem .nlead.soon{background:#fffbeb; color:#b45309}
.nitem .nlead.far{background:var(--soft-2); color:var(--ink-2)}

/* ── Modal ──────────────────────────────────────────────────────────────── */
.ovl{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:70;
  display:flex; align-items:flex-start; justify-content:center; padding:5vh 14px; overflow:auto}
.modal{background:#fff; border-radius:16px; box-shadow:var(--sh-lg);
  width:100%; max-width:560px; overflow:hidden}
.modal.wide{max-width:760px}
.modal-h{display:flex; align-items:center; gap:10px; padding:14px 18px;
  border-bottom:3px solid var(--orange)}
.modal-h h3{margin:0; font-size:17px; color:var(--navy); font-weight:700}
.modal-h .x{margin-left:auto; background:none; border:0; color:var(--muted); padding:5px; line-height:0}
.modal-h .x svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2}
.modal-b{padding:18px; max-height:68vh; overflow:auto}
.modal-f{display:flex; gap:9px; justify-content:flex-end; padding:13px 18px;
  border-top:1px solid var(--line); background:var(--soft); flex-wrap:wrap}
.modal-f .btn-lg{width:auto; margin:0}

/* รายละเอียดกิจกรรมใน modal */
.det-row{display:flex; gap:11px; padding:8px 0; border-bottom:1px solid #f1f5f9; font-size:14.5px}
.det-row:last-child{border-bottom:0}
.det-row .k{flex:0 0 118px; color:var(--muted); font-size:13.5px}
.det-row .v{flex:1; min-width:0}
.swatch{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:0}
.remind-chips{display:flex; gap:7px; flex-wrap:wrap}
.remind-chips label{display:inline-flex; align-items:center; gap:6px; font-size:13.5px;
  background:var(--soft-2); border:1px solid var(--line); border-radius:20px; padding:5px 11px; cursor:pointer}
.remind-chips input{width:15px; height:15px; accent-color:var(--navy)}
.remind-chips label:has(input:checked){background:#e7f0fa; border-color:var(--navy); color:var(--navy); font-weight:600}
.aud-box{max-height:188px; overflow:auto; border:1px solid var(--line); border-radius:10px; padding:8px}
.aud-box label{display:flex; align-items:center; gap:9px; padding:5px 4px; font-size:14px; cursor:pointer}
.aud-box input{width:16px; height:16px; accent-color:var(--navy)}

/* ── Toast ──────────────────────────────────────────────────────────────── */
.toast-wrap{position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
  z-index:90; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none}
.toast{background:#0f1f33; color:#fff; border-radius:11px; padding:10px 17px;
  font-size:14.5px; box-shadow:var(--sh-lg); max-width:92vw; animation:tin .2s ease}
.toast.err{background:#991b1b}
.toast.ok{background:#15803d}
@keyframes tin{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

.loading{text-align:center; padding:34px; color:var(--muted); font-size:14.5px}
.spin{width:26px; height:26px; border:3px solid var(--line); border-top-color:var(--navy);
  border-radius:50%; animation:sp .8s linear infinite; margin:0 auto 10px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .wk{grid-template-columns:repeat(2,1fr)}
  .who{display:none}
  .period-label{min-width:140px; font-size:15.5px}
  .filters{margin-left:0; width:100%}
  .filters select,.filters input{flex:1 1 140px; max-width:none}
  .filters .chk{flex:0 0 auto; white-space:nowrap}
  .filters .chk span{white-space:nowrap}
}
@media (max-width:640px){
  body{font-size:14.5px}
  main{padding:14px 10px 56px}
  .mcell{min-height:76px; padding:3px 4px 4px}
  .mdate{font-size:12px}
  .ev{font-size:10.5px; padding:1px 3px}
  .hol-tag{font-size:10px}
  .wk{grid-template-columns:1fr}
  .tabs{top:50px}
  .notif-pop{top:52px; right:6px; left:6px; width:auto}
  .det-row{flex-direction:column; gap:2px}
  .det-row .k{flex:none}
  .codes-grid{grid-template-columns:1fr}
  .day-row{align-items:flex-start}
  .day-act{width:100%; margin-left:15px}
  .day-act .btn-sm{flex:1 1 auto; justify-content:center}
  .mdate .dcount{min-width:17px; height:17px; font-size:10px}
}

/* ── พิมพ์ ──────────────────────────────────────────────────────────────── */
@media print{
  .topbar,.tabs,.toolbar,.page-h .sp,.notif-pop,.ovl,.toast-wrap{display:none !important}
  body{background:#fff}
  main{max-width:none; padding:0}
  .card,.mgrid,.ag-day,.tbl-wrap{box-shadow:none; break-inside:avoid}
  .mcell{min-height:96px}
}