/* Màn Nhân viên (#/staff): khối hướng dẫn quyền, bảng nhân viên (mobile thành thẻ), form thêm / sửa, hộp xác nhận. */

/* ---------- Hướng dẫn vai trò ---------- */
.staff-guide { padding: 0; margin-bottom: 14px; }
.staff-guide > summary { cursor: pointer; padding: 13px 16px; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
.staff-guide > summary::-webkit-details-marker { display: none; }
.staff-guide > summary::before { content: '›'; display: inline-block; transition: transform .15s; font-size: 16px; color: var(--muted); }
.staff-guide[open] > summary::before { transform: rotate(90deg); }
.staff-guide[open] > summary { border-bottom: 1px solid var(--line); }
.staff-steps { margin: 12px 16px 6px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; color: var(--ink-2); }
.staff-guide .table-wrap { padding: 0 16px 14px; }
.staff-guide-table td { vertical-align: top; font-size: 13px; }
.staff-guide-table td:first-child { white-space: nowrap; }

/* ---------- Bảng nhân viên ---------- */
.staff-who { min-width: 220px; max-width: 320px; }
.staff-id { min-width: 0; }
.staff-actions { white-space: nowrap; }
.staff-actions .btn + .btn, .staff-actions .btn + a, .staff-actions a + .btn { margin-left: 6px; }
.staff-inactive td { color: var(--muted); }
.staff-inactive .avatar { opacity: 0.55; }
.staff-role { font-weight: 700; }

/* ---------- Form ---------- */
.staff-form input[type=email], .staff-form input[type=password] {
  width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; padding: 9px 11px; background: var(--surface);
}
.staff-form input:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.staff-hint { font-size: 12px; color: var(--muted); font-weight: 400; }
.staff-form-actions { align-items: center; flex-wrap: wrap; }
.staff-spacer { flex: 1; }
.staff-logout-btn { color: var(--danger); padding-left: 0; }
.staff-confirm { margin-top: 14px; padding: 12px 14px; border: 1px solid #f1c0c0; background: var(--danger-bg); border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 6px; }
.staff-confirm p { margin: 0; }
.staff-invite { width: 100%; min-height: 120px; font-size: 13px; background: var(--surface-2); }
.modal.staff-modal-sm { width: min(440px, 100%); }
.modal.staff-modal-sm p { margin-top: 0; }

/* ---------- Mobile: mỗi nhân viên là một thẻ, ẩn cột Đăng nhập / Lần cuối ---------- */
@media (max-width: 860px) {
  .staff-list { padding: 10px; }
  .staff-list .table-wrap { margin: 0; padding: 0; overflow: visible; }
  .staff-table, .staff-table tbody, .staff-table tr, .staff-table td { display: block; width: 100%; }
  .staff-table thead { display: none; }
  .staff-table tr { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 10px; background: var(--surface); }
  .staff-table td { border: 0; padding: 5px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: right; }
  .staff-table td::before { content: attr(data-label); font-size: 12px; color: var(--muted); font-weight: 600; text-align: left; flex: none; }
  .staff-table td.staff-who { max-width: none; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; text-align: left; justify-content: flex-start; }
  .staff-table td.staff-who::before, .staff-table td.staff-actions::before { content: none; }
  .staff-table td.staff-desk { display: none; }
  .staff-table td.staff-actions { justify-content: flex-start; flex-wrap: wrap; gap: 6px; padding-top: 8px; white-space: normal; }
  .staff-actions .btn + .btn, .staff-actions .btn + a, .staff-actions a + .btn { margin-left: 0; }
  .staff-form-actions .staff-spacer { flex-basis: 100%; height: 0; }
  .staff-guide-table td:first-child { white-space: normal; }
}

/* ---------- Giao diện tối ---------- */
:root[data-theme="dark"] .staff-confirm { border-color: #5a2a2a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .staff-confirm { border-color: #5a2a2a; }
}