/* ============================================================
   AUTH / USER MANAGEMENT — form đăng nhập staff + quản lý người dùng
   Dùng biến màu có sẵn (--lg-* ở màn login, --accent/--bg-* ở app) nên tự đổi Sáng/Tối.
   ============================================================ */

/* ---------- Form đăng nhập nhân viên (trong .login-card) ---------- */
.gp-staff-login { margin-top: 22px; text-align: left; }
.gp-divider { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; color: var(--lg-muted, var(--text-muted)); font-size: 12px; font-weight: 600; }
.gp-divider::before, .gp-divider::after { content: ""; flex: 1; height: 1px; background: var(--lg-card-border, var(--border-color)); opacity: .9; }
.gp-staff-login form { display: flex; flex-direction: column; gap: 10px; }
.gp-input {
    width: 100%; padding: 13px 14px; border-radius: 14px; font: 500 14px 'Inter', sans-serif;
    border: 1px solid rgba(148, 163, 184, .45); background: rgba(255, 255, 255, .85); color: #1e293b; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
:root[data-theme="dark"] .gp-input { background: rgba(15, 23, 42, .55); color: #e8ecf8; border-color: rgba(255, 255, 255, .14); }
.gp-input:focus { border-color: var(--lg-accent, var(--accent)); box-shadow: 0 0 0 3px var(--lg-soft, var(--accent-glow)); }
.gp-btn-staff {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border: 0; border-radius: 14px; cursor: pointer;
    color: #fff; font: 600 14.5px 'Inter', sans-serif;
    background: linear-gradient(135deg, var(--lg-accent, var(--accent)), var(--lg-accent-2, var(--accent-2)));
    box-shadow: 0 8px 20px rgba(91, 141, 239, .28); transition: transform .15s, filter .15s;
}
.gp-btn-staff:hover { filter: brightness(1.06); transform: translateY(-1px); }
.gp-btn-staff:disabled { opacity: .65; cursor: not-allowed; transform: none; }
.gp-error { min-height: 18px; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--danger, #dc2626); }

/* ---------- Quản lý người dùng (Cài Đặt) ---------- */
#user-management-card .um-form { display: grid; grid-template-columns: 1.1fr 1.1fr 1.3fr 120px auto; gap: 10px; align-items: center; margin-bottom: 16px; }
#user-management-card .um-form .form-input, #user-management-card .um-form .form-select { margin-top: 0; }
#user-management-card .um-table-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: 12px; }
#user-management-card .um-table { width: 100%; border-collapse: collapse; }
#user-management-card .um-table th { position: static; box-shadow: none; }
#user-management-card .um-table td { white-space: nowrap; }
#user-management-card .um-act { padding: 5px 10px; font-size: 12px; border-style: solid; }
#user-management-card .um-act + .um-act { margin-left: 6px; }
#user-management-card .um-act.danger { color: var(--danger); border-color: rgba(239, 68, 68, .35); }
#user-management-card .um-msg { text-align: center; padding: 26px !important; color: var(--text-muted); }
#user-management-card .um-err { color: var(--danger); }
.um-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.um-status.is-active { background: rgba(34, 197, 94, .16); color: var(--success); }
.um-status.is-off { background: rgba(239, 68, 68, .14); color: var(--danger); }

/* Modal đổi mật khẩu dùng chung .modal-overlay của components.css */
#gp-pw-modal .input-group-col { display: flex; flex-direction: column; gap: 6px; }

/* Huy hiệu người dùng staff ở header */
.user-profile-badge .btn-icon { padding: 6px; font-size: 18px; }

@media (max-width: 992px) { #user-management-card .um-form { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { #user-management-card .um-form { grid-template-columns: 1fr; } }