/* ===========================================================
   ST — SCARL TOPOLOGI · panel admin
   =========================================================== */

body.adm{display:grid;grid-template-columns:238px 1fr;min-height:100vh;background:var(--bg);background-image:none}

/* ---------- sidebar ---------- */
.side{
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;
  padding:18px 14px;background:#090b11;border-right:1px solid var(--line);z-index:50;
}
.side .brand{padding:6px 8px 18px;border-bottom:1px solid var(--line);margin-bottom:10px}
.side nav{display:grid;gap:3px}
.side nav a{
  display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px;
  text-decoration:none;color:var(--mut);font-size:14.5px;font-weight:600;transition:.15s;
}
.side nav a span{width:18px;text-align:center;font-size:14px}
.side nav a:hover{background:var(--panel);color:var(--txt)}
.side nav a.on{background:linear-gradient(135deg,rgba(230,57,70,.22),rgba(230,57,70,.05));color:#fff;box-shadow:inset 2px 0 0 var(--red)}
.side-foot{margin-top:auto;display:grid;gap:3px;padding-top:14px;border-top:1px solid var(--line)}
.side-foot a{padding:10px 13px;border-radius:10px;text-decoration:none;color:var(--mut);font-size:13.5px;font-weight:600}
.side-foot a:hover{background:var(--panel);color:var(--txt)}
.side-foot a.danger:hover{color:var(--red-2)}

/* ---------- topbar ---------- */
.adm-main{min-width:0;display:flex;flex-direction:column}
.adm-top{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;
  padding:16px 26px;background:rgba(7,8,12,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.adm-top h1{font-size:19px;margin:0}
.adm-who{margin-left:auto;text-align:right;line-height:1.3}
.adm-who strong{font-size:13.5px;display:block}
.adm-who span{font-size:11.5px;color:var(--mut)}
.adm-body{padding:26px;display:grid;gap:22px;align-content:start}

/* ---------- statistik ---------- */
.stats{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.stat{background:linear-gradient(180deg,var(--panel),#0b0e15);border:1px solid var(--line);border-radius:14px;padding:18px}
.stat b{display:block;font-size:28px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.8px}
.stat.red b{color:var(--red-2)}
.stat.grn b{color:var(--grn)}
.stat.warn b{color:var(--warn)}

/* ---------- panel ---------- */
.panel{background:linear-gradient(180deg,var(--panel),#0b0e15);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.panel > h2{font-size:17px;margin:0 0 4px}
.panel > .hint{color:var(--mut);font-size:13.5px;margin:0 0 18px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.panel-head h2{margin:0;font-size:17px}
.cols2{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));align-items:start}

/* ---------- tabel ---------- */
.tbl-wrap{overflow-x:auto;margin-inline:-6px;padding-inline:6px}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:600px}
table.tbl th{
  text-align:left;padding:10px 12px;color:var(--mut);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.7px;border-bottom:1px solid var(--line);white-space:nowrap;
}
table.tbl td{padding:11px 12px;border-bottom:1px solid #1a1e2b;vertical-align:top}
table.tbl tr:hover td{background:rgba(255,255,255,.02)}
table.tbl td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.ip{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:#9fb0cc}
dl.answers{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:8px 0 0;font-size:12.5px}
dl.answers dt{color:var(--mut)}
dl.answers dt::after{content:":"}
dl.answers dd{margin:0;color:#d4dae8}
.ellip{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}

/* ---------- form admin ---------- */
.form-grid{display:grid;gap:16px}
.form-grid.two{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.btn-mini{padding:5px 10px;font-size:12px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--txt);cursor:pointer;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.btn-mini:hover{border-color:var(--red);color:#fff}
.btn-mini.danger:hover{background:rgba(230,57,70,.18);border-color:var(--red)}
.btn-mini.ok:hover{background:rgba(25,195,125,.18);border-color:var(--grn)}
.field-note{font-size:12px;color:var(--mut);font-weight:500}
fieldset.box{border:1px solid var(--line);border-radius:12px;padding:18px;margin:0 0 16px}
fieldset.box legend{padding:0 8px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--red-2);font-weight:800}
.switch{display:flex;align-items:center;gap:9px;font-size:14px}
.switch input{width:18px;height:18px;accent-color:var(--red)}

/* ---------- halaman login ---------- */
body.login-page{
  display:grid;place-items:center;min-height:100vh;padding:24px;
  background:radial-gradient(900px 500px at 50% -10%,rgba(230,57,70,.2),transparent 60%),var(--bg);
}
.login-box{width:min(420px,100%);background:linear-gradient(180deg,var(--panel),#0b0e15);
  border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:var(--shadow)}
.login-brand{display:flex;align-items:center;gap:13px;margin-bottom:24px}
.login-brand strong{font-family:Orbitron,sans-serif;letter-spacing:1.6px;font-size:15px}
.login-brand p{margin:2px 0 0;color:var(--mut);font-size:12.5px}
.login-note{font-size:12px;color:var(--mut);margin:16px 0 0;text-align:center}
.login-note a{color:var(--red-2);text-decoration:none}

/* ---------- pencarian cepat ---------- */
.top-search{display:flex;align-items:center;gap:0;margin-left:18px;flex:1;max-width:380px}
.top-search input{
  flex:1;min-width:0;padding:9px 13px;font-size:13.5px;border-radius:10px 0 0 10px;
  background:#0a0c12;border:1px solid var(--line);border-right:0;color:var(--txt);font-family:inherit;
}
.top-search input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(230,57,70,.14)}
.top-search button{
  padding:9px 13px;border-radius:0 10px 10px 0;cursor:pointer;font-size:13px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--mut);
}
.top-search button:hover{background:var(--red);border-color:var(--red);color:#fff}

.quick-find{border-color:rgba(230,57,70,.4);background:linear-gradient(135deg,rgba(230,57,70,.1),var(--panel))}
.find-form{display:flex;gap:10px;flex-wrap:wrap}
.find-form input{
  flex:1;min-width:220px;padding:14px 16px;font-size:16px;font-family:inherit;
  background:#0a0c12;border:1px solid var(--line);border-radius:12px;color:var(--txt);
}
.find-form input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(230,57,70,.16)}

.mini-search{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mini-search input{
  width:150px;padding:6px 10px;font-size:12.5px;font-family:inherit;
  background:#0a0c12;border:1px solid var(--line);border-radius:8px;color:var(--txt);
}
.mini-search input:focus{outline:none;border-color:var(--red)}

.filter-bar{
  position:sticky;top:57px;z-index:30;margin:0 -22px 18px;padding:14px 22px;
  background:rgba(13,16,24,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}

/* ---------- misc ---------- */
.thumb{width:54px;height:54px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.tag{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700}
.tag.pending{background:rgba(240,165,0,.15);color:#ffc857}
.tag.menunggu{background:rgba(90,130,255,.15);color:#9db6ff}
.tag.paid{background:rgba(25,195,125,.15);color:#4fe0a7}
.tag.joined{background:rgba(25,195,125,.25);color:#7ff0c2}
.tag.reject{background:rgba(230,57,70,.18);color:#ff8d96}
.pager{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}
.pager a,.pager span{padding:6px 12px;border-radius:9px;border:1px solid var(--line);font-size:13px;text-decoration:none;color:var(--mut)}
.pager .cur{background:var(--red);color:#fff;border-color:var(--red)}
.empty{text-align:center;color:var(--mut);padding:30px 0;font-size:14px}

/* ---------- responsif ---------- */
@media (max-width:900px){
  body.adm{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:238px;transform:translateX(-100%);transition:transform .22s}
  body.side-open .side{transform:translateX(0);box-shadow:0 0 60px rgba(0,0,0,.6)}
  .adm-top .burger{display:flex}
  .adm-body{padding:18px}
  .adm-top h1{font-size:16px}
  .adm-who{display:none}
  .top-search{margin-left:10px;max-width:none}
  .filter-bar{margin:0 -18px 16px;padding:12px 18px;top:53px}
}
@media (max-width:620px){
  .top-search{display:none}
}
@media (min-width:901px){ .adm-top .burger{display:none} }