/* Kolej Vokasional Shah Alam — Sistem Rekod Asrama
   Liquid Glass design system: layered translucent glass, soft ambient
   light, Apple-style restraint. Variable names kept stable so inline
   var(--line)/var(--muted) references in the HTML keep working. */

:root{
  /* ---- base tokens (kept for compatibility) ---- */
  --bg:#0a0d16;
  --surface:#171d2b;
  --surface2:#212a3f;
  --text:#f5f7ff;
  --muted:#aab4cf;
  --accent:#8da9ff;
  --accent2:#5fd0a8;
  --danger:#ff8695;
  --line:rgba(255,255,255,.14);
  --radius:20px;

  /* ---- glass material tokens ---- */
  --glass-bg:rgba(255,255,255,.055);
  --glass-bg-weak:rgba(255,255,255,.03);
  --glass-bg-strong:rgba(255,255,255,.10);
  --glass-bg-nav:rgba(18,22,34,.55);
  --glass-bg-modal:rgba(22,27,42,.72);
  --glass-bg-input:rgba(255,255,255,.045);
  --glass-border:rgba(255,255,255,.14);
  --glass-border-strong:rgba(255,255,255,.22);
  --glass-highlight:inset 0 1px 0 rgba(255,255,255,.10);
  --glass-shadow:0 20px 50px rgba(0,0,0,.38), 0 2px 8px rgba(0,0,0,.22);
  --glass-shadow-lg:0 30px 80px rgba(0,0,0,.48), 0 4px 14px rgba(0,0,0,.3);
  --glass-blur:20px;
  --glass-blur-strong:34px;
  --glass-blur-weak:10px;

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:22px;
  --radius-xl:28px;

  --ease:cubic-bezier(.4,0,.2,1);
  --dur-1:180ms;
  --dur-2:300ms;
  --dur-3:480ms;
}

*{box-sizing:border-box}

body{
  margin:0;color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Inter,Roboto,system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* ---- ambient spatial background (calm, two soft light sources) ---- */
body::before,body::after{
  content:"";position:fixed;z-index:-1;border-radius:50%;pointer-events:none;
  filter:blur(90px);opacity:.55;
}
body::before{
  width:60vw;height:60vw;top:-18vw;right:-14vw;
  background:radial-gradient(circle,#3a5fd9 0%,transparent 70%);
}
body::after{
  width:46vw;height:46vw;bottom:-16vw;left:-10vw;
  background:radial-gradient(circle,#1f8f74 0%,transparent 72%);
  opacity:.4;
}

.shell{display:flex;flex-direction:column;min-height:100vh}

/* ---- floating glass navigation ---- */
header{
  display:flex;align-items:center;gap:18px;
  margin:calc(env(safe-area-inset-top,0px) + 12px) 16px 0;
  padding:0 20px;height:54px;
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  background:var(--glass-bg-nav);
  box-shadow:var(--glass-shadow),var(--glass-highlight);
  position:sticky;top:12px;z-index:40;
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  header{backdrop-filter:blur(var(--glass-blur)) saturate(180%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%)}
}
header strong{letter-spacing:.02em;font-weight:650}
header #clock{margin:auto;font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted);font-size:14px}
header button{
  border:1px solid transparent;background:none;color:var(--text);font-size:18px;
  cursor:pointer;padding:6px 10px;border-radius:var(--radius-sm);
  transition:background var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
header button:hover{background:var(--glass-bg-strong);border-color:var(--glass-border)}
header button:active{transform:scale(.92)}
.status-dot{color:var(--accent2);font-size:12px;font-weight:600}

.desktop{
  flex:1;padding:clamp(28px,5vw,64px) clamp(20px,4vw,56px)
    calc(clamp(28px,5vw,64px) + env(safe-area-inset-bottom,0px));
  max-width:920px;width:100%;margin:0 auto;
}
.app{display:none}
.app.visible{display:block;animation:fade var(--dur-3) var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.eyebrow{font-size:12px;letter-spacing:.15em;color:var(--accent);font-weight:800;margin:0;text-transform:uppercase}
h1{font-size:clamp(30px,4.5vw,46px);line-height:1.08;margin:10px 0 12px;font-weight:680;letter-spacing:-.01em}
.lead{font-size:18px;color:var(--muted);margin:0 0 30px;max-width:60ch;line-height:1.5}

/* ---- glass panel (main card surface) ---- */
.panel{
  max-width:840px;padding:24px;margin-bottom:22px;
  border:1px solid var(--glass-border);border-radius:var(--radius-lg);
  background:var(--glass-bg);
  box-shadow:var(--glass-shadow),var(--glass-highlight);
  transition:box-shadow var(--dur-2) var(--ease);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .panel{backdrop-filter:blur(var(--glass-blur)) saturate(160%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%)}
}
.panel-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.panel-head h2{margin:0;font-size:20px;font-weight:640}
.panel-head span{color:var(--muted);font-size:13px}

/* ---- location step ---- */
.loc-body{display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:center}
.loc-visual{display:flex;justify-content:center}
.fence{
  width:140px;height:140px;border-radius:50%;
  border:1.5px dashed var(--glass-border-strong);position:relative;
  background:radial-gradient(circle,rgba(141,169,255,.10) 0,transparent 72%);
  box-shadow:var(--glass-highlight);
  display:flex;align-items:center;justify-content:center;
  transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.dot{width:14px;height:14px;border-radius:50%;background:var(--muted);transition:background var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.fence.scanning{border-color:var(--accent)}
.fence.scanning .dot{background:var(--accent);animation:pulse 1.1s infinite}
.fence.inside{border-color:var(--accent2);border-style:solid;box-shadow:var(--glass-highlight),0 0 30px -8px rgba(95,208,168,.55)}
.fence.inside .dot{background:var(--accent2);box-shadow:0 0 0 9px rgba(95,208,168,.18)}
.fence.outside{border-color:var(--danger)}
.fence.outside .dot{background:var(--danger)}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.4}}
.loc-info .notice{margin:0 0 14px;line-height:1.55;color:var(--muted)}
.loc-stats{display:flex;gap:18px;margin-bottom:16px;flex-wrap:wrap}
.loc-stats div{display:flex;flex-direction:column}
.loc-stats small{color:var(--muted);font-size:11px}
.loc-stats b{font-size:18px;font-weight:640}
#inOut.inside{color:var(--accent2)}#inOut.outside{color:var(--danger)}

/* ---- buttons ---- */
.btn-primary{
  padding:12px 20px;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-sm);
  cursor:pointer;font-weight:640;font-size:15px;letter-spacing:-.005em;
  color:#0d1220;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 92%,white 8%),var(--accent));
  box-shadow:0 10px 24px -8px color-mix(in srgb,var(--accent) 55%,transparent),var(--glass-highlight);
  transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),filter var(--dur-1) var(--ease);
}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-primary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none}
.btn-primary.big{padding:15px 30px;font-size:16px;width:100%}
.btn-primary.ok{background:linear-gradient(180deg,color-mix(in srgb,var(--accent2) 92%,white 8%),var(--accent2))}

.btn-ghost{
  padding:9px 16px;border:1px solid var(--glass-border);border-radius:var(--radius-sm);
  background:var(--glass-bg-weak);color:var(--text);cursor:pointer;font-weight:600;font-size:14px;
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .btn-ghost{backdrop-filter:blur(var(--glass-blur-weak));-webkit-backdrop-filter:blur(var(--glass-blur-weak))}
}
.btn-ghost:hover{background:var(--glass-bg-strong);border-color:var(--glass-border-strong)}
.btn-ghost:active{transform:scale(.97)}
.btn-ghost:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.btn-danger{
  padding:9px 16px;border:1px solid rgba(255,134,149,.28);border-radius:var(--radius-sm);
  background:rgba(255,134,149,.12);color:var(--danger);cursor:pointer;font-weight:640;font-size:14px;
  transition:background var(--dur-1) var(--ease),transform var(--dur-1) var(--ease);
}
.btn-danger:hover{background:rgba(255,134,149,.20)}
.btn-danger:active{transform:scale(.97)}
.btn-danger:focus-visible{outline:2px solid var(--danger);outline-offset:2px}

/* ---- form ---- */
.grid-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field span{font-size:13px;color:var(--muted);font-weight:600}
input,select{
  width:100%;padding:12px 13px;border:1px solid var(--glass-border);border-radius:var(--radius-sm);
  background:var(--glass-bg-input);color:var(--text);font:inherit;
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  input,select{backdrop-filter:blur(var(--glass-blur-weak));-webkit-backdrop-filter:blur(var(--glass-blur-weak))}
}
input::placeholder{color:var(--muted);opacity:.7}
input:focus,select:focus{
  outline:none;border-color:color-mix(in srgb,var(--accent) 70%,var(--glass-border));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent);
  background:var(--glass-bg-strong);
}
input[readonly]{background:var(--glass-bg-weak);color:var(--accent2)}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%238da9ff' d='M6 8 0 0h12z'/></svg>");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.waktu-row div{display:flex;gap:8px;flex-wrap:wrap}
.submit-row{display:flex;gap:10px;margin-top:6px}
#submitBtn{margin-top:8px}
#formPanel[aria-hidden="true"]{opacity:.4;pointer-events:none;filter:saturate(.5)}
#formPanel{transition:opacity var(--dur-2) var(--ease),filter var(--dur-2) var(--ease)}

/* ---- result ---- */
.done-body{text-align:center;padding:18px 0}
.big-check{
  width:74px;height:74px;border-radius:50%;color:#06231a;font-size:38px;font-weight:800;
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
  background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--accent2) 96%,white 12%),var(--accent2));
  box-shadow:0 14px 34px -10px rgba(95,208,168,.6),var(--glass-highlight);
  animation:pop var(--dur-3) var(--ease);
}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.done-body h3{margin:0 0 8px;font-weight:640}
.done-body .notice{margin:0 0 20px;color:var(--muted)}

.page-foot{text-align:center;padding:24px 20px calc(24px + env(safe-area-inset-bottom,0px));color:var(--muted)}
.page-foot a{color:var(--accent);text-decoration:none}
.page-foot a:hover{text-decoration:underline}

/* ---- toast ---- */
#toast{
  position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%) translateY(80px);
  background:var(--glass-bg-modal);border:1px solid var(--glass-border);color:var(--text);
  padding:14px 22px;border-radius:var(--radius-md);font-weight:600;
  box-shadow:var(--glass-shadow-lg);z-index:50;
  transition:transform var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease);
  max-width:90vw;opacity:0;
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  #toast{backdrop-filter:blur(var(--glass-blur-strong)) saturate(180%);-webkit-backdrop-filter:blur(var(--glass-blur-strong)) saturate(180%)}
}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1}
#toast.err{border-color:rgba(255,134,149,.4);color:var(--danger)}
#toast.ok{border-color:rgba(95,208,168,.4);color:var(--accent2)}

/* light theme */
body.light{
  --bg:#eef1f8;--surface:#fff;--surface2:#e6ebf8;--text:#161c2b;--muted:#5b6785;--line:rgba(20,30,60,.12);
  --glass-bg:rgba(255,255,255,.55);--glass-bg-weak:rgba(255,255,255,.4);--glass-bg-strong:rgba(255,255,255,.72);
  --glass-bg-nav:rgba(255,255,255,.6);--glass-bg-modal:rgba(255,255,255,.78);--glass-bg-input:rgba(255,255,255,.6);
  --glass-border:rgba(20,30,60,.10);--glass-border-strong:rgba(20,30,60,.18);
  --glass-highlight:inset 0 1px 0 rgba(255,255,255,.8);
  --glass-shadow:0 16px 40px rgba(30,40,80,.10), 0 2px 8px rgba(30,40,80,.06);
  --glass-shadow-lg:0 24px 60px rgba(30,40,80,.14);
  background:var(--bg);
}
body.light::before{opacity:.35}
body.light::after{opacity:.25}
body.light select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%234a63c9' d='M6 8 0 0h12z'/></svg>")}
body.light .btn-primary{color:#0b1020}
body.light .big-check{color:#0b2b21}

/* ---- admin dashboard ---- */
/* [hidden] must beat every other display rule (incl. .modal flex) */
[hidden]{display:none !important}
.modal:not([hidden]){
  position:fixed;inset:0;background:rgba(4,6,12,.55);
  display:flex;align-items:center;justify-content:center;z-index:60;
  padding:20px;animation:overlayIn var(--dur-2) var(--ease);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .modal:not([hidden]){backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
.dash-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:24px}
.dash-actions{display:flex;gap:8px;flex-wrap:wrap}
.stat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.stat{
  padding:20px;border:1px solid var(--glass-border);border-radius:var(--radius-lg);
  background:var(--glass-bg);text-align:left;box-shadow:var(--glass-shadow),var(--glass-highlight);
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .stat{backdrop-filter:blur(var(--glass-blur)) saturate(160%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%)}
}
.stat:hover{transform:translateY(-2px)}
.stat b{display:block;font-size:32px;line-height:1;font-weight:680;letter-spacing:-.01em}
.stat span{color:var(--muted);font-size:13px}
.stat-bars{
  padding:20px;border:1px solid var(--glass-border);border-radius:var(--radius-lg);
  background:var(--glass-bg);margin-bottom:22px;box-shadow:var(--glass-shadow),var(--glass-highlight);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .stat-bars{backdrop-filter:blur(var(--glass-blur)) saturate(160%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%)}
}
.stat-bars h3{margin:0 0 14px;font-size:16px;font-weight:640}
.bar-row{display:grid;grid-template-columns:60px 1fr 40px;align-items:center;gap:12px;padding:5px 0}
.bar-row>span{color:var(--muted);font-size:13px}
.bar{height:10px;background:var(--glass-bg-weak);border-radius:6px;overflow:hidden;border:1px solid var(--glass-border)}
.bar>div{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:6px;transition:width .5s var(--ease)}
.bar-row b{text-align:right;font-size:13px}
.filters{
  display:flex;gap:10px;padding:14px 20px;border-bottom:1px solid var(--line);
  flex-wrap:wrap;background:var(--glass-bg-weak);
}
.filters input,.filters select{width:auto;min-width:120px;flex:1;padding:9px 11px}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{
  text-align:left;color:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap;
  background:var(--glass-bg-weak);position:sticky;top:0;
}
tbody td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr{transition:background var(--dur-1) var(--ease)}
tbody tr:hover{background:var(--glass-bg-strong)}
.pill{
  display:inline-block;padding:3px 10px;border-radius:20px;
  background:var(--glass-bg-strong);border:1px solid var(--glass-border);font-size:12px;font-weight:640;
}
.row-actions{display:flex;gap:6px;white-space:nowrap}
.btn-ghost.sm,.btn-danger.sm{padding:6px 11px;font-size:12px}
#loginView .notice code{background:var(--glass-bg-strong);padding:2px 7px;border-radius:6px;color:var(--accent2)}

/* ---- modal ---- */
.modal-card{
  width:100%;max-width:560px;background:var(--glass-bg-modal);border:1px solid var(--glass-border-strong);
  border-radius:var(--radius-lg);padding:24px;box-shadow:var(--glass-shadow-lg),var(--glass-highlight);
  max-height:90vh;overflow:auto;animation:modalIn var(--dur-2) var(--ease);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .modal-card{backdrop-filter:blur(var(--glass-blur-strong)) saturate(180%);-webkit-backdrop-filter:blur(var(--glass-blur-strong)) saturate(180%)}
}
@keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.modal-card .panel-head{margin-bottom:18px}
.modal hr{margin:22px 0;border:0;border-top:1px solid var(--line)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

@media(max-width:680px){
  header{margin:calc(env(safe-area-inset-top,0px) + 8px) 10px 0;padding:0 14px}
  .grid-form{grid-template-columns:1fr}
  .loc-body{grid-template-columns:1fr;justify-items:center}
  .loc-info{width:100%}
  .stat-cards{grid-template-columns:1fr}
  .filters input,.filters select{min-width:0}
}