/* Responsive popups (modals, two-step sign-in card). Loaded after style.css/brand.css.
 * Desktop: up to ~560px wide (edit forms 680px), body scrolls inside the window, buttons wrap instead of clipping.
 * Phones (<=600px): full width and full height, buttons in a bar at the bottom. Text at least 16px. */
.modal { padding: 16px; overflow-y: auto; }
.modal-content, .modal-content-wide {
    width: 100%; max-width: 560px; box-sizing: border-box;
    max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
    overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
    font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; word-break: normal;
}
.modal-content-edit { max-width: 680px; }
.modal-content p, .modal-content li, .modal-content label, .modal-content .hint { font-size: 16px; }
.modal-content input, .modal-content select, .modal-content textarea { font-size: 16px; max-width: 100%; box-sizing: border-box; }
.modal-content table { display: block; max-width: 100%; overflow-x: auto; }
.modal-content img, .modal-content canvas { max-width: 100%; }
.modal-actions {
    position: sticky; bottom: -24px; background: #fff; padding: 12px 0 4px; margin-bottom: -4px;
    display: flex; flex-wrap: wrap; gap: 10px; z-index: 1;
}
.modal-actions button, .modal-actions .submit-btn, .modal-actions .logout-btn {
    flex: 1 1 140px; min-width: 0; width: auto; white-space: normal; min-height: 44px; font-size: 16px; margin: 0;
}
@media (max-width: 600px) {
    .modal { padding: 0; align-items: stretch; }
    .modal-content, .modal-content-wide, .modal-content-edit {
        max-width: 100%; min-height: 100vh; min-height: 100dvh; max-height: 100vh; max-height: 100dvh;
        border-radius: 0; padding: 18px 16px 0;
    }
    .modal-actions { bottom: 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); margin: 12px 0 0; border-top: 1px solid #e5e7eb; }
    .modal-actions button, .modal-actions .submit-btn, .modal-actions .logout-btn { flex: 1 1 100%; }
    .modal-content .field-grid { grid-template-columns: 1fr !important; }
}
/* Inline admin panels that act like popups (Email statements, invites, countersign cards) */
#payStmtBox, #inviteBox, .msa-signform { max-width: 100%; overflow-wrap: anywhere; }
#payStmtBox table, #inviteBox table, #invList table { display: block; max-width: 100%; overflow-x: auto; }
@media (max-width: 600px) {
    #inviteBox .field-grid, .msa-fields { grid-template-columns: 1fr !important; }
    #payStmtBox .admin-actions button, #inviteBox .submit-btn, .msa-signform button { width: 100%; margin: 4px 0; white-space: normal; min-height: 44px; font-size: 16px; }
}
.modal-content .field-grid > * { min-width: 0; }
.modal-content input[type="datetime-local"], .modal-content input[type="date"], .modal-content input[type="time"] { width: 100%; min-width: 0; }
.modal-content button { font-size: 16px; min-height: 40px; white-space: normal; }
.modal-content .req { font-size: inherit; }