/* CSS SECTION — POPUP UNIFORM: Page styles. Search this label to find the page code. */
/* Shared popup presentation. Loaded last on every application page.
   Deliberately leaves visibility, status colors and submission logic untouched. */
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    overflow: hidden !important;
}
html body :is(#appConfirmOverlay, #appFeedbackOverlay).show {
    display: flex !important;
}
html body :is(#appConfirmOverlay, #appFeedbackOverlay):not(.show) {
    display: none !important;
}
html body dialog#appConfirmOverlay.confirm-popup-overlay {
    box-sizing: border-box !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    padding: 20px !important;
    background: rgba(15, 23, 42, .46) !important;
    color: inherit !important;
}
html body dialog#appConfirmOverlay.confirm-popup-overlay::backdrop {
    background: transparent !important;
}
.osa-inline-validation-warning {
    display: block;
    margin: 4px 0 0 !important;
    color: #b42318 !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1.4 !important;
}
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) {
    box-sizing: border-box;
    background-color: rgba(15, 23, 42, .46);
}
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(.modal-content, .calendar-modal-card, .report-modal-card, .confirm-popup-card, .feedback-popup-card, .send-notification-modal-card, .notification-log-popup-card, .notification-inbox-popup-card, .notification-popup-card) {
    box-sizing: border-box !important;
    position: relative;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    border: 1px solid #dce6e6 !important;
    border-radius: 18px !important;
    box-shadow: 0 22px 70px rgba(15, 23, 42, .22) !important;
    background: #fff !important;
    color: #24323d !important;
    font-size: 15px !important;
    line-height: 1.5;
}
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(.modal-content, .calendar-modal-card, .report-modal-card, .send-notification-modal-card, .notification-log-popup-card) {
    padding: 24px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
}
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(.confirm-popup-card, .feedback-popup-card, .notification-popup-card) {
    padding: 28px !important;
    width: min(460px, calc(100vw - 32px)) !important;
    overflow-y: auto;
}
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(h2, h3) {
    font-size: 24px !important;
    line-height: 1.25 !important;
    color: #162d30;
    overflow-wrap: anywhere;
}
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(h4, .activity-section-title h3, .semester-panel h3, .intake-section h3, .user-form-section h3) {
    font-size: 17px !important;
    line-height: 1.35 !important;
    margin-bottom: 12px !important;
}
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(.modal-header, .activity-digital-header, .notification-inbox-popup-header) {
    display: flex;
    align-items: flex-start !important;
    gap: 16px !important;
    border-bottom: 1px solid #e2eaea !important;
    margin-bottom: 18px !important;
    padding-bottom: 16px !important;
}
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(.modal-header, .activity-digital-header) > div {
    min-width: 0;
}
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) .modal-header :is(h2, h3) { margin: 0 !important; }
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(.close, .close-btn, .close-modal, .close-report-modal, .referral-close, .intake-close, .confirm-popup-close, .feedback-popup-close, .notification-popup-close, .notification-log-popup-close) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border: 1px solid #dce5ea !important;
    border-radius: 50% !important;
    background: #f1f5f7 !important;
    color: #334155 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    cursor: pointer;
}
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(.close, .close-btn, .close-modal, .close-report-modal, .referral-close, .intake-close, .confirm-popup-close, .feedback-popup-close, .notification-popup-close, .notification-log-popup-close):is(:hover, :focus-visible) {
    background: #dfecea !important;
    border-color: #86aaa8 !important;
    box-shadow: 0 0 0 3px rgba(51, 139, 127, .16) !important;
    color: #183a3e !important;
    outline: none !important;
}

/* Keep close/× controls consistent across page-specific dialogs too. */
html body :is(
    .close, .close-btn, .close-modal, .close-report-modal, .referral-close,
    .intake-close, .confirm-popup-close, .feedback-popup-close,
    .notification-popup-close, .notification-log-popup-close,
    .student-form-close, .signup-close, .media-close, .athlete-record-close,
    .athlete-archive-view-close, .dormant-view-close, .tryout-close,
    .welcome-close, .dashboard-bell-close, .public-photo-lightbox-close,
    .sms-credit-popup__close, .attachment-edit-cancel[aria-label],
    [aria-label^="Close"], [aria-label^="Back to login"]
):is(:hover, :focus-visible) {
    background: #dfecea !important;
    border-color: #86aaa8 !important;
    box-shadow: 0 0 0 3px rgba(51, 139, 127, .16) !important;
    color: #183a3e !important;
    outline: none !important;
}

/* Popup-scoped selectors above are more specific than the generic dark rule.
   Re-apply the dark hover palette at matching specificity so the X never
   flashes pale/low-contrast in dark mode. */
html[data-osa-theme="dark"] body :is(
    #appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal,
    .report-modal, .send-notification-backdrop, .send-notification-modal,
    .notification-log-popup-backdrop, .notification-inbox-popup-backdrop,
    .notification-popup-backdrop
) :is(
    .close, .close-btn, .close-modal, .close-report-modal, .referral-close,
    .intake-close, .confirm-popup-close, .feedback-popup-close,
    .notification-popup-close, .notification-log-popup-close
):is(:hover, :focus-visible) {
    background: #3d5662 !important;
    border-color: #6a8792 !important;
    box-shadow: 0 0 0 3px rgba(105, 183, 170, .2) !important;
    color: #f2f7f8 !important;
}

/* Two record-view X buttons have ID-scoped page rules, so match those rules
   directly rather than relying on the generic close selector. */
html body.athlete-page #archivedAthleteViewModal .athlete-archive-view-close:is(:hover, :focus-visible),
html body #dormantCaseModal .dormant-view-close:is(:hover, :focus-visible) {
    background: #dfecea !important;
    border-color: #86aaa8 !important;
    box-shadow: 0 0 0 3px rgba(51, 139, 127, .16) !important;
    color: #183a3e !important;
    outline: none !important;
}
html[data-osa-theme="dark"] body.athlete-page #archivedAthleteViewModal .athlete-archive-view-close:is(:hover, :focus-visible),
html[data-osa-theme="dark"] body #dormantCaseModal .dormant-view-close:is(:hover, :focus-visible) {
    background: #3d5662 !important;
    border-color: #6a8792 !important;
    box-shadow: 0 0 0 3px rgba(105, 183, 170, .2) !important;
    color: #f2f7f8 !important;
    outline: none !important;
}

html body :is(
    .close, .close-btn, .close-modal, .close-report-modal, .referral-close,
    .intake-close, .confirm-popup-close, .feedback-popup-close,
    .notification-popup-close, .notification-log-popup-close,
    .student-form-close, .signup-close, .media-close, .athlete-record-close,
    .athlete-archive-view-close, .dormant-view-close, .tryout-close,
    .welcome-close, .dashboard-bell-close, .public-photo-lightbox-close,
    .sms-credit-popup__close, .attachment-edit-cancel[aria-label],
    [aria-label^="Close"], [aria-label^="Back to login"]
) {
    transition: background-color .16s ease, border-color .16s ease,
        box-shadow .16s ease, color .16s ease, transform .16s ease;
}

html[data-osa-theme="dark"] body :is(
    .close, .close-btn, .close-modal, .close-report-modal, .referral-close,
    .intake-close, .confirm-popup-close, .feedback-popup-close,
    .notification-popup-close, .notification-log-popup-close,
    .student-form-close, .signup-close, .media-close, .athlete-record-close,
    .athlete-archive-view-close, .dormant-view-close, .tryout-close,
    .welcome-close, .dashboard-bell-close, .public-photo-lightbox-close,
    .sms-credit-popup__close, .attachment-edit-cancel[aria-label],
    [aria-label^="Close"], [aria-label^="Back to login"]
):is(:hover, :focus-visible) {
    background: #3d5662 !important;
    border-color: #6a8792 !important;
    box-shadow: 0 0 0 3px rgba(105, 183, 170, .2) !important;
    color: #f2f7f8 !important;
}
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(.close-btn, .close-modal, .close-report-modal, .confirm-popup-close, .feedback-popup-close, .notification-popup-close, .notification-log-popup-close) {
    top: 16px !important;
    right: 16px !important;
}
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(.modal-header, .notification-inbox-popup-header) :is(.close, .close-btn, .close-modal, .close-report-modal, .referral-close, .intake-close, .confirm-popup-close, .feedback-popup-close, .notification-popup-close, .notification-log-popup-close) { position: static !important; margin: 0 0 0 auto !important; }
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(.calendar-modal-card, .report-modal-card, .notification-log-popup-card, .send-notification-modal-card) h3,
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) .calendar-modal-card > h2 { padding-right: 44px; }
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(.athlete-intake-header, .activity-intake-header, .offense-intake-header, .resolve-brand, .athlete-assessment-brand) img {
    max-width: 68px !important;
    max-height: 68px !important;
    object-fit: contain;
}
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(.athlete-form-section, .activity-form-section, .user-form-section, .intake-section, .semester-panel) {
    padding: 18px !important;
    border: 1px solid #dfe8e8 !important;
    border-radius: 12px !important;
    margin-bottom: 14px !important;
    min-width: 0;
}
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(.athlete-form-grid, .activity-form-grid, .user-form-grid, .resolve-grid, .intake-grid, .semester-grid) {
    gap: 16px !important;
    min-width: 0;
}
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    border: 1px solid #cbd9df !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
}
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) { min-height: 44px !important; }
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) textarea { min-height: 96px !important; resize: vertical; }
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(input[type="checkbox"], input[type="radio"]) {
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    accent-color: #287f75;
}
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(label, .app-field > span, .resolve-grid label span) {
    font-size: 14px !important;
    line-height: 1.45 !important;
}
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(.athlete-requirement-grid label, .approval-checklist label, .temporary-module-option) { border-radius: 10px !important; }
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(.modal-actions, .form-actions, .calendar-actions, .confirm-popup-actions, .feedback-popup-actions) {
    display: flex;
    flex-wrap: wrap !important;
    align-items: center;
    justify-content: flex-end;
    gap: 10px !important;
    margin-top: 18px !important;
}
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(.modal-actions, .form-actions, .calendar-actions, .confirm-popup-actions, .feedback-popup-actions) :is(button, a),
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(.notification-log-popup-ok, .notification-popup-ok) {
    box-sizing: border-box !important;
    min-height: 42px !important;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    max-width: 100%;
    white-space: normal;
}
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) button:disabled { cursor: not-allowed; }
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(button, a, input, select, textarea):focus-visible {
    outline: 3px solid #9bcfc5 !important;
    outline-offset: 2px !important;
}
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(pre, .notification-log-popup-body, .sms-phone-preview p) {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 14px !important;
    line-height: 1.65 !important;
}
/* The inbox keeps its own scrolling list, not a scroll bar per message. */
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) .notification-inbox-popup-header { padding: 20px 24px !important; margin: 0 !important; }
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) .notification-delete-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 24px !important; }
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) .automatic-sms-item { padding: 14px !important; border-radius: 12px !important; gap: 14px !important; overflow: visible !important; }
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) .automatic-sms-meta { gap: 6px !important; }
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) .automatic-sms-item :is(p, strong, span) { font-size: 14px !important; }
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) .automatic-sms-item .icon-action { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; padding: 0 !important; }
/* Respect the existing hidden attributes and opening classes. */
html body #appConfirmOverlay .confirm-popup-mark {
    background: #e8f5f1 !important;
    border: 1px solid #b9ded3 !important;
    color: #287f75 !important;
    font-size: 0 !important;
}
html body #appConfirmOverlay .confirm-popup-mark::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23287f75' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Crect x='9' y='2' width='6' height='4' rx='1' fill='%23e8f5f1'/%3E%3Cpath d='m8.5 13 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
}
html body #appConfirmOverlay .confirm-popup-card .confirm-popup-actions,
html body #appFeedbackOverlay .feedback-popup-card .feedback-popup-actions {
    justify-content: center !important;
}
/* Feedback notices can be opened inside a contained notification window.
   Pin the overlay to that visible viewport so its card never centers in the
   wider page behind it and gets cut off at the right edge. */
html body #appFeedbackOverlay.feedback-popup-overlay {
    align-items: center !important;
    justify-content: center !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    overflow: hidden !important;
}
html body #appFeedbackOverlay .feedback-popup-card {
    flex: 0 1 min(460px, calc(100vw - 32px)) !important;
    margin: auto !important;
}
html body #addModal .offense-intake-card {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}
html body .modal .activity-digital-header { padding-right: 46px !important; }
html body .notification-inbox-popup-backdrop .notification-inbox-popup-card .automatic-sms-item {
    grid-template-columns: 18px 36px minmax(0, 1fr) minmax(100px, 170px) !important;
    column-gap: 10px !important;
    min-height: 0 !important;
    padding: 6px 10px !important;
}
html body .notification-inbox-popup-backdrop .notification-inbox-popup-card .sms-recipient-avatar {
    font-size: 15px !important;
    height: 36px !important;
    width: 36px !important;
}
html body .notification-inbox-popup-backdrop .notification-inbox-popup-card .automatic-sms-item p {
    line-height: 1.25 !important;
    margin: 2px 0 0 !important;
}
/* This ID-scoped rule intentionally comes after legacy popup selectors that
   include #appConfirmOverlay in :is(), which otherwise win on specificity. */
html body :is(#notificationInboxPopup, #sportNotificationInbox, #activityNotificationInbox) .automatic-sms-item {
    gap: 8px !important;
    grid-template-columns: 18px 34px minmax(0, 1fr) 164px !important;
    min-height: 0 !important;
    padding: 6px 8px !important;
}
html body :is(#notificationInboxPopup, #sportNotificationInbox, #activityNotificationInbox) .automatic-sms-item .sms-recipient-avatar {
    height: 34px !important;
    width: 34px !important;
}
html body :is(#notificationInboxPopup, #sportNotificationInbox, #activityNotificationInbox) :is(.notification-inbox-popup-card, form, .notification-log-grid, .automatic-sms-log, .automatic-sms-list) {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}
html body :is(#notificationInboxPopup, #sportNotificationInbox, #activityNotificationInbox) .automatic-sms-meta {
    display: grid !important;
    gap: 3px 6px !important;
    grid-template-columns: minmax(0, 1fr) 34px !important;
    justify-self: stretch !important;
    max-width: 164px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    width: 164px !important;
}
html body :is(#notificationInboxPopup, #sportNotificationInbox, #activityNotificationInbox) .automatic-sms-meta small {
    font-size: 10px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
html body :is(#notificationInboxPopup, #sportNotificationInbox, #activityNotificationInbox) .automatic-sms-meta .log-view-icon {
    grid-row: 1 / span 2 !important;
    grid-column: 2 !important;
    height: 34px !important;
    width: 34px !important;
}
@media (max-width: 600px) {
    html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(.modal-content, .calendar-modal-card, .report-modal-card, .confirm-popup-card, .feedback-popup-card, .send-notification-modal-card, .notification-log-popup-card, .notification-inbox-popup-card, .notification-popup-card) { max-width: calc(100vw - 20px) !important; max-height: calc(100dvh - 20px) !important; }
    html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(.modal-content, .calendar-modal-card, .report-modal-card, .send-notification-modal-card, .notification-log-popup-card) { padding: 18px !important; }
html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(.athlete-form-grid, .activity-form-grid, .user-form-grid, .resolve-grid, .intake-grid, .semester-grid, .athlete-requirement-grid, .athlete-archive-view-grid) { grid-template-columns: minmax(0, 1fr) !important; }
    html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) :is(h2, h3) { font-size: 21px !important; }
    html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) .automatic-sms-item { flex-wrap: wrap !important; }
    html body :is(#appConfirmOverlay, #appFeedbackOverlay, .modal, .calendar-modal, .report-modal, .send-notification-backdrop, .send-notification-modal, .notification-log-popup-backdrop, .notification-inbox-popup-backdrop, .notification-popup-backdrop) .automatic-sms-meta { flex-wrap: wrap; max-width: 100%; }
    html body .modal .activity-approval-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    html body .notification-inbox-popup-backdrop .notification-inbox-popup-card .automatic-sms-item {
        grid-template-columns: 18px minmax(0, 1fr) !important;
    }
    html body .notification-inbox-popup-backdrop .notification-inbox-popup-card .automatic-sms-meta {
        grid-column: 2;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start;
        text-align: left !important;
        flex-wrap: wrap;
    }
    html body .notification-inbox-popup-backdrop .automatic-sms-list { padding-left: 12px !important; padding-right: 12px !important; }
}

/* Generated report previews are text documents, so keep the dialog fitted to
   the page instead of stretching it across the entire screen. */
html body.report-page .report-modal-card {
    max-width: min(920px, calc(100vw - 32px)) !important;
    padding: 16px !important;
    width: min(920px, calc(100vw - 32px)) !important;
}

html body.report-page .report-modal-card .close-report-modal {
    margin: 0 !important;
    position: absolute !important;
    right: 16px !important;
    top: 16px !important;
    z-index: 2;
}

html body.report-page .report-modal-preview {
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
}

html body.report-page .official-report-preview {
    margin: 0 auto !important;
    max-width: none !important;
}

/* Text-first report preview: retain the downloadable report's structure,
   while avoiding the oversized paper/screenshot appearance in the modal. */
html body.report-page .report-modal-preview {
    max-height: min(76dvh, 700px) !important;
    user-select: text;
}

html body.report-page .official-report-preview {
    font-size: 14px !important;
    line-height: 1.4 !important;
    padding: 8px !important;
}

html body.report-page .official-report-preview__letterhead {
    grid-template-columns: 58px minmax(0, 1fr) !important;
}

html body.report-page .official-report-preview__letterhead img {
    max-height: 42px !important;
    max-width: 42px !important;
}

html body.report-page .official-report-preview__letterhead strong {
    font-size: 13px !important;
    padding: 5px 8px !important;
}

html body.report-page .official-report-preview__letterhead h2 {
    font-size: 17px !important;
    padding: 7px 8px !important;
}

html body.report-page .official-report-preview__section {
    margin-top: 8px !important;
}

html body.report-page .official-report-preview__section h3 {
    font-size: 13px !important;
    padding: 5px 8px !important;
}

html body.report-page .official-report-preview__info-grid p,
html body.report-page .official-report-preview__summary p {
    min-height: 0 !important;
    padding: 5px 8px !important;
}

html body.report-page .official-report-preview__summary span {
    font-size: 18px !important;
    padding: 4px !important;
}

html body.report-page .official-report-preview__body {
    padding: 7px 8px !important;
}

html body.report-page .official-report-preview__footer {
    margin-top: 10px !important;
}

/* LOGOUT CONFIRMATION: Isolate the small dialog from page-wide button styles. */
html body #appConfirmOverlay.confirm-popup-overlay {
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

html body #appConfirmOverlay .confirm-popup-card {
    box-sizing: border-box !important;
    width: min(420px, calc(100vw - 40px)) !important;
    max-width: 420px !important;
    padding: 30px 28px 26px !important;
}

html body #appConfirmOverlay .confirm-popup-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #eef3f5 !important;
    color: #334155 !important;
    box-shadow: none !important;
    font-size: 24px !important;
    line-height: 1 !important;
}

html body #appConfirmOverlay .confirm-popup-actions {
    display: flex !important;
    gap: 12px !important;
    margin-top: 22px !important;
}

html body #appConfirmOverlay .confirm-popup-actions button {
    box-sizing: border-box !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
}

html body #appConfirmOverlay .confirm-popup-cancel {
    background: #e8eef2 !important;
    color: #182730 !important;
}

html body #appConfirmOverlay .confirm-popup-confirm {
    background: #287a70 !important;
    color: #fff !important;
}

/* Public post-activity success/error feedback should be a centered, light modal
   across screen sizes, with the close control in the card's corner. */
html body.post-activity-page #appFeedbackOverlay.feedback-popup-overlay.show {
    align-items: center !important;
    bottom: 0 !important;
    display: grid !important;
    height: 100dvh !important;
    inset: 0 !important;
    justify-content: center !important;
    left: 0 !important;
    margin: 0 !important;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)) !important;
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    place-items: center !important;
}

html body.post-activity-page #appFeedbackOverlay .feedback-popup-card {
    max-height: calc(100dvh - 32px) !important;
    margin: 0 !important;
    overflow-y: auto !important;
    padding: 30px 24px 24px !important;
    text-align: center !important;
    width: min(420px, calc(100vw - 32px)) !important;
}

html body.post-activity-page #appFeedbackOverlay .feedback-popup-close {
    left: auto !important;
    position: absolute !important;
    right: 14px !important;
    top: 14px !important;
}

html body.post-activity-page #appFeedbackOverlay .feedback-popup-mark {
    align-items: center !important;
    display: flex !important;
    height: 54px !important;
    justify-content: center !important;
    margin: 8px auto 14px !important;
    width: 54px !important;
}

/* Keep shared success, error, warning, and notice feedback consistent on every page. */
html body #appFeedbackOverlay .feedback-popup-card::before {
    background: #3d8d7d !important;
    border-radius: 20px 20px 0 0 !important;
    content: "" !important;
    height: 5px !important;
    left: 0 !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
}

html body #appFeedbackOverlay .feedback-popup-mark {
    align-items: center !important;
    background: #d9fae2 !important;
    border: 1px solid #b9e8c7 !important;
    border-radius: 50% !important;
    color: #12622e !important;
    display: flex !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    height: 58px !important;
    justify-content: center !important;
    margin: 4px auto 14px !important;
    width: 58px !important;
}

html body #appFeedbackOverlay[data-level="success"] .feedback-popup-mark::before {
    content: "OK" !important;
    font-size: 18px !important;
}

html body #appFeedbackOverlay[data-level="error"] .feedback-popup-mark {
    background: #f8dada !important;
    border-color: #edbcbc !important;
    color: #8d1111 !important;
}

html body #appFeedbackOverlay[data-level="error"] .feedback-popup-card::before {
    background: #ba3939 !important;
}

html body #appFeedbackOverlay[data-level="error"] .feedback-popup-mark::before,
html body #appFeedbackOverlay[data-level="warning"] .feedback-popup-mark::before {
    content: "!" !important;
}

html body #appFeedbackOverlay[data-level="warning"] .feedback-popup-mark {
    background: #fde88a !important;
    border-color: #ecd16a !important;
    color: #7a5200 !important;
}

html body #appFeedbackOverlay[data-level="warning"] .feedback-popup-card::before {
    background: #d7a72f !important;
}

html body #appFeedbackOverlay[data-level="info"] .feedback-popup-mark {
    background: #e7edf2 !important;
    border-color: #d3dde5 !important;
    color: #33434a !important;
}

html body #appFeedbackOverlay[data-level="info"] .feedback-popup-card::before {
    background: #7b8a91 !important;
}

html body #appFeedbackOverlay[data-level="info"] .feedback-popup-mark::before {
    content: "i" !important;
}

html body #appFeedbackOverlay .feedback-popup-card h3 {
    color: #183b37 !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    margin: 0 42px 12px !important;
}

html body #appFeedbackOverlay .feedback-popup-messages {
    color: #33434a !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-bottom: 22px !important;
}

html body #appFeedbackOverlay .feedback-popup-messages p {
    margin: 0 !important;
}

html body #appFeedbackOverlay .feedback-popup-messages p + p {
    margin-top: 10px !important;
}

html body #appFeedbackOverlay .feedback-popup-actions {
    display: flex !important;
    justify-content: center !important;
}

html body #appFeedbackOverlay .feedback-popup-ok {
    appearance: none !important;
    background: #3d8d7d !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: #fff !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1.4 !important;
    min-height: 48px !important;
    min-width: 112px !important;
    padding: 13px 22px !important;
}

html body #appFeedbackOverlay .feedback-popup-ok:hover {
    background: #2f7568 !important;
}

html body #appFeedbackOverlay .feedback-popup-ok:focus {
    outline: none !important;
}

html body #appFeedbackOverlay .feedback-popup-ok:focus-visible {
    outline: 3px solid #9dd1c4 !important;
    outline-offset: 3px !important;
}

/* Keep shared feedback dialogs centered and anchor the close control to the
   card. Page-wide button styles can otherwise leave the X in normal flow. */
html body #appFeedbackOverlay .feedback-popup-card {
    box-sizing: border-box !important;
    display: block !important;
    margin: 0 auto !important;
    max-width: min(460px, calc(100vw - 32px)) !important;
    text-align: center !important;
    width: min(460px, calc(100vw - 32px)) !important;
}

html body #appFeedbackOverlay .feedback-popup-close {
    inset-block-start: 14px !important;
    inset-inline-end: 14px !important;
    inset-inline-start: auto !important;
    margin: 0 !important;
    position: absolute !important;
    z-index: 2 !important;
}

html body #appFeedbackOverlay .feedback-popup-card h3,
html body #appFeedbackOverlay .feedback-popup-messages {
    text-align: center !important;
}