/*
 * Centralized modal styling — Swift Give admin/internal UI.
 *
 * Layered on top of Bootstrap 5's .modal markup. To opt in, add the
 * `sg-modal` class to the modal root element (the same element that
 * carries `.modal .fade`). Works with both yii\bootstrap5\Modal
 * (pass options => ['class' => 'sg-modal fade']) and hand-rolled
 * <div class="modal fade sg-modal"> markup.
 *
 * Public/donor-facing modals are intentionally NOT covered here.
 */

.sg-modal .modal-dialog:not(.modal-dialog-centered) {
    margin-top: 6vh;
}

.sg-modal .modal-content {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(17, 25, 40, 0.18);
    overflow: hidden;
}

/* Header */
.sg-modal .modal-header {
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-bg-surface);
    align-items: center;
}

.sg-modal .modal-title,
.sg-modal .modal-header h4,
.sg-modal .modal-header h5 {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-text-strong);
    line-height: 1.2;
}

.sg-modal .modal-header .btn-close {
    margin: 0 0 0 auto;
    padding: 8px;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.sg-modal .modal-header .btn-close:hover {
    opacity: 1;
}

/* Body */
.sg-modal .modal-body {
    padding: 24px;
    color: var(--color-text-default);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
}

.sg-modal .modal-body > *:first-child {
    margin-top: 0;
}

.sg-modal .modal-body > *:last-child {
    margin-bottom: 0;
}

/* Form controls inside modals */
.sg-modal .form-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-strong);
    margin-bottom: 6px;
}

.sg-modal .form-control,
.sg-modal .form-select {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    font-size: var(--font-size-base);
    color: var(--color-text-default);
}

.sg-modal .form-control:focus,
.sg-modal .form-select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(185, 27, 59, 0.12);
}

.sg-modal .form-check-label {
    color: var(--color-text-default);
    font-size: var(--font-size-sm);
}

.sg-modal .form-check + .form-check {
    margin-top: 4px;
}

/* Footer */
.sg-modal .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--color-border-subtle);
    background: var(--color-bg-row-alt);
    gap: 8px;
}

.sg-modal .modal-footer > * {
    margin: 0;
}

.sg-modal .modal-footer .btn {
    padding: 8px 18px;
    border-radius: var(--radius-md);
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    /* font-weight: 600; */
}

/* Size variants — keep using Bootstrap's modal-sm / modal-lg on .modal-dialog */

/* Responsive */
@media (max-width: 576px) {
    .sg-modal .modal-header,
    .sg-modal .modal-body,
    .sg-modal .modal-footer {
        padding-left: 18px;
        padding-right: 18px;
    }
    .sg-modal .modal-dialog {
        margin-top: 0;
    }
}