/*
 * V244 Phase B3 — User Management / User Edit / First-login page polish.
 *
 * Scoped to the "saas-*" (templates/users.html) and "users-*"
 * (templates/user_edit.html, templates/force_password_change.html) class
 * families only. Loads after design-tokens-v244.css and ui-normalize-v244.css
 * so it can rely on --v244-* tokens and doesn't need to repeat the generic
 * button/badge/card rules already unified there — this file only handles
 * page-specific decorative elements, density and hierarchy that the generic
 * layer intentionally left alone (per-page eyebrow/stat/icon treatments,
 * table density, the dedicated credential-reset card).
 *
 * No layout properties changed (display/position/flex-direction/grid
 * columns untouched) — color, weight, size, spacing scale and radius only.
 *
 * Do not restyle `.saas-mfa-panel` or `.saas-primary-btn`'s tag/class list
 * in templates/users.html to "fix" this file — those exact strings are
 * insertion/replace anchors for v243_security_history.py's runtime patch.
 * See docs/UI_UX_AUDIT_V244.md section 0.1.
 */

/* ==========================================================================
   1. Page header (Users list) — tighter, single primary color, count is
      secondary, not another KPI card.
   ========================================================================== */

.saas-eyebrow {
  color: var(--v244-primary-strong);
  font-weight: var(--v244-weight-label) !important;
  font-size: 11.5px;
}

.saas-user-total {
  padding: 8px 14px;
  border-radius: var(--v244-radius-field);
  box-shadow: none;
  border-color: var(--v244-border);
}
.saas-user-total span {
  color: var(--v244-ink-muted);
  font-size: 20px;
  font-weight: var(--v244-weight-heading) !important;
}
.saas-user-total small {
  font-weight: var(--v244-weight-helper);
}

/* ==========================================================================
   2. Create-user accordion
   ========================================================================== */

.saas-create-box {
  box-shadow: var(--v244-shadow-card);
}
.saas-plus-icon {
  background: var(--v244-primary-soft);
  color: var(--v244-primary-strong);
  font-weight: var(--v244-weight-heading);
  font-size: 18px;
}
.saas-create-title b {
  font-weight: var(--v244-weight-heading);
  font-size: var(--v244-text-card-title);
}

.saas-column-title h3 {
  font-size: var(--v244-text-card-title) !important;
  font-weight: var(--v244-weight-heading) !important;
}
.saas-column-title p {
  color: var(--v244-ink-muted);
}
.saas-field label {
  font-weight: var(--v244-weight-label) !important;
  letter-spacing: 0.02em;
}

/* Supplementary sub-panels within the form: the temporary-password
   explainer (injected by v243_security_history.py's runtime patch, reusing
   this same class) and the DM/staff hierarchy pickers. Kept as a quiet
   inline note rather than a second nested card. */
.saas-assignment-box,
.saas-mfa-panel {
  border-color: var(--v244-border);
  border-radius: var(--v244-radius-field);
  background: var(--v244-neutral-soft);
  box-shadow: none;
}
.saas-assignment-head b,
.saas-mfa-panel b {
  font-weight: var(--v244-weight-label) !important;
  font-size: var(--v244-text-body) !important;
}
.saas-assignment-head small,
.saas-mfa-panel small {
  color: var(--v244-ink-muted);
}

/* ==========================================================================
   3. User table — higher density, one accent color, restrained actions.
   ========================================================================== */

.saas-table-card {
  padding: 20px;
}
.saas-count-badge {
  background: var(--v244-primary-soft);
  color: var(--v244-primary-strong);
  font-weight: var(--v244-weight-label) !important;
}

.saas-user-table th {
  padding: 10px 16px;
  font-weight: var(--v244-weight-label) !important;
}
.saas-user-table td {
  padding: 10px 16px;
  font-size: var(--v244-text-table);
}
.saas-user-name span {
  background: var(--v244-primary-soft);
  color: var(--v244-primary-strong);
  font-weight: var(--v244-weight-label) !important;
}
.saas-user-name b {
  font-weight: var(--v244-weight-label) !important;
}
.saas-username {
  color: var(--v244-ink-muted);
  font-weight: var(--v244-weight-body);
}

/* Row actions: text-only, compact, edit = neutral, delete = restrained. */
.saas-row-actions {
  gap: 6px;
}
.saas-edit-btn,
.saas-delete-btn {
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  font-weight: var(--v244-weight-label) !important;
  font-size: var(--v244-text-label);
}
.saas-edit-btn {
  background: var(--v244-neutral-soft) !important;
  color: var(--v244-ink) !important;
  border-color: var(--v244-border) !important;
}
.saas-edit-btn:hover {
  background: #eef2f7 !important;
}
.saas-delete-btn {
  background: var(--v244-surface) !important;
  color: var(--v244-danger-strong) !important;
  border-color: var(--v244-danger-soft-border) !important;
}
.saas-delete-btn:hover {
  background: var(--v244-danger-soft) !important;
}

/* ==========================================================================
   4. User Edit / First-login hero — flat card, no decorative gradient.
   ========================================================================== */

.users-hero {
  padding: 18px 22px;
  border-radius: var(--v244-radius-card);
  background: var(--v244-surface);
  box-shadow: var(--v244-shadow-card);
}
.users-kicker {
  background: var(--v244-primary-soft);
  color: var(--v244-primary-strong);
  font-weight: var(--v244-weight-label);
}
.users-hero p {
  font-size: var(--v244-text-body);
}

.user-edit-modern-card {
  border-radius: var(--v244-radius-card);
  box-shadow: var(--v244-shadow-card);
}
.users-section-title h3 {
  font-weight: var(--v244-weight-heading) !important;
}
.users-section-title p {
  color: var(--v244-ink-muted);
}
.users-field label {
  font-weight: var(--v244-weight-label);
  text-transform: none;
  letter-spacing: 0.01em;
}
.users-field input,
.users-field select {
  height: 40px;
  border-radius: var(--v244-radius-field);
  font-weight: var(--v244-weight-body);
}

/* Real MFA toggle box (not the credential-reset card below — that has its
   own class, .users-credential-reset). */
.users-mfa-card {
  border-color: var(--v244-primary-soft-border);
  border-radius: var(--v244-radius-field);
  background: var(--v244-primary-soft);
}
.users-mfa-card b {
  font-weight: var(--v244-weight-label) !important;
  font-size: var(--v244-text-body) !important;
}

.users-primary-btn {
  border-radius: var(--v244-radius-button);
}

/* ==========================================================================
   5. Credential reset — a distinct, security-oriented card. Not a KPI card,
      not styled as a destructive/danger action.
   ========================================================================== */

.users-credential-reset {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--v244-warning-soft-border);
  border-left: 3px solid var(--v244-warning);
  border-radius: var(--v244-radius-field);
  background: var(--v244-warning-soft);
}
.users-credential-reset-tag {
  display: inline-block;
  margin-bottom: 4px;
  color: var(--v244-warning-strong);
  font-size: 11px;
  font-weight: var(--v244-weight-label);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.users-credential-reset b {
  display: block;
  color: var(--v244-ink);
  font-size: var(--v244-text-body);
  font-weight: var(--v244-weight-label);
}
.users-credential-reset small {
  display: block;
  margin-top: 4px;
  color: var(--v244-ink-muted);
  font-size: var(--v244-text-helper);
  line-height: 1.5;
}
.users-credential-reset form {
  margin: 0;
  flex: 0 0 auto;
}
.users-credential-reset .btn {
  background: var(--v244-surface) !important;
  color: var(--v244-warning-strong) !important;
  border: 1px solid var(--v244-warning-soft-border) !important;
  white-space: nowrap;
}
.users-credential-reset .btn:hover {
  background: var(--v244-warning-soft) !important;
  border-color: var(--v244-warning) !important;
}

@media (max-width: 640px) {
  .users-credential-reset {
    flex-direction: column;
    align-items: stretch;
  }
}