/* =========================================================================
   Birdie Logger styles
   ========================================================================= */

:root {
    /* Brand: golf-y green for "birdied" tiles */
    --primary-50: #f0fdf4;
    --primary-100: #dcfce7;
    --primary-500: #22c55e;
    --primary-600: #16a34a;
    --primary-700: #15803d;
    --primary-900: #14532d;

    /* Neutrals */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    --success-600: #16a34a;
    --error-50: #fef2f2;
    --error-600: #dc2626;
    --info-50: #eff6ff;
    --info-600: #2563eb;

    /* Spacing & sizing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
}

* { box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--gray-800);
    background: var(--gray-50);
    margin: 0;
    line-height: 1.5;
}

h1, h2, h3, h4 { margin: 0 0 var(--space-2) 0; }
h2 { font-size: var(--text-2xl); font-weight: var(--font-bold); }
h3 { font-size: var(--text-xl); font-weight: var(--font-semibold); }

a { color: var(--primary-700); }

/* =========================================================================
   Nav
   ========================================================================= */

.navbar {
    background: white;
    border-bottom: 1px solid var(--gray-200);
}
.navbar-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
}
.navbar-brand h1 {
    font-size: var(--text-xl);
    color: var(--primary-700);
    margin: 0;
}
.navbar-subtitle {
    font-size: var(--text-xs);
    color: var(--gray-500);
}
.navbar-menu {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
}
.nav-link {
    color: var(--gray-700);
    text-decoration: none;
    font-weight: var(--font-medium);
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: all 0.15s;
}
.nav-link:hover {
    background: var(--gray-100);
    color: var(--primary-700);
}
.navbar-who {
    margin-left: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: var(--primary-100);
    color: var(--primary-700);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}
.user-picker {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.user-picker-btn {
    width: 100%;
    padding: var(--space-4);
    font-size: var(--text-lg);
}

/* =========================================================================
   Layout
   ========================================================================= */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-4);
}

.card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.card-header {
    margin-bottom: var(--space-4);
}
.card-header h2 { margin: 0; }
.card-header p {
    margin: var(--space-1) 0 0 0;
    color: var(--gray-500);
    font-size: var(--text-sm);
}

/* =========================================================================
   Alerts
   ========================================================================= */

.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}
.alert-error { background: var(--error-50); color: var(--error-600); border: 1px solid var(--error-600); }
.alert-info { background: var(--info-50); color: var(--info-600); border: 1px solid var(--info-600); }
.alert-success { background: var(--primary-50); color: var(--primary-700); border: 1px solid var(--primary-600); }

/* =========================================================================
   Forms
   ========================================================================= */

.form-group { margin-bottom: var(--space-4); }
.form-group label {
    display: block;
    font-weight: var(--font-medium);
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
    color: var(--gray-700);
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-family: inherit;
    background: white;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.btn {
    display: inline-block;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
    font-family: inherit;
}
.btn-primary {
    background: var(--primary-600);
    color: white;
}
.btn-primary:hover { background: var(--primary-700); }
.btn-secondary {
    background: white;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
}
.btn-secondary:hover { background: var(--gray-100); }
.btn-link-danger {
    background: none;
    border: none;
    color: var(--error-600);
    cursor: pointer;
    font-size: var(--text-sm);
    padding: 0;
    text-decoration: underline;
    font-family: inherit;
}

/* =========================================================================
   Board view
   ========================================================================= */

.board-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}
.season-picker {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.season-picker label {
    font-size: var(--text-sm);
    color: var(--gray-600);
}
.season-picker select {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: white;
    font-family: inherit;
    font-size: var(--text-base);
}

.cards-grid {
    display: grid;
    gap: var(--space-6);
    /* minmax(0, 1fr) (not just 1fr) is needed so the column can be narrower
       than its content. Without it, the wide hole-grid inside would push
       the card out and make the whole page scroll horizontally. */
    grid-template-columns: minmax(0, 1fr);
}

.player-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    /* Belt-and-suspenders: stop wide children from pushing the card wider
       than its grid column. */
    min-width: 0;
}
.player-card-mine {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}
.player-card-header {
    margin-bottom: var(--space-4);
}
.player-card-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.you-tag {
    font-size: var(--text-xs);
    background: var(--primary-100);
    color: var(--primary-700);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.player-card-counter {
    margin-top: var(--space-1);
    color: var(--gray-700);
    font-size: var(--text-base);
}
.player-card-counter strong {
    color: var(--primary-700);
    font-size: var(--text-xl);
}
.total-birdies {
    color: var(--gray-500);
    font-size: var(--text-sm);
    margin-left: var(--space-2);
}
.player-card-hint {
    text-align: center;
    color: var(--gray-500);
    font-size: var(--text-sm);
    margin: var(--space-3) 0 0 0;
}

/* =========================================================================
   Hole grid (the bingo card)
   ========================================================================= */

.hole-row {
    margin-bottom: var(--space-3);
}
.hole-row:last-child { margin-bottom: 0; }
.hole-row-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--gray-500);
    margin-bottom: var(--space-1);
    font-weight: var(--font-semibold);
}
.hole-grid {
    /* Each tile is at least 72px wide — enough room for a thumb. On narrow
       screens the row overflows and scrolls horizontally; on wider screens
       the tiles grow to fill the available width and there's no scroll. */
    display: grid;
    grid-template-columns: repeat(9, minmax(72px, 1fr));
    gap: var(--space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.hole-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    min-height: 80px;
    padding: var(--space-2) 4px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--gray-50);
    color: var(--gray-600);
    text-decoration: none;
    transition: all 0.15s;
    position: relative;
    text-align: center;
}
.hole-tile:hover:not(.hole-tile-readonly) {
    border-color: var(--primary-500);
    background: white;
    color: var(--gray-800);
    transform: translateY(-1px);
}
.hole-tile-readonly { cursor: default; }

.hole-tile-lit {
    background: var(--primary-500);
    border-color: var(--primary-600);
    color: white;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.25);
}
.hole-tile-lit:hover:not(.hole-tile-readonly) {
    background: var(--primary-600);
    color: white;
}

.hole-tile-number {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    line-height: 1;
}
.hole-tile-par {
    font-size: var(--text-xs);
    opacity: 0.85;
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.hole-tile-yardage {
    font-size: var(--text-xs);
    opacity: 0.7;
    line-height: 1;
}
.hole-tile-date {
    font-size: var(--text-xs);
    line-height: 1;
    opacity: 0.95;
    font-weight: var(--font-medium);
}
.hole-tile-count {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 0.6rem;
    font-weight: var(--font-bold);
    background: rgba(255,255,255,0.3);
    border-radius: var(--radius-sm);
    padding: 0 3px;
}

/* =========================================================================
   Hole detail & birdie list
   ========================================================================= */

.birdie-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.birdie-entry {
    padding: var(--space-4);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    background: var(--gray-50);
}
.birdie-entry-date {
    font-weight: var(--font-semibold);
    color: var(--primary-700);
    margin-bottom: var(--space-2);
}
.birdie-entry-notes {
    margin-top: var(--space-2);
    color: var(--gray-700);
    font-style: italic;
}

/* =========================================================================
   Edit holes table
   ========================================================================= */

.hole-edit-table {
    width: 100%;
    border-collapse: collapse;
}
.hole-edit-table th,
.hole-edit-table td {
    padding: var(--space-2);
    border-bottom: 1px solid var(--gray-200);
    text-align: left;
}
.hole-edit-table th {
    font-size: var(--text-sm);
    color: var(--gray-600);
    font-weight: var(--font-semibold);
}
.hole-edit-table input[type="number"] {
    width: 100%;
    min-width: 60px;
    padding: var(--space-2);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--text-base);
}

.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tee-yardage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}
.tee-yardage-table th,
.tee-yardage-table td {
    padding: var(--space-2);
    text-align: center;
    border-bottom: 1px solid var(--gray-200);
}
.tee-yardage-table th {
    color: var(--gray-600);
    font-weight: var(--font-semibold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.birdie-entry-tee {
    color: var(--gray-600);
    font-weight: var(--font-medium);
    font-size: var(--text-sm);
    margin-left: var(--space-1);
}

/* Admin: users table */
.users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.users-table th,
.users-table td {
    padding: var(--space-3);
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
    vertical-align: middle;
}
.users-table th {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--gray-600);
    font-weight: var(--font-semibold);
}

.role-badge {
    font-size: var(--text-xs);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.role-admin {
    background: var(--primary-100);
    color: var(--primary-700);
}
.role-user {
    background: var(--gray-100);
    color: var(--gray-700);
}

.user-actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}
.user-actions form { margin: 0; }

.btn-link {
    background: none;
    border: none;
    color: var(--primary-700);
    cursor: pointer;
    font-size: var(--text-sm);
    padding: 0;
    text-decoration: underline;
    font-family: inherit;
}

/* =========================================================================
   Dark mode — follows the device's setting
   ========================================================================= */

@media (prefers-color-scheme: dark) {
    :root {
        /* Slightly muted greens to keep tiles cheerful but not blinding */
        --primary-50: #052e16;
        --primary-100: #14532d;
        --primary-500: #22c55e;
        --primary-600: #16a34a;
        --primary-700: #4ade80;

        /* Alerts in dark */
        --error-50: #2a1212;
        --error-600: #fca5a5;
        --info-50: #102036;
        --info-600: #93c5fd;
    }

    body {
        background: #0b0f17;
        color: #e5e7eb;
    }

    .navbar {
        background: #111827;
        border-bottom-color: #1f2937;
    }
    .navbar-brand h1 { color: #4ade80; }
    .navbar-subtitle { color: #9ca3af; }

    .nav-link { color: #d1d5db; }
    .nav-link:hover {
        background: #1f2937;
        color: #4ade80;
    }
    .navbar-who {
        background: #14532d;
        color: #86efac;
    }

    .card,
    .player-card {
        background: #111827;
        border-color: #1f2937;
        color: #e5e7eb;
        box-shadow: 0 1px 2px rgba(0,0,0,0.4);
    }
    .player-card-mine {
        border-color: #16a34a;
        box-shadow: 0 0 0 3px rgba(22,163,74,0.25);
    }
    .card-header p,
    .player-card-counter { color: #d1d5db; }
    .player-card-hint,
    .total-birdies { color: #9ca3af; }
    .player-card-counter strong { color: #4ade80; }

    .you-tag {
        background: #14532d;
        color: #86efac;
    }

    .hole-row-label { color: #9ca3af; }

    .hole-tile {
        background: #1f2937;
        border-color: #374151;
        color: #d1d5db;
    }
    .hole-tile:hover:not(.hole-tile-readonly) {
        border-color: #22c55e;
        background: #1e293b;
        color: #f3f4f6;
    }
    .hole-tile-lit {
        background: #16a34a;
        border-color: #15803d;
        color: white;
        box-shadow: 0 2px 10px rgba(34,197,94,0.35);
    }
    .hole-tile-lit:hover:not(.hole-tile-readonly) {
        background: #22c55e;
    }
    .hole-tile-count {
        background: rgba(0,0,0,0.3);
    }

    /* Forms */
    .form-group label { color: #d1d5db; }
    .form-group input,
    .form-group select,
    .form-group textarea,
    .hole-edit-table input[type="number"],
    .season-picker select {
        background: #0b0f17;
        border-color: #374151;
        color: #e5e7eb;
    }
    .form-group input::placeholder,
    .form-group textarea::placeholder { color: #6b7280; }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        border-color: #22c55e;
        box-shadow: 0 0 0 3px rgba(34,197,94,0.25);
    }

    .btn-secondary {
        background: #1f2937;
        color: #e5e7eb;
        border-color: #374151;
    }
    .btn-secondary:hover { background: #374151; }

    /* Alerts */
    .alert-error {
        background: #2a1212;
        color: #fca5a5;
        border-color: #7f1d1d;
    }
    .alert-info {
        background: #102036;
        color: #93c5fd;
        border-color: #1e3a8a;
    }
    .alert-success {
        background: #052e16;
        color: #86efac;
        border-color: #14532d;
    }

    .birdie-entry {
        background: #1f2937;
        border-color: #374151;
    }
    .birdie-entry-date { color: #4ade80; }
    .birdie-entry-notes { color: #d1d5db; }

    .hole-edit-table th { color: #9ca3af; }
    .hole-edit-table th,
    .hole-edit-table td { border-bottom-color: #1f2937; }

    .tee-yardage-table th { color: #9ca3af; }
    .tee-yardage-table th,
    .tee-yardage-table td { border-bottom-color: #1f2937; }
    .birdie-entry-tee { color: #9ca3af; }

    .users-table th { color: #9ca3af; }
    .users-table th,
    .users-table td { border-bottom-color: #1f2937; }
    .role-admin { background: #14532d; color: #86efac; }
    .role-user { background: #1f2937; color: #d1d5db; }
    .btn-link { color: #4ade80; }

    .season-picker label { color: #9ca3af; }

    a { color: #4ade80; }
}