/* CSS bổ sung cho Pico. Giữ tối giản — xem DESIGN §3.2. */

:root {
  --ls-running: #2e9e4f;
  --ls-stopped: #6b7280;
  --ls-error: #d33;
  --ls-scheduled: #d98b00;
  --ls-accent: #f97316;

  /* Pico phóng to cỡ chữ gốc theo bề rộng màn hình (100% → 125% ở màn ≥1280px),
     nghĩa là trên màn desktop 1 rem = 20px và MỌI thứ to theo. Ghim lại 14px
     cho một trang quản trị nhiều bảng số liệu. Đặt trong app.css (nạp sau
     pico.min.css) nên đè được cả các media query của Pico. */
  --pico-font-size: 87.5%;
  --pico-line-height: 1.45;

  /* Khoảng cách mặc định của Pico rộng gấp rưỡi mức cần cho màn hình dày đặc
     thông tin như trang danh sách channel. */
  --pico-spacing: 0.8rem;
  --pico-typography-spacing-vertical: 0.8rem;
  --pico-block-spacing-vertical: 0.85rem;
  --pico-block-spacing-horizontal: 1rem;
  --pico-form-element-spacing-vertical: 0.45rem;
  --pico-form-element-spacing-horizontal: 0.7rem;
  --pico-nav-element-spacing-vertical: 0.6rem;
  --pico-border-radius: 0.35rem;
}

/* Tiêu đề: Pico đặt h1 = 2rem, cộng thêm cỡ gốc đã to thành ra rất đồ sộ. */
h1 { --pico-font-size: 1.6rem; }
h2 { --pico-font-size: 1.35rem; }
h3 { --pico-font-size: 1.15rem; }
h4, h5, h6 { --pico-font-size: 1rem; }

nav { font-size: 0.9rem; }
main.container { padding-top: 1rem; padding-bottom: 2rem; }
table { font-size: 0.9rem; }
th, td { padding: 0.45rem 0.6rem; }
article > header { padding: 0.6rem 1rem; }
article { margin-bottom: 1rem; }

/* --- Chống tràn khung ---
   Ô lưới của Pico mặc định min-width:auto, nên một chuỗi dài không xuống dòng
   (đường dẫn file băm SHA-256, URL RTMP) sẽ đẩy phình cả cột thay vì tự co. */
.grid > * { min-width: 0; }
.grid > article > table,
article > table { display: block; overflow-x: auto; }
dl.kv dd, dl.kv dt { overflow-wrap: anywhere; }
code, .log-view { overflow-wrap: anywhere; }

[x-cloak] { display: none !important; }

.muted { color: var(--pico-muted-color); }
.err-text { color: var(--ls-error); }

.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.6;
  white-space: nowrap;
}
.badge--running   { background: var(--ls-running); }
.badge--stopped   { background: var(--ls-stopped); }
.badge--error     { background: var(--ls-error); }
.badge--scheduled { background: var(--ls-scheduled); }
.badge--starting  { background: var(--ls-scheduled); }

/* --- Bố cục trang --- */

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.page-head hgroup { margin-bottom: 0; }

.alert {
  padding: 0.65rem 1rem;
  border-radius: 0.4rem;
  margin-bottom: 1rem;
  border-left: 4px solid;
}
.alert--ok  { border-color: var(--ls-running); background: color-mix(in srgb, var(--ls-running) 12%, transparent); }
.alert--err { border-color: var(--ls-error);   background: color-mix(in srgb, var(--ls-error) 12%, transparent); }
.alert ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }

/* Bảng danh sách cần cuộn ngang trên màn hình hẹp thay vì vỡ layout. */
figure { overflow-x: auto; }
table td { vertical-align: middle; }

.row-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}
.row-actions form { margin: 0; }
.row-actions button,
.row-actions [role="button"] {
  margin: 0;
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  white-space: nowrap;
}
button.danger, [role="button"].danger {
  --pico-color: var(--ls-error);
  --pico-border-color: var(--ls-error);
}

/* --- Form --- */

.form-card { max-width: 60rem; margin: 0 auto; }
.form-card fieldset.box {
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 0.5rem;
  padding: 1rem 1.2rem;
  margin-bottom: 1.2rem;
  position: relative;
}
.form-card legend {
  color: var(--ls-accent);
  font-weight: 600;
  padding: 0 0.4rem;
}
/* Trước đây đặt absolute ở góc trên, đè lên đúng ô nhập stream key của dòng
   đầu tiên. Cho về dòng riêng, canh phải. */
.box-tools { display: flex; justify-content: flex-end; margin-bottom: 0.4rem; }

/* Nút trong fieldset không kéo dài hết chiều ngang, và chú thích đi kèm phải
   xuống dòng riêng thay vì quấn quanh nút. */
.form-card fieldset.box > button { width: auto; margin: 0; }
.form-card fieldset.box > small,
.form-card label > small { display: block; margin-top: 0.35rem; }

.link-btn {
  background: none;
  border: none;
  color: var(--pico-muted-color);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.1rem 0.3rem;
  width: auto;
  margin: 0;
}
.link-btn:hover { color: var(--pico-color); }

/* Checkbox đứng riêng giữa hai fieldset cần khoảng thở, nếu không nó dính sát
   vào legend của khối bên dưới. */
.form-card > form > label { display: block; margin: 0.7rem 0 1rem; }

.id-row { display: flex; gap: 0.5rem; align-items: start; }
.id-row input { margin-bottom: 0; }
.id-row button { width: auto; margin-bottom: 0; padding: 0.6rem 0.8rem; }

/* Tên | URL | key | nút xoá.
   minmax(0, …) chứ không phải minmax(6rem, …): mặc định min-width của ô lưới là
   auto, nên ba ô nhập cộng lại luôn rộng hơn khung và nút ✕ bị đẩy tràn ra
   ngoài viền fieldset. */
.output-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 2fr) auto;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  align-items: center;
  max-width: 100%;
}
.output-row input { margin-bottom: 0; }
.output-row button { margin: 0; width: auto; padding: 0.5rem 0.8rem; }

@media (max-width: 720px) {
  .output-row { grid-template-columns: 1fr; }
}

/* Thanh trạng thái VPS */
.statusbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  align-items: center;
  padding: 0.55rem 0.9rem;
  margin-bottom: 1rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 0.5rem;
  font-size: 0.85rem;
}

/* Ô nhập link Drive */
.drive-row { display: flex; gap: 0.5rem; align-items: start; margin-bottom: 0.4rem; }
.drive-row input { margin-bottom: 0; }
.drive-row button { width: auto; margin: 0; white-space: nowrap; }
.job-progress progress { margin: 0; width: 8rem; vertical-align: middle; }

/* Playlist trong form channel */
.playlist { margin: 0.5rem 0; padding-left: 1.4rem; }
.playlist-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.25rem 0;
}
.playlist-actions { display: flex; gap: 0.2rem; }
.playlist-actions button:disabled { opacity: 0.3; cursor: default; }

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  align-items: center;
}
.form-actions [role="button"], .form-actions button { width: auto; margin: 0; }

/* --- Chi tiết --- */

dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0; }
dl.kv dt { color: var(--pico-muted-color); font-size: 0.85rem; }
dl.kv dd { margin: 0; font-size: 0.9rem; }

code.key { font-size: 0.8rem; }

/* Khung log ffmpeg realtime (M3) */
.log-view {
  height: 60vh;
  overflow-y: auto;
  background: #0d1117;
  color: #c9d1d9;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  line-height: 1.45;
  padding: 0.75rem;
  border-radius: 0.4rem;
  white-space: pre-wrap;
  word-break: break-all;
}

/* --- Log & metrics (M3.2) --- */

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.metric-card {
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 0.5rem;
  padding: 0.7rem 0.9rem;
}
.metric-card > strong { margin-right: 0.4rem; }
.metric-card dl.kv { margin-top: 0.5rem; }

.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  font-size: 0.8rem;
  color: var(--pico-muted-color);
}
.inline-check input { margin: 0; }

.log-time { color: #6e7681; }
.log-src  { color: #58a6ff; }