/* ============================================================
 * insightreel-staff-layout.css
 * Sửa bố cục giao diện staff/Super Admin (12/09/2026):
 *   - Nút xếp theo lưới cột cố định, thẳng cột giữa các hàng và các thẻ.
 *   - Chip dự án & vai trò xếp thành cột, không còn chữ trơ trọi.
 *   - Bảng nhân sự bỏ cột "Loại tài khoản", mở rộng cột dự án & vai trò.
 *   - Thanh trên cùng nền xám nhạt để logo nổi lên.
 *
 * Vì sao là file riêng: trang staff production nạp CSS từ bundle Vite dựng sẵn
 * (assets/staff-*.css) chứ KHÔNG nạp styles.css gốc, nên quy tắc mới phải nằm
 * trong một tệp được index.html nạp thẳng. Tệp này luôn đứng TRƯỚC
 * media-extraction.css để media-extraction.css vẫn là stylesheet cuối cùng.
 * ============================================================ */

/* --- Thanh trên cùng: nền xám nhạt, viền dưới rõ, logo nổi hơn --- */
.topbar {
  background: var(--surface-2, #f1f5f9);
  border-bottom: 1px solid var(--border, #d0d5dd);
}
.topbar .brand img { width: 104px; }
.topbar .topbar-divider { background: var(--border, #d0d5dd); }

/* --- Thẻ dự án: hàng nút thẳng cột --- */
body.super-admin-mode .sa-project-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(104px, 1fr));
  gap: var(--space-2, 8px);
  align-content: start;
  justify-content: stretch;
}
body.super-admin-mode .sa-project-actions .btn {
  width: 100%;
  min-height: var(--btn-h-sm, 32px);
  padding: 0 var(--space-3, 12px);
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}
/* Hành động chính và khối nhắc thùng rác chiếm trọn hàng cuối. */
body.super-admin-mode .sa-project-actions .btn-primary,
body.super-admin-mode .sa-project-actions .sa-trash-retention { grid-column: 1 / -1; }

/* --- Bảng: ô thao tác thành lưới 2 cột, các nút thẳng cột giữa các hàng --- */
body.super-admin-mode .sa-table td.sa-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  align-content: start;
}
body.super-admin-mode .sa-table td.sa-actions .btn {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 0 8px;
  justify-content: center;
  overflow: hidden;
  font-size: 12px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Bảng nhân sự: 5 cột, cột dự án & vai trò rộng nhất --- */
body.super-admin-mode .sa-staff-panel .sa-table { table-layout: fixed; min-width: 900px; }
body.super-admin-mode .sa-staff-panel .sa-table th,
body.super-admin-mode .sa-staff-panel .sa-table td { vertical-align: top; }
body.super-admin-mode .sa-staff-panel .sa-table td { overflow-wrap: anywhere; }

/* --- Dự án & vai trò: mỗi dòng một dự án, các cột thẳng hàng --- */
body.super-admin-mode .sa-mem-list { display: grid; gap: 6px; }
body.super-admin-mode .sa-mem-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 28px 44px;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 8px;
  font-size: 12px;
}
body.super-admin-mode .sa-mem-project { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.super-admin-mode .sa-mem-role { justify-self: start; width: 100%; text-align: center; }
body.super-admin-mode .sa-mem-perm,
body.super-admin-mode .sa-mem-x { justify-self: stretch; width: 100%; min-width: 0; height: 24px; }

/* Giá trị trống cũng nằm trong ô, không còn là dòng chữ trơ trọi. */
body.super-admin-mode .sa-mem-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--color-border, #d0d5dd);
  border-radius: var(--radius-chip, 999px);
  color: var(--color-text-muted, #667085);
  background: var(--color-surface-2, #f1f5f9);
  font-size: 12px;
  white-space: nowrap;
}
body.super-admin-mode .sa-mem-note.is-workspace {
  color: var(--color-primary, #1f5fbf);
  border-color: var(--color-primary-soft, #dbe7f8);
  background: var(--color-primary-soft, #eff5fd);
  font-weight: 600;
}

/* --- AI Engine (Dify): mượn đúng khuôn .sa-kv của hệ thiết kế, thêm lề trong panel --- */
body.super-admin-mode .sa-ai-engine-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px 24px;
  margin: 0;
  padding: var(--space-5, 20px);
}
body.super-admin-mode .sa-ai-engine-status > div { display: grid; gap: 3px; }
body.super-admin-mode .sa-ai-engine-status dt {
  color: var(--slate-500, #64748b);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
body.super-admin-mode .sa-ai-engine-status dd { margin: 0; color: var(--ink, #0f172a); font-size: 13px; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  body.super-admin-mode .sa-project-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Nội dung nằm thẳng trong panel phải cùng lề với header, không dính mép --- */
body.super-admin-mode .sa-panel > h3 {
  margin: var(--space-5, 20px) 0 var(--space-3, 12px);
  padding-inline: var(--space-5, 20px);
  color: var(--color-ink, #101828);
  font-size: var(--text-md, 15px);
}
body.super-admin-mode .sa-panel > p {
  margin: 0 0 var(--space-5, 20px);
  padding-inline: var(--space-5, 20px);
}
body.super-admin-mode .sa-panel > table {
  width: calc(100% - 2 * var(--space-5, 20px));
  margin: 0 var(--space-5, 20px) var(--space-5, 20px);
}

/* --- Nhật ký: số trang nằm trong ô, thẳng hàng giữa hai nút --- */
body.super-admin-mode .sa-pager { gap: var(--space-3, 12px); padding: var(--space-4, 16px) var(--space-5, 20px); }
body.super-admin-mode .sa-pager .btn { min-width: 104px; justify-content: center; }
body.super-admin-mode .sa-pager .muted {
  padding: 5px 12px;
  border: 1px solid var(--color-border, #d0d5dd);
  border-radius: var(--radius-chip, 999px);
  background: var(--color-surface-2, #f1f5f9);
  font-variant-numeric: tabular-nums;
}

/* Khi hàng nút trải hết chiều ngang thẻ (màn hẹp), nút vẫn thẳng cột nhưng không kéo dài quá mức. */
@media (max-width: 1200px) {
  body.super-admin-mode .sa-project-actions {
    grid-template-columns: repeat(auto-fill, minmax(132px, 168px));
    justify-content: start;
  }
  body.super-admin-mode .sa-project-actions .btn-primary { grid-column: span 2; }
  body.super-admin-mode .sa-project-actions .sa-trash-retention { grid-column: 1 / -1; }
}

/* ============================================================
 * Bốn tab còn lại của Super Admin (12/09/2026)
 * ============================================================ */

/* Sẵn sàng & vận hành: dải "Vận hành riêng" có 7 ô nên chia đều, không mượn khuôn 5 cột
   của dải Control Center (hàng hai từng lệch hẳn bề rộng). */
body.super-admin-mode .sa-panel > .sa-ready-summary {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Nút trong thẻ readiness thẳng cột giữa các thẻ (trước đây lệch vì bề rộng chữ khác nhau). */
body.super-admin-mode .sa-ready-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 176px));
  justify-content: start;
  gap: var(--space-2, 8px);
}
body.super-admin-mode .sa-ready-actions .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

/* Nhóm nút ở đầu panel nằm trên một hàng, không xếp chồng dọc (tab Sao lưu). */
body.super-admin-mode .sa-panel > header > div + div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 8px);
}

/* Bảo mật / Hệ thống: panel chứa bảng không bị ép hẹp hơn bề rộng tối thiểu của bảng
   (bảng "Thao tác nhạy cảm" từng phải cuộn ngang trong nửa khung). */
body.super-admin-mode .sa-grid { grid-template-columns: repeat(auto-fit, minmax(720px, 1fr)); }

/* Thẻ chỉ số chia đều theo số thẻ thật (Bảo mật chỉ có 2 thẻ trong lưới 4 cột). */
body.super-admin-mode .sa-kpis { grid-template-columns: repeat(auto-fill, minmax(220px, 320px)); justify-content: start; }

/* Lịch backup: ô nhập vừa nội dung, nút Lưu cùng hàng với ô nhập. */
body.super-admin-mode .sa-form-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3, 12px);
  padding: var(--space-5, 20px);
}
body.super-admin-mode .sa-form-grid .form-row { flex: 1 1 240px; max-width: 360px; margin: 0; }

/* ============================================================
 * Cua so "Thiet lap bao cao"
 *
 * Production khong nap styles.css goc, va trong goi CSS da build co mot quy tac
 * .modal{width:min(560px,100%);max-width:560px} dat SAU .modal.report-order-modal.
 * Do do dat moi width la vo ich — cua so van bi ep ve 560px, hai cot bo loc bi
 * dom lai thanh mot cot hep. Dat ca max-width o day, tep nay duoc nap that.
 * ============================================================ */
.modal.report-order-modal {
  width: min(1240px, 98vw);
  max-width: 1240px;
  max-height: min(92dvh, 960px);
}
.modal.report-order-modal .report-order-form {
  display: grid;
  gap: 16px;
  width: 100%;
  min-width: 0;
}
.modal.report-order-modal .report-order-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .85fr);
  gap: 20px;
  align-items: start;
}
/* Bo loc nhieu muc: cho cao hon de khong phai cuon trong mot o hep */
.modal.report-order-modal [data-report-options] {
  max-height: 320px;
  overflow: auto;
}
@media (max-width: 900px) {
  .modal.report-order-modal .report-order-grid { grid-template-columns: 1fr; }
}

/* People: hàng số liệu (bài chữ · ảnh · video · tệp · cần xem lại · thời gian) phải nằm
 * trên một dòng. Bundle staff đặt `.people-metrics { flex-wrap: wrap }` nên ô thời gian
 * "8m 15s" rớt xuống hàng; dấu * "cần xem lại" 24px trông như ký tự lỗi. */
.people-design-table .people-metrics { flex-wrap: nowrap; white-space: nowrap; gap: 10px; min-width: 0; }
.people-design-table .people-metrics > span { flex: none; }
.people-design-table .people-metrics .people-spark { flex: none; }
.people-design-table .people-time-metric { margin-left: 2px; }
.people-ai-mark i { font-size: 15px; line-height: 1; font-weight: 800; display: inline-block; transform: translateY(2px); }