/* ---------- Tokens (same system as Portal Staf MyTuitionA+) ----------
   Radius system: controls 8px, labels 6px, cards 12px, dialogs 16px.
   Green / red / amber / blue / orange / violet only ever mean status. */
:root{
  --gray-1:#fcfcfc;--gray-2:#f9f9f9;--gray-3:#f0f0f0;--gray-4:#e8e8e8;--gray-5:#e0e0e0;--gray-6:#d9d9d9;
  --gray-7:#cecece;--gray-8:#bbbbbb;--gray-9:#8d8d8d;--gray-10:#6f6f6f;--gray-11:#646464;--gray-12:#202020;
  --page:#f9f9f9;--sidebar:#fcfcfc;--panel:#fdfdfd;
  --placeholder:#767676;
  --line:rgba(0,0,0,.08);--line-strong:rgba(0,0,0,.14);
  --green-3:#e6f6eb;--green-9:#30a46c;--green-11:#1a7049;
  --red-3:#feebec;--red-9:#e5484d;--red-11:#ce2c31;
  --blue-3:#e8f0fa;--blue-9:#2275d3;--blue-11:#1b5aa6;
  --amber-3:#fff4d5;--amber-9:#e0a93a;--amber-11:#8a5a00;
  --violet-3:#f1ecfd;--violet-9:#6e56cf;--violet-11:#5b44b8;
  --teal-3:#e0f8f3;--teal-9:#12a594;--teal-11:#008573;
  --orange-3:#ffefd6;--orange-9:#ef5f00;--orange-11:#b84a00;
  --cyan-9:#0797b9;--cyan-11:#0b6f87;
  /* One colour per branch (as in the offday sheet) */
  --od-put:#fbe2cf;--od-alm:#d9eed5;--od-sbln:#efc6bf;--od-inm:#aecff0;--od-ppg:#fcefc2;
  --on-accent:#fcfcfc;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-card:0 0 0 1px var(--line),0 1px 2px rgba(0,0,0,.04);
  --shadow-pop:0 0 0 1px var(--line),0 8px 16px -4px rgba(0,0,0,.08),0 24px 48px -12px rgba(0,0,0,.18);
  --scrim:rgba(0,0,0,.32);
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
  --z-header:40;--z-backdrop:45;--z-sidebar:50;--z-modal:55;--z-auth:70;--z-toast:80;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  color-scheme:light;
}
/* Dark tokens: for the dark theme, and always on the login screen. */
:root[data-theme="dark"],.auth-screen{
  --gray-1:#111111;--gray-2:#191919;--gray-3:#222222;--gray-4:#2a2a2a;--gray-5:#313131;--gray-6:#3a3a3a;
  --gray-7:#484848;--gray-8:#606060;--gray-9:#6e6e6e;--gray-10:#8a8a8a;--gray-11:#b4b4b4;--gray-12:#eeeeee;
  --page:#111111;--sidebar:#111111;--panel:#191919;
  --placeholder:#858585;
  --line:rgba(255,255,255,.08);--line-strong:rgba(255,255,255,.14);
  --green-3:#132d21;--green-11:#3dd68c;
  --red-3:#3b1219;--red-11:#ff9592;
  --blue-3:#13233a;--blue-11:#8ab4ea;
  --amber-3:#302008;--amber-11:#f1c35a;
  --violet-3:#271f45;--violet-11:#baa7ff;
  --teal-3:#0d2d2a;--teal-11:#0bd8b6;
  --orange-3:#331e0b;--orange-11:#ffa057;
  --cyan-11:#4ccce6;
  --od-put:#4b3322;--od-alm:#233f29;--od-sbln:#4d2a27;--od-inm:#1d3b5a;--od-ppg:#463b1c;
  --shadow-sm:0 0 #0000; /* not "none": it's used inside comma-separated box-shadow lists */
  --shadow-card:0 0 0 1px var(--line);
  --shadow-pop:0 0 0 1px var(--line-strong),0 24px 48px -12px rgba(0,0,0,.6);
  --scrim:rgba(0,0,0,.6);
  color-scheme:dark;
}
.theme-switching *,.theme-switching *::before,.theme-switching *::after{transition:none!important;}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;scrollbar-width:thin;scrollbar-color:var(--gray-7) transparent;scroll-padding-top:80px;}
body{margin:0;background:var(--page);color:var(--gray-12);font-family:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
h1,h2,h3,p,ul,ol{margin:0;}
h1,h2,h3{text-wrap:balance;}
p{text-wrap:pretty;}
a{color:inherit;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
img{max-width:100%;}
[hidden]{display:none!important;}button,a,[role="button"],label{touch-action:manipulation;}
:focus-visible{outline:2px solid var(--blue-9);outline-offset:2px;}
.tnum{font-variant-numeric:tabular-nums;}
.muted{color:var(--gray-10);}
.min-w-0{min-width:0;}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* iOS Safari zooms into inputs smaller than 16px on focus */
@media (max-width:767px),(pointer:coarse){input,select,textarea{font-size:16px!important;}}
.safe-x{--px:1rem;padding-left:max(var(--px),env(safe-area-inset-left));padding-right:max(var(--px),env(safe-area-inset-right));}
@media (min-width:768px){.safe-x{--px:2rem;}}
@media (min-width:1024px){.lg-hide{display:none!important;}}
.skip-link{position:fixed;left:12px;top:12px;z-index:var(--z-toast);padding:8px 12px;border-radius:8px;background:var(--gray-12);color:var(--gray-1);font-size:13px;font-weight:500;text-decoration:none;transform:translateY(-200%);}
.skip-link:focus{transform:none;}
.ph{font-size:18px;line-height:1;flex-shrink:0;}
.i-14{font-size:14px;}.i-16{font-size:16px;}.i-20{font-size:20px;}

/* ---------- Sidebar (drawer below lg) ---------- */
.sidebar{position:fixed;top:0;bottom:0;left:0;z-index:var(--z-sidebar);width:240px;max-width:85vw;display:flex;flex-direction:column;gap:16px;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(14px + env(safe-area-inset-top,0px)) 12px calc(14px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left));
  background:var(--sidebar);border-right:1px solid var(--line);
  transform:translateX(-100%);visibility:hidden;transition:transform 200ms var(--ease-out),visibility 0s linear 200ms;}
.sidebar[data-open="true"]{transform:none;visibility:visible;box-shadow:var(--shadow-pop);transition:transform 350ms var(--ease-drawer),visibility 0s;}
@media (min-width:1024px){.sidebar{transform:none;visibility:visible;box-shadow:none!important;transition:none;}}
.backdrop{position:fixed;inset:0;z-index:var(--z-backdrop);background:var(--scrim);opacity:0;pointer-events:none;transition:opacity 200ms ease;}
.backdrop[data-open="true"]{opacity:1;pointer-events:auto;}
@media (min-width:1024px){.backdrop{display:none;}}
.side-top{display:flex;flex-direction:column;gap:18px;flex-shrink:0;}
/* The sidebar's middle reaches down to the line above Tema (cancelling the sidebar's 16px gap), so the creature stands on it */
.side-middle{flex:1 1 auto;min-height:16px;margin-bottom:-16px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;}
/* Superadmin: phase buttons above the creature */
.beruang-uji{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;max-width:216px;}
.beruang-uji button{padding:1px 6px;border-radius:999px;font-size:10px;line-height:1.6;white-space:nowrap;color:var(--gray-10);background:transparent;box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;}
.beruang-uji button:hover{color:var(--gray-12);}
.beruang-uji button[aria-pressed="true"]{color:var(--gray-12);box-shadow:inset 0 0 0 1px var(--gray-10);}
/* A small pixel girl at the tuition centre: a door (left) and a computer (right). data-mode: tiada (not here),
   kemas (sweeping before opening), komputer (at work), rehat (upstairs), balik (packing up after closing);
   data-walk while she walks between them. data-awal: the first draw, with no walk. */
.beruang{margin:0;width:100%;display:flex;flex-direction:column;align-items:center;}
.beruang svg{display:block;width:100%;max-width:210px;height:auto;overflow:visible;shape-rendering:crispEdges;}
.beruang *{transform-box:fill-box;}
/* Pressed: a short reply in a speech bubble above it */
.beruang-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:6px;}
.beruang-btn:focus-visible{outline:2px solid var(--gray-10);outline-offset:2px;}
/* The bubble sits just above her head: where she is depends on the mode (and, on a break, which one). --kx/--ky: her
   head in the scene; --tx shifts the bubble so it stays inside the sidebar; --tail: where the tail points at her. */
.beruang-scene{position:relative;width:100%;max-width:210px;margin:0 auto;}
.beruang{--kx:14%;--ky:82%;--tx:-15%;--tail:15%;}
.beruang[data-mode="tiada"]{--kx:13%;--ky:66%;--tx:-15%;--tail:15%;}
.beruang[data-mode="kemas"]{--kx:40%;--ky:70%;--tx:-45%;--tail:45%;}
.beruang[data-mode="balik"]{--kx:60%;--ky:70%;--tx:-70%;--tail:70%;}
.beruang[data-mode="komputer"]{--kx:68%;--ky:72%;--tx:-78%;--tail:78%;}
.beruang[data-mode="rehat"][data-rehat="regang"]{--kx:36%;--ky:9%;--tx:-40%;--tail:40%;}
.beruang[data-mode="rehat"][data-rehat="minum"]{--kx:67%;--ky:14%;--tx:-78%;--tail:78%;}
.beruang-kata{position:absolute;z-index:3;left:var(--kx);top:var(--ky);width:max-content;max-width:180px;margin:0;padding:4px 9px;border-radius:8px;
  transform:translate(var(--tx),calc(-100% - 6px));font-size:11px;line-height:1.35;text-align:center;color:#1f2937;background:#ffffff;box-shadow:0 1px 3px rgba(0,0,0,.25);pointer-events:none;}
.beruang-kata::after{content:"";position:absolute;left:var(--tail);bottom:-4px;width:8px;height:8px;margin-left:-4px;background:inherit;transform:rotate(45deg);}
.k-eye{transform-origin:50% 50%;fill:#1a1a1a;}
/* Her look follows the account's branch (data-rupa, app.js beruangRupa); no data-rupa keeps the default girl.
   Tudung covers the hair and drapes over the chest; long sleeves cover the arms down to the hands. */
.beruang .k-hair-back{fill:var(--k-rambut,#6b3f1f);}
.beruang .k-hair{fill:var(--k-rambut2,#7a4a26);}
.beruang .k-skin{fill:var(--k-kulit,#f1c9a0);}
.beruang .k-top{fill:var(--k-baju,#f2b632);}
.beruang .k-lengan{fill:var(--k-baju,#f2b632);display:none;}
.beruang .k-cermin{display:none;fill:none;stroke:var(--k-cermin,#c9b98f);stroke-width:.35;}
.beruang .k-cermin-tengah{fill:var(--k-cermin,#c9b98f);stroke:none;}
.beruang .k-plaid{display:none;fill:var(--k-plaid,#7fb3c4);opacity:.85;}
.beruang .k-tudung{display:none;fill:var(--k-tudung,#c9c0c4);}
.beruang .k-corak{display:none;fill:var(--k-corak,#e8c9ae);}
.beruang[data-cermin] .k-cermin,.beruang[data-plaid] .k-plaid,.beruang[data-tudung] .k-tudung,.beruang[data-corak] .k-corak,.beruang[data-lengan] .k-lengan{display:inline;}
.beruang[data-tudung] .k-hair-back,.beruang[data-tudung] .k-hair{display:none;}
/* Putatan: shoulder-length dark hair, round light-gold glasses, navy plaid shirt */
.beruang[data-rupa="PUT"]{--k-rambut:#2e1f17;--k-rambut2:#3a271c;--k-kulit:#f3d5b8;--k-baju:#2c3e66;--k-plaid:#7fb3c4;--k-cermin:#d9c89b;}
.beruang[data-rupa="PUT"] .k-hair-back{height:7.4px;}
/* Penampang: brown-mauve floral tudung, brown glasses, brown outfit */
.beruang[data-rupa="PPG"]{--k-kulit:#e4b892;--k-baju:#8a5a46;--k-tudung:#93645b;--k-corak:#e7c6aa;--k-cermin:#6b4a2a;}
/* Inanam: light grey-beige tudung, dark brown top */
.beruang[data-rupa="INM"]{--k-kulit:#f2cfae;--k-baju:#5b3c2b;--k-tudung:#cfc6be;}
.beruang .k-seluar{fill:var(--k-seluar,#9cc3e0);}
.beruang .k-kasut{fill:var(--k-kasut,#f2c94c);}
.beruang .k-logo{display:none;fill:var(--k-logo,#b89a5a);}
.beruang .k-belah{display:none;}
.beruang[data-logo] .k-logo,.beruang[data-belah] .k-belah{display:inline;}
/* Ryan (operasi): long dark wavy hair parted in the middle, over the shoulders; olive-brown sweatshirt with a small
   gold logo, long sleeves; dark trousers and shoes */
.beruang[data-rupa="OPS"]{--k-rambut:#1f1813;--k-rambut2:#2a201a;--k-kulit:#e2b38c;--k-baju:#5b4a33;--k-logo:#b89a5a;--k-seluar:#2f3138;--k-kasut:#1c1c1f;}
/* Alamesra: light grey tudung, round light glasses, pink baju */
.beruang[data-rupa="ALM"]{--k-kulit:#ebbf98;--k-baju:#e8c4ca;--k-tudung:#bab1b6;--k-cermin:#cdbf9c;}
/* Where she is: gone (by the door), sweeping in the middle, on the chair behind the desk (the desk hides her legs),
   or standing beside the desk packing her bag. Coming in: she appears at the door, then walks in; going home:
   she walks to the door, then is gone. */
.k-pos{transform:translateX(-11px);transition:transform 4s linear;}
.beruang[data-mode="tiada"] .k-pos{opacity:0;transition:transform 4s linear,opacity .3s linear 4s;}
.beruang[data-mode="kemas"] .k-pos{transform:translateX(8px);transition:opacity .3s linear,transform 3s linear .3s;}
.beruang[data-mode="komputer"] .k-pos{transform:translateX(28px);}
.beruang[data-mode="balik"] .k-pos{transform:translateX(22px);}
.beruang[data-awal] .k-pos,.beruang[data-awal] .k-up{transition:none!important;}
/* The screen is off when she is not working */
.beruang[data-mode="tiada"] .k-screen,.beruang[data-mode="kemas"] .k-screen,.beruang[data-mode="balik"] .k-screen{fill:#334155;}
/* Her broom before opening, her bag when packing up */
.k-broom,.k-bag{display:none;}
.beruang[data-mode="kemas"] .k-broom,.beruang[data-mode="balik"] .k-bag{display:inline;}
.k-broom{transform-origin:50% 0;}
/* Seated: a little lower than standing, legs behind the desk */
.beruang[data-mode="komputer"]:not([data-walk]) .k-me{transform:translateY(1px);}
.beruang[data-mode="komputer"]:not([data-walk]) .k-legs{display:none;}
@media (prefers-reduced-motion:no-preference){
  .beruang:not([data-mode="tiada"]) .k-eye{animation:k-blink 4s steps(1) infinite;}
  /* Sweeping: to and fro with the broom swinging */
  .beruang[data-mode="kemas"]:not([data-walk]) .k-me{animation:k-sweep 2.4s ease-in-out infinite;}
  .beruang[data-mode="kemas"]:not([data-walk]) .k-broom{animation:k-broom .6s ease-in-out infinite alternate;}
  /* Packing up: arms busy, the bag bobbing as things go in */
  .beruang[data-mode="balik"]:not([data-walk]) .k-arm{animation:k-type .5s steps(2) infinite;}
  .beruang[data-mode="balik"]:not([data-walk]) .k-bag{animation:k-pack 1.2s steps(2) infinite;}
  /* At the computer: sitting, typing on the keyboard (arms), a small shift now and then, screen flickering */
  .beruang[data-mode="komputer"]:not([data-walk]) .k-arm{animation:k-type .3s steps(2) infinite;}
  .beruang[data-mode="komputer"]:not([data-walk]) .k-me{animation:k-sit 3s steps(1) infinite;}
  .beruang[data-mode="komputer"] .k-screen{animation:k-flicker 1.2s steps(2) infinite;}
  /* Walking: legs stepping, body bobbing */
  .beruang[data-walk] .k-leg:nth-child(odd){animation:k-step .3s steps(1) infinite;}
  .beruang[data-walk] .k-leg:nth-child(even){animation:k-step .3s steps(1) .15s infinite;}
  .beruang[data-walk] .k-me{animation:k-hop .3s steps(2) infinite;}
}
@media (prefers-reduced-motion:reduce){.k-pos{transition:none;}}
/* Break upstairs (data-mode="rehat"): she walks from the desk to the stairs (4s) and is gone from the room; upstairs
   she comes off the stairs and walks to the sofa (regang) or the coffee machine (minum) (3s). Back down (data-turun):
   the same the other way round. Opened during a break (data-naik): already there, no walk. */
.k-wall2{fill:#f3ead8;transition:fill 3s;}
.k-floor2{fill:#b07a4a;}
.beruang[data-langit="malam"] .k-wall2{fill:#9a9080;}
.k-pos{opacity:1;}
.beruang[data-mode="rehat"] .k-pos{transform:translateX(-7px);opacity:0;transition:transform 4s linear,opacity .2s linear 4s;}
.beruang[data-turun] .k-pos{transition:opacity .2s linear 3.2s,transform 4s linear 3.4s;}
.k-up{opacity:0;transform:translate(-15px,-37px);transition:transform 3s linear,opacity .2s linear 3s;}
.beruang[data-mode="rehat"] .k-up{opacity:1;transition:opacity .2s linear 4s,transform 3s linear 4.2s;}
.beruang[data-mode="rehat"][data-rehat="regang"] .k-up{transform:translate(5px,-37px);}
.beruang[data-mode="rehat"][data-rehat="minum"] .k-up{transform:translate(27px,-37px);}
.beruang[data-naik] .k-up,.beruang[data-naik] .k-pos{transition:none;}
.k-cup{display:none;}
.beruang[data-mode="rehat"][data-rehat="minum"]:not([data-walk]) .k-cup{display:inline;}
.beruang[data-mode="rehat"][data-rehat="minum"]:not([data-walk]) .k-uarm-r{transform-origin:50% 0;transform:rotate(-35deg);}
.k-uarm{transform-origin:50% 0;}
@media (prefers-reduced-motion:no-preference){
  .beruang[data-walk] .k-up-me{animation:k-hop .3s steps(2) infinite;}
  /* Stretching: both arms up over the head and down again, standing a little taller */
  .beruang[data-mode="rehat"][data-rehat="regang"]:not([data-walk]) .k-uarm{animation:k-stretch 2.6s ease-in-out infinite;}
  .beruang[data-mode="rehat"][data-rehat="regang"]:not([data-walk]) .k-up-me{animation:k-tall 2.6s ease-in-out infinite;}
  /* A drink: the cup up to her mouth now and then; steam from the machine */
  .beruang[data-mode="rehat"][data-rehat="minum"]:not([data-walk]) .k-cup{animation:k-sip 4s ease-in-out infinite;}
  .k-steam{animation:k-steam 2s ease-in-out infinite;}
}
@media (prefers-reduced-motion:reduce){.k-up{transition:none;}.beruang[data-mode="rehat"][data-rehat="regang"] .k-uarm{transform:rotate(180deg);}}
@keyframes k-stretch{0%,15%,85%,100%{transform:rotate(0);}35%,65%{transform:rotate(180deg);}}
@keyframes k-tall{0%,15%,85%,100%{transform:translateY(0);}35%,65%{transform:translateY(-1px);}}
@keyframes k-sip{0%,30%,75%,100%{transform:translate(0,0);}45%,60%{transform:translate(-3px,-2px);}}
@keyframes k-steam{0%{opacity:0;transform:translateY(1px);}40%{opacity:.9;}100%{opacity:0;transform:translateY(-2px);}}
@keyframes k-sweep{0%,100%{transform:translateX(-4px);}50%{transform:translateX(4px);}}
@keyframes k-broom{from{transform:rotate(-14deg);}to{transform:rotate(14deg);}}
@keyframes k-pack{0%,100%{transform:translateY(0);}50%{transform:translateY(-.6px);}}
@keyframes k-blink{0%,92%,100%{transform:scaleY(1);}95%{transform:scaleY(.2);}}
@keyframes k-hop{0%,100%{transform:translateY(0);}50%{transform:translateY(-1px);}}
@keyframes k-sit{0%,100%{transform:translateY(1px);}50%{transform:translateY(0);}}
@keyframes k-type{0%{transform:translateY(0);}50%{transform:translateY(-1px);}}
@keyframes k-flicker{0%{fill:#9fd3ff;}50%{fill:#cfe9ff;}}
@keyframes k-step{0%{transform:translateY(0);}50%{transform:translateY(-1px);}}
/* Kalendar cawangan above the scene, in place of the date: a small tear-off calendar (month over day), the date
   and today's notes for the branch shown. data-ada: there are notes today. Pressing it opens the popup (.kal-dialog). */
.kalendar-btn{display:flex;align-items:center;gap:10px;width:100%;max-width:216px;margin-bottom:2px;padding:7px 10px 7px 7px;border-radius:10px;text-align:left;cursor:pointer;
  background:#12271c80;box-shadow:inset 0 0 0 1px var(--line);transition:background-color 150ms ease,box-shadow 150ms ease,transform 160ms var(--ease-out);}
@media (hover:hover){.kalendar-btn:hover{background:#ffffff0f;box-shadow:inset 0 0 0 1px var(--line-strong);}}
.kalendar-btn:active{transform:scale(.98);}
.kalendar-ikon{display:flex;flex-direction:column;flex-shrink:0;width:34px;overflow:hidden;border-radius:6px;background:#f8f6ec;box-shadow:0 1px 2px #0003;text-align:center;}
.kalendar-ikon span{display:block;padding:1px 0;font-size:8px;font-weight:800;line-height:1.3;letter-spacing:.08em;color:#fff;background:#d9534f;}
.kalendar-ikon strong{display:block;padding:1px 0 2px;font-size:15px;font-weight:800;line-height:1.2;color:#26352b;font-variant-numeric:tabular-nums;}
.kalendar-btn[data-ada="1"] .kalendar-ikon{box-shadow:0 0 0 2px #d7b773;}
.kalendar-teks{display:flex;flex-direction:column;gap:2px;min-width:0;}
.beruang-tarikh{font-size:11.5px;font-weight:600;color:var(--gray-12);letter-spacing:.02em;}
.kalendar-nota{overflow:hidden;font-size:10.5px;color:var(--gray-10);white-space:nowrap;text-overflow:ellipsis;}
.kalendar-nota:empty{display:none;}
.kalendar-btn[data-ada="1"] .kalendar-nota{font-weight:600;color:#e8c77f;}
/* Laporan Harian: a small note pinned in the sidebar; the pin and the status are amber until today's report is in, green
   once it is. Pressing it pulls the pin out and the note swings, then the form opens (data-cabut, harianCabut). */
.harian-buku{flex:none;width:100%;display:flex;justify-content:center;padding:10px 0 2px;background:none;border:0;cursor:pointer;--hb-pin:#f5a524;--hb-pin2:#b86f08;--hb-nota:#9a5a05;}
.harian-buku[hidden]{display:none;}
.harian-buku[data-st="ok"]{--hb-pin:#3fb97a;--hb-pin2:#1f7a4c;--hb-nota:#1f7a4c;}
.harian-buku[data-st="off"]{--hb-pin:#a3a89f;--hb-pin2:#70756c;--hb-nota:#70756c;}
.hb-kertas{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;width:176px;padding:12px 10px 8px;border-radius:2px;color:#3a3225;text-align:center;
  background:#fbf3d9;box-shadow:0 1px 0 #e4d8b4,0 5px 10px #00000047;transform:rotate(-1.5deg);transform-origin:50% 0;transition:transform 200ms var(--ease-out),box-shadow 200ms ease;}
.hb-pin{position:absolute;top:-7px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffffffb0 0 2px,var(--hb-pin) 3px,var(--hb-pin2) 100%);box-shadow:1px 3px 3px #00000066;transition:transform 220ms var(--ease-out),opacity 220ms ease;}
@media (hover:hover){.harian-buku:hover .hb-kertas{transform:rotate(1deg) translateY(-1px);box-shadow:0 1px 0 #e4d8b4,0 8px 14px #00000059;}.harian-buku:hover .hb-pin{transform:translateY(-1px);}}
.harian-buku:focus-visible{outline:none;}
.harian-buku:focus-visible .hb-kertas{outline:2px solid #e8c77f;outline-offset:3px;}
.harian-buku[data-cabut] .hb-pin{transform:translate(5px,-16px) rotate(35deg);opacity:0;}
.harian-buku[data-cabut] .hb-kertas{transform:rotate(7deg) translateY(4px);}
.hb-tajuk{font-size:11px;font-weight:800;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:#4a3a22;}
.hb-baris{display:flex;justify-content:center;gap:5px;font-size:10.5px;font-weight:600;line-height:1.4;font-variant-numeric:tabular-nums;}
.hb-cawangan{font-weight:400;opacity:.75;}
.hb-cawangan:empty{display:none;}
.hb-nota{font-size:10px;font-weight:700;line-height:1.4;color:var(--hb-nota);}
/* Bayaran tertunggak, above the calendar: green when nothing waits; glowing red while a payment waits for pengurusan. */
.tuntutan-btn{display:flex;align-items:center;gap:10px;width:100%;max-width:216px;margin-bottom:6px;padding:8px 10px;border-radius:10px;text-align:left;cursor:pointer;
  background:#12271c80;box-shadow:inset 0 0 0 1px var(--line);transition:background-color 150ms ease,box-shadow 150ms ease,transform 160ms var(--ease-out);}
.tuntutan-btn[hidden]{display:none;}
@media (hover:hover){.tuntutan-btn:hover{background:#ffffff0f;}}
.tuntutan-btn:active{transform:scale(.98);}
.tuntutan-dot{flex-shrink:0;width:12px;height:12px;border-radius:50%;background:#3fb97a;box-shadow:0 0 0 3px #3fb97a33;}
.tuntutan-teks{display:flex;flex-direction:column;gap:1px;min-width:0;}
.tuntutan-teks strong{font-size:11.5px;font-weight:700;color:var(--gray-12);letter-spacing:.02em;}
.tuntutan-nota{overflow:hidden;font-size:10.5px;color:#8fd6ae;white-space:nowrap;text-overflow:ellipsis;}
.tuntutan-btn[data-st="off"] .tuntutan-dot{background:var(--gray-8);box-shadow:0 0 0 3px #ffffff1a;}
.tuntutan-btn[data-st="off"] .tuntutan-nota{color:var(--gray-10);}
.tuntutan-btn[data-st="pending"]{background:#5c1d1d66;box-shadow:inset 0 0 0 1px #e5484d99;}
.tuntutan-btn[data-st="pending"] .tuntutan-dot{background:#e5484d;box-shadow:0 0 0 3px #e5484d44;}
.tuntutan-btn[data-st="pending"] .tuntutan-nota{color:#ffb4b4;font-weight:600;}
@media (prefers-reduced-motion:no-preference){
  .tuntutan-btn[data-st="pending"]{animation:tuntutan-glow 1.6s ease-in-out infinite;}
  @keyframes tuntutan-glow{50%{box-shadow:inset 0 0 0 1px #e5484d,0 0 14px #e5484d88;}}
}
.tt-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px;}
.tt-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.tt-row{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;
  background:color-mix(in srgb,var(--red-9) 8%,var(--panel));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--red-9) 30%,transparent);}
.tt-row[data-st="selesai"]{background:color-mix(in srgb,var(--green-9) 8%,var(--panel));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--green-9) 25%,transparent);}
.tt-row[data-st="batal"]{background:var(--gray-2);box-shadow:inset 0 0 0 1px var(--line);opacity:.8;}
.tt-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 260px;font-size:13px;}
.tt-amt{margin-left:6px;font-variant-numeric:tabular-nums;color:var(--gray-12);}
.tt-catatan{color:var(--gray-12);white-space:pre-wrap;}
.tt-done{font-size:12px;font-weight:600;color:var(--green-11);}
.tt-done.is-batal{color:var(--gray-11);}
.tt-acts{display:flex;gap:6px;flex-shrink:0;}
.tt-wait{font-size:12px;font-weight:600;color:var(--red-11);white-space:nowrap;}
.tt-empty{display:flex;align-items:center;gap:6px;margin:0;padding:12px;border-radius:10px;color:var(--green-11);background:color-mix(in srgb,var(--green-9) 10%,var(--panel));font-weight:600;}
/* Digital clock above the scene; data-meeting (15 min before closing) makes it bounce and call the meeting */
.beruang-jam{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:4px;}
#beruang-masa{padding:2px 8px;border-radius:5px;font:700 13px/1.3 ui-monospace,"Cascadia Mono",Consolas,monospace;letter-spacing:.06em;color:#7ee787;background:#0f1a14;box-shadow:inset 0 0 0 1px #2b3d31;}
.beruang-meeting{display:none;font:800 12px/1.2 var(--font,sans-serif);letter-spacing:.04em;color:#f87171;}
.beruang[data-meeting] .beruang-meeting{display:block;}
.beruang[data-meeting] #beruang-masa{color:#fca5a5;box-shadow:inset 0 0 0 1px #f87171;}
@media (prefers-reduced-motion:no-preference){.beruang[data-meeting] .beruang-jam{animation:k-bounce .6s ease-in-out infinite;}}
@keyframes k-bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
/* Superadmin: Uji masa box beside Auto */
.beruang-uji input{width:128px;height:22px;padding:0 4px;border-radius:6px;border:0;font-size:10.5px;color:var(--gray-12);background:transparent;box-shadow:inset 0 0 0 1px var(--line);color-scheme:dark;}
/* Sky (data-langit): pagi low sun on the left, tengahari high sun, petang low orange sun on the right,
   senja no sun, malam high moon and stars. Moves across smoothly when the phase changes */
.k-sun,.k-moon{transition:transform 3s ease-in-out,opacity 3s ease-in-out;}
.k-sun{transform:translate(28px,4px);opacity:0;}
.k-sun circle{fill:#fde047;transition:fill 3s;}
.k-moon{transform:translate(28px,6px);opacity:0;}
.k-stars rect{fill:#f8fafc;opacity:0;transition:opacity 3s;}
/* The room: warm wall and wooden floor, darker in the evening and at night; the window shows the sky */
.k-wall{fill:#efe4cf;transition:fill 3s;}
.k-floor{fill:#b07a4a;transition:fill 3s;}
.k-sky{fill:#bfe3ff;transition:fill 3s;}
.beruang[data-langit="tengahari"] .k-sky{fill:#7cc4f5;}
.beruang[data-langit="petang"] .k-sky{fill:#fdba74;}
.beruang[data-langit="senja"] .k-sky{fill:#a78bfa;}
.beruang[data-langit="senja"] .k-wall{fill:#dccdb3;}
.beruang[data-langit="malam"] .k-sky{fill:#1e293b;}
.beruang[data-langit="malam"] .k-wall{fill:#8f8676;}
.beruang[data-langit="malam"] .k-floor{fill:#7a5636;}
.beruang[data-langit="pagi"] .k-sun{transform:translate(28px,-1px);opacity:1;}
.beruang[data-langit="pagi"] .k-sun circle{fill:#fdba74;}
.beruang[data-langit="tengahari"] .k-sun{transform:translate(35px,-7px);opacity:1;}
.beruang[data-langit="petang"] .k-sun{transform:translate(42px,-1px);opacity:1;}
.beruang[data-langit="petang"] .k-sun circle{fill:#f97316;}
.beruang[data-langit="senja"] .k-sun{transform:translate(44px,5px);opacity:0;}
.beruang[data-langit="malam"] .k-moon{transform:translate(35px,-7px);opacity:1;}
.beruang[data-langit="malam"] .k-stars rect{opacity:.9;}
@media (prefers-reduced-motion:no-preference){.beruang[data-langit="malam"] .k-stars rect:nth-child(odd){animation:k-twinkle 2.4s steps(2) infinite;}}
@keyframes k-twinkle{50%{opacity:.25;}}
/* Not enough room in the sidebar: no creature */
@media (max-height:640px){.beruang,.beruang-uji{display:none;}}
/* On a desktop the sidebar never scrolls: the room scene takes what is left over, and on a shorter window things give way
   in turn: the superadmin's time test, then the menu's height, then the scene, then the small labels. */
@media (min-width:1024px){
  .sidebar{overflow:hidden;}
  .side-middle{flex:1 1 0;min-height:0;margin-bottom:0;}
  .side-middle>*:not(.beruang){flex-shrink:0;}
  /* Clock and scene stay at the bottom, centred; spare room goes above the clock. The scene keeps its shape until it runs out of room. */
  .beruang{flex:1 1 0;min-height:0;justify-content:flex-end;}
  .beruang-jam{flex:none;}
  .beruang-scene{flex:0 1 auto;min-height:0;aspect-ratio:70/66;display:flex;}
  .beruang-btn{flex:1;min-width:0;height:100%;}
  .beruang-btn svg{width:100%;height:100%;}
}
@media (min-width:1024px) and (max-height:1000px){.beruang-uji{display:none;}}
@media (min-width:1024px) and (max-height:860px){.sidebar .nav-item{min-height:38px!important;padding-block:6px;}}
@media (min-width:1024px) and (max-height:760px){.beruang-scene{display:none;}.beruang{flex:none;}.side-eyebrow{display:none;}.sidebar{gap:10px;}.side-top{gap:12px;}.side-bottom{gap:8px;padding-top:8px;}}
@media (min-width:1024px) and (max-height:640px){.sidebar .nav-item{min-height:32px!important;padding-block:4px;}.sidebar .side-label{display:none;}}
.side-bottom{display:flex;flex-direction:column;gap:12px;flex-shrink:0;padding-top:16px;border-top:1px solid var(--line);}
.side-brand{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-left:6px;min-height:32px;}
.brand-link{display:block;min-width:0;border-radius:6px;}
.brand-logo{display:block;width:176px;max-width:100%;min-width:0;height:auto;border-radius:6px;}
.brand-logo-dark{display:none;}
:root[data-theme="dark"] .brand-logo-light{display:none;}
:root[data-theme="dark"] .brand-logo-dark{display:block;}
.side-app{padding:0 10px;font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--gray-11);}
.side-label{display:block;padding:0 10px;margin-bottom:6px;font-size:12px;font-weight:500;color:var(--gray-10);}
.nav-group{display:flex;flex-direction:column;gap:2px;}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:6px 10px;border-radius:8px;font-size:14px;font-weight:500;color:var(--gray-11);text-decoration:none;text-align:left;
  transition:background-color 150ms ease,color 150ms ease,transform 160ms var(--ease-out);}
.nav-item .ph{color:var(--gray-9);}
.nav-item[aria-current="page"],.nav-item[aria-pressed="true"]{background:var(--panel);color:var(--gray-12);box-shadow:var(--shadow-card);}
.nav-item[aria-current="page"] .ph{color:var(--gray-12);}
.nav-item:active{transform:scale(.98);}
.nav-count{margin-left:auto;display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red-9);color:#fff;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;}
.user-card{display:flex;align-items:center;gap:8px;padding:8px 6px 8px 10px;border-radius:12px;background:var(--panel);box-shadow:var(--shadow-card);}
.user-main{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;flex:1;}
.user-name{max-width:100%;font-size:13px;font-weight:500;color:var(--gray-12);}
@keyframes pulse{50%{opacity:.35;}}

/* Branch code chip: the branch keeps its colour everywhere */
.code{display:inline-grid;place-items:center;min-width:40px;height:20px;padding:0 6px;border-radius:5px;background:var(--od,var(--gray-4));color:var(--gray-12);font-size:10.5px;font-weight:700;letter-spacing:.03em;flex-shrink:0;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gray-12) 10%,transparent);}
[data-code="PUT"]{--od:var(--od-put);}
[data-code="ALM"]{--od:var(--od-alm);}
[data-code="SBLN"]{--od:var(--od-sbln);}
[data-code="INM"]{--od:var(--od-inm);}
[data-code="PPG"]{--od:var(--od-ppg);}

/* ---------- Header: main topics across the top ---------- */
.app-shell{min-height:100dvh;}
@media (min-width:1024px){.app-shell{padding-left:240px;}}
.app-header{position:sticky;top:0;z-index:var(--z-header);display:flex;align-items:center;gap:6px;height:calc(56px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);
  background:var(--page);border-bottom:1px solid var(--line);}
.topic-tabs{display:flex;align-items:stretch;gap:2px;align-self:stretch;flex:1;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;}
.topic-tabs::-webkit-scrollbar{display:none;}
.topic-tabs::after{content:"";flex:0 0 8px;}
.topic-tab{position:relative;display:inline-flex;align-items:center;gap:8px;padding:0 12px;white-space:nowrap;font-size:13px;font-weight:500;color:var(--gray-11);text-decoration:none;
  transition:color 150ms ease,background-color 150ms ease;}
.topic-tab+.topic-tab::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--line-strong);}
.topic-tab:focus-visible{outline:2px solid var(--blue-9);outline-offset:-2px;}
.topic-tab .ph{font-size:16px;color:var(--gray-9);transition:color 150ms ease;}
.topic-tab::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--gray-12);transform:scaleX(0);transition:transform 200ms var(--ease-out);}
.topic-tab[aria-current="page"]{color:var(--gray-12);background:color-mix(in srgb,var(--gray-12) 7%,transparent);}
.topic-tab[aria-current="page"] .ph{color:var(--gray-12);}
.topic-tab[aria-current="page"]::after{transform:none;}
@media (min-width:1024px){
  .topic-tabs{gap:0;}
  .topic-tabs::after{display:none;}
  .topic-tab{flex:1 1 0;min-width:0;justify-content:center;white-space:normal;text-align:center;line-height:1.2;}
  .topic-tab>span{min-width:0;overflow-wrap:break-word;}
  .topic-tab::after{left:16px;right:16px;}
}
@media (min-width:1024px) and (max-width:1279px){.topic-tab .ph{display:none;}.topic-tab{padding:0 8px;}}

/* ---------- Sub-tabs: the pages under one top tab (Pengurusan Kelas, Guru, Payroll Guru) ---------- */
.sub-tabs{display:flex;gap:4px;margin-bottom:-4px;border-bottom:1px solid var(--line);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;}
.sub-tabs::-webkit-scrollbar{display:none;}
.sub-tab{position:relative;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 12px;white-space:nowrap;font-size:13px;font-weight:500;color:var(--gray-11);text-decoration:none;border-radius:8px 8px 0 0;
  transition:color 150ms ease,background-color 150ms ease;}
.sub-tab .ph{font-size:16px;color:var(--gray-9);}
.sub-tab::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--brand,var(--gray-12));transform:scaleX(0);transition:transform 200ms var(--ease-out);}
.sub-tab[aria-current="page"]{color:var(--brand,var(--gray-12));}
.sub-tab[aria-current="page"] .ph{color:var(--brand,var(--gray-12));}
.sub-tab[aria-current="page"]::after{transform:none;}
.sub-tab:focus-visible{outline:2px solid var(--blue-9);outline-offset:-2px;}
/* Pengurusan Pelajar: centred buttons; Senarai Pelajar and Tambah Pelajar open a small menu */
.pl-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding-bottom:14px;border-bottom:1px solid var(--line);}
.pl-menu{position:relative;}
.pl-menu>summary{list-style:none;}
.pl-menu>summary::-webkit-details-marker{display:none;}
.pl-menu-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:0;border-radius:10px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
  font:inherit;font-size:14px;font-weight:500;color:var(--gray-11);white-space:nowrap;cursor:pointer;user-select:none;}
.pl-menu-btn .ph{font-size:17px;color:var(--gray-9);}
.pl-menu-cur{padding:2px 8px;border-radius:999px;font-size:12px;background:color-mix(in srgb,var(--brand,var(--gray-12)) 12%,transparent);}
.pl-menu-caret{font-size:13px!important;transition:transform 150ms var(--ease-out);}
.pl-menu[open] .pl-menu-caret{transform:rotate(180deg);}
.pl-menu[data-on]>.pl-menu-btn,.pl-menu-btn[data-on]{color:var(--brand,var(--gray-12));box-shadow:inset 0 0 0 1.5px var(--brand,var(--gray-12));background:color-mix(in srgb,var(--brand,var(--gray-12)) 6%,var(--panel));}
.pl-menu[data-on]>.pl-menu-btn .ph,.pl-menu-btn[data-on] .ph{color:var(--brand,var(--gray-12));}
@media (hover:hover){.pl-menu-btn:hover{box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--gray-12);}}
.pl-menu-btn:focus-visible{outline:2px solid var(--blue-9);outline-offset:2px;}
.pl-menu-list{position:absolute;z-index:40;top:calc(100% + 6px);left:50%;transform:translateX(-50%);min-width:200px;padding:4px;border-radius:10px;
  background:var(--panel);box-shadow:0 0 0 1px var(--line),var(--shadow-sm),0 8px 24px rgba(0,0,0,.12);}
.pl-menu-item{display:flex;align-items:center;gap:8px;width:100%;height:38px;padding:0 10px;border:0;border-radius:7px;background:none;font:inherit;font-size:14px;color:var(--gray-12);text-align:left;cursor:pointer;}
.pl-menu-item .ph{font-size:16px;color:var(--gray-9);}
.pl-menu-item[aria-current="page"]{font-weight:600;}
.pl-menu-tick{margin-left:auto;color:var(--brand,var(--gray-12))!important;}
@media (hover:hover){.pl-menu-item:hover{background:var(--gray-3);}}
.pl-menu-item:focus-visible{outline:2px solid var(--blue-9);outline-offset:-2px;}
/* Kehadiran Pelajar > Tambah pelajar: the menu opens under the button, to its right edge; each way with a line below. */
.att-menu .pl-menu-list{left:auto;right:0;transform:none;min-width:290px;}
.att-menu>summary .pl-menu-caret{margin-left:2px;}
.att-menu-item{height:auto;min-height:48px;padding:7px 10px;align-items:flex-start;}
.att-menu-item .ph{margin-top:2px;}
.att-menu-item>span{display:flex;flex-direction:column;gap:1px;}
.att-menu-item small{font-size:12px;color:var(--gray-10);font-weight:400;}
.att-menu-sep{height:1px;margin:4px 6px;background:var(--line);}
/* Bayaran diterima: Berkumpulan / Private / Campuran as three buttons, and a box for each part. */
.by-mod{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:4px;border-radius:10px;background:var(--gray-3);}
.by-mod label{position:relative;cursor:pointer;}
.by-mod input{position:absolute;opacity:0;pointer-events:none;}
.by-mod span{display:flex;align-items:center;justify-content:center;gap:6px;height:36px;border-radius:7px;font-size:13.5px;font-weight:500;color:var(--gray-11);}
.by-mod input:checked+span{background:var(--panel);color:var(--gray-12);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08),inset 0 0 0 1px var(--line);}
.by-mod input:focus-visible+span{outline:2px solid var(--blue-9);outline-offset:1px;}
.by-sec{padding:12px;border:1px solid var(--line);border-radius:10px;}
.by-jenis{cursor:pointer;}
@media (hover:hover){.by-jenis:hover .badge{box-shadow:0 0 0 2px var(--line-strong);}}
.by-sec-title{margin:0 0 8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-11);}
/* Yuran pelajar > a student's name: the summary. */
.ys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.ys-sec{padding:12px 14px;border:1px solid var(--line);border-radius:10px;}
.ys-wide,.ys-acts{grid-column:1/-1;}
.ys-title{margin:0 0 8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-11);}
.ys-row{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:13.5px;}
.ys-row>span:last-child{text-align:right;}
.ys-tahun{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;}
.ys-bulan{display:flex;flex-direction:column;gap:3px;padding:8px 10px;border-radius:8px;background:var(--gray-2);font-size:12.5px;}
.ys-bulan.is-now{box-shadow:inset 0 0 0 1.5px var(--gray-12);}
.ys-acts{display:flex;gap:8px;flex-wrap:wrap;}
@media (max-width:700px){.ys{grid-template-columns:1fr;}}
/* Import Excel lejer: one row per month received, each ticked on its own, with its records to look through. */
.lj-bulan{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.lj-bulan-row{padding:8px 12px;}
.lj-bulan-row + .lj-bulan-row{border-top:1px solid var(--line);}
/* Buku lejer: one receipt split between siblings, a line and a pencil for each student. */
.lj-part + .lj-part{margin-top:4px;}
.lj-part-amt{font-weight:400;font-size:12px;}
.lj-part-acts{display:flex;flex-direction:column;align-items:flex-end;}
.lj-batch{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.lj-bulan-list>summary{margin:4px 0 0 28px;font-size:12.5px;color:var(--gray-11);cursor:pointer;}
.lj-bulan-list .imp-list{margin:6px 0 0 28px;}
.pl-view-count{margin:0;}
/* Analisis Pelajar */
.an-table tbody tr[data-act]{cursor:pointer;}
@media (hover:hover){.an-table tbody tr[data-act]:hover td{background:var(--gray-2);}}
.an-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;}
.an-who{display:flex;align-items:center;gap:12px;flex:1 1 280px;min-width:0;}
.an-who .guru-avatar{width:44px;height:44px;border-radius:11px;font-size:14px;background:var(--gray-3);color:var(--gray-11);}
.an-who .muted{margin:2px 0 0;}
.an-name{margin:0;font-size:18px;font-weight:600;overflow-wrap:anywhere;}
.an-year{display:flex;align-items:center;gap:10px;font-size:15px;}
/* Analisis Pelajar: twelve month cards, four to a row; each a ring of attendance and the month's payment */
.an-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:14px 16px;}
@media (max-width:767px){.an-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px;}}
.an-mcard{--ring:var(--gray-6);display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 10px 14px;border:0;border-radius:12px;
  background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);font:inherit;color:var(--gray-12);cursor:pointer;transition:box-shadow 150ms ease,background-color 150ms ease;}
@media (hover:hover){.an-mcard:hover{box-shadow:inset 0 0 0 1px var(--line-strong),var(--shadow-sm);}}
.an-mcard:focus-visible{outline:2px solid var(--blue-9);outline-offset:2px;}
.an-mcard.is-good{--ring:var(--green-9);}
.an-mcard.is-mid{--ring:var(--amber-9);}
.an-mcard.is-low{--ring:var(--red-9);}
.an-mcard.is-later{--ring:var(--gray-8);}
.an-mcard.is-empty .an-mname{color:var(--gray-9);}
.an-mname{font-size:14px;font-weight:600;}
.an-ring{position:relative;width:96px;height:96px;}
.an-ring svg{width:100%;height:100%;transform:rotate(-90deg);}
.an-ring circle{fill:none;stroke-width:7;}
.an-ring-bg{stroke:var(--gray-3);}
.an-ring-fg{stroke:var(--ring);stroke-linecap:round;}
.an-ring-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;text-align:center;}
.an-ring-text strong{font-size:18px;font-weight:700;}
.an-ring-text small{font-size:11px;color:var(--gray-10);}
.an-pay{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;}
.an-pay.is-paid{color:var(--green-11);background:color-mix(in srgb,var(--green-9) 14%,transparent);}
.an-pay.is-due{color:var(--red-11);background:color-mix(in srgb,var(--red-9) 13%,transparent);}
.an-pay.is-na{color:var(--gray-9);}
/* The month's window: a row of facts (attendance, absences, payment), then the classes */
.an-facts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.an-fact{display:flex;flex-direction:column;gap:2px;min-width:96px;padding:8px 12px;border-radius:10px;background:var(--gray-2);box-shadow:inset 0 0 0 1px var(--line);}
.an-fact strong{font-size:16px;font-weight:700;}
.an-fact span{font-size:12px;color:var(--gray-10);}
.an-fact.is-th strong,.an-fact.is-due strong{color:var(--red-11);}
.an-fact.is-paid strong{color:var(--green-11);}
.an-month-none{margin:4px 0 0;}
.an-classes{display:flex;flex-direction:column;gap:10px;}
.an-class{padding:10px 12px;border-radius:10px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);}
.an-class-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:8px;}
.an-class-head .muted{font-size:12.5px;}
.an-sesi-list{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;}
.an-sesi{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:92px;padding:6px 10px;border-radius:8px;background:var(--gray-2);font-size:12px;}
.an-sesi-date{color:var(--gray-10);white-space:nowrap;}
.an-sesi-st{font-weight:600;white-space:nowrap;}
.an-sesi.is-in{background:color-mix(in srgb,var(--green-9) 16%,transparent);}
.an-sesi.is-in .an-sesi-st{color:var(--green-11);}
.an-sesi.is-th{background:color-mix(in srgb,var(--red-9) 13%,transparent);}
.an-sesi.is-th .an-sesi-st{color:var(--red-11);}
.an-sesi.is-off .an-sesi-st{color:var(--amber-11);}
.an-sesi.is-none .an-sesi-st,.an-sesi.is-later .an-sesi-st{font-weight:400;color:var(--gray-10);}
@media (hover:hover) and (pointer:fine){.sub-tab:not([aria-current]):hover{background:var(--gray-3);color:var(--gray-12);}}

.main{display:flex;flex-direction:column;gap:16px;min-width:0;width:100%;margin:0 auto;padding-top:20px;padding-bottom:max(48px,env(safe-area-inset-bottom));outline:none;}
.view{display:flex;flex-direction:column;gap:20px;min-width:0;}
@media (prefers-reduced-motion:no-preference){
  .view[data-enter="true"]{animation:view-in 260ms var(--ease-out) both;}
  @keyframes view-in{from{opacity:0;transform:translateY(6px);}}
}

/* ---------- Page head ---------- */
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px;}
.page-eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-size:12.5px;font-weight:500;color:var(--gray-10);}
.page-title{font-size:clamp(22px,2.2vw,28px);font-weight:650;letter-spacing:-.035em;line-height:1.2;color:var(--gray-12);overflow-wrap:anywhere;}
.page-sub{margin-top:4px;font-size:13px;color:var(--gray-11);}
/* Heading kept for screen readers when the tab already names the page */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* Nothing visible on the left (no branch buttons or note): the buttons sit on the right */
.page-head.is-bare{justify-content:flex-end;}
.page-head.is-bare>.min-w-0{display:contents;}
.head-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--gray-11);text-decoration:none;border-radius:6px;}
.month-nav{display:inline-flex;align-items:center;gap:2px;height:36px;padding:0 2px;border-radius:8px;background:var(--panel);box-shadow:0 0 0 1px var(--line-strong),var(--shadow-sm);}
.month-label{min-width:128px;padding:0 4px;text-align:center;font-size:13px;font-weight:600;color:var(--gray-12);font-variant-numeric:tabular-nums;}
/* The month between the arrows opens a small calendar: year with arrows, 12 months in a grid */
.mp{position:relative;display:inline-flex;}
.mp-btn{height:30px;border:0;border-radius:6px;background:transparent;font-family:inherit;cursor:pointer;}
@media (hover:hover){.mp-btn:hover{background:var(--gray-3);}}
.mp-btn[aria-expanded="true"]{background:var(--gray-3);}
.mp-pop{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:60;width:248px;padding:10px;border-radius:12px;background:var(--panel);
  box-shadow:0 0 0 1px var(--line-strong),0 12px 32px rgba(0,0,0,.16);animation:mp-in .12s ease-out;}
@keyframes mp-in{from{opacity:0;margin-top:-4px;}to{opacity:1;margin-top:0;}}
@media (prefers-reduced-motion:reduce){.mp-pop{animation:none;}}
.mp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.mp-year{font-size:14px;font-weight:650;color:var(--gray-12);font-variant-numeric:tabular-nums;}
.mp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;}
.mp-m{height:36px;border:0;border-radius:8px;background:transparent;font:inherit;font-size:13px;font-weight:500;color:var(--gray-12);cursor:pointer;}
@media (hover:hover){.mp-m:hover{background:var(--gray-3);}}
.mp-m.is-now{box-shadow:inset 0 0 0 1.5px var(--gray-7);}
.mp-m.is-sel{background:var(--gray-12);color:var(--panel);font-weight:650;}
.mp-m:focus-visible{outline:2px solid var(--gray-9);outline-offset:1px;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 12px;border-radius:8px;font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:transform 160ms var(--ease-out),background-color 150ms ease,color 150ms ease,box-shadow 150ms ease,opacity 150ms ease;}
.btn:active{transform:scale(.97);}
.btn:disabled{opacity:.5;cursor:default;pointer-events:none;}
.btn-primary{background:var(--gray-12);color:var(--gray-1);box-shadow:var(--shadow-sm);}
.btn-secondary{background:var(--panel);color:var(--gray-12);box-shadow:0 0 0 1px var(--line-strong),var(--shadow-sm);}
.btn-ghost{color:var(--gray-11);}
.btn-danger{color:var(--red-11);}
.btn-danger[data-armed="true"]{background:var(--red-9);color:var(--on-accent);}
.btn-icon{width:32px;height:32px;padding:0;}
.btn-sm{height:30px;padding:0 10px;font-size:12px;}
.btn-block{width:100%;}
@media (pointer:coarse){.btn{height:40px;}.btn-icon{width:40px;height:40px;}.btn-sm{height:36px;}}
.link-btn{font-size:13px;font-weight:500;color:var(--gray-11);padding:2px 6px;margin:-2px -6px;border-radius:6px;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;}
.link-btn:disabled{opacity:.4;cursor:default;}

.segmented{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:var(--gray-3);box-shadow:inset 0 0 0 1px var(--line);flex-shrink:0;}
.segmented button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 10px;border-radius:7px;font-size:13px;font-weight:500;color:var(--gray-11);
  transition:color 150ms ease,background-color 150ms ease,box-shadow 150ms ease,transform 160ms var(--ease-out);}
.segmented button:active{transform:scale(.96);}
.segmented button[aria-pressed="true"]{background:var(--panel);color:var(--gray-12);box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(0,0,0,.08);}
.segmented.is-block{display:flex;width:100%;}
.segmented.is-block button{flex:1;min-width:0;padding:0 6px;font-size:12px;gap:5px;}
.seg-count{font-size:12px;color:var(--gray-10);font-variant-numeric:tabular-nums;}
/* Branch buttons at the top of a page; scrolls sideways on a narrow screen */
.branch-bar{display:flex;width:max-content;max-width:100%;margin:2px 0 12px;overflow-x:auto;scrollbar-width:none;}
.branch-bar::-webkit-scrollbar{display:none;}
.branch-bar button{flex-shrink:0;white-space:nowrap;}
.branch-bar .nav-count{margin-left:0;}
.back-link + .branch-bar{margin-top:10px;}
@media (pointer:coarse){.segmented button{height:34px;}}

/* ---------- Inputs ---------- */
.input{display:block;width:100%;height:36px;padding:0 12px;border-radius:8px;border:1px solid var(--line-strong);background:var(--panel);color:var(--gray-12);font:inherit;font-size:14px;box-shadow:var(--shadow-sm);
  transition:border-color 150ms ease,box-shadow 150ms ease;}
.input::placeholder{color:var(--placeholder);opacity:1;}
.input:focus{outline:2px solid var(--blue-9);outline-offset:2px;border-color:var(--blue-9);box-shadow:none;}
.input.has-icon{padding-left:34px;}
.input.is-auto{width:auto;}
select.input{appearance:none;-webkit-appearance:none;padding-right:30px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238d8d8d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;background-size:14px;}
textarea.input{height:auto;min-height:72px;padding:8px 12px;resize:vertical;line-height:1.45;}
@media (pointer:coarse){.input{height:40px;}}
.field{position:relative;min-width:0;}
.field-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--gray-9);pointer-events:none;}
/* Search-and-pick list under a box (Guru in the class dialog). In the flow, so the dialog's scroll never clips it. */
.combo{min-width:0;}
.combo-list{margin:4px 0 0;padding:4px;list-style:none;max-height:240px;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:var(--shadow-sm);}
.combo-opt{display:flex;flex-direction:column;gap:1px;padding:7px 10px;border-radius:7px;cursor:pointer;}
.combo-opt[aria-selected="true"]{background:var(--gray-3);}
@media (hover:hover){.combo-opt:hover{background:var(--gray-3);}}
.combo-name{font-size:13px;font-weight:500;color:var(--gray-12);overflow-wrap:anywhere;}
.combo-sub{font-size:11px;color:var(--gray-10);}
.combo-none{margin:6px 0 0;}
/* Guru ganti: the shared tutor list, floating under the box being typed in */
.ganti-pop{position:fixed;z-index:60;width:280px;max-width:calc(100vw - 16px);margin:0;text-align:left;}
.ganti-pop .combo-none{padding:7px 10px;font-size:12.5px;color:var(--gray-10);}
@media (hover:hover){.ganti-pop .combo-opt:hover{background:var(--gray-3);}}
.label{display:block;margin-bottom:6px;font-size:13px;font-weight:500;color:var(--gray-12);}
.req{color:var(--red-11);}
.hint{margin-top:6px;font-size:12px;color:var(--gray-10);}
/* A field's description: a ? beside its label */
.label-row{display:flex;align-items:center;gap:6px;margin-bottom:6px;}
.label-row .label{margin:0;}
.hint-tip{flex:none;width:16px;height:16px;padding:0;border:0;border-radius:50%;background:var(--gray-3);color:var(--gray-11);font-size:11px;font-weight:700;line-height:16px;text-align:center;cursor:help;}
.hint-tip:hover,.hint-tip:focus-visible{background:var(--green-9);color:#fff;}
.hint-pop{position:fixed;z-index:10000;max-width:280px;padding:8px 10px;border-radius:8px;background:var(--gray-12);color:var(--gray-1);font-size:12px;line-height:1.45;box-shadow:0 6px 20px rgba(0,0,0,.2);pointer-events:none;}
.hint-pop[hidden]{display:none;}
.by-total-row{display:flex;align-items:center;gap:8px;}
.by-total-row .by-total{flex:1;}
.form-msg{font-size:13px;font-weight:500;line-height:1.4;padding:10px 12px;border-radius:8px;background:var(--red-3);color:var(--red-11);}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;}
@media (min-width:520px){.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.form-grid .span-2{grid-column:span 2;}.form-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}.form-grid.cols-3 .span-2{grid-column:span 3;}}
.check-list{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow-y:auto;padding:6px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line-strong);}
.check-row{display:flex;align-items:center;gap:10px;min-height:32px;padding:4px 8px;border-radius:6px;font-size:13px;cursor:pointer;}
.check-row:has(:checked){background:var(--gray-3);}
.check-row small{color:var(--gray-10);font-size:12px;}
/* Registration form: Subjek / Hari / Cawangan filters above the class list */
.daftar-kelas-filter{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 8px;}
.daftar-kelas-filter .input{width:auto;min-width:150px;flex:1 1 150px;max-width:220px;}
.checkbox{appearance:none;-webkit-appearance:none;margin:0;width:16px;height:16px;flex-shrink:0;display:grid;place-content:center;border-radius:4px;border:1px solid var(--gray-8);background:var(--panel);cursor:pointer;
  transition:background-color 120ms ease,border-color 120ms ease;}
.checkbox::after{content:"";width:10px;height:10px;background:var(--gray-1);-webkit-mask:var(--check) center/contain no-repeat;mask:var(--check) center/contain no-repeat;opacity:0;transform:scale(.6);
  transition:opacity 120ms ease,transform 160ms var(--ease-out);}
.checkbox:checked{background:var(--gray-12);border-color:var(--gray-12);}
.checkbox:checked::after{opacity:1;transform:none;}

/* ---------- Chips (filters) ---------- */
.chip-group{display:flex;flex-wrap:wrap;gap:6px;}
.chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 10px;border-radius:8px;font-size:13px;font-weight:500;color:var(--gray-11);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-strong);cursor:pointer;
  transition:background-color 150ms ease,color 150ms ease,box-shadow 150ms ease,transform 160ms var(--ease-out);}
.chip:active{transform:scale(.96);}
.chip[aria-pressed="true"]{background:var(--gray-12);color:var(--gray-1);box-shadow:inset 0 0 0 1px var(--gray-12);}
.chip[aria-pressed="true"] .seg-count{color:inherit;opacity:.75;}
.chip-sep{width:1px;align-self:stretch;margin:4px 4px;background:var(--line-strong);}
@media (pointer:coarse){.chip{height:34px;}}
.swatch{width:10px;height:10px;border-radius:3px;flex-shrink:0;background:var(--c,var(--gray-8));}

/* ---------- Cards, tables, badges ---------- */
.card{background:var(--panel);border-radius:12px;box-shadow:var(--shadow-card);min-width:0;}
.card-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:14px 16px;}
.card-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--gray-12);}
.card-title .ph{color:var(--gray-10);}
.card-head .push{margin-left:auto;}
.card-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--gray-11);}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.toolbar .field{flex:1 1 220px;max-width:360px;}
.scroll-x{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--gray-8) var(--gray-2);}
.scroll-x:focus-visible{outline-offset:-2px;border-radius:8px;}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;text-align:left;}
.table th{padding:10px 12px;font-size:12px;font-weight:500;color:var(--gray-11);white-space:nowrap;background:var(--gray-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.table td{padding:10px 12px;vertical-align:middle;border-bottom:1px solid var(--line);}
.table th:first-child,.table td:first-child{padding-left:16px;}
.table th:last-child,.table td:last-child{padding-right:16px;}
.table tbody tr:last-child td{border-bottom:0;}
.table tbody tr:focus-within td{background-color:var(--gray-2);}
.table .num{text-align:right;font-variant-numeric:tabular-nums;}
.table .nowrap{white-space:nowrap;}
.table .act{width:1%;white-space:nowrap;text-align:right;}
.table tr.is-year td{padding:6px 16px;font-size:12px;font-weight:600;color:var(--gray-11);background:var(--gray-2);}
.cell-strong{font-weight:600;color:var(--gray-12);}
.badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 7px;border-radius:6px;font-size:12px;font-weight:500;white-space:nowrap;background:var(--gray-3);color:var(--gray-11);}
.badge .ph{font-size:14px;}
.badge-sm{height:18px;padding:0 6px;font-size:11px;border-radius:5px;}
.badge-green{background:var(--green-3);color:var(--green-11);}
.badge-red{background:var(--red-3);color:var(--red-11);}
.badge-amber{background:var(--amber-3);color:var(--amber-11);}
.badge-blue{background:var(--blue-3);color:var(--blue-11);}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 7px;border-radius:6px;font-size:12px;font-weight:500;background:var(--gray-3);color:var(--gray-11);white-space:nowrap;}
.tag-list{display:flex;flex-wrap:wrap;gap:4px;}
.notice{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-radius:10px;font-size:13px;line-height:1.45;background:var(--gray-3);color:var(--gray-11);}
.notice.is-error{background:var(--red-3);color:var(--red-11);}
.notice.is-warn{background:var(--amber-3);color:var(--amber-11);}
.notice .ph{margin-top:1px;}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:48px 24px;}
.empty-icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:8px;border-radius:12px;background:var(--gray-2);color:var(--gray-11);box-shadow:var(--shadow-card);}
.empty-title{font-size:15px;font-weight:600;color:var(--gray-12);}
.empty-text{max-width:420px;font-size:13px;color:var(--gray-11);}
.empty-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px;}
.sk{background:var(--gray-3);border-radius:12px;animation:sk-pulse 1.4s ease-in-out infinite;}
@keyframes sk-pulse{50%{opacity:.5;}}

/* ---------- Laman Utama ---------- */
.home-head{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:4px 0 8px;text-align:left;}
/* Laman Utama banner: what the portal is, in the login page's dark green and lime, with a few faint stars */
.home-hero{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;padding:24px 28px;border-radius:16px;
  color:#f4f1df;background:radial-gradient(ellipse at 85% 0%,#3a6a4c55 0%,transparent 55%),linear-gradient(120deg,#10291f 0%,#1d3d2d 60%,#244638 100%);box-shadow:0 10px 30px -18px #07190f80;}
.home-hero-text{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;min-width:0;}
.home-eyebrow{display:flex;align-items:center;gap:10px;margin:0;font-size:11px;font-weight:600;letter-spacing:.18em;color:#c3d2b6;}
.home-eyebrow>span{width:22px;height:1px;background:#c6dd9f;}
.home-title{margin:0;font-size:clamp(26px,2.6vw,34px);font-weight:600;letter-spacing:-.035em;line-height:1.15;color:#f4f1df;}
.home-title em{font-family:Georgia,'Times New Roman',serif;font-weight:400;color:#d5e7ad;}
.home-sub{margin:0;font-size:14px;color:#bccbbb;}
.home-hero-side{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.home-hero-codes{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;}
.home-hero-user{font-size:12.5px;color:#a9bea5;}
.home-hero-user strong{color:#f4f1df;font-weight:600;}
.home-hero-stars{position:absolute;inset:0;pointer-events:none;}
.home-hero-stars i{position:absolute;font-style:normal;color:#d7e7ac;opacity:.35;line-height:1;}
.home-hero-stars i:nth-child(1){right:34%;top:14px;font-size:22px;}
.home-hero-stars i:nth-child(2){right:28%;top:46px;font-size:11px;opacity:.25;}
.home-hero-stars i:nth-child(3){right:40%;bottom:12px;font-size:14px;opacity:.2;}
@media (prefers-reduced-motion:no-preference){.home-hero-stars i{animation:auth-spark 7s ease-in-out infinite;}.home-hero-stars i:nth-child(2){animation-delay:2s;}.home-hero-stars i:nth-child(3){animation-delay:4s;}}
@media (max-width:640px){.home-hero{padding:20px;}.home-hero-side{align-items:flex-start;}.home-hero-codes{justify-content:flex-start;}}
/* Every other page: a thin strip in the banner's colours (app.js: pageHeroHtml). The section with its italic
   word, then the page open within it after a short lime line; the date on the right. */
.page-strip{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:8px 20px;border-radius:12px;
  color:#f4f1df;background:radial-gradient(ellipse at 85% 0%,#3a6a4c55 0%,transparent 55%),linear-gradient(120deg,#10291f 0%,#1d3d2d 60%,#244638 100%);box-shadow:0 8px 22px -16px #07190f80;}
.page-strip-title{position:relative;z-index:1;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px;min-width:0;margin:0;font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.3;color:#f4f1df;}
.page-strip-title em{font-family:Georgia,'Times New Roman',serif;font-weight:400;color:#d5e7ad;}
.page-strip-page{display:inline-flex;align-items:center;gap:8px;margin-left:8px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#c3d2b6;}
.page-strip-page::before{content:"";width:18px;height:1px;background:#c6dd9f;}
.page-strip-date{position:relative;z-index:1;flex-shrink:0;font-size:12.5px;font-weight:500;color:#bccbbb;white-space:nowrap;}
.page-strip-stars{position:absolute;inset:0;pointer-events:none;}
.page-strip-stars i{position:absolute;font-style:normal;line-height:1;color:#d7e7ac;opacity:.3;}
.page-strip-stars i:nth-child(1){right:30%;top:6px;font-size:14px;}
.page-strip-stars i:nth-child(2){right:24%;bottom:6px;font-size:9px;opacity:.2;}
@media (prefers-reduced-motion:no-preference){.page-strip-stars i{animation:auth-spark 7s ease-in-out infinite;}.page-strip-stars i:nth-child(2){animation-delay:3s;}}
@media (max-width:640px){.page-strip{padding:8px 14px;}.page-strip-date{display:none;}.page-strip-title{font-size:16px;}}
/* The cawangan picked, and the Pengurusan Bayaran section open, in the banner's green */
.branch-bar button[aria-pressed="true"],.by-tabs button[aria-pressed="true"]{color:#f4f1df;background:linear-gradient(120deg,#1d3d2d 0%,#244638 100%);box-shadow:0 1px 3px #07190f40;}
.by-tabs button[aria-pressed="true"] .ph{color:#d5e7ad;}
.home-greet{font-size:clamp(25px,2.5vw,32px);font-weight:650;letter-spacing:-.035em;line-height:1.2;color:var(--gray-12);overflow-wrap:anywhere;}
.home-hint{font-size:14px;color:var(--gray-11);}
.list{display:flex;flex-direction:column;margin:0;padding:0 16px 8px;list-style:none;}
.list-row{display:flex;align-items:center;gap:12px;width:100%;padding:10px 0;border-top:1px solid var(--line);text-align:left;}
.list-row-main{display:flex;flex-direction:column;min-width:0;flex:1;}
.list-row-title{font-size:13px;font-weight:600;color:var(--gray-12);}
.list-row-sub{font-size:12px;color:var(--gray-10);}

/* Laman Utama: "Hari ini" */
/* Laman Utama (admin dashboard): key numbers in a row; today's classes and the branch table on the left,
   quick links, what needs attention and open issues on the right (one column on narrower screens) */
.hk-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;}
@media (max-width:1100px){.hk-grid{grid-template-columns:repeat(3,minmax(0,1fr));}.hk-hadir{grid-column:1 / -1;order:5;}}
@media (max-width:640px){.hk-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
/* Kehadiran diisi: two columns wide, a ring per centre spread evenly (green 81%+, yellow 51–80%, red 50% and below) */
.hk-hadir{grid-column:span 2;gap:10px;cursor:default;}
.hk-head{display:flex;flex-direction:column;align-items:center;gap:2px;}
.hk-warn{color:var(--amber-11);font-weight:600;}
.hk-rings{display:grid;grid-template-columns:repeat(auto-fit,minmax(68px,1fr));gap:4px;width:100%;}
.hk-ring{--ring:var(--green-9);display:flex;flex-direction:column;align-items:center;gap:2px;min-width:68px;padding:4px 4px 6px;border:0;border-radius:10px;background:none;
  font:inherit;color:inherit;cursor:pointer;}
.hk-ring.is-mid{--ring:var(--amber-9);}
.hk-ring.is-low{--ring:var(--red-9);}
@media (hover:hover){.hk-ring:hover{background:var(--gray-2);}}
.hk-ring:focus-visible{outline:2px solid var(--blue-9);outline-offset:1px;}
.hk-ring-svg{position:relative;width:56px;height:56px;}
.hk-ring-svg svg{width:100%;height:100%;transform:rotate(-90deg);}
.hk-ring-svg circle{fill:none;stroke-width:6;}
.hk-ring-bg{stroke:var(--gray-3);}
.hk-ring-fg{stroke:var(--ring);stroke-linecap:round;}
.hk-ring-svg strong{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--gray-12);}
.hk-ring-name{font-size:12px;font-weight:600;color:var(--gray-12);}
.hk-ring-sub{font-size:11px;color:var(--gray-10);}
.hk-ring.is-mid .hk-ring-sub{color:var(--amber-11);}
.hk-ring.is-low .hk-ring-sub{color:var(--red-11);}
/* Kemajuan bulan ini: the whole tile opens the details; Laporan bulanan (not built yet) is grey */
.hk-prog{font:inherit;color:inherit;border:0;cursor:pointer;width:100%;}
.hk-prog .hk-ring{cursor:inherit;}
@media (hover:hover){.hk-prog:hover{box-shadow:inset 0 0 0 1px var(--gray-8);}.hk-prog:hover .hk-ring:hover{background:none;}}
.hk-prog:focus-visible{outline:2px solid var(--blue-9);outline-offset:2px;}
.hk-ring.is-off{opacity:.55;cursor:default;}
/* Pengurusan Cawangan > Laporan Bulanan: the paper report, on screen and printed (A4) */
.lb-card{padding:18px 20px;}
.lb{color:var(--gray-12);font-size:12.5px;}
.lb-title{margin:0 0 12px;text-align:center;font-size:15px;font-weight:700;line-height:1.35;}
.lb-sec{padding:10px 0 12px;border-top:1px solid var(--line);}
.lb-sec h3{margin:0 0 8px;font-size:13px;font-weight:700;text-transform:uppercase;}
.lb-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start;}
.lb-cols > div{display:flex;flex-direction:column;gap:10px;}
.lb-cols-1{grid-template-columns:minmax(0,320px);}
.lb-t{width:100%;border-collapse:collapse;}
.lb-t th,.lb-t td{padding:3px 8px;border:1px solid var(--gray-7, #bbb);text-align:left;}
.lb-t th{background:var(--gray-12);color:var(--panel);font-weight:700;text-transform:uppercase;font-size:11.5px;}
.lb-t .r{text-align:right;font-variant-numeric:tabular-nums;}
.lb-t tr.lb-sum td{font-weight:700;}
.lb-t tr.lb-good td{background:var(--green-3, #e6f6eb);}
.lb-t tr.lb-bad td{background:var(--red-3, #fdecec);}
.lb-big{font-size:28px;font-weight:700;text-align:center !important;padding:12px !important;}
.lb-text{white-space:pre-wrap;text-align:center !important;min-height:40px;}
.lb-muted{color:var(--gray-10);}
.lb-pending{color:var(--amber-11);font-style:italic;}
.lb-sign{margin:14px 0 0;text-align:right;font-size:12px;line-height:1.5;}
.table tr.lb-diff td{background:var(--amber-3);}
@media (max-width:900px){.lb-cols{grid-template-columns:1fr;}}
.lb-print{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.lb-print .lb{color:#000;font-size:9.5pt;}
.lb-print .lb-t th,.lb-print .lb-t td{border-color:#000;}
.lb-print .lb-t th{background:#000;color:#fff;}
.lb-print .lb-sec{border-top:1px solid #000;}
.lb-print .lb-cols{grid-template-columns:repeat(3,minmax(0,1fr));}
.hp-sec{padding:12px 0;border-top:1px solid var(--line);}
.hp-sec:first-child{border-top:0;padding-top:0;}
.hp-title{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--gray-12);}
/* Bulanan (three rings) beside Tahunan (two), each with its name above; one under the other on a narrow screen. */
.hp-groups{display:grid;grid-template-columns:3fr 2fr;gap:12px 20px;}
.hp-group + .hp-group{padding-left:20px;border-left:1px solid var(--line);}
.hp-jenis{margin:0 0 6px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-11);}
@media(max-width:640px){.hp-groups{grid-template-columns:1fr;}.hp-group + .hp-group{padding-left:0;border-left:0;padding-top:10px;border-top:1px solid var(--line);}}
.hp-sec.is-off .hp-title{color:var(--gray-10);}
.hk-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:16px 18px;border-radius:14px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
  color:inherit;text-decoration:none;transition:box-shadow 150ms ease,transform 160ms var(--ease-out);}
@media (hover:hover){.hk-tile:hover{box-shadow:inset 0 0 0 1px var(--line-strong),var(--shadow-sm);}}
.hk-tile:active{transform:scale(.99);}
.hk-tile:focus-visible{outline:2px solid var(--blue-9);outline-offset:2px;}
.hk-label{display:flex;align-items:center;justify-content:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--gray-11);}
.hk-label .ph{color:var(--gray-9);}
.hk-num{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.15;color:var(--gray-12);}
.hk-sub{font-size:12px;color:var(--gray-10);}
.hk-tile.is-warn{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--amber-9) 45%,transparent),inset 3px 0 0 var(--amber-9);}
.hk-tile.is-warn .hk-num{color:var(--amber-11);}
.hk-tile.is-red{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--red-9) 40%,transparent),inset 3px 0 0 var(--red-9);}
.hk-tile.is-red .hk-num{color:var(--red-11);}
.hk-tile.is-ok .hk-num{color:var(--green-11);}
.hd-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start;}
@media (max-width:1180px){.hd-layout{grid-template-columns:minmax(0,1fr);}}
.hd-main,.hd-side{display:flex;flex-direction:column;gap:16px;min-width:0;}
.hd-head{flex-wrap:wrap;row-gap:10px;}
.hd-none{margin:0;padding:0 16px 16px;}
.hd-summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:0 16px 12px;font-size:13px;color:var(--gray-11);}
.hd-summary a{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--gray-11);text-decoration:none;}
.hd-summary a:hover{color:var(--gray-12);text-decoration:underline;}
.hd-sum-warn{color:var(--amber-11);font-weight:600;}
.hd-sum-ok{color:var(--green-11);font-weight:600;}
.hd-list{margin:0;padding:0 8px 10px;list-style:none;}
/* A row: time | class and guru | attendance | status | action. A thin line down the time column joins the day. */
.hd-row{position:relative;display:grid;grid-template-columns:92px minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) 136px;align-items:center;gap:18px;width:100%;padding:12px 10px;border:0;border-radius:10px;
  background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;}
.hd-list li+li .hd-row::before{content:"";position:absolute;left:10px;right:10px;top:0;height:1px;background:var(--line);}
@media (hover:hover){.hd-row:hover{background:var(--gray-2);}.hd-row:hover::before,.hd-list li:hover+li .hd-row::before{opacity:0;}}
.hd-row:focus-visible{outline:2px solid var(--blue-9);outline-offset:-2px;}
.hd-clock{display:flex;flex-direction:column;gap:1px;padding-left:12px;border-left:3px solid var(--gray-5);white-space:nowrap;}
.hd-clock strong{font-size:14px;font-weight:700;color:var(--gray-12);}
.hd-clock span{font-size:12px;color:var(--gray-10);}
.hd-row.is-now .hd-clock{border-left-color:var(--blue-9);}
.hd-row.is-todo .hd-clock{border-left-color:var(--amber-9);}
.hd-row.is-done .hd-clock{border-left-color:var(--green-9);}
.hd-row.is-off .hd-clock{border-left-color:var(--red-9);}
.hd-cls{display:flex;flex-direction:column;gap:3px;min-width:0;}
.hd-cls strong{font-size:15px;font-weight:650;letter-spacing:-.01em;color:var(--gray-12);overflow-wrap:anywhere;}
.hd-cls strong .code{margin-right:8px;vertical-align:1px;}
.hd-cls>span{font-size:12.5px;color:var(--gray-10);overflow-wrap:anywhere;}
.hd-flag{color:var(--red-11);font-weight:600;}
.hd-att{display:flex;flex-direction:column;gap:5px;min-width:0;max-width:160px;}
.hd-att-num{font-size:12.5px;color:var(--gray-10);white-space:nowrap;}
.hd-att-num strong{font-size:14px;color:var(--gray-12);}
.hd-att-num.is-zero strong{color:var(--amber-11);}
.hd-att-sub{font-size:11.5px;color:var(--gray-9);}
.hd-bar{position:relative;height:6px;border-radius:3px;background:var(--gray-3);overflow:hidden;}
.hd-bar span{position:absolute;inset:0 auto 0 0;border-radius:3px;background:var(--green-9);}
.hd-status{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;}
.hd-st{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;}
.hd-st::before{content:"";flex-shrink:0;width:6px;height:6px;border-radius:50%;background:currentColor;}
.hd-st.is-later{color:var(--gray-11);background:var(--gray-3);}
.hd-st.is-now{color:var(--blue-11);background:color-mix(in srgb,var(--blue-9) 13%,transparent);}
.hd-st.is-todo{color:var(--amber-11);background:color-mix(in srgb,var(--amber-9) 16%,transparent);}
.hd-st.is-done{color:var(--green-11);background:color-mix(in srgb,var(--green-9) 14%,transparent);}
.hd-st.is-off{color:var(--red-11);background:color-mix(in srgb,var(--red-9) 12%,transparent);}
.hd-st-sub{max-width:100%;padding-left:2px;font-size:11.5px;color:var(--gray-10);overflow-wrap:anywhere;}
.hd-go{justify-self:end;display:inline-flex;align-items:center;justify-content:center;gap:4px;width:136px;height:34px;padding:0 10px 0 14px;border-radius:8px;font-size:12.5px;font-weight:600;
  color:var(--gray-11);box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap;}
.hd-go.is-primary{color:var(--gray-1);background:var(--brand,var(--gray-12));box-shadow:none;}
@media (max-width:900px){
  .hd-row{grid-template-columns:64px minmax(0,1fr) auto;row-gap:10px;}
  .hd-go{width:auto;min-width:96px;}
  .hd-att{grid-column:2;}
  .hd-status{grid-column:2;}
  .hd-go{grid-column:3;grid-row:1;}
}
.hq-card{padding-bottom:6px;}
.hq-group{padding:0 16px 12px;}
.hq-label{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-10);}
.hi-branch{margin:0 0 10px;padding:8px 4px 2px;border-radius:10px;--hi:var(--red-9);background:color-mix(in srgb,var(--hi) 7%,var(--panel));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hi) 55%,transparent);}
.hi-branch.is-amber{--hi:var(--amber-9);}
.hi-head{display:flex;align-items:center;gap:8px;padding:0 8px 4px;font-size:13px;color:var(--gray-12);}
.hi-branch .ha-list{padding:0;gap:0;}
.hi-branch .ha-item{box-shadow:none;}
.hi-branch.is-red .ha-item strong{color:var(--red-11);}
.hi-branch.is-amber .ha-item strong{color:var(--amber-11);}
.hi-baik{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0;font-size:12.5px;color:var(--gray-10);}
.hi-baik .ph{color:var(--green-11);}
@media (prefers-reduced-motion:no-preference){.hi-branch{animation:hi-glow 2s ease-in-out infinite;}}
@keyframes hi-glow{50%{box-shadow:inset 0 0 0 1px var(--hi),0 0 12px 1px color-mix(in srgb,var(--hi) 60%,transparent);}}
.ha-list{margin:0;padding:0 8px 8px;list-style:none;display:flex;flex-direction:column;gap:4px;}
.ha-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:9px;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;
  box-shadow:inset 3px 0 0 var(--line-strong);}
.ha-item.is-warn{box-shadow:inset 3px 0 0 var(--amber-9);}
.ha-item.is-red{box-shadow:inset 3px 0 0 var(--red-9);}
.ha-text{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;}
.ha-item strong{font-size:13px;font-weight:650;color:var(--gray-12);}
.ha-item.is-red strong{color:var(--red-11);}
.ha-item.is-warn strong{color:var(--amber-11);}
.ha-sub{font-size:12px;color:var(--gray-10);overflow-wrap:anywhere;}
@media (hover:hover){.ha-item:hover{background:var(--gray-2);}}
.ha-item:focus-visible{outline:2px solid var(--blue-9);outline-offset:-2px;}
.hs-table tbody tr{cursor:pointer;}
.table.hs-table th:not(:first-child),.table.hs-table td:not(:first-child){text-align:center;}
@media (hover:hover){.hs-table tbody tr:hover td{background:var(--gray-2);}}
.hs-table tr.is-on td{background:color-mix(in srgb,var(--brand,var(--gray-12)) 6%,var(--panel));}
.hs-table tr.is-on td:first-child{box-shadow:inset 3px 0 0 var(--brand,var(--gray-12));}
.hs-name{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--gray-12);}
.hs-table td.hs-warn{color:var(--amber-11);font-weight:700;}
.hs-table td.hs-red{color:var(--red-11);font-weight:700;}
.hs-pill{display:inline-flex;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;}
.hs-pill.is-ok{color:var(--green-11);background:color-mix(in srgb,var(--green-9) 13%,transparent);}
.hs-pill.is-warn{color:var(--amber-11);background:color-mix(in srgb,var(--amber-9) 16%,transparent);}
.hs-pill.is-red{color:var(--red-11);background:color-mix(in srgb,var(--red-9) 12%,transparent);}
.quick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,136px),1fr));gap:8px;padding:0 16px 16px;}
.quick{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 12px;border-radius:10px;background:var(--gray-2);box-shadow:inset 0 0 0 1px var(--line);
  font-size:13px;font-weight:600;color:var(--gray-12);text-align:left;cursor:pointer;transition:box-shadow 150ms ease,transform 160ms var(--ease-out);}
.quick .ph{font-size:20px;color:var(--gray-11);flex-shrink:0;}
.quick:active{transform:scale(.98);}
@media (hover:hover){.quick:hover{box-shadow:inset 0 0 0 1px var(--line-strong),var(--shadow-sm);}}
.today-label{padding:0 16px 2px;font-size:12px;font-weight:600;color:var(--gray-10);text-transform:uppercase;letter-spacing:.04em;}
.today-time{min-width:96px;font-size:12px;font-weight:600;color:var(--gray-11);font-variant-numeric:tabular-nums;}
@media (max-width:520px){.today-time{min-width:0;}.list-row{flex-wrap:wrap;}}

/* Pengurusan Bayaran */
.by-tabs{margin:0 -2px;padding:2px;}
/* Capitals: the top tabs and branch bar (every page), and on Pengurusan Bayaran the month, the buttons by
   it, the section tabs and the month's lock line. */
.topic-tab,.branch-bar button,
.page-head:has(~ .by-tabs) .month-label,.page-head:has(~ .by-tabs) .btn,
.by-tabs button,.by-tabs ~ .notice{text-transform:uppercase;letter-spacing:.03em;font-weight:700;}
.by-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:8px;}
.by-tile{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:10px;background:var(--panel);box-shadow:var(--shadow-card);}
.by-tile-num{font-size:18px;font-weight:650;letter-spacing:-.01em;color:var(--gray-12);font-variant-numeric:tabular-nums;}
.by-tile-label{font-size:12px;color:var(--gray-11);}
.by-tile.is-alert .by-tile-num{color:var(--red-11);}
/* Petty cash: the opening line, and a baki below zero */
.table tr.pc-awal td{color:var(--gray-11);background:var(--gray-2);}
.table td.pc-neg{color:var(--red-11);font-weight:650;}
/* Import JSON preview */
.imp-sum{padding:10px 12px;border-radius:8px;background:var(--gray-2);font-size:13px;}
.imp-list{margin:8px 0 0;padding:0 0 0 18px;max-height:160px;overflow:auto;font-size:12px;color:var(--gray-11);}
.imp-list.is-bad{color:var(--red-11);}
/* Pengurusan Bayaran, Senarai pelajar: the year at a glance, one dot per month's fee status */
.sp-table th.sp-m,.sp-table td.sp-m{width:30px;min-width:30px;padding-left:2px!important;padding-right:2px!important;text-align:center;}
.sp-table td.sp-m.is-future{background:repeating-linear-gradient(135deg,transparent 0 4px,var(--gray-2) 4px 8px);}
.sp-dot{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:middle;background:var(--gray-5);}
.sp-dot[data-st="sudah"]{background:var(--green-9);}
.sp-dot[data-st="belum"]{background:var(--red-9);box-shadow:0 0 0 3px color-mix(in srgb,var(--red-9) 18%,transparent);}
.sp-dot[data-st="carry"]{background:var(--amber-9);}
.sp-dot[data-st="kurang"]{background:#f97316;}
.sp-dot[data-st="cuti"]{background:var(--gray-8);}
.sp-dot[data-st="pending"]{background:transparent;box-shadow:inset 0 0 0 2px var(--gray-8);}
.sp-dot.is-none{background:transparent;box-shadow:inset 0 0 0 1.5px var(--gray-6);}
.sp-table td.sp-m.is-before{background:var(--gray-2);}
/* Keseluruhan: every month since registration, wrapping, a year label at each January */
.sp-hist{display:flex;flex-wrap:wrap;align-items:center;gap:3px;min-width:220px;max-width:420px;}
.sp-hm{display:inline-flex;width:14px;height:16px;align-items:center;justify-content:center;}
.sp-hm .sp-dot{width:10px;height:10px;}
.sp-hm .sp-dot[data-st="belum"]{box-shadow:0 0 0 2px color-mix(in srgb,var(--red-9) 18%,transparent);}
.sp-yr{margin:0 2px 0 6px;font-size:10.5px;font-weight:600;color:var(--gray-10);font-variant-numeric:tabular-nums;}
.sp-yr:first-child{margin-left:0;}
.sp-subj{min-width:160px;max-width:260px;white-space:normal;}
.sp-chip{display:inline-block;margin:1px 3px 1px 0;padding:0 6px;border-radius:6px;font-size:11px;line-height:18px;color:var(--gray-11);background:var(--gray-3);}
.sp-stopped .cell-strong .name-btn{color:var(--gray-10);}
.sp-legend{display:inline-flex;flex-wrap:wrap;gap:4px 12px;}
.sp-legend>span{display:inline-flex;align-items:center;gap:5px;}
.by-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;}
@media (min-width:1100px){.by-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr);}}
.by-amt{color:var(--red-11);}
.by-status{height:30px;font-size:12.5px;font-weight:600;border-color:transparent;}
.by-status[data-st="sudah"],.by-pill[data-st="sudah"]{background-color:var(--green-3);color:var(--green-11);}
.by-status[data-st="belum"],.by-pill[data-st="belum"]{background-color:var(--red-3);color:var(--red-11);}
.by-status[data-st="carry"],.by-pill[data-st="carry"]{background-color:var(--amber-3);color:var(--amber-11);}
.by-status[data-st="cuti"],.by-pill[data-st="cuti"]{background-color:var(--gray-3);color:var(--gray-11);}
.by-pill[data-st="pending"]{background-color:var(--gray-3);color:var(--gray-11);}
.by-pill[data-dp="bayar"],.by-pill[data-dp="bawa"]{background:var(--green-3);color:var(--green-11);}
.by-pill[data-dp="kedepan"]{background:var(--blue-3);color:var(--blue-11);}
.by-pill[data-dp="belum"]{background:var(--red-3);color:var(--red-11);}
.by-pill[data-dp="pulang"]{background:var(--gray-3);color:var(--gray-11);}
.dp-note{margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;}
button.dp-note:not(:hover){text-decoration:none;}
.dp-note-text{color:var(--gray-11);}
.by-dp-one{text-align:center;font-size:12.5px;min-width:150px;}
.by-dp-one[data-act]{cursor:pointer;}
@media (hover:hover){.by-dp-one[data-act]:hover{background:var(--gray-3);}}
.by-dp-one[data-dp="bawa"]{color:var(--amber-11);}
.dp-belum{color:var(--red-11);font-weight:600;}
.by-dp-note{min-width:130px;max-width:200px;font-size:12.5px;}
/* Deposit already settled this year (paid another month / carried forward): one grey line, not applicable */
.by-sheet td.by-dp-na{background:repeating-linear-gradient(135deg,var(--gray-2) 0 6px,var(--gray-3) 6px 12px);color:var(--gray-10);font-size:12px;}
.dp-na-tag{display:inline-flex;align-items:center;gap:4px;margin-right:8px;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--gray-11);background:var(--panel);box-shadow:0 0 0 1px var(--line-strong);}
.dp-na-what{white-space:nowrap;}
/* Yuran pelajar as a sheet: gridlines, Yuran and Deposit heads over their columns */
.by-sheet{border-collapse:collapse;}
.by-sheet th,.by-sheet td{border:1px solid var(--line);}
/* Head in a slightly dark green, white text; the Yuran / Deposit heads a shade darker */
.by-sheet thead th{background:#2f7d55;color:#fff;font-weight:600;vertical-align:middle;border-color:rgba(255,255,255,.18)!important;}
.by-sheet .by-grp-h{text-align:center;font-weight:700;color:#fff;background:#25684a;border-bottom:1px solid rgba(255,255,255,.28)!important;}
.by-sheet .by-dp-start{border-left:2px solid var(--line-strong);}
.by-yuran thead tr:last-child th:nth-child(4),.by-sheet .by-grp-h+.by-grp-h{border-left:2px solid rgba(255,255,255,.5)!important;}
.by-sheet tr.is-year td{border-left:0;border-right:0;}
/* Everything centred, except the darjah / tingkatan band */
.by-sheet th,.by-sheet td,.by-sheet .num,.by-sheet .act{text-align:center!important;}
/* Heads and darjah / tingkatan bands in capitals */
.by-sheet thead th,.by-sheet tr.is-year td{text-transform:uppercase;letter-spacing:.03em;}
/* The darjah / tingkatan band: centred, bright green */
.by-sheet tr.is-year td{text-align:center!important;background:color-mix(in srgb,#4ade80 32%,var(--panel));color:var(--green-11);font-size:12.5px;font-weight:700;letter-spacing:.02em;
  border-top:1px solid color-mix(in srgb,#4ade80 60%,var(--panel));border-bottom:1px solid color-mix(in srgb,#4ade80 60%,var(--panel));}
.by-sheet .by-acts{justify-content:center;}
.by-sheet select.input{margin:0 auto;text-align:center;text-align-last:center;}
/* Bil menu: Keluarkan / Tambah pelajar */
.cell-menu{position:fixed;z-index:70;min-width:240px;padding:6px;border-radius:10px;background:var(--panel);box-shadow:0 0 0 1px var(--line-strong),0 12px 32px rgba(0,0,0,.16);animation:mp-in .12s ease-out;}
.cell-menu button{display:flex;align-items:flex-start;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:7px;background:transparent;font:inherit;font-size:13px;font-weight:600;color:var(--gray-12);text-align:left;cursor:pointer;}
.cell-menu button .ph{margin-top:2px;color:var(--gray-10);}
.cell-menu button small{display:block;font-size:11.5px;font-weight:400;color:var(--gray-10);}
.cell-menu button[data-act="by-remove"] .ph{color:var(--red-11);}
@media (hover:hover){.cell-menu button:hover{background:var(--gray-3);}}
.cell-menu button:focus-visible{outline:2px solid var(--gray-9);outline-offset:-2px;}
/* A box that edits just its own item */
/* Yuran pelajar: only the Bayaran box shows what was paid: belum glows red, kurang amber, sudah green (still) */
.by-yuran tr.by-row[data-st="belum"] td.by-amt-cell{background-color:color-mix(in srgb,var(--red-9) 12%,var(--panel));}
@media (prefers-reduced-motion:no-preference){.by-yuran tr.by-row[data-st="belum"] td.by-amt-cell{animation:by-glow 1.8s ease-in-out infinite;}}
@keyframes by-glow{50%{background-color:color-mix(in srgb,var(--red-9) 30%,var(--panel));}}
.by-yuran tr.by-row[data-st="kurang"] td.by-amt-cell{background-color:color-mix(in srgb,var(--amber-9) 18%,var(--panel));}
.by-yuran tr.by-row[data-st="sudah"] td.by-amt-cell{background-color:color-mix(in srgb,var(--green-9) 16%,var(--panel));}
.by-amt-cell{min-width:150px;}
.by-fee{font-weight:600;font-variant-numeric:tabular-nums;color:var(--gray-12);}
.by-docs{padding:4px 6px!important;}
.by-fee[data-act]{cursor:pointer;}
@media (hover:hover){.by-fee[data-act]:hover{background:var(--gray-3);}}
.by-set{font-size:12px;font-weight:600;color:var(--blue-11);}
.by-doc{display:flex;align-items:baseline;justify-content:center;gap:6px;padding:3px 6px;border-radius:6px;font-size:12.5px;}
.by-doc{min-height:22px;}
.by-doc-add{font-size:11.5px;}
.by-cat{min-width:160px;}
.by-cat{text-align:center;}
.by-cat-row{display:flex;align-items:center;justify-content:center;gap:6px;}
.by-semak{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:6px;border:1px solid var(--gray-7);background:var(--panel);color:transparent;cursor:pointer;}
.by-semak.is-on{background:var(--green-9);border-color:var(--green-9);color:#fff;}
@media (hover:hover){.by-semak:not(.is-on):hover{color:var(--gray-9);background:var(--gray-3);}}
.by-cat-note{min-height:24px;padding:3px 6px;border:0;border-radius:6px;background:none;text-align:center;font:inherit;font-size:12.5px;color:var(--gray-12);cursor:pointer;}
.by-cat-note .muted{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;}
@media (hover:hover){.by-cat-note:hover{background:var(--gray-3);}}
.by-cat-text{font-size:12.5px;}
.by-doc[data-act]{cursor:pointer;}
@media (hover:hover){.by-doc[data-act]:hover{background:var(--gray-3);}}
.by-paid{font-weight:650;font-variant-numeric:tabular-nums;color:var(--gray-12);}
.by-paid.is-none{color:var(--red-11);}
.doc-shared{display:inline-flex;align-items:center;gap:4px;padding:1px 6px;border-radius:6px;font-weight:600;color:var(--blue-11);background:color-mix(in srgb,var(--blue-9) 14%,var(--panel));box-shadow:0 0 0 1px color-mix(in srgb,var(--blue-9) 35%,transparent);}
@media (prefers-reduced-motion:no-preference){.doc-shared{animation:doc-glow 2s ease-in-out infinite;}}
@keyframes doc-glow{50%{box-shadow:0 0 0 1px color-mix(in srgb,var(--blue-9) 35%,transparent),0 0 10px color-mix(in srgb,var(--blue-9) 45%,transparent);}}
.doc-shared-n{font-size:10.5px;font-weight:700;opacity:.8;}
.doc-shared-hint{color:var(--blue-11);}
.by-paid-date{margin-right:8px;font-weight:400;font-size:12px;color:var(--gray-11);}
.by-note{margin-top:2px;font-size:11.5px;font-weight:600;line-height:1.35;white-space:normal;color:var(--gray-11);}
.by-note.is-belum{color:var(--red-11);}
.by-note.is-kurang{color:var(--amber-11);}
.by-note.is-lebih{color:var(--blue-11);}
.by-note.is-kredit{color:var(--green-11);}
.by-sheet td[data-act]{cursor:pointer;transition:background-color .12s;}
@media (hover:hover){.by-sheet td[data-act]:hover{background:var(--gray-3);box-shadow:inset 0 0 0 1px var(--line-strong);}}
.by-sheet td[data-act]:focus-visible{outline:2px solid var(--gray-9);outline-offset:-2px;}
.dp-acts,.by-acts{display:inline-flex;gap:6px;justify-content:flex-end;white-space:nowrap;}
.by-pill{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;}
.by-total{padding:10px 12px;border-radius:8px;background:var(--gray-2);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;color:var(--gray-11);}
.by-total strong{color:var(--gray-12);font-variant-numeric:tabular-nums;}
.by-pays{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;font-size:13px;}
.by-pays li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:6px;background:var(--gray-2);}
.by-report td.is-sum{font-weight:600;color:var(--gray-12);}
.by-report tr.is-now td{background:var(--gray-2);}
/* Komisen Tutor CFS: red until every tutor of the branch is Disahkan, then green */
.by-report td.is-komisen-draf,.by-report tr.is-now td.is-komisen-draf{background:color-mix(in srgb,var(--red-9) 16%,transparent);color:var(--red-11);font-weight:600;}
.by-report td.is-komisen-sah,.by-report tr.is-now td.is-komisen-sah{background:color-mix(in srgb,var(--green-9) 18%,transparent);color:var(--green-11);font-weight:600;}
/* Duit keluar months open their records: shown as links. */
.by-report .name-btn{color:var(--green-11, #2f7a4b);text-decoration-color:currentColor;text-decoration-style:dotted;}
.by-report .name-btn:hover{text-decoration-style:solid;}
.kb-tiles{margin-bottom:12px;}

/* Laporan kewangan (print / PDF) */
.pr{display:flex;flex-direction:column;gap:8px;color:#000;font-family:Arial,Helvetica,sans-serif;}
.pr-t{width:100%;border-collapse:collapse;table-layout:fixed;font-size:6.8pt;break-inside:avoid;}
.pr-t th,.pr-t td{padding:1.5px 3px;border:1px solid #000;text-align:center;overflow-wrap:anywhere;}
.pr-t th{font-weight:700;}
.pr-t .pr-title{font-size:10pt;padding:4px;}
.pr-t.pr-l{table-layout:auto;font-size:8.5pt;break-inside:auto;}
.pr-l th,.pr-l td{padding:3px 4px;overflow-wrap:normal;}
.pr-l .nowrap{white-space:nowrap;}
.pr-t.pr-yuran,.pr-t.pr-petty{table-layout:fixed;}
.pr-t .pr-head{font-weight:400;line-height:1.35;}
.pr-t .pr-head strong{font-size:12pt;}
.pr-l tr{break-inside:avoid;}
.pr-l .l{text-align:left;}
.pr-l .r{text-align:right;}

/* Payroll Guru (print / PDF): Penyata Bayaran and Ringkasan, laid out as documents */
.pv-doc{color:#1b1f1c;font-family:"DM Sans",Arial,Helvetica,sans-serif;font-size:9pt;line-height:1.4;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.pv{display:flex;flex-direction:column;gap:14pt;}
.pv+.pv{break-before:page;}
.pv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16pt;padding-bottom:10pt;border-bottom:2pt solid #315b45;}
.pv-brand{display:flex;align-items:center;gap:12pt;}
.pv-brand img{display:block;width:118pt;height:auto;}
.pv-brand div{display:flex;flex-direction:column;font-size:8pt;color:#666;}
.pv-brand strong{font-size:9.5pt;color:#1b1f1c;}
.pv-title{text-align:right;}
.pv-title h1{margin:0 0 6pt;font-size:15pt;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#315b45;}
.pv-title dl{display:grid;grid-template-columns:auto auto;justify-content:end;gap:1pt 10pt;margin:0;font-size:8.5pt;}
.pv-title dt{color:#777;}
.pv-title dd{margin:0;font-weight:600;text-align:left;}
.pv-stamp{display:inline-block;margin-top:7pt;padding:2pt 8pt;border:1pt solid #b45309;border-radius:3pt;font-size:7.5pt;font-weight:700;letter-spacing:.08em;color:#b45309;}
.pv-parties{display:grid;grid-template-columns:repeat(3,1fr);gap:10pt;}
.pv-parties>div{padding:8pt 10pt;border:1pt solid #dde2dc;border-radius:4pt;break-inside:avoid;}
.pv-parties p{margin:0;}
.pv-parties h2,.pv-section>h2{margin:0 0 5pt;font-size:7.5pt;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#777;}
.pv-strong{font-size:10.5pt;font-weight:700;}
.pv-parties .pv-due{border-color:#315b45;background:#eef3ee;}
.pv-big{font-size:17pt;font-weight:700;line-height:1.2;color:#315b45;}
.pv-t{width:100%;border-collapse:collapse;}
.pv-t th{padding:4pt 6pt;font-size:7.5pt;font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-align:left;color:#555;background:#f1f4f0;border-bottom:1pt solid #c9d1c8;}
.pv-t td{padding:4pt 6pt;vertical-align:top;border-bottom:.5pt solid #e1e5e0;}
.pv-t tr{break-inside:avoid;}
.pv-t .pv-group td{padding-top:9pt;font-weight:700;color:#315b45;border-bottom:1pt solid #c9d1c8;}
.pv-t .pv-sub td{font-weight:600;background:#f8faf7;}
.pv-t .pv-grand-row td{font-size:10pt;font-weight:700;border-top:1.5pt solid #315b45;}
.pv-n{width:20pt;color:#888;}
.pv-c{text-align:center !important;white-space:nowrap;}
.pv-r{text-align:right !important;white-space:nowrap;font-variant-numeric:tabular-nums;}
.pv-dim{display:block;font-size:8pt;font-weight:400;letter-spacing:0;text-transform:none;color:#777;}
.pv-calc{font-size:8pt;color:#555;}
.pv-calc span{display:block;color:#b45309;}
.pv-foot{display:flex;justify-content:space-between;align-items:flex-start;gap:24pt;break-inside:avoid;}
.pv-note{flex:1;margin:0;font-size:7.5pt;line-height:1.5;color:#777;}
.pv-totals{width:210pt;border-collapse:collapse;font-size:9pt;}
.pv-totals td{padding:3pt 6pt;}
.pv-totals td:last-child{text-align:right;font-variant-numeric:tabular-nums;}
.pv-totals .pv-grand td{padding-top:6pt;border-top:1.5pt solid #315b45;font-size:11.5pt;font-weight:700;color:#315b45;}
.pv-sign{display:grid;grid-template-columns:1fr 1fr;gap:48pt;margin-top:30pt;break-inside:avoid;}
.pv-sign div{padding-top:5pt;border-top:.75pt solid #333;}
.pv-sign p{margin:0;font-weight:600;}
.pv-sign .pv-dim{font-weight:400;}
.pv-annex-head{padding-bottom:8pt;border-bottom:2pt solid #315b45;}
.pv-annex-head h2{margin:0;font-size:13pt;color:#315b45;}
.pv-annex-head p{margin:2pt 0 0;font-size:8pt;color:#777;}
.pv-class{break-inside:avoid;}
.pv-class h3{margin:0 0 4pt;font-size:10pt;}
.pv-class h3 span{font-weight:400;color:#666;}
.pv-att td,.pv-att th,.pv-att .pv-n{padding:3pt 5pt;border:.5pt solid #c9d1c8;text-align:center;}
.pv-att .pv-r{text-align:center !important;}
/* Ringkasan Komisen: every column centred, with lines between the columns */
.pv-ringkasan th,.pv-ringkasan td{border:.5pt solid #c9d1c8;text-align:center;vertical-align:middle;}
.pv-ringkasan .pv-r{text-align:center !important;}
.pv-att .pv-off{font-size:7.5pt;color:#999;}
.pv-att .pv-absent{font-weight:700;color:#b91c1c;background:#fdecec;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.pv-att .pv-present{color:#1a7049;background:#e8f6ec;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.pv-calc-line{margin:4pt 0 0;font-size:8pt;color:#555;}

/* Borang Pendaftaran (screen) */
.daftar{display:flex;flex-direction:column;gap:16px;min-width:0;margin:0;padding:0;border:0;}
.card-pad{padding:0 16px 16px;}
.radio-row{display:flex;flex-wrap:wrap;gap:4px 12px;}
.checkbox[type="radio"]{border-radius:50%;}
.tinjauan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:2px 12px;}
.daftar-branch{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px;font-size:13px;}
.daftar-hr{margin:20px 0 16px;border:0;border-top:1px dashed var(--line-strong);}
.pf + .pf{break-before:page;}
.daftar-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;}
.table tr.fee-total td{font-weight:650;color:var(--gray-12);background:var(--gray-2);}

/* Borang Pendaftaran (print / PDF): the paper form, black on white */
#print-area{display:none;}
@media print{
  @page{size:A4;margin:10mm 12mm;}
  html,body{background:#fff !important;}
  body > :not(#print-area){display:none !important;}
  #print-area{display:block !important;}
}
.pf{color:#000;font-family:"Times New Roman",Times,serif;font-size:10.5pt;line-height:1.25;}
.pf-top{text-align:right;font-size:7.5pt;font-style:italic;color:#555;}
.pf-ids{display:flex;justify-content:space-between;gap:24px;margin:4px 0 12px;}
.pf-box{flex:0 1 44%;min-height:24px;padding:3px 6px;border:1px solid #000;font-size:9pt;}
.pf-title{margin:4px 0 0;text-align:center;font-size:15pt;font-weight:700;}
.pf-sub{margin:0 0 6px;text-align:center;font-size:12pt;font-weight:700;}
.pf-h{margin:12px 0 4px;font-size:11pt;font-weight:700;}
.pf-t{width:100%;border-collapse:collapse;table-layout:fixed;}
.pf-t td,.pf-t th{height:19px;padding:2px 5px;border:1px solid #000;vertical-align:middle;font-size:10pt;overflow-wrap:anywhere;}
.pf-t .c{text-align:center;}
.pf-t .r{text-align:right;}
.pf-on{font-weight:700;}
.pf-cb{display:inline-block;width:11px;height:11px;margin-right:4px;border:1px solid #000;font-size:9px;line-height:10px;text-align:center;vertical-align:-1px;}
.pf-survey{padding:4px 8px 6px;border:1px solid #000;}
.pf-survey-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;margin-top:4px;padding-left:6px;}
.pf-hr{margin:18px 0 8px;border:0;border-top:1px solid #000;}
.pf-fee-title{margin:0 0 4px;text-align:center;font-size:11pt;font-weight:700;}
.pf-fee td{height:34px;}
.pf-note{font-size:8pt;}

/* Senarai Pelajar */
.name-btn{font:inherit;font-weight:600;color:var(--gray-12);text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color 150ms ease;}
@media (hover:hover){.name-btn:hover{text-decoration-color:var(--gray-8);}}
.wa-link{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none;}
.wa-link .ph{font-size:16px;color:var(--green-9);}
@media (hover:hover){.wa-link:hover{text-decoration:underline;}}

/* ---------- Jadual Cawangan ----------
   Card colours (warnaOf): SK light green, SMK dark green, kelas cadangan yellow, needs a teacher red (glowing),
   private centre / home tuition orange. A full class (12 students) glows in its own colour. The dot + label shows the teacher. */
[data-warna="sk"]{--c:var(--green-9);--ct:var(--green-11);}
[data-warna="smk"]{--c:#1e7a4d;--ct:var(--green-11);}
[data-warna="cadangan"]{--c:#e2b400;--ct:#7a5c00;}
[data-warna="perlu"]{--c:var(--red-9);--ct:var(--red-11);}
[data-warna="private"]{--c:var(--orange-9);--ct:var(--orange-11);}
[data-guru="ada"]{--g:var(--green-9);--gt:var(--green-11);}
[data-guru="perlu"]{--g:var(--red-9);--gt:var(--red-11);}
/* SMK: a slightly darker green than SK. */
.kls[data-warna="smk"]{background:color-mix(in srgb,var(--c) 36%,var(--panel));}
@media (hover:hover){button.kls[data-warna="smk"]:hover{background:color-mix(in srgb,var(--c) 44%,var(--panel));}}
.kls[data-warna="cadangan"]{background:color-mix(in srgb,var(--c) 18%,var(--panel));}
/* A class that needs a teacher glows red, a full class glows: one pulse every 1.4s (as the other alerts). */
.kls[data-penuh],.kls[data-warna="perlu"]{animation:kls-glow 1.4s ease-in-out infinite;}
/* Home tuition with no transport charge: a fast red flash, over any other glow. */
[data-caj]{animation:jd-caj .5s ease-in-out infinite!important;}
.jd-k[data-caj]{animation:none!important;}
.jd-k[data-caj] .pj-kls{animation:jd-caj .5s ease-in-out infinite!important;}
@keyframes jd-caj{0%,100%{box-shadow:inset 0 0 0 2px var(--red-9);background-color:color-mix(in srgb,var(--red-9) 12%,var(--panel));}50%{box-shadow:inset 0 0 0 2px var(--red-9),0 0 14px 3px var(--red-9);background-color:color-mix(in srgb,var(--red-9) 42%,var(--panel));}}
@media (prefers-reduced-motion:reduce){[data-caj],.jd-k[data-caj] .pj-kls{animation:none!important;box-shadow:inset 0 0 0 2px var(--red-9);background-color:color-mix(in srgb,var(--red-9) 25%,var(--panel));}}
@keyframes kls-glow{
  0%,100%{box-shadow:inset var(--edge,3px) 0 0 var(--c),inset 0 0 0 1px color-mix(in srgb,var(--c) 28%,transparent),0 0 0 0 color-mix(in srgb,var(--c) 0%,transparent);}
  50%{box-shadow:inset var(--edge,3px) 0 0 var(--c),inset 0 0 0 1px var(--c),0 0 0 3px color-mix(in srgb,var(--c) 40%,transparent),0 0 16px color-mix(in srgb,var(--c) 60%,transparent);}
}
@media (prefers-reduced-motion:reduce){.kls[data-penuh],.kls[data-warna="perlu"]{animation:none;box-shadow:inset var(--edge,3px) 0 0 var(--c),inset 0 0 0 1px var(--c),0 0 0 3px color-mix(in srgb,var(--c) 35%,transparent);}}
/* Slot: days across, time slots down; the same slot is one row across every day */
.jd-grid-card .scroll-x{padding:0 16px 16px;}
.jd-grid{width:100%;min-width:calc(110px + var(--days) * 180px);table-layout:fixed;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-bottom:0;}
.jd-grid th,.jd-grid td{padding:8px;vertical-align:top;border-bottom:1px solid var(--line);}
.jd-grid td+td,.jd-grid th+th,.jd-grid th+td{border-left:1px solid var(--line);}
.jd-grid thead th{text-align:left;background:var(--gray-2);border-bottom:1px solid var(--line-strong);}
.jd-grid tbody tr:nth-child(even) th,.jd-grid tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--gray-2) 60%,transparent);}
.jd-grid tbody tr:hover th,.jd-grid tbody tr:hover td{background:var(--gray-2);}
.jd-corner{width:110px;font-size:12px;font-weight:500;color:var(--gray-10);}
.jd-day-col .jd-day-name,.jd-day-col .jd-day-count{display:block;}
.jd-day-col.is-weekend .jd-day-name{color:var(--blue-11);}
.jd-day-name{font-size:14px;font-weight:600;letter-spacing:-.01em;}
.jd-day-count{font-size:12px;font-weight:400;color:var(--gray-10);}
.jd-slot-time{text-align:left;font-size:12px;font-weight:600;color:var(--gray-11);font-variant-numeric:tabular-nums;white-space:nowrap;}
.jd-cell .kls+.kls{margin-top:6px;}
.jd-cell.is-empty::after{content:"–";color:var(--gray-8);font-size:12px;}
.kls{display:flex;flex-direction:column;gap:3px;width:100%;min-width:0;padding:8px 10px 8px 12px;border-radius:8px;text-align:left;
  background:color-mix(in srgb,var(--c) 11%,var(--panel));
  box-shadow:inset var(--edge,3px) 0 0 var(--c),inset 0 0 0 1px color-mix(in srgb,var(--c) 28%,transparent);
  transition:transform 160ms var(--ease-out),background-color 150ms ease;}
button.kls:active{transform:scale(.98);}
.kls-name{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:13px;font-weight:600;color:var(--gray-12);overflow-wrap:anywhere;}
.kls-guru{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--gray-11);overflow-wrap:anywhere;}
.kls-guru::before{content:"";width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--g);}
.kls-guru.is-flag{font-weight:600;color:var(--gt);}
.kls-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px;}
.kls-tag{display:inline-flex;align-items:center;height:17px;padding:0 5px;border-radius:4px;font-size:10.5px;font-weight:600;color:var(--ct);background:color-mix(in srgb,var(--c) 16%,transparent);}
.kls-tag.is-plain{color:var(--gray-11);background:color-mix(in srgb,var(--gray-12) 8%,transparent);}
.kls-note{font-size:11.5px;color:var(--gray-10);overflow-wrap:anywhere;}
.stamp{font-size:12px;color:var(--gray-10);}

/* ---------- Status Kelas & Kehadiran ---------- */
.kl-table td{white-space:nowrap;}
/* Same column widths in every day's table, so the days line up down the page */
/* Kelas and Masa: the same width as a session column (M1–M4) */
.kl-table th:nth-child(1),.kl-table th:nth-child(2){width:160px;min-width:160px;max-width:160px;}
.kl-table th:nth-child(3){width:20%;}
.kl-table th:nth-child(4){width:8%;}
.kl-table tbody tr{cursor:pointer;}
.kl-table a{font-weight:600;color:var(--gray-12);text-decoration:none;}
.sesi-th{text-align:center!important;min-width:96px;}
/* Status Kelas / Kehadiran: every session column the same width */
.kl-table th.sesi-th{width:160px;min-width:160px;max-width:160px;}
.sesi-th span{display:block;font-weight:400;color:var(--gray-10);}
.sesi-th.is-today{color:var(--gray-12)!important;box-shadow:inset 0 -2px 0 var(--gray-12);}
.sesi-td{text-align:center;}
.sesi-tarikh{display:block;margin-bottom:4px;font-size:11.5px;color:var(--gray-10);white-space:nowrap;font-variant-numeric:tabular-nums;}
.sesi-tarikh.is-today{color:var(--gray-12);font-weight:600;}
.kh-table{border-collapse:separate;border-spacing:0;}
.kh-table th,.kh-table td{border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line);vertical-align:middle;text-align:center!important;}
.kh-table th:last-child,.kh-table td:last-child{border-right:0;}
.kh-table tbody tr:last-child td{border-bottom:0;}
.kh-table .sesi-td{height:72px;padding:10px;white-space:normal;}
.kh-table .sesi-td .pill{height:auto;min-height:20px;white-space:normal;line-height:1.4;padding:3px 8px;}
.kh-table td.kh-complete,.kh-table tbody tr:hover td.kh-complete{background:var(--gray-6);color:var(--gray-11);box-shadow:none;}
/* Jadual, Format lama: the old timetable sheet */
.fl-card{overflow:hidden;}
.fl-card .scroll-x{padding:0 16px 16px;}
.fl-table{width:100%;min-width:960px;border-collapse:separate;border-spacing:0;font-size:12.5px;border:1px solid var(--gray-5);border-bottom:0;}
.fl-table th,.fl-table td{padding:6px 10px;height:30px;white-space:nowrap;border-bottom:1px solid var(--gray-4);}
/* Head: each slot's SK time over its SMK time */
.fl-table thead th{position:sticky;top:0;z-index:1;background:color-mix(in srgb,var(--orange-9) 9%,var(--panel));border-bottom:1px solid var(--gray-6);text-align:center;}
.fl-slot{border-left:2px solid var(--gray-5);}
.fl-time{display:block;font-weight:650;color:var(--gray-12);font-variant-numeric:tabular-nums;}
.fl-time.is-smk{font-weight:500;font-size:11.5px;color:var(--gray-10);}
.fl-time.is-none{color:var(--gray-8);}
.fl-corner{width:92px;}
.fl-tag{display:block;width:max-content;margin:0 auto;padding:0 7px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--green-11);background:color-mix(in srgb,var(--green-9) 14%,transparent);}
.fl-tag.is-smk{margin-top:3px;color:var(--gray-11);background:var(--gray-3);}
/* Days down the side, sticky while scrolling sideways */
.fl-day{position:sticky;left:0;z-index:1;text-align:left;vertical-align:top;padding:10px 12px!important;background:var(--panel);border-right:1px solid var(--gray-5);}
.fl-day-name{display:block;font-weight:700;color:var(--gray-12);}
.fl-day-n{display:block;margin-top:2px;font-size:11px;font-weight:400;color:var(--gray-10);}
.fl-table tbody tr.fl-day-start>*{border-top:2px solid var(--gray-6);}
.fl-table tbody tr:first-child>*{border-top:0;}
/* A class: its name (with a coloured bar) and its tutor read as one block */
.fl-table td.fl-kelas{border-left:2px solid var(--gray-5);}
.fl-table td.fl-guru,.fl-table td.fl-empty:not(.fl-kelas){border-left:1px solid var(--gray-4);}
.fl-table td[data-warna]{background:color-mix(in srgb,var(--c) 13%,var(--panel));color:var(--gray-12);transition:background-color .12s;}
.fl-table td.fl-kelas[data-warna]{box-shadow:inset 3px 0 0 var(--c);}
.fl-name{font-weight:650;}
.fl-n{display:inline-block;min-width:18px;margin-left:6px;padding:0 5px;border-radius:999px;font-size:10.5px;font-weight:600;text-align:center;color:var(--ct);background:color-mix(in srgb,var(--c) 18%,transparent);font-variant-numeric:tabular-nums;}
.fl-guru{color:var(--gray-11)!important;font-size:12px;}
.fl-table .fl-guru.is-flag{color:var(--red-11)!important;font-weight:600;}
.fl-table td.fl-empty{background:var(--gray-1);}
/* A full class (12 active students) or one needing a teacher pulses in its colour, as in the other views. */
.fl-table td[data-penuh],.fl-table td[data-warna="perlu"]{animation:fl-glow 1.4s ease-in-out infinite;}
.fl-table td.fl-kelas[data-penuh],.fl-table td.fl-kelas[data-warna="perlu"]{animation-name:fl-glow-bar;}
@keyframes fl-glow{
  0%,100%{background-color:color-mix(in srgb,var(--c) 13%,var(--panel));box-shadow:inset 0 0 0 0 transparent;}
  50%{background-color:color-mix(in srgb,var(--c) 34%,var(--panel));box-shadow:inset 0 0 12px color-mix(in srgb,var(--c) 55%,transparent);}
}
@keyframes fl-glow-bar{
  0%,100%{background-color:color-mix(in srgb,var(--c) 13%,var(--panel));box-shadow:inset 3px 0 0 var(--c);}
  50%{background-color:color-mix(in srgb,var(--c) 34%,var(--panel));box-shadow:inset 3px 0 0 var(--c),inset 0 0 12px color-mix(in srgb,var(--c) 55%,transparent);}
}
@media (prefers-reduced-motion:reduce){.fl-table td[data-penuh],.fl-table td[data-warna="perlu"]{animation:none;background-color:color-mix(in srgb,var(--c) 28%,var(--panel));}}
.fl-table td[data-act]{cursor:pointer;}
/* Jadual > Format lama: the Perancangan Jadual sheet, each class in its Jadual colour (a bar on the left); a full
   class or one needing a teacher pulses, as in the other views. */
.jd-lama .jd-k .pj-kls{align-items:flex-start;text-align:left;padding:3px 8px 3px 10px;background:color-mix(in srgb,var(--c) 14%,var(--panel));box-shadow:inset 3px 0 0 var(--c);}
.jd-lama .jd-k[data-warna="smk"] .pj-kls{background:color-mix(in srgb,var(--c) 26%,var(--panel));}
.jd-lama .jd-k .pj-nama{display:flex;align-items:center;gap:4px;}
.jd-lama .jd-k .fl-n{margin-left:2px;}
.jd-lama .pj-sub.is-flag{color:var(--red-11);font-weight:600;}
.jd-lama .jd-k[data-penuh] .pj-kls,.jd-lama .jd-k[data-warna="perlu"] .pj-kls{animation:fl-glow-bar 1.4s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){.jd-lama .jd-k[data-penuh] .pj-kls,.jd-lama .jd-k[data-warna="perlu"] .pj-kls{animation:none;background-color:color-mix(in srgb,var(--c) 28%,var(--panel));}}
.pj-table.jd-lama tbody th,.pj-table.jd-lama tbody td{height:52px;}
@media (hover:hover){.fl-table td.fl-kelas[data-act]:hover,.fl-table td.fl-kelas[data-act]:hover+td,.fl-table td.fl-kelas[data-act]:has(+td:hover),.fl-table td.fl-guru[data-act]:hover{background:color-mix(in srgb,var(--c) 26%,var(--panel));}}
/* Private classes with their own dates: each session a small block (date above its status) */
/* Class dialog: tick the dates of a private class */
.date-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:4px;margin-top:6px;}
.date-tick{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:6px;font-size:12.5px;cursor:pointer;background:var(--gray-2);}
.date-tick:has(input:checked){background:color-mix(in srgb,var(--amber-9) 16%,transparent);}
.kelas-subjek{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}
.kelas-subjek .date-tick{align-items:flex-start;}
.kelas-subjek small{color:var(--gray-11);font-size:11px;}
/* Status Kelas: one status picker per session */
.sesi-select{height:28px;min-width:104px;padding:0 24px;font-size:12px!important;background-position:right 6px center;text-align:center;text-align-last:center;}
.sesi-count{display:block;margin-top:2px;font-size:11.5px;color:var(--gray-10);font-variant-numeric:tabular-nums;}
.pill{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap;color:var(--gray-11);background:var(--gray-3);}
.pill[data-sesi="jalan"]{color:var(--green-11);background:color-mix(in srgb,var(--green-9) 14%,transparent);}
.pill[data-sesi="batal"]{color:var(--red-11);background:color-mix(in srgb,var(--red-9) 14%,transparent);}
.pill[data-sesi="tunda"]{color:var(--amber-11);background:color-mix(in srgb,var(--amber-9) 16%,transparent);}
.pill[data-sesi="semula"]{color:var(--blue-11);background:color-mix(in srgb,var(--blue-9) 14%,transparent);}
.pill[data-sesi="jadual"]{color:var(--amber-11);background:color-mix(in srgb,var(--amber-9) 16%,transparent);}
.pill[data-sesi="diganti"]{color:var(--amber-11);background:color-mix(in srgb,#f97316 16%,transparent);}
/* A session column that ran is tinted green (no glow). One that needs attention glows, one pulse every 1.4s
   (as the duplicate alert): orange = taught by a guru ganti, red = Batal or Ditunda without a new date yet. */
.sesi-tint-green{background-color:color-mix(in srgb,var(--green-9) 22%,transparent);}
.sesi-tint-amber{background-color:color-mix(in srgb,var(--amber-9) 20%,transparent);}
.sesi-glow-orange{--glow:#f97316;animation:sesi-glow 1.4s ease-in-out infinite;}
.sesi-glow-red{--glow:var(--red-9);animation:sesi-glow 1.4s ease-in-out infinite;}
@keyframes sesi-glow{
  0%,100%{background-color:color-mix(in srgb,var(--glow) 7%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--glow) 25%,transparent);}
  50%{background-color:color-mix(in srgb,var(--glow) 24%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--glow) 70%,transparent),inset 0 0 14px color-mix(in srgb,var(--glow) 45%,transparent);}
}
@media (prefers-reduced-motion:reduce){.sesi-glow-orange,.sesi-glow-red{animation:none;background-color:color-mix(in srgb,var(--glow) 16%,transparent);}}
.sesi-ganti.is-guru{color:var(--amber-11);}
/* Private class: the session's own time, two boxes side by side; amber once it differs from Jadual */
.sesi-masa{color:var(--gray-10);}
.sesi-masa.is-ubah,.sesi-count.is-ubah{color:var(--amber-11);font-weight:600;}
.sesi-masa-row{display:flex;gap:4px;}
.sesi-masa-row .input{flex:1 1 0;min-width:0;padding:0 2px;}
/* Session status picker; Ditunda adds "Diganti pada" with a date underneath */
.sesi-pick{display:flex;flex-direction:column;align-items:stretch;gap:4px;min-width:136px;}
.sesi-ganti{display:flex;flex-direction:column;gap:2px;font-size:11px;font-weight:500;color:var(--amber-11);text-align:center;}
.sesi-ganti .input{height:28px;padding:0 6px;font-size:12px !important;text-align:center;}
.sesi-select[data-sesi="jalan"]{color:var(--green-11);font-weight:600;}
.sesi-select[data-sesi="semula"]{color:var(--blue-11);}
.sesi-select[data-sesi="jadual"]{color:var(--amber-11);}
.subjek-chips{display:flex;flex-wrap:wrap;gap:6px;}
.sesi-siap{justify-content:center;font-size:12px;font-weight:600;margin:2px 0;}
.sesi-select[data-sesi="diganti"]{color:var(--amber-11);}
.att-table th,.att-table td{padding:6px 6px;}
.att-table th{vertical-align:bottom;}
.att-table .att-name{position:sticky;left:0;z-index:1;min-width:180px;max-width:260px;background:var(--panel);box-shadow:inset -1px 0 0 var(--line);}
.att-table thead .att-name{background:var(--gray-2);}
.att-table tfoot td{border-top:1px solid var(--line);border-bottom:0;font-size:12px;color:var(--gray-11);background:var(--gray-2);}
.att-table tfoot .att-name{background:var(--gray-2);}
.att-head{display:flex;flex-direction:column;align-items:stretch;gap:5px;min-width:104px;}
.att-head-top{display:flex;align-items:baseline;justify-content:center;gap:6px;font-size:12px;color:var(--gray-10);}
.att-head-top strong{font-size:13px;font-weight:600;color:var(--gray-12);}
.att-head .input{height:28px;padding:0 24px 0 8px;font-size:12px!important;background-position:right 6px center;}
.att-cell{display:grid;place-items:center;width:100%;min-width:104px;height:30px;border-radius:7px;font-size:12px;font-weight:600;color:var(--gray-9);background:var(--gray-3);
  transition:transform 140ms var(--ease-out),background-color 120ms ease;}
button.att-cell:active{transform:scale(.95);}
.att-cell[data-v="F"]{color:var(--green-11);background:var(--green-3);}
.att-cell[data-v="O"]{color:var(--amber-11);background:var(--amber-3);}
.att-cell[data-v="TH"]{color:#fff;background:var(--red-9);}
.att-cell[data-v="BD"]{color:#fff;background:#111;font-size:11px;} /* Belum daftar: black, like the attendance sheet */
.att-cell[data-v="CT"]{color:var(--blue-11);background:var(--blue-3);font-size:11px;}
.att-cell[data-v="BH"]{color:#fff;background:var(--gray-11);font-size:11px;}
.att-cell.is-off{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--gray-8);cursor:default;}
.att-cell.is-ganti{background:var(--amber-3);box-shadow:inset 0 0 0 1px var(--amber-7,var(--amber-9));color:var(--amber-11);font-size:11px;font-weight:700;cursor:help;}
.att-student{display:flex;align-items:center;gap:8px;min-width:0;}
.att-student .truncate{font-weight:500;}
/* One-day replacement: their note under the name, and a dot on the days they are not in the class */
.att-note{display:flex;align-items:flex-start;gap:5px;margin-top:3px;max-width:320px;font-size:12px;line-height:1.35;color:var(--amber-11);white-space:normal;}
.att-note .ph{flex-shrink:0;margin-top:1px;}
.att-cell.is-na{background:transparent;box-shadow:none;color:var(--gray-8);cursor:default;}
.att-cell.is-add{cursor:pointer;font-size:15px;color:var(--gray-9);border:1px dashed var(--line-strong);}
@media (hover:hover) and (pointer:fine){.att-cell.is-add:hover{color:var(--amber-11);border-color:var(--amber-9);background:color-mix(in srgb,var(--amber-9) 8%,transparent);}}
.att-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;}
.att-legend span{display:inline-flex;align-items:center;gap:6px;}

/* ---------- Pengurusan Cawangan > Perancangan Jadual: a ruled sheet, each day a row per class area, half hours across ---------- */
.pj-table{width:100%;min-width:1100px;border-collapse:collapse;table-layout:fixed;font-size:12.5px;}
.pj-table th,.pj-table td{border:1px solid var(--line-strong);padding:0;height:44px;text-align:center;vertical-align:middle;}
.pj-table thead th{height:40px;background:var(--gray-2);font-size:11.5px;font-weight:600;color:var(--gray-11);white-space:nowrap;}
.pj-masa span,.pj-masa small{display:block;line-height:1.25;}
.pj-masa small{font-size:10.5px;font-weight:400;color:var(--gray-10);}
.pj-table th.pj-day{width:96px;padding:6px 10px;text-align:center;vertical-align:middle;background:var(--gray-2);font-weight:650;color:var(--gray-12);}
.pj-table th.pj-bilik{width:68px;padding:0 6px;font-size:11.5px;font-weight:500;color:var(--gray-11);white-space:nowrap;background:var(--panel);}
.pj-table th.pj-day.is-sini{color:var(--blue-11);}
.pj-day small{display:block;margin-top:2px;font-size:11.5px;font-weight:400;color:var(--gray-10);}
.pj-table tr.pj-hari-mula th,.pj-table tr.pj-hari-mula td{border-top:3px solid var(--gray-10);}
.pj-isi{padding:3px!important;}
.pj-kls{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;width:100%;height:100%;min-height:36px;padding:3px 8px;border:0;border-radius:5px;font:inherit;text-align:center;color:var(--gray-12);background:color-mix(in srgb,var(--green-9) 16%,transparent);overflow:hidden;}
.pj-isi[data-aliran="SMK"] .pj-kls{background:color-mix(in srgb,var(--green-11) 26%,transparent);}
.pj-nama{max-width:100%;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pj-sub{max-width:100%;font-size:11px;color:var(--gray-11);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
button.pj-kls{cursor:pointer;}
button.pj-kls[draggable="true"]{cursor:grab;}
.pj-table td.pj-seret{opacity:.45;}
.pj-table td.pj-sasar{background:color-mix(in srgb,var(--blue-9) 16%,transparent);box-shadow:inset 0 0 0 2px var(--blue-9);}
button.pj-kls:focus-visible,.pj-add:focus-visible{outline:2px solid var(--blue-9);outline-offset:-2px;}
.pj-add{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:42px;border:0;background:none;color:transparent;cursor:pointer;}
.pj-add:focus-visible{color:var(--gray-10);}
@media (hover:hover) and (pointer:fine){button.pj-kls:hover{filter:brightness(.95);}.pj-add:hover{color:var(--gray-11);background:var(--gray-2);}}
@media (hover:none){.pj-add{color:var(--gray-7);}}
/* ---------- Payroll Guru ---------- */
.pr-table tbody tr[data-act]{cursor:pointer;}
/* Invois Guru list: a ruled table, a line between every column */
.pr-grid th,.pr-grid td{border-right:1px solid var(--line);}
.pr-grid th:last-child,.pr-grid td:last-child{border-right:0;}
.pr-grid tbody tr:not(.fee-total):hover td{background-color:var(--gray-2);}
/* Kadar in the tutor list: the usual dropdown, centred in its cell */
.pr-grid select.pr-kadar-sel{display:inline-block;width:auto;font-size:13px;text-align-last:center;vertical-align:middle;}
/* Every column centred */
.pr-grid th,.pr-grid td,.pr-grid .num{text-align:center;}
.pr-grid .fee-total td:first-child{text-align:right;}
.pr-grid .pr-codes{justify-content:center;}
.pr-sub{font-size:12px;margin-top:2px;}
.pr-codes{display:inline-flex;flex-wrap:wrap;gap:4px;}
.pr-kira{font-size:12px;min-width:180px;}
.pr-laras{margin-top:2px;color:var(--amber-11);}
.pr-none{padding:0 16px 16px;font-size:13px;}
.pr-lulus{border:0;cursor:pointer;font:inherit;font-size:12px;}
/* Pelajar and Sesi in a draft invoice: click to overrule */
.pr-cell-btn{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;margin:-3px -8px;border-radius:6px;font:inherit;color:inherit;cursor:pointer;text-decoration:underline dotted var(--gray-8);text-underline-offset:3px;}
.pr-cell-btn:focus-visible{outline:2px solid var(--blue-9);}
@media (hover:hover) and (pointer:fine){.pr-cell-btn:hover{background:var(--gray-3);}}
.pr-info{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:14px 20px;padding:16px;font-size:13.5px;color:var(--gray-12);}
.pr-info .label{display:block;margin-bottom:2px;}
.pr-info-wide{grid-column:1/-1;}
/* Kadar Bayaran: a rate typed straight into the table (superadmin) */
.pr-grid .pr-kadar-in{display:inline-block;width:120px;text-align:center;font-size:13px;}
.pr-branches{display:flex;flex-wrap:wrap;gap:6px;}
.pr-branch{padding:4px 10px;border-radius:6px;font-size:12.5px;color:var(--gray-10);box-shadow:inset 0 0 0 1px var(--line-strong);}
.pr-branch.is-on{color:var(--green-11);background:var(--green-3);box-shadow:inset 0 0 0 1px var(--green-7,var(--green-9));font-weight:600;}
/* Cawangan bertugas: every cawangan an equal cell filling the row, ruled like the table; the tutor's in green. */
.pr-meta dd:has(>.pr-branches){padding:0;align-items:stretch;}
.pr-meta .pr-branches{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:1px;width:100%;flex:1;background:var(--invoice-line);}
.pr-meta .pr-branch{display:flex;align-items:center;justify-content:center;text-align:center;padding:9px 6px;border-radius:0;box-shadow:none;background:var(--panel);}
.pr-meta .pr-branch.is-on{background:var(--green-3);box-shadow:none;}
.pr-detail{border-top:1px solid var(--line);}
.pr-detail>summary{padding:12px 16px;font-size:13px;font-weight:500;color:var(--gray-11);cursor:pointer;}
.pr-class{padding:0 16px 16px;}
.pr-class-head{margin-bottom:6px;font-size:13px;color:var(--gray-11);}
.pr-att .sesi-th{min-width:72px;}
/* Payroll attendance as a grid: lines between every column, Fizikal / Online light green, TH light red. */
.pr-att{border-collapse:collapse;box-shadow:inset 0 0 0 1px var(--line-strong);}
.pr-att th,.pr-att td,.pr-att th.num,.pr-att td.num{border:1px solid var(--line-strong);text-align:center;}
.pr-att .att-ok{background:color-mix(in srgb,var(--green-9) 12%,var(--panel));color:var(--green-11);}
.pr-att .att-th{background:color-mix(in srgb,var(--red-9) 12%,var(--panel));color:var(--red-11);font-weight:600;}
.pr-rules{display:flex;flex-direction:column;gap:8px;margin:0;padding:0 16px 16px 34px;font-size:13.5px;line-height:1.5;color:var(--gray-11);}

/* Invoice and attendance use the same document layout as Portal Guru > Komisen. */
.pr-invoice{--invoice-line:var(--line-strong);--invoice-head:var(--brand-soft);--invoice-soft:var(--gray-2);--invoice-ink:var(--gray-12);--invoice-muted:var(--gray-11);display:flex;flex-direction:column;gap:20px;min-width:0;color:var(--invoice-ink);}
.pr-invoice .card{margin:0;min-width:0;border-radius:14px;box-shadow:0 0 0 1px var(--invoice-line);}
.pr-invoice-kicker{margin:0 0 4px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--brand);}
.pr-invoice-title{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px 24px;padding:20px 24px;border-bottom:1px solid var(--invoice-line);}
.pr-invoice-title h2{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em;}
.pr-invoice-total{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.pr-invoice-total>span:first-child{font-size:12px;color:var(--invoice-muted);}
.pr-invoice-total strong{font-size:30px;line-height:1.1;letter-spacing:-.03em;color:var(--brand);}
.pr-invoice .pr-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:16px;padding:0;border-top:1px solid var(--invoice-line);border-left:1px solid var(--invoice-line);}
.pr-meta>div{display:grid;grid-template-columns:minmax(120px,40%) minmax(0,1fr);border-right:1px solid var(--invoice-line);border-bottom:1px solid var(--invoice-line);}
.pr-meta>div:last-child:nth-child(odd){grid-column:1/-1;grid-template-columns:minmax(120px,20%) minmax(0,1fr);}
.pr-meta dt,.pr-meta dd{display:flex;align-items:center;justify-content:center;text-align:center;padding:9px 12px;overflow-wrap:anywhere;}
.pr-meta dt{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--invoice-head);border-right:1px solid var(--invoice-line);}
.pr-meta dd{flex-direction:column;margin:0;font-size:13px;font-weight:500;}
.pr-class-tools{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 18px;padding:12px 16px;}
.pr-invoice-section{margin:0;padding:14px 20px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;background:var(--invoice-soft);border-bottom:1px solid var(--invoice-line);border-radius:14px 14px 0 0;}
.pr-invoice .scroll-x{margin:12px 16px 16px;width:auto;max-width:calc(100% - 32px);}
.pr-invoice .pr-invoice-table{width:100%;border-collapse:collapse;box-shadow:none;}
.pr-invoice .pr-invoice-table th,.pr-invoice .pr-invoice-table td{border:1px solid var(--invoice-line);padding:10px 14px;text-align:center;vertical-align:middle;font-size:13px;color:var(--invoice-ink);white-space:normal;}
.pr-invoice .pr-invoice-table thead th{font-size:12px;background:var(--invoice-head);font-weight:700;}
.pr-invoice .pr-invoice-table tfoot th{background:var(--invoice-soft);font-weight:700;}
.pr-invoice .pr-invoice-table .tnum{white-space:nowrap;}
.pr-invoice .pr-invoice-table .pr-summary-grand{color:var(--brand);font-size:15px;}
.pr-class-summary th:first-child{width:6%;}
.pr-class-summary th:nth-child(2){width:45%;}
.pr-class-summary th:last-child{width:16%;}
.pr-class-jump{font:inherit;font-weight:600;color:inherit;cursor:pointer;padding:0;border-radius:4px;}
.pr-class-jump:hover{color:var(--brand);text-decoration:underline;}
.pr-class-jump:focus-visible{outline:2px solid var(--brand);}
.pr-branch-section{display:flex;flex-direction:column;gap:14px;min-width:0;}
.pr-branch-title{margin:8px 0 0;padding:10px 16px;border-radius:10px;text-align:center;text-transform:uppercase;font-size:15px;letter-spacing:.1em;font-weight:700;color:#fff;background:linear-gradient(120deg,#1d3528,#315b45);box-shadow:inset 0 -2px 0 var(--gold);}
.pr-invoice .pr-class{padding:0;scroll-margin-top:110px;}
.pr-invoice .pr-class:focus-visible{outline:2px solid var(--brand);outline-offset:3px;}
.pr-class-note{margin:0;padding:0 20px 8px;text-align:center;font-size:12px;color:var(--invoice-muted);}
.pr-class-tools{padding-top:0;padding-bottom:4px;color:var(--invoice-muted);}
.pr-class-tools>div{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
.pr-invoice .pr-att .pr-session{width:120px;min-width:120px;max-width:120px;overflow-wrap:anywhere;line-height:1.4;}
.pr-session-date{display:block;font-size:11px;font-weight:400;color:var(--invoice-muted);}
.pr-invoice .pr-att .pr-student-name{min-width:180px;overflow-wrap:anywhere;}
.pr-mark{display:inline-block;min-width:44px;padding:2px 6px;border-radius:6px;font-size:11px;font-weight:700;color:var(--invoice-muted);}
.pr-mark.is-hadir{background:var(--green-3);color:var(--green-11);}
.pr-mark.is-th{background:var(--red-3);color:var(--red-11);}
.pr-mark.is-off{background:var(--invoice-head);color:var(--invoice-muted);font-weight:500;}
.pr-mark.is-ganti{background:var(--amber-3);color:var(--amber-11);cursor:help;}
.pr-ganti-nota{color:var(--amber-11);}
.pr-th{color:var(--red-11);font-size:.92em;}
/* Payroll Guru > Contoh: what happened, the sum line by line, then a note. */
.pr-contoh{padding:0 16px 16px;}
.pr-contoh-sit{margin:0 0 10px;font-size:13.5px;color:var(--gray-12);}
.pr-contoh-nota{margin:10px 0 0;font-size:12.5px;color:var(--gray-11);} /* the one TH paid this month, after the attended sessions */
.pr-mark.is-cuti{background:var(--blue-3);color:var(--blue-11);}
.pr-invoice .pr-att td.pr-session-excluded{background:#111;}
.pr-invoice .pr-session-status td{font-size:11px;color:var(--invoice-muted);background:var(--invoice-soft);}
.pr-calc{padding:12px 20px 16px;font-size:12px;line-height:1.6;text-align:center;color:var(--invoice-muted);border-top:1px solid var(--invoice-line);overflow-wrap:anywhere;}
@media(max-width:760px){

  .pr-invoice-title{padding:16px;}
  .pr-invoice-total{align-items:flex-start;}
  .pr-invoice .pr-meta{grid-template-columns:1fr;margin:12px;}
  .pr-meta .pr-branches{grid-auto-flow:row;}
  .pr-invoice .scroll-x{margin:8px 12px 12px;max-width:calc(100% - 24px);}

  .pr-invoice .pr-class-summary{min-width:530px;}
  .pr-class-tools{align-items:flex-start;}
}

/* Match Portal Tutor's tablet and phone table density. */
@media(max-width:1279px){
  .pr-invoice .pr-invoice-table th,.pr-invoice .pr-invoice-table td{padding:8px;font-size:12px;}
  .pr-invoice .pr-att .pr-session{width:76px;min-width:76px;max-width:76px;}
}
@media(max-width:600px){
  .pr-invoice .pr-invoice-table th,.pr-invoice .pr-invoice-table td{padding:6px 4px;font-size:11px;}
  .pr-invoice .pr-invoice-table thead th{font-size:10.5px;}
  .pr-invoice .pr-att .pr-session{width:38px;min-width:38px;max-width:38px;}
  .pr-invoice .pr-session-date{font-size:9.5px;}
  .pr-invoice .pr-session-status td.pr-session{font-size:8.5px;overflow-wrap:normal;word-break:keep-all;padding-inline:1px;}
  .pr-invoice .pr-mark{min-width:0;padding:2px 4px;font-size:10px;}
  .pr-invoice .scroll-x{margin:8px 8px 10px;max-width:calc(100% - 16px);}
  .pr-invoice-section{padding:12px 14px;font-size:12px;}
  .pr-branch-title{font-size:13px;}
  .pr-invoice-total strong{font-size:26px;}
}
/* ---------- Logistik ---------- */
/* One card per item: the baki, big, with buttons to change it, and Perlu segera. */
.lg-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px;align-items:start;}
.lg-baki{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding:4px 16px 12px;}
.lg-baki-main{display:flex;align-items:baseline;gap:10px;}
.lg-baki-num{font-size:44px;font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--gray-12);font-variant-numeric:tabular-nums;}
.lg-baki-unit{font-size:13px;color:var(--gray-11);}
.lg-baki-acts{display:flex;align-items:center;gap:6px;}
.lg-segera{display:flex;flex-direction:column;gap:4px;padding:0 16px 14px;font-size:13px;}
.lg-segera p{margin:0;}
.lg-item.lg-glow .lg-baki-num{color:var(--red-11);}
.lg-all td.lg-low{color:var(--red-11);font-weight:650;}
.lg-rate{display:block;font-size:11.5px;font-weight:400;color:var(--gray-10);}
/* How much a branch uses, and how long a supply lasts */
.lg-usage{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 14px;}
.lg-usage>div{display:flex;flex-direction:column;gap:1px;flex:1 1 120px;padding:8px 10px;border-radius:8px;background:var(--gray-2);box-shadow:inset 0 0 0 1px var(--line);font-size:11.5px;}
.lg-usage-num{font-size:14px;font-weight:650;color:var(--gray-12);font-variant-numeric:tabular-nums;}
.lg-tempoh-note{display:block;font-size:11.5px;color:var(--gray-10);}
/* Barang lain: not urgent, a refill request per item (amber when asked for) */
.lg-other{margin:0;padding:0;list-style:none;}
.lg-other-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 16px;border-top:1px solid var(--line);}
.lg-other-row.is-want{background:color-mix(in srgb,var(--amber-9) 10%,transparent);}
.lg-other-name{display:flex;align-items:center;gap:10px;flex:1 1 220px;min-width:0;font-size:13.5px;}
.lg-other-name>.ph{font-size:20px;color:var(--gray-9);}
.lg-other-last{display:block;font-size:12px;}
.lg-other-note{flex:1 1 240px;max-width:380px;font-size:13px;}
/* Red glow, one pulse every 1.4s (as the duplicate alert): 1 or fewer left, or Perlu segera. */
.lg-glow{animation:review-glow 1.4s ease-in-out infinite;}
.lg-item.lg-glow{box-shadow:0 0 0 1px var(--red-9);}
.table tr.lg-glow{animation:none;}
.table tr.lg-glow td{animation:lg-row-glow 1.4s ease-in-out infinite;}
@keyframes lg-row-glow{0%,100%{background-color:color-mix(in srgb,var(--red-9) 6%,transparent);}50%{background-color:color-mix(in srgb,var(--red-9) 22%,transparent);}}
.table tr.lg-glow td:first-child{box-shadow:inset 3px 0 0 var(--red-9);}
@media (prefers-reduced-motion:reduce){.lg-glow,.table tr.lg-glow td{animation:none;}.table tr.lg-glow td{background-color:color-mix(in srgb,var(--red-9) 12%,transparent);}}

/* Laporan Harian: one row per day, what was done in short lines; the form's sections as boxes of ticks */
.hr-table td{vertical-align:top;}
.hr-table tr.is-today td{background:color-mix(in srgb,var(--green-9) 6%,transparent);}
.hr-lines{display:flex;flex-direction:column;gap:3px;margin:0;padding:0;list-style:none;font-size:13px;white-space:normal;}
.hr-sec{display:inline-block;min-width:104px;margin-right:8px;font-weight:600;color:var(--gray-11);}
.hr-isu{color:var(--red-11);font-weight:600;}
.hr-fs{margin:0;padding:10px 12px 12px;border:1px solid var(--line);border-radius:8px;min-width:0;}
.hr-fs legend{padding:0 4px;}
.hr-ticks{display:flex;flex-wrap:wrap;gap:2px 8px;}
.hr-fs .hint{display:block;margin:6px 0 2px;}
.hr-fs textarea{margin-top:6px;width:100%;}
.hr-prog{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:8px;align-items:center;margin-top:4px;}
@media (max-width:640px){.hr-prog{grid-template-columns:1fr;}.hr-sec{display:block;}}
/* ---------- Isu Berbangkit ---------- */
.isu-list{display:flex;flex-direction:column;gap:10px;}
.isu{display:flex;flex-direction:column;gap:8px;padding:14px 16px;}
.isu[data-utama="tinggi"]{box-shadow:inset 3px 0 0 var(--red-9),var(--shadow-card);}
.isu[data-utama="sederhana"]{box-shadow:inset 3px 0 0 var(--amber-9),var(--shadow-card);}
.isu[data-done="true"]{opacity:.72;}
.isu-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;}
.isu-top .push{margin-left:auto;}
.isu-title{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--gray-12);overflow-wrap:anywhere;}
.isu-body{font-size:13px;color:var(--gray-12);white-space:pre-wrap;overflow-wrap:anywhere;}
.isu-action{padding:8px 10px;border-radius:8px;background:var(--gray-2);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;}
/* Lain-lain > Seminar Pecutan Akhir SPM: the year's panduan as typed, and the deposit box of the payment form. */
.sm-panduan{padding:0 16px 16px;font-size:14px;line-height:1.6;color:var(--gray-12);white-space:pre-wrap;overflow-wrap:anywhere;}
/* Pengurusan Bayaran > Senarai pelajar > Bayaran setahun: a student's 12 months, typed in the table. */
.st-head{display:flex;align-items:center;gap:12px;margin:0 0 12px;flex-wrap:wrap;}
.st-name{margin:0;font-size:16px;font-weight:600;color:var(--gray-12);}
.st-table td{vertical-align:middle;padding:6px 8px;}
.st-table th{white-space:normal;}
.st-table .st-in{width:88px;min-width:0;height:32px;padding:4px 8px;font-size:13px;text-align:center;text-align-last:center;margin:0 auto;display:block;}
.st-table .st-in[type="text"]{width:104px;}
.st-table .st-in[type="date"]{width:132px;}
.st-table .st-sel{width:150px;padding-right:24px;}
.st-table tr.st-off td{background:var(--gray-2);color:var(--gray-10);}
.st-table td .st-status{justify-content:center;}
.st-table .st-dpsel{width:150px;font-size:12px;}
.st-table tr.st-kosong td{background:var(--amber-3);}
.st-table .st-clear{display:flex;align-items:center;gap:3px;margin:2px auto 0;padding:0 4px;border:0;background:none;font:inherit;font-size:11px;font-weight:400;color:var(--gray-10);cursor:pointer;border-radius:4px;}
.st-table .st-clear:hover,.st-table .st-clear:focus-visible{color:var(--red-11, #c62828);background:var(--red-3, #fff0f0);}
.st-table .st-clear-row{font-size:11px;font-weight:400;margin-top:2px;}
.st-table .st-dpsel[data-dp="bayar"],.st-dp{color:var(--green-11);font-size:12.5px;}
.st-table .st-dpsel[data-dp="proses"],.st-dp[data-dp="proses"]{color:var(--amber-11);background:var(--amber-3);}
.st-table .st-dpsel[data-dp="pulang"],.st-dp[data-dp="pulang"]{color:var(--gray-11);}
.st-in.is-edited{box-shadow:inset 0 0 0 2px var(--amber-9);background:var(--amber-3);}
.st-status{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;}
.st-note{font-size:12px;color:var(--gray-11);min-width:150px;}
.st-acts{display:inline-flex;align-items:center;gap:8px;margin-left:auto;}
.sm-dep{padding:10px 12px;border-radius:8px;background:var(--gray-2);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;}
.isu-action strong{font-weight:600;}
.isu-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:12px;color:var(--gray-10);}
.isu-meta .push{margin-left:auto;}
.isu .input.is-auto{height:30px;font-size:12.5px!important;}
/* Lain-lain > Memo: Isu's card layout, an edge and badge in the memo type's colour (--mc / --mbg / --mfg),
   pinned ones in gold. A scheduled memo shows a countdown in the banner's green until it is posted. */
.memo[data-jenis="makluman"]{--mc:var(--blue-9);--mbg:var(--blue-3);--mfg:var(--blue-11);}
.memo[data-jenis="arahan"]{--mc:var(--red-9);--mbg:var(--red-3);--mfg:var(--red-11);}
.memo[data-jenis="peringatan"]{--mc:var(--amber-9);--mbg:var(--amber-3);--mfg:var(--amber-11);}
.memo[data-jenis="acara"]{--mc:var(--violet-9);--mbg:var(--violet-3);--mfg:var(--violet-11);}
.memo{box-shadow:inset 3px 0 0 var(--mc),var(--shadow-card);}
.memo[data-penting="true"]{box-shadow:inset 3px 0 0 var(--mc),0 0 0 1.5px #d7b773,var(--shadow-card);}
.memo-badge{color:var(--mfg);background:var(--mbg);}
.memo-untuk{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:12px;}
.memo-title{font-size:16px;}
.memo-body{font-size:13.5px;line-height:1.55;}
.memo-tools{gap:10px 12px;}
.memo-filters{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto;}
.memo-filters .field{width:220px;max-width:100%;}
.memo-sched{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;border-radius:10px;color:#f4f1df;
  background:radial-gradient(ellipse at 85% 0%,#3a6a4c55 0%,transparent 55%),linear-gradient(120deg,#10291f 0%,#1d3d2d 60%,#244638 100%);}
.memo-sched-label{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#c3d2b6;}
.memo-sched-when{margin-left:auto;font-size:12.5px;color:#bccbbb;}
.memo-cd{display:inline-flex;gap:4px;}
.memo-cd-box{display:flex;flex-direction:column;align-items:center;min-width:42px;padding:3px 6px;border-radius:7px;background:#ffffff14;box-shadow:inset 0 0 0 1px #ffffff1f;}
.memo-cd-box strong{font:700 17px/1.2 ui-monospace,"Cascadia Mono",Consolas,monospace;color:#f4f1df;font-variant-numeric:tabular-nums;}
.memo-cd-box small{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#d5e7ad;}
.memo-next{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;width:100%;padding:10px 14px;border-radius:12px;text-align:left;cursor:pointer;color:#f4f1df;
  background:radial-gradient(ellipse at 85% 0%,#3a6a4c55 0%,transparent 55%),linear-gradient(120deg,#10291f 0%,#1d3d2d 60%,#244638 100%);box-shadow:0 8px 22px -16px #07190f80;}
.memo-next .ph{color:#d5e7ad;}
.memo-next-text{flex:1;min-width:0;font-size:13px;color:#d9e2cf;}
.memo-next-text strong{color:#f4f1df;}
.memo-next .memo-cd-box{min-width:36px;padding:2px 5px;}
.memo-next .memo-cd-box strong{font-size:14px;}
.memo-jadual{display:flex;flex-direction:column;gap:2px;margin-top:6px;max-width:280px;}
.memo-line{display:flex;flex-wrap:wrap;gap:2px 16px;font-size:12.5px;color:var(--gray-11);}
.memo-card-acts{display:flex;flex-wrap:wrap;gap:6px;}
/* The contact table in the memo dialog: Cawangan | Nama | No. Tel */
.memo-hub{display:flex;flex-direction:column;gap:6px;margin-top:8px;padding:10px 12px;border-radius:10px;background:var(--gray-2);box-shadow:inset 0 0 0 1px var(--line);}
.memo-hub-row{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,.8fr);align-items:center;gap:8px;font-size:13px;color:var(--gray-12);}
.memo-hub-head{font-size:11.5px;font-weight:600;color:var(--gray-10);text-transform:uppercase;letter-spacing:.04em;}
@media (max-width:520px){.memo-hub-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}.memo-hub-row>span:first-child{grid-column:1/-1;font-weight:600;}.memo-hub-head{display:none;}}
/* One memo (#memo/<id>): the actions, then the letter on white paper in both themes */
.memo-doc-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;}
.memo-paper{width:100%;max-width:820px;margin:0 auto;padding:clamp(20px,5vw,56px) clamp(18px,6vw,64px);border-radius:4px;background:#fff;color:#000;box-shadow:0 1px 3px #0000001f,0 12px 32px -18px #0000004d;}
/* Tulis memo: the form, and beside it (below on narrow screens) the letter as it will look, scaled down */
@media (min-width:640px){.dialog.dialog-wide{max-width:min(1180px,calc(100vw - 32px));}}
.memo-compose{display:grid;gap:20px;}
@media (min-width:960px){.memo-compose{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;}.memo-preview-wrap{position:sticky;top:0;}}
.memo-paper.is-preview{padding:28px 32px;max-width:none;}
.memo-paper.is-preview .mm{zoom:.62;}
.memo-doc-meta{max-width:820px;width:100%;margin:0 auto;font-size:12px;text-align:center;}

/* The memo letter (screen and print): black on white, Arial, like the centre's printed memos */
/* Every gap and the logo / chop are in em, so when a long memo is printed smaller to fit one A4 page
   (app.js memoMuatSatu) the whole letter shrinks together and keeps its layout. */
.mm{color:#000;font-family:Arial,Helvetica,sans-serif;font-size:14.5px;line-height:1.42;}
.mm p{margin:0 0 .85em;text-align:justify;}
.mm-logo{display:flex;justify-content:flex-end;}
.mm-logo img{width:13.5em;max-width:45%;height:auto;}
.mm-head{margin:.9em 0 1.1em;text-align:center;font-size:1.05em;font-weight:700;letter-spacing:.02em;}
.mm-info{border-collapse:collapse;}
.mm-info th{width:8.3em;padding:.28em 0;text-align:left;font-weight:400;vertical-align:top;}
.mm-info .mm-colon{width:1.9em;padding:.28em 0;vertical-align:top;}
.mm-info td{padding:.28em 0;vertical-align:top;}
.mm-rule{margin:.7em 0 1.3em;border:0;border-top:2px solid #000;}
.mm-table{width:100%;margin:.2em 0 1.1em;border-collapse:collapse;}
.mm-table th,.mm-table td{padding:.12em .55em;border:1px solid #000;text-align:center;}
.mm-table th{font-weight:700;}
.mm-yb{margin-top:1.3em !important;}
.mm-chop{height:8.6em;margin:-.9em 0 .1em;}
.mm-chop img{display:block;height:100%;width:auto;max-width:60%;object-fit:contain;}
.mm-org{font-weight:700;text-align:left !important;}
/* Lampiran: its own page after the letter (on screen a second sheet; in print and PDF the next page) */
.mm-lamp-tag{margin:0 0 .2em !important;font-size:1.05em;font-weight:700;text-align:center !important;letter-spacing:.02em;}
.mm-lamp-ref{margin:0 !important;text-align:center !important;font-size:.92em;}
.memo-paper-lamp{margin-top:18px;}
.mm-page-break{display:flex;align-items:center;gap:8px;margin:18px 0;font-size:11px;font-weight:600;color:#6b7280;}
.mm-page-break::before,.mm-page-break::after{content:"";flex:1;border-top:1px dashed #9ca3af;}
/* Muat turun PDF: the letter drawn off screen at A4 width (182mm inside the PDF margins), white, for html2pdf */
.mm-pdf-wrap{position:fixed;left:-10000px;top:0;}
.mm-pdf{width:182mm;background:#fff;}
.mm-pdf .mm{font-size:11pt;}
.mm-print{padding:6mm 8mm;}
@media print{
  .mm-print .mm:not([style]){font-size:11pt;}
  .mm-print-lamp{break-before:page;page-break-before:always;}
  .mm-table tr,.mm-info tr{break-inside:avoid;}
}
/* Pengurusan Bayaran > Senarai pelajar > Pelajar sambung: search, quick ticks, then the students */
.sb-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:10px;}
.sb-tools .field{flex:1 1 220px;}
.sb-tools .link-btn{margin:0;}
.sb-count{margin-left:auto;font-size:12.5px;color:var(--gray-11);font-variant-numeric:tabular-nums;}
.sb-list{display:grid;gap:2px;max-height:min(52vh,460px);overflow-y:auto;padding:4px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);}
.sb-row{padding:6px 8px;border-radius:7px;}
.sb-row:has(:checked){background:var(--gray-3);}
.sb-name{display:flex;flex-direction:column;font-size:13px;font-weight:600;color:var(--gray-12);}
.sb-name .muted{font-size:12px;font-weight:400;}

/* Lain-lain > Dokumen: the choices, then the form on white paper */
.dok-card{margin-bottom:16px;}
.dok-body{display:grid;gap:12px;}
.dok-sub{margin:0;font-size:13px;}
.dok-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;}
.dok-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.dok-count{font-size:13px;color:var(--gray-11);font-variant-numeric:tabular-nums;}
.dok-pick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr);gap:10px 12px;}
.dok-pick.is-kosong{grid-template-columns:minmax(0,200px);}
.dok-kelas-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-bottom:6px;}
.dok-kelas-head .label{margin:0;}
.dok-kelas-head .link-btn{margin:0;}
.dok-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:6px;}
.dok-row{display:grid;align-content:start;gap:8px;padding:8px 10px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line);}
.dok-row.is-on{background:var(--gray-3);box-shadow:inset 0 0 0 1px var(--line-strong);}
.dok-row-main{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 10px;cursor:pointer;}
.dok-row-main .checkbox{grid-row:span 2;}
/* Guru ganti: under a ticked class; the class's own tutor is struck through once one is given */
.dok-ganti{display:grid;gap:3px;padding-left:28px;}
.dok-ganti > span{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--gray-11);}
.dok-ganti .input{height:32px;font-size:13px;background:var(--panel);}
.dok-row.has-ganti .dok-ganti > span{color:var(--amber-11,var(--gray-12));}
.dok-row-name{font-size:13px;font-weight:600;color:var(--gray-12);overflow-wrap:anywhere;}
.dok-row-sub{font-size:12px;color:var(--gray-11);overflow-wrap:anywhere;}
.dok-more{margin:8px 0 0;font-size:13px;text-align:center;}
@media (max-width:640px){.dok-pick{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}.dok-pick .dok-tarikh{grid-column:1/-1;}.dok-acts{width:100%;}.dok-acts .btn{flex:1;}.dok-count{width:100%;}}
/* Borang Kehadiran: an A4 sheet (landscape) holds two forms, each on its half (A5), cut down the middle.
   The same sheet is shown (scaled down), printed and saved as PDF. Black on white, Times, like the centre's printed form. */
.bk-preview{display:grid;justify-content:center;gap:16px;overflow-x:auto;padding:2px 2px 8px;}
.bk-preview .bk-sheet{zoom:.62;box-shadow:0 1px 3px #0000001f,0 12px 32px -18px #0000004d;}
@media (max-width:900px){.bk-preview .bk-sheet{zoom:.45;}}
@media (max-width:560px){.bk-preview .bk-sheet{zoom:.3;}}
.bk-sheet{display:grid;grid-template-columns:1fr 1fr;width:297mm;height:209mm;overflow:hidden;background:#fff;}
.bk-half{display:flex;min-width:0;padding:8mm 9mm 6mm;}
.bk-half + .bk-half{border-left:1px dashed #9a9a9a;} /* where to cut */
.bk{display:flex;flex:1;flex-direction:column;min-width:0;color:#000;font-family:"Times New Roman",Times,serif;font-size:9.5pt;line-height:1.25;}
.bk-title{margin:0 0 3mm;text-align:center;font-size:10pt;font-weight:700;}
.bk-h{margin:4mm 0 1.5mm;text-align:center;font-size:9.5pt;font-weight:700;}
.bk-t{width:100%;border-collapse:collapse;table-layout:fixed;}
.bk-t th,.bk-t td{padding:2px 4px;border:1px solid #000;overflow-wrap:anywhere;}
.bk-t th{font-weight:700;text-align:center;vertical-align:top;}
.bk-info th{padding:2mm 4px 1mm;border-bottom:0;}
.bk-info td{height:30mm;padding:1mm 4px 2mm;border-top:0;vertical-align:top;}
.bk-f{margin:0 0 2.5mm;}
.bk-list td{height:var(--bk-row,8mm);padding-top:0;padding-bottom:0;vertical-align:middle;}
.bk-list .c{text-align:center;font-weight:700;}
.bk-foot{display:flex;justify-content:space-between;gap:12px;margin-top:auto;padding-top:3mm;font-family:Arial,Helvetica,sans-serif;font-size:6pt;font-weight:700;}
@media print{
  .bk-sheet + .bk-sheet{break-before:page;}
}
@media (max-width:640px){.memo-filters{margin-left:0;width:100%;}.memo-filters .field{flex:1;width:auto;}.memo-sched-when{margin-left:0;}}

/* ---------- Modal: bottom sheet on phones, centred dialog from sm ---------- */
/* pointer-events: a dialog that is still fading out must not swallow the next click */
.overlay{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:flex-end;justify-content:center;visibility:hidden;pointer-events:none;transition:visibility 0s linear 200ms;}
.overlay[data-open="true"]{visibility:visible;pointer-events:auto;transition:none;}
.overlay-backdrop{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity 200ms ease;}
.overlay[data-open="true"] .overlay-backdrop{opacity:1;}
.dialog{position:relative;display:flex;flex-direction:column;width:100%;max-height:92dvh;overflow:hidden;background:var(--panel);border-radius:16px 16px 0 0;box-shadow:var(--shadow-pop);
  transform:translateY(100%);transition:transform 200ms var(--ease-out);}
.overlay[data-open="true"] .dialog{transform:none;transition:transform 400ms var(--ease-drawer);}
@media (min-width:640px){
  .overlay{align-items:center;padding:16px;}
  .dialog{max-width:576px;max-height:min(760px,90dvh);border-radius:16px;opacity:0;transform:scale(.96);transition:transform 150ms var(--ease-out),opacity 150ms var(--ease-out);}
  .overlay[data-open="true"] .dialog{opacity:1;transform:none;transition:transform 200ms var(--ease-out),opacity 200ms var(--ease-out);}
}
.dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 16px 14px 20px;border-bottom:1px solid var(--line);}
.dialog-title{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--gray-12);}
.dialog-sub{margin-top:2px;font-size:13px;color:var(--gray-11);}
.dialog-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:16px;padding:20px;}
.dialog-footer{display:flex;align-items:center;gap:8px;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--gray-2);}
.dialog-footer .push{margin-left:auto;}

/* ---------- Kalendar cawangan (popup from the sidebar) ---------- */
/* The month on the left and the picked day's notes on the right; stacked on narrow screens.
   Note types (data-jenis) set --kal-c (dot / edge), --kal-bg and --kal-fg (tag). */
@media (min-width:640px){.dialog.kal-dialog{max-width:840px;}}
.kal-body{gap:14px;}
.kal-dialog [data-jenis="cuti"]{--kal-c:var(--red-9);--kal-bg:var(--red-3);--kal-fg:var(--red-11);}
.kal-dialog [data-jenis="ganti"]{--kal-c:var(--blue-9);--kal-bg:var(--blue-3);--kal-fg:var(--blue-11);}
.kal-dialog [data-jenis="acara"]{--kal-c:var(--violet-9);--kal-bg:var(--violet-3);--kal-fg:var(--violet-11);}
.kal-dialog [data-jenis="lain"]{--kal-c:var(--amber-9);--kal-bg:var(--amber-3);--kal-fg:var(--amber-11);}
.kal-branches{display:flex;max-width:100%;overflow-x:auto;scrollbar-width:none;}
.kal-branches button{flex:1 0 auto;}
.kal-layout{display:grid;gap:18px;}
@media (min-width:720px){.kal-layout{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;}}
.kal-nav{display:flex;align-items:center;gap:4px;margin-bottom:8px;}
.kal-nav .push{margin-left:auto;}
.kal-month-name{min-width:124px;text-align:center;font-family:var(--heading-font,inherit);font-size:15px;font-weight:700;color:var(--gray-12);}
.kal-week,.kal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;}
.kal-week{margin-bottom:4px;}
.kal-week span{text-align:center;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gray-10);}
.kal-week span:nth-child(n+6){color:var(--red-11);}
.kal-cell{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:46px;padding:6px 2px 4px;border-radius:8px;font-size:13px;font-weight:500;color:var(--gray-12);
  background:var(--gray-2);box-shadow:inset 0 0 0 1px var(--line);transition:background-color 120ms ease,box-shadow 120ms ease;}
.kal-cell.is-blank{background:transparent;box-shadow:none;}
.kal-cell.is-weekend .kal-num{color:var(--red-11);}
@media (hover:hover){button.kal-cell:hover{background:var(--gray-3);}}
.kal-cell.is-today{box-shadow:inset 0 0 0 2px var(--brand);}
.kal-cell.is-today .kal-num{font-weight:800;color:var(--brand);}
.kal-cell[aria-pressed="true"]{background:var(--brand);box-shadow:none;}
.kal-cell[aria-pressed="true"] .kal-num{color:var(--on-accent);}
.kal-num{line-height:1.2;font-variant-numeric:tabular-nums;}
.kal-dots{display:flex;align-items:center;gap:2px;min-height:6px;}
.kal-dot{display:inline-block;flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--kal-c,var(--gray-8));}
.kal-cell[aria-pressed="true"] .kal-dot{box-shadow:0 0 0 1px var(--panel);}
.kal-more{font-size:10px;font-weight:700;line-height:6px;color:var(--gray-10);}
.kal-cell[aria-pressed="true"] .kal-more{color:var(--on-accent);}
.kal-legend{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:10px;font-size:11.5px;color:var(--gray-10);}
.kal-legend > span{display:inline-flex;align-items:center;gap:5px;}
.kal-day{display:flex;flex-direction:column;gap:10px;min-width:0;padding:14px;border-radius:12px;background:var(--gray-2);box-shadow:inset 0 0 0 1px var(--line);}
.kal-day-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--heading-font,inherit);font-size:14.5px;font-weight:700;color:var(--gray-12);}
.kal-empty{font-size:13px;}
.kal-notes{display:flex;flex-direction:column;gap:8px;max-height:280px;margin:0;padding:0;overflow-y:auto;list-style:none;}
.kal-note{display:flex;align-items:flex-start;gap:6px;padding:9px 6px 9px 12px;border-radius:9px;background:var(--panel);box-shadow:inset 3px 0 0 var(--kal-c),0 0 0 1px var(--line);}
.kal-note-main{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;}
.kal-tag{padding:1px 7px;border-radius:999px;font-size:10.5px;font-weight:650;color:var(--kal-fg);background:var(--kal-bg);}
.kal-text{font-size:13.5px;line-height:1.45;color:var(--gray-12);overflow-wrap:anywhere;user-select:text;}
.kal-meta{font-size:11.5px;color:var(--gray-10);}
.kal-del{flex-shrink:0;padding:0 8px;color:var(--gray-10);}
.kal-del.is-armed{font-weight:600;color:var(--red-11);background:var(--red-3);}
.kal-add{display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px solid var(--line);}
.kal-jenis{display:flex;flex-wrap:wrap;gap:5px;}
.kal-jenis button{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:500;color:var(--gray-11);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-strong);}
.kal-jenis button[aria-pressed="true"]{font-weight:600;color:var(--kal-fg);background:var(--kal-bg);box-shadow:inset 0 0 0 1.5px var(--kal-c);}
.kal-add-row{display:flex;gap:8px;}
.kal-add-row .input{flex:1;min-width:0;}
.kal-add-row .btn{flex-shrink:0;}

/* ---------- Login ---------- */
.auth-screen{position:fixed;inset:0;z-index:var(--z-auth);overflow-y:auto;overscroll-behavior:contain;color:#f4f1df;
  background:radial-gradient(ellipse at 15% 65%,#244638 0%,transparent 60%),#10291f;padding:0 max(clamp(32px,5vw,120px),env(safe-area-inset-right)) 0 max(clamp(32px,5vw,120px),env(safe-area-inset-left));}
.auth-shell{width:100%;max-width:2200px;min-height:100%;margin:auto;display:flex;flex-direction:column;}
.auth-topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:120px;border-bottom:1px solid #d7e5cd20;}
.auth-brand img{display:block;width:186px;height:auto;}
.auth-workspace{display:flex;align-items:center;gap:10px;color:#c0ccbb;font-size:11px;font-weight:600;letter-spacing:.18em;}
.auth-workspace>span{width:6px;height:6px;border-radius:50%;background:#d2e9a5;box-shadow:0 0 0 5px #cfe7a50c;}
.auth-main{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 410px;gap:clamp(40px,7vw,110px);align-items:center;padding:52px 0 42px;}
.auth-welcome{min-width:0;}
.auth-eyebrow{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:600;letter-spacing:.2em;color:#c3d2b6;margin-bottom:25px;}
.auth-eyebrow>span{width:26px;height:1px;background:#c6dd9f;}
.auth-welcome h1{font-family:var(--heading-font,'Plus Jakarta Sans',sans-serif);font-size:clamp(40px,4.65vw,66px);line-height:1.13;font-weight:500;letter-spacing:-.055em;text-wrap:initial;}
.auth-welcome h1 em{font-family:Georgia,'Times New Roman',serif;color:#d5e7ad;font-weight:400;letter-spacing:-.045em;}
.auth-intro{font-size:14px;line-height:1.85;color:#bccbbb;margin-top:23px;}
.auth-journey{position:relative;height:210px;margin-top:25px;overflow:hidden;border-bottom:1px solid #c9dfb62b;background-image:radial-gradient(#d4e4ba20 .7px,transparent .7px);background-size:18px 18px;mask-image:linear-gradient(to right,#000 88%,transparent);}
.journey-orbit{position:absolute;width:390px;height:390px;border:1px solid #b7d79c20;border-radius:50%;left:170px;top:20px;}
.journey-orbit::before{content:"";position:absolute;inset:35px;border:1px solid #b7d79c16;border-radius:50%;}
.journey-star{position:absolute;right:55px;top:2px;color:#d7e7ac;font-size:54px;line-height:1;animation:auth-star-in 1.4s ease-out both,auth-star-glow 4s ease-in-out 1.4s infinite;}
/* Smaller stars around the big one: each drifts and twinkles on its own timing */
.journey-sparks{position:absolute;inset:0;pointer-events:none;}
.journey-sparks span{position:absolute;color:#d7e7ac;line-height:1;opacity:0;animation:auth-spark var(--d,6s) ease-in-out var(--w,0s) infinite;}
.journey-sparks span:nth-child(1){right:150px;top:24px;font-size:16px;--d:5.5s;--w:.2s;}
.journey-sparks span:nth-child(2){right:20px;top:70px;font-size:12px;--d:6.5s;--w:1.1s;}
.journey-sparks span:nth-child(3){right:230px;top:60px;font-size:10px;--d:7s;--w:2.3s;}
.journey-sparks span:nth-child(4){right:105px;top:96px;font-size:20px;--d:6s;--w:3.2s;}
.journey-sparks span:nth-child(5){left:42%;top:14px;font-size:11px;--d:8s;--w:.8s;}
.journey-sparks span:nth-child(6){left:34%;top:86px;font-size:14px;--d:7.5s;--w:4s;}
.journey-sparks span:nth-child(7){right:300px;top:8px;font-size:18px;--d:6.8s;--w:2.8s;}
.journey-caption{position:absolute;left:0;top:30px;z-index:1;display:grid;gap:8px;}
.journey-caption>span{font-size:11px;letter-spacing:.17em;color:#a8bea5;}
.journey-caption>strong{max-width:150px;font-size:17px;font-weight:500;line-height:1.5;color:#e3e8d6;}
.journey-steps{position:absolute;inset:0 28px 0 32%;display:flex;align-items:flex-end;}
.journey-step{position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-between;min-width:0;padding:15px 14px;height:65px;border:1px solid #cee3b837;border-bottom:0;background:linear-gradient(125deg,#9ebd7821,#b6d58f06);}
.journey-step:nth-child(2){height:112px;background:linear-gradient(125deg,#abc78535,#b6d58f0b);}
.journey-step:nth-child(3){height:162px;background:linear-gradient(125deg,#cfe5a877,#b6d58f19);border-color:#dcecbc66;}
.journey-step>span{font-size:11px;letter-spacing:.12em;color:#c0d1ac;}
.journey-step>strong{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:500;color:#edf2dd;}
.journey-arrow{font-size:23px;font-weight:400;line-height:1;}
.auth-appreciation{display:flex;gap:10px;align-items:center;margin-top:18px;color:#b8c9b2;font-size:11px;line-height:1.7;}
.auth-appreciation>span{font-size:23px;color:#d3e6a5;}
.auth-entry{width:100%;max-width:410px;justify-self:center;}
.auth-card{--gray-11:#52634f;--gray-10:#63715f;--gray-12:#213e2e;--gray-2:#fffef8;--line:#d8ddce;--red-3:#fbe8e3;--red-11:#ae3030;
  color-scheme:light;display:flex;flex-direction:column;gap:20px;padding:36px;color:#213e2e;background:#f5f4e9;border:1px solid #ffffff6b;border-radius:20px;box-shadow:0 20px 70px #07190f26;}
.auth-heading{display:flex;flex-direction:column;gap:10px;margin-bottom:5px;}
.auth-card-eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;color:#5a6d4c;}
.auth-title{font-size:28px;font-weight:600;letter-spacing:-.045em;line-height:1.3;}
.auth-sub{font-size:14px;line-height:1.6;max-width:30ch;color:#63715f;}
.auth-card .label{font-size:12px;font-weight:600;color:#344a36;margin-bottom:8px;}
.auth-card .input{height:50px;background:#fffef8;color:#213e2e;border:1px solid #d4dacb;border-radius:8px;box-shadow:none;padding-left:14px;}
.auth-card .input::placeholder{color:#7b8374;font-size:13px;}
.auth-card .input:focus{border-color:#507747;box-shadow:0 0 0 3px #50774719;outline:0;}
.auth-card .btn-block{height:50px;border-radius:8px;font-size:14px;}
.auth-card .btn-primary{background:#244b34;color:#f6f5e8;border:1px solid #244b34;box-shadow:0 3px 6px #163c2414;justify-content:space-between;padding:0 18px;}
.auth-card .btn-primary>span{font-size:23px;font-weight:400;transition:transform .2s ease;}
.auth-card .btn-primary:hover{background:#346343;border-color:#346343;}
.auth-card .btn-primary:hover>span{transform:translate(2px,-2px);}
.auth-card .btn-secondary{border:1px solid #cdd5c2;background:transparent;color:#3d5338;box-shadow:none;}
.auth-card .btn-secondary:hover{background:#e9eddd;}
.auth-card .btn-secondary>span{font-size:20px;}
.auth-card :focus-visible{outline:2px solid #507747;outline-offset:3px;}
.auth-password{position:relative;}
.auth-password .input{padding-right:76px;}
.password-toggle{position:absolute;top:2px;right:4px;bottom:2px;min-width:64px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:600;color:var(--gray-11);}
.password-toggle:focus-visible{outline-offset:-2px;}
.auth-caps{margin:6px 0 0;font-size:12px;font-weight:600;color:#9a6a12;}
.auth-help{margin:-8px 0 0;font-size:12px;line-height:1.6;color:var(--gray-10);text-align:center;}
/* Mod contoh: "atau" between the two buttons, and the note under "Cuba contoh" */
.auth-or{display:flex;align-items:center;gap:12px;margin:0;font-size:11px;color:var(--gray-10);}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line);}
.auth-note{margin-top:-8px;font-size:11.5px;line-height:1.7;color:var(--gray-10);text-align:center;}
.auth-entry-note{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:20px;font-size:11.5px;color:#b0c2ac;}
.auth-entry-note svg{width:14px;height:14px;flex-shrink:0;}
.auth-footer{display:flex;justify-content:space-between;gap:20px;padding:23px 0 max(25px,env(safe-area-inset-bottom));border-top:1px solid #d7e5cd20;font-size:11.5px;color:#a9bea5;}
.auth-footer-divider{margin:0 8px;color:#7b9376;}
.auth-footer>span:last-child>span{margin-left:12px;color:#d2e4ae;}
@keyframes auth-star-in{from{opacity:0;transform:rotate(-40deg) scale(.7);}to{opacity:1;transform:rotate(0) scale(1);}}
@keyframes auth-star-glow{0%,100%{transform:scale(1) rotate(0);text-shadow:0 0 0 #d7e7ac00;}50%{transform:scale(1.08) rotate(8deg);text-shadow:0 0 18px #d7e7ac66;}}
@keyframes auth-spark{0%,100%{opacity:0;transform:translate(0,8px) scale(.6) rotate(0);}
  20%{opacity:.9;}50%{opacity:.55;transform:translate(-6px,-10px) scale(1) rotate(45deg);}80%{opacity:.85;}90%{opacity:0;transform:translate(-10px,-22px) scale(.7) rotate(80deg);}}
@media (min-width:1500px){.auth-main{padding-top:70px;padding-bottom:70px;grid-template-columns:minmax(0,1fr) 460px;}.auth-entry{max-width:460px;}.auth-card{padding:44px;}
  .auth-welcome h1{font-size:clamp(66px,4.4vw,92px);}.auth-intro{font-size:16px;}.auth-journey{height:250px;}.auth-brand img{width:220px;}}
@media (min-width:2000px){.auth-main{grid-template-columns:minmax(0,1fr) 520px;}.auth-entry{max-width:520px;}}
@media (max-width:1000px) and (min-width:761px){
  .auth-main{grid-template-columns:minmax(0,1fr) 360px;gap:32px;}
  .auth-card{padding:28px;}
  .auth-welcome h1{font-size:43px;}
  .auth-desktop-break{display:none;}
  .journey-caption{display:none;}
  .journey-steps{left:12px;}
  .auth-eyebrow{font-size:10.5px;letter-spacing:.12em;}
}
@media (max-width:760px){
  .auth-screen{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right));}
  .auth-topbar{min-height:89px;gap:14px;}
  .auth-brand img{width:144px;}
  .auth-workspace{font-size:10px;letter-spacing:.1em;gap:8px;}
  .auth-main{grid-template-columns:1fr;gap:30px;padding:34px 0;}
  .auth-welcome{max-width:480px;justify-self:center;width:100%;}
  .auth-eyebrow{font-size:10.5px;letter-spacing:.13em;margin-bottom:16px;gap:9px;}
  .auth-eyebrow>span{width:18px;}
  .auth-welcome h1{font-size:clamp(34px,7.9vw,52px);}
  .auth-intro{font-size:13.5px;line-height:1.75;margin-top:16px;max-width:350px;}
  .auth-desktop-break{display:none;}
  .auth-journey,.auth-appreciation{display:none;}
  .auth-entry{max-width:480px;}
  .auth-card{padding:28px;gap:18px;}
  .auth-title{font-size:26px;}
  .auth-footer{flex-direction:column;align-items:center;text-align:center;gap:10px;padding-top:20px;font-size:11px;}
}
@media (max-width:360px){.auth-screen{padding-left:18px;padding-right:18px;}.auth-workspace{font-size:9.5px;letter-spacing:0;}.auth-brand img{width:130px;}}
@media (prefers-reduced-motion:reduce){.journey-star{animation:none;}.journey-sparks span{animation:none;opacity:.5;}.auth-card .btn-primary>span{transition:none;}}
.notice.is-demo{align-items:center;background:var(--blue-3);color:var(--blue-11);}
.notice.is-demo strong{font-weight:650;}

/* The first screen can paint while the ordered, deferred SDK scripts download. */
.startup{display:flex;flex-direction:column;align-items:center;gap:10px;min-height:280px;justify-content:center;padding:36px 24px;text-align:center;}
.startup-title{font-size:16px;font-weight:600;}
.startup-text{max-width:330px;font-size:13px;color:var(--gray-11);}
.loading-ring{display:block;width:28px;height:28px;margin-bottom:8px;border:3px solid var(--gray-4);border-top-color:var(--gray-11);border-radius:50%;animation:loading-turn .8s linear infinite;}
@keyframes loading-turn{to{transform:rotate(360deg);}}

/* Table navigation stays close to the rows, including on a narrow screen. */
.pagination{gap:12px;}
.pagination-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto;}
.pagination-label{font-size:12px;color:var(--gray-11);font-variant-numeric:tabular-nums;white-space:nowrap;}
.pagination .input.is-auto{min-width:80px;}

@media (max-width:639px){
  .page-head{align-items:flex-start;}
  .head-actions{width:100%;}
  .head-actions>.btn-primary{margin-left:auto;}
  .toolbar .field{max-width:none;}
  .toolbar>.segmented,.by-tabs{max-width:100%;overflow-x:auto;scrollbar-width:thin;}
  .toolbar>.segmented button,.by-tabs button{flex-shrink:0;}
  .card-head .chip-group{width:100%;margin-left:0;}
  .pagination-controls{width:100%;margin-left:0;justify-content:space-between;}
}

@media (max-width:767px),(pointer:coarse){
  .nav-item{min-height:44px;}
  .btn,.btn-sm,.input{min-height:44px;}
  .btn-icon{width:44px;min-width:44px;height:44px;}
  .month-nav{height:48px;}
  .segmented button,.chip,.check-row{min-height:40px;}
  .att-cell{min-height:40px;}
  .att-head .input,.sesi-select,.isu .input.is-auto{font-size:16px!important;}
  .att-head .input{min-width:130px;}
  .password-toggle{min-height:40px;}
}

/* ---------- Toast ---------- */
.toast{position:fixed;z-index:var(--z-toast);left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:356px;margin:0 auto;padding:12px 16px;border-radius:12px;
  background:var(--panel);color:var(--gray-12);box-shadow:var(--shadow-pop);font-size:13px;font-weight:500;line-height:1.4;pointer-events:none;
  opacity:0;transform:translateY(calc(100% + 16px));transition:opacity 400ms ease,transform 400ms ease;}
.toast[data-visible="true"]{opacity:1;transform:none;}
/* Kehadiran Pelajar: the class's to-do list under the students */
.todo-add{display:flex;gap:8px;padding:12px 16px 4px;}
.todo-add .input{flex:1;min-width:0;}
.todo-list{margin:0;padding:8px 16px 14px;list-style:none;display:flex;flex-direction:column;gap:2px;}
.todo-item{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;}
@media (hover:hover){.todo-item:hover{background:var(--gray-2);}}
.todo-check{display:flex;align-items:flex-start;gap:10px;flex:1;min-width:0;cursor:pointer;}
.todo-check .checkbox{margin-top:2px;flex-shrink:0;}
.todo-text{font-size:14px;line-height:1.45;overflow-wrap:anywhere;user-select:text;}
.todo-item.is-done .todo-text{color:var(--gray-9);text-decoration:line-through;}
.todo-meta{flex-shrink:0;font-size:12px;color:var(--gray-10);white-space:nowrap;}
@media (max-width:600px){.todo-item{flex-wrap:wrap;}.todo-meta{padding-left:28px;}}
/* Names a list could not add: a notice that stays until Tutup; the usual notice sits above it meanwhile */
.toast-sticky{max-width:380px;max-height:min(60vh,420px);overflow-y:auto;pointer-events:auto;font-weight:400;box-shadow:var(--shadow-pop),inset 3px 0 0 var(--red-9);}
body[data-sticky] #toast{bottom:calc(16px + var(--sticky-h,0px) + 10px + env(safe-area-inset-bottom,0px));}
.ts-head{display:flex;align-items:center;gap:6px;color:var(--red-11);font-size:14px;}
.ts-head .ph{font-size:18px;}
.ts-sub{margin:10px 0 4px;font-size:12px;font-weight:600;color:var(--gray-11);}
.ts-list{margin:0;padding:0 0 0 18px;font-weight:600;user-select:text;}
.ts-list li{padding:2px 0;}
.ts-hint{margin:4px 0 0;font-size:12px;color:var(--gray-10);}
.ts-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;}
@media (min-width:640px){.toast{left:auto;right:24px;bottom:24px;width:356px;margin:0;}}

/* ---------- Hover: only for precise pointers, so taps never leave a stuck hover ---------- */
@media (hover:hover) and (pointer:fine){
  .nav-item:not([aria-current]):not([aria-pressed="true"]):hover{background:var(--gray-3);color:var(--gray-12);}
  .topic-tab:not([aria-current]):hover{color:var(--gray-12);background:color-mix(in srgb,var(--gray-12) 4%,transparent);}
  .btn-primary:hover{background:color-mix(in srgb,var(--gray-12) 86%,var(--gray-1));}
  .btn-secondary:hover{background:var(--gray-2);}
  .btn-ghost:hover{background:var(--gray-3);color:var(--gray-12);}
  .btn-danger:not([data-armed="true"]):hover{background:var(--red-3);}
  .link-btn:hover,.back-link:hover{color:var(--gray-12);}
  .chip:not([aria-pressed="true"]):hover{background:var(--gray-2);color:var(--gray-12);}
  .segmented button:not([aria-pressed="true"]):hover{color:var(--gray-12);}
  button.list-row:hover .list-row-title{text-decoration:underline;}
  button.kls:hover{background:color-mix(in srgb,var(--c) 18%,var(--panel));}
  /* A coloured session cell (Berjalan, Diganti, Batal…) keeps its colour under the hover. */
  .kl-table tbody tr:hover td:not(.sesi-tint-green):not(.sesi-tint-amber):not(.sesi-glow-orange):not(.sesi-glow-red){background:var(--gray-2);}
  button.att-cell:hover{box-shadow:inset 0 0 0 1px var(--line-strong);}
  .check-row:hover{background:var(--gray-2);}
  .password-toggle:hover{color:var(--gray-12);background:var(--gray-3);}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}

/* Tetapan yuran */
.ty-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:12px;align-items:start;}


/* ---------- Guru: Cari Guru & Senarai Guru ---------- */
.notice .push{margin-left:auto;flex-shrink:0;}
.guru-filters>summary{display:flex;align-items:center;gap:8px;width:max-content;padding:8px 12px;border-radius:8px;background:var(--gray-3);font-size:13px;font-weight:600;cursor:pointer;touch-action:manipulation;}
.guru-filters[open]>summary{margin-bottom:12px;}
.guru-filter-body{display:flex;flex-direction:column;gap:16px;padding:16px;}
.guru-filter-body .label{margin-bottom:8px;}
.guru-count{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;font-size:13px;color:var(--gray-11);}
.guru-count strong{font-weight:600;color:var(--gray-12);}
.guru-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px;}
.guru-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;font-size:13px;color:var(--gray-11);}
.guru-card{display:flex;flex-direction:column;gap:14px;padding:16px;
  /* Tinted by Prestasi so the list can be scanned at a glance */
  background:color-mix(in srgb,var(--tint) 9%,var(--panel));box-shadow:0 0 0 1px color-mix(in srgb,var(--tint) 30%,transparent),var(--shadow-sm);}
:root[data-theme="dark"] .guru-card{background:color-mix(in srgb,var(--tint) 12%,var(--panel));}
.guru-card[data-perf="hijau"]{--tint:var(--green-9);}
.guru-card[data-perf="kuning"]{--tint:var(--amber-9);}
.guru-card[data-perf="merah"]{--tint:var(--red-9);}
.guru-card[data-perf="hitam"]{--tint:var(--gray-12);}
/* Labels sit on a pale backing so they don't dissolve into the tint */
.guru-card .tag:not(.tag-hit),.guru-card .badge,.guru-avatar{background:color-mix(in srgb,var(--panel) 72%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tint) 20%,transparent);}
.guru-card .badge-green{color:var(--green-11);}
.guru-card .badge-red{color:var(--red-11);}
.guru-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.guru-who{display:flex;align-items:center;gap:12px;min-width:0;}
.guru-avatar{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border-radius:10px;color:var(--gray-11);font-size:13px;font-weight:600;}
.guru-name{font-size:14px;font-weight:600;line-height:1.35;color:var(--gray-12);overflow-wrap:anywhere;}
.guru-id{font-size:12px;color:var(--gray-10);font-variant-numeric:tabular-nums;}
.guru-card-acts{display:flex;align-items:center;gap:4px;flex-shrink:0;margin:-4px -6px 0 0;}
.guru-contact{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;padding:4px 4px 4px 12px;border-radius:8px;
  background:color-mix(in srgb,var(--panel) 65%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tint,var(--gray-9)) 18%,transparent);}
.guru-contact.is-plain{display:inline-flex;min-height:0;padding:0;background:none;box-shadow:none;}
.guru-tel{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:13px;font-weight:500;color:var(--gray-12);user-select:all;}
.guru-tel .ph{color:var(--gray-9);}
.guru-copy{width:28px;height:28px;color:var(--gray-10);user-select:none;}
.guru-wa{color:var(--green-11);}
.guru-wa .ph{color:var(--green-9);}
.btn-icon.guru-wa{width:28px;height:28px;}
.guru-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--tint) 25%,transparent);font-size:12px;color:var(--gray-11);}
.guru-meta>span{display:inline-flex;align-items:center;gap:6px;}
.guru-meta .ph{font-size:16px;color:var(--gray-9);}
.guru-meta .push{margin-left:auto;}
.tag-hit{background:var(--blue-3);color:var(--blue-11);}
/* Prestasi: a referee-style card is the colour code; the label keeps it readable without colour */
.perf{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-weight:500;}
.perf::before{content:"";width:10px;height:14px;border-radius:2px;flex-shrink:0;background:var(--perf);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.18);}
.perf-hijau,.perf-select[data-perf="hijau"]{--perf:var(--green-9);color:var(--green-11);}
.perf-kuning,.perf-select[data-perf="kuning"]{--perf:var(--amber-9);color:var(--amber-11);}
.perf-merah,.perf-select[data-perf="merah"]{--perf:var(--red-9);color:var(--red-11);}
.perf-hitam,.perf-select[data-perf="hitam"]{--perf:var(--gray-12);color:var(--gray-12);font-weight:700;}
.perf-select{height:30px;font-size:12.5px;font-weight:600;border-color:transparent;background-color:color-mix(in srgb,var(--perf) 12%,var(--panel));}
/* Senarai Guru table: who in one cell, a second muted line under name and service length, equal-width Prestasi */
.sg-table td{vertical-align:middle;}
.sg-who{display:flex;align-items:center;gap:10px;min-width:220px;}
.sg-foto{flex:none;width:38px;height:38px;border-radius:50%;overflow:hidden;background:var(--gray-3);color:var(--gray-11);box-shadow:inset 0 0 0 1px var(--line);}
.sg-foto img,.sg-foto .gp-siluet{display:block;width:100%;height:100%;object-fit:cover;}
.sg-name{display:block;line-height:1.35;overflow-wrap:anywhere;}
.sg-name.name-btn,.guru-name .name-btn{text-align:left;font:inherit;font-weight:inherit;}
.sg-sub{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--gray-10);}
.sg-table .perf-select{width:250px;max-width:100%;}
.status-select[data-status="aktif"]{--perf:var(--green-9);color:var(--green-11);}
.status-select[data-status="pasif"]{--perf:var(--gray-9);color:var(--gray-11);}
.status-select[data-status="berhenti"]{--perf:var(--red-9);color:var(--red-11);}
.sg-table .status-select{width:130px;}
.sg-table .sg-mid{text-align:center;}
.sg-table .sg-mid .input,.sg-table .sg-mid .badge{margin:0 auto;}
/* Lined and centred like Yuran pelajar (by-sheet), the tutor column too. */
.sg-table.by-sheet .sg-who{justify-content:center;}
/* Each row tinted with its Prestasi colour (Hijau, Kuning, Merah; Blacklisted darker), a stripe at its start. */
.sg-row[data-perf="hijau"]{--row:var(--green-9);}
.sg-row[data-perf="kuning"]{--row:var(--amber-9);}
.sg-row[data-perf="merah"]{--row:var(--red-9);}
.sg-row[data-perf="hitam"]{--row:var(--gray-12);}
.sg-table.by-sheet .sg-row td{background:color-mix(in srgb,var(--row) 7%,var(--panel));}
.sg-table.by-sheet .sg-row[data-perf="hitam"] td{background:color-mix(in srgb,var(--row) 14%,var(--panel));}
.sg-table.by-sheet .sg-row td:first-child{box-shadow:inset 4px 0 0 var(--row);}
.sg-table.by-sheet .sg-who .min-w-0,.sg-table.by-sheet .sg-name.name-btn{text-align:center;}
@media (pointer:coarse){.guru-copy,.btn-icon.guru-wa{width:40px;height:40px;}}
@media (max-width:767px),(pointer:coarse){.perf-select{font-size:16px!important;}}
@media (hover:hover) and (pointer:fine){.guru-card:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--tint) 50%,transparent),0 4px 12px -4px rgba(0,0,0,.08);}}

/* Senarai Pelajar: summaries and sheet-style columns */
.student-summary>summary{padding:12px 16px;border-radius:10px;background:var(--gray-3);font-size:13px;font-weight:600;cursor:pointer;touch-action:manipulation;}
.student-summary>summary .muted{font-weight:400;}
.student-summary[open]>summary{margin-bottom:12px;}
.pl-sum{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:12px;align-items:start;}
.pl-sum-t td{padding-top:6px;padding-bottom:6px;}
.pl-sum-t .code{margin-right:6px;}
.table th.pl-group{text-align:center;font-weight:600;color:var(--gray-12);background:var(--gray-3);}
.pl-alamat{min-width:220px;max-width:320px;font-size:12px;color:var(--gray-11);}

/* Pengguna: akses */
.us-akses{padding:14px;border-radius:10px;background:var(--gray-2);box-shadow:inset 0 0 0 1px var(--line);}
.us-akses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:8px 16px;}
.us-akses-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--gray-12);}
.us-akses-row .input{width:150px;flex-shrink:0;}


/* Jadual: garis masa (timeline) */
.jd-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
/* Garis masa, drawn like a printed timetable: a ruled grid, hours across (each a numbered cell),
   a large day name down the side; the class in the middle of its block, the guru small at the bottom right. */
.tl{padding:12px 16px 16px;}
.tl-inner{min-width:1100px;display:flex;flex-direction:column;border:1.5px solid var(--gray-7);}
.tl-head,.tl-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:0;}
.tl-head{background:var(--gray-2);border-bottom:1.5px solid var(--gray-7);}
.tl-corner{display:flex;align-items:center;justify-content:center;padding:0 10px;font-size:16px;line-height:1;font-weight:600;color:var(--gray-12);border-right:1.5px solid var(--gray-7);}
.tl-hours{position:relative;min-height:36px;}
.tl-hour{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  border-left:1px solid var(--gray-6);text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums;}
.tl-hour:first-child{border-left:0;}
.tl-hour-n{font-size:16px;line-height:1;font-weight:600;color:var(--gray-12);}
.tl-row+.tl-row{border-top:1px solid var(--gray-6);}
.tl-row+.tl-head{border-top:1.5px solid var(--gray-7);}
.tl-day{display:flex;flex-wrap:wrap;align-items:baseline;align-content:center;justify-content:center;column-gap:6px;padding:8px 10px;text-align:center;border-right:1.5px solid var(--gray-7);}
.tl-day-name{font-size:20px;font-weight:500;letter-spacing:-.01em;color:var(--gray-12);}
.tl-row.is-weekend .tl-day-name{color:var(--blue-11);}
.tl-day-count{font-size:11px;color:var(--gray-10);}
.tl-track{position:relative;min-height:calc(var(--row) + 8px);background:var(--panel);}
.tl-grid{position:absolute;top:0;bottom:0;width:1px;background:var(--gray-6);pointer-events:none;}
.tl-block{--edge:0px;position:absolute;height:calc(var(--row) - 8px);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:4px 6px;overflow:hidden;border-radius:4px;text-align:center;}
.tl-block .kls-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:14px;font-weight:600;line-height:1.2;overflow-wrap:anywhere;}
/* The class and guru centred, each with the full width; the student count small in the top-left corner. */
.tl-top{display:block;width:100%;min-width:0;}
.tl-top .tl-time{position:absolute;left:6px;top:4px;}
.tl-top .kls-name{overflow-wrap:break-word;}
.tl-block .kls-guru{display:block;width:100%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;font-style:italic;font-weight:600;}
.tl-time{display:inline-flex;align-items:center;gap:2px;flex-shrink:0;font-size:10.5px;color:var(--gray-10);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;}
@media (hover:hover){button.tl-block:hover{z-index:2;box-shadow:inset var(--edge,3px) 0 0 var(--c),inset 0 0 0 1px var(--c),var(--shadow-sm);}}
/* Press, hold and drag a class: it lifts and follows the finger, with the day and time it would land on above it.
   A dropped class not saved yet is dashed until Sahkan susunan. */
button.tl-block{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
/* The others slide aside to make room; the dashed space is where the dragged class will go. */
.tl-block{transition:top 180ms var(--ease-out),transform 160ms var(--ease-out),background-color 150ms ease;}
.tl-track{transition:height 180ms var(--ease-out);}
.tl-ghost{position:absolute;height:calc(var(--row) - 8px);border-radius:4px;border:2px dashed var(--c);background:color-mix(in srgb,var(--c) 10%,transparent);pointer-events:none;transition:top 180ms var(--ease-out),left 120ms var(--ease-out);}
@media (prefers-reduced-motion:reduce){.tl-block,.tl-track,.tl-ghost{transition:none;}}
.tl-block.is-dragging{z-index:30;overflow:visible;cursor:grabbing;transition:none;animation:none;transform:scale(1.03);
  box-shadow:inset var(--edge,3px) 0 0 var(--c),inset 0 0 0 1px var(--c),0 12px 28px rgba(0,0,0,.22);background:color-mix(in srgb,var(--c) 18%,var(--panel));}
.tl-block.is-dragging::after{content:attr(data-drop);position:absolute;left:0;bottom:calc(100% + 6px);padding:4px 8px;border-radius:6px;
  background:var(--gray-12);color:var(--gray-1);font-size:11px;font-weight:600;white-space:nowrap;pointer-events:none;}
.tl-track.is-drop{background:color-mix(in srgb,var(--green-9) 8%,var(--gray-2));box-shadow:inset 0 0 0 1px var(--green-9);}
.tl-block.is-moved{outline:2px dashed var(--c);outline-offset:1px;}
.jd-drag-hint{display:inline-flex;align-items:center;gap:6px;margin:0;}
.jd-moves{align-items:center;flex-wrap:wrap;}
.jd-moves-acts{display:flex;gap:8px;}
@media (prefers-reduced-motion:reduce){.tl-block.is-dragging{transform:none;}}

/* Senarai Pelajar: edit in place; the action buttons stay in view on the right */
.pl-table td[data-edit]{cursor:text;transition:background-color 120ms ease;}
@media (hover:hover){.pl-table td[data-edit]:hover{background:var(--gray-3);box-shadow:inset 0 0 0 1px var(--line-strong);}}
.pl-table td.pl-editing{padding:6px 8px;background:var(--gray-2);}
.pl-ed-input{min-width:140px;height:32px;font-size:13px;}
textarea.pl-ed-input{min-width:220px;height:auto;}
.pl-table th.act,.pl-table td.act{position:sticky;right:0;z-index:1;background:var(--panel);box-shadow:-1px 0 0 var(--line);}
.pl-table thead th.act{background:var(--gray-2);}

/* Student review and phone-friendly records share the same search and pagination. */
.student-cards{display:none;}
.student-card{padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0;}
.student-card+.student-card{border-top:1px solid var(--line);}
.student-card-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:12px;}
.student-card-top .code{margin-right:6px;}
.student-card-name{align-self:flex-start;text-align:left;font-size:16px;font-weight:600;line-height:1.45;overflow-wrap:anywhere;}
.student-card-name:hover{text-decoration:underline;text-underline-offset:3px;}
.student-card-meta{font-size:13px;color:var(--gray-11);overflow-wrap:anywhere;}
.student-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px;}
.review-filter[aria-pressed="true"]{background:var(--amber-3);color:var(--amber-11);box-shadow:inset 0 0 0 1px var(--amber-9);}
.review-badge{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;padding:5px 8px;margin:4px 0;border-radius:6px;background:var(--amber-3);color:var(--amber-11);font-size:12px;font-weight:500;}
.review-records{display:grid;gap:12px;margin-top:16px;}
.review-record{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px;border:1px solid var(--line-strong);border-radius:12px;overflow-wrap:anywhere;}
.review-record h3{font-size:15px;}
.review-record .student-card-top{align-self:stretch;}
.review-record-acts{display:flex;flex-wrap:wrap;gap:8px;}
.select-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;font-size:13px;}
.select-bar-all{display:inline-flex;align-items:center;gap:8px;cursor:pointer;}
.select-bar-count{font-weight:600;margin-left:auto;}
.pl-tick,.select-bar input,.pl-tick-cell input{width:16px;height:16px;cursor:pointer;vertical-align:middle;}
.pl-tick-cell{width:32px;}
/* Senarai Pelajar: four columns, the whole row opens the student's details */
.pl-row{cursor:pointer;}
.pl-row td{vertical-align:middle;}
.pl-sub{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12px;color:var(--gray-10);}
.pl-name{min-width:220px;}
.pl-name .name-btn{text-align:left;}
.pl-parent{min-width:180px;color:var(--gray-11);}
.pl-chevron{display:inline-flex;color:var(--gray-8);}
@media (hover:hover) and (pointer:fine){.pl-row:hover td{background:var(--gray-2);}.pl-row:hover .pl-chevron{color:var(--gray-12);}}
.sd-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.sd-sec{padding:14px 0;border-top:1px solid var(--line);}
.sd-sec h3{margin-bottom:10px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gray-10);}
.sd-sec p{font-size:13px;overflow-wrap:anywhere;}
.sd-list{display:grid;gap:8px;margin:0;}
.sd-row{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:12px;font-size:13px;}
.sd-row dt{color:var(--gray-10);}
.sd-row dd{margin:0;color:var(--gray-12);overflow-wrap:anywhere;}
.sd-actions{display:flex;flex-wrap:wrap;gap:8px;padding-top:16px;border-top:1px solid var(--line);}
@media (max-width:479px){.sd-row{grid-template-columns:1fr;gap:2px;}}
.pl-table tr.is-selected td{background:var(--red-3, rgba(229,72,77,.08));}
.draft-summary{padding:12px 16px;border:1px solid var(--amber-9);border-radius:10px;background:var(--amber-3);color:var(--amber-11);}
.draft-summary summary{cursor:pointer;font-size:13px;font-weight:600;}
.draft-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.draft-links .btn{height:auto;min-height:36px;white-space:normal;text-align:left;padding:8px 12px;}
.draft-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:12px 16px;border:1px solid var(--line);border-radius:10px;color:var(--gray-11);font-size:13px;}
@media (max-width:767px){
  .student-cards{display:block;}
  .student-table,.student-table-hint{display:none;}
  .review-badge{min-height:40px;}
  .student-card-actions .btn{flex:1;}
}
/* Student list: the everyday filters stay visible; secondary controls expand on demand. */
.student-filters{padding:16px;}
.student-filter-main{display:grid;grid-template-columns:minmax(240px,2fr) repeat(2,minmax(150px,1fr)) minmax(120px,.8fr);gap:12px;}
.student-filter-main>div,.student-filter-extra>div{min-width:0;}
.student-filters .input{width:100%;min-width:0;}
.student-extra-filters{margin-top:12px;}
.student-extra-filters>summary{width:fit-content;cursor:pointer;font-size:13px;color:var(--gray-11);padding:6px 0;}
.student-extra-filters>summary .ph{margin-right:6px;}
.student-extra-filters>summary .badge{margin-left:6px;}
.student-filter-extra{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:end;padding-top:12px;margin-top:8px;border-top:1px solid var(--line);}
.student-list-bar,.student-list-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;}
.student-list-tools{margin-left:auto;}
.student-result-count{font-size:13px;color:var(--gray-11);}
.student-result-count strong{font-size:16px;color:var(--gray-12);font-variant-numeric:tabular-nums;}
.student-actions{position:relative;}
.student-actions>summary{list-style:none;}
.student-actions>summary::-webkit-details-marker{display:none;}
.student-actions-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:10;display:grid;gap:4px;width:max-content;max-width:calc(100vw - 32px);padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-sm);}
.student-actions-menu .btn{justify-content:flex-start;white-space:normal;text-align:left;height:auto;min-height:40px;}
@media (max-width:1199px){
  .student-filter-main{grid-template-columns:repeat(3,minmax(0,1fr));}
  .student-search{grid-column:1/-1;}
}
@media (max-width:599px){
  .student-actions-menu{left:0;right:auto;}
  .student-filters{padding:12px;}
  .student-filter-main{grid-template-columns:repeat(2,minmax(0,1fr));}
  .student-filter-main>div:last-child{grid-column:1/-1;}
  .student-filter-extra{grid-template-columns:1fr;}
  .student-extra-filters>summary{min-height:40px;align-content:center;}
  .student-list-tools{width:100%;margin-left:0;}
  .student-list-tools>*{flex:1;min-width:0;}
}
/* Borang: the second parent / guardian starts under a divider with its own remove button */
.penjaga2-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:12px;border-top:1px solid var(--line);}
.penjaga2-head .label{margin:0;font-weight:600;}
/* Senarai Pelajar: Pelajar MTA / Pelajar trial */
.pl-views{width:fit-content;max-width:100%;overflow-x:auto;}
/* Kehadiran Pelajar: Jenis kelas and Guru filters side by side */
.kh-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}

.kh-select{min-width:220px;max-width:100%;}
.kh-bar .field.kh-select{flex:0 1 280px;}
/* "Semua kelas": a heading above the group classes and above the private ones */
.kh-section{display:flex;align-items:baseline;gap:8px;margin:8px 0 0;font-size:16px;font-weight:600;}
.kh-section .muted{font-size:13px;font-weight:400;}
.pl-views button{gap:8px;font-size:14px;padding:0 14px;}
.pl-table td.act{white-space:nowrap;}
.pl-table td.act .btn{margin-right:8px;vertical-align:middle;}
/* Duplicate alert under the topic tabs: a bright red glow, one pulse every 1.4s, until the records are checked */
.review-alert{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border-radius:12px;background:var(--red-3);color:var(--red-11);border:1px solid var(--red-9);animation:review-glow 1.4s ease-in-out infinite;}
.review-alert-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;font-size:13px;}
.review-alert-head>span{flex:1;min-width:200px;}
.review-alert-list{display:flex;flex-wrap:wrap;gap:6px;}
.review-alert-item{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:4px 10px;border:1px solid color-mix(in srgb,var(--red-9) 45%,transparent);border-radius:8px;background:var(--panel);color:var(--gray-12);font-size:12.5px;font-weight:600;cursor:pointer;}
.review-alert-item .muted{font-weight:400;font-size:12px;}
.review-alert-more{align-self:center;font-size:12px;}
@keyframes review-glow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--red-9) 0%,transparent);}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--red-9) 45%,transparent),0 0 22px color-mix(in srgb,var(--red-9) 65%,transparent);}}
@media (prefers-reduced-motion:reduce){.review-alert{animation:none;}}
@media (hover:hover) and (pointer:fine){.review-alert-item:hover{border-color:var(--red-9);}}

/* Akaun Media: lock / setup form, then one card per account grouped by kind */
.ak-lock{max-width:460px;}
.ak-lock .card-title{margin-bottom:4px;}
.ak-lock-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.form-error{margin:0;font-size:13px;color:var(--red-11);}
.ak-group{margin-top:20px;}
.ak-group-title{margin:0 0 10px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--gray-11);}
.ak-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;}
.ak-card{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:12px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);}
.ak-head{display:flex;align-items:center;gap:10px;}
.ak-logo{flex-shrink:0;width:36px;height:36px;border-radius:9px;box-shadow:0 1px 2px rgba(0,0,0,.15);}
.ak-logo-lain{display:grid;place-items:center;color:var(--gray-11);background:var(--gray-3);}
.ak-name{display:flex;flex-direction:column;min-width:0;flex:1;}
.ak-name strong{font-size:14px;}
.ak-link{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--gray-10);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.ak-link:hover{color:var(--gray-12);}
.ak-rows{display:flex;flex-direction:column;gap:6px;margin:0;}
.ak-rows>div{display:grid;grid-template-columns:86px 1fr;align-items:center;gap:8px;}
.ak-rows dt{font-size:12px;color:var(--gray-10);}
.ak-rows dd{display:flex;align-items:center;gap:2px;min-width:0;margin:0;font-size:13px;}
.ak-rows dd .btn-icon{width:28px;height:28px;flex-shrink:0;}
.ak-pass{flex:1;min-width:0;overflow-wrap:anywhere;font-family:ui-monospace,Consolas,monospace;}
.ak-rows dd>.truncate{flex:1;min-width:0;}
.ak-nota{display:block;white-space:normal;color:var(--gray-11);}
.ak-preview{margin:4px 0 0;padding-left:18px;max-height:180px;overflow-y:auto;font-size:12.5px;line-height:1.6;color:var(--gray-11);}
.ak-logo-emoji{display:grid;place-items:center;font-size:21px;line-height:1;background:var(--gray-3);}
.ak-ikon-pick{display:flex;align-items:center;gap:8px;}
.ak-ikon-pick .ak-logo{width:32px;height:32px;}
.ak-ikon-pick select{flex:1;min-width:0;}
.ak-emoji-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;}
.ak-emoji-chip{width:32px;height:32px;border-radius:8px;font-size:18px;line-height:1;background:var(--gray-3);cursor:pointer;}
.ak-emoji-chip:hover{background:var(--gray-4);}
/* Akaun Media: password bar above the cards; a card showing its name only */
.ak-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:4px;padding:10px 14px;}
.ak-bar-text{flex:1 1 220px;font-size:13px;color:var(--gray-11);}
.ak-bar .input{width:200px;max-width:100%;}
.ak-card.is-name-only{justify-content:center;}
/* Akaun Media: one column per group listing the account names; details open in a window */
.ak-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:16px;align-items:start;}
.ak-stack{display:flex;flex-direction:column;gap:12px;min-width:0;}
.ak-col{padding:12px;border-radius:12px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);}
.ak-col-title{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;font-size:14px;font-weight:600;}
.ak-col-title span{font-size:12px;font-weight:500;color:var(--gray-10);}
.ak-list{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;}
.ak-item{display:flex;align-items:center;gap:8px;padding:6px;border-radius:8px;background:var(--gray-2);}
.ak-item .ak-logo{width:44px;height:44px;border-radius:11px;}
.ak-item .ak-logo-emoji{font-size:26px;}
.ak-item-name{flex:1;min-width:0;font-size:13px;font-weight:500;overflow-wrap:anywhere;}
.ak-col-empty{margin:0;}
.ak-detail-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.ak-detail-head .btn{margin-left:auto;}
.ak-detail-lock{margin-top:14px;}
/* Catatan Operasi: problems, their data and how they were resolved */
.ct-toolbar{display:flex;flex-wrap:wrap;gap:8px;}
.ct-toolbar input[type="search"]{flex:1 1 260px;}
.ct-toolbar select{flex:0 1 180px;}
.ct-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;}
.ct-card{display:flex;flex-direction:column;gap:8px;padding:14px;}
.ct-card.is-done{opacity:.85;}
.ct-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.ct-head .btn{margin-left:auto;}
.ct-title{margin:0;font-size:15px;font-weight:600;}
.ct-sec p{margin:2px 0 0;font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--gray-12);}
/* Registration form: first month share and discount */
.daftar-adj{max-width:860px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
/* Registration fee table: amounts that can be typed over */
.fee-manual-wrap{display:inline-flex;align-items:center;gap:3px;}
.fee-manual{width:96px;height:30px;padding:0 6px;text-align:right;font-size:13px!important;}
.fee-manual::placeholder{color:var(--gray-9);}
tr.is-manual td{background:color-mix(in srgb,var(--amber-9) 8%,transparent);}
/* Registration form: subjects to tick */
.subjek-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin-top:4px;}
.fee-need{color:var(--amber-11);font-weight:500;}
/* Jadual: filter by Jenis kelas, under the view switcher */
.jd-filter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:-4px 0 14px;}
.jd-pick{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--gray-11);}
.jd-pick .input{min-width:200px;}
.jd-filter .field.kh-select{display:block;width:240px;min-width:0;font-weight:400;}
.jd-filter .kh-kira{align-self:center;padding-top:18px;font-size:12.5px;}
.jd-chip{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 12px;border-radius:999px;font-size:13px;color:var(--gray-11);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;}
.jd-chip:hover{color:var(--gray-12);}
.jd-chip[aria-pressed="true"]{color:var(--gray-12);font-weight:500;background:var(--gray-3);box-shadow:inset 0 0 0 1.5px var(--gray-11);}

/* Program Cuti Sekolah: every table's text centred (headers, cells, names, numbers). */
.table.pcs-table th,.table.pcs-table td,.table.pcs-table .num{text-align:center;vertical-align:middle;}
.table.pcs-table .att-student,.table.pcs-table .att-head{justify-content:center;align-items:center;}
.table.pcs-table .act{text-align:center;}

/* Laporan Bulanan: shown as one A4 sheet (210 × 297 mm), white paper in both themes, every line centred. */
.lb-sheet{padding:8px 0 16px;}
.lb-paper{box-sizing:border-box;width:210mm;min-height:297mm;margin:0 auto;padding:10mm;background:#fff;color:#000;border-radius:2px;
  box-shadow:0 1px 3px rgba(0,0,0,.12),0 8px 24px rgba(0,0,0,.10);}
.lb-print .lb-t th,.lb-print .lb-t td,.lb-print .lb-t .r{text-align:center;}
.lb-print .lb-sec h3,.lb-print .lb-sign{text-align:center;}
.lb-print .lb-t tr.lb-good td{background:#e6f6eb;}
.lb-print .lb-t tr.lb-bad td{background:#fdecec;}
.lb-print .lb-muted{color:#666;}
.lb-print .lb-pending{color:#b45309;}

/* Maintenance > Sejarah Air Conditioner: one fold per place. */
.mt-ac{border-top:1px solid var(--line);}
.mt-ac > summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:12px 16px;cursor:pointer;list-style:none;}
.mt-ac > summary::-webkit-details-marker{display:none;}
.mt-ac > summary::before{content:"\25B8";color:var(--gray-10);transition:transform .15s;}
.mt-ac[open] > summary::before{transform:rotate(90deg);}
.mt-ac > summary:focus-visible{outline:2px solid var(--blue-9);outline-offset:-2px;}

/* Kemas Kini Portal: version cards fill the page; details open in the shared dialog. */
.side-versi{margin-left:4px;opacity:.7;font-variant-numeric:tabular-nums;}
.side-versi:empty{display:none;}
.kk-versions{--kk:#2f7d55;}
.kk-tl-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;font-size:12.5px;}
.kk-tl-title{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-11);}
.kk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;margin:0;padding:0;list-style:none;}
.kk-grid > li{min-width:0;display:flex;}
.kk-version{display:flex;flex-direction:column;align-items:stretch;gap:12px;width:100%;min-width:0;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--gray-12);font:inherit;text-align:left;cursor:pointer;box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s;}
.kk-version:hover{border-color:var(--green-9);box-shadow:0 4px 18px -10px var(--green-9);}
.kk-version:focus-visible{outline:2px solid var(--blue-9);outline-offset:3px;}
.kk-version.is-now{border-color:var(--green-8);background:linear-gradient(145deg,var(--green-2),var(--panel));}
.kk-version-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.kk-num{display:inline-flex;align-items:center;justify-content:center;min-width:56px;height:42px;padding:0 12px;border-radius:12px;background:var(--gray-3);color:var(--gray-12);font-size:20px;font-weight:750;font-variant-numeric:tabular-nums;}
.kk-version.is-now .kk-num{background:var(--kk);color:#fff;}
.kk-date{font-size:12px;color:var(--gray-11);}
.kk-version-title{font-size:17px;line-height:1.4;overflow-wrap:anywhere;}
.kk-version-theme{font-size:12.5px;color:var(--gray-11);}
.kk-version-counts{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px;font-size:11.5px;color:var(--gray-11);}
.kk-version-counts > span{padding:4px 8px;background:var(--gray-3);border-radius:6px;}
.kk-version-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-top:12px;border-top:1px solid var(--line);font-size:11.5px;color:var(--gray-11);}
.kk-version-foot > span:last-child{display:inline-flex;align-items:center;gap:5px;font-weight:650;color:var(--green-11);}
.dialog-body > .kk-card{padding:0;border:0;box-shadow:none;}
.dialog-body > .kk-card.is-now{box-shadow:none;}
@media(max-width:639px){.kk-grid{gap:12px;}.kk-version{padding:18px;}.kk-card .kk-chip{height:auto;min-height:28px;flex-wrap:wrap;padding:6px 10px;}.kk-card .is-code{margin-left:0;}}

.kk-card{--kk:#2f7d55;padding:20px 22px 22px;}
.kk-card.is-now{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--kk) 45%,transparent);}
.kk-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.kk-head > .min-w-0{display:flex;flex-direction:column;gap:3px;flex:1 1 280px;}
.kk-versi{flex:none;display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:16px;
  background:linear-gradient(145deg,var(--kk),color-mix(in srgb,var(--kk) 70%,#000));color:#fff;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;
  box-shadow:0 8px 18px -10px var(--kk);}
.kk-kicker{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--green-11);}
.kk-live{width:7px;height:7px;border-radius:50%;background:var(--green-9);box-shadow:0 0 0 3px color-mix(in srgb,var(--green-9) 25%,transparent);}
.kk-title{margin:0;font-size:19px;font-weight:700;line-height:1.3;color:var(--gray-12);}
.kk-sub{font-size:13px;}
.kk-nav{display:flex;gap:4px;}
.kk-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px;padding-bottom:16px;border-bottom:1px solid var(--line);}
.kk-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;font-size:12.5px;background:var(--kk-bg);color:var(--kk-fg);}
.kk-card .is-new{--kk-bg:var(--green-3);--kk-fg:var(--green-11);}
.kk-card .is-fix{--kk-bg:var(--blue-3);--kk-fg:var(--blue-11);}
.kk-card .is-del{--kk-bg:var(--red-3);--kk-fg:var(--red-11);}
.kk-card .is-code{--kk-bg:var(--gray-3);--kk-fg:var(--gray-11);margin-left:auto;}
.kk-bahagian{margin-top:18px;}
.kk-label{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--kk-fg);}
.kk-label > .ph{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;background:var(--kk-bg);font-size:14px;}
.kk-count{margin-left:2px;padding:1px 7px;border-radius:999px;background:var(--kk-bg);font-size:11px;}
/* The changes of one topic together, under its name. */
.kk-topik + .kk-topik{margin-top:14px;}
.kk-topik-title{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-family:var(--heading-font,inherit);font-size:13.5px;font-weight:700;color:var(--gray-12);}
/* Each change a small card; two columns on a wide screen. */
.kk-perkara{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));gap:8px;margin:0;padding:0;list-style:none;}
.kk-perkara > li{position:relative;padding:11px 14px 11px 18px;border:1px solid var(--line);border-radius:10px;background:var(--panel);
  line-height:1.55;color:var(--gray-11);font-size:13.5px;}
.kk-perkara > li::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--kk-fg);opacity:.7;}

/* Profil guru (the tutor's name in Senarai Guru / Cari Guru): who, the week's classes, photos of them teaching. */
.gp{display:flex;flex-direction:column;gap:18px;}
/* First row: the details on the left, the main photo (newest) on the right. */
.gp-hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start;}
.gp-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;margin:0;}
.gp-info > div{min-width:0;}
.gp-info dt{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-10);margin-bottom:3px;}
.gp-info dd{margin:0;font-size:14px;color:var(--gray-12);overflow-wrap:anywhere;}
.gp-badges{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.gp-main{position:relative;}
.gp-main-img{aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--gray-3);color:var(--gray-11);box-shadow:inset 0 0 0 1px var(--line);}
.gp-main-img img{display:block;width:100%;height:100%;object-fit:cover;}
/* Tambah / Tukar gambar sits on the photo. */
.gp-main .gp-add{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);margin:0;white-space:nowrap;box-shadow:0 4px 14px -6px rgba(0,0,0,.35);}
.gp-siluet{display:block;width:100%;height:100%;}
@media (max-width: 760px){.gp-hero{grid-template-columns:1fr;}.gp-main{order:-1;width:180px;margin:0 auto;}.gp-info{grid-template-columns:1fr 1fr;}}
.gp-sec{border-top:1px solid var(--line);padding-top:14px;}
.gp-h{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 12px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-11);}
.gp-sum{font-size:12.5px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--gray-10);}
.gp-bulan{height:30px;padding:0 28px 0 10px;font-size:12.5px;font-weight:600;text-transform:none;letter-spacing:0;}
.gp-add{cursor:pointer;}
/* The month's classes, as the Yuran pelajar table. */
.gp-jadual{width:100%;}
.gp-jadual .gp-hari{font-weight:700;color:var(--gray-12);background:var(--gray-2);}
/* A day with no class: diagonal stripes across the row, "Tiada kelas" on a small label in the middle. */
.gp-jadual .gp-kosong .gp-hari{color:var(--gray-10);}
.gp-jadual.by-sheet tbody tr:last-child td{border-bottom:1px solid var(--line);} /* the sheet closes under Ahad */
.gp-jadual td.gp-tiada{height:34px;background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--gray-12) 14%,transparent) 0 2px,transparent 2px 9px),var(--gray-2);}
.gp-jadual td.gp-tiada span{display:inline-block;padding:1px 10px;border-radius:999px;font-size:11.5px;color:var(--gray-11);background:var(--panel);}

/* Ringkasan Pengurusan: one page, every branch. */
/* Ringkasan Pengurusan: Semua cawangan / one branch on top, then four parts, two by two on a desktop and one under
   another on a phone (Laporan harian, Kelas, Perlu dibayar & isu, Bayaran). */
.rk-caw{margin-bottom:12px;}
.rk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start;}
@media (max-width:1100px){.rk-grid{grid-template-columns:minmax(0,1fr);}}
.rk-q{min-width:0;margin:0;}
.rk-pad{padding:0 16px 16px;}
.rk-q .by-tiles{grid-template-columns:repeat(auto-fill,minmax(min(100%,130px),1fr));}
.rk-q .by-tile{box-shadow:inset 0 0 0 1px var(--line);}
.rk-day{display:flex;align-items:center;gap:2px;margin-left:auto;}
.rk-day-label{min-width:96px;font-size:13px;font-weight:600;text-align:center;color:var(--gray-12);white-space:nowrap;}
.rk-hr{padding:10px 0;border-top:1px solid var(--line);}
.rk-hr:first-child{padding-top:0;border-top:0;}
.rk-hr-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:6px;font-size:13px;}
.rk-hr-head:only-child{margin-bottom:0;}
.rk-sub{display:flex;align-items:center;gap:6px;margin:4px 16px 8px;font-size:13.5px;font-weight:600;color:var(--gray-12);}
.rk-list{display:flex;flex-direction:column;margin:0 0 12px;padding:0 16px;list-style:none;font-size:13px;}
.rk-list li{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--line);}
.rk-list li:first-child{border-top:0;}
.rk-list-text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.rk-year tr.is-cur td{background:color-mix(in srgb,var(--green-9) 8%,transparent);font-weight:600;}
.rk-q .rk-pay{padding:0 16px 12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.rk-q .rk-pay-item strong{font-size:17px;}
@media (max-width:640px){.rk-day{margin-left:0;width:100%;justify-content:space-between;}.rk-list-text{white-space:normal;}}
.rk-table td{vertical-align:middle;}
.rk-pct{display:inline-block;min-width:52px;padding:2px 8px;border-radius:999px;font-weight:700;font-variant-numeric:tabular-nums;}
.rk-pct.is-good{background:var(--green-3);color:var(--green-11);}
.rk-pct.is-mid{background:var(--amber-3);color:var(--amber-11);}
.rk-pct.is-low{background:var(--red-3);color:var(--red-11);}
.rk-pay{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;padding:0 16px 16px;}
.rk-pay-item{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--gray-2);}
.rk-pay-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-11);}
.rk-pay-item strong{font-size:20px;color:var(--gray-12);}