/* ==========================================================================
   Skyhotel Control — CSS thuần, không dùng framework
   --------------------------------------------------------------------------
   BẢNG MÀU dùng chung với dự án `skyhotel-admin` (SkyHotel Manager Account).
   Xem QUY_UOC_MAU.md trước khi thêm bất kỳ màu mới nào.
   Nguyên tắc: chỉ dùng biến trong :root, KHÔNG viết mã màu rời rạc trong
   từng thành phần. Giao diện chỉ có chế độ sáng, không làm dark mode.
   ========================================================================== */

:root {
  /* --- Nền và khung --- */
  --bg: #f4f5f7;          /* nền trang */
  --card: #ffffff;        /* nền thẻ, hộp thoại, thanh menu */
  --line: #e3e6ea;        /* đường viền, đường kẻ ngăn cách */

  /* --- Chữ --- */
  --text: #1b1f24;        /* chữ chính */
  --muted: #6b7280;       /* chữ phụ, nhãn, ghi chú */

  /* --- Màu thương hiệu (đỏ Skyhotel) --- */
  --brand: #c9433d;       /* nhạt hơn đỏ gốc #b3231f cho dịu mắt */
  --brand-dark: #a82f2a;  /* trạng thái hover của nút chính */

  /* --- Màu trạng thái --- */
  --ok: #1a7f45;          /* thành công / đang hoạt động */
  --warn: #b26a00;        /* cảnh báo / cần chú ý */
  --danger: #c62828;      /* lỗi / hành động nguy hiểm */
  --info: #1565c0;        /* thông tin / liên kết */

  /* --- Nền nhạt đi kèm màu trạng thái --- */
  --ok-soft: #e6f4ec;
  --warn-soft: #fff3e0;
  --danger-soft: #fdecec;
  --info-soft: #e8f1fd;
  --mute-soft: #eef0f2;

  /* --- Hình khối --- */
  --radius: 10px;
  --shadow: 0 1px 3px rgba(16, 24, 40, .08);
  --tap: 44px;            /* chiều cao tối thiểu để bấm được trên điện thoại */
  --focus-ring: 0 0 0 3px rgba(201, 67, 61, .16);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--info); }

code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: .9em;
  background: var(--mute-soft);
  padding: 1px 5px;
  border-radius: 4px;
}

.hidden { display: none !important; }

/* Chống iOS tự phóng to trang khi chạm vào ô nhập có cỡ chữ nhỏ hơn 16px. */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
}

/* ==========================================================================
   Trang đăng nhập
   ========================================================================== */

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 26px 24px;
}
.login-card h1 { margin: 0 0 4px; font-size: 18px; }
.login-card .sub { margin: 0 0 20px; color: var(--muted); font-size: 13px; }

.field { margin-bottom: 12px; }
.field label {
  display: block;
  margin-bottom: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
input[type="text"], input[type="password"] {
  width: 100%;
  min-height: var(--tap);
  padding: 8px 11px;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  -webkit-appearance: none;
  appearance: none;
}
/* Chỉ ô nhập chữ mới có vòng sáng khi focus (nút tròn xử lý riêng bên dưới). */
input[type="text"]:focus, input[type="password"]:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}

/* ==========================================================================
   Nút
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.btn:hover:not(:disabled) { background: #f7f8f9; }
.btn:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}
.btn-primary:hover:not(:disabled) { color: #fff; background: var(--brand-dark); border-color: var(--brand-dark); }

.btn-block { width: 100%; }
.btn-sm { min-height: 32px; padding: 0 10px; font-size: 13px; }

/* ==========================================================================
   Thông báo trong luồng trang (dùng ở trang đăng nhập)
   ========================================================================== */

.msg {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}
.msg-error { color: var(--danger); background: var(--danger-soft); }
.msg-ok { color: var(--ok); background: var(--ok-soft); }
.msg-warn { color: var(--warn); background: var(--warn-soft); }

/* ==========================================================================
   Bố cục dashboard
   ========================================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  color: #fff;
  background: var(--brand);
}
.topbar .brand { font-size: 16px; font-weight: 700; letter-spacing: .3px; }
.topbar .brand span { font-size: 12px; font-weight: 400; opacity: .82; }
.topbar .right { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.topbar #userInfo { opacity: .88; }
.topbar .btn {
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
  color: #fff;
  background: rgba(255, 255, 255, .15);
  border-color: transparent;
}
.topbar .btn:hover:not(:disabled) { background: rgba(255, 255, 255, .28); }
.topbar .btn:focus-visible { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }

/* Huy hiệu nằm trên nền đỏ phải tự đổi màu cho đọc được. */
.topbar .badge { color: #fff; background: rgba(255, 255, 255, .16); }
.topbar .badge-up .dot { background: #7ae2a5; }
.topbar .badge-down .dot { background: #ffc9c9; }
.topbar .badge-wait .dot { background: rgba(255, 255, 255, .7); }

.container { max-width: 1080px; margin: 0 auto; padding: 20px 16px 40px; }

.section { margin-bottom: 26px; }
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.section-head h2 { margin: 0; font-size: 15px; }
.section-head .hint { font-size: 12.5px; color: var(--muted); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 12px;
}
.card h3 { margin: 0 0 2px; font-size: 15px; }
.card .desc { margin: 0 0 12px; font-size: 13px; color: var(--muted); }

/* Tiêu đề thẻ DNS chính là tên miền, nên trình bày như một thẻ tag —
   cùng kiểu nền với thẻ <code> để người đọc thấy ngay đây là giá trị kỹ thuật. */
.dns-title {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 11px;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  background: var(--mute-soft);
  border-radius: 6px;
  overflow-wrap: anywhere;
}

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }

/* ==========================================================================
   Lựa chọn server
   ========================================================================== */

.server-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.server-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.server-option:hover { border-color: #cfd5dc; background: #fafbfc; }
.server-option.active { border-color: var(--brand); background: #fdf4f4; }

/* Đang đọc hiện trạng DNS -> mờ đi và không bấm được. */
.server-option.is-locked { opacity: .5; cursor: progress; }
.server-option.is-locked:hover { border-color: var(--line); background: transparent; }
.server-option.is-locked.active:hover { border-color: var(--brand); background: #fdf4f4; }
.server-option .name { font-weight: 700; }
.server-option .ip {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px;
  color: var(--muted);
}
/* Ghi chú nằm ngay sau IP, không bị đẩy sang mép phải. */
.server-option .note { font-size: 12.5px; color: var(--muted); }
.server-option .note::before { content: '· '; }

/* Nút tròn: bỏ khung vuông mặc định của trình duyệt khi focus,
   thay bằng vòng sáng tròn cho vừa với hình dạng nút. */
.server-option input {
  margin: 0;
  accent-color: var(--brand);
  outline: none;
  border-radius: 50%;
}
.server-option input:focus { outline: none; box-shadow: none; }
.server-option input:focus-visible { box-shadow: 0 0 0 3px rgba(201, 67, 61, .26); }

/* Vòng quay nhỏ đặt lẫn trong dòng chữ "đang kiểm tra...". */
.inline-spin {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: -2px;
  border: 2px solid var(--line);
  border-top-color: var(--muted);
  border-radius: 50%;
  animation: dlgSpin .7s linear infinite;
}

.current-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 12px;
  background: var(--bg);
  border-radius: 8px;
  font-size: 13.5px;
  margin-bottom: 12px;
}

/* ==========================================================================
   Huy hiệu trạng thái
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.badge-up { color: var(--ok); background: var(--ok-soft); }
.badge-down { color: var(--danger); background: var(--danger-soft); }
.badge-wait { color: var(--muted); background: var(--mute-soft); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.service-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.service-meta { font-size: 12.5px; color: var(--muted); margin-top: 6px; overflow-wrap: anywhere; }
.service-url {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 6px;
  font-family: ui-monospace, Consolas, monospace;
  word-break: break-all;
}

/* ==========================================================================
   Các bước xử lý sự cố
   ========================================================================== */

details.fix { margin-top: 12px; }
details.fix summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--info);
}
details.fix ol { margin: 10px 0 0; padding-left: 20px; font-size: 13.5px; color: var(--text); }
details.fix li { margin-bottom: 6px; }

.footer-note { font-size: 12.5px; color: var(--muted); text-align: center; padding: 8px 0 24px; }

/* ==========================================================================
   Hộp thoại HTML (thay alert / confirm / prompt của trình duyệt)
   ========================================================================== */

.dlg-lock { overflow: hidden; }

.dlg-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(16, 24, 40, .52);
  animation: dlgFadeIn .14s ease-out;
}
.dlg-overlay.dlg-closing { animation: dlgFadeOut .13s ease forwards; }

/* Khung hộp thoại LUÔN mang tông đỏ thương hiệu cho đồng bộ với cả trang.
   Chỉ riêng biểu tượng đổi màu theo sắc thái để người dùng nhận ra ngay
   đây là tin vui, lời cảnh báo hay việc nguy hiểm.
     --dlg-color : màu biểu tượng
     --dlg-soft  : nền vòng tròn biểu tượng */
.dlg-box {
  --dlg-color: var(--info);
  --dlg-soft: var(--info-soft);

  width: min(440px, 100%);
  overflow: hidden;
  background: var(--card);
  border: 1px solid #f0cecc;
  border-top: 4px solid var(--brand);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(16, 24, 40, .28);
  animation: dlgPopIn .16s ease-out;
}
.dlg-overlay.dlg-closing .dlg-box { animation: dlgPopOut .13s ease forwards; }

/* Sắc thái chỉ đổi màu biểu tượng, không đổi khung. */
.dlg-info,
.dlg-question { --dlg-color: var(--info);   --dlg-soft: var(--info-soft); }
.dlg-success  { --dlg-color: var(--ok);     --dlg-soft: var(--ok-soft); }
.dlg-warning  { --dlg-color: var(--warn);   --dlg-soft: var(--warn-soft); }
.dlg-danger   { --dlg-color: var(--danger); --dlg-soft: var(--danger-soft); }

.dlg-body { display: flex; gap: 12px; padding: 18px 18px 14px; }

.dlg-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--dlg-color);
  background: var(--dlg-soft);
}
.dlg-icon svg { width: 20px; height: 20px; }

.dlg-content { min-width: 0; flex: 1; }
.dlg-title { margin: 0 0 5px; font-size: 16px; color: var(--text); }
.dlg-message { margin: 0; font-size: 14px; color: var(--text); line-height: 1.55; word-break: break-word; }

.dlg-details {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.dlg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  font-size: 13.5px;
  background: #fbfcfd;
}
.dlg-row + .dlg-row { border-top: 1px solid var(--line); }
.dlg-row-label { color: var(--muted); white-space: nowrap; }
.dlg-row-value { font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.dlg-row-value.mono { font-family: ui-monospace, Consolas, monospace; font-weight: 600; }

.dlg-input {
  width: 100%;
  min-height: var(--tap);
  margin-top: 12px;
  padding: 8px 11px;
  font-family: inherit;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.dlg-input:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }

/* Lỗi hiện ngay trong hộp thoại khi việc chạy nền thất bại. */
.dlg-error {
  margin-top: 12px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: 8px;
}

/* Vòng quay chờ trên nút chính khi đang gọi API. */
.dlg-spin {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: dlgSpin .7s linear infinite;
}
@keyframes dlgSpin { to { transform: rotate(360deg) } }

.dlg-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 16px;
  background: #fafbfc;
  border-top: 1px solid var(--line);
}
.dlg-actions .btn { min-height: 38px; min-width: 92px; }

/* Nút chính của hộp thoại giống hệt nút chính của trang: đỏ thương hiệu.
   Ghi lại đủ background + color ở hover, nếu không quy tắc .btn:hover phía
   trên sẽ đổi nền thành xám trong khi chữ vẫn trắng. */
.dlg-accent {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}
.dlg-accent:hover:not(:disabled) {
  color: #fff;
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}
.dlg-accent:focus-visible {
  outline: none;
  border-color: var(--brand-dark);
  box-shadow: 0 0 0 3px rgba(201, 67, 61, .32);
}

@keyframes dlgFadeIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes dlgFadeOut { from { opacity: 1 } to { opacity: 0 } }
@keyframes dlgPopIn   { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: none } }
@keyframes dlgPopOut  { to { opacity: 0; transform: translateY(6px) scale(.98) } }

@media (max-width: 480px) {
  .dlg-actions .btn { flex: 1; }
}

/* ==========================================================================
   Thông báo nổi (toast) — nền tối, nằm giữa mép dưới, giống skyhotel-admin
   ========================================================================== */

.toast-stack {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 90vw;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13.5px;
  color: #fff;
  background: #1b1f24;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  animation: toastIn .18s ease-out;
}
.toast.toast-closing { animation: toastOut .18s ease forwards; }
.toast svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; }
.toast span { flex: 1; overflow-wrap: anywhere; }
.toast-close {
  flex: 0 0 auto;
  padding: 0 2px;
  font-size: 17px;
  line-height: 1;
  color: rgba(255, 255, 255, .6);
  background: none;
  border: 0;
}
.toast-close:hover { color: #fff; }

.toast-info { background: #1b1f24; }
.toast-success { background: var(--ok); }
.toast-warning { background: var(--warn); }
.toast-danger { background: var(--danger); }

@keyframes toastIn  { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes toastOut { to { opacity: 0; transform: translateY(6px) } }

@media (prefers-reduced-motion: reduce) {
  .dlg-overlay, .dlg-box, .toast { animation: none !important; }
  .dlg-spin { animation-duration: 1.4s; }   /* vẫn quay để biết là đang chờ */
}

@media (max-width: 640px) {
  .container { padding: 16px 12px 32px; }
  .topbar { padding: 10px 12px; }
}