:root{
  --bg:#f6f7f8;--card:#fff;--ink:#1c2326;--mute:#667276;--line:#dde2e4;--acc:#0f766e;--acc-ink:#fff;
  --bad:#c0262d;--bad-bg:#fde8e8;--wk:#f1f3f4;--ph:#fff1d6;--today:#0f766e;
  --cl:88%;--cs:75%;--cf:20%;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --bg:#101415;--card:#181d1f;--ink:#e8eced;--mute:#8d999d;--line:#2a3235;--acc:#2dd4bf;--acc-ink:#04201d;
    --bad:#ff8a8f;--bad-bg:#3a1a1c;--wk:#1c2224;--ph:#3a2f14;--today:#2dd4bf;
    --cl:26%;--cs:45%;--cf:88%;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{display:grid;grid-template-rows:auto 1fr auto;height:100dvh;background:var(--bg);color:var(--ink);
  font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
[hidden]{display:none!important}

#top{background:var(--card);border-bottom:1px solid var(--line);padding:calc(env(safe-area-inset-top) + 8px) 12px 8px}
.row{display:flex;align-items:center;gap:8px}
h1{font-size:18px;margin:0;flex:1}
.badge{font-size:12px;padding:3px 9px;border-radius:99px;background:var(--wk);color:var(--mute);border:1px solid var(--line)}
.badge.ok{color:var(--acc);border-color:var(--acc)}
.badge.bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad);font-weight:600}
.month{justify-content:center;margin-top:4px}
.month button{font-size:22px;width:44px;height:36px;border-radius:10px}
.month button:active{background:var(--wk)}
.mlabel{font-size:16px!important;font-weight:650;width:auto!important;padding:0 14px}

#view{overflow:auto;position:relative}
.pad{padding:12px;max-width:720px;margin:0 auto}

#tabs{display:flex;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
#tabs button{flex:1;padding:7px 0 6px;font-size:11px;color:var(--mute);display:flex;flex-direction:column;align-items:center;gap:1px}
#tabs button b{font-size:18px;font-weight:400;line-height:1.1}
#tabs button.on{color:var(--acc);font-weight:650}

/* colour for codes */
.code{background:hsl(var(--h) var(--cs) var(--cl));color:hsl(var(--h) 55% var(--cf))}
.code.off{background:hsl(0 0% var(--cl));color:hsl(0 0% var(--cf))}

/* GRID */
.gridwrap{height:100%;overflow:auto;-webkit-overflow-scrolling:touch}
table.g{border-collapse:separate;border-spacing:0;font-size:11px}
.g th,.g td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:0;text-align:center;background:var(--card)}
.g thead th{position:sticky;top:0;z-index:3;height:92px;min-width:34px;width:34px;vertical-align:bottom;font-weight:600}
.g thead th span{display:block;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;margin:4px auto;max-height:84px;overflow:hidden}
.g .me{background:color-mix(in srgb,var(--acc) 16%,var(--card))!important}
.g th.d{position:sticky;left:0;z-index:2;min-width:66px;width:66px;text-align:left;padding:0 6px;font-weight:600;cursor:pointer;background:var(--card)}
.g thead th.d{z-index:4}
.g th.d small{display:block;font-weight:400;color:var(--mute);font-size:10px}
.g tr.wk td,.g tr.wk th.d{background:var(--wk)}
.g tr.ph td,.g tr.ph th.d{background:var(--ph)}
.g tr.today th.d{box-shadow:inset 3px 0 0 var(--today)}
.g td{height:32px;min-width:34px;cursor:pointer;font-weight:600;letter-spacing:-.2px;overflow:hidden}
.g td.has{padding:0 1px}
.g tr td.has.code{background:hsl(var(--h) var(--cs) var(--cl));color:hsl(var(--h) 55% var(--cf))}
.g tr td.has.code.off{background:hsl(0 0% var(--cl));color:hsl(0 0% var(--cf))}
.g tr td.has.bad,.g tr td.has.code.bad{outline:2px solid var(--bad);outline-offset:-2px;background:var(--bad-bg);color:var(--bad)}
.g tfoot td,.g tfoot th{position:sticky;bottom:0;z-index:2;font-weight:700;cursor:default;border-top:2px solid var(--line)}
.g tfoot th.d{z-index:4}

/* cards & lists */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:12px}
.card h2{font-size:14px;margin:0 0 8px;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
.list{display:flex;flex-direction:column}
.item{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line);text-align:left;width:100%}
.item:last-child{border-bottom:0}
.item .grow{flex:1;min-width:0}
.item small{color:var(--mute)}
.item.dim{opacity:.55}
.item.bad{background:var(--bad-bg);border-radius:8px}
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:650;margin:1px 2px 1px 0}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.daynav{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.daynav h2{flex:1;text-align:center;margin:0;font-size:17px;color:var(--ink);text-transform:none;letter-spacing:0}
.btn{background:var(--wk);border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-weight:600}
.btn.pri{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.btn.danger{color:var(--bad)}
.btn.sm{padding:5px 10px;font-size:13px}
.daynav .btn{width:44px;padding:8px 0}
input[type=text],input[type=search],input[type=password],select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card)}
.field{display:flex;gap:8px;margin-bottom:8px}
.field>*{flex:1}.field>.btn{flex:0 0 auto}
label.l{display:block;font-size:12px;color:var(--mute);margin:10px 0 4px}
.grp{display:flex;align-items:flex-start;gap:8px;padding:6px 0}
.grp .names{flex:1;font-size:14px}
.empty{color:var(--mute);text-align:center;padding:18px 0}
.crow{display:grid;grid-template-columns:70px 1fr 54px 30px;gap:6px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.crow input{padding:6px 8px}
.crow input[type=checkbox]{width:20px;height:20px}
.crow input[type=range]{padding:0;grid-column:1/-1;accent-color:var(--acc)}
.srow{display:flex;gap:6px;margin-bottom:6px}
.x{color:var(--bad);font-size:18px;width:30px}

/* sheet */
#sheet-root .bd{position:fixed;inset:0;background:#0007;z-index:20;animation:fade .15s}
#sheet-root .sh{position:fixed;left:0;right:0;bottom:0;z-index:21;background:var(--card);border-radius:18px 18px 0 0;
  padding:14px 14px calc(14px + env(safe-area-inset-bottom));max-height:86dvh;overflow:auto;max-width:640px;margin:0 auto;animation:up .18s}
.sh h3{margin:0 0 2px;font-size:17px}
.sh .sub{color:var(--mute);font-size:13px;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px}
.chip{padding:10px 14px;border-radius:12px;font-weight:700;border:2px solid transparent;min-width:58px;opacity:.6}
.chip{transition:transform .1s}
.chip.code[aria-pressed=true]{opacity:1;background:hsl(var(--h) 65% 38%);color:#fff;border-color:var(--ink);transform:scale(1.05);
  box-shadow:0 0 0 2px var(--card),0 0 0 4px hsl(var(--h) 65% 45%)}
.chip.code.off[aria-pressed=true]{background:#5b666a}
.chip[aria-pressed=true]::before{content:"✓ "}
.warn{background:var(--bad-bg);color:var(--bad);border-radius:10px;padding:8px 10px;margin-bottom:10px;font-size:14px;font-weight:600}
.acts{display:flex;gap:8px}.acts .pri{flex:1}
@keyframes up{from{transform:translateY(40px);opacity:0}}
@keyframes fade{from{opacity:0}}

#toast{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);background:#1c2326;color:#fff;padding:9px 16px;border-radius:99px;font-size:14px;opacity:0;pointer-events:none;transition:.2s;z-index:30;max-width:90vw}
#toast.on{opacity:1;transform:translateX(-50%)}

}

.g td.sw{position:relative}
.g td.sw::after{content:"";position:absolute;top:0;right:0;border:5px solid transparent;border-top-color:#e8590c;border-right-color:#e8590c}
.orig{background:color-mix(in srgb,#e8590c 14%,var(--card));border-radius:10px;padding:7px 10px;margin-bottom:6px;font-size:14px;font-weight:600}
.swap,.hist{margin-top:14px;border-top:1px solid var(--line);padding-top:4px}
.hist div{font-size:13px;padding:2px 0}

#scanfab{position:fixed;right:14px;bottom:calc(70px + env(safe-area-inset-bottom));width:52px;height:52px;border-radius:50%;background:var(--acc);color:var(--acc-ink);font-size:24px;box-shadow:0 4px 14px #0005;z-index:10}
.srv{display:grid;grid-template-columns:22px 64px 1fr 88px;gap:6px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.srv select{padding:6px 8px;font-size:14px}
.srv input[type=checkbox]{width:20px;height:20px}
.srv.low{background:color-mix(in srgb,#e8590c 13%,transparent);border-radius:8px}
.srv .note{grid-column:2/-1;font-size:12px;color:var(--mute)}
.scanlist{max-height:46dvh;overflow:auto;margin:8px 0;border-top:1px solid var(--line)}
.tips{font-size:13px;color:var(--mute);margin:6px 0 12px;padding-left:18px}

/* skrin lebar: jadual mengisi lebar, tab dipusatkan */
.g{min-width:100%}
@media (min-width:900px){
  #tabs{justify-content:center}
  #tabs button{flex:0 0 130px}
}

/* ---------- mod PC ---------- */
#printhead,#printfoot{display:none}
.g tr td[data-s].sel{outline:3px solid var(--acc);outline-offset:-3px;z-index:1;position:relative}
.g td{scroll-margin:100px 70px 40px 70px}
.desk{display:grid;grid-template-columns:minmax(0,1fr) 360px;height:100%}
.desk .gridwrap{height:100%;min-height:0}
.panel{overflow:auto;border-left:1px solid var(--line);padding:12px;background:var(--bg)}
.panel .chip{padding:7px 10px;min-width:50px;font-size:13px}
.panel .card{padding:10px}
.qbuf{font-size:13px;color:var(--mute);margin:6px 0}
.qbuf b{color:var(--ink);font-family:ui-monospace,monospace;font-size:15px}
.keys{font-size:13px;color:var(--mute)}
.g tr.hlr td,.g td.hlc{box-shadow:inset 0 0 0 999px color-mix(in srgb,var(--acc) 13%,transparent)}
.g th.hlh{background:color-mix(in srgb,var(--acc) 26%,var(--card))!important}
@media (min-width:1000px) and (hover:hover){#scanfab{display:none!important}}

/* ---------- cetak A3 ---------- */
@media print{
  :root,:root:not([data-theme=light]){--bg:#fff;--card:#fff;--ink:#000;--mute:#444;--line:#888;--wk:#ececec;--ph:#ffe6a8;--cl:88%;--cs:75%;--cf:20%;--acc:#0f766e}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  html,body{height:auto;overflow:visible;background:#fff;color:#000}
  body{display:block}
  #top,#tabs,#toast,#scanfab,#sheet-root,.panel{display:none!important}
  #printhead{display:block;margin-bottom:6px}
  #printhead h2{margin:0 0 4px;font-size:16px;text-align:center}
  .pleg{display:flex;flex-wrap:wrap;gap:3px;justify-content:center}
  .pleg .pill{font-size:8px;padding:1px 6px;margin:0}
  #printfoot{display:flex;justify-content:space-between;margin-top:14px;font-size:10px;padding:0 40px}
  #printfoot div{width:220px;border-top:1px solid #000;padding-top:3px;margin-top:34px}
  #view{overflow:visible}
  .desk{display:block;height:auto}
  .gridwrap{overflow:visible;height:auto}
  .g{min-width:0;width:100%;font-size:8px;table-layout:fixed}
  .g thead th{position:static;height:70px;min-width:0;width:auto}
  .g thead th span{max-height:64px;font-size:8px}
  .g th.d{position:static;min-width:0;width:44px;font-size:8px;padding:0 3px}
  .g th.d small{font-size:7px}
  .g td{height:15px;min-width:0;font-size:8px;letter-spacing:0}
  .g tfoot td,.g tfoot th{position:static}
  .g tr td[data-s].sel{outline:none}
  .g tr.hlr td,.g td.hlc{box-shadow:none}
  .g th.hlh{background:#fff!important}
  .g tr.hlr th.d,.g tr.wk th.d{background:inherit}
  tr{break-inside:avoid}
  @page{size:A3 landscape;margin:8mm}
}

/* ahli tidak boleh OT bulan ini */
.g thead th.na{background:repeating-linear-gradient(135deg,var(--card) 0 6px,color-mix(in srgb,var(--bad) 18%,var(--card)) 6px 8px)}
.g tr td.na{background-image:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--mute) 28%,transparent) 6px 8px);cursor:not-allowed}
.g thead th[data-sid]{cursor:pointer}
.panel>.field{flex-wrap:wrap}.panel>.field .btn{padding:8px 10px;flex:1 1 auto}

/* jadual asal */
.basewrap{display:flex;flex-direction:column;height:100%}
.basewrap .gridwrap{flex:1;min-height:0;height:auto}
.basebar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 12px;background:var(--card);border-bottom:1px solid var(--line)}
.basebar .grow{flex:1;min-width:200px}
.basebar small{color:var(--mute)}
.g td.chg{position:relative}
.g td.chg::after{content:"";position:absolute;bottom:0;right:0;border:5px solid transparent;border-bottom-color:#2563eb;border-right-color:#2563eb}
.cl h4{margin:12px 0 4px;font-size:15px}.cl ol{margin:0;padding-left:20px;font-size:14px}.cl small{color:var(--mute)}
@media print{.basebar{display:none!important}.basewrap{display:block;height:auto}.g td.chg::after{display:none}}