// ChurchCRM Event Pages Styling
// Includes Checkin and related event management pages

// Form container and header styling
#AddAttendees {
    .card-header.bg-primary {
        padding: 1rem 1.5rem;
        border-bottom: 2px solid #0056b3;
    }

    .card-header h3 {
        margin-bottom: 0;
        font-size: 1.5rem;
    }

    .card-header p {
        margin: 0.25rem 0 0 0;
        line-height: 1.4;
        font-size: 0.95rem;
    }

    .card-body {
        padding: 2rem;
    }

    /* Event meta (title under header) */
    .event-meta {
        display: block;
        margin-top: 0.5rem;
    }

    .event-meta .event-title {
        /* Prevent breaking at hyphens by default (we also replace hyphens server-side)
           Allow wrapping if container is narrow but avoid mid-token breaks */
        white-space: normal;
        word-break: normal;
        overflow-wrap: anywhere;
        margin-top: 0.25rem;
    }

    /* Ensure Select2 search inputs take full width in our layout */
    .select2-container {
        width: 100% !important;
    }

    // Form inputs
    .form-control-lg {
        border-width: 2px;
        font-size: 1.1rem;
        padding: 0.875rem 1rem;
        min-height: 3rem;

        &:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }
    }

    // Input group styling
    .input-group {
        margin-bottom: 0.75rem;
    }

    .input-group-addon {
        background-color: #f8f9fa;
        border-color: #dee2e6;
        padding: 0.5rem 1rem;
    }

    // Helper text styling
    small.form-text.text-muted {
        display: block;
        font-size: 0.9rem;
        margin-top: 0.5rem;
        line-height: 1.5;
    }

    // Step alert boxes
    .alert {
        margin: 0 0 1.5rem 0;
        padding: 1rem;
        border-left: 5px solid;
        border-radius: 0.25rem;
        background-color: rgba(255, 255, 255, 0.85);

        &-info {
            border-left-color: #17a2b8;
            background-color: #d1ecf1;
            color: #0c5460;
        }

        &-secondary {
            border-left-color: #6c757d;
            background-color: #e2e3e5;
            color: #383d41;
        }

        strong {
            color: inherit;
            font-weight: 700;
        }
    }

    // Form group spacing
    .form-group {
        margin-bottom: 2rem;

        &:last-of-type {
            margin-bottom: 1.5rem;
        }
    }

    // Control label styling
    .control-label {
        margin-bottom: 1rem;
        font-size: 1.1rem;
        font-weight: 600;
        color: #333;
    }

    // Input container spacing
    .inputGroupContainer {
        margin-bottom: 0;
    }

    // Horizontal rule spacing
    hr {
        margin: 2.5rem 0;
        border: none;
        border-top: 1px solid #dee2e6;
    }

    // Person details card
    #childDetails,
    #adultDetails {
        .card {
            margin-top: 1rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border: 2px solid #28a745;

            .card-body {
                padding: 1.5rem;
            }

            .alert-success {
                margin-bottom: 1rem;
            }

            .h5 {
                margin-top: 1rem;
                margin-bottom: 0;
            }
        }
    }

    .photo-medium {
        max-width: 130px;
        max-height: 130px;
        object-fit: cover;
    }

    // Button group styling
    .btn-group {
        margin-top: 1.5rem;
        gap: 0.75rem !important;

        > .btn {
            flex: 1;
            padding: 0.75rem 1.5rem;
            font-size: 1rem;
            font-weight: 600;
            border-radius: 0.25rem;
            white-space: nowrap;
        }
    }

    .btn-success {
        background-color: #28a745;
        border-color: #28a745;

        &:hover {
            background-color: #218838;
            border-color: #1e7e34;
        }
    }

    .btn-outline-secondary,
    .btn-outline-primary {
        border-width: 2px;
    }
}
