/* Absensi RSMH — mobile-first, no build step, no framework.
   Designed to be thumb-operable on a phone at a busy check-in desk. */

:root{
  --green:#0d5c3f; --green-d:#094430; --green-l:#e7f3ee;
  --ink:#16241f; --muted:#6b7c76; --line:#dfe6e3; --bg:#f5f7f6; --card:#fff;
  --red:#b3261e; --red-l:#fdecea; --amber:#8a5a00; --amber-l:#fff6e0;
  --radius:14px; --shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.06);
}
*{box-sizing:border-box}

/* The [hidden] attribute is only display:none in the UA stylesheet, so ANY
   author rule that sets display (.sheet uses flex, .badge uses inline-block)
   silently defeats it — leaving an invisible full-screen overlay that eats
   every tap. This one line is load-bearing: do not remove it. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
}
main{max-width:760px;margin:0 auto;padding:16px}
a{color:var(--green)}

/* ---------- top bar ---------- */
.topbar{
  display:flex;align-items:center;gap:12px;background:var(--green);color:#fff;
  padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));
  position:sticky;top:0;z-index:20;
}
.brand{color:#fff;text-decoration:none;font-weight:700;letter-spacing:-.2px}
.brand span{opacity:.75;font-weight:400}
/* Six nav items do not fit on a phone. The nav scrolls horizontally and the
   logout control never shrinks, so "keluar" is always reachable. */
.topbar nav{
  display:flex;gap:4px;margin-left:auto;min-width:0;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.topbar nav::-webkit-scrollbar{display:none}
.topbar nav a{
  color:#fff;text-decoration:none;padding:7px 12px;border-radius:999px;
  font-size:14px;opacity:.8;white-space:nowrap;flex:0 0 auto;
}
.topbar nav a.on{background:rgba(255,255,255,.18);opacity:1;font-weight:600}
/* The user's name plus a clearly labelled Logout button. A bare "x" was not
   obvious enough — people could not tell it was the way out. */
.userbox{display:flex;align-items:center;gap:9px;flex:0 0 auto;min-width:0}
.userbox .who{
  font-size:13px;opacity:.85;max-width:130px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.logout{margin:0;flex:0 0 auto}
.logout button{
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  color:#fff;font:inherit;font-size:13px;font-weight:600;
  padding:7px 13px;border-radius:999px;cursor:pointer;white-space:nowrap;
}
.logout button:hover{background:rgba(255,255,255,.26)}
.logout button:active{transform:translateY(1px)}
.logout button:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media(max-width:700px){
  .topbar{gap:8px;padding-left:11px;padding-right:11px}
  .brand span{display:none}
  .topbar nav a{padding:7px 9px;font-size:13.5px}
  /* Name is desktop-only; the labelled button stays, so "Logout" is never a mystery. */
  .userbox .who{display:none}
  .logout button{padding:8px 12px;min-height:36px}
}

/* ---------- flashes ---------- */
.flash{max-width:760px;margin:12px auto 0;padding:11px 14px;border-radius:10px;font-size:14px}
.flash.ok{background:var(--green-l);color:var(--green-d)}
.flash.err{background:var(--red-l);color:var(--red)}
.flash.inline{margin:0 0 12px}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;padding:10px 16px;border-radius:10px;border:1px solid var(--line);
  background:#fff;color:var(--ink);font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;text-decoration:none;text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--green);border-color:var(--green);color:#fff}
.btn.ghost{background:none;border-color:transparent;color:var(--muted);font-weight:500}
.btn.danger{color:var(--red);border-color:#f0c9c6}
.btn.block{display:block;width:100%}
.btn.big{padding:18px;font-size:19px;letter-spacing:.4px;border-radius:14px}
.btn.small{padding:6px 10px;font-size:13px}
.btn:disabled{opacity:.55;cursor:default}
.btn.done{background:var(--muted);border-color:var(--muted)}
.link{background:none;border:0;color:var(--green);font:inherit;font-weight:600;cursor:pointer;padding:0;text-decoration:underline}

/* ---------- forms ---------- */
label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:14px 0 5px}
input,select{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  font:inherit;background:#fff;color:var(--ink);
}
input:focus,select:focus{outline:2px solid var(--green);outline-offset:-1px;border-color:var(--green)}
/* 16px minimum stops iOS zooming the page when a field is focused */
input,select,textarea{font-size:16px}

/* ---------- login ---------- */
.centered{display:flex;align-items:center;justify-content:center;min-height:100dvh;padding:20px}
.card{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:26px;width:100%;max-width:380px;
}
.login h1{margin:0;font-size:23px}
.login h1 span{color:var(--green)}
.login .sub{margin:2px 0 18px;color:var(--muted);font-size:14px}
.login .btn{margin-top:20px;padding:14px}
.big-status{font-size:56px;margin:0;color:var(--green)}

/* ---------- check-in ---------- */
.counter{text-align:center;margin:6px 0 18px}
.counter .n{
  display:block;font-size:clamp(44px,14vw,68px);font-weight:800;line-height:1;
  color:var(--green);font-variant-numeric:tabular-nums;letter-spacing:-2px;
}
.counter .of{color:var(--muted);font-size:14px}

.searchwrap{position:relative}
.search{padding:16px 44px 16px 16px;font-size:17px;border-radius:12px;box-shadow:var(--shadow);border-color:transparent}
.search::-webkit-search-cancel-button{display:none}
.clearq{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  border:0;background:none;font-size:26px;color:var(--muted);cursor:pointer;
  width:38px;height:38px;line-height:1;
}

.netbar{
  margin-top:10px;padding:10px 13px;border-radius:10px;
  background:var(--amber-l);color:var(--amber);font-size:13.5px;font-weight:600;
}

.results{list-style:none;margin:14px 0 0;padding:0}
.result{
  display:flex;align-items:center;gap:12px;background:#fff;padding:15px 16px;
  border-radius:12px;margin-bottom:8px;cursor:pointer;box-shadow:var(--shadow);
}
.result:active{background:var(--green-l)}
.result .num{
  font-weight:700;font-variant-numeric:tabular-nums;min-width:62px;color:var(--green);
}
.result .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.result .go{color:var(--green);font-size:13px;font-weight:600;white-space:nowrap}
.result .tick{color:var(--muted);font-size:13px;font-weight:600;white-space:nowrap}
.result.done{opacity:.62}
.result.done .num{color:var(--muted)}
.hint{color:var(--muted);font-size:14px;text-align:center;margin-top:18px}

/* ---------- bottom sheet ---------- */
.sheet{
  position:fixed;inset:0;background:rgba(11,26,21,.45);z-index:40;
  display:flex;align-items:flex-end;justify-content:center;
}
.sheet-inner{
  background:#fff;width:100%;max-width:520px;border-radius:20px 20px 0 0;
  padding:22px 20px calc(22px + env(safe-area-inset-bottom));
  position:relative;max-height:92dvh;overflow-y:auto;
  animation:rise .16s ease-out;
}
@keyframes rise{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet-inner{animation:none}}
@media(min-width:560px){
  .sheet{align-items:center}
  .sheet-inner{border-radius:var(--radius)}
}
.sheet-close{
  position:absolute;right:10px;top:8px;border:0;background:none;
  font-size:30px;line-height:1;color:var(--muted);cursor:pointer;width:44px;height:44px;
}
.sheet .btn.big{margin-top:20px}
.badge{display:inline-block;padding:6px 11px;border-radius:999px;font-size:13px;font-weight:600}
.badge.ok{background:var(--green-l);color:var(--green-d)}
.badge.new{background:var(--amber-l);color:var(--amber)}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(22px + env(safe-area-inset-bottom));
  background:var(--ink);color:#fff;padding:13px 20px;border-radius:999px;
  font-size:15px;font-weight:600;z-index:60;box-shadow:0 8px 28px rgba(0,0,0,.28);
  max-width:92vw;text-align:center;
}
.toast.err{background:var(--red)}
.toast.warn{background:var(--amber)}

/* ---------- participants page ---------- */
.statrow{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:16px}
.stat{
  background:#fff;border-radius:11px;padding:11px 6px;text-align:center;
  text-decoration:none;color:var(--ink);box-shadow:var(--shadow);
}
.stat b{display:block;font-size:19px;font-variant-numeric:tabular-nums}
.stat span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.stat.ok b{color:var(--green)}
.stat.warn b{color:var(--amber)}
/* The operator's own summary has four tiles, not five. */
.statrow.four{grid-template-columns:repeat(4,1fr)}
/* An active filter tile, so it is obvious the list is narrowed. */
.stat.on{outline:2px solid var(--green);outline-offset:-2px}

/* ---------- petugas filter chips (admin: Rekap page) ---------- */
.oprow{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px;-webkit-overflow-scrolling:touch}
.opchip{
  flex:0 0 auto;min-width:104px;background:#fff;border-radius:11px;padding:10px 12px;
  text-align:center;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);
}
.opchip b{display:block;font-size:19px;font-variant-numeric:tabular-nums;color:var(--green)}
.opchip span{
  display:block;font-size:11px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:132px;
}
.opchip.on{outline:2px solid var(--green);outline-offset:-2px}
.opchip.on span{color:var(--ink);font-weight:600}

.filters{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.filters input{flex:2;min-width:150px}
.filters select{flex:1;min-width:148px}
.filters .btn{flex:0 0 auto}

.addbox{background:#fff;border-radius:11px;padding:13px 15px;margin-bottom:16px;box-shadow:var(--shadow)}
.addbox summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--green)}
.inline-form{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.inline-form input{flex:1;min-width:130px}

.tablewrap{overflow-x:auto;background:#fff;border-radius:11px;box-shadow:var(--shadow)}
.table{width:100%;border-collapse:collapse;font-size:14.5px}
.table th{
  text-align:left;padding:11px 12px;font-size:11px;text-transform:uppercase;
  letter-spacing:.5px;color:var(--muted);border-bottom:1px solid var(--line);
}
.table td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.cell{padding:7px 9px;font-size:14.5px;border-color:transparent;background:#fafbfb}
.cell:hover{border-color:var(--line)}
/* NOT display:flex here — a <td> with display:flex leaves the table's row
   grid, which is why the row's bottom border used to stop short of the
   buttons and the action column floated outside the card. The phone layout
   below turns every cell into a flex row anyway, and that is where it wants
   to be a flex container. */
.actions{white-space:nowrap;text-align:right}
.actions .btn + .btn{margin-left:5px}
.pill{display:inline-block;padding:3px 9px;border-radius:999px;background:#eef1f0;color:var(--muted);font-size:12.5px;font-weight:600}
.pill.ok{background:var(--green-l);color:var(--green-d)}
.pager{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:16px}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.center{text-align:center}

/* Stack the table into cards on a phone */
@media(max-width:620px){
  .statrow{grid-template-columns:repeat(3,1fr)}
  .statrow.four{grid-template-columns:repeat(2,1fr)}
  .table thead{display:none}
  .table,.table tbody,.table tr,.table td{display:block;width:100%}
  .table tr{border-bottom:1px solid var(--line);padding:10px 12px}
  .table tr:last-child{border-bottom:0}
  .table td{border:0;padding:4px 0;display:flex;align-items:center;gap:10px}
  .table td::before{
    content:attr(data-l);flex:0 0 62px;font-size:11px;text-transform:uppercase;
    letter-spacing:.4px;color:var(--muted);font-weight:600;
  }
  .table td.actions{justify-content:flex-end;padding-top:9px}
  .table td.actions .btn + .btn{margin-left:0}
  .table td.actions::before{content:""}
}

/* ---------- headings shared by import/settings ---------- */
.h1{font-size:21px;margin:0 0 4px}
.h2{font-size:15px;margin:0 0 12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.card.wide{max-width:none;margin-bottom:16px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.row2{grid-template-columns:1fr}}
.chk{display:flex;align-items:center;gap:9px;font-weight:500;color:var(--ink);text-transform:none;font-size:14.5px;margin:14px 0 5px}
.chk input{width:auto;margin:0}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.backdrop-preview{width:100%;border-radius:10px;margin-bottom:6px;display:block;background:#eee}

/* ---------- import wizard ---------- */
.import .step{margin-top:22px}
.drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:2px dashed var(--line);border-radius:14px;padding:38px 20px;background:#fff;
  cursor:pointer;text-align:center;
}
.drop.over{border-color:var(--green);background:var(--green-l)}
.drop b{color:var(--green);font-size:16px}
.mapping{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:11px;margin-top:14px}
.mapcol{background:#fff;border-radius:11px;padding:12px;box-shadow:var(--shadow)}
.mapcol-h{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mapcol-s{margin:3px 0 9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.summary{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chip{background:#fff;border-radius:999px;padding:7px 14px;font-size:13px;box-shadow:var(--shadow)}
.chip b{font-variant-numeric:tabular-nums}
.chip.ok b{color:var(--green)}
.chip.warn b{color:var(--amber)}
.chip.err b{color:var(--red)}
.mode{
  display:block;background:#fff;border-radius:11px;padding:14px;margin-bottom:9px;
  box-shadow:var(--shadow);cursor:pointer;text-transform:none;color:var(--ink);font-weight:400;
}
.mode input{width:auto;margin-right:9px}
.mode b{font-size:15px}
.mode span{display:block;color:var(--muted);font-size:13px;margin-top:3px;margin-left:25px}
.mode:has(input:checked){outline:2px solid var(--green)}
.bar{height:11px;background:#e3e9e7;border-radius:999px;overflow:hidden;margin-bottom:7px}
.bar-fill{height:100%;width:0;background:var(--green);border-radius:999px;transition:width .25s}

/* ---------- photo in the check-in sheet ---------- */
.photobox{display:flex;gap:13px;align-items:flex-start;margin-top:16px}
.photo-thumb{
  width:84px;height:112px;flex:0 0 auto;border-radius:9px;overflow:hidden;
  background:#eef1f0;display:flex;align-items:center;justify-content:center;
}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.photo-empty{font-size:11px;color:var(--muted);text-align:center;padding:6px;line-height:1.3}
.photo-actions{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.photo-actions .muted{line-height:1.35}

/* ---------- display settings: live preview ---------- */
.preview{
  position:relative;width:100%;aspect-ratio:16/9;border-radius:11px;overflow:hidden;
  background:#0d5c3f;margin-bottom:8px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
/* Mirrors .backdrop on the display screen, so what you set here is what the
   projector shows. The inline object-fit / object-position / transform are
   written by settings.js. */
.pv-bd{position:absolute;inset:0;width:100%;height:100%;display:block}
.ratio-select{max-width:260px}
.linkbtn{
  background:none;border:0;padding:0;font:inherit;color:var(--green);
  text-decoration:underline;cursor:pointer;
}
.inline-label{display:block}
/* Mirrors .stage / .block in display.php — same anchoring maths, so the
   preview lands the block exactly where the projector will. */
.pv-stage{position:absolute;inset:3%;color:#fff}
.pv-block{
  position:absolute;left:0;right:0;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.pv-count{
  font-weight:800;line-height:.78;font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;text-shadow:0 4px 22px rgba(0,0,0,.55);
  margin-bottom:-.042em;   /* see .count in display.php; refined by settings.js */
}
.pv-label{
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.92;
  text-shadow:0 2px 12px rgba(0,0,0,.5);max-width:92%;overflow-wrap:break-word;
}
/* The gap is written in px by settings.js, scaled from the same vw value the
   display uses. It must live on the LABEL, never on .pv-count: `.35em` on the
   count meant 0.35 x the NUMBER's font size — 52px against the label's 11px —
   so the preview showed the text roughly five times further away when it sat
   above the number than below it, while the real screen was fine. */
.pv-label.top{margin-bottom:0}
.pv-label.bottom{margin-top:0}

.range{
  -webkit-appearance:none;appearance:none;width:100%;height:30px;
  background:none;padding:0;border:0;
}
.range::-webkit-slider-runnable-track{height:6px;background:#e3e9e7;border-radius:999px}
.range::-moz-range-track{height:6px;background:#e3e9e7;border-radius:999px}
.range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-9px;
  background:var(--green);border-radius:50%;cursor:pointer;border:3px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.range::-moz-range-thumb{
  width:24px;height:24px;background:var(--green);border-radius:50%;cursor:pointer;
  border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.range:focus{outline:none}
.range:focus::-webkit-slider-thumb{outline:2px solid var(--green);outline-offset:2px}
.val{
  display:inline-block;min-width:2.6em;padding:1px 7px;border-radius:6px;
  background:var(--green-l);color:var(--green-d);font-variant-numeric:tabular-nums;
  text-transform:none;letter-spacing:0;
}
input[type=color]{height:46px;padding:4px;cursor:pointer}
/* A white swatch on a white card is invisible; the checker makes it readable. */
.colorwrap{display:flex;align-items:center;gap:10px}
.colorwrap input[type=color]{
  flex:0 0 64px;width:64px;height:46px;padding:4px;border-radius:9px;
  border:1px solid var(--line);
  background-image:linear-gradient(45deg,#e9edec 25%,transparent 25%),
                   linear-gradient(-45deg,#e9edec 25%,transparent 25%),
                   linear-gradient(45deg,transparent 75%,#e9edec 75%),
                   linear-gradient(-45deg,transparent 75%,#e9edec 75%);
  background-size:12px 12px;
  background-position:0 0,0 6px,6px -6px,-6px 0;
}
.colorwrap .mono{color:var(--muted)}

/* ---------- photo column on the participants table ---------- */
/* Deliberately NOT a thumbnail: 50 rows of 800px photos is ~2 MB per page to
   fill 46px boxes. This is a status marker; the photo itself opens in the panel. */
.thumb{
  width:34px;height:34px;padding:0;border-radius:9px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  background:#eef1f0;border:1px solid var(--line);line-height:1;
}
.thumb.has{background:var(--green-l);border-color:#bcdccd;color:var(--green)}
.thumb.empty{border-style:dashed;color:var(--muted);font-size:19px}
.thumb:hover{border-color:var(--green)}
.thumb:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.table td:first-child{width:44px}

/* photo panel */
.ph-preview{
  width:100%;max-width:230px;margin:0 auto 12px;aspect-ratio:3/4;border-radius:11px;
  overflow:hidden;background:#eef1f0;display:flex;align-items:center;justify-content:center;
}
.ph-preview img{width:100%;height:100%;object-fit:cover;display:block}
#phNote{margin-bottom:10px;text-align:center}
.btn.ghost.danger{color:var(--red)}

@media(max-width:620px){
  .table td:first-child{width:auto}
}

/* Row actions are tapped on a phone at a busy desk — give them a real target.
   34px is below the 44px minimum for comfortable thumb use. */
@media(max-width:620px){
  .table td.actions .btn.small{padding:11px 14px;font-size:14px;min-height:44px}
  .table td.actions{gap:8px}
  .thumb{width:44px;height:44px}
}

/* ---------- users page ---------- */
.userbox .who{color:#fff;text-decoration:none}
.userbox .who:hover{text-decoration:underline}
.inline-form.compact{margin:0;gap:0}
.inline-form.compact select{min-width:120px;padding:7px 9px;font-size:13.5px}
.pwbox{display:inline-block}
.pwbox summary{list-style:none;cursor:pointer}
.pwbox summary::-webkit-details-marker{display:none}
.pwform{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;align-items:center}
.pwform input{width:auto;flex:1;min-width:150px;padding:8px 10px;font-size:14px}
@media(max-width:620px){
  .pwform{flex-direction:column;align-items:stretch}
  .pwform input{width:100%}
}