/* 
 * Campus Lane Holdings - Input Animation Fixes
 * Professional, subtle input animations without aggressive scaling
 * This file overrides aggressive animations from other CSS files
 */

/* ===========================
   PROFESSIONAL INPUT ANIMATIONS
   =========================== */

/* Remove ALL aggressive transform animations on inputs */
.form-control,
.form-input,
.form-select,
.form-textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
    /* Smooth, professional transitions */
    transition: border-color 0.2s ease, 
                box-shadow 0.2s ease, 
                background-color 0.2s ease !important;
    transform: none !important;
}

/* Professional focus state - subtle glow, NO scaling */
.form-control:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(44, 95, 124, 0.1) !important;
    background-color: var(--bg-primary) !important;
    transform: none !important;
    animation: none !important;
}

/* Subtle hover effect - just border color change */
.form-control:hover:not(:focus),
.form-input:hover:not(:focus),
.form-select:hover:not(:focus),
.form-textarea:hover:not(:focus),
input:hover:not(:focus),
textarea:hover:not(:focus),
select:hover:not(:focus) {
    border-color: #888 !important;
    transform: none !important;
    animation: none !important;
}

/* Ensure validation states also don't scale */
.form-control.is-valid:focus,
.form-input.is-valid:focus {
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1) !important;
    transform: none !important;
}

.form-control.is-invalid:focus,
.form-input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;
    transform: none !important;
}

/* Remove any animated classes that might be applied */
.form-control-animated {
    animation: none !important;
    transform: none !important;
}

/* ===========================
   PROFESSIONAL BUTTON ANIMATIONS
   Keep buttons smooth but not aggressive
   =========================== */

.btn {
    transition: background-color 0.2s ease, 
                border-color 0.2s ease, 
                box-shadow 0.2s ease,
                transform 0.1s ease !important;
}

.btn:hover {
    transform: translateY(-1px) !important;
}

.btn:active {
    transform: translateY(0) !important;
}

/* ===========================
   SEARCH INPUTS
   =========================== */

.search-input:focus,
.search-field input:focus,
.search-field select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(44, 95, 124, 0.1) !important;
    transform: none !important;
}

/* ===========================
   MOBILE OPTIMIZATION
   =========================== */

@media (max-width: 768px) {
    /* Ensure inputs are stable on mobile */
    .form-control,
    .form-input,
    input,
    textarea,
    select {
        font-size: 16px !important; /* Prevents zoom on iOS */
        transform: none !important;
    }
    
    .form-control:focus,
    .form-input:focus,
    input:focus,
    textarea:focus,
    select:focus {
        transform: none !important;
        /* Lighter shadow on mobile for better performance */
        box-shadow: 0 0 0 2px rgba(44, 95, 124, 0.15) !important;
    }
}

/* ===========================
   FLOATING LABELS FIX
   =========================== */

.form-floating .form-control:focus ~ label,
.form-floating .form-control:not(:placeholder-shown) ~ label {
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
    transition: all 0.2s ease !important;
}

/* ===========================
   INPUT WITH ICONS
   =========================== */

.input-with-icon .form-control:focus ~ .input-icon {
    color: var(--primary-color) !important;
    transform: none !important;
}

/* ===========================
   FILE INPUTS
   =========================== */

.file-upload-label:hover {
    border-color: var(--primary-color) !important;
    background: rgba(44, 95, 124, 0.05) !important;
    transform: none !important;
}

/* ===========================
   ENSURE NO CONFLICTS
   =========================== */

/* Override any aggressive animations from other stylesheets */
* {
    /* Only allow these safe transform properties on inputs */
}

input:focus,
textarea:focus,
select:focus {
    transform: none !important;
    scale: 1 !important;
}
