/* Team PIN Auto-Fill Styling */

/* Auto-filled field styling */
.auto-filled {
    background-color: #f8f9fa !important;
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

.auto-filled:focus {
    background-color: #f8f9fa !important;
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

/* Auto-fill indicator styling */
.auto-fill-indicator {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #28a745;
    font-weight: 500;
}

.auto-fill-indicator i {
    color: #28a745;
}

/* Clear PIN button styling */
.clear-pin-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 10px 15px;
    font-size: 0.8rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.clear-pin-btn:hover {
    background: #c82333;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* PIN field enhancements */
input[placeholder*="*"] {
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
    text-align: center;
    font-weight: bold;
}

/* Success animation for auto-filled fields */
@keyframes autoFillSuccess {
    0% { background-color: #fff3cd; }
    50% { background-color: #d4edda; }
    100% { background-color: #f8f9fa; }
}

.auto-filled.just-filled {
    animation: autoFillSuccess 1s ease-in-out;
}