/* IOC — giao diện bảng điều khiển giám sát máy chủ.
   Phong cách tối kiểu Grafana: nền xám than sâu, khối nội dung sáng hơn nền,
   viền mảnh, bo góc vừa phải. Tự chứa hoàn toàn: không tải phông chữ,
   ảnh hay thư viện nào từ Internet. */

:root {
  color-scheme: dark;

  /* Nền và khối nội dung */
  --bg: #0d1117;
  --bg-alt: #141a24;
  --card: #161d28;
  --card-2: #1c2431;
  --card-hover: #1f2836;
  --border: #262f40;
  --border-strong: #38445c;

  /* Chữ — bảo đảm tương phản đạt chuẩn WCAG AA trên nền tối */
  --text: #eaf0fb;
  --text-muted: #aab7cf;

  /* Màu trạng thái dùng thống nhất toàn hệ thống */
  --up: #73d18a;
  --down: #ff6b7a;
  --warn: #ffb454;
  --unknown: #9aa8bf;
  --accent: #6ea8fe;
  --accent-hover: #4b8ef5;
  /* Đỏ đậm hơn để chữ trắng trên nút đạt tương phản WCAG AA (4.97:1) */
  --danger: #d13239;
  --danger-hover: #b81d24;

  /* Nền mờ của các màu trạng thái, dùng cho pill và vùng tô biểu đồ */
  --up-soft: rgba(115, 209, 138, 0.14);
  --down-soft: rgba(255, 107, 122, 0.14);
  --warn-soft: rgba(255, 180, 84, 0.14);
  --unknown-soft: rgba(154, 168, 191, 0.14);
  --accent-soft: rgba(110, 168, 254, 0.14);

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  --container-max: 1440px;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 50% -280px, #16203050, transparent 70%),
    var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------ thanh trên */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: rgba(20, 26, 36, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 30;
}

.brand {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--text);
}
.brand-sub {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-left: 0.4rem;
}

.topnav { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.topnav a, .topnav .link-btn {
  color: var(--text-muted);
  font-size: 0.92rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, color 0.15s ease;
}
.topnav a:hover, .topnav .link-btn:hover {
  color: var(--text);
  background: var(--card-2);
  text-decoration: none;
}

.link-btn {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 1.25rem;
}

.footer {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  padding: 1.5rem;
}

/* ------------------------------------------------------------- tiêu đề trang */

.page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.page-head h1 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.page-head .sub { color: var(--text-muted); font-size: 0.9rem; }

/* -------------------------------------------------------------- thẻ tổng hợp */

/* Hàng trên cùng chia đôi: bốn thẻ tổng hợp xếp dọc bên trái chiếm một nửa
   bề rộng, biểu đồ tổng quan chiếm nửa còn lại bên phải. */
.hang-tong-quan {
  display: grid;
  /* Cột thẻ chỉ chiếm 15%, nhường gần hết bề rộng cho biểu đồ tổng quan.
     Sàn 150px để nhãn dài nhất vẫn còn chỗ; ở bề rộng này thẻ chuyển sang
     xếp dọc vì đặt số và nhãn nằm ngang sẽ chật. */
  grid-template-columns: minmax(150px, 15fr) minmax(0, 85fr);
  gap: 0.9rem;
  align-items: stretch;
  margin-bottom: 1.1rem;
}
.hang-tong-quan > .panel {
  margin-bottom: 0;
  height: 100%;
}

/* Cột bốn thẻ phải cao ĐÚNG BẰNG khối biểu đồ bên cạnh.
   Chiều cao hàng do khối cao nhất quyết định; đặt height 100% để cột thẻ ăn
   trọn chiều cao đó, rồi chia làm bốn hàng bằng nhau. Dùng grid-template-rows
   thay cho grid-auto-rows vì auto-rows chỉ áp khi hàng chưa có kích thước
   xác định, dễ trở về co theo nội dung. */
.summary-cards {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  height: 100%;
  gap: 0.6rem;
  margin-bottom: 0;
}

/* Bốn thẻ tổng hợp: viền MÀU bao quanh đủ bốn cạnh, không chỉ riêng cạnh trái.
   Mỗi thẻ tự đặt --vien-the theo màu trạng thái của nó, kèm quầng sáng mờ
   cùng tông để viền màu trông có chủ ý chứ không bị chói. */
.card {
  --vien-the: var(--accent);
  position: relative;
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 2px solid var(--vien-the);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--vien-the) 18%, transparent),
              var(--shadow);
  border-radius: var(--radius);
  /* Đệm bằng nhau bốn phía để viền trông thật sự đều */
  padding: 0.75rem 1rem;
  /* Cột chỉ rộng 15% nên xếp dọc: số ở trên, nhãn ở dưới. Đặt nằm ngang sẽ
     khiến nhãn dài nhất bị xuống dòng hoặc bị cắt. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.15rem;
  overflow: hidden;
}
/* Không dùng dải màu ở một cạnh nữa: người dùng muốn viền dày đều tuyệt đối
   quanh cả bốn cạnh, nên toàn bộ màu nằm ở thuộc tính border. */
.card .num {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.card .label {
  color: var(--text-muted);
  /* Nhãn nhỏ lại một chút và bỏ giãn chữ để vừa cột hẹp mà vẫn đọc rõ */
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: left;
  line-height: 1.2;
}
.card-up      { --vien-the: var(--up); }
.card-down    { --vien-the: var(--down); }
.card-unknown { --vien-the: var(--unknown); }
.card-up::before { background: var(--up); }
.card-down::before { background: var(--down); }
.card-unknown::before { background: var(--unknown); }
.card .num { color: var(--vien-the); }
.card-up .num { color: var(--up); }
.card-down .num { color: var(--down); }
.card-unknown .num { color: var(--unknown); }

.refresh-indicator {
  color: var(--text-muted);
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.refresh-indicator::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 0 3px var(--up-soft);
}

/* ----------------------------------------------------------- khối (panel) chung */

.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 1.1rem;
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.panel-head h2 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.panel-head .sub { color: var(--text-muted); font-size: 0.82rem; font-weight: 400; }
.panel-body { padding: 1rem; }

/* Bộ chọn khung thời gian kiểu Grafana */
.range-picker {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.range-picker button {
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  padding: 0.3rem 0.7rem;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.range-picker button:last-child { border-right: none; }
.range-picker button:hover { background: var(--card-hover); color: var(--text); }
.range-picker button[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* Khu vực vẽ biểu đồ */
.chart-box { position: relative; width: 100%; }
.chart-box canvas { display: block; width: 100% !important; }
.chart-lg { height: 260px; }
.chart-md { height: 200px; }

.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 120px;
  padding: 1.5rem 1rem;
  color: var(--text-muted);
  font-size: 0.88rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
}
[hidden] { display: none !important; }

/* -------------------------------------------------------------- lưới máy chủ */

/* Lưới máy chủ: điện thoại 1 cột, máy tính bảng 2 cột, màn hình vừa 4 cột,
   màn hình rộng 6 cột */
.server-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 680px) {
  .server-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .server-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1500px) {
  .server-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.server-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.75rem 0.8rem 0.8rem;
  box-shadow: var(--shadow);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.server-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.35);
}
/* Máy chủ đang gián đoạn phải đập vào mắt ngay */
.server-card[data-status="DOWN"] {
  border-color: rgba(255, 107, 122, 0.55);
  background: linear-gradient(180deg, rgba(255, 107, 122, 0.07), var(--card) 60%);
}
.server-card[data-status="DOWN"]::after {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--down);
}

.server-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.server-name {
  font-weight: 650;
  font-size: 1rem;
  margin-right: auto;
  word-break: break-word;
}
.server-name a { color: var(--text); }
.server-target {
  flex-basis: 100%;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pill-up { background: var(--up-soft); color: var(--up); border-color: rgba(115, 209, 138, 0.35); }
.pill-down { background: var(--down-soft); color: var(--down); border-color: rgba(255, 107, 122, 0.4); }
.pill-unknown { background: var(--unknown-soft); color: var(--unknown); border-color: rgba(154, 168, 191, 0.3); }

.badge-disabled {
  font-size: 0.74rem;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
}

/* Hàng biểu đồ trong thẻ: vòng tròn uptime bên trái, độ trễ bên phải */
.card-charts {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 0.6rem;
  align-items: center;
}

.chart-open {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.25rem;
  cursor: pointer;
  display: block;
  width: 100%;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.chart-open:hover { background: var(--card-2); border-color: var(--border); }

.donut-wrap {
  position: relative;
  width: 86px;
  height: 86px;
  margin: 0 auto;
}
.donut-wrap canvas { position: absolute; inset: 0; }
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.donut-value {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.donut-label {
  font-size: 0.62rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.donut-value.muc-tot { color: var(--up); }
.donut-value.muc-vua { color: var(--warn); }
.donut-value.muc-kem { color: var(--down); }

.spark-wrap { height: 86px; position: relative; }
.spark-wrap canvas { position: absolute; inset: 0; }

/* ------------------------------------------------- dải trạng thái UP/DOWN */

.strip-block { display: flex; flex-direction: column; gap: 0.3rem; }
.strip-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.74rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.strip {
  display: flex;
  gap: 1px;
  height: 22px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-alt);
}
.strip-cell {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 1px;
  background: var(--unknown);
  opacity: 0.35;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.strip-cell.o-up { background: var(--up); opacity: 0.9; }
.strip-cell.o-warn { background: var(--warn); opacity: 0.9; }
.strip-cell.o-down { background: var(--down); opacity: 0.95; }
.strip-cell.o-none { background: #3a4356; opacity: 0.55; }
.strip-cell:hover { opacity: 1; transform: scaleY(1.12); }
.strip-empty {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 0.35rem 0;
}

/* Chú giải màu của dải trạng thái */
.strip-legend {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  font-size: 0.76rem;
  color: var(--text-muted);
}
.strip-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.strip-legend i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}
.legend-up { background: var(--up); }
.legend-warn { background: var(--warn); }
.legend-down { background: var(--down); }
.legend-none { background: #3a4356; }

/* Bảng chỉ dẫn nổi khi rê chuột lên dải trạng thái */
.strip-tip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  background: #0b1017;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.6rem;
  font-size: 0.78rem;
  color: var(--text);
  box-shadow: var(--shadow-lg);
  white-space: nowrap;
  max-width: 90vw;
}
.strip-tip b { font-weight: 600; }

/* --------------------------------------------------------- thẻ số liệu nhanh */

/* Bốn ô số liệu xếp thành một cột, nhãn bên trái và giá trị bên phải.
   Trước đây xếp lưới 2×2, nhưng khi lưới máy chủ lên 6 cột thì mỗi ô chỉ còn
   khoảng 100px, không đủ chỗ cho nhãn dài nhất nên chữ bị cắt cụt. */
.quick-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.3rem;
}
.quick-stats div {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.32rem 0.5rem;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.quick-stats .qs-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  white-space: nowrap;
  /* Nhãn co được nhưng không bao giờ bị cắt: giá trị mới là phần nhường chỗ */
  flex: 0 1 auto;
}
.quick-stats .qs-value {
  font-size: 0.85rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  flex: 0 0 auto;
}

.server-error {
  margin: 0;
  font-size: 0.82rem;
  color: var(--down);
  background: var(--down-soft);
  border-left: 3px solid var(--down);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.4rem 0.6rem;
  word-break: break-word;
}

/* Ba nút nằm gọn một hàng. Không chia ba cột bằng nhau: nút "Kiểm tra ngay"
   dài hơn hẳn hai nút kia, chia đều sẽ khiến nó bị cắt mất chữ. Để mỗi nút tự
   rộng theo nội dung và cấm xuống dòng. */
.server-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3rem;
  margin-top: auto;
  padding-top: 0.2rem;
}
.server-actions > * { flex: 0 0 auto; }
.server-actions .inline-form { display: flex; }

.inline-form { display: inline-flex; margin: 0; }

button, .btn {
  background: var(--accent);
  color: #08101d;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: background 0.15s ease, transform 0.1s ease;
}
button:hover, .btn:hover { background: var(--accent-hover); text-decoration: none; }
button:active, .btn:active { transform: translateY(1px); }
.btn-ghost {
  background: var(--card-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn-ghost:hover { background: var(--card-hover); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-hover); }

.empty { color: var(--text-muted); }

/* -------------------------------------------------------------------- bảng */

.events-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.88rem;
}
.panel .events-table { border: none; border-radius: 0; }
.events-table th, .events-table td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.events-table th {
  color: var(--text-muted);
  font-weight: 600;
  background: var(--bg-alt);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  position: sticky;
  top: 0;
}
.events-table tbody tr:hover { background: var(--card-2); }
.events-table tr:last-child td { border-bottom: none; }

.recent-events h2 { font-size: 1.05rem; margin-bottom: 0.6rem; }

.tag-up { color: var(--up); font-weight: 600; }
.tag-down { color: var(--down); font-weight: 600; }
.tag-unknown { color: var(--unknown); font-weight: 600; }

.table-scroll { max-height: 460px; overflow: auto; }

/* --------------------------------------------------------- popup chi tiết */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 13, 0.72);
  backdrop-filter: blur(3px);
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3vh 1rem;
  overflow-y: auto;
  animation: hien-dan 0.16s ease-out;
}
.modal {
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  width: min(980px, 100%);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  animation: truot-len 0.18s ease-out;
}
.modal-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  border-radius: 14px 14px 0 0;
}
.modal-title { font-size: 1.05rem; font-weight: 650; margin: 0; }
.modal-target {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.modal-close {
  margin-left: auto;
  background: var(--card-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  width: 32px;
  height: 32px;
  justify-content: center;
  font-size: 1.05rem;
  padding: 0;
}
.modal-close:hover { background: var(--danger); color: #fff; }
.modal-body { padding: 1rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; }
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  border-radius: 0 0 14px 14px;
}
.modal-section h3 {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
body.khoa-cuon { overflow: hidden; }

@keyframes hien-dan { from { opacity: 0; } to { opacity: 1; } }
@keyframes truot-len {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------- bảng số liệu bốn khung */

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
}
.metric-cell {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.7rem;
}
.metric-cell h4 {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.metric-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.84rem;
  padding: 0.1rem 0;
}
.metric-row span { color: var(--text-muted); }
.metric-row b { font-variant-numeric: tabular-nums; font-weight: 650; }

/* ---------------------------------------------------- trang chi tiết máy chủ */

.detail-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.detail-head h1 { margin: 0; font-size: 1.5rem; }
.detail-head .server-target { flex-basis: auto; }
.detail-actions { margin-left: auto; display: flex; gap: 0.5rem; flex-wrap: wrap; }

.detail-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
}

.config-list { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.35rem 1rem; }
.config-list dt { color: var(--text-muted); font-size: 0.85rem; }
.config-list dd {
  margin: 0;
  font-size: 0.88rem;
  word-break: break-word;
  font-weight: 550;
}

.breadcrumb { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.5rem; }

/* ------------------------------------------------------------------- biểu mẫu */

.login-wrap { display: flex; justify-content: center; padding-top: 3rem; }
.login-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  box-shadow: var(--shadow);
}
.login-box h1 { margin: 0 0 0.3rem; font-size: 1.3rem; text-align: center; }

.server-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 460px;
}

label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.checkbox-label { flex-direction: row; align-items: center; gap: 0.5rem; }
.checkbox-label input { width: auto; }
.hint { font-size: 0.78rem; color: var(--text-muted); }

input[type="text"], input[type="password"], input[type="number"], select, textarea {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.6rem;
  color: var(--text);
  font: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.form-actions { display: flex; gap: 0.6rem; }

.filter-form { margin-bottom: 1rem; }
.filter-form select { min-width: 220px; }

.error {
  background: var(--down-soft);
  border: 1px solid rgba(255, 107, 122, 0.4);
  color: #ffb3bb;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}

/* --------------------------------------------------------------- đáp ứng */

@media (max-width: 900px) {
  .detail-cols { grid-template-columns: minmax(0, 1fr); }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Hết chỗ cho hai cột: xếp biểu đồ xuống dưới, bốn thẻ về lưới 2×2 */
  .hang-tong-quan { grid-template-columns: minmax(0, 1fr); }
  .summary-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    height: auto;
  }
  .hang-tong-quan > .panel { height: auto; }
}

@media (max-width: 640px) {
  .container { padding: 0.9rem; }
  .summary-cards { grid-template-columns: minmax(0, 1fr); }
  .card .num { font-size: 1.8rem; }
  .topbar { flex-direction: column; align-items: flex-start; }
  .quick-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .events-table { display: block; overflow-x: auto; white-space: nowrap; }
  .detail-actions { margin-left: 0; }
  .modal-backdrop { padding: 0; }
  .modal { border-radius: 0; max-height: 100vh; height: 100%; }
  .modal-head, .modal-foot { border-radius: 0; }
}

/* Tôn trọng lựa chọn giảm chuyển động của người dùng */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .server-card:hover { transform: none; }
}

/* ------------------------------------------- bổ sung nhỏ cho thẻ máy chủ */

.server-meta {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.server-meta b { color: var(--text); font-weight: 600; }
.muted { color: var(--text-muted); }

/* Lời giải thích thay cho biểu đồ nhỏ khi ô chưa có dữ liệu */
.chart-empty.nho {
  min-height: 74px;
  padding: 0.5rem;
  font-size: 0.8rem;
}

/* Dải trạng thái vừa là vùng bấm mở popup, vẫn phải giữ bố cục dạng cột */
.strip-block.chart-open { display: flex; }

/* ------------------------------- gọn nội dung thẻ khi lưới hiển thị bốn cột */

.server-card .server-name { font-size: 0.94rem; }
.server-card .server-target { font-size: 0.78rem; }
.server-card .pill { font-size: 0.75rem; padding: 0.1rem 0.5rem; }
.server-card .server-actions button,
.server-card .server-actions .btn {
  font-size: 0.74rem;
  padding: 0.3rem 0.35rem;
  white-space: nowrap;
  text-align: center;
}
.server-card .strip-head { font-size: 0.68rem; }
.server-card .server-meta { font-size: 0.78rem; }
.server-card .server-error { font-size: 0.78rem; }

/* -------------------------------------------- kéo thả đổi thứ tự máy chủ */

.keo-tha-goi-y { margin: 0 0 0.6rem; }

.tay-keo {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: grab;
  letter-spacing: -0.05em;
  user-select: none;
}
.server-card[draggable="true"] { cursor: grab; }
.server-card[draggable="true"]:active { cursor: grabbing; }

/* Card đang được nhấc lên: mờ đi và thu nhỏ nhẹ để thấy rõ đang di chuyển */
.server-card.dang-keo {
  opacity: 0.45;
  transform: scale(0.98);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-lg);
}
/* Trong lúc sắp xếp, các card còn lại hiện khung nét đứt báo chỗ có thể thả */
.server-grid.dang-sap-xep .server-card:not(.dang-keo) {
  outline: 1px dashed var(--border-strong);
  outline-offset: 3px;
  transition: transform 0.14s ease;
}
.server-grid.dang-sap-xep .server-card:hover { transform: none; }

/* Thông báo ngắn ở góc dưới bên phải */
.toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 70;
  background: var(--card-2);
  border: 1px solid var(--up);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.85rem;
  font-size: 0.88rem;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.toast.hien { opacity: 1; transform: none; }
.toast-loi { border-color: var(--down); color: #ffb3bb; }

/* ------------------------- máy chủ đang gián đoạn phải nổi bật ở mọi vị trí */

.server-card[data-status="DOWN"] {
  border-color: var(--down);
  background: linear-gradient(180deg, rgba(255, 107, 122, 0.16), rgba(255, 107, 122, 0.05) 55%, var(--card));
  box-shadow: 0 0 0 1px rgba(255, 107, 122, 0.35), 0 10px 26px rgba(120, 0, 20, 0.25);
}
.server-card[data-status="DOWN"]::after { height: 4px; }
.server-card[data-status="DOWN"] .server-name { color: #ffd7db; }
.server-card[data-status="DOWN"]:hover {
  border-color: var(--down);
  box-shadow: 0 0 0 2px rgba(255, 107, 122, 0.45), 0 14px 30px rgba(120, 0, 20, 0.3);
}

/* Tên máy chủ luôn xuống dòng riêng để mọi card cùng một bố cục, dù tên dài */
.server-card .server-name {
  flex-basis: 100%;
  margin-right: 0;
  line-height: 1.3;
}
.chart-empty.nho { min-height: 86px; }