/* Pull-to-Refresh Indicator Styles */

.ptr-indicator {
    position: fixed;
    top: 56px; /* Below mobile header (h-14 = 56px) by default */
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(25, 31, 40, 0.9); /* bg-cardBg/90 */
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    gap: 12px;
    transform: translateY(-60px);
    transition: transform 0.2s ease-out;
    z-index: 40; /* Below mobile header (z-50), above content */
    pointer-events: none;
}

/* Desktop: position at top of viewport */
@media (min-width: 1024px) {
    .ptr-indicator {
        top: 0;
    }
}

.ptr-indicator.ptr-enabled {
    display: flex; /* Only show when enabled */
}

.ptr-indicator.ptr-visible {
    transform: translateY(0);
}

.ptr-indicator.ptr-pulling {
    transition: none;
}

.ptr-icon {
    width: 24px;
    height: 24px;
    color: #378EEA; /* Primary blue */
    transition: transform 0.2s ease-out;
}

.ptr-icon.ptr-spinning {
    animation: ptr-spin 1s linear infinite;
}

@keyframes ptr-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.ptr-text {
    color: #378EEA;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.025em;
}

/* Hidden state */
.ptr-indicator.ptr-hidden {
    transform: translateY(-60px);
}

/* State-specific text colors */
.ptr-indicator.ptr-ready .ptr-text {
    color: #4CAF50; /* Green when ready */
}

.ptr-indicator.ptr-complete .ptr-text {
    color: #4CAF50;
}