/* ---- token ---- */
:root {
  color-scheme: light dark;
  --bg:#faf9f7; --panel:#ffffff; --panel-2:#f3f1ee; --line:#e3ded7;
  --ink:#1b1a18; --ink-2:#6a6560; --ink-3:#95908a;
  --accent:#8a6d3b; --accent-ink:#ffffff;
  --belum-bg:#ffffff; --belum-line:#e3ded7;
  --sebagian-bg:#fff8e6; --sebagian-line:#e8c766; --sebagian-ink:#8a6410;
  --hadir-bg:#eef7ef; --hadir-line:#8fc79a; --hadir-ink:#1f6b34;
  --danger:#b4443a;
  --shadow:0 1px 2px rgba(20,18,15,.06), 0 4px 14px rgba(20,18,15,.05);
  --r:14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0f1115; --panel:#171a20; --panel-2:#1e222a; --line:#2a2f39;
    --ink:#eceef2; --ink-2:#a2a9b6; --ink-3:#727a89;
    --accent:#d3b478; --accent-ink:#1a1610;
    --belum-bg:#171a20; --belum-line:#2a2f39;
    --sebagian-bg:#2a2314; --sebagian-line:#7a6326; --sebagian-ink:#e8c766;
    --hadir-bg:#14251a; --hadir-line:#2f6b41; --hadir-ink:#7fd39a;
    --danger:#e06a5e;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  }
}

* { box-sizing:border-box; }
html, body { margin:0; }
body {
  background:var(--bg); color:var(--ink);
  font:15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust:100%;
  padding-bottom:env(safe-area-inset-bottom);
}
button, input, select { font:inherit; color:inherit; }
button { cursor:pointer; }
[hidden] { display:none !important; }

/* ---- gerbang PIN ---- */
.gate { position:fixed; inset:0; display:grid; place-items:center; padding:24px; background:var(--bg); z-index:50; }
.gate-card { width:100%; max-width:320px; text-align:center; }
.gate-mark { font-size:44px; line-height:1; }
.gate-card h1 { margin:10px 0 2px; font-size:22px; font-weight:650; letter-spacing:-.01em; }
.gate-sub { margin:0 0 22px; color:var(--ink-2); font-size:13px; }
.gate-pin {
  width:100%; padding:14px; text-align:center; letter-spacing:.45em; font-size:20px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r); outline:none;
}
.gate-pin:focus { border-color:var(--accent); }
.gate-err { color:var(--danger); font-size:13px; margin:10px 0 0; }
.btn { border:1px solid var(--line); background:var(--panel); border-radius:12px; padding:12px 16px; font-weight:600; }
.btn-primary { background:var(--accent); color:var(--accent-ink); border-color:transparent; }
.btn-block { width:100%; margin-top:14px; }

/* ---- topbar ---- */
.topbar {
  position:sticky; top:0; z-index:20; background:var(--bg);
  padding:10px 16px 8px; padding-top:calc(10px + env(safe-area-inset-top));
  border-bottom:1px solid var(--line);
}
.topbar-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.stats { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-2); min-width:0; }
.stat b { color:var(--ink); font-size:16px; font-variant-numeric:tabular-nums; }
.stat i { font-style:normal; }
.stat-sep { width:1px; height:14px; background:var(--line); }
.conn { display:inline-flex; align-items:center; gap:6px; border:0; background:transparent; color:var(--ink-3); font-size:12px; padding:4px; }
.conn .dot { width:8px; height:8px; border-radius:50%; background:var(--ink-3); flex:none; }
.conn.is-live .dot { background:#3fa35a; }
.conn.is-wait .dot { background:#d9a520; }
.conn.is-down .dot { background:var(--danger); }

.search-wrap { position:relative; display:flex; align-items:center; }
.search-ico { position:absolute; left:13px; width:18px; height:18px; fill:none; stroke:var(--ink-3); stroke-width:2; stroke-linecap:round; pointer-events:none; }
.search {
  width:100%; padding:13px 40px 13px 40px; font-size:16px; /* 16px: cegah zoom iOS */
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r); outline:none;
  box-shadow:var(--shadow);
}
.search:focus { border-color:var(--accent); }
.search::-webkit-search-cancel-button { display:none; }
.q-clear { position:absolute; right:6px; width:30px; height:30px; border:0; background:transparent; color:var(--ink-3); font-size:15px; border-radius:50%; }

.filters { display:flex; align-items:center; gap:8px; margin-top:8px; }
.chips { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; flex:1 1 auto; min-width:0; }
.chips::-webkit-scrollbar { display:none; }
.chip {
  flex:none; padding:6px 12px; font-size:13px; font-weight:550; white-space:nowrap;
  background:var(--panel); border:1px solid var(--line); border-radius:999px; color:var(--ink-2);
}
.chip.is-on { background:var(--accent); border-color:transparent; color:var(--accent-ink); }
.select {
  flex:0 0 auto; max-width:44%; padding:6px 8px; font-size:13px; border-radius:999px;
  background:var(--panel); border:1px solid var(--line); color:var(--ink-2);
  text-overflow:ellipsis;
}

/* ---- daftar ---- */
main { padding:0 16px 28px; }
.result-meta { color:var(--ink-3); font-size:12px; margin:12px 2px 8px; }
.list { display:flex; flex-direction:column; gap:8px; }

.row {
  display:grid; grid-template-columns:1fr auto; gap:8px 12px; align-items:center;
  padding:12px 14px; border-radius:var(--r);
  background:var(--belum-bg); border:1px solid var(--belum-line); box-shadow:var(--shadow);
}
.row.is-sebagian { background:var(--sebagian-bg); border-color:var(--sebagian-line); }
.row.is-hadir    { background:var(--hadir-bg);    border-color:var(--hadir-line); }
.row.is-pending { opacity:.62; }

.row-main { min-width:0; }
.row-name { font-size:16px; font-weight:600; letter-spacing:-.01em; overflow-wrap:anywhere; }
.row-name mark { background:transparent; color:var(--accent); font-weight:750; }
.row-sub { margin-top:2px; font-size:12.5px; color:var(--ink-2); overflow-wrap:anywhere; }
.row-by { font-size:11.5px; color:var(--ink-3); margin-top:2px; }

.table-badge {
  align-self:start; flex:none; border:1px solid var(--line); background:var(--panel-2);
  border-radius:10px; padding:5px 9px; text-align:center; line-height:1.15; color:inherit;
}
.table-badge small { display:block; font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
.table-badge b { font-size:15px; font-variant-numeric:tabular-nums; }
.table-badge.is-multi b { font-size:12px; }

.row-act { grid-column:1 / -1; display:flex; align-items:center; gap:8px; }
.stepper { display:flex; align-items:center; border:1px solid var(--line); border-radius:11px; background:var(--panel); overflow:hidden; }
.stepper button { width:42px; height:38px; border:0; background:transparent; font-size:19px; line-height:1; color:var(--ink); }
.stepper button:disabled { color:var(--ink-3); opacity:.45; }
.stepper .count { min-width:58px; text-align:center; font-size:14px; font-weight:650; font-variant-numeric:tabular-nums; border-left:1px solid var(--line); border-right:1px solid var(--line); height:38px; display:grid; place-items:center; }
.row.is-hadir .stepper .count { color:var(--hadir-ink); }
.row.is-sebagian .stepper .count { color:var(--sebagian-ink); }

.act { height:38px; padding:0 14px; border-radius:11px; border:1px solid var(--line); background:var(--panel); font-size:13.5px; font-weight:600; }
.act-all { border-color:transparent; background:var(--accent); color:var(--accent-ink); }
.act-cancel { color:var(--danger); }
.row.is-hadir .act-all { display:none; }

.empty { text-align:center; color:var(--ink-3); padding:44px 20px; font-size:14px; }

.foot { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:center; padding:18px 16px 30px; color:var(--ink-3); font-size:11.5px; }
.linkish { border:0; background:transparent; color:var(--ink-3); text-decoration:underline; text-underline-offset:3px; font-size:11.5px; padding:0; }
.linkish.danger { color:var(--danger); opacity:.75; }

.toast {
  position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:999px; font-size:13px;
  z-index:60; box-shadow:var(--shadow); max-width:calc(100vw - 32px); text-align:center;
}

@media (min-width:640px) {
  main, .topbar, .foot { max-width:760px; margin-inline:auto; }
  .row { grid-template-columns:1fr auto auto; }
  .row-act { grid-column:auto; }
}