/* ============================================================================
 * User Access: ability checkboxes, the grant picker, enable/disable, and the
 * successor hand-over panel (F4).
 *
 * Split out of app.css on 19-08-2026 (was lines 592-659). Rules are the
 * originals, sliced not retyped.
 * ========================================================================== */

/* ====================================================== USER ACCESS */
/* Ability checkboxes — one row per ability with an explanatory line. */
.ability-list { display: flex; flex-direction: column; gap: 0.2rem; }
.ability {
    display: flex; align-items: flex-start; gap: 0.7rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid transparent; border-radius: var(--radius-btn, 8px);
    cursor: pointer; transition: background-color 0.2s ease;
}
.ability:hover { background: var(--pale-cyan, #EAF7FA); }
.ability input { width: auto; margin-top: 2px; flex: none; }
.ability__text { display: flex; flex-direction: column; gap: 2px; }
.ability__label { font-size: 0.82rem; font-weight: 700; color: var(--text-dark, #0F1E45); }
.ability__help { font-size: 0.72rem; color: var(--slate, #55648A); }
.ability--locked { opacity: 0.65; cursor: not-allowed; }
.ability--locked:hover { background: transparent; }

/*
 * A field whose value is being kept but is not deciding anything right now —
 * the discount cap on an account that is not checked against it. Dimmed rather
 * than hidden or disabled: the number is still theirs, still editable, and
 * starts binding again the moment the rate check goes back on. Hiding it would
 * lose it; disabling it would suggest it had been taken away.
 */
.field--muted { opacity: 0.6; }

/* Grant picker — which users' proposals a viewer may read. */
.grant-actions { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.grant-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.35rem; max-height: 340px; overflow-y: auto;
}
.grant {
    display: flex; align-items: flex-start; gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--light-silver, #E3E4E9); border-radius: var(--radius-btn, 8px);
    cursor: pointer; transition: all 0.2s ease;
}
.grant:hover { border-color: var(--cyan-ink, #0A7A97); }
.grant--on { background: var(--pale-cyan, #EAF7FA); border-color: var(--soft-cyan, #C3E7F0); }
.grant input { width: auto; margin-top: 2px; flex: none; }
.grant__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.grant__name { font-size: 0.78rem; font-weight: 600; color: var(--text-dark, #0F1E45); }
.grant__meta { font-size: 0.68rem; color: var(--slate, #55648A); }

/* Enable / disable row */
.danger-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.danger-row__title { font-size: 0.82rem; font-weight: 700; color: var(--text-dark, #0F1E45); }
.danger-row__help { font-size: 0.72rem; color: var(--slate, #55648A); margin-top: 2px; }

/* Handing a departing user's sites and proposals to a successor (F4). The
   picker takes the width; the button stays on the same baseline as the field
   it acts on, and drops below it when there is no room. */
.transfer-row { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; }
.transfer-row .field { flex: 1 1 18rem; }

/* An itemised consequence inside a confirmation — what exactly is about to
   move. Indented as a list because "3 sites, 2 proposals" in a sentence is
   read as a total and not as things you are meant to check. */
.modal-list {
    margin: 0 0 0.7rem;
    padding-left: 1.15rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-dark, #0F1E45);
}

.modal-list li { margin-bottom: 0.35rem; }

/* Footnote under a record list */
.record-list__foot {
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--light-silver, #E3E4E9);
    font-size: 0.7rem; color: var(--slate, #55648A);
}
.record-list__foot .fa { margin-right: 0.35rem; }