/* Golf Coach Custom Styles */

/* Mobile-first responsive design */
@media (max-width: 640px) {
    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    /* Ensure no horizontal overflow */
    * {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Better mobile padding for cards */
    .golf-card {
        padding: 1rem;
    }
}

/* Loading animations */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Custom golf-themed components */
.golf-card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6;
}

.golf-button-primary {
    @apply bg-golf-green-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-golf-green-700 transition-colors;
}

.golf-button-secondary {
    @apply border border-gray-300 text-gray-700 px-6 py-3 rounded-lg font-medium hover:bg-gray-50 transition-colors;
}

.golf-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-golf-green-500 focus:border-transparent;
}

/* Course search results */
.course-result {
    @apply p-3 border border-gray-200 rounded-lg hover:bg-golf-green-50 cursor-pointer transition-colors;
}

.course-result:hover {
    @apply border-golf-green-300;
}

.course-result.selected {
    @apply bg-golf-green-50 border-golf-green-300;
}

/* Hole target display */
.hole-row {
    @apply hover:bg-gray-50 transition-colors;
}

.stroke-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-golf-green-100 text-golf-green-800;
}

.target-score {
    @apply text-lg font-semibold text-golf-green-600;
}

/* Progress indicators */
.progress-step {
    @apply w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium transition-colors;
}

.progress-step.active {
    @apply bg-golf-green-600 text-white;
}

.progress-step.inactive {
    @apply bg-gray-300 text-gray-600;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .mobile-hidden {
        display: none;
    }
    
    .mobile-accordion {
        display: block;
    }
    
    .mobile-full-width {
        width: 100%;
    }
}

@media (min-width: 769px) {
    .desktop-table {
        display: block;
    }
    
    .mobile-accordion {
        display: none;
    }
}

/* Touch-friendly interactive elements */
@media (hover: none) and (pointer: coarse) {
    .touch-target {
        min-height: 44px;
        min-width: 44px;
    }
    
    button, .course-result, .touch-target {
        min-height: 44px;
    }
}

/* Loading states */
.loading-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
}

.loading-content {
    @apply bg-white rounded-lg p-6 max-w-sm w-full mx-4;
}

/* Custom scrollbars for mobile */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db #f3f4f6;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Focus states for accessibility */
.focus-visible:focus {
    @apply outline-none ring-2 ring-golf-green-500 ring-offset-2;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .golf-button-primary {
        @apply border-2 border-black;
    }
    
    .golf-card {
        @apply border-2 border-gray-400;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .golf-card {
        @apply border border-gray-400 shadow-none;
    }
    
    .target-score {
        @apply text-black;
    }
}

/* Dark mode support (for future implementation) */
@media (prefers-color-scheme: dark) {
    /* Dark mode styles would go here if implemented */
}