/* Felhasználók view: user list, temporary password, role tabs, permission matrix, overview.
   Built on the .matrix styles of app.css and its tokens. */

.slot { min-width: 0; }
.panel--flush > .toolbar.user-filters { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.user-filters .field { min-width: 10rem; flex: 1 1 10rem; }
.user-filters .field--grow { flex: 2 1 16rem; }
.user-table tr.is-inactive td { color: var(--ink-3); }
.icon--inline { display: inline; width: 1em; height: 1em; vertical-align: -0.125em; margin-right: 0.3125rem; color: var(--ink-2); }
.row-actions { display: inline-flex; gap: 0.25rem; }
.table .w-actions { width: 1%; white-space: nowrap; }
.panel__pad { padding: 0 1.25rem 1.25rem; }

/* temporary password */
.temp-pass { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.temp-pass .input {
  flex: 1 1 15rem; min-height: 3rem; text-align: center;
  font: 600 1.25rem/1 var(--font-mono); letter-spacing: 0.05em;
  background: var(--panel-alt);
}
.temp-pass .btn { flex: 1 0 auto; min-height: 3rem; }

/* user dialog facts */
.user-facts { padding-top: 0.75rem; border-top: 1px solid var(--line); }
.user-facts section { display: grid; gap: 0.5rem; align-content: start; min-width: 0; }
.facts { display: grid; gap: 0.375rem; }
.facts li { display: grid; gap: 0.0625rem; padding-bottom: 0.375rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.facts li:last-child { border-bottom: 0; }

/* role tabs */
.role-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.role-tab {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0 0.875rem;
  font: 700 0.875rem/1 var(--font-sans); color: var(--ink-2); cursor: pointer;
  background: var(--panel); border: 2px solid var(--line-strong);
}
.role-tab .icon { width: 1rem; height: 1rem; }
.role-tab .count { font: 500 0.75rem/1 var(--font-mono); color: var(--ink-3); }
.role-tab:hover { border-color: var(--ink); color: var(--ink); }
.role-tab[aria-selected="true"] { color: var(--on-hi-vis); background: var(--hi-vis); border-color: var(--hi-vis); }
.role-tab[aria-selected="true"] .count { color: var(--on-hi-vis); }
.role-tab .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--warn); }
.role-tab[aria-selected="true"] .dot { background: var(--ink-fixed); }
.role-head { display: grid; gap: 0.25rem; min-width: 0; }
a.chip { text-decoration: none; }
a.chip:hover { border-color: var(--ink); }

/* permission matrix */
/* position: the visually hidden texts in the cells are absolutely positioned; without a
   positioned ancestor the scrolling wrapper would not clip them and the page would scroll sideways. */
.matrix-wrap { position: relative; border-left: 0; border-right: 0; }
.perm-matrix th, .perm-matrix td { vertical-align: middle; }
.perm-matrix thead th:not(:first-child) { min-width: 8.5rem; }
.perm-matrix .matrix__module, .ovw-table .matrix__module {
  position: sticky; left: 0; z-index: 1; min-width: 9.5rem; background: var(--panel);
  box-shadow: 1px 0 0 var(--line);
}
.perm-matrix thead th:first-child, .ovw-table thead th:first-child { left: 0; z-index: 2; }
.perm-matrix tbody tr:hover td.matrix__module, .ovw-table tbody tr:hover td.matrix__module { background: var(--row-hover); }
.matrix__toggles td { padding-top: 0.375rem; padding-bottom: 0.375rem; background: var(--panel-alt); border-bottom: 1px solid var(--line-strong); }
.perm {
  display: grid; justify-items: center; gap: 0.25rem; cursor: pointer;
  font-size: 0.75rem; line-height: 1.25; color: var(--ink-3); max-width: 9.5rem; margin: 0 auto;
}
.perm:hover { color: var(--ink); }
.perm:has(input:checked) { color: var(--ink); }
.perm-matrix input[type="checkbox"] { width: 1.25rem; height: 1.25rem; cursor: pointer; }
.perm-matrix[data-readonly="true"] .perm, .perm-matrix input:disabled { cursor: default; }
.perm-matrix td.na { background: repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in oklab, var(--line) 45%, transparent) 6px 7px); }

.savebar {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.25rem; background: var(--panel-alt); border-top: 2px solid var(--ink);
}
.savebar__spacer { flex: 1; }

/* overview */
.ovw-table td { text-align: center; }
.ovw { display: inline-flex; gap: 0.125rem; font: 600 0.75rem/1 var(--font-mono); }
.ovw > b, .ovw > i { display: inline-block; width: 1.5em; text-align: center; font-style: normal; }
.ovw > b { color: var(--ink); background: color-mix(in oklab, var(--hi-vis) 30%, transparent); padding: 0.125rem 0; }
.ovw > i { color: var(--line-strong); }
.ovw > .ovw__na { visibility: hidden; }

@media (max-width: 640px) {
  .panel--flush > .toolbar.user-filters { padding: 0.875rem; }
  .perm-matrix .matrix__module, .ovw-table .matrix__module { min-width: 7.5rem; }
  .perm { font-size: 0.6875rem; }
  .perm-matrix thead th:not(:first-child) { min-width: 6.5rem; }
  .savebar { padding: 0.5rem 0.875rem; }
  .savebar__state .muted { display: none; }
}