.ms-users { display: grid; gap: var(--space-4, 1rem); }
.ms-users-toolbar, .ms-users-heading { display: flex; flex-wrap: wrap; gap: var(--space-2, .5rem); align-items: center; justify-content: space-between; }
.ms-action-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.ms-action-form label { display: grid; gap: .3rem; }
.ms-action-form button, .ms-action-form .ui2-field-hint { grid-column: 1 / -1; }
.ms-user-table { display: grid; gap: .25rem; overflow-x: auto; }
.ms-user-row { display: grid; grid-template-columns: minmax(8rem, 1.2fr) minmax(10rem, 1.5fr) 5rem 6rem minmax(9rem, 1fr); gap: .5rem; align-items: center; min-width: 48rem; padding: .55rem; border: 1px solid var(--color-border, #444); border-radius: .4rem; background: transparent; color: inherit; text-align: left; }
button.ms-user-row { cursor: pointer; }
button.ms-user-row:hover, button.ms-user-row:focus-visible { border-color: var(--color-accent, #e8a04a); }
.ms-user-header { font-weight: 700; border: 0; }
.ms-action-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .75rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--color-border, #444); }
.ms-secret { display: grid; gap: .6rem; padding: .8rem; border: 2px solid var(--color-warning, #e8a04a); border-radius: .5rem; }
.ms-secret code { user-select: all; overflow-wrap: anywhere; }
.ms-grants { margin: .75rem 0 0; padding-left: 1.2rem; }

/* Capability-overzicht (vier REQ 272 profielen: users.read/standard-write/sensitive-write/
   delete-restore) als kaarten in plaats van de vorige kale bullet-lijst met technische client-id's. */
.ms-capability-panel { margin-top: .75rem; display: grid; gap: .5rem; }
.ms-capability-panel-title { margin: 0; }
.ms-capability-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.ms-capability-card { display: grid; gap: .4rem; align-content: start; padding: .75rem; border: 1px solid var(--color-border, #444); border-radius: .5rem; }
.ms-capability-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }
.ms-error-details { margin-top: .75rem; }
.ms-error-details pre { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 760px) { .ms-action-form { grid-template-columns: 1fr; } .ms-action-row { grid-template-columns: 1fr; } }

/* REQ 272 gebruikersroute: samenvatting en bevestiging voor het aanmaken van een gebruiker. */
.ms-create-form { display: grid; gap: 0.75rem; }
.ms-create-fields { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.ms-create-summary { width: 100%; border-collapse: collapse; margin-block: 0.75rem; }
.ms-create-summary caption { text-align: left; font-weight: 600; padding-block-end: 0.5rem; }
.ms-create-summary th, .ms-create-summary td { text-align: left; vertical-align: top; padding: 0.35rem 0.5rem; border-block-end: 1px solid var(--ui2-border, #d8dce3); }
.ms-create-summary th { white-space: nowrap; font-weight: 500; width: 14rem; }
.ms-create-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.ms-create-missing ul { margin: 0.25rem 0 0; padding-inline-start: 1.25rem; }

/* Resize-gedreven contextpaneel (ui2-workspace.css: @container ui2-context, ui2-shell.js:
   CHAT_MIN_WIDTH_PX): zodra de gebruiker het paneel breder dan 600px sleept, is er ruimte over voor
   comfortabelere kolommen dan de krappe .ms-user-row-standaardbreedtes hierboven toelaten. Verbreedt
   alleen de twee vaste, smalle kolommen en de rij-gap; de flexibele minmax()-kolommen groeien vanzelf
   mee met de extra ruimte. */
@container ui2-context (min-width: 600px) {
  .ms-user-row {
    grid-template-columns: minmax(8rem, 1.2fr) minmax(10rem, 1.5fr) 6rem 7rem minmax(9rem, 1fr);
    gap: .75rem;
  }
}