/**
 * BusinessSuite Dynamic Forms - Styles
 * Bootstrap 5.3 compatible
 * Version: 1.0
 */

/* Form Container */
.bs-dynamic-form {
    margin: 2rem 0;
}

    .bs-dynamic-form .form-title {
        font-weight: 600;
        color: #212529;
    }

    .bs-dynamic-form .form-description {
        color: #6c757d;
        font-size: 1rem;
        line-height: 1.5;
    }

    /* Form Fields */
    .bs-dynamic-form .form-group {
        position: relative;
    }

    .bs-dynamic-form .form-label {
        font-weight: 500;
        margin-bottom: 0.5rem;
        color: #212529;
    }

        .bs-dynamic-form .form-label .text-danger {
            margin-left: 0.25rem;
        }

    .bs-dynamic-form .form-control,
    .bs-dynamic-form .form-select {
        font-size: 1rem;
        border-radius: 0.375rem;
        border-color: #ced4da;
    }

        .bs-dynamic-form .form-control:focus,
        .bs-dynamic-form .form-select:focus {
            border-color: #86b7fe;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }

        /* Validation States */
        .bs-dynamic-form .form-control.is-invalid,
        .bs-dynamic-form .form-select.is-invalid {
            border-color: #dc3545;
            padding-right: calc(1.5em + 0.75rem);
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right calc(0.375em + 0.1875rem) center;
            background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
        }

            .bs-dynamic-form .form-control.is-invalid:focus,
            .bs-dynamic-form .form-select.is-invalid:focus {
                border-color: #dc3545;
                box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
            }

    .bs-dynamic-form .invalid-feedback {
        display: none;
        width: 100%;
        margin-top: 0.25rem;
        font-size: 0.875em;
        color: #dc3545;
    }

    .bs-dynamic-form .form-control.is-invalid ~ .invalid-feedback,
    .bs-dynamic-form .form-select.is-invalid ~ .invalid-feedback {
        display: block;
    }

    /* Checkbox and Radio */
    .bs-dynamic-form .form-check {
        margin-bottom: 0.5rem;
    }

    .bs-dynamic-form .form-check-input {
        cursor: pointer;
    }

    .bs-dynamic-form .form-check-label {
        cursor: pointer;
        margin-left: 0.25rem;
    }

    .bs-dynamic-form .form-check-input.is-invalid {
        border-color: #dc3545;
    }

        .bs-dynamic-form .form-check-input.is-invalid ~ .form-check-label {
            color: #dc3545;
        }

    /* Submit Button */
    .bs-dynamic-form .btn-submit {
        min-width: 120px;
        font-weight: 500;
        padding: 0.625rem 1.5rem;
        transition: all 0.15s ease-in-out;
    }

        .bs-dynamic-form .btn-submit:disabled {
            cursor: not-allowed;
            opacity: 0.65;
        }

        .bs-dynamic-form .btn-submit .spinner-border {
            width: 1rem;
            height: 1rem;
            border-width: 0.15rem;
        }

    /* Success and Error Messages */
    .bs-dynamic-form .form-success-message,
    .bs-dynamic-form .form-error-message {
        animation: slideDown 0.3s ease-out;
    }

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bs-dynamic-form .form-success-message {
    background-color: #d1e7dd;
    border-color: #badbcc;
    color: #0f5132;
}

.bs-dynamic-form .form-error-message {
    background-color: #f8d7da;
    border-color: #f5c2c7;
    color: #842029;
}

    .bs-dynamic-form .form-error-message ul {
        padding-left: 1.25rem;
    }

        .bs-dynamic-form .form-error-message ul li {
            margin-bottom: 0.25rem;
        }

/* Help Text */
.bs-dynamic-form .form-text {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #6c757d;
}

/* Loading State */
.bs-dynamic-form.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Responsive Adjustments */
@media (max-width: 576px) {
    .bs-dynamic-form {
        margin: 1rem 0;
    }

        .bs-dynamic-form .form-title {
            font-size: 1.5rem;
        }

        .bs-dynamic-form .btn-submit {
            width: 100%;
        }
}

/* Custom Field Widths (optional utility classes) */
.bs-dynamic-form .field-width-sm {
    max-width: 200px;
}

.bs-dynamic-form .field-width-md {
    max-width: 400px;
}

.bs-dynamic-form .field-width-lg {
    max-width: 600px;
}

/* Accessibility Improvements */
.bs-dynamic-form .form-control:focus-visible,
.bs-dynamic-form .form-select:focus-visible,
.bs-dynamic-form .form-check-input:focus-visible,
.bs-dynamic-form .btn:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .bs-dynamic-form .btn-submit,
    .bs-dynamic-form .form-success-message,
    .bs-dynamic-form .form-error-message {
        display: none;
    }
}