/* People and accounts (Users module). Module stylesheets load on every page, so every class starts with users-. */
.users-filters { gap: 10px; }
.users-filters .form-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.users-name { font-weight: 700; margin-right: 6px; }
.users-id { font-weight: 600; font-size: 14px; color: var(--ink); }
.users-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.users-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; background: var(--sunk); font-size: 13px; font-weight: 600; }
.users-row-off td { color: var(--muted); }
.users-row-off .users-name { color: var(--muted); }
.users-held { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.users-held li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--sunk); }
.users-link { font-size: 14px; background: var(--sunk); }
.users-link-actions { justify-content: flex-start; }
.users-copy.is-copied { background: var(--ok); border-color: var(--ok); color: #FFFFFF; }
.users-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.users-kpis { margin-bottom: 4px; }

/* Pictures on top of the pages (UsersVisuals). */
.users-visuals { display: flex; flex-direction: column; gap: 18px; }
.users-visual-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px 28px; align-items: start; }
.users-timeline { display: flex; flex-direction: column; gap: 8px; }
.users-tl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.users-tl-row, .users-tl-axis { display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr); align-items: center; gap: 2px 12px; padding: 3px 6px; border-radius: 10px; color: var(--ink); }
a.users-tl-row:hover { background: var(--sunk); color: var(--ink); }
.users-tl-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; font-size: 14px; }
.users-tl-who strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.users-tl-who small { font-size: 12px; color: var(--muted); }
.users-tl-track { display: block; overflow: visible; }
.users-tl-open { opacity: .75; }
.users-tl-today { stroke: var(--viz-red); stroke-width: 2; stroke-dasharray: 3 2; }
.users-tl-tick { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.users-tl-when { grid-column: 2; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.users-road .viz-step-note { font-variant-numeric: tabular-nums; }
.users-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.users-code p { margin: 0; flex: 1 1 180px; }
.users-barcode { max-width: 100%; height: auto; border-radius: 4px; }
.users-qr { margin: 14px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.users-qr-code { width: 180px; height: 180px; image-rendering: pixelated; border-radius: 8px; background: #FFFFFF; }
.users-qr figcaption { flex: 1 1 200px; }
@media (max-width: 560px) {
  .users-tl-row, .users-tl-axis { grid-template-columns: minmax(0, 1fr); }
  .users-tl-axis .users-tl-who { display: none; }
  .users-tl-when { grid-column: 1; }
  .users-tl-tick-mid { display: none; }
}
@media print {
  .users-filters, .users-copy, .users-link-actions { display: none; }
  .users-tl-today { stroke: #B3261E; }
}