body {
    font-family: Arial, sans-serif;
    margin: 0;
    background: #f7f7f7;
}

header {
    background: #222;
    color: white;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header .logo {
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
}

.menu {
    position: relative;
}

.menu button {
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

.menu .dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    min-width: 150px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 10;
}

.menu .dropdown a {
    display: block;
    padding: 10px;
    color: black;
    text-decoration: none;
}

.menu .dropdown a:hover {
    background: #f0f0f0;
}

.container {
    max-width: 36rem;
    margin-right: auto;
    margin-left: auto;
    padding: 10px;
}

h2 {
    margin: 10px;
}

.results-btn {
    float: right;
    background: #ff6600;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
}

.course-btn {
    float: center;
    background: #ff6600;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
}

#courseNameInput {
    width: 350px;
    font-size: 1.2em;
    border: 2px solid #ff6600;
    border-radius: 4px;
    padding: 6px 10px;
    box-sizing: border-box;
}

#courseSelect {
    border: 2px solid #ff6600;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 1.1em;
    outline: none;
    margin-bottom: 1rem;
    transition: border 0.2s;
}

#courseSelect:focus {
    border-color: #ff6600;
    box-shadow: 0 0 0 2px rgba(255,102,0,0.15);
}

.progress {
    text-align: center;
    margin: 10px 0;
}

.dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 3px;
    border-radius: 50%;
    background: #bbb; /* default grey */
}

.dot.active {
    background: #bbb;
    border: 2px solid green; /* green ring */
    box-sizing: border-box;
}

.dot.completed {
    background: green; /* solid green */
}

#score-input-display table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    background: inherit;
    border: 1px solid #f7f7f7;
    border-spacing: 2px;
    border-radius: 2px;
    text-align: center;
}

#score-input-display table tr {
    border-top: 1px solid #d8dfdb;
    border-bottom: 1px solid #d8dfdb;
}

#score-input-display table td {
    padding: 4px 3px;
}

#score-input-display .player-name {
    text-align: left;
}

.score-cell {
    background: #fffdf9;
    width:30px;
    box-sizing: border-box;
}

.total-cell {
    width:30px;
    padding-left:4px;
    padding-right:4px;
}
.toggle-container {
    margin-top: 1rem;
}

.toggle {
    float: right;
    background: transparent;
    text-align: center;
    padding: .25rem .5rem;
    cursor: pointer;
    border: 1px solid #ff6700;
    border-radius: 2px;
    color:#ff6700;
    font-weight: 700;
}

.selected {
    border: 2px solid #ff5800; /* highlight selected cell */
}

.keypad-container {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e6e6e6;
    padding: 4px;
    z-index: 10;
    width: 100%;
    box-shadow: 0 -1px 4px rgba(0,0,0,0.1);
}

.keypad {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 4px;
    margin: 0 auto;
    max-width: 38rem;
    height: 28vh;
    min-height: 10rem;
    max-height: 14rem;
}

.keypad button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background-color:#fffdf9;
    vertical-align:middle;
    font-weight: 700;
    color:#4a4f4c;
    font-size: 25px;
    border-radius: 2px;
    border: none;
    box-shadow:0 1px 3px rgba(0,0,0,.15)
}

.keypad button.ob {
    grid-row-start:1;
    grid-column-start:5;
    color:#f42b03;
}

.keypad button.prev {
    grid-column-start:1;
    grid-row-start:2;
    grid-row-end:4;
}

.keypad button.next {
    grid-column-start:5;
    grid-row-start:2;
    grid-row-end:4;
}

.hidden {
    display: none;
}

#scoreResultsTable {
    width: 100%;
    border-collapse: collapse;
}
#scoreResultsTable th, #scoreResultsTable td {
    border: 1px solid #d8dfdb;
    padding: 4px 3px;
    text-align: center;
}
#scoreResultsTable th {
    background-color: #fffdf9;
}
#scoreResultsTable .player-name {
    text-align: left;
    font-weight: bold;
}

td.holeinone{background-color:#ffb400}
td.eagle{background-color:#3ec300}
td.birdie{background-color:rgba(62,195,0,.4)}
td.fail{background-color:rgba(244,43,3,.85)}
td.tbogey{background-color:rgba(244,43,3,.65)}
td.dbogey{background-color:rgba(244,43,3,.4)}
td.bogey{background-color:rgba(244,43,3,.2)}

.save-container {
    margin-top: 4rem;
}

#saveScoresBtn {
    width: 100%;
    background: #ff6600;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    padding: 5px 10px;
    font-weight: 700;
}

/* Inline menu links: hidden by default on small screens */
.menu-links {
    display: none;
    gap: 1.5rem;
}

.menu-links a {
    color: white;
    text-decoration: none;
    margin: 0 0.5rem;
    font-weight: 500;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    transition: border 0.2s;
}

.menu-links a:hover {
    border-bottom: 2px solid #ff6600;
}

/* Show inline menu and hide dropdown on large screens */
@media (min-width: 700px) {
    .menu-links {
        display: flex;
        align-items: center;
    }
    .menu-btn,
    .menu .dropdown {
        display: none !important;
    }
}
.create-round-container {
    border: 2px solid #ff6600;
    border-radius: 8px;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    background: #fff8f0;
    max-width: 500px;
}

.create-round-form label {
    display: block;
    margin-top: 1rem;
    font-weight: 500;
}

#create-round-form input[type="date"],
#create-round-form select,
.create-round-form input[type="date"],
.create-round-form select {
    width: 100%;
    padding: 6px 10px;
    border: 2px solid #ff6600;
    border-radius: 4px;
    font-size: 1em;
    margin-top: 0.3rem;
    background: #fff;
    box-sizing: border-box;
}

.players-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1.5rem;
    margin-top: 0.5rem;
}

.player-checkbox {
    font-weight: 400;
}

.orange-btn {
    background: #ff6600;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.6em 1.5em;
    font-size: 1em;
    margin-top: 1.5rem;
    cursor: pointer;
    transition: background 0.2s;
}

.orange-btn:hover {
    background: #e65c00;
}

.players-container {
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    max-width: 36rem; 
    margin: auto; 
    text-align: center; 
    margin-top: 2rem;
}

.add-player-form {
    margin-bottom: 1.5rem;
}

.add-player-form label {
    font-weight: 700;
    margin-right: 0.5rem;
}

.add-player-form input[type="text"] {
    width: 220px;
    padding: 6px 10px;
    border: 2px solid #ff6600;
    border-radius: 4px;
    font-size: 1.2em;
    margin-right: 0.5rem;
    background: #fff;
    box-sizing: border-box;
}

.player-stats-form {
    display: flex;
    flex-direction: row;
    margin-top: 1rem;
    justify-content: center;
    gap: 1rem;
}

.player-stats-form select {
    padding: 6px 10px;
    border: 2px solid #ff6600;
    border-radius: 4px;
    font-size: 1.1em;
    margin-bottom: 1rem;
}

.range-btn {
    background: #ff6600;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.4em 1em;
    margin: 0.2em;
    cursor: pointer;
    font-size: 1em;
}
.range-btn:hover {
    background: #e65c00;
}

#perHoleStatsTable {
    border-collapse: collapse;
    width: 100%;
}
#perHoleStatsTable th, #perHoleStatsTable td {
    border: 1px solid #d8dfdb;
    padding: 4px 3px;
    text-align: center;
}
#perHoleStatsTable th {
    background-color: #fffdf9;
}
#perHoleStatsTable .stat-type {
    text-align: left;
    font-weight: bold;
}

#topScoresTable {
    border-collapse: collapse;
    width: 100%;
}

#topScoresTable th, #topScoresTable td {
    border: 1px solid #d8dfdb;
    padding: 4px 3px;
    text-align: center;
}

#topScoresTable th {
    background-color: #fffdf9;
}

#scoreboard th {
    font-weight: 700;
}

.fs-error-msg {
    color: red;
}

#submit-ctr {
    margin-top: 1rem;
}

#submit-ctr #submit {
    background: #ff6600;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.4em 1em;
    margin: 0.2em;
    font-size: 1em;
    cursor: pointer;
}

#submit-ctr #submit:hover {
    background: #e65c00;
}

#username-ctr,
#password-ctr,
#new_password-ctr,
#new_password_confirm-ctr {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 0.5rem; /* consistent spacing between label and input */
}

#username-ctr label,
#password-ctr label,
#new_password-ctr label,
#new_password_confirm-ctr label {
    font-weight: 700;
    font-size: large;
}

#username-ctr #username,
#password-ctr #password,
#new_password-ctr #new_password,
#new_password_confirm-ctr #new_password_confirm {
    width: 220px;
    padding: 4px 5px;
    border: 2px solid #ff6600;
    border-radius: 4px;
    font-size: 1.2em;
    background: #fff;
    box-sizing: border-box;
}