/* Admin lists and queues, plus the requested-document cards (dr-*) that the
   applicant's Documents page and the dashboard alert use.
   Reads the design tokens in hma-ui.css. Every area stylesheet is loaded on
   every page, so rules here are scoped to classes these screens use. */

/* ---- Applicant request cards ---- */
.dr-card-list {
    counter-reset: none;
}

.dr-card {
    /* No step number in front of a request, so the card is a single column
    rather than the number/body/action grid the steps use. */
    display: block;
}

.dr-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.85rem;
    padding: 0;
    list-style: none;
}

.dr-card__chips li {
    display: inline-flex;
    min-width: 0;
}

.dr-block {
    margin: 0 0 1rem;
}

.dr-block__title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--gl-text);
    margin: 0 0 0.35rem;
}

.dr-correction {
    /* Corrections are the reason the applicant came back to the page, so they
    are stated before anything else on the card can distract from them. */
    font-size: 1rem;
}

.dr-upload-note {
    margin: 0.55rem 0 0;
}

.dr-submit {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gl-line);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.dr-submit textarea {
    width: 100%;
}

/* ---- Version and audit history ---- */
.dr-history {
    margin-top: 1rem;
    border-top: 1px solid var(--gl-line);
    padding-top: 0.75rem;
}

.dr-history > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--gl-text-soft);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0;
}

.dr-history > summary:focus-visible {
    outline: 3px solid var(--hma-accent, #F7941D);
    outline-offset: 2px;
    border-radius: 6px;
}

.dr-version-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.dr-version {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--gl-line);
    border-radius: 10px;
    background: var(--gl-surface-soft);
}

.dr-version__number {
    flex: 0 0 auto;
    font-weight: 800;
    font-size: 0.8125rem;
    color: var(--gl-text-soft);
    background: #fff;
    border: 1px solid var(--gl-line);
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
}

.dr-version__body {
    /* min-width:0 is what lets a long filename ellipsis instead of forcing the
    card wider than the viewport. */
    flex: 1 1 14rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.dr-version__name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.dr-version__meta,
.dr-version__comment {
    font-size: 0.8125rem;
    color: var(--gl-text-soft);
    overflow-wrap: anywhere;
}

.dr-audit {
    list-style: none;
    margin: 0.85rem 0 0;
    padding: 0.75rem 0 0;
    border-top: 1px dashed var(--gl-line);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dr-audit__item {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--gl-text-soft);
}

.dr-audit__when {
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

.dr-audit__what {
    font-weight: 600;
    color: var(--gl-text);
}

.dr-audit__comment {
    flex: 1 1 100%;
    overflow-wrap: anywhere;
}

/* ---- Dashboard alert ---- */
.dr-dashboard-alert__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.dr-dashboard-alert__list {
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
}

.dr-dashboard-alert__list li {
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .dr-version {
        align-items: flex-start;
    }
    .dr-audit__when {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   Admin lists and queues (Invitations, Staff Accounts, Application
   Verification, Request Offer Letter, Requested Documents, Verification
   Queue, Payments, Applicant Reports, Audit Logs, Notification Log,
   Security Monitoring). Components come from hma-ui.css; these are the few
   layouts those screens need on top.
   ========================================================================== */

/* A short create form on one row (Invite someone): labelled fields that wrap,
   the submit button aligned with the inputs. */
.inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ui-space-3);
}
.inline-form__field { display: flex; flex-direction: column; flex: 1 1 220px; min-width: 0; }
.inline-form__field--narrow { flex: 0 1 220px; }
.inline-form__actions { display: flex; align-items: center; gap: var(--ui-space-2); flex: 0 0 auto; }
.inline-form__note { flex: 1 1 100%; margin: 0; }
@media (max-width: 767.98px) {
    .inline-form__field,
    .inline-form__field--narrow { flex-basis: 100%; }
    .inline-form__actions { width: 100%; }
    .inline-form__actions > .btn { flex: 1 1 auto; }
}

/* The one-time activation link. */
.invite-link-card { border-color: var(--ui-primary-soft-border); background: var(--ui-primary-soft); }
.invite-link-card .section-title i { color: var(--ui-primary); margin-right: 0.35rem; }

/* Staff tag beside a role, and the mail server's own error under a send. */
.ui-tag--staff { border-color: var(--ui-review-border); background: var(--ui-review-bg); color: var(--ui-review); }
.invite-send-error { max-width: 22rem; margin-top: 2px; }
.invitation-table td > .ui-status + .cell-secondary,
.invitation-table td > [data-status-text] + .cell-secondary,
.notification-table td > [data-status-text] + .cell-secondary,
.security-events td > .ui-status + .cell-secondary { margin-top: 4px; }

/* Invitations table: the email cell is a bare <td> (the harness reads it), so
   it is sized here; long addresses wrap rather than widening the table. */
.invitation-table td:nth-child(2) { overflow-wrap: anywhere; }
.invite-role { display: inline-flex; flex-wrap: wrap; gap: 4px; }
@media (min-width: 768px) {
    .invitation-table td:nth-child(2) { min-width: 12rem; max-width: 18rem; }
    .invitation-table .cell-actions .table-actions { flex-direction: column; align-items: stretch; }
}

/* Staff Accounts: the inline role change and the status stack. */
.role-form { display: flex; align-items: center; gap: var(--ui-space-2); margin: 0; }
.role-form .form-select { width: auto; min-width: 11rem; }
.staff-status { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* Review queues (Application Verification, Request Offer Letter, Requested
   Documents): one card per item that needs a decision. Head = what and who,
   with the status on the right; body = the evidence; foot = the decision. */
.review-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ui-space-2) var(--ui-space-4);
    margin-bottom: var(--ui-space-3);
}
.review-card__heading { min-width: 0; flex: 1 1 320px; }
.review-card__title { margin: 0 0 var(--ui-space-1); font-size: var(--ui-fs-lg); font-weight: var(--ui-fw-semibold); overflow-wrap: anywhere; }
.review-card__meta { margin: 0; color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); overflow-wrap: anywhere; }
.review-card__meta + .review-card__meta { margin-top: 2px; }
.review-card__meta i { margin-right: 0.3rem; color: var(--ui-text-muted); }
.review-card__side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--ui-space-2); }
.review-card__chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.review-card__remark { margin: 0 0 var(--ui-space-3); font-size: var(--ui-fs-md); overflow-wrap: anywhere; }
.review-card__remark--muted { color: var(--ui-text-secondary); }
.review-card__body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: var(--ui-space-4) var(--ui-space-5);
    padding-top: var(--ui-space-3);
    border-top: 1px solid var(--ui-border);
}
.review-card__section { min-width: 0; }
.review-fields { grid-template-columns: 1fr; gap: var(--ui-space-3); }
.review-fields dd { font-size: var(--ui-fs-md); }

/* A list of files or items with a status and actions on the right. */
.review-files { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ui-space-2); }
.review-file {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2) var(--ui-space-3);
    padding: var(--ui-space-2) var(--ui-space-3);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface-2);
}
.review-file__main { min-width: 0; flex: 1 1 14rem; display: grid; gap: 2px; }
.review-file__name { font-weight: var(--ui-fw-semibold); font-size: var(--ui-fs-md); overflow-wrap: anywhere; }
.review-file__meta { color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); overflow-wrap: anywhere; }
.review-file__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); }

/* The decision row under a review card. */
.review-decision {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ui-space-3);
    margin-top: var(--ui-space-4);
    padding-top: var(--ui-space-4);
    border-top: 1px solid var(--ui-border);
}
.review-decision__field { display: flex; flex-direction: column; flex: 2 1 280px; min-width: 0; }
.review-decision__field--choice { flex: 1 1 200px; }
.review-decision__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); flex: 0 0 auto; }
.review-decision__help { flex: 1 1 100%; margin: 0; }
@media (max-width: 767.98px) {
    .review-card__side { align-items: flex-start; }
    .review-card__chips { justify-content: flex-start; }
    .review-decision__field,
    .review-decision__field--choice { flex-basis: 100%; }
    .review-decision__actions { width: 100%; }
    .review-decision__actions > .btn { flex: 1 1 auto; }
}

/* Key facts under a review card's heading (programme, funding, intake). */
.review-facts { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--ui-space-3) var(--ui-space-4); margin-bottom: var(--ui-space-3); }
.review-facts dd { font-size: var(--ui-fs-md); font-weight: var(--ui-fw-medium); }

/* A checklist of documents or steps, each with its status. */
.review-checklist { list-style: none; margin: 0 0 var(--ui-space-2); padding: 0; display: grid; gap: 0; }
.review-checklist > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-1) var(--ui-space-3);
    padding: var(--ui-space-2) 0;
    border-bottom: 1px solid var(--ui-border);
}
.review-checklist > li:last-child { border-bottom: 0; }
.review-checklist__text { min-width: 0; flex: 1 1 14rem; font-size: var(--ui-fs-md); overflow-wrap: anywhere; }
.review-checklist__hint { display: block; color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); }

/* Links to the evidence that already sits on the applicant record. */
.review-card__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2);
    margin-top: var(--ui-space-4);
}
.review-card__links-label { color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-medium); margin-right: var(--ui-space-1); }

/* Requested Documents: the focused request, the due-date / cancel row, and
   the version and audit history. */
.review-card__admin {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ui-space-3) var(--ui-space-5);
    margin-top: var(--ui-space-4);
    padding-top: var(--ui-space-4);
    border-top: 1px solid var(--ui-border);
}
.review-card__mini-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ui-space-2); margin: 0; }
.review-card__mini-form .form-control { min-width: 12rem; }
.review-card__history-link { margin-left: auto; }
.review-card__history { margin-top: var(--ui-space-4); padding-top: var(--ui-space-4); border-top: 1px solid var(--ui-border); }
.review-file__name .ui-tag { margin-right: 0.35rem; }
.review-file__name > i { color: var(--ui-text-muted); margin-right: 0.3rem; }

.history-list { list-style: none; margin: 0; padding: 0 0 0 var(--ui-space-4); border-left: 2px solid var(--ui-border); display: grid; gap: var(--ui-space-3); }
.history-list > li { position: relative; display: grid; gap: 2px; }
.history-list > li::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--ui-space-4) - 6px);
    top: 0.45rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ui-surface);
    border: 2px solid var(--ui-primary);
}
.history-list__what { font-weight: var(--ui-fw-semibold); font-size: var(--ui-fs-md); }
.history-list__meta { color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); font-variant-numeric: tabular-nums; }
.history-list__comment { font-size: var(--ui-fs-sm); overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
    .review-card__mini-form,
    .review-card__mini-form > div { width: 100%; }
    .review-card__mini-form .form-control { min-width: 0; width: 100%; }
    .review-card__history-link { margin-left: 0; }
}

/* Verification Queue tabs. The selected tab still carries .btn-primary and the
   counts .text-bg-light / .text-bg-primary (harness assertions read them), so
   the button look those classes bring is undone here and the tabs read as the
   standard segmented control. */
.verification-queues .segmented__item.btn-primary,
.verification-queues .segmented__item.btn-primary:hover,
.verification-queues .segmented__item.btn-primary:focus-visible,
.verification-queues .segmented__item.btn-primary:active {
    color: var(--ui-text);
    background: var(--ui-surface);
    border-color: transparent;
    box-shadow: var(--ui-shadow-sm), 0 0 0 1px var(--ui-border);
}
.verification-queues .ui-count { margin-left: 0 !important; }
.verification-queues .ui-count.text-bg-light {
    color: var(--ui-text-secondary) !important;
    background-color: var(--ui-surface-3) !important;
}

/* "3 of 8" in a stat tile: the total reads smaller than the figure. */
.stat-tile__of { font-size: var(--ui-fs-base); font-weight: var(--ui-fw-medium); color: var(--ui-text-secondary); letter-spacing: 0; }

/* Date fields in a filter bar need less room than a text box. */
.filter-bar__field--date { flex: 0 1 180px; min-width: 150px; }

/* Audit Logs: the action cell is a bare <td> (the harness reads it); the code
   is set in monospace so underscores line up and it is easy to copy. */
.audit-table td:nth-child(2) { font-family: var(--ui-font-mono); font-size: var(--ui-fs-sm); overflow-wrap: anywhere; }

/* Notification Log: the retry bar and long subjects. */
.retry-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-2) var(--ui-space-4); }
.retry-bar__text { flex: 1 1 320px; }
.notification-table .notification-subject { overflow-wrap: anywhere; }
@media (min-width: 768px) { .notification-table .notification-subject { min-width: 14rem; max-width: 26rem; } }
.notification-table .hma-event-name { white-space: normal; overflow-wrap: anywhere; }

/* Security Monitoring */
.security-window { flex: 0 1 260px; }
.security-baseline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-1) var(--ui-space-4);
    margin: 0 0 var(--ui-space-3);
    color: var(--ui-text-secondary);
    font-size: var(--ui-fs-sm);
}
.security-baseline strong { color: var(--ui-text); }
.security-chart { position: relative; height: 240px; }
.security-alerts tbody tr.is-focused { background: var(--ui-warning-bg); }
@media (min-width: 768px) { .security-endpoint { max-width: 22rem; } }
.security-subform { margin-top: var(--ui-space-4); padding-top: var(--ui-space-4); border-top: 1px solid var(--ui-border); }
.security-subform .form-text { margin-top: var(--ui-space-2); }
.security-event-filter { display: flex; align-items: center; gap: var(--ui-space-2); }
.security-event-filter .form-select { width: auto; max-width: 100%; }
/* The two event feeds keep a bounded height and scroll inside; the region is
   focusable so it can be scrolled from the keyboard. */
.security-scroll { max-height: 28rem; overflow: auto; }
.security-scroll .table-sticky thead th { background: var(--ui-surface-2); }

/* Label / value rows (host resources, control status). */
/* minmax(0, 1fr): a long value (a status pill) wraps under its label in a
   narrow card instead of widening the list past the card. */
.kv-list { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.kv-list > div {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ui-space-3);
    padding: var(--ui-space-2) 0;
    border-bottom: 1px solid var(--ui-border);
}
.kv-list > div:last-child { border-bottom: 0; }
.kv-list dt { min-width: 0; font-weight: var(--ui-fw-medium); font-size: var(--ui-fs-md); color: var(--ui-text-secondary); }
.kv-list dd { min-width: 0; margin: 0 0 0 auto; text-align: right; font-size: var(--ui-fs-md); overflow-wrap: anywhere; }
.kv-list__detail { display: block; margin-top: 2px; color: var(--ui-text-muted); font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-regular); overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
    .security-window { flex-basis: 100%; }
    .security-event-filter { width: 100%; }
    .security-event-filter .form-select { flex: 1 1 auto; }
    .security-scroll { max-height: none; }
}