.personnel-page { padding-block-start: 24px; }
.personnel-page .btn, .personnel-page .form-control, .personnel-page .form-select { min-height: 44px; }
.personnel-page .btn-primary { background: var(--app-teal-700); border-color: var(--app-teal-700); }
.personnel-page .form-hint, .personnel-page .text-secondary { color: #526b7b !important; }
.personnel-page .table th, .personnel-page .table td { padding: 12px 16px; }
.personnel-page .table th { white-space: nowrap; }
.personnel-team-names { min-width: 160px; max-width: 360px; overflow-wrap: anywhere; }
.personnel-form { max-width: 880px; }
.personnel-page form > .card { position: relative; overflow: visible; }
.personnel-page form > .card:focus-within { z-index: 20; }
.personnel-page .ts-dropdown { z-index: 21; }
.personnel-members { max-height: 480px; overflow-y: auto; scrollbar-color: var(--app-line-strong) var(--app-surface); }
.personnel-member { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; border-block-start: 1px solid var(--app-line); cursor: pointer; }
.personnel-member:hover, .personnel-member:focus-within { background: var(--app-canvas); }
.personnel-member .form-check-input { flex: 0 0 auto; margin: 0; }
.personnel-member__name { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.personnel-member__status { margin-inline-start: auto; max-width: 45%; overflow-wrap: anywhere; font-size: .8rem; }
.personnel-member:has(input:checked) { background: var(--app-teal-100); }
.personnel-page :focus-visible { outline: 3px solid var(--app-teal-700); outline-offset: 3px; }
.personnel-page [hidden] { display: none !important; }
.personnel-page .validation-summary-valid { display: none; }
@media (max-width: 575.98px) {
    .personnel-page { padding-block-start: 18px; }
    .personnel-member { gap: 10px; flex-wrap: wrap; }
    .personnel-member__status { flex-basis: 100%; max-width: 100%; margin-inline-start: 26px; }
    .personnel-page .card-footer .btn { flex: 1; }
}