/* ============================================================================
   Users page — roomier avatar rows + a cleaned-up Add/Edit User modal.
   ----------------------------------------------------------------------------
   The Add/Edit modal keeps its EXISTING markup verbatim — every `perm_*` input
   name, every id and every onchange is load-bearing for the save/load and the
   sub-permission toggles. This file only restyles it, scoped to `.cvu-form`,
   overriding the ad-hoc inline card styles with matching cv- tokens.
   ============================================================================ */

/* ---- Users list: give the rows room ----
   `.cv-table td` is a dense 28px row; a 26px avatar in it almost touches the
   avatar above and below. Taller rows + a slightly smaller avatar fix it. */
.cvu-table td { height: 40px; }
.cvu-table .cvm-avatar { width: 24px; height: 24px; }
/* The list flows with the page — no inner scroll box. The shared `.cv-table-wrap`
   is `overflow:auto` with a 1px border, so a border-box vs content-box rounding
   leaves the table ~2px "taller" than its content box and a phantom vertical
   scrollbar appears even though nothing is clipped. Let it flow instead. */
.cvu-table-wrap { overflow: visible; }
.cvu-table th { position: static; }

/* ============================================================ Add/Edit modal */
/* Form fields — the modal still uses the legacy .form-* classes; restyle them
   to the cv- input look (scoped, wins on specificity — no !important needed). */
.cvu-form .form-group { margin-bottom: var(--cv-space-3); }
.cvu-form .form-label {
  display: block; margin-bottom: var(--cv-space-1);
  font-size: var(--cv-text-xs); font-weight: var(--cv-weight-medium);
  color: var(--cv-text-secondary);
}
.cvu-form .form-input, .cvu-form .form-select {
  width: 100%; height: 32px; padding: 0 var(--cv-space-2);
  background: var(--cv-bg-inset); color: var(--cv-text);
  border: 1px solid var(--cv-border); border-radius: var(--cv-radius-sm);
  font: inherit; font-size: var(--cv-text-sm);
}
.cvu-form .form-select { padding-right: var(--cv-space-1); }
.cvu-form .form-input:focus, .cvu-form .form-select:focus {
  outline: none; border-color: var(--cv-accent);
  box-shadow: 0 0 0 3px var(--cv-accent-wash);
}
.cvu-form .form-input[readonly], .cvu-form .form-select[disabled] {
  opacity: 0.6; cursor: not-allowed;
}
.cvu-form h4 { font-size: var(--cv-text-sm); font-weight: var(--cv-weight-semibold); color: var(--cv-text); }
.cvu-form hr { border: none; border-top: 1px solid var(--cv-border-subtle); }
.cvu-form .text-muted { color: var(--cv-text-muted); }

/* Permission cards — the grid is `1fr` inline; go multi-column, and override
   the inline border/padding/radius on each item to a clean cv card. */
/* Single-column list — the OBS Monitor / Reflex DB cards carry extra always-on
   controls (limit-to-machines, sub-permissions) so a 2-col grid staggers with
   uneven row gaps and reads as "scattered". A vertical list is stable as
   checkboxes toggle and matches the standard settings-list pattern. */
.cvu-form .permissions-grid {
  grid-template-columns: 1fr !important;
  gap: var(--cv-space-2) !important;
}
.cvu-form .permission-item {
  border: 1px solid var(--cv-border) !important;
  border-radius: var(--cv-radius) !important;
  padding: var(--cv-space-3) !important;
  background: var(--cv-bg-surface);
  transition: border-color var(--cv-dur-fast) var(--cv-ease);
}
.cvu-form .permission-item:hover { border-color: var(--cv-border-strong) !important; }
/* The top-level permission name reads as the card title; align its sprite icon
   with the text. */
.cvu-form .permission-item > label > strong {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--cv-text-sm); font-weight: var(--cv-weight-semibold);
}
.cvu-form .permission-item > label > strong .cv-i { color: var(--cv-text-muted); }
/* Checkboxes tinted to the accent so on/off reads at a glance. */
.cvu-form input[type="checkbox"] { accent-color: var(--cv-accent); width: 15px; height: 15px; flex: none; }

/* Machine / database limit lists → a quiet inset well (override inline). */
.cvu-form [id$="-machine-list"], .cvu-form [id$="-database-list"] {
  background: var(--cv-bg-inset) !important;
  border: 1px solid var(--cv-border) !important;
  border-radius: var(--cv-radius-sm) !important;
}