/* ============================================================
   User Management (desk/staff) page.
   Structure in @layer layout, paint in @layer design. Content-named
   classes only — no legacy/appearance names, no hardcoded color.
   Reuses .app-screen and .btn/.btn--primary/.btn--outline from
   elements.css.

   DESK page: system admins manage users under the default light
   .app-screen palette. This stylesheet only references --t-* semantic
   tokens, which app/theme.css rebinds per theme, so the page reskins
   without any role-specific color rules here. The controller toggles the
   state classes restyled below (is-active on filter chips,
   status-badge--active/--closed on the per-row status, and
   stat-figure__value--* on the summary figures). The bulk-action bar and
   pagination markup are emitted by ListController and styled elsewhere.
   See docs/FRONTEND-ARCHITECTURE.md.
   ============================================================ */

@layer layout {
  /* Page intro: heading block on the left, "Add user" action on the right. */
  .user-management__intro { display: flex; flex-wrap: wrap; align-items: flex-start;
                            justify-content: space-between; gap: var(--mea-space-3); }
  .user-management__heading { display: grid; gap: var(--mea-space-1); min-inline-size: 0; }
  .user-management__title, .user-management__subtitle { margin: 0; }
  .user-management__add { flex-shrink: 0; white-space: nowrap; }

  /* Summary: a responsive row of figures, stacking when cramped. */
  .user-summary { display: grid; gap: var(--mea-space-3); margin: 0;
                  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
  .stat-figure { display: grid; gap: var(--mea-space-1); align-content: start;
                 padding: var(--mea-space-4) var(--mea-space-5); border-radius: var(--mea-radius-xl); }
  .stat-figure__label, .stat-figure__value, .stat-figure__sub { margin: 0; }

  /* Controls: filter chips on one row, search box beside/below them. */
  .user-management__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mea-space-3); }
  .filter-bar { display: flex; flex-wrap: wrap; gap: var(--mea-space-2); margin: 0; padding: 0; }
  .filter-chip { display: inline-flex; align-items: center; min-height: var(--t-target-min, 44px);
                 padding: var(--mea-space-2) var(--mea-space-4); border: 0;
                 border-radius: var(--mea-radius-pill); cursor: pointer; white-space: nowrap; }
  .search-box { flex: 1; min-inline-size: 12rem; display: flex; align-items: center; gap: var(--mea-space-2);
                margin: 0; padding: var(--mea-space-2) var(--mea-space-3);
                border-radius: var(--mea-radius-md); }
  .search-box__input { flex: 1; min-height: var(--t-target-min, 44px);
                       border: 0; background: transparent; padding: 0; }

  /* User list: a scrollable real table plus pagination beneath. */
  .user-list { display: grid; gap: var(--mea-space-4); align-content: start;
               border-radius: var(--mea-radius-xl); overflow: hidden; }
  .user-list__body { display: grid; gap: var(--mea-space-4); }
  .user-list__scroll { overflow-x: auto; }

  .user-table { inline-size: 100%; border-collapse: collapse; }
  .user-table__th { text-align: start; padding: var(--mea-space-3) var(--mea-space-5);
                    white-space: nowrap; }
  .user-table__th--sortable { cursor: pointer; user-select: none; }
  .user-table__th--select { inline-size: 1px; }
  .user-row__cell { padding: var(--mea-space-3) var(--mea-space-5); vertical-align: middle; }
  .user-row__cell--select { inline-size: 1px; }
  .user-row__cell--created { white-space: nowrap; }
  .user-row__cell--actions { white-space: nowrap; }
  .user-row__actions { display: flex; flex-wrap: wrap; gap: var(--mea-space-2); }
  .user-row__managed-note { align-self: center; max-inline-size: 18rem; }

  /* Status pill on each row. */
  .status-badge { display: inline-flex; align-items: center;
                  padding: var(--mea-space-1) var(--mea-space-3);
                  border-radius: var(--mea-radius-pill); white-space: nowrap; }

  /* Per-row action buttons are compact relative to the primary .btn. */
  .user-row__action { min-height: auto; padding: var(--mea-space-2) var(--mea-space-4); }

  /* Add / edit / role / password dialogs. */
  .user-modal-overlay { position: fixed; inset: 0; display: grid; place-items: center;
                        padding: var(--mea-space-4); z-index: var(--mea-z-modal); }
  .user-modal { inline-size: 100%; max-inline-size: 32rem; max-block-size: 90vh;
                display: grid; grid-template-rows: auto 1fr; border-radius: var(--mea-radius-2xl);
                overflow: hidden; }
  .user-modal--narrow { max-inline-size: 26rem; }
  .user-modal__header { display: flex; align-items: center; justify-content: space-between;
                        gap: var(--mea-space-3); padding: var(--mea-space-4) var(--mea-space-5); }
  .user-modal__title { margin: 0; }
  .user-modal__close { border: 0; background: transparent; cursor: pointer; white-space: nowrap;
                       padding: var(--mea-space-1) var(--mea-space-3); border-radius: var(--mea-radius-md); }
  .user-modal__body { display: grid; gap: var(--mea-space-4); align-content: start;
                      padding: var(--mea-space-5); overflow-y: auto; }
  .user-modal__lead, .user-modal__error { margin: 0; }
  .user-modal__msg:empty { display: none; }

  .user-field { display: grid; gap: var(--mea-space-2); }
  .user-field__label { margin: 0; }
  .user-field__input { inline-size: 100%; min-height: var(--t-target-min, 44px);
                       padding: var(--mea-space-3); border-radius: var(--mea-radius-md); font: inherit; }
}

@layer design {
  .user-management__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-2xl);
                            font-weight: var(--mea-w-bold); color: var(--t-text); }
  .user-management__subtitle { font-size: var(--mea-text-md); color: var(--t-text-secondary); }

  /* Summary figures. State classes (set by the controller) recolour the value. */
  .stat-figure { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                 box-shadow: var(--mea-shadow-sm); }
  .stat-figure__label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold);
                        color: var(--t-text-muted); }
  .stat-figure__value { font-size: var(--mea-text-3xl); font-weight: var(--mea-w-extrabold);
                        line-height: var(--mea-lh-tight); color: var(--t-text); }
  .stat-figure__value--blue { color: var(--t-accent); }
  .stat-figure__value--green { color: var(--t-success-text); }
  .stat-figure__value--amber { color: var(--t-warning-text); }
  .stat-figure__value--loading { color: var(--t-text-muted); }
  .stat-figure__sub { font-size: var(--mea-text-xs); color: var(--t-text-muted); }

  /* Filter chips. .is-active is toggled by the controller. */
  .filter-chip { background: var(--t-bg-recessed); color: var(--t-text-secondary);
                 font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold);
                 transition: background var(--mea-dur-fast), color var(--mea-dur-fast); }
  .filter-chip:hover { background: var(--t-bg-active); }
  .filter-chip.is-active { background: var(--t-accent); color: var(--t-accent-text); }

  .search-box { background: var(--t-bg-elevated); border: 1px solid var(--t-border); }
  .search-box__icon { color: var(--t-text-muted); }
  .search-box__input { color: var(--t-text); font-size: var(--mea-text-md); }
  .search-box__input::placeholder { color: var(--t-text-muted); }
  .search-box:focus-within { border-color: var(--t-border-focus); }

  /* User list panel + table. */
  .user-list { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
               box-shadow: var(--mea-shadow-sm); }
  .user-table__th { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold);
                    text-transform: uppercase; letter-spacing: var(--mea-ls-wide);
                    color: var(--t-text-muted); border-block-end: 1px solid var(--t-border); }
  .user-table__th--sortable:hover { color: var(--t-text); }
  .user-row__cell { font-size: var(--mea-text-sm); color: var(--t-text-secondary);
                    border-block-end: 1px solid var(--t-border); }
  .user-row:last-child .user-row__cell { border-block-end: 0; }
  .user-row__cell--name { font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .user-row__cell--created { color: var(--t-text-muted); }

  /* Status pill: active is success-tinted, closed/inactive is muted. */
  .status-badge { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold);
                  background: var(--t-bg-recessed); color: var(--t-text-secondary); }
  .status-badge--active { background: var(--t-success-bg); color: var(--t-success-text); }
  .status-badge--closed { background: var(--t-bg-active); color: var(--t-text-muted); }

  /* Dialogs. */
  .user-modal-overlay { background: var(--t-bg-active); }
  .user-modal { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                box-shadow: var(--mea-shadow-lg); }
  .user-modal__header { border-block-end: 1px solid var(--t-border); }
  .user-modal__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                       font-weight: var(--mea-w-bold); color: var(--t-text); }
  .user-modal__close { color: var(--t-text-muted); font-size: var(--mea-text-sm);
                       font-weight: var(--mea-w-semibold); }
  .user-modal__close:hover { color: var(--t-text); background: var(--t-bg-recessed); }
  .user-modal__lead { font-size: var(--mea-text-md); color: var(--t-text-secondary);
                      line-height: var(--mea-lh-normal); }
  .user-modal__error { font-size: var(--mea-text-sm); color: var(--t-error-text); }
  .user-row__managed-note { color: var(--t-text-muted); font-size: var(--mea-text-sm); }

  .user-field__label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .user-field__input { background: var(--t-bg-elevated); color: var(--t-text);
                       border: 1px solid var(--t-border); font-size: var(--mea-text-md); }
  .user-field__input:focus { outline: none; border-color: var(--t-border-focus); }
}