/* wa3-api admin — iOS-style visual language, CSS statis tanpa CDN.
   Struktur & nama kelas tidak berubah: hanya presentasi (tipografi, kartu,
   tabel, tombol, header glass). Token: halaman #f2f2f7, kartu putih 18px,
   hairline #e5e5ea, satu aksen biru #0a84ff, font platform. */

/* ===== Spinner + remember-me ===== */
.spinner{width:20px;height:20px;border:2px solid var(--outline);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto}
.spinner.sm{width:15px;height:15px;border-width:2px;margin:0;display:inline-block;vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}
.remember-row{display:flex;align-items:center;gap:8px;margin:2px 0 6px}
.remember-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--primary)}
.remember-row label{cursor:pointer;font-size:12px;color:var(--on-surface-variant)}
.qr-box{position:relative}
.qr-box .qr-overlay{position:absolute;inset:12px;display:grid;place-items:center;background:var(--surface);border-radius:var(--radius-sm)}
.qr-box .qr-overlay .tiny{margin-top:8px}
.qr-box img.hidden{display:none}

:root{
  --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Inter,ui-sans-serif,system-ui,sans-serif;
  --primary:#0a84ff; --on-primary:#fff; --primary-container:rgba(10,132,255,.1); --on-primary-container:#0077ed;
  --surface:#fff; --surface-2:#f2f2f7; --surface-3:#f5f5f7; --on-surface:#0b0b10; --on-surface-variant:#6b7280;
  --outline:#e5e5ea; --outline-strong:#d1d1d6;
  --success:#34c759; --success-container:rgba(52,199,89,.14);
  --warning:#ff9500; --warning-container:rgba(255,149,0,.14);
  --error:#ff3b30; --error-container:rgba(255,59,48,.12);
  --elev-1:0 1px 3px rgb(16 24 40/.05),0 8px 24px -16px rgb(16 24 40/.18);
  --elev-2:0 20px 50px -24px rgb(16 24 40/.35);
  --glass:rgb(255 255 255/.72);
  --radius:18px; --radius-sm:12px;
}
[data-theme="dark"]{
  --primary:#0a84ff; --on-primary:#fff; --primary-container:rgba(10,132,255,.18); --on-primary-container:#64b5ff;
  --surface:#1c1c1e; --surface-2:#111114; --surface-3:#2c2c2e; --on-surface:#f2f2f7; --on-surface-variant:#98989f;
  --outline:#38383a; --outline-strong:#48484a;
  --success:#30d158; --success-container:rgba(48,209,88,.18);
  --warning:#ff9f0a; --warning-container:rgba(255,159,10,.18);
  --error:#ff453a; --error-container:rgba(255,69,58,.18);
  --elev-1:0 1px 2px rgb(0 0 0/.5);
  --elev-2:0 20px 50px -20px rgb(0 0 0/.7);
  --glass:rgb(28 28 30/.78);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font:13px/1.5 var(--font-ui);
  background:var(--surface-2); color:var(--on-surface);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1{font-size:24px;font-weight:600;letter-spacing:-.5px;margin:0 0 4px}
h2{font-size:15px;font-weight:600;letter-spacing:-.2px;margin:0 0 12px}
a{color:var(--primary);text-decoration:none}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;background:var(--surface-3);padding:2px 6px;border-radius:6px}
.hidden{display:none!important}
.muted{color:var(--on-surface-variant)}
.tiny{font-size:11px}
.small{font-size:12px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row.end{justify-content:flex-end}
.spacer{flex:1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:860px){.grid2{grid-template-columns:1fr}}
.grid1{display:grid;grid-template-columns:1fr;gap:14px}

/* ===== Login ===== */
.auth-wrap{min-height:100%;display:grid;place-items:center;padding:24px;background:var(--surface-2)}
.auth-card{width:100%;max-width:410px;background:var(--surface);border:1px solid var(--outline);border-radius:20px;padding:26px;box-shadow:0 18px 50px -24px rgb(16 24 40/.35);text-align:left}
.auth-logo{width:52px;height:52px;border-radius:16px;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-weight:600;font-size:15px;letter-spacing:-.5px;margin-bottom:14px}
.auth-card h1{font-size:21px;letter-spacing:-.4px}
.auth-card .tiny{margin-top:16px;line-height:1.6}

/* ===== App bar (glass, sticky) ===== */
.appbar{position:fixed;inset:0 0 auto 0;height:56px;display:flex;align-items:center;gap:6px;padding:0 14px;
  background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--outline);z-index:30}
.brand{display:flex;align-items:center;gap:9px}
.logo{width:30px;height:30px;border-radius:9px;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-weight:600;font-size:12px;letter-spacing:-.3px}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
.brand-text b{font-size:14px;font-weight:600;letter-spacing:-.2px}
.brand-text small{color:var(--on-surface-variant);font-size:11px}
.icon-btn{background:none;border:0;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;cursor:pointer;color:var(--on-surface-variant)}
.icon-btn:hover{background:rgb(0 0 0/.05);color:var(--on-surface)}
.icon-btn svg{width:18px;height:18px;fill:currentColor}
.icon-btn.on{color:var(--primary);background:var(--primary-container)}
.avatar{width:32px;height:32px;border-radius:50%;border:0;background:var(--primary-container);color:var(--on-primary-container);font-weight:600;font-size:12px;cursor:pointer}

/* ===== Drawer ===== */
.drawer{position:fixed;top:56px;bottom:0;left:0;width:236px;background:var(--glass);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-right:1px solid var(--outline);padding:10px 8px 12px;overflow:auto;z-index:25;transition:transform .18s ease}
.drawer-head{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-surface-variant);padding:6px 10px 4px;font-weight:500}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);color:var(--on-surface-variant);cursor:pointer;font-weight:400;font-size:13px;margin-bottom:2px;transition:background-color .15s ease}
.nav-item svg{width:16px;height:16px;fill:currentColor;opacity:.6}
.nav-item:hover{background:rgb(0 0 0/.04);color:var(--on-surface)}
.nav-item:hover svg{opacity:.8}
.nav-item.active{background:var(--surface);color:var(--on-surface);font-weight:500;box-shadow:0 1px 2px rgb(16 24 40/.04),0 1px 3px rgb(16 24 40/.08)}
.nav-item.active svg{opacity:1;color:var(--primary)}
.badge{margin-left:auto;background:var(--surface-3);color:var(--on-surface-variant);border-radius:999px;padding:1px 7px;font-size:10px;font-weight:600;min-width:18px;text-align:center;font-variant-numeric:tabular-nums}
.nav-item.active .badge{background:var(--primary);color:var(--on-primary)}
.drawer-foot{margin-top:14px;padding:10px 10px 0;border-top:1px solid var(--outline);display:flex;flex-direction:column;gap:4px}
.scrim{position:fixed;inset:56px 0 0 0;background:rgb(0 0 0/.35);z-index:20}

/* ===== Content ===== */
.content{margin:56px 0 0 236px;padding:20px clamp(16px,3vw,32px) 90px;transition:margin-left .2s ease}
/* Desktop: tombol menu di header menyembunyikan sidebar (state disimpan). */
@media(min-width:901px){
  body.nav-collapsed .drawer{transform:translateX(-100%)}
  body.nav-collapsed .content{margin-left:0}
}
@media(max-width:900px){
  .drawer{transform:translateX(-100%)}
  .drawer.open{transform:none;box-shadow:var(--elev-2)}
  .content{margin-left:0;padding:16px 14px 90px}
}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.page-head p{margin:0;font-size:13px}
.section.hidden{display:none}

.card{background:var(--surface);border:1px solid var(--outline);border-radius:var(--radius);padding:18px;margin-bottom:14px;box-shadow:var(--elev-1)}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.card-head h2{margin:0}
.link{cursor:pointer;font-weight:500;font-size:12px}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
@media(max-width:860px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat{display:flex;flex-direction:column;gap:2px}
.stat b{font-size:26px;font-weight:600;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.stat-label{color:var(--on-surface-variant);font-size:12px}
.stat small{font-size:12px}

.pool-mini{display:flex;flex-direction:column;gap:10px}
.pool-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--outline)}
.pool-row:last-child{border-bottom:0}
.pool-row .phone{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}

/* ===== Chips ===== */
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;border:1px solid var(--outline);font-size:11px;font-weight:500;background:var(--surface);color:var(--on-surface-variant);line-height:1.6}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--on-surface-variant)}
.chip-ok{background:var(--success-container);color:var(--success);border-color:transparent}
.chip-ok .dot{background:var(--success)}
.chip-warn{background:var(--warning-container);color:var(--warning);border-color:transparent}
.chip-warn .dot{background:var(--warning)}
.chip-err{background:var(--error-container);color:var(--error);border-color:transparent}
.chip-err .dot{background:var(--error)}
.chip-btn{cursor:pointer}
.chip-btn.active{background:var(--primary-container);color:var(--on-primary-container);border-color:transparent}

/* ===== Tables ===== */
.table-wrap{overflow-x:auto;margin:0 -6px}
.table-wrap::-webkit-scrollbar{height:6px}
.table-wrap::-webkit-scrollbar-thumb{background:var(--outline-strong);border-radius:3px}
.data-table{width:100%;border-collapse:collapse;font-size:12px}
.data-table th{text-align:left;color:var(--on-surface-variant);font-weight:500;font-size:11px;text-transform:none;letter-spacing:0;padding:8px 12px;border-bottom:1px solid var(--outline);white-space:nowrap;background:var(--surface-3)}
.data-table th:first-child{border-top-left-radius:10px}
.data-table th:last-child{border-top-right-radius:10px}
.data-table td{padding:9px 12px;border-bottom:1px solid var(--outline);vertical-align:middle;color:var(--on-surface)}
.data-table tbody tr:hover{background:var(--surface-3)}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table .empty td{text-align:center;color:var(--on-surface-variant);padding:24px 12px;font-size:13px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.status{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:12px}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--on-surface-variant)}
.s-CONNECTED{color:var(--success)} .s-CONNECTED .dot{background:var(--success)}
.s-QR_PENDING{color:var(--warning)} .s-QR_PENDING .dot{background:var(--warning)}
.s-SUSPENDED,.s-ERROR{color:var(--error)} .s-SUSPENDED .dot,.s-ERROR .dot{background:var(--error)}
.s-SENT{color:var(--success)} .s-SENT .dot{background:var(--success)}
.s-FAILED,.s-DEAD{color:var(--error)} .s-FAILED .dot,.s-DEAD .dot{background:var(--error)}
.s-QUEUED,.s-SENDING{color:var(--warning)} .s-QUEUED .dot,.s-SENDING .dot{background:var(--warning)}

.progress{height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden;min-width:90px;margin-top:6px}
.progress > i{display:block;height:100%;border-radius:999px;background:var(--primary);transition:width .3s ease}
.progress.warn > i{background:var(--warning)}
.progress.full > i{background:var(--error)}

/* ===== Form ===== */
.field{position:relative;margin-bottom:14px}
.field input,.field textarea,.field select{width:100%;padding:11px 12px;border:1px solid var(--outline-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--on-surface);font:inherit;font-size:13px}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:rgba(10,132,255,.5);box-shadow:0 0 0 4px rgba(10,132,255,.1)}
.field label{position:absolute;top:-7px;left:10px;background:var(--surface);padding:0 5px;color:var(--on-surface-variant);font-size:11px;font-weight:500}
input[type=checkbox].switch{appearance:none;width:44px;height:26px;border-radius:999px;background:var(--outline-strong);position:relative;cursor:pointer;transition:.18s;border:0}
input[type=checkbox].switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 1px 3px rgb(0 0 0/.2)}
input[type=checkbox].switch:checked{background:var(--success)}
input[type=checkbox].switch:checked::after{transform:translateX(18px)}
.settings-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end}
@media(max-width:700px){.settings-form{grid-template-columns:1fr}}

/* ===== Buttons ===== */
.btn{border:1px solid transparent;border-radius:var(--radius-sm);min-height:34px;padding:7px 14px;font:inherit;font-size:13px;font-weight:500;line-height:1;cursor:pointer;background:var(--surface-3);color:var(--on-surface);transition:background-color .15s ease,transform .1s ease}
.btn:active{transform:scale(.985)}
.btn:hover{filter:none;background:var(--surface-3)}
.btn-filled{background:var(--primary);color:var(--on-primary);box-shadow:0 1px 2px rgba(10,132,255,.35)}
.btn-filled:hover{background:#0077ed}
.btn-tonal{background:var(--surface);border-color:var(--outline);color:var(--on-surface);box-shadow:0 1px 2px rgb(16 24 40/.04)}
.btn-tonal:hover{background:var(--surface-3)}
.btn-outlined{background:transparent;border-color:var(--outline-strong);color:var(--on-surface)}
.btn-outlined:hover{background:var(--surface-3)}
.btn-text{background:transparent;color:var(--primary);padding:7px 10px}
.btn-text:hover{background:var(--primary-container)}
.btn-danger{background:var(--error);color:#fff}
.btn-block{width:100%}
.btn-sm{min-height:28px;padding:5px 11px;font-size:12px}
.btn[disabled]{opacity:.5;cursor:default}
.btn-group{display:flex;gap:6px;flex-wrap:wrap}
.fab{position:fixed;right:22px;bottom:22px;width:52px;height:52px;border-radius:16px;border:0;background:var(--primary);color:var(--on-primary);box-shadow:0 10px 24px -8px rgba(10,132,255,.55);cursor:pointer;display:grid;place-items:center;z-index:15}
.fab svg{width:22px;height:22px;fill:currentColor}

/* ===== Dialog & snackbar ===== */
dialog{border:0;border-radius:20px;padding:20px;background:var(--surface);color:var(--on-surface);box-shadow:var(--elev-2);max-width:420px;width:92%;max-height:calc(100vh - 48px);overflow-y:auto}
dialog::backdrop{background:rgb(0 0 0/.4)}
dialog h2{margin-bottom:14px}
.qr-box{display:grid;place-items:center;background:#fff;border-radius:16px;padding:14px;margin:10px 0;min-height:272px}
.qr-box img{width:248px;height:248px;border-radius:10px;image-rendering:pixelated}
.msg{color:var(--error);font-size:12px;min-height:18px;margin:2px 0 10px}
.msg.ok{color:var(--success)}
.snackbar{position:fixed;left:20px;bottom:20px;background:rgb(28 28 30/.95);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);color:#fff;padding:11px 16px;border-radius:14px;box-shadow:var(--elev-2);z-index:60;font-size:13px;max-width:70vw}
.snackbar.err{background:var(--error);color:#fff}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--outline);font-size:12px}
.kv:last-of-type{border-bottom:0}
.kv span{color:var(--on-surface-variant)}
.kv b{font-weight:600;text-align:right}
.actions-cell{display:flex;gap:6px;flex-wrap:wrap}

/* ===== Chart harian ===== */
.chart{display:flex;align-items:flex-end;gap:10px;height:180px;padding:6px 2px 0;overflow-x:auto}
.chart::-webkit-scrollbar{height:6px}
.chart::-webkit-scrollbar-thumb{background:var(--outline-strong);border-radius:3px}
.chart-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.chart-bars{display:flex;align-items:flex-end;gap:3px;height:100%;width:100%;justify-content:center}
.bar{width:14px;min-height:3px;border-radius:4px 4px 0 0;background:var(--outline-strong);transition:height .25s}
.bar-sent{background:var(--primary)}
.bar-fail{background:var(--error)}
.bar-queue{background:var(--warning)}
.chart-x{font-size:10px;color:var(--on-surface-variant);white-space:nowrap}

/* Bar bertumpuk (halaman analitik): kolom satu batang bersegmen status. */
.chart-stack{display:flex;flex-direction:column-reverse;justify-content:flex-end;align-items:stretch;width:60%;max-width:26px;height:100%}
.chart-stack span{display:block;width:100%;border-radius:0}
.chart-stack span:first-child{border-radius:4px 4px 0 0}
.seg-sent{background:var(--primary)}
.seg-fail{background:var(--warning)}
.seg-dead{background:var(--error)}
.seg-queue{background:var(--outline-strong)}
.sw-failed{background:var(--warning)}
.sw-dead{background:var(--error)}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--on-surface-variant)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:9px;height:9px;border-radius:3px;display:inline-block}
.sw-sent{background:var(--primary)} .sw-fail{background:var(--error)} .sw-queue{background:var(--warning)}

/* ===== Health & error ===== */
.health-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.health-cell{border:1px solid var(--outline);border-radius:var(--radius-sm);padding:12px;display:flex;flex-direction:column;gap:2px;background:var(--surface)}
.health-cell b{font-size:20px;font-weight:600;letter-spacing:-.4px}
.health-cell span{font-size:11px;color:var(--on-surface-variant)}
.err-list{display:flex;flex-direction:column;gap:8px;max-height:190px;overflow:auto}
.err-item{border-left:3px solid var(--error);background:var(--error-container);border-radius:12px;padding:8px 10px;font-size:12px}
.err-item .t{color:var(--on-surface-variant);font-size:11px}

/* ===== Kartu per nomor ===== */
.num-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.num-card{border:1px solid var(--outline);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.num-card:hover{box-shadow:var(--elev-1)}
.num-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.num-count{display:flex;align-items:baseline;gap:6px}
.num-count b{font-size:24px;font-weight:600;letter-spacing:-.5px}
dialog.wide{max-width:560px}
.detail-kv{display:grid;grid-template-columns:150px 1fr;gap:8px 14px;font-size:12px;align-items:center}
.detail-kv span{color:var(--on-surface-variant)}

/* ===== Banner login WA + API key ===== */
.login-banner{border-left:3px solid var(--primary);background:var(--primary-container)}
.login-banner b{color:var(--on-primary-container)}
.banner-icon{width:42px;height:42px;border-radius:14px;background:var(--success);display:grid;place-items:center}
.banner-icon svg{width:22px;height:22px;fill:#fff}
.key-box{background:var(--surface-3);border:1px solid var(--outline);border-radius:var(--radius-sm);padding:12px 14px;word-break:break-all;font-size:12px}
.link-btn{background:none;border:0;color:var(--primary);cursor:pointer;font:inherit;font-size:12px;padding:0}

/* ===== Halaman Analitik ===== */
.ana-filter{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.ana-presets{display:flex;gap:6px;flex-wrap:wrap}
.ana-custom{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ana-custom input[type=date]{padding:7px 11px;border:1px solid var(--outline-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--on-surface);font:inherit;font-size:12px}
.ana-custom input[type=date]:focus{outline:none;border-color:rgba(10,132,255,.5);box-shadow:0 0 0 4px rgba(10,132,255,.1)}
.chart-tall{height:200px}
.bar-dead{background:var(--error)}
.num-load{min-width:110px}
.num-load .load-label{display:flex;justify-content:space-between;font-size:11px;color:var(--on-surface-variant);margin-bottom:2px}
.ana-kpi b{font-variant-numeric:tabular-nums}

/* ===== Responsif ===== */
/* Appbar: chip status + tombol ikon sempit di HP — kecilkan & sembunyikan teks brand. */
@media(max-width:640px){
  .appbar{height:56px;padding:0 8px;gap:2px}
  .drawer{top:56px}
  .scrim{inset:56px 0 0 0}
  .content{margin-top:56px}
  .brand-text small{display:none}
  .brand-text b{font-size:13px}
  .logo{width:28px;height:28px;font-size:11px;border-radius:8px}
  .icon-btn{width:34px;height:34px}
  .avatar{width:30px;height:30px;font-size:12px}
  #connText{display:none}
  #connChip .dot{margin-right:2px}
  .fab{right:14px;bottom:14px;width:50px;height:50px}
  h1{font-size:20px}
}
/* Health grid 3 kolom pecah baris di layar sempit. */
@media(max-width:860px){
  .health-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .health-grid{grid-template-columns:1fr 1fr}
  .stat b{font-size:22px}
  .chart{gap:4px}
  .chart-x{font-size:9px}
  .bar{width:10px}
  .chart-stack{width:80%;max-width:20px}
}
/* Tabel lebar di HP sudah di-scroll .table-wrap; rapikan padding sel. */
@media(max-width:640px){
  .data-table td,.data-table th{padding:9px 8px}
  .snackbar{left:12px;right:12px;max-width:none;bottom:12px}
}