/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9; 
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; 
}

/* Dragging visuals */
.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}
.drag-over {
    background-color: #eff6ff !important; /* blue-50 */
    box-shadow: inset 0 0 0 2px #60a5fa !important; /* blue-400 */
}

/* Error Notification Bubble (Toast) */
.toast-error {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background-color: #ef4444; /* red-500 */
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    font-weight: 600;
    font-size: 14px;
    z-index: 100;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.toast-error.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Shake Animation for Invalid Drop */
@keyframes shake-invalid {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.shake-invalid {
    animation: shake-invalid 0.5s cubic-bezier(.36,.07,.19,.97) both;
    border-color: #ef4444 !important; /* red-500 */
    background-color: #fef2f2 !important; /* red-50 */
    color: #b91c1c !important; /* red-700 */
    z-index: 60 !important; /* Ensure it stays on top */
}

/* iOS Safari specific fix to prevent text selection while dragging */
.drop-zone, .cursor-move {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation; /* Improves touch handling */
}

.match-card {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none !important; /* CRITICAL: Prevents scrolling so drag can start */
}

/* NEW: Ensure touch events hit the draggable container, not the text inside */
.match-card * {
    pointer-events: none;
}