/* Muse Host Quota — dark dashboard theme (adapted from reference) */
:root{
  --bg:#0a1424; --card:#0f1d33; --card2:#0b1628; --line:#1c2f52;
  --text:#e9f0fa; --muted:#8fa1bd;
  --green:#34d399; --amber:#fbbf24; --red:#f87171;
  --cyan:#38bdf8; --purple:#a78bfa;
}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
.hidden{display:none !important;}
.muted{color:var(--muted);}
.small{font-size:12px;}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.login-card{width:100%;max-width:360px;text-align:center;}
.login-card .logo{font-size:44px;}
.login-card h1{margin:10px 0 4px;font-size:22px;}
.login-card p{margin:4px 0 14px;font-size:13px;}
.login-card label{display:block;text-align:left;font-size:12px;color:var(--muted);margin:10px 0 6px;}
.login-card .hint{margin-top:14px;font-size:12px;}
.err{color:var(--red);font-size:13px;}

/* ---------- layout ---------- */
.wrap{max-width:480px;margin:0 auto;padding:14px 14px 110px;}
.topbar{display:flex;justify-content:space-between;align-items:center;margin:6px 2px 2px;}
.app-title{margin:0;font-size:20px;display:inline;}
.pill-demo{font-size:10px;font-weight:700;letter-spacing:.08em;color:#0a1424;background:var(--amber);
  border-radius:999px;padding:4px 10px;margin-left:8px;vertical-align:middle;}
.refresh-info{font-size:12px;color:var(--muted);margin:6px 2px 12px;}

.card{background:linear-gradient(180deg,#10203a,#0d1930);border:1px solid var(--line);
  border-radius:18px;padding:18px;margin-bottom:14px;}
.card h2{margin:0;font-size:17px;}
.card .muted{font-size:12px;margin:4px 0 0;}
.row-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}

.badge{font-size:11px;font-weight:800;letter-spacing:.07em;padding:7px 13px;border-radius:999px;white-space:nowrap;}
.badge.online{color:var(--green);background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.4);}
.badge.warning{color:var(--amber);background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.4);}
.badge.offline{color:var(--red);background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.4);}
.badge.id-badge{color:#9fc1ff;background:rgba(80,140,255,.1);border:1px solid rgba(120,170,255,.35);}
.pill-outline{font-size:11px;font-weight:700;letter-spacing:.07em;color:#9fc1ff;
  border:1px solid rgba(120,170,255,.35);border-radius:999px;padding:7px 13px;white-space:nowrap;}

/* ---------- detail card ---------- */
.host-head{display:flex;align-items:center;gap:12px;margin-top:14px;}
.srv-ico{width:54px;height:54px;border-radius:14px;background:#12233d;border:1px solid #1e3459;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;}
.srv-ico svg{width:30px;height:30px;}
.dot{position:absolute;width:9px;height:9px;border-radius:50%;border:2px solid #0d1930;}
.dot.d1{top:6px;right:8px;} .dot.d2{top:20px;right:8px;} .dot.d3{top:34px;right:8px;}
.dot.online{background:var(--green);} .dot.warning{background:var(--amber);} .dot.offline{background:var(--red);}
.host-name{font-size:16px;font-weight:700;word-break:break-all;}
.host-head .badge{margin-left:auto;}

.metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 6px;}
.metric{background:var(--card2);border:1px solid #1a2c4e;border-radius:14px;padding:13px 14px;}
.metric .m-label{font-size:12px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;}
.metric .m-value{font-size:24px;font-weight:800;margin:8px 0 10px;word-break:break-word;}
.metric .m-value.mid{font-size:19px;}
.bar{height:6px;border-radius:99px;background:#1b2c4c;overflow:hidden;}
.bar>i{display:block;height:100%;border-radius:99px;transition:width .6s ease;}
.bar.cyan>i{background:linear-gradient(90deg,#0ea5e9,#38bdf8);}
.bar.purple>i{background:linear-gradient(90deg,#8b5cf6,#a78bfa);}
.bar.green>i{background:linear-gradient(90deg,#10b981,#34d399);}
.bar.amber>i{background:linear-gradient(90deg,#f59e0b,#fbbf24);}
.bar.red>i{background:linear-gradient(90deg,#ef4444,#f87171);}

.kv{margin-top:10px;}
.kv-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid #16263f;font-size:13px;}
.kv-row span:first-child{color:var(--muted);flex-shrink:0;}
.kv-row span:last-child{text-align:right;word-break:break-all;}

/* ---------- inventory ---------- */
#invList{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
.inv-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:14px;
  border:1px solid transparent;cursor:pointer;background:transparent;width:100%;
  color:var(--text);font-family:inherit;text-align:left;font-size:14px;}
.inv-row.active{background:#132441;border-color:#23406e;}
.inv-row .srv-ico{width:48px;height:48px;}
.inv-meta{flex:1;min-width:0;}
.inv-name{font-weight:700;font-size:14px;}
.inv-sub{font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.inv-right{text-align:right;flex-shrink:0;}
.inv-status{font-size:11px;font-weight:800;letter-spacing:.06em;}
.inv-status.online{color:var(--green);} .inv-status.warning{color:var(--amber);} .inv-status.offline{color:var(--red);}
.inv-metric{font-size:12px;color:var(--muted);margin-top:3px;}

/* ---------- buttons / inputs ---------- */
.btn-primary{display:block;width:100%;border:0;border-radius:12px;padding:13px;font-size:15px;font-weight:700;
  color:#fff;background:linear-gradient(180deg,#2f6fed,#1d4fd7);cursor:pointer;margin-top:6px;}
.btn-primary:active{transform:scale(.98);}
.btn-ghost{border:1px solid var(--line);background:transparent;color:var(--text);border-radius:12px;
  padding:9px 14px;font-size:13px;cursor:pointer;}
input{width:100%;box-sizing:border-box;background:#0b1628;border:1px solid #1e3459;color:var(--text);
  border-radius:12px;padding:12px 13px;font-size:15px;margin-bottom:4px;}
input:focus{outline:2px solid #2f6fed;border-color:#2f6fed;}
label{font-size:12px;color:var(--muted);display:block;margin:10px 0 6px;}

.fab{position:fixed;bottom:24px;right:24px;width:58px;height:58px;border-radius:50%;border:0;
  background:linear-gradient(180deg,#2f6fed,#1d4fd7);color:#fff;font-size:30px;line-height:1;cursor:pointer;
  box-shadow:0 8px 24px rgba(47,111,237,.45);}
.fab:active{transform:scale(.94);}

.modal{position:fixed;inset:0;background:rgba(2,6,14,.65);display:flex;align-items:flex-end;justify-content:center;z-index:50;}
.sheet{background:#0f1d33;border:1px solid var(--line);border-bottom:0;border-radius:22px 22px 0 0;
  padding:20px 20px 28px;width:100%;max-width:480px;box-sizing:border-box;}
.sheet h2{margin:0 0 4px;font-size:17px;}
.sheet-actions{display:flex;gap:10px;margin-top:16px;}
.sheet-actions .btn-primary{margin-top:0;}
.sheet-actions .btn-ghost{flex:1;}

.demo-banner{background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.35);color:var(--amber);
  font-size:12px;border-radius:12px;padding:9px 13px;margin:0 2px 12px;}

/* ---------- tambahan: dropdown status, salin URL, ubah password ---------- */
.topbar-actions{display:flex;gap:8px;flex-shrink:0;}
.url-cell{display:flex;align-items:center;gap:8px;}
.btn-copy{border:1px solid var(--line);background:#132441;color:var(--text);border-radius:9px;
  padding:6px 10px;font-size:12px;cursor:pointer;white-space:nowrap;}
.btn-copy:active{transform:scale(.95);}
.ok{color:var(--green);font-size:13px;}
.status-select{font-size:11px;font-weight:800;letter-spacing:.06em;border-radius:999px;
  padding:7px 8px;cursor:pointer;max-width:118px;background-color:rgba(0,0,0,.25);}
.status-select.st-online{color:var(--green);border:1px solid rgba(52,211,153,.4);}
.status-select.st-warning{color:var(--amber);border:1px solid rgba(251,191,36,.4);}
.status-select.st-offline{color:var(--red);border:1px solid rgba(248,113,113,.4);}
.status-select option{background:#0f1d33;color:var(--text);font-weight:600;}

/* ---------- inventaris expandable ---------- */
.inv-row{display:block;padding:0;border:1px solid transparent;border-radius:14px;cursor:default;}
.inv-row.open{background:#101f38;border-color:#23406e;}
.inv-head{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;background:none;border:0;
  color:var(--text);font-family:inherit;font-size:14px;text-align:left;cursor:pointer;}
.inv-head .srv-ico{width:48px;height:48px;}
.chev{color:var(--muted);font-size:16px;transition:transform .25s;flex-shrink:0;}
.inv-row.open .chev{transform:rotate(180deg);}
.inv-detail{padding:2px 12px 14px;border-top:1px dashed #23406e;}
.inv-detail .metrics{margin:12px 0 8px;}
.inv-detail .metric{padding:11px 12px;}
.inv-detail .m-value{font-size:21px;}
.small-btn{padding:7px 11px;font-size:12px;}

/* ---------- inventaris: layout 2 baris profesional + garis pembatas ---------- */
.inv-row{border:0;border-bottom:1px solid #16263f;border-radius:0;background:transparent;}
.inv-row:last-child{border-bottom:0;}
.inv-row.open{background:#101f38;}
.inv-head{display:grid;grid-template-columns:48px minmax(0,1fr) auto;
  grid-template-areas:"ic name status" "ic sub meta";
  gap:4px 12px;align-items:center;width:100%;box-sizing:border-box;
  padding:13px 12px;background:none;border:0;color:var(--text);
  font-family:inherit;font-size:14px;text-align:left;cursor:pointer;}
.inv-head:active{background:rgba(255,255,255,.03);}
.inv-ic{grid-area:ic;}
.inv-ic .srv-ico{width:48px;height:48px;}
.inv-name{grid-area:name;min-width:0;font-weight:700;font-size:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.inv-statuscell{grid-area:status;justify-self:end;}
.inv-sub{grid-area:sub;min-width:0;font-size:12px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.inv-metacell{grid-area:meta;justify-self:end;display:flex;align-items:center;gap:7px;}
.inv-metric{font-size:12px;color:var(--muted);white-space:nowrap;}
.status-select{max-width:106px;font-size:10px;padding:6px 6px;}

/* ---------- revisi: garis lebih tebal, aksi edit/hapus ---------- */
.inv-row{border-bottom:2px solid #1e3255;}
.detail-actions{display:flex;gap:10px;margin-top:14px;}
.detail-actions .btn-ghost,.detail-actions .btn-danger{flex:1;margin-top:0;}
.btn-danger{border:1px solid rgba(248,113,113,.45);background:rgba(248,113,113,.08);
  color:var(--red);border-radius:12px;padding:9px 14px;font-size:13px;cursor:pointer;}
.btn-danger:active{transform:scale(.97);}

/* ---------- indikator status live (dot beranimasi) ---------- */
.live-dot{width:13px;height:13px;border-radius:50%;position:relative;flex-shrink:0;display:inline-block;}
.live-dot.online{background:#34d399;box-shadow:0 0 10px rgba(52,211,153,.8);color:#34d399;}
.live-dot.warning{background:#fbbf24;box-shadow:0 0 10px rgba(251,191,36,.8);color:#fbbf24;}
.live-dot.offline{background:#f87171;box-shadow:0 0 8px rgba(248,113,113,.5);color:#f87171;}
.live-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:2px solid currentColor;animation:liveping 1.8s cubic-bezier(0,0,.2,1) infinite;}
.live-dot.offline::after{animation:none;opacity:.3;}
@keyframes liveping{0%{transform:scale(.55);opacity:.8;}75%,100%{transform:scale(1.35);opacity:0;}}
.inv-statuscell{display:flex;align-items:center;justify-content:flex-end;min-height:24px;padding-right:4px;}