/* === CSS VARIABLES === */
        :root {
            --primary: #10b981;
            --primary-dark: #059669;
            --secondary: #3b82f6;
            --accent: #f59e0b;
            --success: #22c55e;
            --danger: #ef4444;
            --warning: #f97316;


            /* Light theme (default) */
            --bg-primary: #ffffff;
            --bg-secondary: #f8fafc;
            --bg-tertiary: #f1f5f9;
            --bg-card: #ffffff;

            --text-primary: #0f172a;
            --text-secondary: #475569;
            --text-muted: #64748b;
            --lightteamA: #000080;
            --lightteamB: #800000;

            --border: #e2e8f0;
            --border-light: #f1f5f9;

            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

            --radius: 8px;
            --radius-lg: 12px;
            --radius-xl: 16px;
        }

        /* === DARK THEME === */
        [data-theme="dark"] {
            --bg-primary: #0d1117;
            --bg-secondary: #161b22;
            --bg-tertiary: #21262d;
            --bg-card: #161b22;

            --text-primary: #f0f6fc;
            --text-secondary: #8b949e;
            --text-muted: #656d76;
            --darkteamA: #FFA500;
            --darkteamB: #00CED1;
            --darkBirdies: #FF8B94;
            --darkEven: #78C2AD;

            --border: #30363d;
            --border-light: #484f58;

            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
        }

        /* === BASE STYLES === */
        * {
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
            margin: 0;
            background: var(--bg-primary);
            color: var(--text-primary);
            padding-bottom: 100px;
            line-height: 1.6;
            min-height: 100vh;
            transition: all 0.3s ease;
        }

        .container {
            max-width: 480px;
            margin: 0 auto;
            background: var(--bg-primary);
            min-height: 100vh;
            position: relative;
        }

        /* === MODERN NAVIGATION === */
        .bottom-nav {
            position: fixed;
            height: auto;
            left: 50%;
            transform: translateX(-50%);
            bottom: 8px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 24px;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            z-index: 1000;
            padding: 8 16px;
            box-shadow: var(--shadow-lg);
            backdrop-filter: blur(20px);
            max-width: 400px;
            width: calc(100% - 32px);
        }

        .bottom-nav button {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 8px 12px;
            border-radius: 18px;
            transition: all 0.2s ease;
            font-size: 0.875rem;
            font-weight: 500;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            flex: 1;
            position: relative;
        }

        .bottom-nav button.active {
            background: var(--primary);
            color: white;
            transform: translateY(-1px);
        }

        /* === SECTIONS === */
        .section {
            display: none;
            padding: 20px 16px 40px;
        }

        .section.active {
            display: block;
        }

        .section-divider {
            border-bottom: 1px solid var(--border);
            padding-bottom: 4px;
            margin: 16px 0 8px 0;
        }

        .section-divider h4 {
            margin: 0;
            font-size: 1rem;
            color: var(--text-primary);
            margin: 4px 16px 4px 0px !important;
        }

        button#createMatchBtn {
            margin-top: 4px !important;
            padding: 14px 16px;
        }

        /* === MODERN HEADER === */
        .scorecard-header {
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border);
            padding: 16px 16px 12px 16px;
            margin: 0 -16px 16px -16px;
        }

        .matches-header {
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border);
            padding: 16px 16px 12px 16px;
            margin: 0 -16px 16px -16px;

        }

        .scorecard-header {
            margin: 0 !important;
        }

        td[colspan="10"]:empty {
            height: 2px;
            max-height: 2px !important;
            min-height: 2px !important;
            padding: 0 !important;
            line-height: 1 !important;

        }

        /* Also make the parent row shorter for empty separators */
        tr:has(td[colspan="10"]:empty) {
            height: 2px !important;
            max-height: 2px !important;
            min-height: 2px !important;

        }

        /* Make match scorecard text bigger and tables wider (exclude board page scorecards) */
        .player-scorecard-table:not(#scorecardsContent .player-scorecard-table) {
            width: 105% !important;
            margin-left: -2.5% !important;
            margin-right: -2.5% !important;
        }

        .player-scorecard-table:not(#scorecardsContent .player-scorecard-table) th,
        .player-scorecard-table:not(#scorecardsContent .player-scorecard-table) td {
            font-size: 13px;
            padding: 4px 2px;
            min-width: 24px !important;
        }

        /* Player name column in match scorecards */
        .player-scorecard-table:not(#scorecardsContent .player-scorecard-table) th:first-child,
        .player-scorecard-table:not(#scorecardsContent .player-scorecard-table) td:first-child {
            width: 70px !important;
            min-width: 70px !important;
        }

        /* Update leaderboard header */
        .leaderboard-header {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow);
            padding: 16px;
            margin-bottom: 12px;
        }

        .leaderboard-header h3 {
            margin: 0;
            font-size: 20px;
            font-weight: 600;
            color: var(--text-primary);
        }

        /* Remove the subtitle paragraph */
        .leaderboard-header p {
            display: none;
        }

        .player-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }

        .player-info {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .player-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--bg-tertiary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 14px;
            color: var(--text-primary);
            border: 2px solid var(--border);
        }

        .main-title {
            font-size: 1.3rem;
            font-weight: 700;
            margin: 0;
            color: var(--text-primary);
        }

        .subtitle {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin: 0;
        }

        .header-actions {
            display: flex;
            gap: 8px;
        }

        /* Recent Players Styles */
        .recent-players-container {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
            margin-top: 4px;
        }

        #recentPlayers {
            flex-wrap: nowrap;
            overflow-x: hidden;
        }

        .recent-player-btn {
            padding: 8px 4px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--bg-tertiary);
            color: var(--text-primary);
            font-size: 0.8rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            min-width: 60px;
            flex: 0 0 calc(25%- 3px);
            text-align: center;
            box-sizing: border-box;
            gap: 4px;
            margin-top: 6px;
            justify-content: flex-start;
            flex: 0 0 calc(25% - 3px);

        }

        .recent-player-btn:hover {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        .recent-player-btn.active {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        .recent-players-hidden {
            display: none;
        }

        /* Fix mobile hover issue - disable hover on touch devices */
        @media (hover: none) and (pointer: coarse) {
            .recent-player-btn:hover {
                background: var(--bg-tertiary) !important;
                color: var(--text-primary) !important;
                border-color: var(--border) !important;
            }
        }

        /* Also ensure active buttons stay active even on hover */
        .recent-player-btn.active:hover {
            background: var(--primary) !important;
            color: white !important;
            border-color: var(--primary) !important;
        }

        /* === MODERN BUTTONS === */
        .btn {
            border: none;
            border-radius: var(--radius);
            padding: 10px 16px;
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .btn-primary {
            background: var(--primary);
            color: white;
            box-shadow: var(--shadow);
        }

        .btn-primary:hover {
            background: var(--primary-dark);
            transform: translateY(-1px);
        }

        .btn-secondary {
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border: 1px solid var(--border);
        }

        .btn-secondary:hover {
            background: var(--border);
        }

        .btn-outline {
            background: transparent;
            color: var(--primary);
            border: 2px solid var(--primary);
        }

        .btn-outline:hover {
            background: var(--primary);
            color: white;
        }

        .settings-dots-btn {
            background: none;
            border: none;
            outline: none;
            font-size: 1.5rem;
            padding: 8px 12px;
            cursor: pointer;
            color: var(--text-primary);
            border-radius: 4px;
            transition: background-color 0.2s ease;
        }

        .settings-dots-btn:hover {
            background-color: var(--bg-secondary);
        }

        .settings-dots-btn:focus {
            outline: none;
        }

        /* === FORM ELEMENTS === */
        .form-group {
            margin-bottom: 8px;
        }

        .form-label {
            display: block;
            font-size: 0.75rem;
            font-weight: 500;
            color: var(--text-secondary);
            margin-bottom: 3px;
        }

        input[type="text"],
        input[type="number"],
        input[type="date"],
        select {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid var(--border);
            border-radius: var(--radius);
            background: var(--bg-card);
            color: var(--text-primary);
            font-size: 16px;
            transition: all 0.2s ease;
        }

        /* Completely reset date input styling to remove duplicate icons */
        input[type="date"] {
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            appearance: none !important;

            /* Remove ALL background images first */
            background-image: none !important;

            /* Add our single calendar icon */
            background: var(--bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") no-repeat right 12px center !important;
            background-size: 18px !important;
            padding-right: 40px !important;
        }

        /* Dark mode single calendar icon */
        [data-theme="dark"] input[type="date"] {
            background: var(--bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") no-repeat right 12px center !important;
            background-size: 18px !important;
        }

        /* Remove any pseudo-elements that might add icons */
        input[type="date"]::-webkit-calendar-picker-indicator {
            opacity: 0;
            position: absolute;
            right: 0;
            width: 40px;
            height: 100%;
            cursor: pointer;
        }

        input:focus,
        select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
        }

        /* === MODERN CARDS === */
        .card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow);
            margin-bottom: 20px;
            overflow: hidden;
        }

        .card-header {
            padding: 20px;
            border-bottom: 1px solid var(--border);
            background: var(--bg-secondary);
        }

        .card-content {
            padding: 20px;
        }

        /* === SCORE SUMMARY === */
        .score-summary {
            background: var(--bg-secondary);
            border-radius: var(--radius-lg);
            padding: 6px 10px;
            margin: 6px 0;
            border: 1px solid var(--border);
        }

        .score-main {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }

        .score-display {
            font-size: 1.6rem;
            display: flex;
            align-items: baseline;
            gap: 6px;
            font-weight: 800;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1;
        }

        .score-status {
            font-size: 0.65rem;
            font-weight: 500;
            color: var(--text-muted);
            margin-top: 2px;
        }

        .score-right {
            text-align: right;
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        .progress-bar {
            height: 2px;
            background: var(--border);
            border-radius: 2px;
            overflow: hidden;
            margin: 4px 0;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            transition: width 0.5s ease;
            position: relative;
        }

        .score-icons {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 4px;
            font-size: 0.8rem;
        }

        .score-icon {
            display: flex;
            align-items: center;
            gap: 3px;
            white-space: nowrap;
        }

        .score-icon-badge {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            color: white;
            font-size: 0.7rem;
            flex-shrink: 0;
        }

        .score-icon-label {
            font-size: 0.7rem;
            color: var(--text-muted);
        }

        .eagles {
            background: linear-gradient(135deg, var(--accent), var(--warning));
        }

        .birdies {
            background: linear-gradient(135deg, var(--danger), #dc2626);
        }

        .pars {
            background: linear-gradient(135deg, var(--success), var(--primary));
        }

        .bogeys {
            background: linear-gradient(135deg, #64748b, #475569);
        }

        .doubles {
            background: linear-gradient(135deg, #374151, #1f2937);
        }

        .score-eagle {
            background: #f59e0b !important;
            color: white !important;
            border-color: #f59e0b !important;
        }



        .score-bogey {
            background: #64748b !important;
            color: white !important;
            border-color: #64748b !important;
        }

        .score-double {
            background: #374151 !important;
            color: white !important;
            border-color: #374151 !important;
        }

        .score-par {
            background: var(--bg-card) !important;
            color: #64748b !important;
            border-color: var(--border) !important;
        }

        /* Scorecard toggle styling */
        /* Match card scorecard specific styling (namespaced to avoid conflicts) */
        .scorecard-content .score-eagle {
            background: #fef3c7 !important;
            /* Light yellow */
            color: #92400e !important;
            font-weight: 700 !important;
            border: 1px solid #f59e0b !important;
        }



        .scorecard-content .score-par {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
            font-weight: 600 !important;
            border: 1px solid var(--border) !important;
        }

        .scorecard-content .score-bogey {
            background: #e5e7eb !important;
            /* Slightly darker gray */
            color: #374151 !important;
            font-weight: 700 !important;
            border: 1px solid #d1d5db !important;
        }

        .scorecard-content .score-double {
            background: #9ca3af !important;
            color: #1f2937 !important;
            font-weight: 700 !important;
            border: 1px solid #6b7280 !important;
        }

        /* Dark mode versions for match card scorecard */
        [data-theme="dark"] .scorecard-content .score-eagle {
            background: #f59e0b !important;
            color: white !important;
            border: 1px solid #fbbf24 !important;
        }



        [data-theme="dark"] .scorecard-content .score-bogey {
            background: #64748b !important;
            color: white !important;
            border: 1px solid #94a3b8 !important;
        }

        [data-theme="dark"] .scorecard-content .score-double {
            background: #374151 !important;
            color: white !important;
            border: 2px solid white !important;
            /* Better contrast in dark mode */
            font-weight: 800 !important;
        }

        .scorecard-content {
            padding: 16px;
            background: var(--bg-card);
            font-size: 0.8rem;
            /* height: 37px !important; */
            /* line-height: 37px !important; */

            /* display: table-cell !important; */
            /* vertical-align: middle !important; */
        }

        .nine-section h5 {
            font-size: 0.85rem;
            /* Make it bigger */
        }

        .player-scorecard-table tr {
            height: 37px !important;
            /* Match the taller Brett row */
        }

        /* Make individual scorecards on Board page bigger and wider */
        #scorecardsContent {
            padding: 8px;
        }

        #scorecardsContent .scorecard-row {
            margin: 0 0 8px 0;
            padding: 0;
        }

        #scorecardsContent .scorecard-detail {
            padding: 8px;
            margin: 0;
        }




        #scorecardTable :is(input[type="number"], input[type="tel"]) {
            width: 60px !important;
            height: 40px !important;
            text-align: center;
            border-radius: 6px;
            font-size: 1.1rem !important;
            font-weight: 600;
            border: 2px inset var(--border) !important;
            transition: all 0.2s ease;
        }

        #scorecardTable :is(input[type="number"], input[type="tel"]):focus {
            border-color: var(--primary) !important;
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
            transform: scale(1.05);
        }

        /* Scorecard page (individual player scorecard) birdie styling */
        #scorecardTable .score-birdie {
            background: #ef4444 !important;
            color: white !important;
            font-weight: 700;
        }

        #scorecardTable .score-eagle {
            background: #f59e0b !important;
            color: white !important;
            font-weight: 700;
        }

        #scorecardTable .score-bogey {
            background: #5f6d83 !important;
            color: #ffffff !important;
            font-weight: 700;
        }

        #scorecardTable .score-double {
            background: #283241 !important;
            color: #ffffff !important;
            font-weight: 700;
        }

        /* Dark mode scorecard page styling */
        [data-theme="dark"] #scorecardTable .score-bogey {
            background: #64748b !important;
            color: white !important;
        }

        [data-theme="dark"] #scorecardTable .score-double {
            background: #304d79 !important;
            color: white !important;
        }

        @media (max-width: 480px) {

            #scorecardTable input[type="number"],
            #scorecardTable input[type="tel"] {
                width: 50px !important;
                /* Still readable on mobile */
                height: 44px !important;
                /* Even bigger touch target on mobile */
                font-size: 1.2rem !important;
            }
        }

        .scorecard-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 8px;
            font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
        }

        .scorecard-table th {
            background: var(--bg-secondary);
            padding: 6px 4px;
            text-align: center;
            font-size: 0.7rem;
            font-weight: 700;
            color: var(--text-secondary);
            border: 1px solid var(--border);
            min-width: 24px;
        }

        .scorecard-table td {
            padding: 6px 4px;
            text-align: center;
            font-size: 0.75rem;
            font-weight: 600;
            border: 1px solid var(--border);
            background: var(--bg-card);
            min-width: 24px;
        }

        /* Prevent input from shifting when focused */
        #scorecardPlayerInput {
            transform: none !important;
        }

        /* Remove any existing focus transforms that might cause jumping */
        input:focus {
            transform: none !important;
        }

        .scorecard-player-name {
            text-align: left !important;
            font-weight: 700 !important;
            padding-left: 8px !important;
            color: var(--text-primary);
            min-width: 70px !important;
            max-width: 70px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 0.75rem !important;
        }

        .scorecard-par {
            background: var(--bg-tertiary) !important;
            font-weight: 700 !important;
            color: var(--text-secondary);
        }


        .scorecard-content .scorecard-team-best.score-par {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
        }

        .scorecard-content .scorecard-team-best.score-bogey {
            background: #e5e7eb !important;
            color: #374151 !important;
        }

        /* Front 9 / Back 9 divider */
        .scorecard-content .scorecard-table .hole-9-divider {
            border-right: 3px solid var(--primary) !important;
        }


        /* Total column highlighting */
        .scorecard-table td:last-child,
        .scorecard-table th:last-child {
            background: var(--bg-secondary) !important;
            font-weight: 800 !important;
            border-left: 2px solid var(--primary) !important;
            min-width: 35px !important;
        }

        /* Mobile responsive improvements */
        @media (max-width: 480px) {
            /* .scorecard-content {
                padding: 12px 8px;
                overflow-x: auto;
            } */

            /* .scorecard-table {
                min-width: 100%;
                font-size: 0.7rem;
            }

            .scorecard-table th,
            .scorecard-table td {
                font-size: 0.65rem;
                padding: 4px 2px;
                min-width: 20px;
            }

            .scorecard-player-name {
                min-width: 50px !important;
                max-width: 50px;
                font-size: 0.65rem !important;
                padding-left: 4px !important;
            } */
        }





        @media (max-width: 480px) {

            .scorecard-table th,
            .scorecard-table td {
                font-size: 0.6rem;
                padding: 3px 1px;
            }

            .scorecard-player-name {
                max-width: 50px;
                font-size: 0.6rem;
            }
        }

        /* === THEME TOGGLE === */
        .theme-toggle {
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .theme-toggle:hover {
            background: var(--border);
        }

        /* === MATCHES PAGE STYLES === */
        .matches-header h3 {
            margin: 0 0 8px 0;
        }

        .matches-header p {
            margin: 0;
            color: var(--text-muted);
            margin-bottom: 16px;
        }

        .match-date-picker {
            margin-bottom: 16px;
        }

        .create-match-trigger {
            text-align: center;
            margin-bottom: 16px;
        }

        .create-match-form input[type="text"]:focus {
            /* This will be handled by JavaScript for better mobile support */
        }

        /* Enhanced modal styling for mobile */
        .modal-content {
            background: var(--bg-card);
            padding: 20px;
            border-radius: var(--radius-xl);
            width: 90%;
            max-width: 480px;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            margin: 0 auto;
            box-shadow: var(--shadow-lg);
        }

        /* Specific styling for group scoring modal */
        #groupScoringModal .modal-content,
        .modal-content {
            padding: 30px !important;
            width: 85%;
            max-width: 400px;
            margin: 0 auto;
            box-sizing: border-box;
            max-height: 80vh !important;
            overflow-y: auto !important;
            display: flex !important;
            flex-direction: column !important;
        }

        /* Ensure the form container is scrollable */
        .create-match-form,
        .player-selection-form {
            flex: 1;
            overflow-y: auto;
            max-height: calc(80vh - 120px); /* Account for header and button space */
        }

        /* Keep buttons at bottom */
        .modal-actions,
        .form-actions {
            margin-top: auto;
            padding-top: 15px;
            border-top: 1px solid var(--border-color);
            flex-shrink: 0;
        }

        .create-match-form {
            display: flex;
            flex-direction: column;
            gap: 6px;
            /* Compact layout - reduced from 8px */
        }

        .team-header {
            border-bottom: 1px solid var(--border);
            padding-bottom: 2px;
            margin-top: 6px;
            margin-bottom: 4px;
            font-size: 0.9rem;
            font-weight: 600;
        }


        /* Recent players in modal */
        .recent-players-container-modal {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-top: 6px;
        }

        .recent-players-container-modal .recent-player-btn {
            padding: 6px 10px;
            font-size: 0.75rem;
            min-width: auto;
        }

        /* Mobile-optimized recent player buttons in group scoring modal */
        #groupScoringModal .recent-player-btn {
            padding: 8px 6px;
            font-size: 13px;
            min-width: auto;
            line-height: 1.2;
            text-align: center;
        }


        #bulkCreateModal #bulkRecentT1 .recent-player-btn,
        #bulkCreateModal #bulkRecentT2 .recent-player-btn {
            padding: 8px 4px;
            font-size: 0.7rem;
            min-width: 60px;
            flex: 0 0 calc(25% - 3px);
            /* 4 buttons per row, accounting for gap */
            text-align: center;
            box-sizing: border-box;
        }

        #bulkCreateModal #bulkRecentT1,
        #bulkCreateModal #bulkRecentT2 {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 6px;
            justify-content: flex-start;
        }

        /* Add slight padding to the modal content */
        #bulkCreateModal .modal-content {
            padding: 24px 18px;
            /* Slightly more padding */
        }

        /* Bulk modal recent players container */
        #bulkCreateModal .recent-players-container-modal {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
            margin-top: 6px;
            justify-content: flex-start;
            /* Align to left */
        }

        #bulkCreateModal .team-header {
            margin-top: 20px;
        }



        #openBulkCreateBtn {
            background: #8048ff;
            color: white;
            border-color: #8b5cf6;
        }

        /* Responsive modal */
        @media (max-width: 480px) {
            .modal-content {
                width: calc(100% - 20px);
                margin: 10px;
                padding: 16px;
                max-height: calc(100vh - 40px);
            }

            .form-group {
                margin-bottom: 6px;
            }

            .form-label {
                font-size: 0.8rem;
                margin-bottom: 4px;
            }

            input[type="text"],
            input[type="number"] {
                padding: 10px 12px;
                font-size: 16px;
            }
        }

        /* === MATCH FILTER DROPDOWN === */

        .match-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            margin-bottom: 16px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: all 0.2s ease;
            position: relative;
        }

        .match-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        /* Match Info Bar */
        .match-info-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border);
        }

        .match-number {
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--text-secondary);
            background: var(--bg-primary);
            padding: 4px 8px;
            border-radius: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .bet-info {
            font-size: 0.8rem;
            color: var(--text-muted);
            font-weight: 500;

        }

        span.bet-info {

            display: inline-block;
            text-align: center;
        }



        .status-badge {
            padding: 4px 10px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 0.75rem;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .status-complete {
            background: linear-gradient(135deg, #10b981, #059669);
            color: white;
            box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
        }

        .status-in-progress {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: white;
            box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
        }

        .status-not-started {
            background: var(--bg-tertiary);
            color: var(--text-muted);
            border: 1px solid var(--border);
        }

        .delete-match-btn {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            font-size: 0.8rem;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .delete-match-btn:hover {
            background: var(--danger);
            color: white;
            transform: scale(1.1);
        }

        .match-info-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border);
        }

        /* Validation indicators */
        .validation-success {
            color: #10b981 !important;
            font-weight: 600;
        }

        .validation-error {
            color: #ef4444 !important;
            font-weight: 600;
        }

        .validation-warning {
            color: #f59e0b !important;
        }

        /* Course mismatch indicator */
        .course-mismatch-warning {
            background: #fef3c7;
            color: #92400e;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.7rem;
            margin-left: 4px;
        }

        [data-theme="dark"] .course-mismatch-warning {
            background: #451a03;
            color: #fbbf24;
        }

        /* Course Indicator */
        .course-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: linear-gradient(135deg, #eff6ff, #dbeafe);
            border-bottom: 1px solid var(--border-light);
            font-size: 0.875rem;
        }

        .course-icon {
            font-size: 1rem;
        }

        .course-name {
            font-weight: 600;
            color: #1e40af;
        }

        /* Course highlighting */
        .course-indicator.different-course .course-name {
            color: #f59e0b !important;
            font-weight: 700 !important;
        }

        .course-indicator.different-course {
            background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
        }

        /* Dark mode version */
        [data-theme="dark"] .course-indicator.different-course {
            background: linear-gradient(135deg, #451a03, #78350f) !important;
        }

        [data-theme="dark"] .course-indicator.different-course .course-name {
            color: #fbbf24 !important;
        }

        /* Dark mode course indicator */
        [data-theme="dark"] .course-indicator {
            background: linear-gradient(135deg, #1e293b, #334155);
        }

        [data-theme="dark"] .course-name {
            color: #60a5fa;
        }

        [data-theme="dark"] .course-current-name {
            color: #60a5fa;
        }

        .course-name-blue {
            color: #1e40af;
            font-weight: 600;
        }

        [data-theme="dark"] .course-name-blue {
            color: #60a5fa;
        }

        /* Teams Container */
        .teams-container {
            display: flex;
            align-items: center;
            padding: 16px;
            gap: 12px;
        }

        /* Team Cards */
        .team-card {
            flex: 1;
            text-align: center;
            padding: 16px 12px;
            border-radius: var(--radius);
            background: var(--bg-secondary);
            border: 2px solid transparent;
            transition: all 0.3s ease;
            position: relative;
        }

        .team-card.team-winner {
            background: linear-gradient(135deg, #dcfce7, #bbf7d0);
            border-color: #10b981;
            transform: scale(1.02);
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
        }

        .team-card.team-loser {
            background: var(--bg-tertiary);
            opacity: 0.8;
            transform: scale(0.98);
        }

        /* Dark mode team cards */
        [data-theme="dark"] .team-card {
            background: var(--bg-tertiary);
        }

        [data-theme="dark"] .team-card.team-winner {
            background: linear-gradient(135deg, #064e3b, #065f46);
            border-color: #10b981;
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
        }

        [data-theme="dark"] .team-card.team-loser {

            opacity: 0.7;
        }

        /* Team Names */
        .team-names {
            font-weight: 700;
            font-size: 0.9rem;
            color: var(--text-primary);
            margin-bottom: 8px;
            line-height: 1.2;
        }

        .team-header:first-of-type {
            margin-top: 0px;
            /* Remove top margin for first team header */
        }

        .team-header {
            border-bottom: 2px solid var(--border);
            padding-bottom: 4px;
            margin-top: 16px;
            /* Keep margin for subsequent headers */
        }

        /* Team Scores */
        /* Team spacing */
        .team-separator {
            height: 8px;
        }

        .team-separator td {
            border: 1px solid #e2e8f0 !important;
            background: var(--border-light) !important;
            /* Use border color for visibility */
            padding: 0 !important;
            height: 6px !important;
        }

        [data-theme="dark"] .team-separator td {
            background: var(--border-light) !important;
            border: slategrey !important;
            /* Ensure visibility in dark mode */
        }

        /* Dark mode - force remove green from team best */
        [data-theme="dark"] .scorecard-content.scorecard-team-best {
            border: 1px solid var(--border) !important;
            background: var(--bg-tertiary) !important;
            border-color: var(--border) !important;
            /* Force override */
            box-shadow: none !important;
        }

        /* Team player styling */
        .team-a-player {
            color: var(--primary) !important;
            font-weight: 600;
        }

        .team-b-player {
            color: var(--secondary) !important;
            font-weight: 600;
        }

        /* Remove ALL green styling from team best scores */
        .scorecard-content.scorecard-team-best {
            border: 1px solid var(--border) !important;
            font-weight: 800 !important;
            background: var(--bg-tertiary) !important;
            padding: 6px 3px !important;
            border-color: var(--border) !important;
            box-shadow: none !important;
        }




        .scorecard-content.scorecard-team-best.score-par {
            background: var(--bg-card) !important;
            /* Same as regular pars */
            color: var(--text-primary) !important;
            border: 1px solid var(--border) !important;
            border-radius: 0 !important;
            font-weight: 800 !important;
            /* Keep bold to show it's team best */
        }

        .scorecard-content.scorecard-team-best.score-bogey {
            background: #e5e7eb !important;
            color: #374151 !important;
            border: 1px solid #374151 !important;
            /* Square border in bogey color, no green */
        }

        .scorecard-content.scorecard-team-best.score-double {
            background: #9ca3af !important;
            color: #1f2937 !important;
            border: 1px solid #1f2937 !important;
            /* Square border in double color, no green */
        }

        /* Dark mode team best scores */
        [data-theme="dark"] .scorecard-content.scorecard-team-best.score-bogey {
            background: #64748b !important;
            color: white !important;
            border: 1px solid var(--border) !important;

        }

        [data-theme="dark"] .scorecard-content.scorecard-team-best.score-double {
            background: #374151 !important;
            color: white !important;
            border: 2px solid #6b7280 !important;
            font-weight: 800 !important;
        }

        .team-score {
            font-size: 1.8rem;
            font-weight: 800;
            margin-bottom: 8px;
            line-height: 1;
        }

        /* Dark mode team best pars */
        [data-theme="dark"] .scorecard-content.scorecard-team-best.score-par {
            background: var(--bg-card) !important;
            /* Same as regular pars */
            color: var(--text-primary) !important;
            border: 1px solid var(--border) !important;
        }





        /* Score Colors */
        .team-card .team-score {
            color: var(--text-primary);
        }

        .team-card.team-winner .team-score {
            color: #059669;
            text-shadow: 0 1px 2px rgba(5, 150, 105, 0.2);
        }


        /* Dark mode score colors */
        [data-theme="dark"] .team-card.team-winner .team-score {
            color: #34d399;
        }

        /* Team Details */
        .team-details {
            display: flex;
            justify-content: space-between;
            font-size: 0.75rem;
            color: var(--text-muted);
            font-weight: 500;
        }

        .birdies-count {
            color: #dc2626;
            font-weight: 600;
        }

        [data-theme="dark"] .birdies-count {
            color: var(--darkBirdies) !important;
        }

        /* VS Divider */
        .vs-divider {
            font-weight: 700;
            color: var(--text-muted);
            font-size: 0.9rem;
            flex-shrink: 0;
            padding: 0 4px;
        }

        /* Progress Container */
        .progress-container {
            padding: 0 16px 12px 16px;
        }

        .progress-bar {
            width: 100%;
            height: 6px;
            background: var(--border);
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 6px;
        }

        .progress-fill {
            height: 100%;
            border-radius: 3px;
            transition: width 0.5s ease;
            position: relative;
        }

        .progress-fill.complete {
            background: linear-gradient(90deg, #10b981, #059669);
            box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
        }

        .progress-fill.in-progress {
            background: linear-gradient(90deg, #f59e0b, #d97706);
            box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
        }

        .progress-text {
            text-align: center;
            font-size: 0.75rem;
            color: var(--text-muted);
            font-weight: 500;
        }

        /* Result Banner */
        .result-banner {
            margin: 0 16px 12px 16px;
            padding: 12px 16px;
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-weight: 600;
            font-size: 0.9rem;
        }

        .result-banner.winner {
            background: linear-gradient(135deg, #dcfce7, #bbf7d0);
            color: #065f46;
            border: 1px solid #10b981;
            box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
        }

        .result-banner.push {
            background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
            color: #374151;
            border: 1px solid #d1d5db;
        }

        /* Dark mode result banner */
        [data-theme="dark"] .result-banner.winner {
            background: linear-gradient(135deg, #064e3b, #065f46);
            color: #34d399;
            border-color: #10b981;
        }

        [data-theme="dark"] .result-banner.push {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            border-color: var(--border);
        }

        .result-icon {
            font-size: 1.1rem;
        }

        /* Debug Section */
        .debug-section {
            border-top: 1px solid var(--border-light);
            margin: 8px 0 0 0;
        }

        .debug-toggle {
            width: 100%;
            padding: 12px 16px;
            background: var(--bg-secondary);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.9rem;
            color: var(--text-muted);
            transition: all 0.2s ease;
        }

        .debug-toggle:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }

        .debug-toggle .debug-text {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .debug-arrow {
            transition: transform 0.2s ease;
            font-size: 0.7rem;
        }

        .debug-content {
            padding: 12px 16px;
            background: var(--bg-tertiary);
            font-size: 0.75rem;
            font-family: monospace;
        }

        .debug-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 4px;
            padding: 2px 0;
        }

        .debug-label {
            color: var(--text-muted);
            font-weight: 600;
            flex-shrink: 0;
            min-width: 80px;
            /* Fixed width for labels */
        }

        debug-value {
            color: var(--text-primary);
            text-align: right;
            flex: 1;
            /* Take remaining space */
            margin-left: 8px;
            word-break: break-word;
            font-size: 0.7rem;
            /* Slightly smaller font */
        }

        /* Winner Badge (optional enhancement) */
        .team-card.team-winner::before {
            content: "👑";
            position: absolute;
            top: -8px;
            right: -8px;
            background: #fbbf24;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border: 2px solid var(--bg-card);
        }

        /* Responsive adjustments */
        @media (max-width: 480px) {
            .teams-container {
                padding: 12px;
                gap: 8px;
            }

            .team-card {
                padding: 12px 8px;
            }

            .team-score {
                font-size: 1.5rem;
            }

            .team-names {
                font-size: 0.8rem;
            }

            .match-info-bar {
                padding: 10px 12px;
            }

            .course-indicator {
                padding: 6px 12px;
            }
        }

        .match-filter-container {
            position: relative;
            margin-bottom: 16px;
        }

        .match-filter-btn {
            width: 100%;
            padding: 12px 16px;
            background: var(--bg-card);
            border: 2px solid var(--border);
            border-radius: var(--radius);
            color: var(--text-primary);
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.2s ease;
        }

        .match-filter-btn:hover {
            border-color: var(--primary);
        }

        .match-filter-options {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-lg);
            z-index: 1000;
            margin-top: 4px;
            display: none;
            /* Changed from 'flex' to 'none' */
            max-height: 300px;
            overflow-y: auto;
        }

        .match-filter-options.open {
            display: block;
        }

        .match-filter-options.open {
            display: block;
        }

        .match-option {
            padding: 12px 16px;
            cursor: pointer;
            border-bottom: 1px solid var(--border-light);
            transition: background-color 0.15s ease;
        }

        .match-option:hover {
            background: var(--bg-tertiary);
        }

        .match-option:last-child {
            border-bottom: none;
        }

        /* === MATCH CARDS === */
        .match-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            margin-bottom: 16px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: all 0.2s ease;
        }

        .match-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .match-header {
            padding: 16px;
            background: linear-gradient(135deg, var(--secondary), var(--primary));
            color: white;
        }

        .team-vs {
            font-weight: 600;
            margin-bottom: 8px;
            text-align: center;
        }

        .match-info {
            font-size: 0.875rem;
            opacity: 0.9;
            display: flex;
            justify-content: space-between;
        }

        .match-body {
            padding: 16px;
        }

        .match-scores {
            display: flex;
            justify-content: space-between;
            margin-bottom: 16px;
        }

        .team-score {
            text-align: center;
        }

        .team-score-value {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--primary);
        }

        .team-score-label {
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        .match-result {
            background: var(--bg-tertiary);
            padding: 12px;
            border-radius: var(--radius);
            text-align: center;
            font-weight: 600;
            color: var(--success);
        }

        /* === STATUS BADGES === */
        .status-badge {
            padding: 3px 8px;
            border-radius: 10px;
            font-weight: 600;
            font-size: 10px;
        }

        .status-complete {
            background: var(--success);
            color: white;
        }

        .status-in-progress {
            background: var(--warning);
            color: white;
        }

        .status-waiting-user {
            background: var(--danger);
            color: white;
        }

        .status-partial {
            background: var(--warning);
            color: white;
        }

        .status-not-started {
            background: var(--text-muted);
            color: white;
        }

        /* === FLOATING SAVE BUTTON === */
        .floating-save {
            position: fixed;
            bottom: 70px;
            left: 50%;
            transform: translateX(-50%);
            width: calc(100% - 32px);
            max-width: 400px;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: white;
            border: none;
            font-size: 1.125rem;
            font-weight: 600;
            padding: 16px;
            border-radius: var(--radius-lg);
            cursor: pointer;
            box-shadow: var(--shadow-lg);
            transition: all 0.2s ease;
            z-index: 99;
        }

        .floating-save:hover {
            transform: translateX(-50%) translateY(-2px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }

        /* === TOAST NOTIFICATION === */
        .toast {
            position: fixed;
            bottom: 120px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--bg-card);
            color: var(--text-primary);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 16px 20px;
            box-shadow: var(--shadow-lg);
            z-index: 1001;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            max-width: 300px;
            min-width: 200px;
            width: auto;
            text-align: center;
        }

        .toast.show {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(-10px);
        }

        /* 🚀 SLIDE LEFT ANIMATION FOR AUTO-ADVANCE TOAST - mimics swipe gesture */
        .toast.slide-left {
            animation: slideLeftAndFade 1.0s linear forwards;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            font-weight: 600;
            text-align: center;
            line-height: 1.4;
            padding: 18px 24px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px rgba(16, 185, 129, 0.3);
        }

        @keyframes slideLeftAndFade {
            0% {
                opacity: 1;
                visibility: visible;
                transform: translateX(-50%) translateY(-10px);
            }
            50% {
                opacity: 1;
                transform: translateX(-150px) translateY(-10px);
            }
            80% {
                opacity: 0.8;
                transform: translateX(-250px) translateY(-10px);
            }
            100% {
                opacity: 0;
                visibility: hidden;
                transform: translateX(-350px) translateY(-10px);
            }
        }

        /* ============================================
           PLAYER SELECTION DROPDOWN STYLES (Option 3)
           ============================================ */

        /* Player input container styles */
        .player-input-container {
            position: relative;
            flex: 1;
        }

        #createMatchModal .match-player-input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            background-color: var(--bg-card) !important;
            color: var(--text-primary) !important;
        }


        #createMatchModal .match-player-input.valid-player {
            background-color: #f0f9ff;
            border-color: #10b981;
        }

        /* Next input suggestion highlighting */
        #createMatchModal .match-player-input.next-suggested {
            border-color: #10b981;
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
            animation: pulse 2s infinite;
            position: relative;
        }

        #createMatchModal .match-player-input.next-suggested::placeholder {
            color: #10b981;
            opacity: 0.7;
        }

        @keyframes pulse {
            0%,
            100% {
                box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
            }
            50% {
                box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.2);
            }
        }

        /* Remove focus-triggered dropdown styling on mobile */
        @media (max-width: 768px) {
            #createMatchModal .match-player-input:focus {
                /* Don't force dropdown to show on focus */
                -webkit-appearance: none;
            }
        }

        /* Smoother transition for checking state */
        #createMatchModal .match-player-input.needs-validation {
            transition: all 0.2s ease;
            border-color: #fbbf24;
            background: #fffbeb;
        }

        /* Has selection state */
        #createMatchModal .match-player-input.valid-player {
            transition: all 0.2s ease;
            background-color: #f0fdf4;
            border-color: #10b981;
        }

        /* Dropdown styles - Mobile Optimized */
        .match-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: white;
            border: 1px solid #ddd;
            border-top: none;
            border-radius: 0 0 8px 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            max-height: 200px;
            overflow-y: auto;
            z-index: 1002; /* Higher than modal content */
            display: none;

            /* 📱 Mobile Touch Scrolling Optimizations */
            -webkit-overflow-scrolling: touch;  /* Smooth iOS scrolling */
            overscroll-behavior: contain;       /* Prevent parent scroll */
            scroll-behavior: smooth;            /* Smooth scrolling */
        }

        .match-dropdown.show {
            display: block;
        }

        .dropdown-item {
            padding: 12px 14px;
            cursor: pointer;
            border-bottom: 1px solid #f0f0f0;
            font-size: 16px;  /* 📱 Prevents iOS auto-zoom */
            min-height: 44px; /* 📱 Apple's minimum touch target */
            display: flex;
            align-items: center;
            transition: background-color 0.2s ease;
        }

        .dropdown-item:hover {
            background-color: #f5f5f5;
        }

        /* 📱 Enhanced Mobile Touch Targets */
        @media (max-width: 768px) {
            .dropdown-item {
                padding: 14px 16px; /* Bigger touch targets on mobile */
                font-size: 16px;     /* Critical for iOS zoom prevention */
                min-height: 48px;    /* Extra space for thumbs */
            }

            .match-dropdown {
                max-height: 50vh;    /* Use viewport height on mobile */
                border-radius: 0 0 12px 12px; /* Larger radius for mobile */
            }
        }

        .dropdown-item.selected {
            background-color: #e0f7fa;
        }

        /* 📱 Prevent body scroll when dropdown is open on mobile */
        .dropdown-open {
            overflow: hidden !important;
            position: fixed !important;
            width: 100% !important;
            height: 100% !important;
        }

        /* 📱 Mobile dropdown optimizations */
        @media (max-width: 768px) {
            .dropdown-open {
                /* Prevent rubber band scrolling on iOS */
                -webkit-overflow-scrolling: auto;
            }
        }

        /* Section headers in dropdown */
        .dropdown-section-header {
            padding: 6px 12px;
            background-color: #f8f8f8;
            font-size: 12px;
            font-weight: 600;
            color: #666;
            border-bottom: 1px solid #e0e0e0;
            text-transform: uppercase;
        }

        /* Create new option styling */
        .create-option {
            padding: 10px 12px;
            cursor: pointer;
            background-color: #f0fdf4;
            color: #10b981;
            font-weight: 500;
            border-top: 2px solid #10b981;
        }

        .create-option:hover {
            background-color: #dcfce7;
        }

        /* Similar players section */
        .similar-section {
            margin: 20px 0;
            padding: 15px;
            background-color: #fffbeb;
            border: 1px solid #fbbf24;
            border-radius: 6px;
        }

        .similar-player-option {
            padding: 6px 10px;
            margin: 3px 0;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .similar-player-option:hover {
            background-color: #f0f9ff;
            border-color: #3b82f6;
        }

        .similarity-badge {
            background-color: #3b82f6;
            color: white;
            padding: 2px 6px;
            border-radius: 12px;
            font-size: 12px;
        }

        /* Player row styles */
        .player-row {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            gap: 8px;
        }

        .player-row label {
            min-width: 80px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        /* Ensure Player 3 specifically matches Player 1 & 2 alignment when visible */
        .player-3-field[style*="display: block"] {
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
        }

        /* Force Player 3 to be hidden in 2v2 mode */
        .player-3-field[style*="display: none"] {
            display: none !important;
        }

        .player-3-field label {
            min-width: 80px !important;
            font-weight: 500 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
        }

        .player-3-field .player-input-container {
            flex: 1 !important;
        }

        /* Similar Players Section - Compact Layout */
        .similar-section {
            background: var(--bg-secondary);
            padding: 12px;
            margin: 8px 0;
            border-radius: 8px;
            border: 1px solid var(--border);
        }

        .similar-header {
            margin-bottom: 8px;
        }

        .similar-header h4 {
            font-size: 0.9rem;
            font-weight: 600;
            margin: 0 0 4px 0;
            color: var(--text-primary);
        }

        .similar-header span {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        /* Buttons for similar players */
        .create-anyway-btn {
            background-color: #10b981;
            color: white;
            border: none;
            padding: 6px 12px;
            font-size: 0.8rem;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 8px;
        }

        .create-anyway-btn:hover {
            background-color: #059669;
        }

        .cancel-btn {
            background-color: #6b7280;
            color: white;
            border: none;
            padding: 6px 12px;
            font-size: 0.8rem;
            border-radius: 4px;
            cursor: pointer;
        }

        .cancel-btn:hover {
            background-color: #4b5563;
        }

        /* 📱 Mobile optimizations for similar player buttons */
        @media (max-width: 768px) {
            .create-anyway-btn,
            .cancel-btn {
                display: block;
                width: 100%;
                margin: 8px 0;
                padding: 12px 16px;
                font-size: 16px;
                min-height: 44px;
                border-radius: 8px;
            }

            .create-anyway-btn {
                margin-bottom: 8px;
                margin-right: 0;
            }

            .cancel-btn {
                margin-top: 0;
            }
        }

        /* 📱 For very small screens - ensure proper stacking */
        @media (max-width: 480px) {
            .create-anyway-btn,
            .cancel-btn {
                margin: 6px 0;
                padding: 14px 20px;
                font-size: 16px;
                border-radius: 10px;
            }
        }

        /* === MODAL STYLES === */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
        }

        .modal.modal-show {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background: var(--bg-card);
            padding: 24px;
            border-radius: var(--radius-xl);
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            box-shadow: var(--shadow-lg);
        }

        .close-btn {
            position: absolute;
            top: 16px;
            right: 16px;
            background: var(--bg-tertiary);
            border: none;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--text-muted);
            transition: all 0.2s ease;
        }

        .close-btn:hover {
            background: var(--border);
            color: var(--text-primary);
        }

        /* === DARK MODE ENHANCEMENTS === */
        [data-theme="dark"] .score-icon-label {
            color: var(--text-secondary);
            font-weight: 600;
        }

        [data-theme="dark"] .score-icon-badge {
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        [data-theme="dark"] .eagles {
            background: linear-gradient(135deg, #f59e0b, #f97316);
        }

        [data-theme="dark"] .birdies {
            background: linear-gradient(135deg, #ef4444, var(--darkBirdies));
        }

        [data-theme="dark"] .pars {
            background: linear-gradient(135deg, var(--darkEven), #16a34a);
        }

        [data-theme="dark"] .bogeys {
            background: linear-gradient(135deg, #94a3b8, #64748b);
        }

        [data-theme="dark"] .doubles {
            background: linear-gradient(135deg, #6b7280, #4b5563);
        }

        [data-theme="dark"] .modal-content {
            background: var(--bg-card);
            color: var(--text-primary);
        }

        [data-theme="dark"] .status-badge.status-complete {
            background: var(--success);
            color: white;
        }

        [data-theme="dark"] .status-badge.status-in-progress {
            background: var(--warning);
            color: white;
        }

        [data-theme="dark"] .status-badge.status-waiting-user {
            background: var(--danger);
            color: white;
        }

        [data-theme="dark"] .status-badge.status-partial {
            background: var(--warning);
            color: white;
        }

        [data-theme="dark"] .status-badge.status-not-started {
            background: var(--text-muted);
            color: white;
        }

        /* === RESPONSIVE === */
        @media (max-width: 480px) {
            .container {
                padding: 0;
            }



            .section {
                padding: 16px 12px 40px;
            }



            .score-icons {
                gap: 6px;
                font-size: 0.65rem;
            }

            .score-icon-badge {
                width: 20px;
                height: 20px;
                font-size: 0.65rem;
            }

            .score-icon-label {
                font-size: 0.7rem;
            }
        }

        /* === Leaderboard === */
        /* Leaderboard styling */
        .leaderboard-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow);
        }

        .leaderboard-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.875rem;
        }

        .leaderboard-table th {
            background: var(--bg-secondary);
            padding: 12px 8px;
            text-align: left;
            font-weight: 600;
            color: var(--text-secondary);
            border-bottom: 2px solid var(--border);
        }

        .leaderboard-table td {
            padding: 12px 8px;
            border-bottom: 1px solid var(--border-light);
        }

        .leaderboard-row:hover {
            background: var(--bg-tertiary);
        }

        /* Leaderboard Container */
        .leaderboard-container {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow);
            /* margin: 0px !important; */
            /* Reduce from default margins */
            padding: 2px !important;
            /* Reduce internal padding */
        }

        /* Leaderboard page individual scorecard birdie styling */
        .leaderboard-container .score-birdie {
            background: #ef4444;
            color: white !important;
            font-weight: 700 !important;
            border-radius: 50% !important;
            padding: 2px 6px !important;
            font-size: 10px !important;


        }

        [data-theme="dark"] .leaderboard-container .score-birdie {
            background: var(--darkBirdies) !important;

        }







        .leaderboard-container .score-eagle {
            background: #f59e0b !important;
            color: white !important;
            font-weight: 700;
        }

        .leaderboard-container .score-bogey {
            background: #e5e7eb !important;
            color: #374151 !important;
            font-weight: 700;
        }

        .leaderboard-container .score-double {
            background: #9ca3af !important;
            color: #1f2937 !important;
            font-weight: 700;
        }

        /* Dark mode leaderboard scorecard styling */
        [data-theme="dark"] .leaderboard-container .score-bogey {
            background: #64748b !important;
            color: white !important;
        }

        [data-theme="dark"] .leaderboard-container .score-double {
            background: #374151 !important;
            color: white !important;
        }

        /* Course Context Bar */
        .course-context-bar {
            border-bottom: 1px solid var(--border);
            background: var(--bg-secondary);
        }

        .course-context-header {
            padding: 10px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        .course-context-header:hover {
            background: var(--bg-hover);
        }

        .course-context-info {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .course-icon {
            font-size: 0.875rem;
        }

        .course-current-name {
            font-weight: 500;
            color: #1e40af;
            font-size: 0.875rem;
        }

        .course-context-toggle {
            display: flex;
            align-items: center;
        }

        .toggle-arrow {
            color: var(--text-muted);
            font-size: 0.875rem;
            transition: transform 0.2s ease;
        }

        .course-context-content {
            display: none;
            border-top: 1px solid var(--border);
            background: var(--bg-card);
            opacity: 0;
            transform: translateY(-5px);
            transition: opacity 0.15s ease-out, transform 0.15s ease-out;
        }

        .course-context-content.show {
            opacity: 1;
            transform: translateY(0);
        }

        /* Removed slideDown animation - using transitions instead for better performance */

        /* Scorecard Context Bars */
        .scorecard-context-bar {
            border-bottom: 1px solid var(--border);
            background: var(--bg-secondary);
            margin-bottom: 8px;
        }

        .scorecard-context-header {
            padding: 10px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        .scorecard-context-header:hover {
            background: var(--bg-hover);
        }

        .scorecard-context-info {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .context-icon {
            font-size: 0.875rem;
        }

        .context-current-value {
            font-weight: 500;
            color: var(--text-primary);
            font-size: 0.875rem;
        }

        .context-toggle {
            display: flex;
            align-items: center;
        }

        .scorecard-context-content {
            display: none;
            border-top: 1px solid var(--border);
            background: var(--bg-card);
            opacity: 0;
            transform: translateY(-5px);
            transition: opacity 0.15s ease-out, transform 0.15s ease-out;
        }

        .scorecard-context-content.show {
            opacity: 1;
            transform: translateY(0);
        }

        .scorecard-context-dropdown {
            padding: 16px;
        }

        .course-context-dropdown {
            padding: 16px;
        }

        .course-context-dropdown select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            background: var(--bg-card);
            color: var(--text-primary);
            font-size: 0.875rem;
        }

        /* Create Match Context Bar (similar to scorecard context bar) */
        .create-match-context-bar {
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--bg-secondary);
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .create-match-context-header {
            padding: 10px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            transition: background-color 0.15s ease;
        }

        .create-match-context-header:hover {
            background: var(--bg-tertiary);
        }

        .create-match-context-info {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .create-match-context-content {
            display: none;
            border-top: 1px solid var(--border);
            background: var(--bg-card);
            opacity: 0;
            transform: translateY(-5px);
            transition: opacity 0.15s ease-out, transform 0.15s ease-out;
            padding: 16px;
        }

        .create-match-context-content.show {
            opacity: 1;
            transform: translateY(0);
        }

        .progress-tracker {
            padding: 16px;
            border-bottom: 1px solid var(--border);
            background: var(--bg-tertiary);
        }


        .progress-header {
            margin-bottom: 8px;
            /* Increase spacing */
        }

        .progress-title {
            font-weight: 600;
            color: var(--text-primary);
            font-size: 0.9rem;
            margin-bottom: 4px;
            /* Add space between title and bar */
            display: block;
            /* Make it full width */
        }

        .progress-bar-container {
            width: 100%;
            height: 8px;
            background: var(--border);
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 8px;
        }

        .progress-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            border-radius: 4px;
            transition: width 0.5s ease;
        }

        .waiting-players {
            font-size: 0.8rem;
            color: var(--text-muted);
            font-style: italic;
        }

        .all-complete {
            font-size: 0.8rem;
            color: var(--success);
            font-weight: 600;
        }

        /* Tab Navigation */
        .leaderboard-tabs {
            display: flex;
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 4px;
            margin-bottom: 12px;
            border: 1px solid var(--border);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .leaderboard-tab {
            flex: 1;
            padding: 12px 16px;
            border: none;
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
            font-weight: 500;
            font-size: 0.9rem;
            transition: all 0.2s ease;
            border-radius: 8px;
            text-align: center;
        }

        .leaderboard-tab:hover {
            color: var(--text-primary);
            background: rgba(255, 255, 255, 0.1);
        }

        .leaderboard-tab.active {
            background: var(--primary);
            color: white;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
        }

        .leaderboard-tab.active:hover {
            background: var(--primary);
            color: white;
        }

        /* Tab Content */
        .tab-content {
            padding: 16px;
        }

        /* Scorecards Tab */
        .scorecards-container h4 {
            color: var(--text-primary);
            margin-bottom: 16px;
        }

        .leaderboard-container .scorecard-row {
            border: 1px solid var(--border);
            border-radius: var(--radius);
            margin-bottom: 8px;
            overflow: hidden;
            background: var(--bg-card);
        }

        .leaderboard-container .scorecard-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            cursor: pointer;
            background: var(--bg-secondary);
            transition: all 0.2s ease;

        }

        .leaderboard-container .scorecard-header:hover {
            background: var(--bg-tertiary);
        }

        .leaderboard-container .scorecard-detail {
            padding: 16px;
            background: var(--bg-tertiary);
            border-top: 1px solid var(--border);
        }

        .player-info {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .rank {
            font-weight: 700;
            color: var(--text-secondary);
            min-width: 30px;
            text-align: center;
        }

        .player-avatar-small {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--bg-tertiary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 11px;
            color: var(--text-primary);
            border: 1px solid var(--border);
            font-size: 0.75rem;
            color: white;
            flex-shrink: 0;
        }

        .player-name {
            font-weight: 600;
            color: var(--text-primary);
        }

        .score-info {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Remove gradient and add proper colors - REPLACE existing .score-display rules */
        .leaderboard-container .score-display {
            font-weight: 700;
            font-size: 1.1rem;
            /* Remove any background/gradient styles */
            background: none !important;
            -webkit-background-clip: unset !important;
            -webkit-text-fill-color: unset !important;
            background-clip: unset !important;
        }

        .leaderboard-container .score-display.score-under-par {
            color: #ef4444 !important;
            /* Red for under par (good) */
        }

        .leaderboard-container .score-display.score-even-par {
            color: #22c55e !important;
            /* Green for even par */
        }

        .leaderboard-container .score-display.score-over-par {
            color: var(--text-primary) !important;
            /* Normal color for over par */
        }

        .leaderboard-container .score-display.score-incomplete {
            color: var(--text-muted) !important;
            /* Muted for incomplete */
        }

        /* Dark mode adjustments */
        [data-theme="dark"] .leaderboard-container .score-display.score-under-par {
            color: var(--darkBirdies) !important;
        }

        [data-theme="dark"] .leaderboard-container .score-display.score-even-par {
            color: var(--darkEven) !important;
        }

        [data-theme="dark"] .leaderboard-container .score-display.score-over-par {
            color: var(--text-secondary) !important;
        }

        .toggle-arrow {
            color: var(--text-muted);
            font-size: 0.8rem;
            transition: transform 0.2s ease;
        }

        .scorecard-detail {
            padding: 16px;
            background: var(--bg-tertiary);
            border-top: 1px solid var(--border);
        }


        .label-cell {

            font-weight: 600;
            padding-left: 8px !important;
            min-width: 60px !important;
        }

        .par-cell {
            background: var(--bg-tertiary) !important;
            color: var(--text-secondary);
            font-weight: 600;
            font-size: 11px !important;
        }

        .total-cell {
            background: var(--bg-secondary) !important;
            font-weight: 700 !important;
            border-left: 2px solid var(--primary) !important;
        }

        /* Enhanced team player names styling */
        .label-cell.team-a-player,
        .label-cell.team-b-player {
            font-weight: 700 !important;
            font-size: 0.9rem !important;
            padding: 6px 8px !important;

            letter-spacing: 0.5px;
        }

        /* Team A players - primary color */
        .label-cell.team-a-player {
            color: var(--lightteamA) !important;
        }

        /* Team B players - secondary color */
        .label-cell.team-b-player {
            color: var(--lightteamB) !important;
        }

        /* Team best rows - make them stand out more */
        .label-cell.team-best {
            font-weight: 700 !important;
            font-size: 13px !important;
            letter-spacing: normal;
            padding: 2px 4px !important;
            background: var(--bg-tertiary) !important;
        }



        /* Make the first column wider to prevent text wrapping */
        .player-scorecard-table th:first-child,
        .player-scorecard-table td:first-child {
            width: 80px !important;
            /* Increase from default */
            min-width: 80px !important;
            white-space: nowrap !important;
            /* Prevent wrapping */
        }

        /* Or use shorter text for team best rows */
        .label-cell.team-best {

            line-height: 1.1 !important;
            white-space: nowrap !important;
        }


        .scorecard-content.scorecard-team-best.score-birdie {
            background: #fee2e2 !important;
            color: #dc2626 !important;
            border-radius: unset;
        }

        [data-theme="dark"] .scorecard-content.scorecard-team-best.score-birdie {
            background: var(--darkBirdies) !important;
            color: white !important;
            border-radius: unset !important;
        }

        [data-theme="dark"] .scorecard-content.scorecard-team-best.score-birdie {
            background: var(--darkBirdies);
            color: white !important;
            border-radius: 50%;
        }

        .scorecard-content.scorecard-team-best.score-eagle {
            background: #f59e0b !important;
            color: white !important;
            border: 1px solid #fbbf24 !important;
            border-radius: 50%;
        }

        /* Dark mode enhancements */
        [data-theme="dark"] .label-cell.team-a-player {
            color: var(--darkteamA) !important;
        }

        [data-theme="dark"] .label-cell.team-b-player {
            color: var(--darkteamB) !important;
        }

        [data-theme="dark"] .label-cell.team-best {
            background: var(--bg-secondary) !important;

        }

        .leaderboard-container .player-scorecard-table {
            width: 100% !important;
            table-layout: auto !important;
            /* Let table size naturally */
            overflow-x: visible !important;
            /* Don't clip horizontally */
        }

        .leaderboard-container .nine-section {
            overflow-x: visible !important;
            width: 100% !important;
            max-width: none !important;
        }

        .leaderboard-container .scorecard-detail {
            overflow-x: visible !important;
            width: 100% !important;

            max-width: none !important;
            padding: 8px !important;
        }

        .leaderboard-container .player-scorecard-table th,
        .leaderboard-container .player-scorecard-table td {
            font-size: 0.7rem !important;

            padding: 4px 2px !important;

            min-width: 24px !important;

        }




        .leaderboard-container .player-scorecard-table .score-par {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
        }

        .leaderboard-container .player-scorecard-table .score-bogey {
            background: #e5e7eb !important;
            color: #374151 !important;
            font-weight: 700;
        }

        .leaderboard-container .player-scorecard-table .score-double {
            background: #9ca3af !important;
            color: #1f2937 !important;
            font-weight: 700;
        }



        [data-theme="dark"] .leaderboard-container .player-scorecard-table .score-bogey {
            background: #64748b !important;
            color: white !important;
        }

        [data-theme="dark"] .leaderboard-container .player-scorecard-table .score-double {
            background: #374151 !important;
            color: white !important;
        }

        /* Hole 9 divider ONLY for leaderboard player scorecards */
        .leaderboard-container .player-scorecard-table .hole-9-divider {
            border-right: 3px solid var(--primary) !important;
        }

        /* Earnings Tab */
        .earnings-container h4 {
            color: var(--text-primary);
            margin-bottom: 16px;
        }

        .earnings-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.875rem;
            table-layout: fixed;
        }

        .earnings-table th {
            background: var(--bg-secondary);
            padding: 12px 8px;
            text-align: left;
            font-weight: 600;
            color: var(--text-secondary);
            border-bottom: 1px solid var(--border-light);
            vertical-align: middle;
        }

        .earnings-table td {
            padding: 12px 8px;
            border-bottom: 1px solid var(--border-light);
            vertical-align: middle;
        }

        .earnings-table tr:hover {
            background: var(--bg-tertiary);
        }

        .earnings-table th:nth-child(1),
        .earnings-table td:nth-child(1) {
            width: 60px;
            /* Rank column */
            text-align: center;
        }

        .earnings-table th:nth-child(2),
        .earnings-table td:nth-child(2) {
            width: auto;
            /* Player name - takes remaining space */
            text-align: left;
        }

        .earnings-table th:nth-child(3),
        .earnings-table td:nth-child(3) {
            width: 80px;
            /* Earnings column */
            text-align: right;
        }

        .earnings-table th:nth-child(4),
        .earnings-table td:nth-child(4) {
            width: 70px;
            /* Record column */
            text-align: center;
        }

        /* Fix player cell alignment specifically */
        .earnings-table .player-cell {
            display: table-cell !important;
            /* Ensure it acts like a normal table cell */
            text-align: left !important;
            padding: 12px 8px !important;
            vertical-align: middle !important;
        }

        /* Remove any flex or special formatting that might offset alignment */
        .earnings-table .player-cell * {
            display: inline !important;
            /* Make any child elements inline */
            margin: 0 !important;
            padding: 0 !important;
        }

        /* Ensure the player name text aligns properly */
        .earnings-table .player-name {
            font-weight: 600;
            color: var(--text-primary);
            /* Remove any special positioning */
        }

        /* Force consistent borders */
        .earnings-table td {
            border-bottom: 1px solid var(--border-light) !important;
        }

        /* Rank styling */
        .rank-cell {
            font-weight: 700;
            text-align: center;
            width: 50px;
        }

        .player-cell {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .earnings-cell {
            font-weight: 700;
            text-align: right;
        }


        .rank-first {
            color: #fbbf24;
        }

        .rank-second {
            color: #9ca3af;
        }

        .rank-third {
            color: #f97316;
        }



        .player-avatar-small {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--bg-tertiary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 11px;
            color: var(--text-primary);
            border: 1px solid var(--border);
            font-size: 0.75rem;
            color: white;
            flex-shrink: 0;
        }

        .player-name {
            font-weight: 600;
            color: var(--text-primary);
        }



        .positive-earnings {
            color: var(--success);
        }

        .negative-earnings {
            color: var(--danger);
        }

        .zero-earnings {
            color: var(--text-muted);
        }

        /* Other cells */
        .matches-cell,
        .percentage-cell,
        .birdies-cell {
            text-align: center;
            font-weight: 500;
        }

        /* Individual leaderboard score coloring */
        .score-under-par {
            color: #ef4444 !important;
            /* Red for under par (good) */
            font-weight: 700;
        }

        .score-even-par {
            color: #10b981 !important;
            /* Green for even par */
            font-weight: 700;
        }

        .score-over-par {
            color: #090909;

            font-weight: 600;
        }

        [data-theme="dark"] .score-over-par {
            color: #ffffff !important;
            /* Dark mode under par */
        }

        .score-incomplete {
            color: var(--text-muted) !important;
            /* Gray for incomplete */
            font-weight: 500;
        }







        /* Muted for incomplete */

        /* Dark mode score colors */
        [data-theme="dark"] .score-over-par {
            color: var(--text-secondary);
        }

        /* Birdies count in player info */
        .birdies-count {
            font-size: 0.75rem;


        }

        /* Stacked nine sections */
        .nine-section {
            margin-bottom: 16px;
        }

        .nine-section:last-child {
            margin-bottom: 0;
        }

        /* Player info with birdies */
        .player-info {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* NEW scorecard cell styling - circles and squares */
        .leaderboard-container .player-scorecard-table td {
            position: relative;
            padding: 6px 4px;
            text-align: center;
            border: 1px solid var(--border);
            min-width: 28px;
            font-weight: 600;
        }



        /* Square styling for bogeys and doubles */
        .leaderboard-container .player-scorecard-table td.square {
            border-radius: 0;
            border: 2px solid currentColor !important;
        }

        /* Par cells - no special styling */
        .leaderboard-container .player-scorecard-table td.none {
            border: 1px solid var(--border) !important;
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
        }


        /* Bogey colors */
        .leaderboard-container .player-scorecard-table .score-bogey.square {
            background: #e5e7eb !important;
            color: #374151 !important;
            border-color: #374151 !important;
        }

        /* Double+ colors */
        .leaderboard-container .player-scorecard-table .score-double.square {
            background: #9ca3af !important;
            color: #1f2937 !important;
            border-color: #1f2937 !important;
            outline: 2px solid rgb(31, 41, 55);
            outline-offset: -6px;
        }


        /* Dark mode adjustments */
        [data-theme="dark"] .leaderboard-container .player-scorecard-table .score-bogey.square {
            background: #64748b !important;
            color: white !important;
            border-color: white !important;
        }

        [data-theme="dark"] .leaderboard-container .player-scorecard-table .score-double.square {
            background: #374151 !important;
            color: white !important;
            border-color: white !important;
            outline: 2px solid white !important;
            outline-offset: -6px;
        }

        /* Par cells - completely normal styling, no circle */
        .leaderboard-container .player-scorecard-table td.score-par,
        .leaderboard-container .player-scorecard-table td.none {
            border: 1px solid var(--border) !important;
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
            border-radius: 0 !important;
            /* Remove any border-radius */
        }

        /* Summary row styling */
        .leaderboard-container .summary-row {
            border-top: 2px solid var(--border);
        }

        .leaderboard-container .summary-cell {
            padding: 8px 12px !important;
            background: var(--bg-secondary) !important;
            /* border: none !important; removed for light mode*/
        }

        .leaderboard-container .summary-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
            color: var(--text-primary);
        }

        .leaderboard-container .summary-left {
            color: var(--text-primary);
        }

        .leaderboard-container .summary-right {
            color: var(--text-muted);
            font-size: 0.9em;
        }

        .leaderboard-container .total-row .summary-cell {
            background: var(--bg-tertiary) !important;

        }

        .total-row .summary-content {
            color: var(--text-primary);
            font-weight: 900 !important;

        }



        /* Mobile responsive */
        @media (max-width: 480px) {
            .leaderboard-table {
                font-size: 0.75rem;
            }

            .leaderboard-table th,
            .leaderboard-table td {
                padding: 8px 4px;
            }

            .player-name {
                font-size: 0.8rem;
            }
        }

        /* Better dark mode scorecard visibility */
        [data-theme="dark"] #scorecardTable input[type="number"],
        [data-theme="dark"] #scorecardTable input[type="tel"] {
            background: var(--bg-secondary);
            color: var(--text-primary);
            border-color: var(--border);
        }

        [data-theme="dark"] #scorecardTable .scorecard-par {
            background: var(--bg-tertiary) !important;
            color: var(--text-secondary) !important;
            font-weight: 700;
        }

        [data-theme="dark"] #scorecardTable th,
        [data-theme="dark"] #scorecardTable td {
            border-color: var(--border);
            background: var(--bg-card);
        }

        [data-theme="dark"] #scorecardTable th {
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-weight: 700;
        }

        /* Better contrast for score colors in dark mode */
        [data-theme="dark"] .score-eagle {
            background: #f59e0b !important;
            color: white !important;
            border: 2px solid #fbbf24 !important;
        }



        [data-theme="dark"] .score-bogey {
            background: #64748b !important;
            color: white !important;
            border: 2px solid #94a3b8 !important;
        }

        [data-theme="dark"] .score-double {
            background: #374151 !important;
            color: white !important;
            border: 2px solid #6b7280 !important;
        }



        .scorecard-content.score-par {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
            border-radius: 0 !important;
            border: 1px solid var(--border) !important;
            /* Normal cell border */
        }

        .scorecard-content.score-bogey {
            background: #e5e7eb !important;
            color: #374151 !important;
            border-radius: 0 !important;
            border: 1px solid var(--border) !important;
            /* Changed from 2px colored border to normal border */
        }

        .scorecard-content.score-double {
            background: #9ca3af !important;
            color: #1f2937 !important;
            border-radius: 0 !important;
            border: 1px solid var(--border) !important;
            /* Changed from 2px colored border to normal border */
        }

        /* Dark mode match scorecard scores */
        [data-theme="dark"] .scorecard-content.score-bogey {
            background: #64748b !important;
            color: white !important;
            border: 1px solid var(--border) !important;
            /* Changed from 2px white border to normal border */
        }

        [data-theme="dark"] .scorecard-content.score-double {
            background: #374151 !important;
            /* Darker gray */
            color: white !important;
            border: 2px solid #71757d !important;
            /* Lighter gray border for contrast */
            font-weight: 800 !important;
        }


        /* Force autocomplete dropdown below input */
        input[list] {
            position: relative;
        }

        /* Hide default datalist styling that might show horizontally */
        datalist {
            position: absolute;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            max-height: 200px;
            overflow-y: auto;
            width: 100%;
            z-index: 1000;
            box-shadow: var(--shadow);
            top: 100%;
            left: 0;
        }

        /* Force mobile browsers to show dropdown below */
        @media (max-width: 768px) {
            input[list] {
                -webkit-appearance: none;
                appearance: none;
            }

            /* Ensure dropdown appears below keyboard */
            input:focus {
                transform: translateY(-20px);
                /* Shift input up slightly when focused */
                transition: transform 0.2s ease;
            }
        }



        /* Allow full scroll of scorecard */
        #scorecardTable {
            margin-bottom: 120px;
            /* Extra space for moved navigation */
        }

        @media (max-width: 480px) {
            .date-course-row {
                flex-direction: column !important;
                gap: 8px !important;
            }

            .date-course-row div:last-child>div {
                flex-direction: column !important;
                gap: 8px !important;
                align-items: stretch !important;
            }

            .date-course-row button {
                padding: 14px 16px !important;
                font-size: 0.9rem !important;
            }
        }

        /* Better dark mode borders for match scorecard tables */
        [data-theme="dark"] .player-scorecard-table th,
        [data-theme="dark"] .player-scorecard-table td {
            border-color: var(--border) !important;
        }

        [data-theme="dark"] .player-scorecard-table {
            border-collapse: separate;
            border-spacing: 1px;
        }

        /* Stronger borders for dark mode */
        [data-theme="dark"] .player-scorecard-table th,
        [data-theme="dark"] .player-scorecard-table td {
            border: 1px solid #475569 !important;
            /* Lighter than var(--border) */
        }

        /* Even stronger for table structure */
        [data-theme="dark"] .player-scorecard-table thead tr {
            border-bottom: 2px solid #64748b !important;
        }


        .player-scorecard-table colgroup col:first-child {
            width: 15% !important;
            /* Player/Par column */
        }

        .player-scorecard-table colgroup col:not(:first-child) {
            width: calc(85% / 9) !important;
            /* Divide remaining space among 9 hole columns */
        }

        /* Restore essential table styling */
        .player-scorecard-table {
            width: 100%;
            border-collapse: separate !important;
            border-spacing: 1px !important;
            font-size: 0.75rem;
            font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
        }

        .player-scorecard-table th,
        .player-scorecard-table td {
            padding: 6px 3px;
            text-align: center;
            border: 1px solid var(--border);
            min-width: 26px;
        }

        .player-scorecard-table th {
            background: var(--bg-secondary);
            font-size: 11px !important;
            font-weight: 600;
            color: var(--text-secondary);
        }

        /* Dark mode table borders */
        [data-theme="dark"] .player-scorecard-table th,
        [data-theme="dark"] .player-scorecard-table td {
            border-color: #475569;
        }


        .scorecard-content.score-birdie {
            border-radius: 50%;
            background: transparent;
            color: #dc2626;
            font-weight: 900;
            border-radius: 50%;
            font-size: 11px;
            border: 2px solid #dc2626;
        }

        [data-theme="dark"] .scorecard-content.score-birdie {
            background: transparent;
            color: white !important;
            border: 2px solid var(--darkBirdies) !important;
            font-weight: 900 !important;
            font-size: 11px !important;
        }

        .scorecard-content.score-eagle {
            background: #f59e0b !important;
            color: white !important;
            border: 1px solid #fbbf24 !important;
            border-radius: 50%;
        }

        .scorecard-content.score-bogey {
            background: #e5e7eb;
            color: #374151;
            font-weight: 700;
        }

        .scorecard-content.score-double {
            background: #9ca3af;
            color: #1f2937;
            font-weight: 700;
        }

        /* Dark mode score colors */
        [data-theme="dark"] .scorecard-content.score-bogey {
            background: #64748b;
            color: white;
        }



        /* Settlement summary styling */
        .settlement-summary {
            margin-top: 24px;
            padding: 16px 16px 10px 16px;
            background: var(--bg-secondary);
            border-radius: var(--radius);
            border: 1px solid var(--border);
        }

        .settlement-header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            margin-bottom: 12px;
            border-bottom: 1px solid var(--border);
        }

        .settlement-header h4 {
            margin: 0;
            color: var(--text-primary);
            text-align: center !important;
            width: 100% !important;
        }


        .settlement-summary .match-progress {
            font-size: 0.875rem;
            color: var(--text-muted);
            text-align: center !important;
            width: 100% !important;
        }

        .settlement-totals {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .settlement-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 0;
        }

        .settlement-balance {
            border-top: 1px solid var(--border);
            padding-top: 10px;
            margin-top: 4px;
        }

        .settlement-label {
            font-weight: 600;
            color: var(--text-secondary);
        }

        .settlement-amount.positive {
            color: var(--success);
            font-weight: 700;
        }

        .settlement-amount.negative {
            color: var(--danger);
            font-weight: 700;
        }

        .settlement-status.balanced {
            color: var(--success);
            font-weight: 700;
        }

        .settlement-status.unbalanced {
            color: var(--warning);
            font-weight: 700;
        }

        .settlement-pending {
            text-align: center;
            color: var(--text-muted);
            font-style: italic;
            padding: 12px;
        }

        /* Team score coloring */
        .team-score.score-under-par {
            color: #ef4444;
            /* Red for under par */
        }

        [data-theme="dark"] .team-score.score-under-par {
            color: var(--darkBirdies) !important;
            /* Lighter red for dark mode */
        }

        .team-score.score-even-par {
            color: #10b981;
            /* Green for even par */
        }

        [data-theme="dark"] .team-score.score-even-par {
            color: var(--darkEven) !important;
            /* Lighter green for dark mode */
        }

        .team-score.score-over-par {
            color: #000408
                /* White for over par */
        }

        /* Color-code team letters to match player names */
        .team-a-color {
            color: var(--lightteamA);
        }

        .team-b-color {
            color: var(--lightteamB);
        }

        [data-theme="dark"] .team-a-color {
            color: var(--darkteamA) !important;
        }

        [data-theme="dark"] .team-b-color {
            color: var(--darkteamB) !important;
        }

        .summary-content span {
            letter-spacing: 0.3px;

        }

        .summary-content {
            font-family: 'SF Mono', Monaco, monospace;
            font-size: 0.85rem;
            font-weight: 600;
            letter-spacing: 0.3px;
            padding: 8px 12px;
        }

        .summary-cell {
            background: var(--bg-secondary);
            border-radius: 6px;
            margin: 2px 0;
        }

        .team-score-highlight .score-text {
            color: var(--text-primary) !important;
            letter-spacing: -0.05em;
            /* Force score text to be white/primary color */
        }

        /* ================================
   MOBILE STATS PAGE LAYOUT
   ================================ */

        /* Stats page container - mobile optimized */
        #section-stats .container {
            max-width: none !important;
            width: 100% !important;
            padding: 20px !important;
        }

        /* === ADMIN CONSOLE WIDE LAYOUT === */
        body.admin-mode .container,
        .admin-console .container,
        #adminContainer .container {
            max-width: none !important;
            width: calc(100% - 20px) !important;
            padding: 10px !important;
            margin: 0 auto !important;
        }

        #adminContainer {
            max-width: none !important;
            width: 100% !important;
            padding: 0 !important;
        }

        .admin-section {
            width: 100% !important;
            max-width: none !important;
        }

        /* Stats header styling */
        .stats-header {
            text-align: center !important;
            margin-bottom: 20px !important;
            padding: 0 !important;
        }

        .stats-header h3 {
            margin: 0 0 4px 0 !important;
            font-size: 1.5rem !important;
            font-weight: 700 !important;
            color: var(--text-primary) !important;
            border-bottom: 2px solid var(--border);
            border-bottom-style: ridge;
        }

        .stats-header p {
            display: none !important;
            /* Hide "Performance analytics" */
        }

        /* Time period toggle buttons */
        .stats-filters {
            margin-bottom: 20px !important;
            text-align: center !important;
        }

        .period-btn {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            color: var(--text-secondary);
            padding: 8px 16px;
            border-radius: var(--radius);
            cursor: pointer;
            margin-right: 8px;
        }

        .period-btn.active {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        /* Mobile 2-column stats grid */
        .stats-grid {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            gap: 12px !important;
            width: 100% !important;
            margin-bottom: 20px !important;
        }

        /* Mobile-optimized stat cards */
        .stat-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 12px 8px !important;
            text-align: center;
        }

        .stat-label {
            font-size: 0.8rem !important;
            color: var(--text-muted);
            margin-bottom: 8px;
        }

        .stat-value {
            font-size: 1.1rem !important;
            font-weight: 700;
            color: var(--text-primary);
        }

        .stat-value.positive {
            color: #10b981;
        }

        .stat-value.negative {
            color: #ef4444;
        }

        /* Head-to-Head section */
        .stats-section {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 20px;
            margin-bottom: 20px;
        }

        .stats-section h4 {
            margin: 0 0 16px 0;
            color: var(--text-primary);
            font-size: 1.1rem;
            font-weight: 600;
        }

        .h2h-stats {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .h2h-card {
            background: var(--bg-primary);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 12px;
            text-align: center;
        }

        .h2h-label {
            font-size: 0.875rem;
            color: var(--text-muted);
            margin-bottom: 4px;
        }

        .h2h-value {
            font-weight: 600;
            color: var(--text-primary);
        }

        .stats-section-header {
            margin-bottom: 20px;
        }

        .stats-section-header h4 {
            margin: 20px 0 12px 0;
            color: var(--text-primary);
            font-size: 1.1rem;
            font-weight: 600;
        }

        /* Responsive breakpoints for larger screens */
        @media (min-width: 768px) {
            .stats-grid {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
            }

            .h2h-stats {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 16px;
            }

            #section-stats .container {
                max-width: 1200px !important;
                margin: 0 auto !important;
            }
        }



        .stat-date {
            font-size: 0.7rem;
            color: var(--text-muted);
            margin-top: 2px;
            font-style: italic;
            opacity: 0.8;
        }

        .team-a-best {
            background-color: #f6fffa !important;
            color: var(--lightteamA);

        }

        [data-theme="dark"] .team-a-best {

            color: var(--darkteamA);

        }

        .team-b-best {
            background-color: #fbf4ef !important;
            color: var(--lightteamB);

        }

        [data-theme="dark"] .team-b-best {
            color: var(--darkteamB);

        }

        .par-label {
            text-align: center !important;
            font-size: 11px !important;

        }

        .team-header h4 {
            font-weight: 900;
        }

        /* Bulk Create Modal Styles */
        .bulk-screen {
            display: none;
        }

        .bulk-screen.active {
            display: block;
        }

        .bulk-progress {
            display: flex;
            gap: 4px;
        }

        .bulk-progress-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--border);
            transition: all 0.2s ease;
        }

        .bulk-progress-dot.active {
            background: var(--primary);
        }

        .bulk-progress-dot.complete {
            background: var(--success);
        }

        .bulk-match-preview {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 12px;
            margin-bottom: 8px;
            font-size: 0.875rem;
        }

        .bulk-match-preview.incomplete {
            opacity: 0.6;
            border-style: dashed;
        }

        .bulk-match-preview .match-teams {
            font-weight: 600;
            color: var(--text-primary);
        }

        .bulk-match-preview .match-status {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 4px;
        }



        .toast-wide {
            min-width: 350px;
            max-width: 95vw;
            text-align: center;
            font-weight: bold;
        }



        /* ===== COMPLETE VERTICAL SCORECARD CSS ===== */

        .vertical-scorecard {
            width: 100% !important;
            display: block !important;
        }

        .vertical-scorecard .scorecard-nav {
            display: flex !important;
            background: #f1f5f9 !important;
            border-radius: 8px !important;
            padding: 2px !important;
            margin-bottom: 12px !important;
        }

        .vertical-scorecard .nav-tab {
            flex: 1 !important;
            padding: 10px 16px !important;
            background: transparent !important;
            border: none !important;
            font-weight: 600 !important;
            color: #64748b !important;
            cursor: pointer !important;
            border-radius: 6px !important;
            font-size: 0.875rem !important;
            transition: all 0.2s ease !important;
        }

        .vertical-scorecard .nav-tab.active {
            background: #10b981 !important;
            color: white !important;
            box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3) !important;
        }

        .vertical-scorecard .nav-tab:hover:not(.active) {
            background: #f8fafc !important;
            color: #0f172a !important;
        }

        /* Match Summary */
        .vertical-scorecard .match-summary {
            background: #f1f5f9 !important;
            padding: 8px 12px !important;
            border-radius: 6px !important;
            text-align: center !important;
            margin-bottom: 8px !important;
        }

        .vertical-scorecard .match-status {
            font-size: 0.875rem !important;
            font-weight: 600 !important;
            margin-bottom: 6px !important;
            color: #0f172a !important;
        }

        .vertical-scorecard .team-info {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            gap: 12px !important;
            margin-top: 8px !important;
        }

        .vertical-scorecard .team-section {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 2px !important;
        }

        .vertical-scorecard .team-name {
            font-weight: 600 !important;
            font-size: 0.75rem !important;
        }

        .vertical-scorecard .team-members {
            font-size: 0.65rem !important;
            color: #64748b !important;
            font-weight: 500 !important;
        }

        .vertical-scorecard .vs-divider {
            font-size: 0.75rem !important;
            color: #64748b !important;
            font-weight: 500 !important;
        }

        /* Nine Sections - Force proper display control */
        .vertical-scorecard .nine-section {
            display: block !important;
            width: 100% !important;
            margin-bottom: 16px !important;
        }

        .vertical-scorecard #back-nine {
            display: none !important;
        }

        /* Hole Cards */
        .vertical-scorecard .hole-card {
            background: white !important;
            border: 1px solid #e2e8f0 !important;
            border-radius: 8px !important;
            padding: 12px !important;
            margin-bottom: 8px !important;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
            display: block !important;
            width: 100% !important;
        }

        .vertical-scorecard .hole-header {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            margin-bottom: 8px !important;
        }

        .vertical-scorecard .hole-info {
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
        }

        .vertical-scorecard .hole-number {
            font-size: 1.125rem !important;
            font-weight: 700 !important;
            color: #0f172a !important;
            margin-left: 25px !important;
        }

        .vertical-scorecard .hole-par {
            font-size: 0.875rem !important;
            color: #64748b !important;
        }

        /* Hole Winner Pills */
        .vertical-scorecard .hole-winner {
            font-size: 0.75rem !important;
            font-weight: 600 !important;
            padding: 4px 8px !important;
            border-radius: 12px !important;
        }

        .vertical-scorecard .team-a-winner {
            background: rgba(59, 130, 246, 0.1) !important;
            color: #3b82f6 !important;
        }

        .vertical-scorecard .team-b-winner {
            background: rgba(16, 185, 129, 0.1) !important;
            color: #10b981 !important;
        }

        .vertical-scorecard .hole-tied {
            background: #f1f5f9 !important;
            color: #64748b !important;
        }

        /* Team Scores Grid */
        .vertical-scorecard .team-scores {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            gap: 8px !important;
            width: 100% !important;
        }

        /* Team Score Cards - Clean Design Without Rectangle Confusion */
        .vertical-scorecard .team-score-card {
            background: white !important;
            border: 1px solid #e2e8f0 !important;
            border-radius: 6px !important;
            padding: 10px !important;
            text-align: center !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
            display: block !important;
        }

        /* Winner styling - subtle left border instead of confusing full backgrounds */
        .vertical-scorecard .team-score-card.winner.team-a {
            border-left: 4px solid #3b82f6 !important;
            background: rgba(59, 130, 246, 0.02) !important;
        }

        .vertical-scorecard .team-score-card.winner.team-b {
            border-left: 4px solid #10b981 !important;
            background: rgba(16, 185, 129, 0.02) !important;
        }

        /* Hover - subtle elevation only */
        .vertical-scorecard .team-score-card:hover {
            transform: translateY(-1px) !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        }

        /* Detail Active - subtle glow, no border color confusion */
        .vertical-scorecard .team-score-card.detail-active {
            box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.2) !important;
            transform: translateY(-1px) !important;
        }

        /* Team Labels */
        .vertical-scorecard .team-label {
            font-size: 0.75rem !important;
            font-weight: 600 !important;
            margin-bottom: 4px !important;
            display: block !important;
        }

        /* Team Scores (Big Numbers) - Clean without rectangles */
        .vertical-scorecard .team-score {
            font-size: 1.5rem !important;
            font-weight: 900 !important;
            margin-bottom: 4px !important;
            line-height: 1 !important;
            display: block !important;
            background: transparent !important;
            border: none !important;
            border-radius: 0 !important;
            padding: 0 !important;
        }

        /* Score Type Colors - In hole cards only (not summary) */
        .vertical-scorecard .hole-card .team-score.score-par {
            color: #64748b !important;
            font-weight: 700 !important;
        }

        .vertical-scorecard .hole-card .team-score.score-birdie {
            color: #ef4444 !important;
            font-weight: 900 !important;
        }

        .vertical-scorecard .hole-card .team-score.score-eagle {
            color: #f59e0b !important;
            font-weight: 900 !important;

        }

        .vertical-scorecard .hole-card .team-score.score-bogey {
            color: #374151 !important;
            font-weight: 800 !important;
            background: rgba(107, 114, 128, 0.1) !important;
            border-radius: 4px !important;
            padding: 2px 4px !important;
        }



        /* Score Attribution */
        .vertical-scorecard .score-attribution {
            font-size: 0.7rem !important;
            color: #64748b !important;
            display: block !important;
        }

        /* Team Score Details (Tap to Expand) */
        .vertical-scorecard .team-score-detail {
            display: none !important;
            font-size: 0.75rem !important;
            color: #64748b !important;
        }

        .vertical-scorecard .team-score-card.detail-active .team-score-primary-view {
            display: none !important;
        }

        .vertical-scorecard .team-score-card.detail-active .team-score-detail {
            display: block !important;
        }

        .vertical-scorecard .score-breakdown {
            margin-top: 4px !important;
            line-height: 1.4 !important;
        }

        .vertical-scorecard .contributing-player {
            font-weight: 600 !important;
            color: #0f172a !important;
        }

        /* Provisional Score Styling (Incomplete Holes) */
        .vertical-scorecard .provisional-card {
            background: repeating-linear-gradient(45deg,
                    rgba(245, 158, 11, 0.08),
                    rgba(245, 158, 11, 0.08) 3px,
                    transparent 3px,
                    transparent 8px) !important;
            border: 2px dashed rgba(245, 158, 11, 0.4) !important;
            opacity: 0.8 !important;
        }

        .vertical-scorecard .provisional-card .team-score {
            color: #b45309 !important;
            opacity: 0.9 !important;
        }

        .vertical-scorecard .provisional-card .team-label,
        .vertical-scorecard .provisional-card .score-attribution {
            color: #b45309 !important;
            opacity: 0.8 !important;
        }

        /* Team Colors */
        .team-a-color {
            color: #3b82f6 !important;
        }

        .team-b-color {
            color: #10b981 !important;
        }

        /* Score Colors (Summary Section Only) */
        .score-under-red {
            color: #ef4444 !important;
            font-weight: 700 !important;
        }

        .score-even-green {
            color: #22c55e !important;
            font-weight: 700 !important;
        }

        .score-over-black {
            color: #1f2937 !important;
            font-weight: 700 !important;
        }



        /* ===== DARK THEME SUPPORT ===== */

        [data-theme="dark"] .vertical-scorecard .hole-header {
            border-bottom: 1px solid #475569 !important;
            padding-bottom: 8px !important;
            margin-bottom: 12px !important;
        }

        [data-theme="dark"] .vertical-scorecard .match-summary {
            background: #1e293b !important;
            /* Slightly lighter background */
            border: 1px solid #475569 !important;
            /* Visible border */
        }

        [data-theme="dark"] .vertical-scorecard .hole-card {
            background: var(--bg-card) !important;
            border: 1px solid #475569 !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
        }

        [data-theme="dark"] .vertical-scorecard .team-score-card {
            background: var(--bg-card) !important;
            border: 1px solid #475569 !important;
        }

        [data-theme="dark"] .vertical-scorecard .team-score-card:hover {
            transform: translateY(-1px) !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
            border-color: #64748b !important;
        }

        [data-theme="dark"] .vertical-scorecard .team-score-card.detail-active {
            box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.4) !important;
            transform: translateY(-1px) !important;
        }

        [data-theme="dark"] .vertical-scorecard .team-score-card.winner.team-a {
            border-left: 4px solid #3b82f6 !important;
            background: rgba(59, 130, 246, 0.08) !important;
            border: 1px solid #475569 !important;
            border-left: 4px solid #3b82f6 !important;
        }

        [data-theme="dark"] .vertical-scorecard .team-score-card.winner.team-b {
            border-left: 4px solid #10b981 !important;
            background: rgba(16, 185, 129, 0.08) !important;
            border: 1px solid #475569 !important;
            border-left: 4px solid #10b981 !important;
        }

        [data-theme="dark"] .vertical-scorecard .match-summary {
            background: #1e293b !important;
            border: 1px solid #475569 !important;
        }

        /* Hole headers with separation */
        [data-theme="dark"] .vertical-scorecard .hole-header {
            border-bottom: 1px solid #475569 !important;
            padding-bottom: 8px !important;
            margin-bottom: 12px !important;
        }

        [data-theme="dark"] .vertical-scorecard .hole-card .team-score.score-bogey {
            color: #9ca3af !important;
            background: rgba(156, 163, 175, 0.2) !important;
            border-radius: 4px !important;
            padding: 2px 4px !important;
        }

        [data-theme="dark"] .vertical-scorecard .hole-card .team-score.score-double {
            color: #d1d5db !important;
            background: rgba(209, 213, 219, 0.2) !important;
            border-radius: 2px !important;
            border: 2px solid #ffffff !important;
            padding: 2px 4px !important;
        }

        /* Text colors for better visibility */
        [data-theme="dark"] .vertical-scorecard .team-label {
            color: var(--text-primary) !important;
        }



        /* Team score colors in summary header for dark theme */
        [data-theme="dark"] .score-under-red {
            color: #f87171 !important;
            /* Brighter red for dark backgrounds */
            font-weight: 700 !important;
        }

        [data-theme="dark"] .score-even-green {
            color: #34d399 !important;
            /* Brighter green for dark backgrounds */
            font-weight: 700 !important;
        }

        [data-theme="dark"] .score-over-black {
            color: #f3f4f6 !important;
            /* Light gray instead of black for dark theme */
            font-weight: 700 !important;
        }

        /* Also ensure team colors are visible in dark theme header */
        [data-theme="dark"] .team-a-color {
            color: #60a5fa !important;
            /* Brighter blue for dark backgrounds */
        }

        [data-theme="dark"] .team-b-color {
            color: #34d399 !important;
            /* Brighter green for dark backgrounds */
        }






        [data-theme="dark"] .vertical-scorecard .match-status {
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] .vertical-scorecard .team-members {
            color: var(--text-muted) !important;
        }

        [data-theme="dark"] .vertical-scorecard .vs-divider {
            color: var(--text-muted) !important;
        }

        [data-theme="dark"] .vertical-scorecard .hole-number {
            color: var(--text-primary) !important;
            margin-left: 25px !important;
        }

        [data-theme="dark"] .vertical-scorecard .hole-par {
            color: var(--text-muted) !important;
        }

        [data-theme="dark"] .vertical-scorecard .hole-tied {
            background: var(--bg-tertiary) !important;
            color: var(--text-muted) !important;
        }

        [data-theme="dark"] .vertical-scorecard .team-label {
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] .vertical-scorecard .score-attribution {
            color: var(--text-muted) !important;
        }

        [data-theme="dark"] .vertical-scorecard .team-score-detail {
            color: var(--text-secondary) !important;
        }

        [data-theme="dark"] .vertical-scorecard .contributing-player {
            color: var(--text-primary) !important;
        }

        /* Dark mode sticky nav */
        [data-theme="dark"] .vertical-scorecard .scorecard-nav {
            background: var(--bg-card) !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
        }

        [data-theme="dark"] .vertical-scorecard .nav-tab {
            color: var(--text-secondary) !important;
        }

        [data-theme="dark"] .vertical-scorecard .nav-tab:hover:not(.active) {
            background: var(--bg-secondary) !important;
            color: var(--text-primary) !important;
        }

        /* Add this NEW rule to your CSS */
        .match-filter-container {
            position: sticky;
            top: 0;
            /* Stick to the very top of the viewport */
            z-index: 99;

            /* This is important: it prevents content from showing through when scrolling */
            background: var(--bg-secondary);

            /* Add some padding for spacing */
            padding: 12px 16px;

            /* Adjust margin to align with the rest of the layout */
            margin: 0 -16px;
        }

        /* Enhanced Individual Scorecard Headers */
        /* .leaderboard-container .scorecard-header {
            padding: 12px 12px !important;
            background: linear-gradient(135deg, var(--bg-card), var(--bg-secondary)) !important;
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
            font-size: 0.9rem !important;
        }

        
        .leaderboard-container .player-name {
            font-size: 1.05rem !important;
            font-weight: 700 !important;
            color: var(--text-primary) !important;
            line-height: 1.2 !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            max-width: 100px !important;
            margin-right: 8px !important;
        }

        
        .leaderboard-container .score-display {
            font-size: 1.1rem !important;
            font-weight: 700 !important;
        } */
        /* START: Add these new styles for the two-line layout */

        /* This is the main container for each player's row */
        .leaderboard-container .scorecard-header {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            cursor: pointer;
        }

        /* We no longer need the default flex behavior on player-info */
        .leaderboard-container .player-info {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            /* This is key: it stacks the two lines */
        }

        /* NEW: Create containers for each line */
        .primary-line,
        .secondary-line {
            display: flex;
            align-items: center;
            width: 100%;
        }

        /* Pushes the main score to the far right */
        .primary-line {
            justify-content: space-between;
        }

        /* Styles the player name on the top line */
        .primary-line .player-name {
            font-weight: 600;
            font-size: 1rem;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 180px;
            /* Adjust if names are still cut off */
        }

        /* Styles the main score (e.g., E, +2) on the top line */
        .primary-line .main-score-display {
            font-weight: 700;
            font-size: 1.1rem;
            color: var(--text-primary);
            margin-left: 8px;
            /* Add some space between name and score */
        }

        /* Styles the bottom line of details */
        .secondary-line {
            gap: 16px;
            /* Adds space between the icons/details */
            margin-top: 4px;
        }

        .secondary-line .icon-detail {
            font-size: 0.8rem;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 4px;
        }

        /* Make the birdie count stand out */
        .secondary-line .birdies-count {
            font-weight: 600;
            color: var(--danger);

        }

        /* De-emphasize the total score */
        .secondary-line .total-score-display {
            font-size: 0.75rem;
            color: #9ca3af;
        }

        /* Hide the old score display and toggle arrow, as they are now split up */
        .score-info {
            display: none !important;
        }

        /* END: New styles */

        /* Rank Badge Styling - Base */
        .leaderboard-container .rank {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.8rem;
            text-align: center;
            line-height: 28px;
            margin-right: 8px;
        }

        .leaderboard-container .rank {
            width: 28px;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.9rem;
            color: #6b7280;
        }

        .leaderboard-container .rank-1 {
            background: radial-gradient(circle at 50% 40%, #fffde7, #fcc203, #d89b00) !important;
            color: #4d2c00 !important;
            /* Dark brown text for better contrast */
            text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
            box-shadow: 0 4px 8px rgba(245, 158, 11, 0.5) !important;
            border: 2px solid #fcd34d !important;
        }

        .leaderboard-container .rank-2 {
            background: radial-gradient(circle at 50% 40%, #ffffff, #e5e7eb, #b0b5bb) !important;
            color: #374151 !important;
            box-shadow: 0 4px 8px rgba(156, 163, 175, 0.5) !important;
            border: 2px solid #f9fafb !important;
        }

        .leaderboard-container .rank-3 {
            background: radial-gradient(circle at 50% 40%, #ffe8d6, #cd7f32, #a0522d) !important;
            color: white !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            box-shadow: 0 4px 8px rgba(160, 82, 45, 0.5) !important;
            border: 2px solid #e4a672 !important;
        }

        .toggle-arrow-container {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 8px;
        }

        /* This creates the arrow using a CSS pseudo-element */
        .toggle-arrow-container::after {
            content: '▼';
            font-size: 0.8rem;
            color: var(--text-secondary);
            transition: transform 0.2s ease-in-out;
            /* Smooth rotation */
        }

        /* When the header is active (open), rotate the arrow */
        .scorecard-header.active .toggle-arrow-container::after {
            transform: rotate(180deg);
            /* Flips the arrow to ▲ */
        }

        /* (Optional) Add this style to make the header background change when active */
        .scorecard-header.active {
            background-color: var(--bg-secondary);
        }

        /* Add these for the main score colors */
        .main-score-display.score-under-par {
            color: var(--danger);
        }

        .main-score-display.score-even-par {
            color: var(--success);
        }

        .main-score-display.score-over-par {
            color: var(--text-primary);
            /* Or another color for over par scores */
        }

        [data-theme="dark"] .vertical-scorecard .provisional-card {
            /* Use a brighter orange base color but with very low opacity for the gradient */
            background: repeating-linear-gradient(45deg,
                    rgba(251, 146, 60, 0.1),
                    /* Brighter orange (fb923c), but at 10% opacity */
                    rgba(251, 146, 60, 0.1) 3px,
                    transparent 3px,
                    transparent 8px) !important;

            /* The border can be brighter and more opaque to stand out on a dark background */
            border: 2px dashed rgba(251, 146, 60, 0.6) !important;

            /* Opacity can remain the same or be slightly increased if needed */
            opacity: 0.9 !important;
        }

        /* Golf Scorecard Styling - Bogey and Double Bogey Indicators */

        /* Make double bogey more square with light grey background and black border */
        .scorecard-content .team-score.score-double {
            width: 45px !important;
            height: 35px !important;
            background-color: rgba(75, 85, 99, 0.2) !important;
            border: 2px solid black !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 !important;
            margin: 0 auto 4px auto !important;
            box-sizing: border-box !important;
            border-radius: 2px !important;
            line-height: 1 !important;
        }

        /* Make bogey more square with darker grey background, no border */
        .scorecard-content .team-score.score-bogey {
            width: 45px !important;
            height: 35px !important;
            background-color: rgba(75, 85, 99, 0.5) !important;
            border: none !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 !important;
            margin: 0 auto 4px auto !important;
            box-sizing: border-box !important;
            border-radius: 4px !important;
            line-height: 1 !important;
        }

        /* Ensure all scorecard scores have identical dimensions */
        .scorecard-content .team-score {
            width: 45px !important;
            height: 35px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            margin: 0 auto 4px auto !important;
            box-sizing: border-box !important;
            line-height: 1 !important;
        }

        /* Keep scorecard cards aligned */
        .scorecard-content .team-score-card {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: flex-start !important;
        }

        /* Align initials consistently in scorecard */
        .scorecard-content .score-attribution {
            height: 20px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            line-height: 1 !important;
        }

        /* Move bogey/double bogey initials down to align with regular initials */
        .scorecard-content .team-score-card:has(.score-bogey) .score-attribution,
        .scorecard-content .team-score-card:has(.score-double) .score-attribution {
            position: relative !important;
            top: 2px !important;
        }

        /* Fix the match summary to prevent score wrapping */
        .team-info {
            white-space: nowrap !important;
            overflow: visible !important;
        }

        /* Ensure match summary scores stay inline */
        .team-info .team-score {
            display: inline !important;
            width: auto !important;
            height: auto !important;
            margin: 0 !important;
        }





        /* === MATCH TYPE SELECTOR === */
        .match-type-selector {
            display: flex;
            gap: 8px;
            margin-top: 8px;
        }

        .match-type-btn {
            flex: 1;
            padding: 10px 16px;
            border: 2px solid var(--border);
            background: var(--bg-card);
            color: var(--text-secondary);
            border-radius: var(--radius);
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 0.875rem;
            font-weight: 500;
        }

        .match-type-btn:hover {
            border-color: var(--primary);
            color: var(--text-primary);
        }

        .match-type-btn.active {
            border-color: var(--primary);
            background: var(--primary);
            color: white;
        }

        /* === HIDDEN CLASS === */
        .hidden {
            display: none !important;
        }

        /* === ADMIN CONSOLE === */
        .admin-header {
            text-align: center;
            margin-bottom: 0;
            padding: 0;
            width: 100%;
        }

        .admin-header h3 {
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .admin-subtitle {
            color: var(--text-secondary);
            font-size: 0.875rem;
            margin-top: 0.5rem;
        }

        .admin-login {
            max-width: 400px;
            margin: 2rem auto;
            padding: 2rem;
        }

        .admin-login-form {
            background: var(--bg-card);
            padding: 2rem;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }

        .admin-login-form h4 {
            text-align: center;
            margin-bottom: 1rem;
            color: var(--text-primary);
        }

        .admin-login-form p {
            text-align: center;
            color: var(--text-secondary);
            margin-bottom: 1.5rem;
        }

        .admin-login .form-group {
            display: flex;
            gap: 0.5rem;
        }

        .admin-login #adminPin {
            flex: 1;
            padding: 0.75rem;
            border: 2px solid var(--border);
            border-radius: var(--radius);
            font-size: 1rem;
        }

        .admin-dashboard {
            max-width: 800px;
            margin: 0 auto;
            padding: 1rem;
        }

        .admin-header-compact {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 1.5rem;
            border-bottom: 2px solid var(--primary);
            background: var(--bg-tertiary);
            border-radius: 8px 8px 0 0;
            margin-bottom: 0;
        }
        
        .admin-header-compact h4 {
            margin: 0;
            color: var(--primary);
            font-size: 1.2rem;
            font-weight: 700;
        }
        
        .admin-status-compact {
            display: flex;
            gap: 0.75rem;
            align-items: center;
        }

        .admin-status {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .status-badge {
            background: var(--bg-tertiary);
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            color: var(--text-secondary);
        }

        .admin-sections {
            display: grid;
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .admin-section {
            background: var(--bg-card);
            padding: 1.5rem;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }

        .admin-section h5 {
            margin-bottom: 1rem;
            color: var(--text-primary);
        }

        .admin-section ul {
            margin: 0;
            padding-left: 1.5rem;
        }

        .admin-section li {
            color: var(--text-secondary);
            margin-bottom: 0.5rem;
        }

        .admin-actions {
            display: flex;
            justify-content: center;
            gap: 1rem;
            padding: 1rem;
        }

        .error-message {
            background: rgba(239, 68, 68, 0.1);
            color: var(--danger);
            padding: 0.5rem;
            border-radius: var(--radius);
            margin-top: 0.5rem;
            font-size: 0.875rem;
        }

        /* Phase 2: Tab Navigation */
        .admin-nav {
            display: flex;
            background: var(--bg-card);
            border-radius: var(--radius);
            margin-bottom: 1.5rem;
            overflow: hidden;
            box-shadow: var(--shadow);
        }

        .admin-tab {
            flex: 1;
            padding: 1rem 0.5rem;
            background: transparent;
            border: none;
            color: var(--text-secondary);
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            border-right: 1px solid var(--border);
        }

        .admin-tab:last-child {
            border-right: none;
        }

        .admin-tab:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }

        .admin-tab.active {
            background: var(--primary);
            color: white;
            font-weight: 600;
        }

        .admin-tab-content {
            background: var(--bg-card);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            margin-bottom: 1.5rem;
        }

        /* Data Viewing Styles */
        .admin-form {
            margin-bottom: 1.5rem;
        }

        .form-row {
            display: grid;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-group label {
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
            font-size: 0.875rem;
        }

        .form-group input,
        .form-group select {
            padding: 0.75rem;
            border: 2px solid var(--border);
            border-radius: var(--radius);
            background: var(--bg-primary);
            color: var(--text-primary);
            font-size: 1rem;
        }

        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: var(--primary);
        }

        .form-actions {
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .admin-data-results {
            min-height: 200px;
        }

        .admin-empty-state {
            text-align: center;
            padding: 3rem 1rem;
            color: var(--text-muted);
        }

        .admin-empty-state p {
            margin-bottom: 0.5rem;
        }

        .admin-loading {
            text-align: center;
            padding: 2rem 1rem;
        }

        .admin-error {
            text-align: center;
            padding: 2rem 1rem;
            color: var(--danger);
        }

        .admin-data-header {
            padding: 1.25rem 1.5rem;
            border-bottom: 2px solid var(--primary);
            background: var(--bg-tertiary);
            width: 100%;
            box-sizing: border-box;
            border-radius: 8px 8px 0 0;
        }

        .admin-data-header h6 {
            margin: 0 0 0.5rem 0;
            color: var(--primary);
            font-size: 1.2rem;
            font-weight: 700;
            line-height: 1.2;
        }

        .admin-data-header .date-players {
            margin: 0 0 0.25rem 0;
            color: var(--text-primary);
            font-size: 0.95rem;
            font-weight: 600;
            line-height: 1.3;
        }
        
        .admin-data-header .course-name {
            margin: 0;
            color: var(--text-secondary);
            font-size: 0.85rem;
            font-weight: 500;
            line-height: 1.2;
            font-style: italic;
        }

        .admin-scorecard-table {
            overflow-x: auto;
        }

        .admin-scorecard-table table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }

        .admin-scorecard-table th {
            background: var(--bg-secondary);
            padding: 0.75rem 0.5rem;
            text-align: left;
            font-weight: 600;
            color: var(--text-primary);
            font-size: 0.875rem;
            border-bottom: 1px solid var(--border);
        }

        /* Column width control for mobile */
        .admin-scorecard-table th:nth-child(1) { width: 20%; } /* Player */
        .admin-scorecard-table th:nth-child(2) { width: 10%; } /* Total */
        .admin-scorecard-table th:nth-child(3) { width: 10%; } /* To Par */
        .admin-scorecard-table th:nth-child(4) { width: 45%; } /* Scores */
        .admin-scorecard-table th:nth-child(5) { width: 15%; } /* Actions */

        .admin-scorecard-table td {
            padding: 0.75rem 0.5rem;
            border-bottom: 1px solid var(--border);
            vertical-align: top;
        }

        .admin-scorecard-table tr:hover {
            background: var(--bg-tertiary);
        }

        .scores-row {
            display: flex;
            gap: 2px;
            flex-wrap: wrap;
            max-height: 60px;
            overflow-y: auto;
        }

        .score-cell {
            display: inline-block;
            min-width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            font-size: 0.75rem;
            font-weight: 600;
            border-radius: 3px;
            margin: 1px;
        }

        .score-empty {
            background: var(--bg-tertiary);
            color: var(--text-muted);
            display: inline-block;
            min-width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            font-size: 0.75rem;
            border-radius: 3px;
            margin: 1px;
        }

        .score-eagle {
            background: #f59e0b;
            color: white;
        }

        .score-birdie {
            background: #dc2626;
            color: white;
        }

        .score-par {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }

        .score-bogey {
            background: #6b7280;
            color: white;
        }

        .score-double {
            background: #374151;
            color: white;
        }

        .under-par {
            color: var(--success);
            font-weight: 600;
        }

        .over-par {
            color: var(--danger);
            font-weight: 600;
        }

        .even-par {
            color: var(--text-primary);
            font-weight: 600;
        }

        /* Firebase Monitor Styles */
        .admin-stats {
            display: grid;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .admin-limits {
            display: grid;
            gap: 0.75rem;
            margin-bottom: 1.5rem;
            padding: 1rem;
            background: var(--bg-tertiary);
            border-radius: var(--radius);
        }

        .limit-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
            border-bottom: 1px solid var(--border);
        }

        .limit-item:last-child {
            border-bottom: none;
        }

        .limit-label {
            font-weight: 500;
            color: var(--text-secondary);
            font-size: 0.875rem;
        }

        .limit-value {
            font-weight: 600;
            color: var(--warning);
            font-size: 0.875rem;
        }

        .stat-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--border);
        }

        .stat-label {
            font-weight: 500;
            color: var(--text-secondary);
        }

        .stat-value {
            font-weight: 600;
            color: var(--text-primary);
        }

        .admin-warning {
            background: rgba(251, 191, 36, 0.1);
            border: 1px solid var(--warning);
            border-radius: var(--radius);
            padding: 1rem;
            margin-top: 1.5rem;
        }

        .admin-warning h6 {
            margin: 0 0 0.75rem 0;
            color: var(--warning);
            font-size: 0.875rem;
        }

        .admin-warning ul {
            margin: 0;
            padding-left: 1.25rem;
        }

        .admin-warning li {
            color: var(--text-secondary);
            font-size: 0.875rem;
            margin-bottom: 0.25rem;
        }

        /* System Tab Styles */
        .admin-system-info {
            margin-bottom: 1.5rem;
        }

        .info-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--border);
        }

        .info-label {
            font-weight: 500;
            color: var(--text-secondary);
        }

        .info-value {
            font-weight: 600;
            color: var(--text-primary);
            font-family: 'Courier New', monospace;
            font-size: 0.875rem;
        }

        .admin-future-features {
            background: var(--bg-tertiary);
            border-radius: var(--radius);
            padding: 1.5rem;
        }

        .admin-future-features h6 {
            margin: 0 0 1rem 0;
            color: var(--text-primary);
        }

        .feature-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .feature-item {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
        }

        .feature-icon {
            font-size: 1.25rem;
            margin-top: 0.125rem;
        }

        .feature-details strong {
            display: block;
            color: var(--text-primary);
            font-size: 0.875rem;
            margin-bottom: 0.25rem;
        }

        .feature-details p {
            margin: 0;
            color: var(--text-secondary);
            font-size: 0.8125rem;
        }

        /* Status badge variations */
        .status-badge.status-warning {
            background: rgba(251, 191, 36, 0.2);
            color: var(--warning);
            border: 1px solid var(--warning);
        }

        /* === BULK CREATE PLAYER INPUT FOCUS HIGHLIGHTING === */
        /* REMOVED: ID-specific focus rules that were overriding blue styling */

        /* REMOVED: Glow effect pseudo-elements */

        /* REMOVED: Team-specific focus colors that were causing green/orange styling */

        /* REMOVED: Mobile focus transforms for specific bulk IDs */

        /* Next-to-fill indicator for bulk create and create match */
        #bulkCreateModal input.next-to-fill,
        #createMatchModal input.next-to-fill {
            border: 2px solid #f59e0b !important;
            box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25) !important;
            background-color: rgba(245, 158, 11, 0.08) !important;
            animation: pulseGlow 1.5s ease-in-out infinite alternate;
        }

        @keyframes pulseGlow {
            0% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25); }
            100% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.4); }
        }

        .status-badge.status-critical {
            background: rgba(239, 68, 68, 0.2);
            color: var(--danger);
            border: 1px solid var(--danger);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        /* === ADMIN CONSOLE PHASE 3: MINIMAL LIST LAYOUT === */
        
        .admin-scorecard-cards {
            display: flex;
            flex-direction: column;
            gap: 0;
            padding: 0;
        }

        .admin-player-row {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 1rem 1.5rem;
            border-bottom: 1px solid var(--border);
            background: var(--bg-primary);
            transition: background-color 0.2s ease;
            min-height: 80px;
            white-space: nowrap;
            gap: 1rem;
        }

        .admin-player-row:hover {
            background: var(--bg-secondary);
        }

        .admin-player-row:last-child {
            border-bottom: none;
        }

        .player-info {
            flex: 1;
        }
        
        .admin-player-row .player-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 0.25rem;
        }

        .player-name {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
        
        .admin-player-row .player-name {
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.2;
        }

        .player-score {
            display: flex;
            gap: 0.5rem;
            align-items: center;
            flex-wrap: nowrap;
        }
        
        .admin-player-row .player-score {
            gap: 0.75rem;
            align-items: baseline;
            white-space: nowrap;
            margin: 0;
        }

        .total-score {
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--text-secondary);
        }
        
        .admin-player-row .total-score {
            margin: 0;
            line-height: 1.2;
        }

        .to-par {
            font-size: 0.875rem;
            font-weight: 600;
        }
        
        .admin-player-row .to-par {
            margin: 0;
            line-height: 1.2;
        }

        .actions-cell {
            text-align: right;
            flex-shrink: 0;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-left: auto;
            padding-right: 1rem;
        }

        .admin-delete-btn {
            background: var(--danger);
            color: white;
            border: none;
            border-radius: var(--radius);
            padding: 0.5rem 0.75rem;
            font-size: 0.875rem;
            cursor: pointer;
            transition: all 0.2s ease;
            min-width: 60px;
            height: 36px;
            font-weight: 600;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .admin-delete-btn:hover {
            background: #dc2626;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
        }

        .admin-delete-btn:active {
            transform: translateY(0);
            box-shadow: 0 1px 4px rgba(239, 68, 68, 0.2);
        }

        /* === ADMIN CONSOLE MATCH CREATORS === */
        .admin-match-header {
            padding: 1rem 1.25rem;
            border-bottom: 2px solid var(--primary);
            background: var(--bg-tertiary);
            border-radius: 8px 8px 0 0;
            margin-bottom: 1rem;
        }
        
        .admin-match-header h6 {
            margin: 0 0 0.25rem 0;
            color: var(--primary);
            font-size: 1.1rem;
            font-weight: 700;
        }
        
        .admin-match-header p {
            margin: 0;
            color: var(--text-secondary);
            font-size: 0.85rem;
        }
        
        .admin-creator-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .admin-creator-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 1rem;
            box-shadow: var(--shadow);
        }
        
        .creator-info h6 {
            margin: 0 0 0.25rem 0;
            color: var(--text-primary);
            font-size: 1rem;
            font-weight: 600;
        }
        
        .creator-info p {
            margin: 0 0 0.75rem 0;
            color: var(--text-secondary);
            font-size: 0.875rem;
        }
        
        .creator-matches {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }
        
        .match-summary {
            background: var(--bg-secondary);
            padding: 0.5rem 0.75rem;
            border-radius: 4px;
            font-size: 0.8rem;
            color: var(--text-secondary);
            border-left: 3px solid var(--primary);
        }
        
        /* === ADMIN CONSOLE MOBILE OPTIMIZATION === */
        @media (max-width: 480px) {
            body.admin-mode .container,
            .admin-console .container,
            #adminContainer .container {
                max-width: none !important;
                width: calc(100% - 10px) !important;
                padding: 5px !important;
                margin: 0 auto !important;
            }
            
            .admin-header-compact {
                flex-direction: column;
                gap: 0.5rem;
                padding: 0.75rem 1rem;
                text-align: center;
            }
            
            .admin-status-compact {
                gap: 0.5rem;
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .admin-header h3 {
                font-size: 1rem;
            }
            
            .admin-data-header {
                padding: 1rem 1.25rem;
            }
            
            .admin-data-header h6 {
                font-size: 1.1rem;
                margin-bottom: 0.4rem;
            }
            
            .admin-data-header .date-players {
                font-size: 0.85rem;
                margin-bottom: 0.2rem;
            }
            
            .admin-data-header .course-name {
                font-size: 0.75rem;
            }
            
            .actions-cell {
                padding-right: 0.5rem;
            }
        }

        /* Weekend warning styling for delete buttons */
        .admin-delete-btn.weekend-warning {
            background: #f59e0b;
            color: white;
            animation: weekendPulse 3s infinite;
            border: 2px solid #dc2626;
        }

        .admin-delete-btn.weekend-warning:hover {
            background: #d97706;
            animation: none;
        }

        @keyframes weekendPulse {
            0%, 100% { 
                background: #f59e0b;
                box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
            }
            50% { 
                background: #dc2626;
                box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.3);
            }
        }

        /* Row hover state for deletion preparation */
        .admin-player-row:hover .admin-delete-btn {
            background: #b91c1c;
            box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
        }

        .admin-player-row:hover .admin-delete-btn.weekend-warning {
            background: #d97706;
            box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
        }

        /* Deletion in progress state */
        .deletion-in-progress {
            opacity: 0.6;
            pointer-events: none;
            background: var(--bg-tertiary) !important;
        }

        .deletion-in-progress .admin-delete-btn {
            background: var(--text-muted);
            cursor: not-allowed;
            animation: none;
        }

        @media (min-width: 768px) {
            .admin-sections {
                grid-template-columns: 1fr 1fr;
            }

            .form-row {
                grid-template-columns: 1fr 1fr;
            }

            .admin-stats {
                grid-template-columns: 1fr 1fr 1fr;
            }
        }

        /* ============================================ */
        /* GROUP SCORING MOBILE FIXED POSITION LAYOUT */
        /* Priority 2: Fixed Position Scoring Interface from GitHub Issue #37 */
        /* ============================================ */

        /* Mobile-First Group Scoring Interface */
        .group-scoring-mobile-container {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100vw;
            height: 100vh;
            background: var(--bg-primary);
            z-index: 1000;
            /* Make main container scrollable */
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            scroll-behavior: smooth;
            /* Mobile optimizations */
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }

        /* Professional Header */
        .group-mobile-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-color);
            z-index: 1002;
            padding: 12px 16px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .simple-header-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .hole-jump-btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .hole-jump-btn:hover {
            background: var(--primary-dark, var(--primary));
            transform: translateY(-1px);
        }

        .simple-header-row .par-display {
            background: var(--bg-tertiary);
            color: var(--text-primary);
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
        }

        .pause-btn {
            background: var(--warning);
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .pause-btn:hover {
            background: var(--warning-dark, var(--warning));
            transform: translateY(-1px);
        }

        .group-progress-circle {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 35px;
            height: 35px;
        }

        .group-progress-circle svg {
            width: 35px;
            height: 35px;
        }

        .progress-ring {
            transform: rotate(-90deg);
        }

        .progress-text {
            position: absolute;
            font-size: 9px;
            font-weight: 600;
            opacity: 0.9;
        }

        .group-menu-btn {
            background: rgba(255,255,255,0.1);
            border: none;
            color: white;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .group-menu-btn:hover {
            background: rgba(255,255,255,0.2);
            transform: scale(1.05);
        }

        .menu-icon {
            font-size: 18px;
            font-weight: bold;
        }

        .group-players-bar {
            display: flex;
            gap: 4px;
            padding: 0 15px 4px;
            overflow-x: auto;
        }

        .player-chip {
            display: flex;
            align-items: center;
            gap: 3px;
            background: rgba(255,255,255,0.15);
            padding: 2px 6px;
            border-radius: 8px;
            white-space: nowrap;
            backdrop-filter: blur(10px);
            font-size: 10px;
        }

        .player-chip.birdie {
            background: rgba(34, 197, 94, 0.3);
        }

        .player-chip.par {
            background: rgba(255,255,255,0.2);
        }

        .player-chip.bogey {
            background: rgba(251, 191, 36, 0.3);
        }

        .player-chip.double-bogey {
            background: rgba(239, 68, 68, 0.3);
        }

        .player-name {
            font-size: 13px;
            font-weight: 600;
        }

        .player-score {
            font-size: 12px;
            opacity: 0.9;
        }

        .group-hole-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }

        .hole-number {
            font-size: 18px;
            font-weight: bold;
            color: var(--text-primary);
        }

        .hole-par {
            font-size: 14px;
            color: var(--text-secondary);
            background: var(--bg-tertiary);
            padding: 4px 8px;
            border-radius: 4px;
        }

        .group-player-names {
            display: flex;
            gap: 10px;
            font-size: 12px;
            color: var(--text-secondary);
            overflow-x: auto;
            white-space: nowrap;
            padding: 4px 0;
        }

        .player-name-badge {
            background: var(--bg-tertiary);
            padding: 2px 6px;
            border-radius: 3px;
        }

        /* Professional Content Area */
        .group-mobile-content {
            position: fixed;
            top: 60px; /* Simple header height */
            bottom: 80px; /* Compact nav height */
            left: 0;
            right: 0;
            overflow-y: auto;
            padding: 15px;
            z-index: 1000;
            background: var(--bg-primary);
        }

        .score-input-container {
            max-width: 500px;
            margin: 0 auto;
        }

        .hole-details-card {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 12px;
            margin-bottom: 15px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            border: 1px solid var(--border-color);
        }

        .hole-details-card h3 {
            margin: 0 0 6px;
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .hole-stats {
            display: flex;
            gap: 16px;
            justify-content: center;
        }

        .par-display {
            background: var(--primary);
            color: white;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
        }

        .hole-position {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
        }

        .professional-score-row {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 12px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.04);
            border: 1px solid var(--border-color);
            transition: all 0.2s ease;
        }

        .professional-score-row:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        }

        .player-info {
            flex: 1;
            min-width: 0;
        }

        .player-info .player-name {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 2px;
        }

        .player-running-total {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .score-input-section {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .score-btn {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 1px solid var(--border-color);
            background: var(--bg-primary);
            color: var(--text-primary);
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }

        .score-btn:hover {
            border-color: var(--primary);
            background: var(--primary);
            color: white;
            transform: scale(1.05);
        }

        .professional-score-input {
            width: 50px;
            height: 40px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background: var(--bg-primary);
            color: var(--text-primary);
            font-size: 16px;
            font-weight: 500;
            text-align: center;
            transition: all 0.2s ease;
        }

        .professional-score-input:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 59, 130, 246), 0.1);
        }

        .score-vs-par {
            min-width: 40px;
            text-align: center;
            font-weight: 700;
            font-size: 14px;
        }

        .score-vs-par .under {
            color: #22c55e;
        }

        .score-vs-par .par {
            color: var(--text-secondary);
        }

        .score-vs-par .over {
            color: #ef4444;
        }

        /* Score Input Section */
        .group-score-inputs {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: var(--shadow);
        }

        .player-score-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid var(--border-color);
        }

        .player-score-row:last-child {
            border-bottom: none;
        }

        .player-score-label {
            flex: 1;
            font-weight: 500;
            color: var(--text-primary);
        }

        .player-score-input {
            width: 60px;
            padding: 8px;
            font-size: 18px;
            text-align: center;
            border: 2px solid var(--border-color);
            border-radius: 6px;
            background: var(--bg-primary);
        }

        .player-score-input:focus {
            border-color: var(--primary);
            outline: none;
        }

        .player-total {
            width: 50px;
            text-align: right;
            font-size: 14px;
            color: var(--text-secondary);
        }

        /* Professional Bottom Navigation */
        .group-mobile-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--bg-secondary);
            border-top: 1px solid var(--border-color);
            padding: 8px;
            z-index: 1002;
            box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
            backdrop-filter: blur(10px);
        }

        .nav-primary {
            display: flex;
            gap: 6px;
            margin-bottom: 6px;
        }

        .nav-btn {
            flex: 1;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 8px 6px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1px;
            transition: all 0.2s ease;
            min-height: 36px;
        }

        .nav-btn:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        }

        .nav-btn:disabled {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            cursor: not-allowed;
            opacity: 0.6;
        }

        .nav-btn.prev-btn, .nav-btn.next-btn {
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }

        .nav-btn.save-btn {
            background: var(--success);
        }

        .btn-icon {
            font-size: 18px;
        }

        .btn-text {
            font-size: 12px;
        }

        .nav-secondary {
            display: flex;
            gap: 8px;
        }

        .nav-btn-secondary {
            flex: 1;
            background: var(--bg-primary);
            color: var(--text-secondary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 6px;
            font-size: 10px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
            transition: all 0.2s ease;
        }

        .nav-btn-secondary:hover {
            background: var(--bg-secondary);
            border-color: var(--primary);
            color: var(--primary);
        }

        /* Hole Jump Modal */
        .hole-jump-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .modal-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(4px);
        }

        .modal-content {
            background: var(--bg-primary);
            border-radius: 20px;
            padding: 0;
            width: 100%;
            max-width: 400px;
            max-height: 80vh;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            z-index: 2001;
        }

        .modal-header {
            background: var(--primary);
            color: white;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .modal-header h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
        }

        .close-btn {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s ease;
        }

        .close-btn:hover {
            background: rgba(255,255,255,0.1);
        }

        .hole-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 8px;
            padding: 20px;
        }

        .hole-jump-btn {
            aspect-ratio: 1;
            border: 2px solid var(--border-color);
            background: var(--bg-secondary);
            color: var(--text-primary);
            border-radius: 12px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            transition: all 0.2s ease;
        }

        .hole-jump-btn:hover {
            border-color: var(--primary);
            background: var(--primary);
            color: white;
            transform: translateY(-1px);
        }

        .hole-jump-btn.current {
            background: var(--primary);
            border-color: var(--primary);
            color: white;
        }

        .hole-jump-btn.complete {
            background: var(--success);
            border-color: var(--success);
            color: white;
        }

        .hole-num {
            font-weight: 600;
            font-size: 14px;
        }

        .hole-status {
            font-size: 10px;
            opacity: 0.8;
        }

        .modal-footer {
            padding: 20px;
            border-top: 1px solid var(--border-color);
            background: var(--bg-secondary);
        }

        .legend {
            display: flex;
            gap: 16px;
            justify-content: center;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: var(--text-secondary);
        }

        .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .dot.current {
            background: var(--primary);
        }

        .dot.complete {
            background: var(--success);
        }

        .dot.incomplete {
            background: var(--border-color);
        }

        .group-nav-buttons {
            display: flex;
            gap: 8px;
            justify-content: space-between;
        }

        .group-nav-btn {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-previous {
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }

        .btn-save {
            background: var(--success);
            color: white;
        }

        .btn-next {
            background: var(--primary);
            color: white;
        }

        .btn-pause {
            background: var(--warning);
            color: white;
            margin-top: 8px;
            width: 100%;
        }

        .group-nav-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .group-nav-btn:hover:not(:disabled) {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

        /* Progress Indicator */
        .group-progress-bar {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--bg-tertiary);
        }

        .group-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--success), var(--primary));
            transition: width 0.3s ease;
        }

        /* Mobile Optimizations */
        @media (max-width: 480px) {
            .group-mobile-header {
                padding: 8px;
            }
            
            .group-hole-info {
                margin-bottom: 6px;
            }
            
            .hole-number {
                font-size: 16px;
            }
            
            .group-player-names {
                font-size: 11px;
            }
            
            .group-mobile-content {
                top: 60px;
                bottom: 80px;
                padding: 12px;
            }
            
            .group-nav-btn {
                padding: 10px;
                font-size: 13px;
            }
        }

        /* Hide conflicting elements during group scoring */
        .group-scoring-active .sticky-recent-players,
        .group-scoring-active #playerHeader,
        .group-scoring-active .form-group.sticky,
        .group-scoring-active #scorecardTable,
        .group-scoring-active #summaryBar,
        .group-scoring-active #modeSwitchToggle,
        .group-scoring-active #scorecardSaveBtnContainer,
        .group-scoring-active .recent-players,
        .group-scoring-active .scorecard-form {
            display: none !important;
        }

        /* Ensure body doesn't scroll when group scoring is active */
        body.group-scoring-active {
            overflow: hidden;
            position: fixed;
            width: 100%;
        }

        /* === GROUP SCORING MINIMAL INTERFACE - Mobile UX Enhancement === */
        .group-minimal-container {
            position: fixed;
            inset: 0;
            display: flex;
            flex-direction: column;
            background: var(--bg-primary);
            z-index: 1000;
        }

        /* Minimal header - matches app styling */
        .group-minimal-header {
            height: 35px;
            min-height: 35px;
            padding: 8px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--bg-tertiary);
            color: var(--text-primary);
            font-weight: 600;
            font-size: 16px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .group-pause-btn {
            background: rgba(255,255,255,0.2);
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 15px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .group-pause-btn:hover {
            background: rgba(255,255,255,0.3);
            transform: translateY(-1px);
        }

        .group-pause-btn-footer {
            flex: 1;
            height: 45px;
            font-size: 14px;
            font-weight: 700;
            border: none;
            border-radius: 12px;
            background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 44px;
            box-shadow: 0 4px 12px rgba(127, 140, 141, 0.3);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .group-pause-btn-footer:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(127, 140, 141, 0.4);
        }

        .group-menu-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 18px;
            padding: 5px;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.2s;
        }

        .group-menu-btn:hover {
            background: var(--bg-tertiary);
        }

        /* Score entry area (flexible height) */
        .group-scores {
            flex: 1;
            overflow-y: auto;
            padding: 20px 15px;
            -webkit-overflow-scrolling: touch;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Central Hole Scoring Card */
        .hole-scoring-card {
            background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 100%);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 20px;
            margin: 0 auto;
            max-width: 380px;
            width: 100%;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            border: 2px solid rgba(255,255,255,0.3);
            position: relative;
        }

        .hole-card-header {
            text-align: center;
            margin-bottom: 18px;
            padding-bottom: 12px;
            border-bottom: 2px solid rgba(0,0,0,0.1);
        }

        .hole-title {
            font-size: 20px;
            font-weight: 800;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
        }

        /* Group scoring specific par text - ultra specific selector */
        .group-scoring-mobile-container .hole-card-header .hole-par,
        .hole-scoring-card .hole-card-header .hole-par,
        .hole-par {
            font-size: 14px !important;
            color: #000000 !important;
            font-weight: 700 !important;
            background: #ffffff !important;
            padding: 6px 12px !important;
            border-radius: 16px !important;
            border: 1px solid #e5e7eb !important;
            opacity: 1 !important;
            display: inline-block !important;
            margin-left: 8px !important;
            text-shadow: none !important;
            -webkit-text-fill-color: #000000 !important;
            line-height: 1.2 !important;
        }

        /* 18Birdies interface par text - clean professional style */
        .group-scoring-container-18b .hole-par {
            font-size: 15px !important;
            font-weight: 500 !important;
            color: #666 !important;
            background: none !important;
            border: none !important;
            padding: 0 !important;
            border-radius: 0 !important;
            opacity: 1 !important;
            display: inline !important;
            margin-left: 0 !important;
            text-shadow: none !important;
            -webkit-text-fill-color: #666 !important;
            line-height: 1.2 !important;
        }

        /* Override any dark mode interference for 18Birdies */
        [data-theme="dark"] .group-scoring-container-18b .hole-par {
            color: #999 !important;
            background: none !important;
            -webkit-text-fill-color: #999 !important;
        }

        /* Override any dark mode interference */
        [data-theme="dark"] .group-scoring-mobile-container .hole-par,
        [data-theme="dark"] .hole-scoring-card .hole-par,
        [data-theme="dark"] .back-btn-18b {
            color: #ffffff !important;
            background: none !important;
            -webkit-text-fill-color: #ffffff !important;
        }

        .hole-players {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        /* Player score row within card */
        .card-player-row {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 10px 15px;
            background: rgba(255,255,255,0.6);
            border-radius: 12px;
            border: 1px solid rgba(0,0,0,0.08);
            transition: all 0.3s ease;
        }

        .card-player-row:hover {
            background: rgba(255,255,255,0.8);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .card-player-row.completed {
            background: rgba(34, 197, 94, 0.1);
            border-color: rgba(34, 197, 94, 0.3);
        }

        .card-player-name {
            flex: 1;
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .card-score-input {
            width: 45px;
            height: 45px;
            font-size: 18px;
            font-weight: 700;
            text-align: center;
            border: 3px solid var(--primary);
            border-radius: 12px;
            background: var(--bg-primary);
            color: var(--text-primary);
            transition: all 0.3s ease;
            -webkit-appearance: none;
            -moz-appearance: textfield;
            box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
        }

        .card-score-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
            transform: scale(1.05);
        }

        /* Auto-scroll helper for keyboard visibility - REMOVED */

        /* Ensure focused input is visible above mobile keyboard */
        .card-player-row:has(.card-score-input:focus) {
            position: relative;
            z-index: 10;
        }

        .vs-par-indicator {
            min-width: 40px;
            text-align: center;
            font-size: 14px;
            font-weight: 700;
        }

        .vs-par-under {
            color: #dc2626; /* Red for under par */
        }

        .vs-par-even {
            color: var(--text-secondary);
        }

        .vs-par-over {
            color: #7c2d12; /* Brown for over par */
        }

        .card-navigation {
            display: flex;
            gap: 12px;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid rgba(0,0,0,0.1);
        }

        /* Card score color coding - matches existing system */
        .card-score-input.eagle {
            background: linear-gradient(145deg, #f1c40f 0%, #f39c12 100%) !important;
            color: white !important;
            border-color: #f39c12 !important;
        }

        .card-score-input.birdie {
            background: linear-gradient(145deg, #e74c3c 0%, #c0392b 100%) !important;
            color: white !important;
            border-color: #c0392b !important;
        }

        .card-score-input.par {
            background: linear-gradient(145deg, #3498db 0%, #2980b9 100%) !important;
            color: white !important;
            border-color: #2980b9 !important;
        }

        .card-score-input.bogey {
            background: linear-gradient(145deg, #bdc3c7 0%, #95a5a6 100%) !important;
            color: #2c3e50 !important;
            border-color: #95a5a6 !important;
        }

        .card-score-input.double-bogey {
            background: linear-gradient(145deg, #7f8c8d 0%, #34495e 100%) !important;
            color: white !important;
            border-color: #34495e !important;
        }

        .group-score-row {
            display: flex;
            align-items: center;
            height: 85px;
            gap: 20px;
            padding: 20px 25px;
            margin: 15px 0;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 100%);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255,255,255,0.3);
            transition: all 0.4s ease;
            box-shadow: 0 6px 20px rgba(0,0,0,0.15);
        }

        .group-score-row:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(0,0,0,0.25);
            border-color: rgba(255,255,255,0.6);
        }

        .group-score-row.completed {
            border-color: var(--success);
            box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
            opacity: 0.85;
        }
        
        /* Ensure score input colors remain visible when row is completed */
        .group-score-row.completed .group-score-input.eagle,
        .group-score-row.completed .group-score-input.birdie,
        .group-score-row.completed .group-score-input.par,
        .group-score-row.completed .group-score-input.bogey,
        .group-score-row.completed .group-score-input.double-bogey {
            opacity: 1 !important;
            transform: none;
        }

        .group-score-row label {
            flex: 1;
            font-size: 20px;
            font-weight: 700;
            color: #2c3e50;
            cursor: pointer;
            text-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }

        .group-score-input {
            width: 60px;
            height: 55px;
            font-size: 24px;
            font-weight: 700;
            text-align: center;
            border: 2px solid #bdc3c7;
            border-radius: 8px;
            background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
            color: #2c3e50;
            transition: all 0.3s ease;
            -webkit-appearance: none;
            -moz-appearance: textfield;
            box-shadow: 
                0 2px 6px rgba(0,0,0,0.1),
                inset 0 1px 2px rgba(255,255,255,0.8);
            position: relative;
        }

        .group-score-input::-webkit-outer-spin-button,
        .group-score-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .group-score-input:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 
                0 4px 12px rgba(0,0,0,0.15),
                0 0 0 3px rgba(52, 152, 235, 0.2),
                inset 0 1px 2px rgba(255,255,255,0.8);
            transform: scale(1.05);
        }

        /* Golf score color coding - Traditional golf colors for square inputs */
        .group-score-input.eagle {
            background: linear-gradient(145deg, #f1c40f 0%, #f39c12 100%) !important;
            color: white !important;
            border-color: #f39c12 !important;
            box-shadow: 
                0 3px 8px rgba(241, 196, 15, 0.3),
                inset 0 1px 2px rgba(255,255,255,0.4) !important;
        }

        .group-score-input.birdie {
            background: linear-gradient(145deg, #e74c3c 0%, #c0392b 100%) !important;
            color: white !important;
            border-color: #c0392b !important;
            box-shadow: 
                0 3px 8px rgba(231, 76, 60, 0.3),
                inset 0 1px 2px rgba(255,255,255,0.4) !important;
        }

        .group-score-input.par {
            background: linear-gradient(145deg, #3498db 0%, #2980b9 100%) !important;
            color: white !important;
            border-color: #2980b9 !important;
            box-shadow: 
                0 3px 8px rgba(52, 152, 219, 0.3),
                inset 0 1px 2px rgba(255,255,255,0.4) !important;
        }

        .group-score-input.bogey {
            background: linear-gradient(145deg, #bdc3c7 0%, #95a5a6 100%) !important;
            color: #2c3e50 !important;
            border-color: #95a5a6 !important;
            box-shadow: 
                0 3px 8px rgba(149, 165, 166, 0.3),
                inset 0 1px 2px rgba(255,255,255,0.5) !important;
        }

        .group-score-input.double-bogey {
            background: linear-gradient(145deg, #7f8c8d 0%, #34495e 100%) !important;
            color: white !important;
            border-color: #34495e !important;
            box-shadow: 
                0 3px 8px rgba(52, 73, 94, 0.3),
                inset 0 1px 2px rgba(255,255,255,0.3) !important;
        }

        /* Enhanced focus states for colored inputs */
        .group-score-input.birdie:focus,
        .group-score-input.eagle:focus,
        .group-score-input.par:focus,
        .group-score-input.bogey:focus,
        .group-score-input.double-bogey:focus {
            transform: scale(1.08);
            box-shadow: 
                0 5px 15px rgba(0,0,0,0.25),
                0 0 0 3px rgba(255,255,255,0.6),
                inset 0 1px 2px rgba(255,255,255,0.7);
        }

        .group-score-input[readonly] {
            background: rgba(76, 175, 80, 0.1);
            border-color: var(--success);
            cursor: default;
        }

        .group-score-input::placeholder {
            color: var(--text-muted);
            font-weight: 400;
        }

        .group-save-indicator {
            width: 25px;
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--success);
            font-size: 16px;
            opacity: 0.5;
            transition: opacity 0.3s ease;
        }

        /* Fixed footer navigation (50px) */
        .group-minimal-nav {
            height: 70px;
            min-height: 70px;
            display: flex;
            gap: 15px;
            padding: 15px 20px;
            background: var(--bg-card);
            border-top: 1px solid var(--border-color);
            box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
        }

        .group-nav-btn {
            flex: 1;
            height: 45px;
            font-size: 16px;
            font-weight: 700;
            border: none;
            border-radius: 12px;
            background: var(--primary);
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 44px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .group-nav-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(22, 160, 133, 0.4);
        }

        .group-nav-btn:active {
            transform: translateY(0);
        }

        .group-nav-btn:disabled {
            background: var(--bg-tertiary);
            color: var(--text-muted);
            cursor: not-allowed;
            transform: none;
        }

        .review-btn {
            background: var(--success);
            animation: reviewPulse 2s infinite;
        }

        .review-btn:hover {
            background: #16a34a;
        }

        @keyframes reviewPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); box-shadow: 0 0 15px rgba(34, 197, 94, 0.4); }
        }

        /* Quick menu modal */
        .group-quick-menu-modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2000;
            animation: fadeIn 0.2s ease;
        }

        .group-quick-menu {
            background: var(--bg-card);
            border-radius: 12px;
            padding: 20px;
            min-width: 280px;
            max-width: 90vw;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
                        0 10px 10px -5px rgba(0, 0, 0, 0.04);
            animation: slideUp 0.3s ease;
        }

        .group-quick-menu h3 {
            margin: 0 0 15px 0;
            color: var(--text-primary);
            font-size: 18px;
            font-weight: 600;
        }

        .menu-option {
            width: 100%;
            padding: 12px 16px;
            margin-bottom: 8px;
            background: var(--bg-secondary);
            border: none;
            border-radius: 8px;
            color: var(--text-primary);
            font-size: 16px;
            text-align: left;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .menu-option:hover {
            background: var(--bg-tertiary);
            transform: translateY(-1px);
        }

        .menu-option.menu-danger {
            background: #fee2e2;
            color: #dc2626;
            border: 1px solid #fca5a5;
        }

        .menu-option.menu-danger:hover {
            background: #fecaca;
            color: #b91c1c;
            border-color: #f87171;
        }

        [data-theme="dark"] .menu-option.menu-danger {
            background: #451a1a;
            color: #fca5a5;
            border: 1px solid #7f1d1d;
        }

        [data-theme="dark"] .menu-option.menu-danger:hover {
            background: #7f1d1d;
            color: #fca5a5;
            border-color: #991b1b;
        }

        .menu-cancel {
            width: 100%;
            padding: 12px 16px;
            margin-top: 10px;
            background: none;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-secondary);
            font-size: 16px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .menu-cancel:hover {
            border-color: var(--danger);
            color: var(--danger);
        }

        /* Hole completion indicator */
        .group-hole-complete-indicator {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(34, 197, 94, 0.95);
            color: white;
            padding: 15px 30px;
            border-radius: 25px;
            font-size: 16px;
            font-weight: 600;
            animation: holeCompleteAnimation 1.5s ease-in-out;
            pointer-events: none;
            z-index: 3000;
            box-shadow: 0 10px 25px rgba(34, 197, 94, 0.3);
        }

        @keyframes holeCompleteAnimation {
            0% { 
                opacity: 0; 
                transform: translate(-50%, -50%) scale(0.8); 
            }
            20% { 
                opacity: 1; 
                transform: translate(-50%, -50%) scale(1.1); 
            }
            80% { 
                opacity: 1; 
                transform: translate(-50%, -50%) scale(1); 
            }
            100% { 
                opacity: 0; 
                transform: translate(-50%, -50%) scale(0.9); 
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideUp {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        /* Mobile optimizations */
        @media (max-width: 768px) {
            .group-scores {
                padding: 15px;
            }

            .group-score-row {
                height: 65px; /* Slightly larger for better touch */
            }

            .group-score-input {
                width: 75px;
                height: 55px;
                font-size: 22px;
            }

            .group-quick-menu {
                margin: 20px;
                min-width: unset;
            }
        }

        /* Dark theme adjustments */
        [data-theme="dark"] .group-minimal-header,
        [data-theme="dark"] .group-minimal-nav {
            border-color: var(--border-color);
        }

        /* === SCORECARD SETTINGS MENU === */
        .scorecard-settings-modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2000;
            animation: fadeIn 0.2s ease;
        }

        .scorecard-settings-menu {
            background: var(--bg-card);
            border-radius: 12px;
            padding: 20px;
            min-width: 280px;
            max-width: 90vw;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
                        0 10px 10px -5px rgba(0, 0, 0, 0.04);
            animation: slideUp 0.3s ease;
        }

        .scorecard-settings-menu h3 {
            margin: 0 0 15px 0;
            color: var(--text-primary);
            font-size: 18px;
            font-weight: 600;
        }

        .scorecard-settings-menu .menu-option {
            width: 100%;
            padding: 12px 16px;
            margin-bottom: 8px;
            background: var(--bg-secondary);
            border: none;
            border-radius: 8px;
            color: var(--text-primary);
            font-size: 16px;
            text-align: left;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .scorecard-settings-menu .menu-option:hover {
            background: var(--bg-tertiary);
            transform: translateY(-1px);
        }

        .scorecard-settings-menu .menu-cancel {
            width: 100%;
            padding: 12px 16px;
            margin-top: 10px;
            background: none;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-secondary);
            font-size: 16px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .scorecard-settings-menu .menu-cancel:hover {
            border-color: var(--danger);
            color: var(--danger);
        }

        @media (max-width: 768px) {
            .scorecard-settings-menu {
                margin: 20px;
                min-width: unset;
            }
        }

        [data-theme="dark"] .group-score-input {
            background: var(--bg-secondary);
        }

        [data-theme="dark"] .group-score-input:focus {
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
        }

        /* Return to Group Scoring Button */
        .return-to-group-btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            margin: 10px 0 20px 0;
            cursor: pointer;
            transition: all 0.2s ease;
            width: 100%;
            max-width: 300px;
        }
        .return-to-group-btn:hover {
            background: var(--primary-dark);
            transform: translateY(-1px);
        }

        /* Professional Progress Indicator - Front 9 / Back 9 Layout */
        .progress-dots {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 8px 15px;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-color);
        }
        
        .progress-nine {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 4px;
        }
        
        .nine-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-secondary);
            min-width: 45px;
            text-align: center;
        }
        
        .nine-dots {
            display: flex;
            gap: 4px;
            flex: 1;
            justify-content: center;
        }

        .progress-dot {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--border-color);
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid var(--border-color);
            position: relative;
            box-shadow: 0 1px 2px rgba(0,0,0,0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 9px;
            font-weight: 700;
            color: var(--text-secondary);
            flex-shrink: 0;
        }

        .progress-dot:hover {
            transform: scale(1.2);
            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
        }

        .progress-dot.complete {
            background: var(--success);
            border-color: var(--success);
            box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
            color: white;
        }

        .progress-dot.current {
            background: var(--primary);
            border-color: var(--primary);
            width: 24px;
            height: 24px;
            box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
            animation: currentHolePulse 2s infinite;
            color: white;
            font-weight: 700;
            font-size: 10px;
        }

        @keyframes currentHolePulse {
            0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(16, 185, 129, 0.4); }
            50% { transform: scale(1.1); box-shadow: 0 0 12px rgba(16, 185, 129, 0.6); }
        }

        /* 📱 Mobile Keyboard Handling - Removed auto-scroll behavior */
        .card-player-row.keyboard-visible {
            /* No special styling - keep all players visible together */
        }

        /* Sticky Header for Group Scoring - Mobile Optimized */
        .group-minimal-header.sticky-header {
            position: sticky;
            top: 0;
            z-index: 100;
            background: var(--bg-primary);
            border-bottom: 2px solid var(--border-color);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            /* Mobile optimizations */
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        /* Content no longer needs separate scroll container */
        .group-scrollable-content {
            /* Container is now directly scrollable */
        }

        /* Hole Info in Header - Centered */
        .hole-info {
            position: absolute !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
        }

        .hole-text {
            font-size: 18px !important;
            font-weight: 800 !important;
            color: var(--primary) !important;
            white-space: nowrap !important;
        }

        /* Hide recent players section only on scorecard page - keep match creation functionality intact */
        #section-scorecard #recentPlayers,
        #section-scorecard .form-group:has(#recentPlayers) {
            display: none !important;
        }

        /* ============================================ */
        /* READ-ONLY MODE COST PROTECTION STYLING     */
        /* Firebase Billing Protection System         */
        /* ============================================ */

        /* Read-only mode banner */
        .read-only-mode-banner {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: linear-gradient(135deg, #ef4444, #dc2626);
            color: white;
            padding: 12px 20px;
            text-align: center;
            font-weight: 600;
            font-size: 14px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            z-index: 9999;
            animation: readOnlyPulse 3s ease-in-out infinite alternate;
        }

        /* Subtle pulsing animation for read-only banner */
        @keyframes readOnlyPulse {
            0% { opacity: 0.95; }
            100% { opacity: 1; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); }
        }

        /* Disabled button styles during read-only mode */
        .read-only-disabled {
            opacity: 0.5 !important;
            cursor: not-allowed !important;
            background: #9ca3af !important;
            border-color: #9ca3af !important;
            pointer-events: none !important;
        }

        /* Read-only mode toast styling */
        .read-only-toast {
            background: linear-gradient(135deg, #ef4444, #dc2626) !important;
            color: white !important;
            border-left: 4px solid #f87171 !important;
        }

        /* Admin override button styling */
        .admin-override-btn {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
        }

        .admin-override-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(245, 158, 11, 0.4);
            background: linear-gradient(135deg, #d97706, #b45309);
        }

        /* Read-only mode status indicator */
        .read-only-status {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.3);
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            color: #dc2626;
        }

        .read-only-status::before {
            content: "🚨";
            font-size: 14px;
        }

        /* Body padding when read-only banner is active */
        body.read-only-active {
            padding-top: 60px;
        }

        /* Cost protection info panel */
        .cost-protection-info {
            background: linear-gradient(135deg, #fef3c7, #fde68a);
            border: 1px solid #f59e0b;
            border-radius: 8px;
            padding: 16px;
            margin: 16px 0;
            color: #92400e;
        }

        .cost-protection-info h4 {
            margin: 0 0 8px 0;
            color: #78350f;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .cost-protection-info h4::before {
            content: "🛡️";
        }

        /* === PLAYER SELECTION MODAL STYLES === */

        /* Player exists indicator */
        /* Old player-exists-indicator styles removed - replaced with subtle .exists-indicator */

        /* Player modal tabs */
        .player-modal-tabs {
            border-bottom: 1px solid var(--border);
            padding-bottom: 8px;
        }

        .player-tab {
            padding: 8px 16px;
            border: 1px solid var(--border);
            background: var(--bg-secondary);
            color: var(--text-secondary);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 14px;
            font-weight: 500;
        }

        .player-tab:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }

        .player-tab.active {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        /* Player list items */
        .player-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-light);
            cursor: pointer;
            transition: background-color 0.2s ease;
            background: var(--bg-primary);
        }

        .player-item:hover {
            background: var(--bg-secondary);
        }

        .player-item:last-child {
            border-bottom: none;
        }

        .player-item-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .player-item-name {
            font-weight: 600;
            color: var(--text-primary);
            font-size: 16px;
        }

        .player-item-meta {
            font-size: 12px;
            color: var(--text-muted);
        }

        .player-item-badge {
            background: var(--primary);
            color: white;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
        }

        .player-item-badge.recent {
            background: var(--secondary);
        }

        .player-item-badge.frequent {
            background: var(--accent);
        }

        /* Empty state */
        .player-list-empty {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-muted);
        }

        .player-list-empty .empty-icon {
            font-size: 48px;
            margin-bottom: 16px;
            opacity: 0.5;
        }

        /* Enhanced auto-complete styles */
        #scorecardPlayerInput {
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
            border: 2px solid var(--border) !important;
            font-size: 16px !important;
            padding: 12px !important;
            border-radius: 8px !important;
        }

        #scorecardPlayerInput:focus {
            border-color: var(--primary) !important;
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
            outline: none !important;
        }

        /* Make datalist options more visible */
        #playersList {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 8px;
            box-shadow: var(--shadow-lg);
        }

        /* Enhance the browse players button */
        /* Old button styles removed - replaced with clean .modal-btn component */

        /* Enhanced autocomplete dropdown visibility (browser specific) */
        input[list]::-webkit-calendar-picker-indicator {
            display: none;
        }

        /* Custom dropdown styling for browsers that support it */
        datalist {
            position: absolute;
            background-color: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 6px;
            box-shadow: var(--shadow-lg);
            max-height: 200px;
            overflow-y: auto;
            z-index: 1000;
        }

        datalist option {
            padding: 8px 12px;
            cursor: pointer;
            border-bottom: 1px solid var(--border-light);
        }

        datalist option:hover {
            background-color: var(--bg-secondary);
        }

        datalist option:last-child {
            border-bottom: none;
        }

        /* Player typing feedback */
        .player-input-feedback {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-top: none;
            border-radius: 0 0 6px 6px;
            box-shadow: var(--shadow);
            z-index: 100;
            max-height: 200px;
            overflow-y: auto;
        }

        .feedback-item {
            padding: 8px 12px;
            cursor: pointer;
            border-bottom: 1px solid var(--border-light);
            transition: background-color 0.2s ease;
        }

        .feedback-item:hover {
            background: var(--bg-secondary);
        }

        .feedback-item:last-child {
            border-bottom: none;
        }

        /* Enhanced Player Dropdown with Section Headers */
        .player-dropdown {
            position: absolute;
            top: 100% !important;
            bottom: auto !important;
            left: 0;
            right: 0;
            background: white;
            border: 2px solid #e0e0e0;
            border-top: none;
            border-radius: 0 0 8px 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            max-height: 350px;
            overflow-y: auto;
            z-index: 1002; /* Higher than modal content */
        }

        /* Mobile Modal Dropdown Fix - Prevent overflow and handle small screens */
        @media (max-height: 600px) {
            .modal .player-dropdown,
            .modal .match-dropdown {
                max-height: 200px; /* Smaller dropdown on short screens */
            }
        }

        @media (max-height: 500px) {
            .modal .player-dropdown,
            .modal .match-dropdown {
                max-height: 150px; /* Even smaller on very short screens */
                position: fixed; /* Switch to fixed positioning on very small screens */
                top: auto;
                bottom: 80px; /* Position above virtual keyboard area */
                left: 16px;
                right: 16px;
                border-radius: 8px;
                border: 2px solid #e0e0e0;
                z-index: 1002; /* Higher z-index to ensure it appears above modal */
            }
        }

        /* Modal container should allow overflow for dropdowns */
        .modal-content {
            position: relative;
            overflow: visible; /* Allow dropdowns to extend outside modal content */
        }

        /* Enhanced Player Creation UX - Visual State Indicators */
        #createMatchModal .match-player-input.pending-creation {
            background-color: #fffbeb !important;
            border-color: #fbbf24 !important;
            box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.1);
        }

        #createMatchModal .match-player-input.resolving-similar {
            background-color: #fffbeb !important;
            border-color: #fbbf24 !important;
            box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.2);
            position: relative;
        }

        #createMatchModal .match-player-input.resolving-similar::after {
            content: "⚡";
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #f59e0b;
            font-size: 16px;
            font-weight: bold;
            z-index: 10;
            pointer-events: none;
            animation: pulse 1.5s infinite;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        @keyframes pulse {
            0%, 100% {
                opacity: 0.7;
                transform: translateY(-50%) scale(1);
                box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
            }
            50% {
                opacity: 1;
                transform: translateY(-50%) scale(1.1);
                box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2);
            }
        }

        /* Enhanced Similar Players Section Positioning */
        .similar-section.positioned-under-input {
            margin-top: 8px !important;
            margin-bottom: 16px !important;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            animation: slideDown 0.3s ease-out;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Inline success message for completed actions */
        .inline-success {
            position: absolute;
            right: 35px;
            top: 50%;
            transform: translateY(-50%);
            color: #10b981;
            font-size: 14px;
            font-weight: 500;
            animation: fadeInSuccess 0.5s ease;
            z-index: 10;
        }

        @keyframes fadeInSuccess {
            from { opacity: 0; transform: translateY(-50%) scale(0.8); }
            to { opacity: 1; transform: translateY(-50%) scale(1); }
        }

        /* No similar players message */
        .no-similar-players {
            padding: 12px;
            text-align: center;
            color: var(--text-muted);
            font-style: italic;
            background: rgba(255, 193, 7, 0.1);
            border-radius: 4px;
            margin: 8px 0;
        }

        .dropdown-section {
            margin: 0;
        }

        .dropdown-header {
            background: #f8f9fa;
            color: #666;
            font-size: 12px;
            font-weight: 600;
            padding: 8px 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 1px solid #e9ecef;
            position: sticky;
            top: 0;
            z-index: 1;
        }

        .dropdown-item {
            padding: 10px 12px;
            cursor: pointer;
            font-size: 14px;
            color: #333;
            border-bottom: 1px solid #f1f3f4;
            transition: background-color 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .dropdown-item:hover {
            background-color: #f8f9fa;
        }

        .dropdown-item:last-child {
            border-bottom: none;
        }

        .dropdown-divider {
            height: 1px;
            background: #e9ecef;
            margin: 0;
        }

        .dropdown-item.create-new {
            background: #f8fff8;
            color: #10b981;
            font-weight: 600;
            border-top: 2px solid #e9ecef;
            justify-content: center;
        }

        .dropdown-item.create-new:hover {
            background: #ecfdf5;
        }

        .dropdown-item.recent-badge {
            font-size: 11px;
            background: #e3f2fd;
            color: #1976d2;
            padding: 2px 6px;
            border-radius: 12px;
            font-weight: 500;
        }

        .dropdown-item.dropdown-highlighted {
            background-color: #e3f2fd !important;
            border-left: 3px solid #1976d2;
        }

        /* Clean Player Input Components */
        .player-selector-container {
            width: 100%;
        }

        .player-input-group {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .input-wrapper {
            position: relative;
            flex: 1;
        }

        .player-input {
            width: 100%;
            padding: 12px;
            padding-right: 60px; /* Space for indicators */
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .player-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
        }

        .exists-indicator {
            position: absolute;
            right: 35px;
            top: 50%;
            transform: translateY(-50%);
            color: #10b981;
            font-weight: 600;
            font-size: 16px;
            display: none; /* Show via JS when player exists */
            z-index: 10;
        }

        .clear-btn {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #666;
            cursor: pointer;
            padding: 4px 8px;
            display: none; /* Show via JS when player selected */
            border-radius: 4px;
            font-size: 14px;
            font-weight: bold;
            z-index: 10;
            transition: all 0.2s ease;
        }

        .clear-btn:hover {
            color: #333;
            background: #f0f0f0;
        }

        .clear-btn:active {
            transform: translateY(-50%) scale(0.95);
        }

        .modal-btn {
            padding: 12px 16px;
            background: #f8f9fa;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s ease;
            color: #666;
            min-width: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-btn:hover {
            background: #e9ecef;
            border-color: #ced4da;
            color: #495057;
        }

        .modal-btn:active {
            transform: scale(0.95);
        }

        /* Enhanced Modal Styling for Better Layout */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .modal.modal-show {
            display: flex;
        }

        .modal-content {
            background: white;
            border-radius: 12px;
            padding: 24px;
            max-width: 90vw;
            width: 100%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .modal-content .close-btn {
            position: absolute;
            top: 16px;
            right: 16px;
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #666;
            padding: 4px 8px;
            border-radius: 4px;
            transition: all 0.2s ease;
        }

        .modal-content .close-btn:hover {
            background: #f0f0f0;
            color: #333;
        }

        /* Similar Player Options */
        .similar-player-option {
            padding: 12px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            margin-bottom: 8px;
            cursor: pointer;
            background: #f9f9f9;
            transition: all 0.2s ease;
        }

        .similar-player-option:hover {
            background: #f0f0f0;
            border-color: #ccc;
        }

        .similar-player-option:last-child {
            margin-bottom: 0;
        }

        /* Create Confirmation Modal */
        .create-confirmation {
            text-align: center;
            padding: 20px;
        }

        .create-confirmation h3 {
            margin-bottom: 16px;
            color: #333;
        }

        .create-confirmation p {
            margin-bottom: 24px;
            font-size: 16px;
            color: #666;
        }

        .create-confirmation .btn {
            min-width: 120px;
        }

        /* 📱 Scorecard Browse Button - Override mobile modal optimizations */
        .modal-btn[onclick="openPlayerSelectionModal()"] {
            min-height: auto !important;
            padding: 12px 16px !important;
            width: auto !important;
            margin-bottom: 0 !important;
            font-size: 16px !important;
        }

        @media (max-width: 768px) {
            .modal-btn[onclick="openPlayerSelectionModal()"] {
                min-height: 44px !important;
                padding: 10px 14px !important;
                width: auto !important;
            }
        }

        /* 🌙 DARK MODE SUPPORT FOR DROPDOWNS & MODALS */

        /* Dark Mode: Dropdown Items */
        [data-theme="dark"] .dropdown-item {
            background: var(--bg-card);
            color: var(--text-primary);
            border-bottom-color: var(--border-color);
        }

        [data-theme="dark"] .dropdown-item:hover {
            background: var(--bg-secondary);
        }

        [data-theme="dark"] .dropdown-section-header,
        [data-theme="dark"] .dropdown-header {
            background: var(--bg-secondary);
            color: var(--text-secondary);
        }

        [data-theme="dark"] .dropdown-item.create-new {
            background: rgba(16, 185, 129, 0.1);
            color: #34d399;
        }

        [data-theme="dark"] .dropdown-item.create-new:hover {
            background: rgba(16, 185, 129, 0.2);
        }

        [data-theme="dark"] .dropdown-item.recent-badge {
            background: rgba(59, 130, 246, 0.2);
            color: #60a5fa;
        }

        [data-theme="dark"] .dropdown-item.dropdown-highlighted {
            background: rgba(59, 130, 246, 0.2) !important;
            border-left-color: #60a5fa;
        }

        [data-theme="dark"] .dropdown-divider {
            background: var(--border-color);
        }

        /* Dark Mode: Match Dropdown */
        [data-theme="dark"] .match-dropdown {
            background: var(--bg-primary) !important;
            border-color: var(--border-color) !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
        }

        [data-theme="dark"] .player-dropdown {
            background: var(--bg-primary) !important;
            border-color: var(--border-color) !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
        }

        /* Dark Mode: Modal Components */
        [data-theme="dark"] .modal-header {
            background: var(--bg-card);
            color: var(--text-primary);
            border-bottom-color: var(--border-color);
        }

        [data-theme="dark"] .modal-footer {
            background: var(--bg-card);
            border-top-color: var(--border-color);
        }

        [data-theme="dark"] .modal-overlay {
            background: rgba(0, 0, 0, 0.7);
        }

        [data-theme="dark"] .modal-content .close-btn {
            color: var(--text-secondary);
        }

        [data-theme="dark"] .modal-content .close-btn:hover {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }

        [data-theme="dark"] .modal-btn {
            background: var(--primary);
            color: white;
        }

        [data-theme="dark"] .modal-btn:hover {
            background: var(--primary-dark);
        }

        /* Dark Mode: Similar Player Options */
        [data-theme="dark"] .similar-player-option {
            background: var(--bg-secondary);
            border-color: var(--border-color);
            color: var(--text-primary);
        }

        [data-theme="dark"] .similar-player-option:hover {
            background: var(--bg-card);
            border-color: var(--primary);
        }

        /* Dark Mode: Create Confirmation Modal */
        [data-theme="dark"] .create-confirmation h3 {
            color: var(--text-primary);
        }

        [data-theme="dark"] .create-confirmation p {
            color: var(--text-secondary);
        }

        /* Dark Mode: Similar Player Buttons */
        [data-theme="dark"] .create-anyway-btn {
            background-color: var(--success);
            color: white;
        }

        [data-theme="dark"] .create-anyway-btn:hover {
            background-color: var(--success-dark);
        }

        [data-theme="dark"] .cancel-btn {
            background-color: var(--text-secondary);
            color: var(--bg-primary);
        }

        [data-theme="dark"] .cancel-btn:hover {
            background-color: var(--text-primary);
        }

        /* 📱 MODAL DROPDOWN FIXES */

        /* Ensure dropdowns work properly within modals */
        .modal .match-dropdown,
        .modal .player-dropdown {
            z-index: 1002 !important; /* Above modal content */
            max-height: 250px !important; /* Prevent overflow in modals */
        }

        /* Better contrast for dropdowns in dark mode within modals */
        .modal [data-theme="dark"] .match-dropdown,
        .modal [data-theme="dark"] .player-dropdown {
            background: var(--bg-secondary) !important;
            border: 2px solid var(--primary) !important;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
        }

        /* Ensure dropdown items have proper contrast in modals */
        .modal [data-theme="dark"] .dropdown-item {
            background: var(--bg-secondary) !important;
            color: var(--text-primary) !important;
            border-bottom-color: var(--border-color) !important;
        }

        .modal [data-theme="dark"] .dropdown-item:hover {
            background: var(--bg-card) !important;
        }

        /* 📱 EXPANDING SEARCH VIEW - Mobile Player Selection */

        /* Modal content that can switch modes */
        .modal-content {
            display: flex;
            flex-direction: column;
            height: 100vh;
            max-height: 100vh;
            position: relative;
        }

        /* Normal form view */
        .create-match-form {
            overflow-y: auto;
            padding: 20px;
        }

        /* Expanded search view */
        .search-expanded-view {
            display: flex;
            flex-direction: column;
            height: 100%;
            background: var(--bg-primary);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1003;
        }

        .search-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-color);
        }

        .search-back-btn {
            background: none;
            border: none;
            color: var(--primary);
            font-size: 16px;
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        .search-back-btn:hover {
            background: var(--bg-card);
        }

        .search-input-container {
            padding: 12px;
            background: var(--bg-primary);
            border-bottom: 1px solid var(--border-color);
        }

        .search-input-container input {
            width: 100%;
            padding: 12px;
            font-size: 16px; /* Prevents iOS zoom */
            border: 2px solid var(--border-color);
            border-radius: 8px;
            background: var(--bg-card);
            color: var(--text-primary);
            transition: border-color 0.2s ease;
        }

        .search-input-container input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
        }

        /* Search results take remaining space */
        .search-results {
            flex: 1;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            background: var(--bg-primary);
        }

        .search-result-item {
            padding: 14px 16px;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--bg-card);
            color: var(--text-primary);
            transition: background-color 0.2s ease;
            min-height: 48px; /* Touch-friendly */
        }

        .search-result-item:active {
            background: var(--bg-secondary);
        }

        .search-result-item:hover {
            background: var(--bg-secondary);
        }

        /* Section headers in results */
        .results-section {
            padding: 8px 16px;
            background: var(--bg-secondary);
            font-size: 12px;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            position: sticky;
            top: 0;
            z-index: 1;
            border-bottom: 1px solid var(--border-color);
        }

        /* Create new button */
        .create-new-sticky {
            position: sticky;
            bottom: 0;
            padding: 12px;
            background: var(--bg-primary);
            border-top: 1px solid var(--border-color);
        }

        .create-new-sticky button {
            width: 100%;
            padding: 14px;
            background: var(--success);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            min-height: 48px;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        .create-new-sticky button:hover {
            background: var(--success-dark);
        }

        /* Smooth transitions */
        .create-match-form,
        .search-expanded-view {
            animation: fadeIn 0.2s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* Desktop - hide search view */
        @media (min-width: 769px) {
            .search-expanded-view {
                display: none !important;
            }
        }

        /* Mobile adjustments */
        @media (max-width: 768px) {
            .modal-content {
                height: 100vh;
                max-height: 100vh;
                border-radius: 0;
                margin: 0;
            }
        }

        /* 📱 MOBILE MODAL OPTIMIZATIONS */

        /* Enhanced Modal Touch Targets */
        @media (max-width: 768px) {
            .modal-content .close-btn {
                min-width: 44px;
                min-height: 44px;
                font-size: 18px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .modal .modal-btn {
                min-height: 48px;
                font-size: 16px;
                padding: 12px 24px;
                border-radius: 8px;
            }

            .similar-player-option {
                min-height: 48px;
                padding: 14px 16px;
                font-size: 16px;
                border-radius: 10px;
            }

            /* Enhanced Modal Viewport Management */
            .modal-content {
                max-height: 90vh;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                margin: 5vh auto;
            }

            /* Prevent viewport zoom on inputs in modals */
            .modal input[type="text"],
            .modal input[type="email"],
            .modal input[type="password"],
            .modal textarea,
            .modal select {
                font-size: 16px !important;
            }

            /* Better modal header on mobile */
            .modal-header {
                padding: 16px 20px;
                border-bottom: 1px solid var(--border-color);
            }

            .modal-header h3 {
                font-size: 18px;
                margin: 0;
            }

            /* Improved modal footer spacing */
            .modal-footer {
                padding: 16px 20px;
                position: sticky;
                bottom: 0;
                background: var(--bg-card);
                border-top: 1px solid var(--border-color);
            }
        }

        /* 📱 Very Small Screen Optimizations */
        @media (max-width: 480px) {
            .modal-content {
                margin: 2vh auto;
                max-height: 96vh;
                border-radius: 12px 12px 0 0;
            }

            .modal .modal-btn {
                width: 100%;
                margin-bottom: 8px;
            }

            .modal-footer .modal-btn:last-child {
                margin-bottom: 0;
            }
        }

        /* 📱 Landscape Mobile Optimizations */
        @media (max-height: 600px) and (orientation: landscape) {
            .modal-content {
                max-height: 85vh;
                margin: 2vh auto;
            }

            .modal-header,
            .modal-footer {
                padding: 12px 16px;
            }
        }
            margin: 0 6px;
        }

        .feedback-suggestion {
            color: var(--text-secondary);
            font-size: 14px;
        }

        .feedback-match {
            color: var(--success);
            font-weight: 600;
        }

        .feedback-similar {
            color: var(--warning);
            font-style: italic;
        }

        /* Responsive design for player modal */
        @media (max-width: 768px) {
            .player-modal-tabs {
                flex-wrap: wrap;
            }

            .player-tab {
                flex: 1;
                text-align: center;
                min-width: 100px;
            }

            .player-item {
                padding: 10px 12px;
            }

            .player-item-name {
                font-size: 15px;
            }
        }

        /* ===============================================
           NATIVE DATALIST INLINE UI COMPONENTS
           =============================================== */

        /* Inline UI Containers */
        .inline-ui-container {
            margin-top: 8px;
        }

        /* Similar Players Inline */
        .similar-inline {
            padding: 12px;
            background: #fffbeb;
            border: 1px solid #fbbf24;
            border-radius: 8px;
            animation: slideDown 0.2s ease;
        }

        .similar-header {
            font-size: 14px;
            color: #92400e;
            margin-bottom: 8px;
            font-weight: 600;
        }

        .similar-options {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-bottom: 8px;
        }

        .similar-option {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 12px;
            background: white;
            border: 1px solid #fbbf24;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.2s ease;
        }

        .similar-option:hover {
            background: #fef3c7;
        }

        .similar-option:active {
            background: #fbbf24;
            color: white;
        }

        .match-percent {
            background: #3b82f6;
            color: white;
            padding: 2px 6px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
        }

        /* Create Confirmation */
        .create-confirm {
            padding: 12px;
            background: #f0fdf4;
            border: 1px solid #10b981;
            border-radius: 8px;
            animation: slideDown 0.2s ease;
        }

        .confirm-message {
            font-size: 14px;
            color: #166534;
            margin-bottom: 10px;
        }

        .confirm-buttons {
            display: flex;
            gap: 8px;
        }

        .btn-confirm {
            flex: 1;
            padding: 10px;
            background: #10b981;
            color: white;
            border: none;
            border-radius: 6px;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        .btn-confirm:hover {
            background: #059669;
        }

        .btn-cancel {
            flex: 1;
            padding: 10px;
            background: white;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .btn-cancel:hover {
            background: #f9fafb;
            border-color: #9ca3af;
        }

        .create-anyway-btn {
            width: 100%;
            padding: 10px;
            background: white;
            border: 1px solid #10b981;
            color: #10b981;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .create-anyway-btn:hover {
            background: #f0fdf4;
        }

        /* Animation */
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Player input states */
        #createMatchModal .match-player-input.valid-player {
            background-color: #f0fdf4;
            border-color: #10b981;
        }

        #createMatchModal .match-player-input.needs-validation {
            border-color: #fbbf24;
            background-color: #fffbeb;
            transition: all 0.2s ease;
        }

        /* Dark mode support for inline UI */
        [data-theme="dark"] .similar-inline {
            background: #451a03;
            border-color: #f59e0b;
        }

        [data-theme="dark"] .similar-header {
            color: #fbbf24;
        }

        [data-theme="dark"] .similar-option {
            background: var(--bg-card);
            border-color: #f59e0b;
            color: var(--text-primary);
        }

        [data-theme="dark"] .similar-option:hover {
            background: #451a03;
        }

        [data-theme="dark"] .create-confirm {
            background: #064e3b;
            border-color: #10b981;
        }

        [data-theme="dark"] .confirm-message {
            color: #a7f3d0;
        }

        [data-theme="dark"] .btn-cancel {
            background: var(--bg-card);
            border-color: var(--border);
            color: var(--text-primary);
        }

        [data-theme="dark"] .create-anyway-btn {
            background: var(--bg-card);
            color: #10b981;
        }

        /* Mobile optimizations */
        @media (max-width: 768px) {
            .similar-option,
            .btn-confirm,
            .btn-cancel {
                padding: 12px;
                font-size: 16px; /* Prevent iOS zoom */
                min-height: 44px; /* Touch-friendly */
            }

            .create-anyway-btn {
                padding: 12px;
                font-size: 16px;
                min-height: 44px;
            }

            .similar-inline,
            .create-confirm {
                padding: 16px;
            }
        }

        /* Scorecard Player Input Selection Styling */
        #scorecardPlayerInput.valid-player {
            background-color: #f0fdf4;
            border-color: #10b981;
        }

        #scorecardPlayerInput.valid-player {
            border-color: #10b981;
            background-color: #f0fdf4;
        }

        [data-theme="dark"] #scorecardPlayerInput.valid-player,
        [data-theme="dark"] #scorecardPlayerInput.valid-player {
            background-color: rgba(16, 185, 129, 0.1);
            border-color: #10b981;
        }

        /* === CREATE MATCH OPTIMIZED SYSTEM CSS - FROM IMPLEMENTATION PLAN === */

        /* Modal Header - Remove green background */
        #createMatchModal .modal-header {
            background: var(--bg-primary);
            color: var(--text-primary);
            border-bottom: 1px solid var(--border-color);
            padding: 16px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #createMatchModal .modal-header h2 {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
        }

        #createMatchModal .close-btn {
            background: none;
            border: none;
            font-size: 20px;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            transition: background-color 0.2s;
        }

        #createMatchModal .close-btn:hover {
            background: var(--bg-secondary);
        }

        /* Match Type Tabs - Proper styling */
        #createMatchModal .match-type-tabs {
            display: flex;
            gap: 8px;
            margin: 16px 20px;
            padding: 4px;
            background: var(--bg-secondary);
            border-radius: 8px;
        }

        #createMatchModal .tab-btn {
            flex: 1;
            padding: 10px 16px;
            border: none;
            border-radius: 6px;
            background: transparent;
            color: var(--text-secondary);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        #createMatchModal .tab-btn.active {
            background: var(--primary);
            color: white;
            box-shadow: 0 2px 4px rgba(var(--primary-rgb), 0.2);
        }

        #createMatchModal .tab-btn:hover:not(.active) {
            background: var(--bg-card);
            color: var(--text-primary);
        }

        /* Recent Players Bar */
        #createMatchModal .recent-players-bar {
            padding: 12px 20px;
            background: var(--bg-secondary);
            margin: 0;
            display: flex;
            align-items: center;
            gap: 8px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
        }

        #createMatchModal .recent-players-bar .label {
            font-size: 14px;
            font-weight: 600;
            color: #666;
            white-space: nowrap;
        }

        #createMatchModal .recent-chips {
            display: flex;
            gap: 6px;
            flex: 1;
            overflow-x: auto;
        }

        #createMatchModal .chip {
            padding: 6px 12px;
            background: white;
            border: 1px solid #ddd;
            border-radius: 16px;
            font-size: 14px;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.2s;
            flex-shrink: 0;
        }

        #createMatchModal .chip:active {
            background: #10b981;
            color: white;
            border-color: #10b981;
        }

        /* Team Sections */
        #createMatchModal .team-section {
            margin: 0;
            padding: 16px 20px;
            border-bottom: 1px solid var(--border-color);
        }

        #createMatchModal .team-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        #createMatchModal .team-header h3 {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
        }

        #createMatchModal .copy-prev-btn {
            font-size: 12px;
            color: var(--primary);
            background: transparent;
            border: 1px solid var(--primary);
            padding: 6px 12px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-weight: 500;
        }

        #createMatchModal .copy-prev-btn:hover {
            background: var(--primary);
            color: white;
        }

        #createMatchModal .copy-prev-btn:active {
            transform: translateY(1px);
        }

        /* Team Inputs Grid */
        #createMatchModal .team-inputs {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        /* Match Player Inputs */
        #createMatchModal .match-player-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            transition: all 0.2s ease;
            background: white;
            color: #333;
            box-sizing: border-box;
        }

        #createMatchModal .match-player-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
        }

        #createMatchModal .match-player-input::placeholder {
            color: var(--text-muted);
        }

        /* Validation States */
        #createMatchModal .match-player-input.valid-player {
            border-color: #10b981;
            background-color: rgba(16, 185, 129, 0.05);
        }

        #createMatchModal .match-player-input.needs-validation {
            border-color: #f59e0b;
            background-color: rgba(245, 158, 11, 0.05);
        }


        /* === POLISHED CREATE MATCH MODAL STYLES === */

        /* Modal Base */
        #createMatchModal .create-match-content {
            max-width: 400px;
            padding: 0;
            border-radius: 16px;
            overflow: visible;
        }

        /* Modal Header */
        #createMatchModal .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            border-bottom: 1px solid #e5e7eb;
        }

        #createMatchModal .modal-title {
            font-size: 20px;
            font-weight: 700;
            color: #111827;
            margin: 0;
        }

        #createMatchModal .modal-close {
            background: none;
            border: none;
            padding: 4px;
            cursor: pointer;
            color: #6b7280;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            transition: all 0.2s;
        }

        #createMatchModal .modal-close:hover {
            background: #f3f4f6;
            color: #111827;
        }

        /* Match Type Tabs */
        #createMatchModal .match-type-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            padding: 16px;
            background: #f9fafb;
        }

        #createMatchModal .match-type-btn {
            padding: 10px 16px;
            border: 2px solid #e5e7eb;
            background: white;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 600;
            color: #6b7280;
            cursor: pointer;
            transition: all 0.2s;
        }

        #createMatchModal .match-type-btn:hover {
            border-color: #10b981;
            color: #10b981;
        }

        #createMatchModal .match-type-btn.active {
            background: #10b981;
            border-color: #10b981;
            color: white;
        }

        /* Recent Players Section */
        #createMatchModal .recent-players-section {
            padding: 16px;
            background: #f0fdf4;
            border-bottom: 1px solid #bbf7d0;
        }

        #createMatchModal .section-label {
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            color: #059669;
            margin-bottom: 10px;
            letter-spacing: 0.5px;
        }

        #createMatchModal .recent-chips-container {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding: 4px 0;
            -webkit-overflow-scrolling: touch;
        }

        #createMatchModal .recent-chips-container::-webkit-scrollbar {
            height: 4px;
        }

        #createMatchModal .recent-chips-container::-webkit-scrollbar-track {
            background: #d1fae5;
            border-radius: 2px;
        }

        #createMatchModal .recent-chips-container::-webkit-scrollbar-thumb {
            background: #10b981;
            border-radius: 2px;
        }

        #createMatchModal .player-chip {
            padding: 8px 14px;
            background: white;
            border: 2px solid #d1fae5;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
            color: #065f46;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.2s;
            flex-shrink: 0;
        }

        #createMatchModal .player-chip:hover {
            background: #10b981;
            border-color: #10b981;
            color: white;
            transform: translateY(-1px);
        }

        #createMatchModal .player-chip:active {
            transform: translateY(0);
        }

        #createMatchModal .no-recent-players {
            color: #6b7280;
            font-size: 14px;
            font-style: italic;
        }

        /* BULK CREATE MODAL - EXACT SAME RECENT PLAYER CHIP STYLING AS CREATE MATCH */
        #bulkCreateModal .recent-chips-container {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding: 4px 0;
            -webkit-overflow-scrolling: touch;
        }
        #bulkCreateModal .recent-chips-container::-webkit-scrollbar {
            height: 4px;
        }
        #bulkCreateModal .recent-chips-container::-webkit-scrollbar-track {
            background: #d1fae5;
            border-radius: 2px;
        }
        #bulkCreateModal .recent-chips-container::-webkit-scrollbar-thumb {
            background: #10b981;
            border-radius: 2px;
        }
        #bulkCreateModal .player-chip {
            padding: 8px 14px !important;
            background: white !important;
            border: 2px solid #d1fae5 !important;
            border-radius: 20px !important;
            font-size: 14px !important;
            font-weight: 600 !important;
            color: #065f46 !important;
            white-space: nowrap !important;
            cursor: pointer !important;
            transition: all 0.2s !important;
            flex-shrink: 0 !important;
        }
        #bulkCreateModal .player-chip:hover {
            background: #10b981 !important;
            border-color: #10b981 !important;
            color: white !important;
            transform: translateY(-1px) !important;
        }
        #bulkCreateModal .player-chip:active {
            transform: translateY(0) !important;
        }
        #bulkCreateModal .no-recent-players {
            color: #6b7280;
            font-size: 14px;
            font-style: italic;
        }

        /* DARK THEME STYLES FOR BULK CREATE MODAL */
        [data-theme="dark"] #bulkCreateModal .player-chip {
            background: var(--bg-card) !important;
            border-color: var(--border) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #bulkCreateModal .player-chip:hover {
            background: var(--primary) !important;
            border-color: var(--primary) !important;
            color: white !important;
        }

        [data-theme="dark"] #bulkCreateModal .player-input {
            background: var(--bg-card);
            border-color: var(--border);
            color: var(--text-primary);
        }

        [data-theme="dark"] #bulkCreateModal .player-input:focus {
            background: var(--bg-card) !important;
            border-color: var(--secondary) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #bulkCreateModal .player-input.valid-player {
            background: rgba(16, 185, 129, 0.1);
            border-color: var(--primary);
            color: var(--text-primary);
        }

        [data-theme="dark"] #bulkCreateModal .player-input.needs-validation {
            background: rgba(245, 158, 11, 0.1);
            border-color: var(--accent);
            color: var(--text-primary);
        }

        [data-theme="dark"] #bulkCreateModal .no-recent-players {
            color: var(--text-secondary);
        }

        /* DARK THEME: Bulk Create Modal Structure */
        [data-theme="dark"] #bulkCreateModal .modal-content {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #bulkCreateModal .modal-header {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
            border-bottom-color: var(--border) !important;
        }

        [data-theme="dark"] #bulkCreateModal .modal-footer {
            background: var(--bg-card) !important;
            border-top-color: var(--border) !important;
        }

        [data-theme="dark"] #bulkCreateModal .close-btn {
            color: var(--text-secondary) !important;
        }

        [data-theme="dark"] #bulkCreateModal .close-btn:hover {
            background: var(--bg-secondary) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #bulkCreateModal .team-header {
            color: var(--text-primary);
        }

        [data-theme="dark"] #bulkCreateModal h3,
        [data-theme="dark"] #bulkCreateModal h4,
        [data-theme="dark"] #bulkCreateModal label {
            color: var(--text-primary) !important;
        }

        /* DARK THEME: Create Match Modal Structure */
        [data-theme="dark"] #createMatchModal .modal-content {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #createMatchModal .modal-header {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
            border-bottom-color: var(--border) !important;
        }

        [data-theme="dark"] #createMatchModal .modal-footer {
            background: var(--bg-card) !important;
            border-top-color: var(--border) !important;
        }

        [data-theme="dark"] #createMatchModal .close-btn {
            color: var(--text-secondary) !important;
        }

        [data-theme="dark"] #createMatchModal .close-btn:hover {
            background: var(--bg-secondary) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #createMatchModal .team-header {
            color: var(--text-primary);
        }

        [data-theme="dark"] #createMatchModal h3,
        [data-theme="dark"] #createMatchModal h4,
        [data-theme="dark"] #createMatchModal label {
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #createMatchModal .player-input {
            background: var(--bg-card);
            border-color: var(--border);
            color: var(--text-primary);
        }

        [data-theme="dark"] #createMatchModal .player-input:focus {
            background: var(--bg-card) !important;
            border-color: var(--secondary) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #createMatchModal .player-input.valid-player {
            background: rgba(16, 185, 129, 0.1);
            border-color: var(--primary);
            color: var(--text-primary);
        }

        [data-theme="dark"] #createMatchModal .player-input.needs-validation {
            background: rgba(245, 158, 11, 0.1);
            border-color: var(--accent);
            color: var(--text-primary);
        }

        [data-theme="dark"] #createMatchModal .player-chip {
            background: var(--bg-card) !important;
            border-color: var(--border) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #createMatchModal .player-chip:hover {
            background: var(--primary) !important;
            border-color: var(--primary) !important;
            color: white !important;
        }

        /* COMPREHENSIVE DARK THEME: All Create Match Modal Elements */
        [data-theme="dark"] #createMatchModal .teams-container {
            background: var(--bg-card) !important;
        }

        [data-theme="dark"] #createMatchModal .team-section {
            background: var(--bg-secondary) !important;
            border-color: var(--border) !important;
        }

        [data-theme="dark"] #createMatchModal .match-details {
            background: var(--bg-card) !important;
            border-color: var(--border) !important;
        }

        [data-theme="dark"] #createMatchModal .recent-players-section {
            background: var(--bg-secondary) !important;
        }

        [data-theme="dark"] #createMatchModal .recent-chips-container {
            background: var(--bg-secondary) !important;
        }

        [data-theme="dark"] #createMatchModal .match-type-toggle {
            background: var(--bg-secondary) !important;
        }

        [data-theme="dark"] #createMatchModal .match-type-btn {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
            border-color: var(--border) !important;
        }

        [data-theme="dark"] #createMatchModal .match-type-btn.active {
            background: var(--primary) !important;
            color: white !important;
        }

        [data-theme="dark"] #createMatchModal .copy-team-btn {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
            border-color: var(--border) !important;
        }

        [data-theme="dark"] #createMatchModal .copy-team-btn:hover {
            background: var(--bg-secondary) !important;
        }

        [data-theme="dark"] #createMatchModal input[type="number"],
        [data-theme="dark"] #createMatchModal select {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
            border-color: var(--border) !important;
        }

        [data-theme="dark"] #createMatchModal .no-recent-players {
            color: var(--text-secondary) !important;
        }

        /* COMPREHENSIVE DARK THEME: All Bulk Create Modal Elements */
        [data-theme="dark"] #bulkCreateModal .teams-container {
            background: var(--bg-card) !important;
        }

        [data-theme="dark"] #bulkCreateModal .team-section {
            background: var(--bg-secondary) !important;
            border-color: var(--border) !important;
        }

        [data-theme="dark"] #bulkCreateModal .match-details {
            background: var(--bg-card) !important;
            border-color: var(--border) !important;
        }

        [data-theme="dark"] #bulkCreateModal .recent-players-section {
            background: var(--bg-secondary) !important;
        }

        [data-theme="dark"] #bulkCreateModal .recent-chips-container {
            background: var(--bg-secondary) !important;
        }

        [data-theme="dark"] #bulkCreateModal .match-type-toggle {
            background: var(--bg-secondary) !important;
        }

        [data-theme="dark"] #bulkCreateModal .match-type-btn {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
            border-color: var(--border) !important;
        }

        [data-theme="dark"] #bulkCreateModal .match-type-btn.active {
            background: var(--primary) !important;
            color: white !important;
        }

        [data-theme="dark"] #bulkCreateModal .copy-team-btn {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
            border-color: var(--border) !important;
        }

        [data-theme="dark"] #bulkCreateModal .copy-team-btn:hover {
            background: var(--bg-secondary) !important;
        }

        [data-theme="dark"] #bulkCreateModal input[type="number"],
        [data-theme="dark"] #bulkCreateModal select {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
            border-color: var(--border) !important;
        }

        /* FIX CSS SPECIFICITY: Match existing selector patterns */
        [data-theme="dark"] #createMatchModal .team-card {
            background: var(--bg-tertiary) !important;
            border-color: var(--border) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #bulkCreateModal .team-card {
            background: var(--bg-tertiary) !important;
            border-color: var(--border) !important;
            color: var(--text-primary) !important;
        }

        /* FIX SPECIFIC SELECTORS: Override existing createMatchModal styles */
        [data-theme="dark"] #createMatchModal .match-player-input {
            background: var(--bg-card) !important;
            border-color: var(--border) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #createMatchModal .match-player-input.valid-player {
            background: rgba(16, 185, 129, 0.1) !important;
            border-color: var(--primary) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #createMatchModal .match-player-input.needs-validation {
            background: rgba(245, 158, 11, 0.1) !important;
            border-color: var(--accent) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #createMatchModal .match-player-input:focus {
            background: var(--bg-card) !important;
            border-color: var(--secondary) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #createMatchModal .modal-header {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
            border-bottom-color: var(--border) !important;
        }

        [data-theme="dark"] #createMatchModal .modal-header h2 {
            color: var(--text-primary) !important;
        }

        /* COMPREHENSIVE: All remaining createMatchModal selectors */
        [data-theme="dark"] #createMatchModal .match-type-container {
            background: var(--bg-secondary) !important;
        }

        [data-theme="dark"] #createMatchModal .match-details-card {
            background: var(--bg-card) !important;
            border-color: var(--border) !important;
        }

        [data-theme="dark"] #createMatchModal .detail-label {
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #createMatchModal .detail-select,
        [data-theme="dark"] #createMatchModal .money-input {
            background: var(--bg-secondary) !important;
            color: var(--text-primary) !important;
            border-color: var(--border) !important;
        }

        [data-theme="dark"] #createMatchModal .detail-select option,
        [data-theme="dark"] #createMatchModal #courseSelect option {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #createMatchModal #courseSelect {
            background: var(--bg-secondary) !important;
            color: var(--text-primary) !important;
            border-color: var(--border) !important;
        }

        [data-theme="dark"] #createMatchModal .input-with-prefix {
            background: var(--bg-secondary) !important;
            border-color: var(--border) !important;
        }

        [data-theme="dark"] #createMatchModal .prefix {
            color: var(--text-secondary) !important;
            background: var(--bg-secondary) !important;
        }

        [data-theme="dark"] #createMatchModal .handicaps-section {
            background: var(--bg-card) !important;
            border-color: var(--border) !important;
        }

        [data-theme="dark"] #createMatchModal .handicaps-toggle {
            background: var(--bg-secondary) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #createMatchModal .handicaps-content {
            background: var(--bg-card) !important;
        }

        [data-theme="dark"] #createMatchModal .form-label {
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #createMatchModal input[type="number"] {
            background: var(--bg-secondary) !important;
            color: var(--text-primary) !important;
            border-color: var(--border) !important;
        }

        [data-theme="dark"] #createMatchModal .match-details-toggle {
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #createMatchModal .match-details-toggle:hover {
            background: var(--bg-secondary) !important;
        }

        [data-theme="dark"] #createMatchModal .match-details-content {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #createMatchModal .toggle-hint {
            color: var(--text-secondary) !important;
            background: var(--bg-secondary) !important;
        }

        [data-theme="dark"] #createMatchModal .close-btn {
            color: var(--text-secondary) !important;
        }

        [data-theme="dark"] #createMatchModal .close-btn:hover {
            background: var(--bg-secondary) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #createMatchModal .match-type-tabs {
            background: var(--bg-secondary) !important;
        }

        [data-theme="dark"] #createMatchModal .tab-btn {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
            border-color: var(--border) !important;
        }

        [data-theme="dark"] #createMatchModal .tab-btn.active {
            background: var(--primary) !important;
            color: white !important;
        }

        [data-theme="dark"] #createMatchModal .tab-btn:hover:not(.active) {
            background: var(--bg-secondary) !important;
        }

        [data-theme="dark"] #createMatchModal .recent-players-bar {
            background: var(--bg-secondary) !important;
        }

        [data-theme="dark"] #createMatchModal .recent-players-bar .label {
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #createMatchModal .recent-chips {
            background: var(--bg-secondary) !important;
        }

        [data-theme="dark"] #createMatchModal .chip {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
            border-color: var(--border) !important;
        }

        [data-theme="dark"] #createMatchModal .chip:active {
            background: var(--primary) !important;
            color: white !important;
        }

        [data-theme="dark"] #createMatchModal .team-title {
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #createMatchModal .copy-prev-btn {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
            border-color: var(--border) !important;
        }

        [data-theme="dark"] #createMatchModal .copy-prev-btn:hover {
            background: var(--bg-secondary) !important;
        }

        [data-theme="dark"] #createMatchModal .detail-label {
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #createMatchModal .detail-select {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
            border-color: var(--border) !important;
        }

        [data-theme="dark"] #createMatchModal .course-select {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
            border-color: var(--border) !important;
        }

        [data-theme="dark"] #createMatchModal .money-input {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
            border-color: var(--border) !important;
        }

        [data-theme="dark"] #createMatchModal .prefix {
            background: var(--bg-secondary) !important;
            color: var(--text-primary) !important;
            border-color: var(--border) !important;
        }

        [data-theme="dark"] #createMatchModal .create-match-button {
            background: var(--primary) !important;
            color: white !important;
        }

        [data-theme="dark"] #createMatchModal .create-match-btn {
            background: var(--primary) !important;
            color: white !important;
        }

        /* FIX DROPDOWN OPTIONS IN DARK MODE */
        [data-theme="dark"] #createMatchModal select option {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #createMatchModal .detail-select option {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #createMatchModal .course-select option {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
        }

        /* Also fix for bulk create modal */
        [data-theme="dark"] #bulkCreateModal select option {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #bulkCreateModal .detail-select option {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #bulkCreateModal .course-select option {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
        }

        /* Teams Container */
        #createMatchModal .teams-container {
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        #createMatchModal .team-card {
            background: #f9fafb;
            border-radius: 12px;
            padding: 16px;
            border: 1px solid #e5e7eb;
        }

        #createMatchModal .team-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        #createMatchModal .team-title {
            font-size: 16px;
            font-weight: 700;
            color: #111827;
            margin: 0;
        }

        #createMatchModal .copy-team-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            background: white;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
            color: #6b7280;
            cursor: pointer;
            transition: all 0.2s;
        }

        #createMatchModal .copy-team-btn:hover {
            border-color: #10b981;
            color: #10b981;
            background: #f0fdf4;
        }

        #createMatchModal .player-inputs-grid,
        #bulkCreateModal .player-inputs-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        /* Player Input Fields */
        #createMatchModal .player-input,
        #bulkCreateModal .player-input {
            padding: 10px 12px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 15px;
            transition: all 0.2s;
            background: white;
        }

        #createMatchModal .player-input:focus,
        #bulkCreateModal .player-input:focus {
            outline: none;
            border-color: #3b82f6 !important;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
            background: white !important;
        }

        /* SPECIFIC FIX: Override global input:focus for bulk create */
        #bulkCreateModal input.player-input:focus {
            border-color: #3b82f6 !important;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
            background-color: white !important;
        }

        #createMatchModal .player-input.valid-player,
        #bulkCreateModal .player-input.valid-player {
            border-color: #10b981;
            background: #f0fdf4;
        }

        #createMatchModal .player-input.needs-validation,
        #bulkCreateModal .player-input.needs-validation {
            border-color: #f59e0b;
            background: #fffbeb;
        }

        /* Match Details Card */
        #createMatchModal .match-details-card {
            margin: 0 16px;
            padding: 16px;
            background: #f9fafb;
            border-radius: 12px;
            border: 1px solid #e5e7eb;
        }

        #createMatchModal .detail-row {
            margin-bottom: 16px;
        }

        #createMatchModal .detail-label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: #6b7280;
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        #createMatchModal .detail-select {
            width: 100%;
            padding: 10px 12px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 15px;
            background: white;
            cursor: pointer;
        }

        #createMatchModal .money-inputs {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 16px;
        }

        #createMatchModal .money-input-group {
            display: flex;
            flex-direction: column;
        }

        #createMatchModal .input-with-prefix {
            position: relative;
            display: flex;
            align-items: center;
        }

        #createMatchModal .prefix {
            position: absolute;
            left: 12px;
            color: #6b7280;
            font-weight: 500;
        }

        #createMatchModal .money-input {
            width: 100%;
            padding: 10px 12px 10px 28px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 15px;
            background: white;
        }

        #createMatchModal .money-input:focus {
            outline: none;
            border-color: #3b82f6;
        }

        /* Match Details Section */
        #createMatchModal .match-details-section {
            margin-bottom: 16px;
            padding-bottom: 16px;
            border-bottom: 1px solid #e5e7eb;
        }

        #createMatchModal .match-details-toggle {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            padding: 8px;
            margin: -8px;
            border-radius: 6px;
            transition: background 0.2s;
        }

        #createMatchModal .match-details-toggle:hover {
            background: #f3f4f6;
        }

        #createMatchModal .match-details-toggle span:first-child {
            font-weight: 600;
            color: #374151;
        }

        #createMatchModal .match-details-content {
            margin-top: 12px;
            padding: 12px;
            background: white;
            border-radius: 8px;
        }

        /* Handicaps Section */
        #createMatchModal .handicaps-section {
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid #e5e7eb;
        }

        #createMatchModal .handicaps-toggle {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            padding: 8px;
            margin: -8px;
            border-radius: 6px;
            transition: background 0.2s;
        }

        #createMatchModal .handicaps-toggle:hover {
            background: #f3f4f6;
        }

        #createMatchModal .handicaps-toggle span:first-child {
            font-weight: 600;
            color: #374151;
        }

        #createMatchModal .toggle-hint {
            font-size: 12px;
            color: #9ca3af;
            background: #f3f4f6;
            padding: 2px 8px;
            border-radius: 12px;
        }

        #createMatchModal .handicaps-content {
            margin-top: 12px;
            padding: 12px;
            background: white;
            border-radius: 8px;
        }

        /* Create Match Button */
        #createMatchModal .create-match-button {
            margin: 20px;
            margin-top: 16px;
            width: calc(100% - 40px);
            padding: 14px;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
        }

        #createMatchModal .create-match-button:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
        }

        #createMatchModal .create-match-button:active {
            transform: translateY(0);
        }

        /* Responsive adjustments */
        @media (max-width: 380px) {
            #createMatchModal .player-inputs-grid {
                grid-template-columns: 1fr;
            }

            #createMatchModal .money-inputs {
                grid-template-columns: 1fr;
            }

            #createMatchModal .create-match-content {
                max-width: 100%;
            }
        }

        /* Pulse animation for chips */
        @keyframes pulse-green {
            0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
            50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
            100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
        }

        /* Match Details */
        #createMatchModal .match-details-compact {
            margin: 0;
            padding: 20px;
            background: var(--bg-secondary);
            border-top: 1px solid var(--border-color);
        }

        #createMatchModal .course-select {
            width: 100%;
            padding: 12px;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            margin-bottom: 12px;
            font-size: 16px;
            background: var(--bg-primary);
            color: var(--text-primary);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        #createMatchModal .course-select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
        }

        #createMatchModal .money-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        #createMatchModal .money-row input {
            padding: 12px;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            font-size: 16px;
            background: var(--bg-primary);
            color: var(--text-primary);
            text-align: center;
            transition: all 0.2s ease;
        }

        #createMatchModal .money-row input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
        }

        /* Create Match Button */
        #createMatchModal .create-match-btn {
            width: 100%;
            padding: 16px;
            background: linear-gradient(135deg, #10b981, #059669);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            margin: 20px 0 0 0;
            box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
        }

        #createMatchModal .create-match-btn:hover {
            background: linear-gradient(135deg, #059669, #047857);
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
        }

        #createMatchModal .create-match-btn:active {
            transform: translateY(0);
        }

        /* Resolution Modal */
        #createMatchModal .resolution-intro {
            margin: 12px 0;
            color: #666;
        }

        #createMatchModal #resolutionList {
            max-height: 400px;
            overflow-y: auto;
        }

        #createMatchModal .resolution-item {
            margin: 12px 0;
            padding: 12px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
        }

        #createMatchModal .resolution-item-header {
            font-weight: 600;
            margin-bottom: 8px;
            color: #333;
        }

        #createMatchModal .similar-players-list {
            margin: 8px 0;
        }

        #createMatchModal .similar-option {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px;
            background: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin: 4px 0;
        }

        #createMatchModal .similar-option input[type="radio"] {
            margin-right: 8px;
        }

        #createMatchModal .match-percentage {
            font-size: 12px;
            color: #666;
            background: #e0e0e0;
            padding: 2px 6px;
            border-radius: 12px;
        }

        #createMatchModal .resolution-item-actions {
            display: flex;
            gap: 8px;
            margin-top: 12px;
        }

        #createMatchModal .resolution-item-actions button {
            flex: 1;
            padding: 8px;
            border-radius: 4px;
            border: none;
            font-size: 14px;
            cursor: pointer;
        }

        #createMatchModal .btn-use-selected {
            background: white;
            border: 1px solid #10b981;
            color: #10b981;
        }

        #createMatchModal .btn-create-new {
            background: #10b981;
            color: white;
        }

        #createMatchModal .resolution-actions {
            display: flex;
            gap: 8px;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid #e0e0e0;
        }

        #createMatchModal .btn-secondary {
            flex: 1;
            padding: 12px;
            background: white;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
        }

        #createMatchModal .btn-primary {
            flex: 1;
            padding: 12px;
            background: #10b981;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
        }

        /* Responsive adjustments */
        @media (max-width: 350px) {
            #createMatchModal .team-inputs {
                grid-template-columns: 1fr;
            }
        }

        /* Dark theme support for create match modal */
        [data-theme="dark"] #createMatchModal .recent-players-bar {
            background: var(--bg-secondary);
        }

        [data-theme="dark"] #createMatchModal .recent-players-bar .label {
            color: var(--text-secondary);
        }

        [data-theme="dark"] #createMatchModal .chip {
            background: var(--bg-card);
            border-color: var(--border-color);
            color: var(--text-primary);
        }

        [data-theme="dark"] #createMatchModal .chip:active {
            background: #10b981;
            color: white;
            border-color: #10b981;
        }

        [data-theme="dark"] #createMatchModal .team-header h3 {
            color: var(--text-primary);
        }

        [data-theme="dark"] #createMatchModal .match-details-compact {
            background: var(--bg-secondary);
        }

        [data-theme="dark"] #createMatchModal .resolution-intro {
            color: var(--text-secondary);
        }

        [data-theme="dark"] #createMatchModal .resolution-item {
            background: var(--bg-secondary);
            border-color: var(--border-color);
        }

        [data-theme="dark"] #createMatchModal .resolution-item-header {
            color: var(--text-primary);
        }

        [data-theme="dark"] #createMatchModal .similar-option {
            background: var(--bg-card);
            border-color: var(--border-color);
            color: var(--text-primary);
        }

        [data-theme="dark"] #createMatchModal .match-percentage {
            background: var(--bg-secondary);
            color: var(--text-secondary);
        }

        #createMatchModal select:focus,
        #createMatchModal input[type="number"]:focus {
            outline: none;
            border-color: var(--primary);
        }

        /* Better visual hierarchy */
        #createMatchModal .modal-header h2 {
            margin: 0;
            font-size: 20px;
            font-weight: 600;
        }

        /* Improved button spacing */
        #createMatchModal .copy-previous-section {
            margin-bottom: 8px;
        }

        /* Player Resolution Modal Styling - Higher z-index to appear above other modals */
        #playerResolutionModal {
            z-index: 1001 !important; /* Higher than base modal z-index of 1000 */
        }

        #playerResolutionModal .modal-header {
            background: #10b981 !important;
            color: white !important;
            padding: 20px !important;
            border-radius: 8px 8px 0 0 !important;
            margin: -20px -20px 20px -20px !important;
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
        }

        #playerResolutionModal .modal-header h3 {
            margin: 0 !important;
            font-size: 18px !important;
            font-weight: 600 !important;
        }

        #playerResolutionModal .close-btn {
            background: none !important;
            border: none !important;
            color: white !important;
            font-size: 24px !important;
            cursor: pointer !important;
            padding: 0 !important;
            width: 30px !important;
            height: 30px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 50% !important;
            transition: background-color 0.2s ease !important;
        }

        #playerResolutionModal .close-btn:hover {
            background: rgba(255, 255, 255, 0.1) !important;
        }

        #playerResolutionModal .resolution-intro {
            margin: 0 0 16px 0 !important;
            color: #666 !important;
            font-size: 14px !important;
        }

        #playerResolutionModal .new-player-item {
            background: #f8f9fa !important;
            border: 1px solid #e0e0e0 !important;
            border-radius: 8px !important;
            padding: 16px !important;
            margin-bottom: 12px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
        }

        #playerResolutionModal .player-info {
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
        }

        #playerResolutionModal .new-badge {
            background: #10b981 !important;
            color: white !important;
            padding: 4px 8px !important;
            border-radius: 4px !important;
            font-size: 12px !important;
            font-weight: 500 !important;
        }

        #playerResolutionModal .resolution-actions {
            display: flex;
            gap: 12px;
            margin-top: 20px;
            padding-top: 16px;
            border-top: 1px solid #e0e0e0;
        }

        #playerResolutionModal .btn-secondary,
        #playerResolutionModal .btn-primary {
            flex: 1;
            padding: 12px 16px;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        /* Dark theme for player resolution modal */
        [data-theme="dark"] #playerResolutionModal .new-player-item {
            background: var(--bg-secondary);
            border-color: var(--border);
        }

        [data-theme="dark"] #playerResolutionModal .new-badge {
            background: #059669;
        }

        [data-theme="dark"] #playerResolutionModal .resolution-actions {
            border-color: var(--border);
        }

        [data-theme="dark"] #playerResolutionModal .resolution-intro {
            color: var(--text-secondary) !important;
        }

        /* Similar players section in resolution modal */
        #playerResolutionModal .similar-players-list {
            margin-top: 12px !important;
            padding: 12px !important;
            background: #f8f9fa !important;
            border-radius: 6px !important;
            border-left: 3px solid #f59e0b !important;
        }

        #playerResolutionModal .similar-header {
            font-size: 12px !important;
            color: #92400e !important;
            font-weight: 600 !important;
            margin-bottom: 8px !important;
        }

        #playerResolutionModal .similar-player-option {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            padding: 8px 12px !important;
            margin: 4px 0 !important;
            background: white !important;
            border: 1px solid #e5e7eb !important;
            border-radius: 4px !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
        }

        #playerResolutionModal .similar-player-option:hover {
            background: #3b82f6 !important;
            color: white !important;
            border-color: #3b82f6 !important;
        }

        #playerResolutionModal .create-anyway-option {
            display: flex !important;
            align-items: center !important;
            padding: 8px 12px !important;
            margin-top: 8px !important;
            background: #10b981 !important;
            color: white !important;
            border-radius: 4px !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
            font-weight: 500 !important;
        }

        #playerResolutionModal .create-anyway-option:hover {
            background: #059669 !important;
        }

        #playerResolutionModal .similarity-score {
            font-size: 11px !important;
            color: #6b7280 !important;
            font-weight: 500 !important;
        }

        #playerResolutionModal .similar-player-option:hover .similarity-score {
            color: rgba(255, 255, 255, 0.8) !important;
        }

        /* Dark mode for similar players */
        [data-theme="dark"] #playerResolutionModal .similar-players-list {
            background: var(--bg-secondary) !important;
            border-color: #f59e0b !important;
        }

        [data-theme="dark"] #playerResolutionModal .similar-header {
            color: #fbbf24 !important;
        }

        [data-theme="dark"] #playerResolutionModal .similar-player-option {
            background: var(--bg-primary) !important;
            border-color: var(--border) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] #playerResolutionModal .similar-player-option:hover {
            background: #3b82f6 !important;
            color: white !important;
        }

        [data-theme="dark"] #createMatchModal select,
        [data-theme="dark"] #createMatchModal input[type="number"] {
            background: var(--bg-primary);
            border-color: var(--border);
            color: var(--text-primary);
        }

        /* NEW: Radio Button Interface for Player Resolution Modal - OVERRIDE ALL OLD STYLES */
        #playerResolutionModal .player-resolution-item {
            background: var(--bg-secondary) !important;
            border: 2px solid var(--border) !important;
            border-radius: 8px !important;
            padding: 16px !important;
            margin-bottom: 16px !important;
            transition: all 0.3s ease !important;
        }

        /* HIDE OLD CONFLICTING STYLES - Force new structure */
        #playerResolutionModal .similar-player-option:not(.similar-option) {
            display: none !important;
        }

        #playerResolutionModal .create-anyway-option {
            display: none !important;
        }

        /* Hide old button structure - ensure only new buttons show */
        #playerResolutionModal .btn-secondary:not(.use-selected-btn):not(.create-new-btn),
        #playerResolutionModal .btn-primary:not(.final-create-match-btn) {
            display: none !important;
        }

        /* Force hide old resolution actions that might still exist */
        #playerResolutionModal .resolution-actions {
            display: none !important;
        }

        /* Ensure radio buttons are visible and styled properly */
        #playerResolutionModal .similar-option input[type="radio"] {
            display: inline-block !important;
            width: auto !important;
            height: auto !important;
            margin: 0 8px 0 0 !important;
        }

        #playerResolutionModal .player-header {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            margin-bottom: 12px !important;
        }

        #playerResolutionModal .player-header strong {
            font-size: 1.1em;
            color: var(--text-primary);
        }

        #playerResolutionModal .position-info {
            color: var(--text-secondary);
            font-size: 0.9em;
            background: var(--bg-primary);
            padding: 2px 8px;
            border-radius: 12px;
            border: 1px solid var(--border);
        }

        #playerResolutionModal .similar-players-section {
            margin-top: 12px !important;
            padding: 12px !important;
            background: #fef3c7 !important;
            border: 1px solid #f59e0b !important;
            border-radius: 8px !important;
            border-left: 4px solid #f59e0b !important;
        }

        #playerResolutionModal .similar-header {
            font-size: 0.9em;
            color: var(--warning);
            font-weight: 600;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        #playerResolutionModal .similar-header:before {
            content: "⚠️";
        }

        #playerResolutionModal .similar-options {
            display: flex !important;
            flex-direction: column !important;
            gap: 6px !important;
            margin-bottom: 12px !important;
        }

        #playerResolutionModal .similar-option {
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            padding: 8px 12px !important;
            background: var(--bg-primary) !important;
            border: 1px solid var(--border) !important;
            border-radius: 6px !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
        }

        #playerResolutionModal .similar-option:hover {
            background: var(--primary-light);
            border-color: var(--primary);
        }

        #playerResolutionModal .similar-option input[type="radio"] {
            display: none !important;
        }

        #playerResolutionModal .radio-custom {
            width: 16px;
            height: 16px;
            border: 2px solid var(--border);
            border-radius: 50%;
            position: relative;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

        #playerResolutionModal .similar-option input[type="radio"]:checked + .radio-custom {
            border-color: var(--primary);
            background: var(--primary);
        }

        #playerResolutionModal .similar-option input[type="radio"]:checked + .radio-custom:after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 6px;
            height: 6px;
            background: white;
            border-radius: 50%;
        }

        #playerResolutionModal .similar-name {
            font-weight: 500;
            color: var(--text-primary);
        }

        #playerResolutionModal .similarity-score {
            font-size: 0.8em;
            color: var(--text-secondary);
            margin-left: auto;
        }

        #playerResolutionModal .player-actions {
            display: flex !important;
            gap: 8px !important;
            margin-top: 12px !important;
        }

        #playerResolutionModal .use-selected-btn,
        #playerResolutionModal .create-new-btn {
            flex: 1 !important;
            padding: 8px 16px !important;
            border: none !important;
            border-radius: 6px !important;
            font-size: 0.9em !important;
            font-weight: 500 !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
        }

        #playerResolutionModal .use-selected-btn {
            background: var(--primary);
            color: white;
        }

        #playerResolutionModal .use-selected-btn:hover:not(:disabled) {
            background: var(--primary-dark);
        }

        #playerResolutionModal .use-selected-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        #playerResolutionModal .create-new-btn {
            background: var(--warning);
            color: white;
        }

        #playerResolutionModal .create-new-btn:hover:not(:disabled) {
            background: var(--warning-dark);
        }

        #playerResolutionModal .create-new-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        #playerResolutionModal .final-actions {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-top: 24px;
            padding-top: 20px;
            border-top: 2px solid var(--border);
        }

        #playerResolutionModal .final-create-match-btn {
            padding: 12px 24px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1.1em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        #playerResolutionModal .final-create-match-btn:hover:not(:disabled) {
            background: var(--primary-dark);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        #playerResolutionModal .final-create-match-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        /* Success/Warning States */
        #playerResolutionModal [data-player-index].choice-made {
            border-width: 2px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        #playerResolutionModal [data-player-index].existing-selected {
            background: var(--success-bg);
            border-color: var(--success);
        }

        #playerResolutionModal [data-player-index].new-player-selected {
            background: var(--warning-bg);
            border-color: var(--warning);
        }

        /* NEW: Step-by-step Resolution Interface */
        #playerResolutionModal .current-player-resolution {
            background: var(--bg-secondary) !important;
            border: 2px solid var(--border) !important;
            border-radius: 12px !important;
            padding: 20px !important;
            margin-bottom: 16px !important;
            text-align: center !important;
        }

        #playerResolutionModal .similar-section {
            margin: 16px 0 !important;
            padding: 12px !important;
            background: #fff3cd !important;
            border: 1px solid #ffc107 !important;
            border-radius: 8px !important;
            color: #856404 !important;
            font-size: 14px !important;
        }

        #playerResolutionModal .action-buttons {
            display: flex !important;
            gap: 12px !important;
            justify-content: center !important;
            margin-top: 16px !important;
        }

        #playerResolutionModal .similar-buttons {
            display: flex !important;
            flex-direction: column !important;
            gap: 8px !important;
            margin: 12px 0 !important;
        }

        #playerResolutionModal .create-section {
            margin-top: 16px !important;
            padding-top: 16px !important;
            border-top: 1px solid var(--border) !important;
        }

        #playerResolutionModal .btn-use-similar,
        #playerResolutionModal .btn-create-new {
            width: 100% !important;
            padding: 12px 16px !important;
            border: none !important;
            border-radius: 8px !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
        }

        #playerResolutionModal .btn-use-similar {
            background: var(--primary) !important;
            color: white !important;
        }

        #playerResolutionModal .btn-use-similar:hover {
            background: var(--primary-dark) !important;
        }

        #playerResolutionModal .btn-create-new {
            background: var(--warning) !important;
            color: white !important;
        }

        #playerResolutionModal .btn-create-new:hover {
            background: var(--warning-dark) !important;
        }

        /* Feedback States */
        #playerResolutionModal .resolved-player {
            background: var(--success-bg) !important;
            border: 2px solid var(--success) !important;
            border-radius: 12px !important;
            padding: 20px !important;
            text-align: center !important;
            color: var(--success) !important;
            font-size: 16px !important;
            font-weight: 600 !important;
        }

        #playerResolutionModal .creating-player {
            background: var(--warning-bg) !important;
            border: 2px solid var(--warning) !important;
            border-radius: 12px !important;
            padding: 20px !important;
            text-align: center !important;
            color: var(--warning) !important;
            font-size: 16px !important;
            font-weight: 600 !important;
        }

        #playerResolutionModal .finalizing-match {
            background: var(--primary-light) !important;
            border: 2px solid var(--primary) !important;
            border-radius: 12px !important;
            padding: 20px !important;
            text-align: center !important;
            color: var(--primary) !important;
            font-size: 16px !important;
            font-weight: 600 !important;
        }

        #playerResolutionModal .error-player {
            background: var(--error-bg) !important;
            border: 2px solid var(--error) !important;
            border-radius: 12px !important;
            padding: 20px !important;
            text-align: center !important;
            color: var(--error) !important;
            font-size: 16px !important;
            font-weight: 600 !important;
        }

        #playerResolutionModal .retry-btn {
            margin-top: 10px !important;
            padding: 8px 16px !important;
            background: var(--error) !important;
            color: white !important;
            border: none !important;
            border-radius: 6px !important;
            cursor: pointer !important;
        }

        #playerResolutionModal .retry-btn:hover {
            background: var(--error-dark) !important;
        }

        /* Dark theme support */
        [data-theme="dark"] #playerResolutionModal .similar-section {
            background: #2d2d00 !important;
            border-color: #ffc107 !important;
            color: #ffeb3b !important;
        }

        /* Create Player Button Styling */
        .btn.btn-create-player,
        .btn-outline-primary.btn-create-player {
            background: linear-gradient(135deg, #22c55e, #16a34a) !important;
            color: white !important;
            font-weight: 600 !important;
            font-size: 16px !important;
            border: 2px solid #15803d !important;
            box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3), 0 2px 6px rgba(0, 0, 0, 0.1) !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
            transition: all 0.2s ease !important;
        }
        .btn.btn-create-player:hover,
        .btn-outline-primary.btn-create-player:hover {
            background: linear-gradient(135deg, #16a34a, #15803d) !important;
            color: white !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4), 0 4px 8px rgba(0, 0, 0, 0.15) !important;
        }
        .btn.btn-create-player:active,
        .btn-outline-primary.btn-create-player:active {
            transform: translateY(-1px) !important;
            box-shadow: 0 3px 8px rgba(34, 197, 94, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
        }

        /* ========================================
           BULK CREATION VISUAL VALIDATION STYLES
           ======================================== */

        /* Bulk Creation Recent Players Chips */
        .recent-player-chip {
            display: inline-block;
            padding: 6px 12px;
            margin: 2px 4px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-primary);
            cursor: pointer;
            transition: all 0.2s ease;
            user-select: none;
        }

        .recent-player-chip:hover {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
        }

        /* Copy Previous Team Buttons */
        .copy-team-btn {
            padding: 8px 16px;
            margin: 0 4px;
            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
            border: none;
            border-radius: 8px;
            color: white;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
        }

        .copy-team-btn:hover {
            background: linear-gradient(135deg, #2563eb, #1e40af);
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
        }

        /* Bulk Input Visual Validation States - EXACT SAME AS CREATE MATCH */
        #bulkMatchScreen .player-input.valid-player {
            border-color: #10b981;
            background: #f0fdf4;
        }

        #bulkMatchScreen .player-input.needs-validation {
            border-color: #f59e0b;
            background: #fffbeb;
        }


        /* Position Indicator Animations */
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translate(-50%, -20px);
            }
            to {
                opacity: 1;
                transform: translate(-50%, 0);
            }
        }

        @keyframes slideUp {
            from {
                opacity: 1;
                transform: translate(-50%, 0);
            }
            to {
                opacity: 0;
                transform: translate(-50%, -20px);
            }
        }

        /* Dark Theme Support for Bulk Creation */
        [data-theme="dark"] .recent-player-chip {
            background: var(--bg-card);
            border-color: var(--border-color);
            color: var(--text-primary);
        }

        [data-theme="dark"] .recent-player-chip:hover {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        [data-theme="dark"] #bulkMatchScreen .player-input.valid-player {
            background-color: rgba(16, 185, 129, 0.1);
            border-color: #10b981;
        }

        [data-theme="dark"] #bulkMatchScreen .player-input.needs-validation {
            border-color: #f59e0b;
            background-color: rgba(245, 158, 11, 0.1);
        }


        /* Mobile Optimizations for Bulk Creation */
        @media (max-width: 768px) {
            .recent-player-chip {
                padding: 8px 12px;
                font-size: 14px;
                margin: 3px 2px;
            }

            .copy-team-btn {
                padding: 10px 14px;
                font-size: 13px;
                margin: 4px 2px;
            }

            #bulkPositionIndicator {
                top: 10px !important;
                font-size: 13px !important;
                padding: 6px 12px !important;
            }
        }

        /* ========================================
           ENHANCED PLAYER PROFILE MODAL TABS
           ======================================== */

        /* Profile Tab Buttons */
        .profile-tab {
            padding: 10px 16px;
            border: none;
            background: transparent;
            color: var(--text-secondary);
            font-size: 0.875rem;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        .profile-tab:hover {
            color: var(--text-primary);
            background: var(--bg-secondary);
        }

        .profile-tab.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
            font-weight: 600;
        }

        /* Profile Tab Content */
        .profile-tab-content {
            display: none;
            animation: fadeIn 0.2s ease;
        }

        .profile-tab-content.active {
            display: block;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-5px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Profile Form Styling */
        .profile-tab-content .form-group {
            margin-bottom: 16px;
        }

        .profile-tab-content .form-label {
            display: block;
            margin-bottom: 6px;
            font-weight: 500;
            color: var(--text-primary);
        }

        .profile-tab-content input[type="text"],
        .profile-tab-content input[type="email"],
        .profile-tab-content input[type="tel"],
        .profile-tab-content input[type="number"],
        .profile-tab-content textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            background: var(--bg-primary);
            color: var(--text-primary);
            font-size: 0.9375rem;
            transition: border-color 0.2s ease;
        }

        .profile-tab-content input:focus,
        .profile-tab-content textarea:focus {
            outline: none;
            border-color: var(--primary);
        }

        .profile-tab-content textarea {
            resize: vertical;
            min-height: 60px;
        }

        /* Checkbox Toggle Styling */
        .profile-tab-content input[type="checkbox"] {
            width: 48px;
            height: 24px;
            position: relative;
            appearance: none;
            background: var(--border-color);
            border-radius: 12px;
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .profile-tab-content input[type="checkbox"]:before {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            top: 2px;
            left: 2px;
            background: white;
            transition: left 0.2s ease;
        }

        .profile-tab-content input[type="checkbox"]:checked {
            background: var(--primary);
        }

        .profile-tab-content input[type="checkbox"]:checked:before {
            left: 26px;
        }

        /* Dark Theme Support */
        [data-theme="dark"] .profile-tab {
            color: var(--text-secondary);
        }

        [data-theme="dark"] .profile-tab:hover {
            color: var(--text-primary);
            background: var(--bg-secondary);
        }

        [data-theme="dark"] .profile-tab.active {
            color: var(--primary);
        }

        [data-theme="dark"] .profile-tab-content input,
        [data-theme="dark"] .profile-tab-content textarea {
            background: var(--bg-secondary);
            border-color: var(--border-color);
            color: var(--text-primary);
        }

        [data-theme="dark"] .profile-tab-content input[type="checkbox"]:before {
            background: var(--bg-card);
        }

        /* Mobile Responsive */
        @media (max-width: 480px) {
            .profile-tabs {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            .profile-tab {
                padding: 8px 12px;
                font-size: 0.8125rem;
            }

            .profile-tab-content input,
            .profile-tab-content textarea {
                font-size: 0.875rem;
            }
        }

        /* ========================================
           PLAYER PROFILE VIEWER - READ ONLY
           ======================================== */

        /* Read-Only Modal Distinction */
        .profile-modal-readonly .modal-content {
            border-top: 4px solid var(--info, #3498db);
        }

        /* Read-Only Display Fields */
        .profile-display-field {
            padding: 10px 12px;
            background: var(--bg-secondary);
            border-radius: 6px;
            color: var(--text-primary);
            font-size: 0.9375rem;
            min-height: 40px;
            display: flex;
            align-items: center;
        }

        .profile-display-field.empty {
            color: var(--text-muted);
            font-style: italic;
        }

        /* Action Buttons for Contact Info */
        .profile-action-button {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.875rem;
            font-weight: 500;
            transition: all 0.2s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .profile-action-button:hover {
            background: var(--primary-dark, #2980b9);
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .profile-action-button:active {
            transform: translateY(0);
        }

        /* Preference Value Display */
        .preference-value {
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 0.875rem;
            font-weight: 500;
        }

        /* Clickable Player Names */
        .clickable-player-name {
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
        }

        .clickable-player-name:hover {
            color: var(--primary);
            text-decoration: underline;
        }

        /* Player Info Icon in Selection Modal */
        .player-info-icon {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 1.1rem;
            padding: 4px 8px;
            color: var(--primary);
            transition: transform 0.2s ease;
            flex-shrink: 0;
        }

        .player-info-icon:hover {
            transform: scale(1.2);
        }

        /* Player Item Layout with Info Icon */
        .player-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px;
            border-bottom: 1px solid var(--border-color);
            transition: background 0.2s ease;
        }

        .player-item:hover {
            background: var(--bg-hover, rgba(52, 152, 219, 0.05));
        }

        .player-item-main {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
        }

        /* Dark Theme Support */
        [data-theme="dark"] .profile-modal-readonly .modal-content {
            border-top-color: var(--primary);
        }

        [data-theme="dark"] .profile-display-field {
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }

        [data-theme="dark"] .profile-display-field.empty {
            color: var(--text-muted);
        }

        [data-theme="dark"] .profile-action-button {
            background: var(--primary);
        }

        [data-theme="dark"] .profile-action-button:hover {
            background: var(--primary-dark, #2980b9);
        }

        [data-theme="dark"] .player-info-icon {
            color: var(--primary);
        }

        [data-theme="dark"] .clickable-player-name:hover {
            color: var(--primary);
        }

        /* Mobile Responsive */
        @media (max-width: 480px) {
            .profile-action-button {
                width: 100%;
                justify-content: center;
            }

            .player-info-icon {
                font-size: 1rem;
                padding: 4px 6px;
            }
        }