/**
 * WorkFlow One - Enhanced Form Validation Styles
 * Inline-Validierung, Feedback-States, Animationen
 */

/* ========== Form Field Wrapper ========== */
.form-field-wrapper {
    position: relative;
    margin-bottom: 1.5rem;
}

/* ========== Field States ========== */
.form-control,
.form-select {
    transition: all 0.3s ease;
    border-width: 2px;
}

.form-control:focus,
.form-select:focus {
    box-shadow: none;
    border-color: var(--primary);
}

/* Valid State */
.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--success);
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2316a34a'%3e%3cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
    border-color: var(--success);
    box-shadow: 0 0 0 0.2rem rgba(22, 163, 74, 0.25);
}

/* Invalid State */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--danger);
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc2626'%3e%3cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3e%3cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 0.2rem rgba(220, 38, 38, 0.25);
}

/* ========== Feedback Messages ========== */
.field-feedback {
    display: block;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    animation: slideIn 0.3s ease-out;
}

.success-feedback {
    color: var(--success);
}

.error-feedback {
    color: var(--danger);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== Character Counter ========== */
.character-counter {
    font-size: 0.75rem;
    color: var(--gray-600);
    text-align: right;
    margin-top: 0.25rem;
}

.character-counter.warning {
    color: var(--warning);
    font-weight: 500;
}

.character-counter .current {
    font-weight: 600;
}

/* ========== Password Strength Indicator ========== */
.password-strength {
    margin-top: 0.5rem;
}

.strength-meter {
    height: 4px;
    background: var(--gray-300);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.strength-bar {
    height: 100%;
    width: 0;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.strength-bar.weak {
    background: var(--danger);
    width: 33%;
}

.strength-bar.medium {
    background: var(--warning);
    width: 66%;
}

.strength-bar.strong {
    background: var(--success);
    width: 100%;
}

.strength-text {
    font-size: 0.75rem;
    font-weight: 500;
}

.strength-bar.weak + .strength-text {
    color: var(--danger);
}

.strength-bar.medium + .strength-text {
    color: var(--warning);
}

.strength-bar.strong + .strength-text {
    color: var(--success);
}

/* ========== Floating Labels ========== */
.form-floating > .form-control.is-valid ~ label,
.form-floating > .form-select.is-valid ~ label {
    color: var(--success);
}

.form-floating > .form-control.is-invalid ~ label,
.form-floating > .form-select.is-invalid ~ label {
    color: var(--danger);
}

/* ========== Input Groups with Validation ========== */
.input-group > .form-control.is-valid:not(:last-child),
.input-group > .form-select.is-valid:not(:last-child) {
    border-right: 2px solid var(--success);
}

.input-group > .form-control.is-invalid:not(:last-child),
.input-group > .form-select.is-invalid:not(:last-child) {
    border-right: 2px solid var(--danger);
}

/* ========== Custom Checkbox/Radio with Validation ========== */
.form-check-input.is-valid {
    border-color: var(--success);
}

.form-check-input.is-valid:checked {
    background-color: var(--success);
    border-color: var(--success);
}

.form-check-input.is-invalid {
    border-color: var(--danger);
}

.form-check-input.is-invalid:checked {
    background-color: var(--danger);
    border-color: var(--danger);
}

/* ========== Loading State ========== */
.form-control.is-loading,
.form-select.is-loading {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999'%3e%3ccircle cx='12' cy='12' r='10' stroke-width='2'%3e%3canimate attributeName='stroke-dasharray' dur='1.5s' values='0 63;16 63;31 63;16 63;0 63' repeatCount='indefinite'/%3e%3canimate attributeName='stroke-dashoffset' dur='1.5s' values='0;-16;-31;-47;-63' repeatCount='indefinite'/%3e%3c/circle%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}

/* ========== Tooltip Hints ========== */
.form-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-label .hint-icon {
    cursor: help;
    color: var(--gray-500);
    font-size: 0.875rem;
}

.form-label .hint-icon:hover {
    color: var(--primary);
}

/* ========== Required Field Indicator ========== */
.form-label.required::after {
    content: ' *';
    color: var(--danger);
}

/* ========== Field Help Text ========== */
.form-text {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--gray-600);
}

.form-text.text-success {
    color: var(--success);
}

.form-text.text-danger {
    color: var(--danger);
}

/* ========== Form Groups with Icons ========== */
.form-icon-group {
    position: relative;
}

.form-icon-group .form-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-500);
    pointer-events: none;
}

.form-icon-group .form-icon.icon-left {
    left: 0.75rem;
}

.form-icon-group .form-icon.icon-right {
    right: 0.75rem;
}

.form-icon-group .form-control {
    padding-left: 2.5rem;
}

.form-icon-group .form-control.with-icon-right {
    padding-right: 2.5rem;
}

/* ========== Focus Styles ========== */
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ========== Disabled State ========== */
.form-control:disabled,
.form-select:disabled {
    background-color: var(--gray-100);
    opacity: 0.65;
    cursor: not-allowed;
}

/* ========== Form Sections ========== */
.form-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}

.form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.form-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--gray-900);
}

/* ========== Inline Form Validation ========== */
.was-validated .form-control:valid,
.was-validated .form-select:valid {
    border-color: var(--success);
}

.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    border-color: var(--danger);
}

/* ========== Error Summary ========== */
.error-summary {
    background: var(--danger);
    color: white;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

.error-summary h5 {
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.error-summary ul {
    margin: 0;
    padding-left: 1.5rem;
}

.error-summary a {
    color: white;
    text-decoration: underline;
}

/* ========== Success Message ========== */
.success-message {
    background: var(--success);
    color: white;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.success-message i {
    font-size: 1.5rem;
}

/* ========== Responsive ========== */
@media (max-width: 576px) {
    .form-field-wrapper {
        margin-bottom: 1rem;
    }
    
    .field-feedback {
        font-size: 0.8rem;
    }
}