/* Users, audit-log and requests lists (list toolkit screens). Design tokens only (see app.css); loaded after app.css. */

/* Card band coloured by a status tone (ok / warn / bad / off / info) */
.item .band.band-st-ok {
  background: var(--ok);
}
.item .band.band-st-warn {
  background: var(--warn);
}
.item .band.band-st-bad {
  background: var(--bad);
}
.item .band.band-st-info {
  background: var(--info);
}
.item .band.band-st-off {
  background: var(--line-2);
}

/* Two-line cell: bold value over a small muted line */
.ua-role,
.ua-login,
.au-time,
.au-ent,
.rq-person,
.rq-status {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  max-width: 100%;
  line-height: 1.35;
}
.ua-role small,
.ua-login small,
.au-time small,
.au-ent small,
.rq-person small,
.rq-status small {
  font-size: 12px;
  color: var(--muted);
}
.ua-role b,
.ua-login b,
.au-time b,
.rq-person b {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
}

/* ===== Users ===== */
/* Avatar tinted by the account state, so locked accounts stand out in a long list */
.avatar.ua-av.ua-LOCKED {
  background: var(--warn-soft);
  color: var(--warn);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 35%, transparent);
}
.avatar.ua-av.ua-INACTIVE {
  background: var(--bad-soft);
  color: var(--bad);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 35%, transparent);
}
.ua-login.warn b {
  color: var(--warn);
}
.ua-status {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ua-card .ua-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ua-card .ua-t {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ua-card.ua-dim .name,
.ua-card.ua-dim .ua-t .code {
  color: var(--muted);
}
.ua-card[aria-disabled='true'] {
  cursor: default;
}

/* ===== Audit log ===== */
.dt .t td.au-top {
  vertical-align: top;
}
.dt .t td.au-c-ent {
  max-width: 220px;
}
.au-time b {
  font-variant-numeric: tabular-nums;
}
.au-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 200px;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.au-user .avatar {
  width: 28px;
  height: 28px;
  font-size: 11px;
}
.au-user-t {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.au-user-t b {
  font-size: 13.5px;
  font-weight: 600;
}
.au-user-t small {
  font-size: 12px;
  color: var(--muted);
}
@media (hover: hover) {
  .au-user:hover .au-user-t b {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.au-ent .au-ref {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.au-ent a.au-ref {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--primary) 35%, transparent);
  text-underline-offset: 3px;
}
.audit-card .au-card-t {
  font-size: 14px;
  color: var(--ink);
}
.audit-card .lk-card-top .xs {
  flex-shrink: 0;
}

/* ===== Requests ===== */
.rq-type {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
}
.rq-type .icon {
  width: 14px;
  height: 14px;
  color: var(--muted);
}
.rq-content {
  min-width: 0;
}
.rq-content .cell-main {
  white-space: normal;
}
.rq-content .cell-sub {
  white-space: normal;
}
.rq-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.rq-flags .icon {
  width: 12px;
  height: 12px;
}
.rq-status small {
  max-width: 190px;
}
.rq-time {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}
.rq-overdue {
  align-items: center;
}
.rq-card.is-picked {
  background: var(--surface-2);
  border-color: var(--line-2);
}

/* Many action codes: one scrollable row of counts instead of a tall block */
.au-summary .lk-strip-items {
  flex-wrap: nowrap;
  overflow-x: auto;
}
.lk-summary.au-summary {
  grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 639px) {
  /* Phone: the "show overdue only" button goes under the message instead of squeezing it */
  .alert.rq-overdue {
    flex-wrap: wrap;
  }
  .alert.rq-overdue .grow {
    flex: 1 1 calc(100% - 32px);
  }
  .alert.rq-overdue .btn {
    margin-left: auto;
  }
}