/* EgyptAuth — Users & devices and Accounts (staff/pages/users.js, accounts.js).
   Owns: .pw-meter .pw-bars .pw-label .lic-pick* .lic-opt* .acc-* .usr-* */

/* Password strength meter (account create / reset) */
.pw-meter { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s1); min-height: 18px; }
.pw-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; inline-size: 120px; flex: none; }
.pw-bars > span { block-size: 4px; border-radius: var(--r-pill); background: var(--line-2); transition: background-color var(--t-fast); }
.pw-meter[data-score="0"] .pw-bars > span:nth-child(-n+1),
.pw-meter[data-score="1"] .pw-bars > span:nth-child(-n+1) { background: var(--danger); }
.pw-meter[data-score="2"] .pw-bars > span:nth-child(-n+2) { background: var(--warn); }
.pw-meter[data-score="3"] .pw-bars > span:nth-child(-n+3) { background: var(--ok); }
.pw-meter[data-score="4"] .pw-bars > span { background: var(--ok); }
.pw-meter[data-score="-1"] .pw-label { visibility: hidden; }
.pw-label { min-width: 0; }

/* License picker (account create) */
.lic-pick { display: flex; flex-direction: column; gap: var(--s2); }
.lic-pick-list { display: flex; flex-direction: column; max-block-size: 232px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface-sunken); }
.lic-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: var(--s3); inline-size: 100%; padding: 8px 10px; text-align: start; border-bottom: 1px solid var(--line-1); color: var(--ink-1); transition: background-color var(--t-fast); }
.lic-opt:last-child { border-bottom: 0; }
.lic-opt:hover { background: var(--state-hover); }
.lic-opt:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); }
.lic-opt.is-selected { background: var(--state-selected); }
.lic-opt > .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lic-opt-check { display: inline-grid; place-items: center; color: var(--accent-text); grid-column: 3; }
.lic-pick-empty { padding: 14px 12px; text-align: center; }

/* Accounts table: the username leads; email and license are shrink columns that truncate inside the card. */
.acc-name { display: inline-block; max-inline-size: 180px; vertical-align: bottom; }
.acc-plan { display: inline-block; max-inline-size: 160px; vertical-align: bottom; }
.acc-key { display: flex; align-items: center; gap: var(--s1); min-width: 0; }
.acc-key > .copy-btn { flex: none; }
.acc-section > .section-title { margin-bottom: var(--s1); }

/* Machine values truncated in the middle (users.js midTruncate): the head ellipsizes, the tail stays readable.
   Shared by the accounts, devices and sessions tables. */
.usr-mid { display: inline-flex; min-width: 0; max-inline-size: 100%; white-space: nowrap; vertical-align: bottom; }
.usr-mid-head { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.usr-mid-tail { flex: none; }

/* Users & devices: one badge per device, values with their copy control, IP with its country code, scope as an icon
   plus a word, a disclosure caret that turns with the row, and the expanded details (two ruled lists + actions). */
.usr-copyable { display: inline-flex; align-items: center; gap: var(--s1); min-width: 0; max-inline-size: 100%; vertical-align: middle; }
.usr-copyable > .copy-btn { flex: none; }
.usr-ip { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; max-inline-size: 100%; vertical-align: middle; }
.usr-ip > .usr-mid { max-inline-size: 150px; }
.usr-key-link { display: inline-flex; max-inline-size: 100%; }
.usr-scope { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); white-space: nowrap; }
.usr-scope > .icon { color: var(--ink-3); }
.usr-chev { display: inline-grid; place-items: center; inline-size: 24px; color: var(--ink-3); }
.usr-chev > .icon { transition: transform var(--t) var(--ease); }
.table tr.row.is-expanded .usr-chev > .icon { transform: rotate(180deg); }
.usr-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s6); }
.usr-detail > section { min-width: 0; }
.usr-detail-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line-1); }
@media (max-width: 720px) { .usr-detail { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 760px) {
  .acc-page .table.is-list .acc-name { max-inline-size: 100%; }
  /* The whole list item expands; the caret would only take room from the meta line. */
  .table.is-list .usr-chev { display: none; }
  /* Labelled row buttons keep only their icon (and their accessible name) in the list. */
  .usr-page .table.is-list .usr-btn-label { display: none; }
}
@media (max-width: 640px) {
  /* Search shares its line with the end tools (density, add); filter selects take the next line. */
  .acc-page .table-toolbar .search, .usr-page .table-toolbar .search { flex: 1 1 150px; min-width: 0; }
  .usr-page .table-toolbar .tools-end { order: 1; margin-inline-start: 0; }
  .usr-page .table-toolbar > .select { order: 2; flex: 1 1 100%; }
}