/* Par-3 Tracker — custom CSS layer (Tailwind CDN handles the rest) */

/* Safe-area padding for bottom nav on iPhone notch devices */
.safe-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Body bottom padding so content isn't hidden behind bottom nav on mobile */
@media (max-width: 767px) {
    body {
        padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
    }
}

/* Chart container */
.chart-container {
    position: relative;
    height: 180px;
}

/* Custom scrollbar (Webkit) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #1e293b; }
::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* Hole grid — 3 cols mobile, up to 9 cols on wide screens */
.hole-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
@media (min-width: 480px) {
    .hole-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 700px) {
    .hole-grid { grid-template-columns: repeat(9, 1fr); }
}

/* Number inputs — remove spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* Course picker dropdown */
#course-dropdown {
    max-height: 240px;
    overflow-y: auto;
}

/* Smooth transitions for flash messages */
.flash-out {
    transition: opacity 0.4s;
    opacity: 0;
}