/* ============================================================
 * base.css — foundations: resets, responsive containers,
 *   loading animations, custom golf-themed buttons/cards/inputs,
 *   course-result widget, hole-row, stroke-badge, target-score,
 *   progress steps, mobile/touch overrides, scrollbars, focus.
 *
 * These are the pre-reskin primitives. The newer design system
 * (CSS vars, body chrome, etc.) lives in reskin.css.
 *
 * Loaded first by base.html. Keep new low-level utilities here.
 * ============================================================ */

[x-cloak] {
    display: none !important;
}

/* 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 {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    box-shadow: var(--shadow);
    padding: 1.5rem;
}

.golf-button-primary {
    align-items: center;
    background: var(--accent);
    border-radius: 0.5rem;
    color: #f7fbf6;
    display: inline-flex;
    font-weight: 800;
    justify-content: center;
    min-height: 3rem;
    padding: 0.75rem 1.5rem;
}

.golf-button-secondary {
    align-items: center;
    background: rgba(255, 255, 255, 0.42);
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    color: var(--text);
    display: inline-flex;
    font-weight: 800;
    justify-content: center;
    min-height: 3rem;
    padding: 0.75rem 1.5rem;
}

.golf-input {
    background: rgba(255, 255, 255, 0.52);
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    color: var(--text);
    min-height: 3rem;
    padding: 0.75rem 0.9rem;
    width: 100%;
}

/* Course search results */
.course-result {
    background: rgba(255, 255, 255, 0.52);
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    color: var(--text);
    cursor: pointer;
    display: grid;
    gap: 0.2rem;
    padding: 0.85rem;
    transition: background-color 160ms ease, border-color 160ms ease;
}

.course-result:hover {
    background: rgba(255, 255, 255, 0.72);
    border-color: var(--line-strong);
}

.course-result.selected {
    background: rgba(255, 255, 255, 0.72);
    border-color: var(--line-strong);
}

.course-result strong {
    color: var(--text);
    font-weight: 800;
}

.course-result span,
.course-result small,
.search-empty {
    color: var(--text-muted);
}

.course-result small {
    font-size: 0.78rem;
}

.search-empty {
    margin-top: 1rem;
    text-align: center;
}

.search-icon {
    color: var(--text-muted);
    height: 1.25rem;
    width: 1.25rem;
}

/* Hole target display */
.hole-row {
    transition: background-color 160ms ease;
}

.hole-row:hover {
    background: rgba(255, 255, 255, 0.42);
}

.stroke-badge {
    align-items: center;
    background: rgba(38, 87, 55, 0.08);
    border-radius: 999px;
    color: var(--text-soft);
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.125rem 0.625rem;
}

.target-score {
    color: #2e7a45;
    font-size: 1.125rem;
    font-weight: 800;
}

/* Progress indicators */
.progress-step {
    align-items: center;
    border-radius: 999px;
    display: flex;
    font-size: 0.875rem;
    font-weight: 700;
    height: 2rem;
    justify-content: center;
    transition: background-color 160ms ease, color 160ms ease;
    width: 2rem;
}

.progress-step.active {
    background: var(--accent);
    color: #f7fbf6;
}

.progress-step.inactive {
    background: rgba(38, 87, 55, 0.1);
    color: var(--text-muted);
}

/* 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 {
    align-items: center;
    background: rgba(8, 13, 10, 0.42);
    display: flex;
    inset: 0;
    justify-content: center;
    position: fixed;
    z-index: 50;
}

.loading-content {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    box-shadow: var(--shadow);
    margin-left: 1rem;
    margin-right: 1rem;
    max-width: 24rem;
    padding: 1.5rem;
    width: 100%;
}

/* 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 {
    box-shadow: 0 0 0 3px rgba(109, 143, 53, 0.22);
    outline: none;
}