:root {
  --bg: #0b0f14;
  --panel: #11161d;
  --panel-2: #0e131a;
  --row: #121821;
  --row-alt: #0f141c;
  --row-hover: #161d27;
  --border: #222c39;
  --border-soft: #1a222e;
  --text: #dbe3ec;
  --muted: #7d8a9a;
  --faint: #5a6677;
  --primary: #3ddc84;
  --primary-d: #2bbd6e;
  --danger: #f76d6d;
  --blue: #58a6ff;
  --purple: #bc8cff;
  --amber: #f0b65e;
  --teal: #4fd1c5;
  --rose: #ff7eb6;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  line-height: 1.45;
}
.hidden { display: none !important; }
.mono { font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace; }

/* ---------- Buttons / inputs ---------- */
.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  border-radius: 7px; border: 1px solid transparent;
  padding: 8px 14px; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn.sm { padding: 6px 11px; font-size: 12.5px; }
.btn.block { width: 100%; }
.btn.primary { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn.primary:hover { background: rgba(61,220,132,.12); }
.btn.ghost { background: transparent; color: var(--muted); border-color: var(--border); }
.btn.ghost:hover { background: var(--row-hover); border-color: #2e3a4a; color: var(--text); }

.icon-btn {
  cursor: pointer; border: 1px solid var(--border); background: transparent;
  color: var(--muted); border-radius: 6px; width: 28px; height: 28px;
  font-size: 13px; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: .12s;
}
.icon-btn:hover { color: var(--text); border-color: #2e3a4a; }
.icon-btn.danger:hover { color: var(--danger); border-color: rgba(247,109,109,.5); background: rgba(247,109,109,.08); }

input, select, textarea {
  font: inherit; width: 100%;
  padding: 6px 9px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
textarea { resize: vertical; line-height: 1.4; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(61,220,132,.18); }
select { cursor: pointer; }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(900px 500px at 50% -10%, rgba(61,220,132,.07), transparent 60%); }
.login-card {
  width: 100%; max-width: 360px; text-align: center;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 34px 30px; box-shadow: 0 10px 40px rgba(0,0,0,.45);
}
.login-logo { font-size: 2.2rem; }
.login-card h2 { margin: 6px 0 2px; }
.login-card .sub { color: var(--muted); margin: 0 0 20px; }
.login-card form { display: flex; flex-direction: column; gap: 10px; }
.error { color: var(--danger); min-height: 1.2em; margin: 10px 0 0; }

/* ---------- App shell ---------- */
.app { display: grid; grid-template-columns: 212px 1fr; min-height: 100vh; }

.sidebar {
  position: sticky; top: 0; height: 100vh;
  background: var(--panel-2); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 14px 12px;
}
.side-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; padding: 6px 8px 16px; }
.side-brand .logo { font-size: 1.2rem; }
.side-brand .tag {
  font-size: 9px; font-weight: 800; letter-spacing: 1px; color: var(--primary);
  border: 1px solid rgba(61,220,132,.4); background: rgba(61,220,132,.08);
  padding: 1px 5px; border-radius: 999px; margin-left: auto;
}
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 7px;
  color: var(--muted); text-decoration: none; font-weight: 600;
}
.nav-item .ic { width: 16px; text-align: center; }
.nav-item:hover { background: var(--row-hover); color: var(--text); }
.nav-item.active { background: rgba(61,220,132,.1); color: var(--primary); }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.side-user { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; padding: 0 4px; }
.dot-on { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 8px var(--primary); }

/* ---------- Main / appbar ---------- */
.main { display: flex; flex-direction: column; min-width: 0; }
.appbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 18px; background: rgba(11,15,20,.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.appbar-title { display: flex; align-items: baseline; gap: 12px; }
.appbar-title h1 { margin: 0; font-size: 1.05rem; }
.stats { color: var(--muted); font-size: 12px; font-weight: 600;
  background: var(--panel); border: 1px solid var(--border); padding: 2px 9px; border-radius: 999px; }
.appbar-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inline-field { display: flex; align-items: center; gap: 6px; }
.inline-field label { color: var(--faint); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.inline-field input { width: 92px; padding: 5px 8px; }
.vsep { width: 1px; height: 24px; background: var(--border); }

/* ---------- Banner ---------- */
.banner { margin: 12px 18px 0; border-radius: 8px; padding: 9px 13px; font-weight: 600; border: 1px solid; white-space: pre-line; }
.banner.ok { background: rgba(61,220,132,.1); border-color: rgba(61,220,132,.4); color: var(--primary); }
.banner.bad { background: rgba(247,109,109,.1); border-color: rgba(247,109,109,.4); color: var(--danger); }
.banner.info { background: rgba(88,166,255,.1); border-color: rgba(88,166,255,.4); color: var(--blue); }

/* ---------- Dense targets table ---------- */
.table-wrap { padding: 10px 18px 60px; }
.targets-toolbar { display: flex; align-items: center; gap: 10px; padding: 16px 18px 0; flex-wrap: wrap; }
.t-search-wrap { position: relative; flex: 0 1 320px; min-width: 0; }
.t-search-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.t-search { width: 100%; height: 38px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); font: inherit; font-size: 13.5px; padding: 0 12px 0 34px; border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
.t-search::placeholder { color: var(--faint); }
.t-search:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(61,220,132,.15); }
.t-search:focus + .t-search-ic, .t-search-wrap:focus-within .t-search-ic { color: var(--primary); }
.t-pills { flex: none; height: 38px; align-items: center; }
.t-search-count { font-variant-numeric: tabular-nums; font-size: 12.5px; margin-left: auto; }
@media (max-width: 560px) { .targets-toolbar { flex-wrap: wrap; } .t-search-wrap { flex: 1 1 100%; } .t-pills { flex-wrap: wrap; height: auto; } }
.thead, .trow {
  display: grid;
  grid-template-columns: 28px 44px 56px 200px 190px 1fr 84px;
  gap: 12px;
  align-items: center;
}
.thead {
  padding: 5px 10px; color: var(--faint);
  font-size: 10.5px; font-weight: 800; letter-spacing: .6px;
  border-bottom: 1px solid var(--border); position: sticky; top: 0;
}

#targets { display: flex; flex-direction: column; }
.target-edit { border-bottom: 1px solid var(--border-soft); }
.target-edit:nth-child(even) { background: var(--row-alt); }
.target-edit:hover { background: var(--row-hover); }

.trow { padding: 7px 10px; }
.t-index {
  width: 24px; height: 26px; display: grid; place-items: center;
  border-radius: 6px; background: var(--panel); border: 1px solid var(--border);
  font-size: 11px; font-weight: 700; color: var(--muted);
}
.t-name-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.t-avatar {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 5px;
  background: var(--panel); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 11px; font-weight: 700; color: var(--muted);
}
.t-avatar img { width: 100%; height: 100%; object-fit: contain; }
.t-avatar.lg { width: 44px; height: 44px; border-radius: 9px; font-size: 18px; }
.logo-row { display: flex; align-items: flex-end; gap: 12px; }
button.t-avatar { cursor: pointer; }
button.t-avatar:hover { border-color: var(--primary); }
.icon-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px;
  background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 10px;
}
.icon-grid button {
  font-size: 18px; line-height: 1; padding: 7px 0; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
}
.icon-grid button:hover { background: var(--row-hover); }
.icon-grid button.sel { border-color: var(--primary); background: rgba(61,220,132,.12); }
.icon-grid .clear { font-size: 11px; color: var(--muted); grid-column: 1 / -1; }
.t-name-disp { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-host-disp { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow-checks { min-width: 0; }
.trow-act { display: flex; gap: 6px; justify-content: flex-end; }

/* chip tóm tắt (chỉ đọc) — viền theo trạng thái live */
.check-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--panel-2); border: 1px solid var(--border-soft);
  border-radius: 6px; padding: 4px 9px;
}
/* badge bên trong chip = chỉ chữ màu, KHÔNG viền (bỏ box-trong-box) */
.check-chip .badge-type { border: none; background: transparent; padding: 0; min-width: 0; }
.check-chip .chip-param { font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; }
.check-chip[data-type="ping"] .badge-type { color: var(--blue); }
.check-chip[data-type="tcp"]  .badge-type { color: var(--purple); }
.check-chip[data-type="ssh"]  .badge-type { color: var(--amber); }
.check-chip[data-type="snmp"] .badge-type { color: var(--teal); }
.check-chip[data-type="http"] .badge-type { color: var(--rose); }
.check-chip.st-up { border-color: var(--primary); }
.check-chip.st-degraded { border-color: var(--amber); }
.check-chip.st-down { border-color: var(--danger); }
.check-chip.st-disabled { border-color: var(--border-soft); opacity: .5; }
.chip-empty { color: var(--faint); font-style: italic; font-size: 12px; }
.check-chip { cursor: default; }

/* tooltip stats khi hover chip */
.chip-tip {
  position: fixed; z-index: 60; min-width: 320px; max-width: 400px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.6); padding: 12px 14px; font-size: 12px;
  pointer-events: none;
}
.chip-tip .tip-title { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); }
.chip-tip .tip-st { font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid; margin-left: auto; }
.chip-tip .tip-st.up { color: var(--primary); border-color: rgba(61,220,132,.5); }
.chip-tip .tip-st.degraded { color: var(--amber); border-color: rgba(240,182,94,.5); }
.chip-tip .tip-st.down { color: var(--danger); border-color: rgba(247,109,109,.5); }
.chip-tip .tip-st.pending, .chip-tip .tip-st.disabled { color: var(--faint); border-color: var(--border); }

.tip-tbl { width: 100%; border-collapse: collapse; margin-top: 8px; }
.tip-tbl td { padding: 3px 2px; vertical-align: top; }
.tip-tbl td.k { color: var(--muted); white-space: nowrap; font-size: 11px; }
.tip-tbl td.v { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; padding-right: 12px; }
.tip-params { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft); color: var(--muted); font-size: 11px; word-break: break-all; }
.tip-params b { color: var(--text); }
.tip-err { color: var(--danger); margin-top: 8px; word-break: break-word; }

.tip-chart-head { display: flex; justify-content: space-between; color: var(--faint); font-size: 10px; margin-top: 10px; }
.tip-spark { display: flex; align-items: flex-end; gap: 2px; height: 44px; margin-top: 3px; padding: 4px; background: var(--panel-2); border-radius: 6px; }
.tip-spark span { flex: 1; min-width: 3px; border-radius: 1px; background: var(--primary); min-height: 2px; }
.tip-spark span.down { background: var(--danger); }
.tip-spark span.degraded { background: var(--amber); }
.tip-spark span.pending { background: var(--border); }

.tip-lt { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.tip-lt-head { color: var(--faint); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 5px; }
.tip-lt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; text-align: center; }
.tip-lt-grid .lt-k { color: var(--muted); font-size: 10px; }
.tip-lt-grid .lt-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.tip-lt-note { color: var(--faint); font-size: 11px; font-style: italic; }

/* checks: chip nhỏ gọn, xếp ngang tự xuống dòng */
.checks { display: flex; flex-flow: row wrap; gap: 6px; }
.check-edit {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--panel-2); border: 1px solid var(--border-soft);
  border-radius: 6px; padding: 3px 4px 3px 3px;
}
.badge-type {
  flex-shrink: 0; min-width: 40px; text-align: center;
  font-weight: 800; text-transform: uppercase; font-size: 9.5px; letter-spacing: .4px;
  padding: 3px 5px; border-radius: 4px;
  background: transparent; border: 1px solid currentColor;
}
.check-edit[data-type="ping"] .badge-type { color: var(--blue); }
.check-edit[data-type="tcp"]  .badge-type { color: var(--purple); }
.check-edit[data-type="ssh"]  .badge-type { color: var(--amber); }
.check-edit[data-type="snmp"] .badge-type { color: var(--teal); }

/* viền badge theo trạng thái live (chữ vẫn giữ màu theo loại) */
.check-edit.st-up .badge-type { border-color: var(--primary); }
.check-edit.st-degraded .badge-type { border-color: var(--amber); }
.check-edit.st-down .badge-type { border-color: var(--danger); }
.check-edit.st-disabled .badge-type { border-color: var(--border-soft); }
.check-edit.st-disabled { opacity: .55; }
.check-edit input { flex: none; padding: 3px 6px; font-size: 12px; }
.check-edit input[data-field="port"] { width: 62px; }
.check-edit input[data-field="community"] { width: 96px; }
.check-edit input[data-field="oid"] { width: 150px; }
.del-check { flex-shrink: 0; background: transparent; border: none; cursor: pointer;
  color: var(--faint); font-size: 12px; padding: 1px 4px; border-radius: 4px; line-height: 1; }
.del-check:hover { color: var(--danger); background: rgba(247,109,109,.1); }

/* toggle ⚙ trong chip check + vùng nâng cao */
.check-edit { flex-direction: column; align-items: stretch; gap: 4px; }
.check-main { display: flex; align-items: center; gap: 5px; }
.adv-toggle { flex-shrink: 0; background: transparent; border: none; cursor: pointer;
  color: var(--faint); font-size: 11px; padding: 1px 3px; border-radius: 4px; line-height: 1; }
.adv-toggle:hover { color: var(--text); }
.check-edit.open .adv-toggle { color: var(--primary); }
.check-adv { display: none; flex-flow: row wrap; gap: 4px; padding: 2px 2px 3px; border-top: 1px dashed var(--border-soft); }
.check-edit.open .check-adv { display: flex; }
.check-adv input { width: 78px; padding: 3px 5px; font-size: 11px; }

/* switch bật/tắt target */
.switch { position: relative; display: inline-block; width: 30px; height: 17px; align-self: center; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; cursor: pointer; background: #39465a; border-radius: 999px; transition: .15s; }
.slider::before { content: ""; position: absolute; width: 13px; height: 13px; left: 2px; top: 2px;
  background: #fff; border-radius: 50%; transition: .15s; }
.switch input:checked + .slider { background: var(--primary); }
.switch input:checked + .slider::before { transform: translateX(13px); }

/* panel chi tiết target */
.target-edit.off { opacity: .55; }
.tdetail {
  display: flex; flex-flow: row wrap; gap: 12px;
  padding: 8px 12px 11px 64px;
  border-top: 1px dashed var(--border-soft);
  background: rgba(0,0,0,.18);
}
.tdetail .field { display: flex; flex-direction: column; gap: 3px; }
.tdetail .field > span { font-size: 10px; color: var(--faint); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.tdetail .field input { width: 150px; }
.tdetail .field.grow { flex: 1; min-width: 200px; }
.tdetail .field.grow input { width: 100%; }

/* ---------- Trang Thiết lập (sidebar phụ) ---------- */
.settings-shell { display: grid; grid-template-columns: 200px 1fr; gap: 20px; max-width: 1000px; margin: 0 auto; padding: 20px; align-items: start; }
.settings-side { display: flex; flex-direction: column; gap: 3px; position: sticky; top: 70px; }
.set-nav {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
  color: var(--muted); text-decoration: none; font-weight: 600; font-size: 13px;
}
.set-nav .ic { width: 16px; text-align: center; }
.set-nav:hover { background: var(--row-hover); color: var(--text); }
.set-nav.active { background: rgba(61,220,132,.1); color: var(--primary); }
.settings-main { min-width: 0; }
.settings-section { display: flex; flex-direction: column; gap: 16px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.card-title {
  display: flex; align-items: center; justify-content: flex-start; gap: 9px;
  padding: 12px 16px; font-weight: 700; border-bottom: 1px solid var(--border-soft);
}
.card-title .switch { margin-left: auto; }
.card-title .badge-type { background: transparent; border: 1px solid currentColor; }
.badge-type[data-bt="ping"] { color: var(--blue); }
.badge-type[data-bt="tcp"]  { color: var(--purple); }
.badge-type[data-bt="ssh"]  { color: var(--amber); }
.badge-type[data-bt="snmp"] { color: var(--teal); }
.badge-type[data-bt="http"] { color: var(--rose); }

/* sub-menu Thiết lập */
.set-group { font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--faint); padding: 13px 12px 5px; }
.set-nav.sub { padding-left: 14px; }
.bk-nav { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 8px; cursor: pointer; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 13px; }
.bk-nav .ic { width: 16px; text-align: center; }
.bk-nav:hover { background: var(--row-hover); color: var(--text); }
.bk-nav.active { background: rgba(61,220,132,.1); color: var(--primary); }
.set-nav .dt { width: 9px; height: 9px; border-radius: 2px; border: 1px solid currentColor; flex-shrink: 0; }
.set-nav[data-sec="def-ping"] .dt { color: var(--blue); }
.set-nav[data-sec="def-tcp"]  .dt { color: var(--purple); }
.set-nav[data-sec="def-ssh"]  .dt { color: var(--amber); }
.set-nav[data-sec="def-snmp"] .dt { color: var(--teal); }
.set-nav[data-sec="def-http"] .dt { color: var(--rose); }
.def-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .def-fields { grid-template-columns: 1fr; } }
.card-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.card-body .muted { margin: 0; }
.card-body .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0; }
.settings-page { max-width: 760px; margin: 0 auto; padding: 20px; }
.settings-page .field { display: flex; flex-direction: column; gap: 5px; }
.settings-page .field > span { font-size: 12px; color: var(--muted); font-weight: 600; }
.settings-page .field > span small { color: var(--faint); font-weight: 400; }
.settings-page .field small { color: var(--faint); font-size: 11px; }

/* khối phụ trong card */
.subsection { display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--border-soft); }
.subsection:last-of-type { border-bottom: none; padding-bottom: 0; }
.sub-label { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--faint); }

/* danh sách thông tin hệ thống */
.info-list { margin: 0; display: flex; flex-direction: column; gap: 0; }
.info-list > div { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--border-soft); }
.info-list > div:last-child { border-bottom: none; }
.info-list dt { color: var(--muted); font-size: 12.5px; }
.info-list dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.usage-group { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.ug { display: grid; grid-template-columns: 80px 1fr; gap: 12px; align-items: center; }
.ug-k { color: var(--muted); font-size: 12px; font-weight: 600; }
.usage { display: flex; align-items: center; gap: 10px; }
.usage-bar { flex: 1; height: 8px; border-radius: 5px; background: var(--row); overflow: hidden; }
.usage-bar > span { display: block; height: 100%; }
.usage-txt { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.status-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.status-summary .pill {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid;
}
.status-summary .pill.up { color: var(--primary); border-color: rgba(61,220,132,.4); }
.status-summary .pill.degraded { color: var(--amber); border-color: rgba(240,182,94,.4); }
.status-summary .pill.down { color: var(--danger); border-color: rgba(247,109,109,.4); }
.status-summary .pill.disabled { color: var(--faint); border-color: var(--border); }

/* sự kiện thông báo */
.event-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chk { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 12.5px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 11px; }
.chk input { width: auto; }
.chk .dot { width: 9px; height: 9px; border-radius: 50%; }
.chk .dot.up { background: var(--primary); }
.chk .dot.deg { background: var(--amber); }
.chk .dot.down { background: var(--danger); }

.notif-actions { display: flex; align-items: center; gap: 12px; }
.sub-label-row { display: flex; align-items: center; justify-content: space-between; }
.od-files { display: flex; flex-direction: column; gap: 6px; }
.od-file { display: grid; grid-template-columns: 1fr 90px 150px auto; gap: 10px; align-items: center; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; }
.od-file .of-name { font-family: ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-file .of-name .tag { font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 999px; border: 1px solid; margin-right: 6px; }
.od-file .of-name .tag.cfg { color: var(--primary); border-color: rgba(61,220,132,.4); }
.od-file .of-name .tag.db { color: var(--rose); border-color: rgba(255,126,182,.4); }
.od-file .of-name .tag.full { color: #ffce5a; border-color: rgba(255,206,90,.5); }
.od-file .of-size, .od-file .of-date { color: var(--muted); font-variant-numeric: tabular-nums; }
.od-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.od-pager .muted { font-variant-numeric: tabular-nums; }
.maint-list { display: flex; flex-direction: column; gap: 10px; }
.maint-row { display: grid; grid-template-columns: 1fr 1fr 1fr 28px; gap: 10px; align-items: end; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 10px; }
.maint-row .field span { font-size: 11px; }
.maint-row .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .maint-row { grid-template-columns: 1fr 1fr; } }
.provider-block { display: flex; flex-direction: column; gap: 12px; }

/* mặc định theo loại check */
.def-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.def-block { background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.def-head { display: flex; align-items: center; gap: 8px; }
.def-block .badge-type { background: transparent; border: 1px solid currentColor; }
.def-block[data-type="ping"] .badge-type { color: var(--blue); }
.def-block[data-type="tcp"]  .badge-type { color: var(--purple); }
.def-block[data-type="ssh"]  .badge-type { color: var(--amber); }
.def-block[data-type="snmp"] .badge-type { color: var(--teal); }
.def-block .field { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.def-block .field > span { font-size: 12px; color: var(--muted); font-weight: 600; }
.def-block .field input, .def-block .field select { width: 120px; }

/* ---------- Dashboard (gauges) ---------- */
.dash-page { max-width: 1000px; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
/* KPI row */
.kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 880px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
.kpi { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.kpi.good { border-left-color: var(--primary); } .kpi.warn { border-left-color: var(--amber); } .kpi.bad { border-left-color: var(--danger); }
.kpi-label { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.kpi-val { font-size: 24px; font-weight: 800; margin: 2px 0; font-variant-numeric: tabular-nums; }
.kpi.good .kpi-val { color: var(--primary); } .kpi.warn .kpi-val { color: var(--amber); } .kpi.bad .kpi-val { color: var(--danger); }
.kpi-sub { color: var(--faint); font-size: 11px; }
/* Cần chú ý */
.attn-card { border-color: rgba(239,68,68,.35); }
.attn-list { display: flex; flex-direction: column; }
.attn-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--border-soft); }
.attn-row:first-child { border-top: none; }
.attn-id { flex: 1; min-width: 0; }
.attn-name { font-weight: 700; display: flex; align-items: center; gap: 7px; }
.attn-host { display: block; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Hàng target compact */
.dash-targets { display: flex; flex-direction: column; }
.dt-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--border-soft); cursor: pointer; }
.dt-row:first-child { border-top: none; }
.dt-row:hover { background: var(--panel-2); }
.dt-id { width: 200px; flex: none; min-width: 0; }
.dt-name { font-weight: 700; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-host { color: var(--muted); font-size: 11px; font-family: ui-monospace, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.dt-bar { flex: 1; display: flex; gap: 2px; height: 22px; min-width: 60px; }
.dt-bar .db-seg { flex: 1 1 0; border-radius: 2px; background: var(--pending, #475569); min-width: 0; }
.dt-bar .db-seg.up { background: var(--primary); } .dt-bar .db-seg.degraded { background: var(--amber); }
.dt-bar .db-seg.down { background: var(--danger); } .dt-bar .db-seg.none { background: #1a2233; }
.db-empty { color: var(--faint); }
.dt-pct { width: 56px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; flex: none; }
.dt-pct.good { color: var(--primary); } .dt-pct.warn { color: var(--amber); } .dt-pct.bad { color: var(--danger); } .dt-pct.na { color: var(--faint); }
.dt-lat { width: 64px; text-align: right; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; flex: none; }
@media (max-width: 600px) { .dt-lat { display: none; } .dt-id { width: 130px; } }
/* Hàng dưới: latency + events */
.dash-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) { .dash-bottom { grid-template-columns: 1fr; } }
.dash-hero { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: stretch; }
.hero-gauge { display: flex; flex-direction: column; }
.hero-gauge .gauge-wrap { flex: 1; display: grid; place-items: center; padding: 12px; }
.dash-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.gauge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 14px; }
.gauge-card { background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 14px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gauge-card .gc-name { font-weight: 700; display: flex; align-items: center; gap: 7px; max-width: 100%; }
.gauge-card .gc-name span.txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gauge-card .gc-host { color: var(--faint); font-size: 11px; font-family: ui-monospace, monospace; }
.gc-badges { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.gc-badge { font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; border: 1px solid; }
.gc-badge.maint { color: var(--blue); border-color: rgba(88,166,255,.5); }
.gc-badge.ack { color: var(--amber); border-color: rgba(240,182,94,.5); }
.gc-ack { margin-top: 2px; }
.gauge svg, svg.gauge { display: block; }
.gauge .g-track { stroke: var(--row); }
.gauge .g-val { fill: var(--text); font-weight: 800; }
.gauge .g-sub { fill: var(--muted); }

/* ---------- Trang Thống kê ---------- */
.stats-page { max-width: 1000px; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
/* ---- Sơ đồ mạng (topology) ---- */
.map-wrap { max-width: 1100px; margin: 0 auto; padding: 20px; }
.map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.map-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.map-legend .lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.lg-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.lg-dot.up { background: var(--primary); } .lg-dot.degraded { background: var(--amber); }
.lg-dot.down { background: var(--danger); } .lg-dot.disabled { background: var(--faint); }
.topo-scroll { overflow: auto; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 14px; padding: 18px; }
.topo { position: relative; margin: 0 auto; min-height: 80px; }
.topo-edges { position: absolute; left: 0; top: 0; pointer-events: none; }
.topo-node {
  position: absolute; display: flex; align-items: center; gap: 9px;
  background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--faint);
  border-radius: 11px; padding: 0 12px; cursor: pointer; box-sizing: border-box;
  transition: transform .12s, box-shadow .12s; z-index: 1;
}
.topo-node:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.35); z-index: 2; }
.topo-node.up { border-left-color: var(--primary); }
.topo-node.degraded { border-left-color: var(--amber); }
.topo-node.down { border-left-color: var(--danger); }
.topo-node.disabled { border-left-color: var(--faint); opacity: .7; }
.tn-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--faint); }
.tn-dot.up { background: var(--primary); } .tn-dot.degraded { background: var(--amber); }
.tn-dot.down { background: var(--danger); } .tn-dot.disabled { background: var(--faint); }
.tn-ic { font-size: 17px; flex: none; }
.tn-id { min-width: 0; flex: 1; }
.tn-name { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.tn-host { color: var(--muted); font-size: 11px; font-family: ui-monospace, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-tag { font-size: 8.5px; font-weight: 800; padding: 1px 5px; border-radius: 999px; border: 1px solid; flex: none; }
.tn-tag.maint { color: #60a5fa; border-color: rgba(96,165,250,.5); }
.tn-tag.ack { color: var(--amber); border-color: rgba(245,158,11,.5); }
/* chế độ sửa sơ đồ */
.map-hint { font-size: 12.5px; color: var(--muted); background: var(--panel); border: 1px solid var(--border-soft); border-radius: 9px; padding: 8px 12px; margin-bottom: 12px; }
.map-hint b { color: var(--text); }
.topo.editing .topo-node { cursor: grab; }
.topo.editing .topo-node.dragging { cursor: grabbing; }
.topo-node.editing { user-select: none; }
.topo-edge-hit { cursor: pointer; pointer-events: stroke; }
.tn-conn {
  position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  width: 20px; height: 20px; border-radius: 50%; background: var(--panel);
  border: 1px solid var(--primary); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  cursor: crosshair; z-index: 3; line-height: 1;
}
.tn-conn:hover { background: var(--primary); color: #08110b; }
.topo-ghost { pointer-events: none; }
/* palette thêm node */
.map-palette { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.mp-label { color: var(--muted); font-size: 12px; font-weight: 700; }
.mp-btn { background: var(--panel); border: 1px solid var(--border); color: var(--text); font: inherit; font-size: 12.5px; padding: 6px 11px; border-radius: 8px; cursor: pointer; }
.mp-btn:hover { border-color: var(--primary); }
/* node trang trí (shape) */
.topo-node.shape { flex-direction: column; gap: 2px; align-items: center; justify-content: center; background: var(--panel-2); border: 1px dashed var(--border); border-left: 1px dashed var(--border); padding: 4px; }
.topo-node.shape .sh-ic { font-size: 22px; line-height: 1; }
.topo-node.shape .sh-label { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.topo-node.shape.note { background: rgba(245,200,90,.08); border-color: rgba(245,200,90,.4); }
.sh-del { position: absolute; right: -8px; top: -8px; width: 18px; height: 18px; border-radius: 50%; background: var(--danger); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; cursor: pointer; z-index: 4; }
.sh-del:hover { filter: brightness(1.15); }

/* ---- Sức khỏe server ---- */
.health-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hb-left { display: flex; align-items: center; gap: 12px; }
.hb-left #hSample { white-space: nowrap; }
.h-select { flex: none; }
.h-select { background: var(--panel); border: 1px solid var(--border); color: var(--text); font: inherit; font-weight: 600; padding: 7px 12px; border-radius: 9px; cursor: pointer; }
.health-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
@media (max-width: 900px) { .health-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .health-cards { grid-template-columns: repeat(2, 1fr); } }
.hcard { background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 14px; }
.hc-label { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.help { display: inline-block; color: var(--faint); cursor: help; font-size: 11px; opacity: .7; }
.help:hover { opacity: 1; color: var(--primary); }
.hc-big { font-size: 22px; font-weight: 800; margin: 3px 0; font-variant-numeric: tabular-nums; }
.hc-sub { color: var(--faint); font-size: 11px; }
.health-assess { background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 16px; }
.ha-item { font-size: 13px; padding: 2px 0; }
.ha-item.ok { color: var(--primary); }
.ha-item.warn { color: var(--amber); }
.health-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) { .health-charts { grid-template-columns: 1fr; } }
.chart-card { background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 14px; }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ch-title { font-size: 12px; font-weight: 800; letter-spacing: .5px; color: var(--muted); text-transform: uppercase; }
.ch-meta { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.ch-meta b { color: var(--text); }
.hchart { width: 100%; height: 150px; display: block; }
.hc-grid { stroke: var(--border-soft); stroke-width: 1; }
.hc-ytxt { fill: var(--faint); font-size: 9px; }
.chart-axis { display: flex; justify-content: space-between; color: var(--faint); font-size: 10.5px; margin-top: 2px; }
.health-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .health-grid { grid-template-columns: 1fr; } }
.health-kv { display: flex; flex-direction: column; }
.kvr { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border-soft); font-size: 13px; }
.kvr:first-child { border-top: none; }
.kvk { color: var(--muted); flex: none; }
.kvv { text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hb { font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 999px; border: 1px solid; }
.hb.good { color: var(--primary); border-color: rgba(61,220,132,.4); }
.hb.warn { color: var(--amber); border-color: rgba(245,158,11,.4); }
.hb.bad { color: var(--danger); border-color: rgba(239,68,68,.4); }
.stats-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.range-btns { display: inline-flex; gap: 4px; background: var(--panel); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
.range-btns button { background: transparent; border: none; color: var(--muted); font: inherit; font-weight: 600; padding: 6px 13px; border-radius: 7px; cursor: pointer; }
.range-btns button:hover { color: var(--text); }
.range-btns button.active { background: rgba(61,220,132,.14); color: var(--primary); }

.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.stat-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.stat-card .sc-k { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.stat-card .sc-v { font-size: 1.7rem; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat-card .sc-v.good { color: var(--primary); }
.stat-card .sc-v.warn { color: var(--amber); }
.stat-card .sc-v.bad { color: var(--danger); }
.stat-card .sc-v.muted { color: var(--faint); }
.stat-card.tile-good { border-left: 3px solid var(--primary); }
.stat-card.tile-warn { border-left: 3px solid var(--amber); }
.stat-card.tile-bad { border-left: 3px solid var(--danger); }
.stat-card.tile-muted { border-left: 3px solid var(--faint); }

.stat-table { display: flex; flex-direction: column; }
.stat-group { border-bottom: 1px solid var(--border); }
.stat-group:last-child { border-bottom: none; }
.stat-ghead {
  display: grid; grid-template-columns: 16px 24px 1fr 150px 90px 64px; gap: 12px; align-items: center;
  padding: 10px 16px; background: var(--row-alt); cursor: pointer; user-select: none;
}
.stat-ghead:hover { background: var(--row-hover); }
.gh-chevron { color: var(--muted); font-size: 11px; transition: transform .18s; }
.stat-group.open .gh-chevron { transform: rotate(90deg); }
.stat-ghead .gh-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 8px; min-width: 0; }
.gh-count { color: var(--faint); font-size: 11px; font-weight: 600; }
/* thu gọn: ẩn check tới khi mở */
.stat-checks { display: none; flex-direction: column; }
.stat-group.open .stat-checks { display: flex; }
.toolbar-right { display: flex; align-items: center; gap: 14px; }
.only-issues { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-weight: 600; color: var(--muted); font-size: 12.5px; }
.only-issues input { width: auto; }

/* chấm trạng thái + tô nền dòng có vấn đề */
.st-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--primary); }
.st-dot.good { background: var(--primary); }
.st-dot.warn { background: var(--amber); }
.st-dot.bad { background: var(--danger); }
.st-dot.up { background: var(--primary); } .st-dot.degraded { background: var(--amber); }
.st-dot.down { background: var(--danger); } .st-dot.disabled { background: var(--faint); }
.st-dot.pending { background: var(--faint); }
.stat-ghead.warn { box-shadow: inset 3px 0 0 var(--amber); }
.stat-ghead.bad { box-shadow: inset 3px 0 0 var(--danger); }
.stat-crow.rowwarn { background: rgba(240,182,94,.06); box-shadow: inset 3px 0 0 var(--amber); }
.stat-crow.rowbad { background: rgba(247,109,109,.07); box-shadow: inset 3px 0 0 var(--danger); }
.stat-crow { display: grid; grid-template-columns: minmax(150px, 1fr) 2fr 120px 56px; gap: 14px; align-items: center; padding: 8px 16px 8px 44px; border-top: 1px solid var(--border-soft); }
.stat-crow:hover { background: var(--row-hover); }
.st-name { font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; }
.st-name .badge-type { border: 1px solid currentColor; background: transparent; }

/* đồ thị timeline latency theo bucket */
.st-timeline { display: flex; align-items: flex-end; gap: 1px; height: 24px; background: var(--panel-2); border-radius: 4px; padding: 3px 4px; }
.st-timeline span { flex: 1; min-width: 2px; border-radius: 1px; background: var(--primary); min-height: 2px; }
.st-timeline span.degraded { background: var(--amber); }
.st-timeline span.down { background: var(--danger); }
.tl-empty { color: var(--faint); font-size: 11px; font-style: italic; }
.st-name[data-type="ping"] .badge-type { color: var(--blue); }
.st-name[data-type="tcp"] .badge-type { color: var(--purple); }
.st-name[data-type="ssh"] .badge-type { color: var(--amber); }
.st-name[data-type="snmp"] .badge-type { color: var(--teal); }
.st-name[data-type="http"] .badge-type { color: var(--rose); }
.st-host { color: var(--muted); font-family: ui-monospace, monospace; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-bar { height: 7px; border-radius: 4px; background: var(--row); overflow: hidden; }
.st-bar > span { display: block; height: 100%; background: var(--primary); }
.st-pct { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.st-pct.good { color: var(--primary); } .st-pct.warn { color: var(--amber); } .st-pct.bad { color: var(--danger); }
.st-lat { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.stat-events { display: flex; flex-direction: column; }
.ev-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 10px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; }
.ev-row:last-child { border-bottom: none; }
.ev-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.ev-arrow { font-weight: 700; }
.ev-arrow .to-down { color: var(--danger); } .ev-arrow .to-up { color: var(--primary); } .ev-arrow .to-degraded { color: var(--amber); }
.ev-reason { color: var(--muted); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-empty { padding: 18px 16px; color: var(--faint); }

/* nhật ký thông báo */
.notify-log { display: flex; flex-direction: column; }
.nl-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; align-items: center; }
.nl-row:last-child { border-bottom: none; }
.nl-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.nl-main b { font-weight: 700; }
.nl-reason { color: var(--muted); font-size: 11px; }
.nl-ch { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.nl-ch .ch { font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; border: 1px solid; }
.nl-ch .ch.ok { color: var(--primary); border-color: rgba(61,220,132,.4); }
.nl-ch .ch.fail { color: var(--danger); border-color: rgba(247,109,109,.4); }
.nl-ch .ch.none { color: var(--faint); border-color: var(--border); }
@media (max-width: 680px) { .stat-thead, .stat-trow { grid-template-columns: 1fr 70px 60px; } .stat-trow .st-host, .stat-thead span:nth-child(2), .stat-trow .st-lat, .stat-thead span:nth-child(4) { display: none; } }

/* ---------- Modal chi tiết check ---------- */
.modal.detail { max-width: 860px; }
.d-uptime { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0; }
.d-uptime .du { background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 10px 12px; text-align: center; }
.d-uptime .du .du-k { color: var(--muted); font-size: 11px; }
.d-uptime .du .du-v { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.d-uptime .du .du-v.good { color: var(--primary); } .d-uptime .du .du-v.warn { color: var(--amber); } .d-uptime .du .du-v.bad { color: var(--danger); }
.d-uptime .du .du-lat { color: var(--faint); font-size: 11px; }
.d-chart-wrap { background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 8px; }
.d-chart svg { width: 100%; height: auto; display: block; }
.d-chart .dc-axis { fill: var(--faint); font-size: 11px; }
.d-chart .dc-grid { stroke: var(--border-soft); stroke-width: 1; }
.d-chart-empty { color: var(--faint); text-align: center; padding: 40px; }
.d-axis-labels { display: flex; justify-content: space-between; color: var(--faint); font-size: 11px; margin-top: 2px; }
.check-chip.clickable, .stat-crow.clickable { cursor: pointer; }
.stat-crow.clickable:hover { background: var(--row-hover); }

/* ---------- Popup cấu hình target ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 16px; overflow-y: auto;
}
.modal {
  width: 100%; max-width: 780px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border-soft); }
.modal-head h2 { margin: 0; font-size: 1.1rem; }
.modal-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.modal-body .field { display: flex; flex-direction: column; gap: 5px; }
.modal-body .field > span { font-size: 12px; color: var(--muted); font-weight: 600; }
.modal-body .field-row { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.modal-body .field-row > span { font-size: 13px; color: var(--text); font-weight: 600; }
.modal-body .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border-soft); }

.m-checks-head { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.add-check-row { display: flex; gap: 8px; }
.add-check-row select { width: 100px; }
.m-checks { display: flex; flex-direction: column; gap: 10px; }
.m-check {
  background: var(--panel-2); border: 1px solid var(--border-soft);
  border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.m-check-top { display: flex; align-items: center; justify-content: space-between; }
.m-check .badge-type { background: transparent; border: 1px solid currentColor; }
.m-check[data-type="ping"] .badge-type { color: var(--blue); }
.m-check[data-type="tcp"]  .badge-type { color: var(--purple); }
.m-check[data-type="ssh"]  .badge-type { color: var(--amber); }
.m-check[data-type="snmp"] .badge-type { color: var(--teal); }
.m-check[data-type="http"] .badge-type { color: var(--rose); }
.m-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.m-check .field { display: flex; flex-direction: column; gap: 4px; }
.m-check .field > span { font-size: 11px; color: var(--muted); font-weight: 600; }
.m-check .field.span-all { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .settings-shell { grid-template-columns: 1fr; }
  .settings-side { position: static; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 680px) { .card-body .grid2, .def-grid { grid-template-columns: 1fr; } }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center; gap: 12px; }
  .side-nav { flex-direction: row; }
  .side-foot { margin: 0 0 0 auto; flex-direction: row; border: none; padding: 0; }
  .thead { display: none; }
  .trow { grid-template-columns: 24px 40px 40px 1fr; }
  .trow > .t-name, .trow > .t-host, .trow-checks, .trow-act { grid-column: 1 / -1; }
  .trow-act { justify-content: flex-end; }
  .tdetail { padding-left: 12px; }
}