/* ═══════════════════════════════════════════════════════════════════════════
   TeleOps — bảng điều khiển

   Không tải gì từ ngoài: CSP là default-src 'self', và một panel vận hành
   không nên phụ thuộc vào CDN để hiển thị được lúc mạng đang có vấn đề.
   Font dùng stack hệ thống, icon là SVG nội tuyến.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Nền xếp theo độ sâu, không phải theo độ sáng ngẫu nhiên */
  --bg:          #0b0f17;
  --surface:     #131926;
  --surface-2:   #1a2131;
  --surface-3:   #222b3d;

  --border:        #242c3d;
  --border-strong: #313c52;

  --fg:        #e6ebf4;
  --fg-muted:  #939eb4;
  --fg-subtle: #656f85;

  /* Xanh dương = tương tác. Xanh lá KHÔNG dùng cho nút bấm: trong panel giám
     sát nó đã mang nghĩa "khoẻ mạnh", dùng lẫn sẽ làm mất tín hiệu trạng thái. */
  --accent:       #4c8dff;
  --accent-hover: #6ba1ff;
  --accent-dim:   rgba(76, 141, 255, .12);
  --accent-fg:    #06121f;

  /* Màu trạng thái — luôn đi kèm chữ hoặc icon, không bao giờ đứng một mình */
  --ok:     #34d399;
  --ok-dim: rgba(52, 211, 153, .12);
  --warn:     #fbbf24;
  --warn-dim: rgba(251, 191, 36, .12);
  --bad:     #f87171;
  --bad-dim: rgba(248, 113, 113, .12);
  --idle:     #6b7689;
  --idle-dim: rgba(107, 118, 137, .12);

  /* Nhịp 4px, thiên về dày vì đây là màn hình nhiều dữ liệu */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

  --r1: 6px; --r2: 8px; --r3: 12px; --r-full: 999px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.3);
  --shadow-2: 0 4px 12px rgba(0,0,0,.35);
  --shadow-3: 0 12px 32px rgba(0,0,0,.45);

  --sidebar-w: 248px;
  --topbar-h: 56px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          "Noto Sans", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  /* 15px thay vì 14px: bảng dày đặc vẫn phải đọc được lâu mà không mỏi mắt */
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

code, pre, .mono, .tabular {
  font-family: var(--mono);
  font-size: .86em;
  /* Số trong bảng dùng chữ số đều bề rộng để cột không nhảy khi giá trị đổi */
  font-variant-numeric: tabular-nums;
}

/* Focus nhìn thấy được ở mọi thứ bấm được — bỏ outline là cắt đường của người
   dùng bàn phím. :focus-visible nên chuột bấm không bị viền thừa. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r1);
}

::selection { background: var(--accent-dim); }

/* ── Bố cục: sidebar dọc cố định ────────────────────────────────────────── */

.shell { display: flex; min-height: 100dvh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100dvh;
  z-index: 30;
}

.brand {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s5) var(--s5) var(--s4);
  font-weight: 650; font-size: 16px; letter-spacing: -.01em;
  color: var(--fg);
}
.brand .mark {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), #7b5cff);
  border-radius: var(--r2);
  color: #fff;
}
.brand .mark svg { width: 17px; height: 17px; }
.brand small { display: block; font-size: 11px; font-weight: 400; color: var(--fg-subtle); letter-spacing: .02em; }

.nav { padding: var(--s2) var(--s3); flex: 1; overflow-y: auto; }
.nav-label {
  padding: var(--s4) var(--s3) var(--s2);
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg-subtle);
}

.nav a {
  position: relative;
  display: flex; align-items: center; gap: var(--s3);
  padding: 9px var(--s3);
  margin-bottom: 2px;
  border-radius: var(--r2);
  color: var(--fg-muted);
  font-size: 14px; font-weight: 500;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.nav a svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.nav a:hover { background: var(--surface-2); color: var(--fg); }

/* Vị trí hiện tại phải nhìn ra ngay: nền + màu + thanh dọc bên trái, ba tín
   hiệu chồng nhau chứ không chỉ dựa vào màu. */
.nav a.active { background: var(--accent-dim); color: var(--accent); font-weight: 600; }
.nav a.active svg { opacity: 1; }
.nav a.active::before {
  content: ""; position: absolute; left: -12px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 20px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}
.nav a .count {
  margin-left: auto;
  font-size: 11px; font-weight: 600;
  padding: 1px 7px; border-radius: var(--r-full);
  background: var(--bad-dim); color: var(--bad);
  font-variant-numeric: tabular-nums;
}

.sidebar-foot {
  border-top: 1px solid var(--border);
  padding: var(--s3);
  display: flex; align-items: center; gap: var(--s3);
}
.avatar {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  background: var(--surface-3); border-radius: var(--r-full);
  font-size: 12px; font-weight: 600; color: var(--fg-muted);
  text-transform: uppercase;
}
.sidebar-foot .who { flex: 1; min-width: 0; }
.sidebar-foot .who b { display: block; font-size: 13px; font-weight: 550; }
.sidebar-foot .who span { font-size: 11px; color: var(--fg-subtle); }

/* ── Vùng nội dung ──────────────────────────────────────────────────────── */

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: none; /* chỉ hiện trên màn hình nhỏ */
  align-items: center; gap: var(--s3);
  height: var(--topbar-h);
  padding: 0 var(--s4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 25;
}

.content { padding: var(--s8) var(--s8) var(--s10); max-width: 1400px; width: 100%; }

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s5); flex-wrap: wrap;
  margin-bottom: var(--s6);
}
.page-head h1 { font-size: 24px; font-weight: 650; letter-spacing: -.02em; margin: 0 0 var(--s1); }
.page-head .sub { color: var(--fg-muted); font-size: 14px; margin: 0; max-width: 72ch; }
.page-head .actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

h2 { font-size: 15px; font-weight: 600; margin: var(--s8) 0 var(--s3); letter-spacing: -.01em; }
h2:first-child { margin-top: 0; }

/* ── Thẻ số liệu ────────────────────────────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s6);
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  padding: var(--s4) var(--s5);
  display: flex; align-items: center; gap: var(--s4);
}
.stat .ico {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r2);
  background: var(--surface-2); color: var(--fg-muted);
}
.stat .ico svg { width: 19px; height: 19px; }
.stat.is-ok   .ico { background: var(--ok-dim);   color: var(--ok); }
.stat.is-warn .ico { background: var(--warn-dim); color: var(--warn); }
.stat.is-bad  .ico { background: var(--bad-dim);  color: var(--bad); }
.stat .body { min-width: 0; }
.stat .num {
  display: block;
  font-size: 25px; font-weight: 650; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.stat .cap { display: block; font-size: 12.5px; color: var(--fg-muted); line-height: 1.3; }

/* ── Card ───────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  margin-bottom: var(--s4);
}
.card-pad { padding: var(--s5); }
.card-head {
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
}
.card-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.card-foot {
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--border);
  color: var(--fg-subtle); font-size: 12.5px;
}

/* ── Bảng ───────────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }

th {
  text-align: left;
  padding: var(--s3) var(--s4);
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-subtle);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky; top: 0; z-index: 1;
  white-space: nowrap;
}
td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .12s var(--ease); }
tbody tr:hover { background: var(--surface-2); }
tr.is-off { opacity: .45; }

th:first-child, td:first-child { min-width: 178px; }
th:last-child, td:last-child { padding-right: var(--s3); }
.cell-title { font-weight: 550; color: var(--fg); display: inline-block; }
.cell-sub { font-size: 12px; color: var(--fg-subtle); margin-top: 1px; }
.cell-actions { text-align: right; white-space: nowrap; }
.cell-actions form { display: inline; }

/* ── Trạng thái ─────────────────────────────────────────────────────────── */

.dot {
  display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; margin-right: 7px; flex: none;
  vertical-align: middle;
}
.dot.ok   { background: var(--ok);   box-shadow: 0 0 0 3px var(--ok-dim); }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-dim); }
.dot.bad  { background: var(--bad);  box-shadow: 0 0 0 3px var(--bad-dim); }
.dot.idle { background: var(--idle); box-shadow: 0 0 0 3px var(--idle-dim); }

.status { display: inline-flex; align-items: center; white-space: nowrap; font-size: 13px; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--r-full);
  font-size: 11.5px; font-weight: 550; letter-spacing: .01em;
  border: 1px solid var(--border-strong); color: var(--fg-muted);
  background: var(--surface-2);
  white-space: nowrap;
}
.pill.ok   { color: var(--ok);   border-color: rgba(52,211,153,.3);  background: var(--ok-dim); }
.pill.warn { color: var(--warn); border-color: rgba(251,191,36,.3);  background: var(--warn-dim); }
.pill.bad  { color: var(--bad);  border-color: rgba(248,113,113,.3); background: var(--bad-dim); }
.pill.accent { color: var(--accent); border-color: rgba(76,141,255,.3); background: var(--accent-dim); }
.pill svg { width: 12px; height: 12px; }

/* ── Nút ────────────────────────────────────────────────────────────────── */

button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px;
  min-height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r2);
  background: var(--surface-2);
  color: var(--fg);
  font: inherit; font-size: 13.5px; font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s var(--ease), border-color .15s var(--ease),
              color .15s var(--ease), transform .08s var(--ease);
}
button:hover, .btn:hover { background: var(--surface-3); border-color: var(--fg-subtle); color: var(--fg); }
button:active, .btn:active { transform: translateY(1px); }
button svg, .btn svg { width: 15px; height: 15px; }

.btn.primary, button.primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600;
}
.btn.primary:hover, button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn.danger, button.danger {
  color: var(--bad); border-color: rgba(248,113,113,.32); background: var(--bad-dim);
}
.btn.danger:hover, button.danger:hover { background: rgba(248,113,113,.2); border-color: var(--bad); }

.btn.ghost, button.ghost { background: transparent; border-color: transparent; color: var(--fg-muted); }
.btn.ghost:hover, button.ghost:hover { background: var(--surface-2); color: var(--fg); }

.btn.sm, button.sm { padding: 5px 10px; min-height: 30px; font-size: 12.5px; }
.btn.icon, button.icon { padding: 7px; min-width: 34px; min-height: 34px; }

button:disabled, .btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Form ───────────────────────────────────────────────────────────────── */

.field { margin-bottom: var(--s4); }
.field:last-child { margin-bottom: 0; }

label {
  display: block;
  font-size: 12.5px; font-weight: 550; color: var(--fg-muted);
  margin-bottom: 6px;
}
label .req { color: var(--bad); margin-left: 2px; }
label .opt { color: var(--fg-subtle); font-weight: 400; }

input[type=text], input[type=password], input[type=number], input[type=search],
select, textarea {
  width: 100%;
  padding: 9px 12px;
  /* 16px trên mobile để iOS không tự phóng to khi focus vào ô nhập */
  font: inherit; font-size: 14px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r2);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--fg-subtle); }
input:hover, select:hover, textarea:hover { border-color: var(--fg-subtle); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
textarea { min-height: 76px; resize: vertical; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23939eb4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 34px;
}

.hint { font-size: 12px; color: var(--fg-subtle); margin-top: 5px; line-height: 1.45; }

.check {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r2);
  margin-bottom: var(--s2);
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.check:hover { border-color: var(--border-strong); background: var(--surface-2); }
.check input { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--accent); flex: none; cursor: pointer; }
.check label { margin: 0; color: var(--fg); font-size: 13.5px; font-weight: 500; cursor: pointer; }
.check .hint { margin-top: 2px; }
.check:has(input:disabled) { opacity: .6; cursor: default; }

fieldset {
  border: 1px solid var(--border);
  border-radius: var(--r3);
  padding: var(--s5);
  margin: 0 0 var(--s4);
  background: var(--surface);
}
legend {
  padding: 0 var(--s2); margin-left: calc(var(--s2) * -1);
  font-size: 11px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  color: var(--fg-muted);
}

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s5); }
.row { display: flex; align-items: center; gap: var(--s2); }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }

.form-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
  padding-top: var(--s2);
}

/* ── Thông báo ──────────────────────────────────────────────────────────── */

.flash {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: 11px var(--s4);
  border-radius: var(--r2);
  margin-bottom: var(--s4);
  font-size: 13.5px;
  border: 1px solid;
}
.flash svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.flash.ok   { background: var(--ok-dim);   border-color: rgba(52,211,153,.3);  color: var(--ok); }
.flash.err  { background: var(--bad-dim);  border-color: rgba(248,113,113,.3); color: var(--bad); }
.flash.info { background: var(--warn-dim); border-color: rgba(251,191,36,.3);  color: var(--warn); }

.secret {
  font-family: var(--mono); font-size: 12.5px;
  background: var(--bg);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r2);
  padding: 10px 12px;
  word-break: break-all;
  color: var(--fg);
}

pre.out {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: var(--s4);
  margin: 0;
  overflow-x: auto;
  max-height: 460px; overflow-y: auto;
  white-space: pre-wrap; word-break: break-word;
  font-size: 12.5px; line-height: 1.6;
}

/* ── Trạng thái rỗng ────────────────────────────────────────────────────── */

.empty { text-align: center; padding: var(--s10) var(--s5); }
.empty .ico {
  width: 46px; height: 46px; margin: 0 auto var(--s4);
  display: grid; place-items: center;
  border-radius: var(--r3);
  background: var(--surface-2); color: var(--fg-subtle);
}
.empty .ico svg { width: 22px; height: 22px; }
.empty h3 { margin: 0 0 var(--s2); font-size: 15px; font-weight: 600; }
.empty p { margin: 0 auto var(--s5); color: var(--fg-muted); font-size: 13.5px; max-width: 46ch; }

/* ── Phụ trợ ────────────────────────────────────────────────────────────── */

.muted { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.truncate { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt0 { margin-top: 0; }
.right { text-align: right; }

/* Trạng thái đang tải: htmx gắn .htmx-request khi request đang bay */
.htmx-request .spin { opacity: .6; }
.htmx-request .spin::after {
  content: ""; display: inline-block;
  width: 11px; height: 11px; margin-left: 6px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  vertical-align: -1px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Đăng nhập ──────────────────────────────────────────────────────────── */

.login-page { min-height: 100dvh; display: grid; place-items: center; padding: var(--s5); }
.login-box { width: 100%; max-width: 368px; }
.login-box .brand { justify-content: center; padding: 0 0 var(--s6); }
.login-box .card { padding: var(--s6); margin: 0; box-shadow: var(--shadow-3); }
.login-box button { width: 100%; margin-top: var(--s2); }

/* ── Màn hình nhỏ ───────────────────────────────────────────────────────── */

#nav-toggle { display: none; }

@media (max-width: 900px) {
  .topbar { display: flex; }

  /* Sidebar trượt ra từ trái. Dùng checkbox thay JavaScript: CSP đang chặt và
     một cái menu không đáng để thêm script. */
  .sidebar {
    position: fixed; inset: 0 auto 0 0;
    transform: translateX(-100%);
    transition: transform .22s var(--ease);
    box-shadow: var(--shadow-3);
  }
  #nav-toggle:checked ~ .shell .sidebar { transform: translateX(0); }

  .scrim {
    position: fixed; inset: 0; z-index: 29;
    background: rgba(0,0,0,.55);
    opacity: 0; pointer-events: none;
    transition: opacity .22s var(--ease);
  }
  #nav-toggle:checked ~ .shell .scrim { opacity: 1; pointer-events: auto; }

  .content { padding: var(--s5) var(--s4) var(--s8); }
  .page-head h1 { font-size: 20px; }
  .grid2 { grid-template-columns: 1fr; }

  /* Ô nhập 16px để iOS không tự phóng khi focus */
  input[type=text], input[type=password], input[type=number], select, textarea { font-size: 16px; }
}

@media (min-width: 901px) {
  .scrim { display: none; }
  .nav-close { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* In ra giấy: bỏ sidebar, giữ nội dung */
@media print {
  .sidebar, .topbar, .actions, .cell-actions { display: none !important; }
  body { background: #fff; color: #000; }
}