/* =========================
   Root variables
   ========================= */
:root {
  /* Playlist tile sizing */
  --playlist-tile-min-w: 140px;
  /* min width of each tile */
  --playlist-tile-aspect: 4 / 1;
  /* width : height (2:1 means height is half width) */

  /* UI theme */
  --bg: #fff;
  --text: #111;
  --muted: #6b7280;
  /* gray-500 */
  --border: #e5e7eb;
  /* gray-300 */
  --border-strong: #d1d5db;
  /* gray-300/400 */
  --ring: #2563eb;
  /* brand blue-600 */
  --accent: #f59e0b;
  /* amber-500 for “needs update” */
  --card: #fafafa;
  --label: #6b7280;
  --text: #111;
  --radius: 10px;
  --gap: 12px;
  --field-pad-y: .55rem;
  --field-pad-x: .75rem;

  /* Caret chip colors */
  --caret-bg: #f3f4f6;
  /* gray-100 */
  --caret-border: #e5e7eb;
  /* gray-300 */
  --caret-color: #6b7280;
  /* gray-500 */
}

/* Lighter labels in the Round Setup column */
.setup label {
  color: var(--label);
  /* e.g. #6b7280 */
  font-weight: 500;
}

/* Inputs/selects stay dark even when nested inside a label */
.setup .select-field>input,
.setup .select-field>select,
.setup #playlistText {
  color: var(--text);
  /* e.g. #111 */
}


/* =========================
   General / Course UI
   ========================= */
.course-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.course-row label:first-child {
  flex: 0 0 auto;
}

.course-row label {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
}

input.compact {
  height: 1.6rem;
  font-size: 0.85rem;
  padding: 0.2rem 0.4rem;
}

input.id-field {
  width: 3ch !important;
  min-width: 3ch !important;
  max-width: 3ch !important;
}

input.wide {
  min-width: 200px;
}

.layout-block {
  margin-bottom: 0.6em;
}

.layout-block summary {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.layout-block.playlist-added {
  background: #ffe966 !important;
  transition: background 0.4s;
}

.layout-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 1em;
  padding: 0.2em 0.1em;
}

/* src/styles/scorecard.css or wherever your table styles live */

/* Thin, subtle layout header rows */
.layout-header-row td {
  background-color: #f5f5f5;     /* faint grey band */
  font-weight: 600;
  font-size: 0.8rem;             /* a bit smaller */
  padding: 1px 2px;              /* thin row */
  border-top: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  text-align: left;
}


/* If you want it even more subtle: */
.layout-header-row td {
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
}


.playlist-add-btn {
  flex: 0 0 auto;
  font-size: 1.1em;
  width: 1.2em;
  height: 1.2em;
  background: #f0f1ff;
  border-radius: 0.25em;
  color: #1976d2;
  text-align: center;
  cursor: pointer;
  user-select: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}

.playlist-add-btn:hover {
  background: #dde3ff;
}

.course-editor {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 90%;
  max-width: 400px;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
  padding: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.course-editor h3 {
  margin-top: 0;
  font-size: 1.25rem;
  text-align: center;
}

.course-editor label {
  display: block;
  font-weight: bold;
  margin: 12px 0 4px;
}

.course-editor input[type="text"] {
  width: 100%;
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
}

.course-editor button {
  width: 48%;
  padding: 12px;
  font-size: 1rem;
  border: none;
  border-radius: 6px;
  margin-top: 16px;
  cursor: pointer;
}

.course-editor .save-course {
  background: #007bff;
  color: #fff;
  margin-right: 4%;
}

.course-editor .cancel-course {
  background: #f5f5f5;
  color: #333;
}

.course-editor .edit-course {
  background: #ffc107;
  color: #fff;
  width: 100%;
  margin-top: 8px;
}

input.editable {
  background: #fff;
  border: 1px solid #0077cc;
}

/* Button rows */
.button-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.button-row button {
  flex: 1;
  padding: 10px;
  font-size: 1rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
}

#saveCourseBtn {
  background: #007bff;
  color: #fff;
}

#closeCourseBtn {
  background: #eee;
  color: #333;
}

/* Add Layout modal */
#addLayoutModal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

#addLayoutModal .modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 0;
}

#addLayoutModal .modal-content {
  position: relative;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
  padding: 2em 2.5em 1.5em;
  z-index: 1;
  min-width: 270px;
  max-width: 90vw;
}

#addLayoutModal .modal-form label {
  display: block;
  margin-bottom: .75em;
}

#addLayoutModal button {
  margin-right: .5em;
}

/* =========================
   FLEXBOX SCORECARD (current HTML)
   ========================= */
.scorecard-flexbox {
  --label-w: 32px;
  --col-w: 32px;
  --cell-h: 20px;
  --gap: 1px;
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.scorecard-labels {
  width: var(--label-w);
  flex: 0 0 var(--label-w);
  display: grid;
  grid-template-rows: repeat(3, var(--cell-h));
  gap: var(--gap);
  overflow: hidden;
}

.scorecard-label {
  font-size: small;
  font-weight: 400;
  display: flex;
  align-items: center;
  padding-right: 6px;
  white-space: nowrap;
}

.scorecard-data-scroll {
  flex: 1 1 auto;
  min-width: 0;
  scrollbar-gutter: stable;
  padding-bottom: 4px;
}

.scorecard-data-scroll:has(.scorecard-row > :nth-child(10)) {
  overflow-x: auto;
  scrollbar-gutter: stable;
}

.scorecard-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--col-w);
  gap: var(--gap);
  min-width: max-content;
  padding-inline-end: 10px;
  justify-items: center;
  align-items: center;
}

.scorecard-row-holes {
  text-align: center;
  font-variant-numeric: tabular-nums;
  line-height: var(--cell-h);
}

.scorecard-row input {
  box-sizing: border-box;
  width: 100%;
  height: var(--cell-h);
  padding: 0 3px;
  font-size: .82rem;
  text-align: center;
  border: 1px solid #ccc;
}

.scorecard-row input[type="number"]::-webkit-outer-spin-button,
.scorecard-row input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.scorecard-row input[type="number"] {
  -moz-appearance: textfield;
}

/* =========================
   Playlist FIFO Controller
   ========================= */
.pl-layout-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #fff;
  margin: 4px 0;
  cursor: pointer;
}

.pl-layout-row.in-playlist {
  background: #f3f8ff;
  border-color: #cfe0ff;
}

/************** Playlist display area *******************/
#playlistDisplay {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
}

#playlistDisplay label {
  margin: 0;
  font-weight: 700;
}

#playlistText {
  color: #333;
}

#playlistText.empty {
  color: #888;
  font-style: italic;
}

#playlistText.full {
  color: #d9534f;
}

/* =========================
   Playlist Modal (no blur)
   ========================= */
#playlistModal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .28);
  z-index: 1000;
}

#playlistModal:not(.hidden) {
  display: flex;
}

#playlistModal .modal-content {
  background: #fff;
  width: fit-content;
  max-width: 92vw;
  border-radius: 12px;
  padding: 20px 20px 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
  border: 1px solid #e9e9e9;
}

#playlistModal h3 {
  margin: 0 0 12px;
  font-size: 1.25rem;
  font-weight: 700;
}

/* =========================
   Layout list as 2 columns
   ========================= */
#layoutList {
  display: grid;
  grid-template-columns: repeat(2, minmax(var(--playlist-tile-min-w), 1fr));
  gap: 10px 12px;
  margin-bottom: 16px;
  justify-content: start;
}

#layoutList button {
  width: var(--playlist-tile-min-w);
  aspect-ratio: var(--playlist-tile-aspect);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  appearance: none;
  border: 1px solid #d5d7de;
  background: #f7f8fb;
  padding: 0;
  border-radius: 10px;
  font: 600 0.9rem/1.1 system-ui, sans-serif;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}

#layoutList button:hover {
  background: #eef1f7;
  transform: translateY(-1px);
}

#layoutList button:focus {
  outline: 2px solid #7aa7ff;
  outline-offset: 2px;
}

#layoutList button.in-playlist {
  background: #0a66ff;
  color: #fff;
  border-color: #0a66ff;
}

#layoutList button.in-playlist:hover {
  background: #0553d6;
}

/* Actions */
#playlistModal .modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

#savePlaylistBtn,
#cancelPlaylistBtn {
  appearance: none;
  border-radius: 10px;
  padding: 8px 14px;
  border: 1px solid #d5d7de;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
}

#savePlaylistBtn {
  background: #0a66ff;
  color: #fff;
  border-color: #0a66ff;
}

#savePlaylistBtn:hover {
  background: #0553d6;
}

#cancelPlaylistBtn:hover {
  background: #f3f4f8;
}

/* Modal dialog tweaks */
body.modal-open {
  overflow: hidden;
}

body.modal-open .menu-panel {
  display: none !important;
}

/* =========================
   Mobile-first polish
   ========================= */
.setup {
  max-width: 900px;
  margin-inline: auto;
}

/* Base control sizing for touch */
button,
input,
select {
  min-height: 25px;
  font-size: 16px;
}

button {
  touch-action: manipulation;
}

/* Let form controls fill the line by default */
label {
  display: grid;
  gap: .5rem;
}

label select,
label input {
  width: 100%;
  box-sizing: border-box;
}

/* Smaller phones */
@media (max-width: 480px) {
  .setup {
    padding: 0.75rem;
  }

  h2 {
    font-size: clamp(1.25rem, 4.5vw, 1.5rem);
  }

  label>button {
    width: 100%;
  }

  #viewCaptainsBtn,
  #viewMembersBtn,
  #viewGamesBtn,
  #courseDetailsBtn,
  #SelectPlayersBtn,
  #SelectGamesBtn,
  #changePlaylistBtn {
    flex: 1 1 48%;
  }

  .sel-checkboxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem .75rem;
  }

  :root {
    --playlist-tile-min-w: 96px;
    --playlist-tile-aspect: 2.2 / 1;
  }

  .group-list-container dialog,
  .gle-modal .gle-modal-content,
  .gle-modal dialog {
    width: 92vw;
    max-width: 92vw;
    margin: 0;
    padding: .75rem .9rem;
  }

  .course-editor {
    width: 92vw;
    max-width: 420px;
  }

  .scorecard-flexbox {
    --label-w: 28px;
    --col-w: 26px;
    --cell-h: 22px;
    --gap: 1px;
  }

  .scorecard-row input {
    font-size: .9rem;
  }

  #playlistModal .modal-content {
    max-width: 92vw;
  }

  .button-row {
    flex-direction: column;
  }

  .button-row button {
    width: 100%;
  }
}

/* Medium phones / small tablets */
@media (min-width: 481px) and (max-width: 768px) {
  .sel-checkboxes {
    grid-template-columns: repeat(3, 1fr);
  }

  .scorecard-flexbox {
    --col-w: 28px;
  }
}

/* =========================
   Top bar / Hamburger menu
   ========================= */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem;
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.topbar h2 {
  margin: 0;
  font-size: clamp(1.1rem, 4.5vw, 1.5rem);
}

.topbar-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.hamburger {
  --bar-w: 22px;
  --bar-h: 2px;
  --bar-gap: 4px;
  border: none;
  background: transparent;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
}

.hamburger:focus-visible {
  outline: 2px solid Highlight;
  outline-offset: 2px;
}

.hamburger span {
  display: block;
  width: var(--bar-w);
  height: var(--bar-h);
  margin: var(--bar-gap) 0;
  background: currentColor;
}

.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 180px;
  padding: .5rem;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .14), 0 2px 10px rgba(0, 0, 0, .08);
  display: grid;
  gap: .35rem;
  z-index: 1000;
}

.menu-panel[hidden] {
  display: none;
}

.menu-panel hr {
  border: 0;
  height: 1px;
  background: rgba(0, 0, 0, .08);
  margin: .25rem 0;
}

.menu-panel>button {
  text-align: left;
  width: 100%;
  padding: .55rem .6rem;
  border-radius: 8px;
  border: none;
  background: transparent;
  font: inherit;
  line-height: 1.2;
}

.menu-panel>button:hover,
.menu-panel>button:focus-visible {
  background: rgba(0, 0, 0, .06);
}

@media (max-width: 480px) {
  .menu-panel>button {
    min-height: 44px;
  }
}

.top-right-menu {
  position: absolute;
  top: 16px;
  right: 24px;
  z-index: 100;
}

/* =========================
   Player / Games selection
   ========================= */







/* keep close visible in anchored/select mode */
/* the dialog becomes the scroll container (default) */
dialog {
  position: relative;
}

/* --- predictable sizing --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* --- dialog: flush edges, left gutter only, scrollable --- */
dialog.anchored-panel {
  position: relative;
  margin: 0;
  padding: 0 0 0 .5rem;
  /* left gutter only */
  max-height: min(72vh, 600px);
  overflow: auto;
  /* dialog itself scrolls */
}


/* --- outer wrappers: no extra spacing --- */
.gle-modal,
.gle-modal-content,
.group-list-container {
  margin: 0;
  padding: 0;
}

/* --- list: remove UA spacing/indent and any row separators --- */
.group-list-container .list-container {
  margin: 0;
  padding: 0;
  list-style: none;
}

.group-list-container .list-container>li,
.group-list-container .list-container>div {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* --- rows: zero padding/border/gaps (left gutter comes from dialog) --- */
.group-list-container .gle-display {
  margin: 0 !important;
  padding: 0 !important;
  /* no per-row padding */
  border: 0 !important;
  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
}

/* kill inline gap styles if present in templates */
.group-list-container .gle-display[style*="gap"] {
  gap: 0 !important;
}

/* --- form/error blocks inside dialog: no extra space --- */
.group-list-container .form-container,
.group-list-container .error-container {
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
}




/* Field wrapper is the positioning context */
.select-field {
  position: relative;
  display: block;
  width: 100%;
}

/* Unified field chrome: inputs + selects + “playlist box” */
.select-field>input,
.select-field>select,
#playlistText {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--field-pad-y) var(--field-pad-x);
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Focus ring / hover */
.select-field>input:focus,
.select-field>select:focus,
#playlistText:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent);
}

@media (hover:hover) {

  .select-field>input:hover,
  .select-field>select:hover,
  #playlistText:hover {
    border-color: var(--border-strong);
  }
}

/* Big, forgiving tap target for caret (full height at right edge) */
#SelectPlayersBtn,
#SelectGamesBtn {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  touch-action: manipulation;
  font-size: 0;
  /* hide any inline text like "↕" */
}

/* Small circular chip painted inside the big button */
#SelectPlayersBtn::before,
#SelectGamesBtn::before {
  content: "↕";
  /* or ▾ / ⇕ / ▲▼ */
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--caret-bg);
  border: 1px solid var(--caret-border);
  color: var(--caret-color);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

/* Ensure input text doesn't go under the chip */
.select-field>input {
  padding-right: 2.2rem;
}

/* Native <select> and Playlist: draw same chip via ::after */
.select-field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.2rem;
}

.select-field:has(> select)::after,
#playlistText::after {
  content: "↕";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--caret-bg);
  border: 1px solid var(--caret-border);
  color: var(--caret-color);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Playlist “value box” base */
#playlistDisplay>label {
  display: block;
  margin-bottom: 6px;
}

#playlistText {
  position: relative;
  padding-right: 2.2rem;
  /* space for chip */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .03);
}

/* Compress wrappers used by the editors on the main page */
#groups-editor .gle-modal,
#groups-editor .gle-modal-content,
#members-editor .gle-modal,
#members-editor .gle-modal-content,
#games-editor .gle-modal,
#games-editor .gle-modal-content {
  display: contents;
}

/* Inline editors: remove wrapper padding that created gaps */
#captains-editor .gle-modal-content,
#groups-editor .gle-modal-content,
#members-editor .gle-modal-content,
#games-editor .gle-modal-content {
  padding: 0 !important;
  margin: 0 !important;
  border: 0;
  min-height: 0;
}

/* Captains/Members list rows */
.gle-display {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .5rem;
  border-radius: .5rem;
}

.gle-display:hover {
  background: rgba(0, 0, 0, .04);
}

.sel-checkbox {
  transform: scale(1.25);
}

.name,
.layoutNameLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width:480px) {

  .name,
  .layoutNameLabel {
    white-space: normal;
  }
}

/* “Needs update” / dirty state */
.needs-update {
  position: relative;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.needs-update::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--accent);
}

@keyframes gentlePulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
  }

  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent);
  }
}

.needs-update.pulse {
  animation: gentlePulse 1.8s ease-in-out infinite;
}

/* Vertical rhythm & CTA */
#groups-editor label,
#members-editor label,
#games-editor label,
#playlistDisplay>label {
  margin-bottom: 6px;
}

.select-field,
#playlistText {
  margin-bottom: 14px;
}

button#startBtn {
  background: #2563eb;
  color: #fff;
  border: 1px solid #1e40af;
  border-radius: 10px;
  padding: .55rem 1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

button#startBtn:hover {
  filter: brightness(1.05);
}

button#startBtn:active {
  transform: translateY(1px);
}

/* Title nudge (instead of &nbsp;) */
.page-title {
  margin-left: 1rem;
}

/* --- Restore playlist to full-width field with caret and no button --- */
#playlistDisplay {
  display: block !important;
  /* put label on its own line */
  width: 100%;
}

#playlistDisplay>label {
  display: block;
  margin-bottom: 6px !important;
}

/* Hide the old button so it doesn't steal width */
#changePlaylistBtn {
  display: none !important;
}

/* Make the value area look like an input and reserve space for the caret chip */
#playlistText {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: .5rem .75rem;
  padding-right: 2.2rem;
  /* space for caret chip */
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius, 10px);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .03);
}

/* Same circular caret chip used on Players/Games/Select */
#playlistText::after {
  content: "↕";
  /* or "▾" / "▲▼" / "⇕" */
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--caret-bg, #f3f4f6);
  border: 1px solid var(--caret-border, #e5e7eb);
  color: var(--caret-color, #6b7280);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Make display rows flex so the icon can sit on the right */
.group-list-container .gle-display {
  display: flex;
  align-items: center;
}

/* Trailing edit button displayed in display mode. */
.group-list-container .gle-display .row-edit {
  margin-left: auto;
  padding: 6px;
  /* ~32px hit target with an 18px icon */
  border: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  line-height: 0;
  opacity: .8;
}

.group-list-container .gle-display .row-edit:hover,
.group-list-container .gle-display .row-edit:focus-visible {
  opacity: 1;
  outline: 2px solid transparent;
}

/* Keep icon size consistent */
.group-list-container .gle-display .row-edit svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
  /* lets the button get the click */
}

/* Hide edit icon in Select mode (when checkboxes are visible) */
.group-list-container.select-mode .row-edit {
  display: none !important;
}

/* Hide edit pencils when selecting (checkbox screen) */
.select-mode .row-edit {
  display: none !important;
}


/* STYLE THE DIALOG BOX HEADER REGION IN EDIT MODE */

/* Reset the default browser dialog look */

#roundSetupContainer.setup {
  padding-top: 0;
}

/* center the title between + and x buttons */
.gle-modal-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.gle-modal-header .show-add-dlg {
  justify-self: start;
  align-self: center;
}

.gle-modal-header .gle-close {
  justify-self: end;
  align-self: center;
}



/* =============================================================
   Dynamic scorecard styling
   ============================================================= */

/* =========================
   Dynamic scorecard styling
   (legacy table-based scorecard)
   ========================= */

/* Table layout & gridlines */
.scorecard {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: .8rem;
  table-layout: fixed;
}

.scorecard th,
.scorecard td {
  border: 1px solid var(--border-strong, #d1d5db);
  /* grid lines */
  padding: 4px;
  margin: 0;
  text-align: center;
  overflow: hidden;
}

.scorecard th {
  background: #f9fafb;
  font-weight: 600;
}

/* Compact, borderless inputs inside grid cells */
.scorecard td input {
  border: 0;
  width: 100%;
  max-width: none;
  padding: 2px;
  margin: 0;
  font-size: .8rem;
  text-align: center;
  box-sizing: border-box;
}

/* Optional: highlight stroke holes (e.g., handicap strokes applied) */
.scorecard td.stroke-hole,
.scorecard input.stroke-hole {
  background: #fff6bf;
  /* soft yellow */
  outline: 1px solid #e6d37a;
  /* subtle edge */
}

/* Optional section wrapper used around the scorecard area */
.scorecard-section {
  background: #e6f7e6;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 0 4px rgba(0, 0, 0, .05);
}

.scorecard-section h4 {
  margin: 0 0 8px;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
}

.scorecard-section p {
  margin: 0 0 12px;
  text-align: center;
  font-size: .9rem;
  color: var(--muted, #6b7280);
}

.scorecard td.gm-1stroke {
  background: rgba(255, 215, 0, 0.22);
}

.scorecard td.gm-2strokes {
  background: rgba(255, 215, 0, 0.36);
  /* darker but not heavy */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  /* optional */
}

td.scorecell {
  position: relative;
  font-size: 14px;
  padding: 4px 6px;
}

/* top-left: gross */
.score-gross {
  position: absolute;
  top: 2px;
  left: 3px;
}

/* bottom-left: net (smaller, subtle) */
.score-net {
  position: absolute;
  bottom: 2px;
  left: 3px;
  font-size: 11px;
  opacity: 0.8;
}

/* top-right: to-par (E, +1, -2) */
.score-par {
  position: absolute;
  top: 2px;
  right: 3px;
  font-weight: 600;
}

/* GameManager header styling (e.g., in the course editor) */

.gm-header-title {
  font-size: 0.85em;
  font-weight: 600;
  line-height: 1.1;
}

.gm-header-score {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.1;
}