/* AdminMonitor - tema "ruang kontrol": pine gelap untuk panel instrumen, kertas mineral untuk isi. */
:root {
  --bg: #edf1ef;
  --panel: #fafcfb;
  --ink: #12211d;
  --mut: #566a63;
  --line: #d3dcd8;
  --soft: #e4ebe8;
  --pine: #0d2a24;
  --pine-ink: #e6f1ed;
  --pine-mut: #8fb0a6;
  --pine-line: #25463e;
  --brand: #0b7a63;

  --s-ready: #1d9e63;
  --s-cooldown: #5b87b8;
  --s-quota_full: #d99a12;
  --s-banned: #cf3f3f;
  --s-restricted: #d9731a;
  --s-offline: #8b9a95;
  --s-disabled: #3d4a46;
  --s-unlisted: #b7791f;
  --crit: #c53030;
  --warn: #b7791f;
  --info: #2f6f9f;
  --font: Bahnschrift, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1412;
    --panel: #111d1a;
    --ink: #e2ede9;
    --mut: #8fa69f;
    --line: #233a34;
    --soft: #172723;
    --brand: #35c2a0;
    --s-ready: #2fbf7c;
    --s-cooldown: #6f9ccc;
    --s-quota_full: #e8ac2c;
    --s-banned: #e05a5a;
    --s-restricted: #e8883a;
    --s-offline: #6d7c77;
    --s-disabled: #56645f;
    --crit: #f07272;
    --warn: #e8ac2c;
    --info: #7fb3dc;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 14px/1.5 var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, p { margin: 0; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- slab (header + KPI) ---------- */
.slab { background: var(--pine); color: var(--pine-ink); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 28px; border-bottom: 1px solid var(--pine-line); }
.bar h1 { font-size: 17px; font-weight: 600; letter-spacing: .01em; }
.bar-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bar form { margin: 0; }
.chip { font-size: 12.5px; padding: 3px 10px; border: 1px solid var(--pine-line); border-radius: 3px; color: var(--pine-mut); }
.chip.on { color: var(--pine-ink); border-color: #3b6b5e; }
.chip.off { color: #f2c46a; border-color: #6d5a2a; }
.live { display: inline-flex; align-items: center; gap: 8px; color: var(--pine-mut); font-size: 13px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--s-offline); }
.dot.ok { background: #36d18a; }
.dot.stale { background: #f2c46a; }
.dot.bad { background: #ff7b7b; }
.clock { font-size: 13px; color: var(--pine-ink); min-width: 74px; text-align: right; }
.ghost { background: none; border: 1px solid var(--pine-line); color: var(--pine-ink); padding: 5px 12px; border-radius: 3px; cursor: pointer; }
.ghost:hover { border-color: #5a8d7e; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.kpi { padding: 20px 28px 22px; border-right: 1px solid var(--pine-line); min-width: 0; }
.kpi:last-child { border-right: 0; }
.kpi .lb { color: var(--pine-mut); font-size: 13.5px; }
.kpi .big { font-size: 42px; line-height: 1.1; font-weight: 600; margin: 4px 0 8px; letter-spacing: -.01em; }
.kpi .big small { font-size: 16px; font-weight: 400; color: var(--pine-mut); margin-left: 6px; letter-spacing: 0; }
.kpi .ln { font-size: 12.5px; color: #c4d9d2; line-height: 1.55; }
.kpi .ln b { color: #fff; font-weight: 600; }
.kpi.alert .big { color: #ffb4a8; }
.kpi.warn .big { color: #f6d27c; }
.seg { display: flex; height: 6px; border-radius: 2px; overflow: hidden; background: #1c3a33; margin: 0 0 10px; }
.seg i { display: block; height: 100%; }

/* ---------- halaman ---------- */
.page { padding: 20px 28px 56px; max-width: 1480px; margin: 0 auto; }
.block { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 18px 20px 20px; margin-bottom: 18px; min-width: 0; }
.block-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.block-h h2 { font-size: 16px; font-weight: 600; }
.sub { color: var(--mut); font-size: 13px; }
h3 { font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 18px; }
.two > .block { margin-bottom: 0; }
.two { margin-bottom: 18px; }
.three { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 28px; }
@media (max-width: 900px) { .three { grid-template-columns: 1fr; gap: 20px; } .two { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .bar, .kpi, .page { padding-left: 16px; padding-right: 16px; } .kpi .big { font-size: 36px; } }

/* ---------- peringatan ---------- */
#alerts { margin-bottom: 18px; }
.al { display: flex; gap: 12px; align-items: baseline; padding: 9px 14px; border: 1px solid var(--line); border-left-width: 4px; background: var(--panel); border-radius: 3px; margin-bottom: 6px; }
.al.crit { border-left-color: var(--crit); }
.al.warn { border-left-color: var(--warn); }
.al.info { border-left-color: var(--info); }
.al b { font-weight: 600; }
.al .hint { color: var(--mut); font-size: 13px; }
.al .ar { margin-left: auto; color: var(--mut); font-size: 12.5px; white-space: nowrap; }
.ok-line { display: flex; align-items: center; gap: 10px; color: var(--mut); padding: 4px 2px; }
.ok-line .dot { background: var(--s-ready); }

/* ---------- peta nomor ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chipf { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--panel); border-radius: 3px; padding: 4px 10px; cursor: pointer; }
.chipf[aria-pressed="true"] { border-color: var(--ink); background: var(--soft); }
.chipf .sw { width: 12px; height: 12px; border-radius: 3px; }
.chipf b { font-weight: 600; }
.fleet { display: flex; flex-direction: column; gap: 10px; }
.srow { display: flex; align-items: center; gap: 14px; }
.srow .sname { flex: 0 0 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow .sbar { flex: 1; height: 14px; background: var(--s-disabled); border-radius: 3px; overflow: hidden; }
.srow .sbar i { display: block; height: 100%; background: var(--s-ready); }
.srow .scnt { flex: 0 0 90px; text-align: right; white-space: nowrap; }
@media (max-width: 600px) { .srow { flex-wrap: wrap; gap: 6px; } .srow .sname { flex-basis: 100%; } .srow .sbar { flex-basis: 0; } }
.cell { width: 22px; height: 22px; border-radius: 4px; border: 0; padding: 0; position: relative; cursor: pointer; overflow: hidden; }
.cell .q { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0,0,0,.28); }
.cell .q i { display: block; height: 100%; background: rgba(255,255,255,.85); }
.cell.dim { opacity: .18; }
.cell.sel { outline: 2px solid var(--ink); outline-offset: 1px; }
.sw.st-ready, .cell.st-ready { background: var(--s-ready); }
.sw.st-cooldown, .cell.st-cooldown { background: var(--s-cooldown); }
.sw.st-quota_full, .cell.st-quota_full { background: var(--s-quota_full); }
.sw.st-banned, .cell.st-banned { background: repeating-linear-gradient(45deg, var(--s-banned) 0 4px, #8f2626 4px 8px); }
.sw.st-restricted, .cell.st-restricted { background: repeating-linear-gradient(45deg, var(--s-restricted) 0 4px, #a8530f 4px 8px); }
.sw.st-offline, .cell.st-offline { background: repeating-linear-gradient(135deg, var(--s-offline) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1.5px var(--s-offline); }
.sw.st-disabled, .cell.st-disabled { background: var(--s-disabled); }
.sw.st-unlisted, .cell.st-unlisted { background: transparent; box-shadow: inset 0 0 0 2px var(--s-unlisted); border: 0; }
.empty { color: var(--mut); padding: 18px 2px; }

.tip { position: fixed; z-index: 20; pointer-events: none; background: var(--pine); color: var(--pine-ink); border-radius: 4px; padding: 9px 12px; font-size: 12.5px; line-height: 1.5; max-width: 280px; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.tip b { font-weight: 600; }
.tip .m { color: var(--pine-mut); }

/* ---------- tabel ---------- */
.scroll { overflow-x: auto; }
.scroll.tall { max-height: 520px; overflow-y: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 7px 12px 7px 0; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
th { font-weight: 600; font-size: 13px; color: var(--mut); position: sticky; top: 0; background: var(--panel); user-select: none; }
th.s { cursor: pointer; }
th.s:hover { color: var(--ink); }
th.s[aria-sort="ascending"]::after { content: " ▲"; font-size: 10px; }
th.s[aria-sort="descending"]::after { content: " ▼"; font-size: 10px; }
td.n, th.n { text-align: right; padding-right: 14px; }
tr.sel td { background: var(--soft); }
tr.mutedrow td { color: var(--mut); }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.pill i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.pill.st-ready i { background: var(--s-ready); } .pill.st-cooldown i { background: var(--s-cooldown); }
.pill.st-quota_full i { background: var(--s-quota_full); } .pill.st-banned i { background: var(--s-banned); }
.pill.st-restricted i { background: var(--s-restricted); } .pill.st-offline i { background: var(--s-offline); } .pill.st-disabled i { background: var(--s-disabled); }
.pill.st-unlisted i { background: transparent; box-shadow: inset 0 0 0 2px var(--s-unlisted); }
.pill.up i { background: var(--s-ready); border-radius: 50%; } .pill.down i { background: var(--crit); border-radius: 50%; }
.pill.warn i { background: var(--warn); border-radius: 50%; }
.bar2 { display: inline-block; width: 70px; height: 6px; background: var(--soft); border-radius: 2px; vertical-align: middle; margin-right: 8px; overflow: hidden; }
.bar2 i { display: block; height: 100%; background: var(--s-offline); }
.bar2.full i { background: var(--s-quota_full); }
.bar2.lo i { background: var(--s-banned); }
.bar2.mid i { background: var(--s-quota_full); }
.bar2.hi i { background: var(--s-ready); }
.qbar { display: inline-block; width: 110px; height: 8px; background: var(--soft); border-radius: 2px; vertical-align: middle; overflow: hidden; }
.qbar i { display: block; height: 100%; background: var(--info); }
.qbar.bad i { background: var(--crit); }
input[type=search] { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 6px 10px; min-width: 240px; }
input[type=search]:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent); }

/* ---------- hari ini ---------- */
.hbars { display: block; width: 100%; height: auto; }
.hbars text { fill: var(--mut); font-size: 11px; font-family: var(--font); }
.hbars .g { stroke: var(--line); stroke-width: 1; }
.hbars .b1 { fill: var(--soft); stroke: var(--line); }
.hbars .b2 { fill: var(--info); }
.lgd { display: flex; gap: 16px; margin-top: 6px; color: var(--mut); font-size: 12.5px; }
.lgd i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.kv span:first-child { color: var(--ink); }
.kv span:last-child { font-weight: 600; }
.kv small { color: var(--mut); font-weight: 400; }
details summary { cursor: pointer; color: var(--mut); }

/* ---------- login ---------- */
.login-page { display: grid; place-items: center; min-height: 100vh; background: var(--pine); }
.login-wrap { width: 100%; max-width: 400px; padding: 20px; }
.login { background: var(--panel); border-radius: 4px; padding: 28px 28px 26px; }
.login h1 { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.login-sub { color: var(--mut); margin-bottom: 18px; }
.login label { display: block; font-weight: 600; margin: 12px 0 5px; }
.login input { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 3px; background: var(--bg); }
.login input:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent); }
.btn-main { width: 100%; margin-top: 20px; padding: 10px; border: 0; border-radius: 3px; background: var(--brand); color: #fff; font-weight: 600; cursor: pointer; }
@media (prefers-color-scheme: dark) { .btn-main { color: #06231c; } }
.btn-main:hover { filter: brightness(1.08); }
.err { background: #fbe9e7; color: #8a2a1e; border: 1px solid #efc0b8; border-radius: 3px; padding: 8px 10px; margin-bottom: 4px; }
.err[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- status service ---------- */
.two.flat { margin-bottom: 0; gap: 28px; }
.pill.st-up i, .pill.st-UP i { background: var(--s-ready); border-radius: 50%; }
.pill.hb-UP i { background: var(--s-ready); border-radius: 50%; }
.pill.hb-WARN i { background: var(--warn); border-radius: 50%; }
.pill.hb-FAIL i, .pill.hb-DOWN i { background: var(--crit); border-radius: 50%; }
.pill.hb-NEVER i, .pill.hb-UNKNOWN i { background: transparent; box-shadow: inset 0 0 0 2px var(--s-offline); border-radius: 50%; }
.hb-msg { color: var(--mut); font-size: 12.5px; white-space: normal; }
details.srv { border-top: 1px solid var(--line); padding: 8px 0; }
details.srv:first-of-type { border-top: 0; }
details.srv summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--ink); list-style: none; }
details.srv summary::-webkit-details-marker { display: none; }
details.srv summary::before { content: "▸"; color: var(--mut); width: 12px; }
details.srv[open] summary::before { content: "▾"; }
details.srv .sum { color: var(--mut); font-size: 12.5px; }
details.srv .body { padding: 8px 0 4px 24px; }

/* ---------- kejadian langsung ---------- */
.events { max-height: 220px; overflow-y: auto; }
.ev { display: flex; gap: 12px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--line); }
.ev:last-child { border-bottom: 0; }
.ev time { color: var(--mut); min-width: 62px; }
.ev i { width: 9px; height: 9px; border-radius: 50%; flex: none; align-self: center; background: var(--s-offline); }
.ev.crit i { background: var(--crit); } .ev.warn i { background: var(--warn); }
.ev.ok i { background: var(--s-ready); } .ev.info i { background: var(--info); }
.ev .ar { margin-left: auto; color: var(--mut); font-size: 12.5px; }

/* ---------- status colors: green = OK, amber = warning, red = down/critical, blue = in progress, grey = unknown ---------- */
:root { --ok: #1d9e63; --ok-ink: #17784c; --crit-ink: #b42323; --warn-ink: #8f5f0f; }
@media (prefers-color-scheme: dark) { :root { --ok: #2fbf7c; --ok-ink: #4fd697; --crit-ink: #ff8c8c; --warn-ink: #f0bd4d; } }

/* KPI cards carry their state in a top stripe and a tint */
.kpi { position: relative; }
.kpi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: transparent; }
.kpi.ok::before { background: #2fbf7c; }
.kpi.warn::before { background: #f2b53a; }
.kpi.alert::before { background: #ff5f5f; }
.kpi.warn { background: rgba(242, 181, 58, .10); }
.kpi.alert { background: rgba(255, 95, 95, .14); }
.kpi.alert .lb::after { content: "  critical"; color: #ff9d9d; font-weight: 600; }
.kpi.warn .lb::after { content: "  attention"; color: #f6d27c; font-weight: 600; }

/* overall chip in the header */
.chip.ov { font-weight: 600; }
.chip.ov.ok { color: #7fe3b4; border-color: #2f7a58; }
.chip.ov.warn { color: #1b1300; background: #f2b53a; border-color: #f2b53a; }
.chip.ov.crit { color: #fff; background: #d63a3a; border-color: #d63a3a; }

/* alerts */
.al.crit { background: color-mix(in srgb, var(--crit) 10%, var(--panel)); }
.al.warn { background: color-mix(in srgb, var(--warn) 10%, var(--panel)); }
.al.info { background: color-mix(in srgb, var(--info) 7%, var(--panel)); }
.al.crit b { color: var(--crit-ink); }
.al.warn b { color: var(--warn-ink); }

/* queue bars */
.qbar.work i { background: var(--info); }
.qbar.retry i { background: var(--warn); }
.qbar.idle i { background: var(--s-offline); }
.qbar.bad i { background: var(--crit); }

/* pills: colored text, not only the dot */
.pill.up, .pill.hb-UP, .pill.st-ready { color: var(--ok-ink); }
.pill.down, .pill.hb-DOWN, .pill.hb-FAIL, .pill.st-banned { color: var(--crit-ink); font-weight: 600; }
.pill.warn, .pill.hb-WARN, .pill.st-quota_full, .pill.st-unlisted { color: var(--warn-ink); font-weight: 600; }
.pill.hb-NEVER, .pill.hb-UNKNOWN, .pill.st-offline, .pill.st-disabled { color: var(--mut); }
.pill.st-cooldown { color: var(--info); }

/* table rows with a problem get a colored edge */
tr.row-banned td:first-child, tr.r-DOWN td:first-child, tr.r-FAIL td:first-child { box-shadow: inset 3px 0 var(--crit); padding-left: 8px; }
tr.row-quota_full td:first-child, tr.row-unlisted td:first-child, tr.r-WARN td:first-child { box-shadow: inset 3px 0 var(--warn); padding-left: 8px; }
tr.row-offline td:first-child, tr.r-NEVER td:first-child { box-shadow: inset 3px 0 var(--s-offline); padding-left: 8px; }
tr.row-banned td, tr.r-DOWN td, tr.r-FAIL td { background: color-mix(in srgb, var(--crit) 7%, transparent); }
tr.row-quota_full td, tr.r-WARN td { background: color-mix(in srgb, var(--warn) 7%, transparent); }
tr.sel td { background: var(--soft); }

/* node server groups */
details.srv { border-left: 4px solid transparent; padding-left: 10px; }
details.srv.w-UP { border-left-color: var(--ok); }
details.srv.w-WARN { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 6%, transparent); }
details.srv.w-DOWN { border-left-color: var(--crit); background: color-mix(in srgb, var(--crit) 8%, transparent); }
details.srv.w-UNKNOWN { border-left-color: var(--s-offline); }
.hb-msg { color: var(--mut); }