/* ---------- 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;}
/* 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;}
/* 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;}}
.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;}
.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);}
.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);}
.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);}
.hq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
.hq-item{display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 10px;border:0;border-radius:9px;background:var(--gray-2);box-shadow:inset 0 0 0 1px var(--line);
  font:inherit;font-size:13px;font-weight:600;color:var(--gray-12);text-align:left;text-decoration:none;cursor:pointer;}
.hq-item .ph{flex-shrink:0;font-size:17px;color:var(--brand,var(--gray-11));}
.hq-item.is-link{font-weight:500;color:var(--gray-11);background:transparent;}
.hq-item.is-link .ph{color:var(--gray-9);}
@media (hover:hover){.hq-item:hover{box-shadow:inset 0 0 0 1px var(--line-strong);background:var(--gray-3);}}
.hq-item:focus-visible{outline:2px solid var(--blue-9);outline-offset:1px;}
.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);}
/* 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="cuti"]{background: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-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-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(5),.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 */
.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);}

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

/* 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{padding:3pt 5pt;}
.pv-att .pv-off{font-size:7.5pt;color:#999;}
.pv-att .pv-absent{font-weight:700;color:#b91c1c;}
.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;}
@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;}
.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;}
/* Jadual, Format lama: the old timetable sheet */
.fl-card{overflow:hidden;}
.fl-table{width:100%;min-width:960px;border-collapse:separate;border-spacing:0;font-size:12.5px;}
.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[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;}
@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) */
.own-sesi-list{display:flex;flex-wrap:wrap;gap:6px;}
.own-sesi{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border-radius:8px;background:var(--gray-2);min-width:104px;}
.own-sesi-date{font-size:11.5px;color:var(--gray-10);white-space:nowrap;}
.own-sesi-date.is-today{color:var(--gray-12);font-weight:600;}
/* 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);}
/* 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="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-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="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.is-off{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--gray-8);cursor:default;}
.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;}

/* ---------- Payroll Guru ---------- */
.pr-table tbody tr[data-act]{cursor:pointer;}
.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;}
.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;}
.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;}
.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);}

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

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

/* ---------- 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-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-who .guru-avatar{width:34px;height:34px;border-radius:9px;font-size:12px;background:var(--gray-3);color:var(--gray-11);}
.sg-name{display:block;line-height:1.35;overflow-wrap:anywhere;}
.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;}
@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;}
.danger-zone{margin-top:24px;border-color:var(--red-9);}
.danger-zone .card-body{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:16px;}
.wipe-list{margin:12px 0;padding-left:0;list-style:none;display:grid;gap:6px;}
.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-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);}