/* Caddie Card custom styles */

/* Form field focus states */
select:focus, input:focus, textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.5);
    border-color: #16a34a;
}

/* Error styling for form fields */
.field-error select,
.field-error input {
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
}

/* Picks form tier card hover */
.tier-card {
    transition: box-shadow 0.2s;
}
.tier-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Leaderboard sticky columns */
.leaderboard-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sticky-col {
    position: sticky;
    z-index: 5;
}

.sticky-col-0 { left: 0; min-width: 48px; }
.sticky-col-1 { left: 48px; min-width: 140px; }
.sticky-col-2 { left: 188px; min-width: 64px; }
.sticky-col-3 { left: 252px; min-width: 110px; box-shadow: 2px 0 4px rgba(0,0,0,0.06); }

/* Leaderboard row selection */
.leaderboard-row {
    transition: background-color 0.15s ease;
}

.leaderboard-selected {
    background-color: #dcfce7 !important;
}

.leaderboard-selected td {
    background-color: #dcfce7 !important;
}

/* Native app (Capacitor) safe areas — notch & home indicator.
   Scoped to .capacitor-native so the web app is unaffected. The nav (golf-800)
   extends up into the status-bar area; the footer (golf-900) fills the
   home-indicator area; side insets handle landscape notches. */
html.capacitor-native nav {
    padding-top: env(safe-area-inset-top);
}
html.capacitor-native footer {
    padding-bottom: env(safe-area-inset-bottom);
}
html.capacitor-native nav,
html.capacitor-native main,
html.capacitor-native footer {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
/* Auth pages (login/signup) have their own green mobile header instead of the nav. */
html.capacitor-native .auth-mobile-header {
    padding-top: calc(1rem + env(safe-area-inset-top));
}