/* ==========================================================================
   Communications area
   COL Email, Email Templates, Email Recipients, Email Setup, Notification
   Rules, Verification Letters and the COL Acceptance Tracker (colt-*).

   Reads the design tokens in hma-ui.css; no colours of its own. Loaded on
   every page: the COL acceptance badges (.colt-badge) also appear in the
   applicant portal.
   ========================================================================== */

/* 1. Shared pieces ---------------------------------------------------------- */
.comms-quiet { color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); }
.comms-optional { color: var(--ui-text-secondary); font-weight: var(--ui-fw-regular); }
.comms-note--warning { color: var(--ui-warning); }
.comms-note--warning a { color: inherit; font-weight: var(--ui-fw-semibold); }
.comms-address { overflow-wrap: anywhere; }
.comms-heading-links { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }
.comms-inline-alert { font-size: var(--ui-fs-sm); }
.table .comms-error { color: var(--ui-danger); }
/* Visually hidden text in a row's buttons is position: absolute. Inside a
   table that scrolls sideways it escaped the scroll box and widened the whole
   page, so the scroll box positions it. */
.comms-table .table-responsive { position: relative; }

/* Forms split into .form-section blocks after a hidden CSRF input: the first
   section has no rule above it (hma-ui.css only clears a true first child). */
.comms-sections > .form-section:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
fieldset.form-section { min-width: 0; }

/* "Used by" / "Receives" box on Email Templates and Email Recipients */
.comms-usage {
    margin-bottom: var(--ui-space-4);
    padding: var(--ui-space-3) var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-2);
    color: var(--ui-text-secondary);
    font-size: var(--ui-fs-sm);
}
.comms-usage__lead { margin: 0 0 var(--ui-space-1); color: var(--ui-text); font-weight: var(--ui-fw-semibold); }
.comms-usage__list { display: grid; gap: var(--ui-space-1); margin: 0; padding: 0; list-style: none; }
.comms-usage__list + .comms-usage__lead { margin-top: var(--ui-space-3); }
.comms-usage__name { color: var(--ui-text); font-weight: var(--ui-fw-medium); }
.comms-usage code { font-size: var(--ui-fs-xs); }
.comms-usage .ui-status { margin-left: var(--ui-space-1); }

/* Sticky save / send bar at the foot of a long form */
.comms-sticky-actions,
.colt-send-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: var(--ui-space-5) 0 0;
    padding: var(--ui-space-3) var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--ui-shadow-md);
}

/* 2. COL Email (admin/email-generator.php) --------------------------------- */
.comms-picker-pages { margin-top: var(--ui-space-3); }
.comms-applicant-search { max-width: 36rem; margin-bottom: var(--ui-space-3); }
.comms-allowlist-note { overflow-wrap: anywhere; }
.comms-allowlist-note > i { margin-right: 2px; color: var(--ui-text-secondary); }

/* To / CC / BCC rows. Each input becomes a chip box (assets/js/col-request.js).
   The chips are flex items of the box itself rather than of a nested wrapper:
   a wrapper cannot shrink below its content, so one long address pushed the
   typing field onto a second line and hung the chip's remove button over the
   border. Everything here wraps, nothing overflows, and an empty box is the
   same height as the plain inputs beside it. */
.col-recipient-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--ui-space-1) var(--ui-space-3);
    margin-bottom: var(--ui-space-2);
}
.col-recipient-row__label {
    flex: 0 0 2.75rem;
    padding-top: 0.6rem;
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
    font-weight: var(--ui-fw-semibold);
}
.col-recipient-row .form-control { flex: 1 1 0; min-width: 0; }
/* The script's validation message sits under its box, not beside it. */
.col-recipient-row > .form-text { flex: 0 0 100%; margin-top: 0; padding-left: calc(2.75rem + var(--ui-space-3)); }
@media (max-width: 575.98px) {
    .col-recipient-row { flex-direction: column; align-items: stretch; }
    /* In a column a zero basis pins the box at its minimum height while the
       chips and the typing field wrap onto a second line below it. */
    .col-recipient-row .form-control { flex: 0 0 auto; }
    .col-recipient-row__label { flex: none; padding-top: 0; }
    .col-recipient-row > .form-text { padding-left: 0; }
}

.col-recipient-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: var(--ui-control-h);
    height: auto;
    padding: 4px 8px;
    cursor: text;
}
.col-recipient-box:focus-within { border-color: var(--ui-primary); box-shadow: var(--ui-focus-ring); }
.col-recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    max-width: 100%;
    min-height: 28px;
    padding: 2px 3px 2px 10px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface-3);
    color: var(--ui-text);
    font-size: var(--ui-fs-xs);
    font-weight: var(--ui-fw-medium);
    line-height: 1.3;
}
.col-recipient-chip--default { border-color: var(--ui-primary-soft-border); background: var(--ui-primary-soft); }
.col-recipient-chip__address { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-recipient-chip__tag {
    flex-shrink: 0;
    padding: 0 6px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface);
    color: var(--ui-primary-active);
    font-size: 0.75rem;
    font-weight: var(--ui-fw-semibold);
}
.col-recipient-chip__remove {
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ui-text-secondary);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}
.col-recipient-chip__remove:hover { background: var(--ui-primary-soft-border); color: var(--ui-primary-active); }
.col-recipient-chip__remove:focus-visible { outline: 2px solid var(--ui-focus-color); outline-offset: 1px; }
.col-recipient-entry {
    flex: 1 1 8rem;
    min-width: 6rem;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: var(--ui-fs-base);
}
.col-recipient-entry:focus { outline: none; }

/* Visual / HTML body editor (assets/js/html-editor.js), also on Email Templates */
.html-editor__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2);
    margin-bottom: var(--ui-space-2);
}
.html-editor__head .btn-group .btn { box-shadow: none; }
.html-editor__head .btn-group .btn.active {
    color: var(--ui-primary-active);
    background: var(--ui-primary-soft);
    border-color: var(--ui-primary-soft-border);
}
.html-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--ui-input-border);
    border-bottom: 0;
    border-radius: var(--ui-radius) var(--ui-radius) 0 0;
    background: var(--ui-surface-2);
}
.html-editor-toolbar .btn { line-height: 1; box-shadow: none; }
.html-editor-toolbar:not(.d-none) + .html-editor-visual { border-top-left-radius: 0; border-top-right-radius: 0; }
.html-editor-visual {
    min-height: 320px;
    max-height: 560px;
    overflow-y: auto;
    background: var(--ui-surface);
    font-size: var(--ui-fs-md);
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.html-editor-visual:focus { outline: 0; border-color: var(--ui-primary); box-shadow: var(--ui-focus-ring); }
.html-editor-visual > :first-child { margin-top: 0; }
.html-editor-code { font-family: var(--ui-font-mono); font-size: var(--ui-fs-sm); }

/* Documents to attach */
.comms-attach-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); }
.email-attachments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: var(--ui-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.email-attachment-card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ui-space-2) var(--ui-space-3);
    min-width: 0;
    padding: var(--ui-space-3);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
    transition: border-color var(--ui-duration-fast), background var(--ui-duration-fast);
}
.email-attachment-card:has(.form-check-input:checked) { border-color: var(--ui-primary-soft-border); background: var(--ui-primary-soft); }
.email-attachment-check { display: flex; align-items: flex-start; gap: 10px; flex: 1 1 11rem; min-width: 0; margin: 0; padding: 0; }
.email-attachment-check .form-check-input { float: none; flex-shrink: 0; margin: 0.15rem 0 0; }
.email-attachment-name { color: var(--ui-text); font-size: var(--ui-fs-md); line-height: 1.35; overflow-wrap: anywhere; }

/* Preview and history */
.comms-preview-status { margin: 0 0 var(--ui-space-2); color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); }
.comms-preview-subject { margin: 0 0 var(--ui-space-3); font-size: var(--ui-fs-md); overflow-wrap: anywhere; }
.comms-preview-subject__label { margin-right: var(--ui-space-1); color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-semibold); }
.email-generator-preview { min-height: 260px; font-size: var(--ui-fs-md); line-height: 1.6; overflow-wrap: anywhere; }
.email-generator-preview > :last-child,
.comms-template-preview .border > :last-child { margin-bottom: 0; }
.comms-template-preview .border { font-size: var(--ui-fs-md); line-height: 1.6; overflow-wrap: anywhere; }

.comms-history { margin: 0; padding: 0; list-style: none; }
.comms-history__item { padding: var(--ui-space-3) 0; border-top: 1px solid var(--ui-border); }
.comms-history__item:first-child { padding-top: 0; border-top: 0; }
.comms-history__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-2); margin-bottom: var(--ui-space-1); }
.comms-history__when { color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); }
.comms-history__subject { margin: 0 0 2px; font-size: var(--ui-fs-md); font-weight: var(--ui-fw-medium); overflow-wrap: anywhere; }
.comms-history__meta { margin: 0; color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); overflow-wrap: anywhere; }
.comms-history__label { display: inline-block; min-width: 2.25rem; color: var(--ui-text); font-weight: var(--ui-fw-semibold); }
.comms-compose .empty-state { padding: var(--ui-space-5) var(--ui-space-2); }

/* 3. Email Templates -------------------------------------------------------- */
.comms-template-nav__list { display: grid; gap: 2px; margin: 0 0 var(--ui-space-3); padding: 0; list-style: none; }
.comms-template-nav__link {
    display: block;
    padding: var(--ui-space-2) var(--ui-space-3);
    border-left: 3px solid transparent;
    border-radius: var(--ui-radius);
    color: var(--ui-text);
    font-size: var(--ui-fs-md);
    font-weight: var(--ui-fw-medium);
    line-height: 1.35;
    text-decoration: none;
}
.comms-template-nav__link:hover { color: var(--ui-text); background: var(--ui-surface-3); }
.comms-template-nav__link[aria-current="true"] {
    color: var(--ui-primary-active);
    background: var(--ui-primary-soft);
    border-left-color: var(--ui-primary);
    font-weight: var(--ui-fw-semibold);
}
@media (min-width: 992px) {
    .comms-template-nav { position: sticky; top: calc(var(--ui-topbar-h) + var(--ui-space-4)); }
}
/* "Edited <date> by <address>" may be long: let it wrap instead of overflowing on a phone. */
.comms-template-status { white-space: normal; overflow-wrap: anywhere; }
.comms-tokens {
    padding: var(--ui-space-3) var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-2);
    font-size: var(--ui-fs-sm);
}
.comms-tokens > summary { color: var(--ui-primary-text); font-weight: var(--ui-fw-semibold); cursor: pointer; }
.comms-tokens__list { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--ui-space-3) 0 var(--ui-space-2); }
.comms-tokens code { font-size: var(--ui-fs-xs); }

/* 4. Email Recipients ------------------------------------------------------- */
.comms-recipients .cell-title .ui-tag { width: fit-content; }
.comms-recipients .cell-title .cell-primary { display: block; }
.comms-recipients tbody tr:nth-last-child(2) > td { border-bottom: 0; }
.comms-recipient-edit > td,
.portal-content .table .comms-recipient-edit > td { padding: var(--ui-space-4); border-top: 1px solid var(--ui-border); background: var(--ui-surface-2); }
.comms-recipient-edit.collapsing { transition: none; }
@media (max-width: 1199.98px) {
    .comms-recipients .cell-actions .table-actions { flex-wrap: wrap; }
}
.comms-recipient-add { margin-top: var(--ui-space-5); padding-top: var(--ui-space-4); border-top: 1px solid var(--ui-border); }
.comms-switch { display: flex; align-items: center; gap: var(--ui-space-2); min-height: var(--ui-control-h); margin: 0; padding-left: 0; }
.comms-switch .form-check-input { float: none; flex-shrink: 0; margin: 0; }
@media (max-width: 767.98px) {
    .portal-content .table-stack .comms-recipient-edit > td { padding: var(--ui-space-3); border-radius: var(--ui-radius); }
}

/* 5. Email Setup ------------------------------------------------------------ */
.comms-reference__list { grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-3); }
.comms-reference__list dd { font-size: var(--ui-fs-md); }
.comms-reference code { font-size: var(--ui-fs-sm); }

/* 6. Notification Rules ----------------------------------------------------- */
.comms-senders { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.comms-senders dd { display: grid; gap: 2px; }
.comms-senders__name { color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); }
.notification-rules__switch { width: 5rem; }
@media (min-width: 1200px) {
    .notification-rules__sender { width: 15rem; }
    .notification-rules__to { width: 18rem; }
}
.notification-rules .cell-primary { display: block; }
.notification-rules .cell-secondary + .cell-secondary { margin-top: 2px; }
.notification-rules__recipient { display: block; }
.notification-rules__addresses { display: grid; gap: 4px; margin: var(--ui-space-1) 0; padding: 0; list-style: none; font-size: var(--ui-fs-sm); }
.notification-rules__addresses li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.notification-rules__link { display: inline-block; font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-semibold); }
.notification-rules .form-select { min-width: 11rem; max-width: 100%; }
.notification-rules .form-switch .form-check-input { margin-top: 0; }

/* 7. Verification Letters --------------------------------------------------- */
.vl-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); }
.vl-reason { display: block; margin-top: var(--ui-space-1); color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); overflow-wrap: anywhere; }
.vl-reason--problem { color: var(--ui-danger); }
.vl-send { margin-top: var(--ui-space-5); padding-top: var(--ui-space-4); border-top: 1px solid var(--ui-border); }
.vl-override { margin-top: var(--ui-space-4); padding-top: var(--ui-space-4); border-top: 1px dashed var(--ui-border-strong); }

/* ==========================================================================
   8. COL Acceptance Tracker (admin/col-uploads.php) and the COL acceptance
   card on the applicant record. Cards flow with the page — nothing here sets
   a height, so every applicant is reached by normal page scrolling. Every
   status is an icon plus text (.colt-badge); colour is never the only cue.
   ========================================================================== */
.colt-kpis { padding: 0; list-style: none; } /* tiles in <li>: see .stat-grid > li in hma-ui.css */

.colt-filters { margin-bottom: var(--ui-space-4); }
/* Six fields: a two-row grid on desktop, so no field is left alone on a row
   stretched across the card. */
@media (min-width: 992px) {
    .colt-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
    .colt-filters .filter-bar__field { min-width: 0; }
    .colt-filters .filter-bar__field--search { grid-column: span 2; }
    .colt-filters .filter-bar__actions { flex-wrap: wrap; }
}
.colt-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3) var(--ui-space-5);
    padding-top: var(--ui-space-4);
    border-top: 1px solid var(--ui-border);
}
.colt-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2) var(--ui-space-4); min-width: 0; flex: 1 1 32rem; }
.colt-bulkbar__hint { flex: 1 1 16rem; color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); }
.colt-bulk-count { background: rgba(255, 255, 255, 0.92); color: var(--ui-primary-active); }
.colt-result { margin-left: auto; }

.colt-card .card-body { display: flex; flex-direction: column; gap: var(--ui-space-4); }
.colt-card .section-facts { margin: 0; }
.colt-card-head { display: flex; align-items: flex-start; gap: var(--ui-space-3); }
.colt-select { min-height: 0; margin: 2px 0 0; padding: 0; }
.colt-select .form-check-input { float: none; width: 1.25rem; height: 1.25rem; margin: 0; }
.colt-who { flex: 1 1 auto; min-width: 0; }
.colt-name { margin: 0 0 var(--ui-space-1); font-size: var(--ui-fs-lg); font-weight: var(--ui-fw-semibold); overflow-wrap: anywhere; }
.colt-meta { display: flex; flex-wrap: wrap; gap: 2px 0; color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); overflow-wrap: anywhere; }
.colt-meta > span:not(:last-child)::after { content: "\00B7"; margin: 0 var(--ui-space-2); color: var(--ui-text-muted); }
.colt-meta i { margin-right: 2px; }

.colt-statuses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: var(--ui-space-3) var(--ui-space-5);
    margin: 0;
    padding: var(--ui-space-3) var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-2);
}
.colt-statuses dt { margin-bottom: var(--ui-space-1); color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-medium); }
.colt-statuses dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: var(--ui-fs-md); }
.colt-none { color: var(--ui-text-muted); }

/* Status badge: also used by the applicant's COL Acceptance page. */
.colt-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-height: 26px;
    padding: 2px 10px;
    border: 1px solid;
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-fs-xs);
    font-weight: var(--ui-fw-semibold);
    line-height: 1.25;
}
.colt-badge--ok { border-color: var(--ui-success-border); background: var(--ui-success-bg); color: var(--ui-success); }
.colt-badge--warn { border-color: var(--ui-warning-border); background: var(--ui-warning-bg); color: var(--ui-warning); }
.colt-badge--danger { border-color: var(--ui-danger-border); background: var(--ui-danger-bg); color: var(--ui-danger); }
.colt-badge--info { border-color: var(--ui-info-border); background: var(--ui-info-bg); color: var(--ui-info); }
.colt-badge--muted { border-color: var(--ui-neutral-border); background: var(--ui-neutral-bg); color: var(--ui-neutral); }

/* The three files */
.colt-files { margin: 0; padding: 0; list-style: none; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); }
.colt-file {
    /* The text columns keep a real minimum: an auto track grows to its content
       before fr tracks get any space, which squeezed the file name to nothing
       when the correction form opened. */
    display: grid;
    grid-template-columns: minmax(12rem, 1.4fr) minmax(10rem, 1fr) auto;
    gap: var(--ui-space-2) var(--ui-space-5);
    align-items: start;
    padding: var(--ui-space-3) var(--ui-space-4);
}
.colt-file + .colt-file { border-top: 1px solid var(--ui-border); }
.colt-file-main { min-width: 0; }
.colt-file-type { font-size: var(--ui-fs-md); font-weight: var(--ui-fw-semibold); }
.colt-file-name { color: var(--ui-text); font-size: var(--ui-fs-sm); overflow-wrap: anywhere; }
.colt-file-name.text-muted { color: var(--ui-text-secondary); }
.colt-file-sub,
.colt-file-reviewer { color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); }
.colt-file-note,
.colt-review-note { margin-top: var(--ui-space-1); color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); overflow-wrap: anywhere; }
.colt-review-note { padding: var(--ui-space-1) var(--ui-space-2); border-left: 3px solid var(--ui-border-strong); background: var(--ui-surface-2); color: var(--ui-text); }
.colt-file-status { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ui-space-1); min-width: 0; }
.colt-file-actions { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 6px; }

.colt-correction { display: inline-block; }
.colt-correction > summary { list-style: none; }
.colt-correction > summary::-webkit-details-marker { display: none; }
.colt-correction[open] { flex-basis: 100%; }
.colt-correction-form {
    max-width: 460px;
    margin: var(--ui-space-2) 0 0 auto;
    padding: var(--ui-space-3);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-2);
    text-align: left;
}
/* The open correction form gets its own full-width row. */
.colt-file:has(.colt-correction[open]) .colt-file-actions { grid-column: 1 / -1; justify-content: flex-start; }
.colt-file:has(.colt-correction[open]) .colt-correction-form { margin-left: 0; }

.colt-versions { grid-column: 1 / -1; }
.colt-versions > summary { color: var(--ui-primary-text); font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-semibold); cursor: pointer; }
.colt-version { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--ui-space-3); padding: var(--ui-space-2) 0; border-top: 1px dashed var(--ui-border); font-size: var(--ui-fs-sm); overflow-wrap: anywhere; }
.colt-version__meta { color: var(--ui-text-secondary); }

.colt-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2) var(--ui-space-3); padding-top: var(--ui-space-4); border-top: 1px solid var(--ui-border); }
.colt-card-actions__hint { color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); }

@media (max-width: 1199.98px) {
    .colt-file { grid-template-columns: minmax(0, 1fr); }
    .colt-file-actions { justify-content: flex-start; }
    .colt-correction-form { margin-left: 0; }
}

/* A review result moved into the card it is about (assets/js/col-tracker.js) */
.colt-moved-alert { display: flex; align-items: flex-start; gap: var(--ui-space-2); margin: 0; }
.colt-moved-alert > i { margin-top: 0.2rem; }

/* Email history on the applicant record */
.colt-history-item { padding: var(--ui-space-3) 0; border-top: 1px solid var(--ui-border); overflow-wrap: anywhere; }
.colt-history-item:first-child { padding-top: 0; border-top: 0; }

/* Email COL acceptance documents (admin/col-acceptance-email.php) */
.colt-email-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--ui-space-3); }
.colt-email-head__who { min-width: 0; }
.colt-include {
    margin: 0;
    padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-2) 2.5rem;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
}
.colt-include .form-check-input { margin-left: -1.75rem; }
.colt-include .form-check-label { font-weight: var(--ui-fw-semibold); }
.colt-include:has(.form-check-input:checked) { border-color: var(--ui-primary-soft-border); background: var(--ui-primary-soft); }
.colt-include-hint { margin: var(--ui-space-2) 0 0; font-size: var(--ui-fs-sm); }
.colt-email-meta { margin-top: var(--ui-space-4); }
.colt-email-files { display: grid; gap: var(--ui-space-2); margin: 0 0 var(--ui-space-2); }
.colt-email-files li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--ui-fs-md); overflow-wrap: anywhere; }
.colt-email-files li > i { margin-top: 0.3rem; color: var(--ui-text-secondary); }
.colt-email-files li > div { min-width: 0; }
.colt-email-files__meta { display: block; color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); }
.colt-email-size { margin: 0 0 var(--ui-space-3); color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); }
.colt-email-size.is-over { color: var(--ui-danger); font-weight: var(--ui-fw-semibold); }
.colt-email-preview > summary { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-primary-text); font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-semibold); cursor: pointer; }
.colt-email-frame { display: block; width: 100%; height: 420px; background: #FFF; }
.colt-send-bar__status { flex: 1 1 16rem; color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); }