/* =========================================================
   Golf League Website - style.css (recreated)
   ========================================================= */

/* ===== Background (fairway image) ===== */
html, body { height: 100%; margin: 0; }

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #0f172a;
  background: url("../assets/images/fairway.png") center/cover no-repeat fixed;
}

/* Dark overlay so text is readable on photo backgrounds */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: -1;
}

/* ===== Page wrapper ===== */
.page{
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 16px 40px;
}

/* ===== Hero ===== */
.hero{
  margin: 6px 0 18px;
  text-align: center;
}

.heroTitle{
  margin: 0;
  color: #f8fafc;
  letter-spacing: 0.3px;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}

/* ===== Layout ===== */
.layout{
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 22px;
  align-items: start;
}

@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .scoreEntryRow{
    grid-template-columns: 1fr;
  }
}

/* Optional stacked admin cards (shows background gaps between cards) */
.adminStack{
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

/* ===== Panels ===== */
.panel{
  background: rgba(255,255,255,0.92);
  border: 2px solid rgba(0,0,0,0.22);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.22);
  overflow: hidden;
}

.panelHeader{
  padding: 14px 16px;
  background: rgba(15, 23, 42, 0.06);
  border-bottom: 1px solid rgba(0,0,0,0.10);
}

.panelHeader h2, .panelHeader h3{
  margin: 0;
}

.panelBody{
  padding: 16px;
}

.panelBody.isCollapsed{
  display: none;
}

.leaderboardHeader,
.collapsibleHeader{
  cursor: pointer;
  user-select: none;
}

.leaderboardHeader:focus,
.collapsibleHeader:focus{
  outline: 2px solid rgba(15, 23, 42, 0.35);
  outline-offset: 2px;
}

.hidden{ display: none !important; }

/* Common flex row helper used in inline styles */
.row{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ===== Score entry (portal-style) ===== */
.scoreEntryRow{
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.scoreEntryButtonWrap{
  display: flex;
}

.scoreEntryButtonWrap .btnPrimary{
  height: 42px;
  padding: 0 18px;
  width: 100%;
}

/* ===== Labels / help text ===== */
.blockLabel{
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(15,23,42,0.85);
}

.hint{
  margin: 10px 0 0;
  font-size: 13px;
  color: rgba(15,23,42,0.72);
}

.status{
  margin: 10px 0 0;
  font-size: 13px;
  color: rgba(15,23,42,0.78);
}

/* ===== Inputs ===== */
.bigInput,
.bigSelect{
  width: 100%;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.25);
  background: rgba(255,255,255,0.95);
  padding: 0 12px;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}

.bigInput:focus,
.bigSelect:focus{
  border-color: rgba(15, 23, 42, 0.55);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.18);
}

#scoreTeamInput,
#scorePlayerInput{
  padding-right: 30px;
  background-image:
    linear-gradient(45deg, transparent 50%, #000 50%),
    linear-gradient(135deg, #000 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 17px,
    calc(100% - 13px) 17px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

#scoreTeamInput::-webkit-calendar-picker-indicator,
#scorePlayerInput::-webkit-calendar-picker-indicator{
  opacity: 0;
  display: none;
}

.bigSelect{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(15,23,42,0.55) 50%),
    linear-gradient(135deg, rgba(15,23,42,0.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 17px,
    calc(100% - 13px) 17px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Password toggle */
.passwordField{
  position: relative;
}

.passwordField .bigInput{
  padding-right: 46px;
}

.passwordToggle{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(15,23,42,0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.passwordToggle svg{
  width: 18px;
  height: 18px;
  display: block;
}

.passwordToggle:hover{
  background: rgba(15,23,42,0.08);
}

.passwordToggle:focus-visible{
  outline: 2px solid rgba(15, 23, 42, 0.35);
  outline-offset: 2px;
}

.passwordToggle.isOn{
  color: rgba(15,23,42,0.95);
}

/* ===== Buttons ===== */
button{ font-family: inherit; cursor: pointer; }

.btnPrimary{
  background: #166534; /* deep green */
  color: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  padding: 0 14px;
  height: 42px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}

.layeredOutline{
  width: 100%;
  box-sizing: border-box;
  padding: 4px;
  border-radius: 14px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(15,23,42,0.22);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

.layeredOutline > .bigInput,
.layeredOutline > .bigSelect,
.layeredOutline > .btnPrimary,
.layeredOutline > .secondary{
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  display: block;
}

.layeredOutline > .btnPrimary.toolBtn{
  min-width: 0;
}

.btnPrimary:hover{ filter: brightness(1.05); }
.btnPrimary:active{ transform: translateY(1px); }

.secondary{
  background: rgba(255,255,255,0.92);
  color: rgba(15,23,42,0.88);
  border: 1px solid rgba(15,23,42,0.28);
  border-radius: 12px;
  padding: 0 14px;
  height: 42px;
  font-weight: 700;
}

.secondary:hover{ background: rgba(255,255,255,1); }

/* OCR drop area */
#teeOcrDrop.isDragOver{
  border-color: rgba(22,101,52,0.6) !important;
  box-shadow: 0 0 0 3px rgba(22,101,52,0.12) inset;
}

/* ===== Tables ===== */
.tableWrap{
  width: 100%;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.65);
}

.leaderTable,
.teeTable{
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}


.leaderTable th,
.leaderTable td,
.teeTable th,
.teeTable td{
  border-bottom: 1px solid rgb(28, 38, 59);
  /* border-bottom: none !important;
  box-shadow: inset 0 -1px 0 #213249; */
  padding: 10px 10px;
  font-size: 14px;
}


.leaderTable thead th,
.teeTable thead th{
  position: sticky;
  top: 0;
  z-index: 4;
  background: rgba(148,163,184,0.95); /* grey band */
  color: rgba(15,23,42,0.92);
  text-align: left;
}

.leaderTable tbody tr:nth-child(even),
.teeTable tbody tr:nth-child(even){
  background: rgba(148,163,184,0.10);
}

/* Player delete bubble */
.playerDeleteBubble{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.35);
  background: rgba(255,255,255,0.9);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.playerDeleteBubble::after{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(15,23,42,0.25);
}

.playerDeleteBubble.isOn{
  border-color: rgba(185,28,28,0.7);
  background: rgba(185,28,28,0.15);
}

.playerDeleteBubble.isOn::after{
  background: #b91c1c;
}

.playerDeleteBubble:hover{
  border-color: rgba(15,23,42,0.6);
}

/* Bulk import preview table text contrast */
#playersImportBlock .leaderTable td,
#playersImportBlock .leaderTable th{
  color: rgba(15,23,42,0.92);
}

/* Leaderboard view toggle */
.leaderboardToggle{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 4px 0 10px;
}

.leaderboardToggle .toggleBtn{
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,0.28);
  background: rgba(255,255,255,0.92);
  color: rgba(15,23,42,0.88);
  padding: 6px 12px;
  font-weight: 700;
}

.leaderboardToggle .toggleBtn.isActive{
  background: #166534;
  color: #fff;
  border-color: rgb(196, 2, 2);
}

/* Sticky first column on wide score/leader tables (player name stays visible) */
.stickyName{
  position: sticky;
  left: 0;
  z-index: 3;
  background: rgba(255,255,255,0.96);
  box-shadow: 3px 0 0 rgba(15,23,42,0.08);
  width: 100px;
  min-width: 100px;
}

/* Ensure stickyName header matches header band */
.leaderTable thead th.stickyName{
  z-index: 6;
}

/* Team column width (first column in leaderboard) */
.leaderTable thead th:nth-child(1),
.leaderTable tbody td:nth-child(1){
  width: 200px;
  min-width: 50px;
}



/* ===== Tee times table wrappers ===== */
.teeWrap{
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.65);
}

/* ===== Birdie list ===== */
.birdieList{
  margin: 10px 0 0;
  padding-left: 18px;
}

/* ===== Scorecard ===== */
.scorecardWrap{
  width: 100%;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.65);
}

.scorecardTitle{
  margin: 0;
}

.scorecardSubtitle{
  margin: 6px 0 0;
  font-size: 13px;
  color: rgba(15,23,42,0.72);
}

.scorecardHeader{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.scorecardTable input{
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
  background: transparent;
  text-align: center;
  outline: none;
}

.toolBar{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.toolBtn{
  height:42px;
  min-width:230px;      /* so 'Close ...' labels fit */
  padding:0 16px;
  margin-top:0 !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

.toolBtn.isActive{
  background:#1f8a3b !important;
  border-color:#1f8a3b !important;
  color:#fff !important;
}

/* ===== Small header controls (filters) ===== */
.thFlex{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.miniBtn{
  height:28px;
  padding:0 10px;
  font-size:12px;
  border-radius:10px;
  white-space:nowrap;
  border: 1px solid rgba(15,23,42,0.28);
  background: rgba(255,255,255,0.95);
}

.miniSelect{
  height:30px;
  font-size:12px;
  border-radius:10px;
  border: 1px solid rgba(15,23,42,0.22);
  background: rgba(255,255,255,0.95);
}

.teamSelect{
  width:100%;
  height:34px;
  border-radius:10px;
  border: 1px solid rgba(15,23,42,0.22);
  background: rgba(255,255,255,0.95);
}

/* ===== Players table header band consistency ===== */
.playersTable thead th{
  background: rgba(148,163,184,0.95) !important;
}

.headerWithIcon{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.infoIcon{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #1b7a52;
  background: #e6f2ea;
  color: #0f5a41;
  font-size: 11px;
  font-weight: 700;
  padding: 0;
  cursor: pointer;
  line-height: 1;
}

.infoIcon:focus{
  outline: 2px solid #1b7a52;
  outline-offset: 2px;
}

.infoIcon::after,
.infoIcon::before{
  display: none;
}

.infoTooltip{
  position: fixed;
  z-index: 9999;
  min-width: 260px;
  max-width: 320px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, #0f3f30 0%, #0c3326 100%);
  border: 1px solid #0f5a41;
  color: #f0f7f3;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.infoTooltip.isVisible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.infoTooltipPanel{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.infoTooltipTitle{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.infoTooltipSelect{
  width: 100%;
}

.infoTooltipBtn{
  width: 100%;
}

.infoTooltipHint{
  font-size: 11px;
  color: #b7d7c8;
}

/* Make Team column match zebra (override any sticky-first-column behavior) */
.playersTable tbody td:first-child{
  position: static !important;
  left: auto !important;
  z-index: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border-right: 1px solid rgba(15,23,42,0.10);
}

/* ===== Holes editor (scorecard-style, horizontal) ===== */
.holesCardTable th, .holesCardTable td{ text-align:center; }
.holesCardTable .holesLabel{ text-align:left; width:90px; }
.holesCardTable .holesNum{ width:44px; }
.holesCardTable .holesTotal{ width:64px; font-weight:800; }

/* ===== Scorecard layout (screenshot match) ===== */
.scorecardTable{
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: max-content;
  min-width: 100%;
  border: 2px solid #000;
  background: #fff;
  --sc-col1-width: 130px;
  --sc-col2-width: 32px;
  --sc-hole-col-width: 70px;
  --sc-total-width: 64px;
  --sc-spacer-width: 26px;
  --sc-col1-offset: var(--sc-col1-width);
  --sc-row-height: 36px;
  --sc-type-row-height: 110px;
  --sc-grid-color: rgba(90, 90, 90, 1);
  --sc-header-1: #9fb0c8;
  --sc-header-2: #00e5ff;
  --sc-header-3: #a7ddf6;
}

.scorecardTable td{
  border: 1px solid var(--sc-grid-color) !important;
  padding: 6px 8px !important;
  font-size: 20px !important;
  text-align: center;
  vertical-align: middle;
  min-width: var(--sc-hole-col-width);
  height: var(--sc-row-height);
  position: relative;
  z-index: 1;
  background: #fff;
  box-sizing: border-box;
  white-space: nowrap;
}

/* Column 1 cells (labels/names) frozen */
.scorecardTable td.scoreHeaderLeft,
.scorecardTable td.scoreNameCell{
  position: sticky;
  left: 0;
  z-index: 7;
  width: var(--sc-col1-width);
  min-width: var(--sc-col1-width);
  background: #fff;
  background-clip: padding-box;
}

.scorecardTable td.scoreHeaderLeft::after,
.scorecardTable td.scoreNameCell::after,
.scorecardTable td.scoreHeaderType::after,
.scorecardTable td.scoreTypeCell::after{
  content: none !important;
}

.scoreHeaderRow td{
  font-weight: 700;
  border-color: #000 !important;
}

.scoreHeaderTop td{ background: var(--sc-header-1) !important; }
.scoreHeaderPar td{ background: var(--sc-header-2) !important; }
.scoreHeaderHdcp td{ background: var(--sc-header-3) !important; }

.scoreHeaderTop td.scoreHeaderLeft,
.scoreHeaderTop td.scoreHeaderType{
  background: var(--sc-header-1) !important;
}

.scoreHeaderPar td.scoreHeaderLeft,
.scoreHeaderPar td.scoreHeaderType{
  background: var(--sc-header-2) !important;
}

.scoreHeaderHdcp td.scoreHeaderLeft,
.scoreHeaderHdcp td.scoreHeaderType{
  background: var(--sc-header-3) !important;
}

.scorecardTable td.scoreHeaderMerge{
  position: sticky;
  left: 0;
  z-index: 9;
  width: calc(var(--sc-col1-width) + var(--sc-col2-width));
  min-width: calc(var(--sc-col1-width) + var(--sc-col2-width));
  text-align: center;
  font-weight: 700;
  border-right: 2px solid #000 !important;
  background: inherit;
  background-clip: padding-box;
}

.scorecardTable td.scoreHeaderLeft{
  text-align: center;
  width: var(--sc-col1-width);
  min-width: var(--sc-col1-width);
}

.scorecardTable td.scoreHeaderType{
  position: sticky;
  left: var(--sc-col1-offset);
  z-index: 8;
  width: var(--sc-col2-width);
  min-width: var(--sc-col2-width);
  text-align: center;
  font-weight: 700;
  border-right: 4px solid #000 !important;
  background: #fff;
  background-clip: padding-box;
}

.scorecardTable td.scoreNameCell{
  font-weight: 700;
  text-align: center;
  width: var(--sc-col1-width);
  min-width: var(--sc-col1-width);
  border-bottom: 4px solid #000 !important;
  white-space: normal;
  line-height: 1.1;
}

.scorecardTable td.scoreTypeCell{
  position: sticky;
  left: var(--sc-col1-offset);
  z-index: 8;
  width: var(--sc-col2-width);
  min-width: var(--sc-col2-width);
  height: var(--sc-type-row-height) !important;
  min-height: var(--sc-type-row-height) !important;
  text-align: center;
  font-size: 18px;
  background: #fff;
  border-right: 4px solid #000 !important;
  background-clip: padding-box;
}

/* Ensure player divider crosses column 2 (Net label cell) */
.scoreNetRow td.scoreTypeCell{
  border-bottom: 3px solid #000 !important;
  box-shadow: inset 0 3px 0 #000;
  z-index: 9;
}

/* Remove seam between column 1 and 2 */
.scorecardTable td.scoreHeaderLeft,
.scorecardTable td.scoreNameCell{
  border-right: none !important;
}

.scorecardTable td.scoreHeaderType,
.scorecardTable td.scoreTypeCell{
  border-left: none !important;
}

.scorecardTable tr.scorePlayerRow td{
  height: var(--sc-type-row-height) !important;
  min-height: var(--sc-type-row-height) !important;
}

.scorecardTable tr.scorePlayerRow{
  height: var(--sc-type-row-height);
}

.scorecardTable td.scoreTotalCell{
  width: var(--sc-total-width);
  min-width: var(--sc-total-width);
  font-weight: 700;
}

.scorecardTable td.scoreTotalHeader{
  font-weight: 800;
}

.scorecardTable td.scoreSpacer{
  width: var(--sc-spacer-width);
  min-width: var(--sc-spacer-width);
  padding: 0 !important;
  background: #000 !important;
  border: 2px solid #000 !important;
}

.scoreTypeCellVertical{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* HDCP bottom divider */
.scoreHeaderHdcp td{
  border-bottom: 4px solid #000 !important;
  box-shadow: inset 0 -4px 0 #000;
}

/* Divider between player blocks */
.scoreNetRow td{
  border-bottom: 4px solid #000 !important;
}

.holesCardTable .holesDivider{ border-left: 3px solid rgba(15,23,42,0.20); }
.holesGap{ background: rgba(0,0,0,0.06); }

.holeInput{
  width: 44px;
  height: 34px;
  text-align: center;
  padding: 0;
}

/* ===== Right-side stacks / cards used in some pages ===== */
.rightStack{
  display: grid;
  gap: 22px;
}

.cardSpacer{ height: 10px; }
.cardInner{ padding: 12px; }
.holeSection{ margin-top: 12px; }


/* ===== Extra admin actions ===== */
.btnBlack{
  background:#0b0f19;
  color:#fff;
  border:1px solid rgba(0,0,0,0.25);
  border-radius:12px;
  padding:0 14px;
  height:42px;
  font-weight:700;
  box-shadow:0 8px 18px rgba(0,0,0,0.18);
}
.btnBlack:hover{ filter: brightness(1.08); }
.btnBlack:active{ transform: translateY(1px); }

.btnDanger{
  background:#b91c1c; /* red */
  color:#fff;
  border:1px solid rgba(0,0,0,0.12);
  border-radius:12px;
  padding:0 14px;
  height:42px;
  font-weight:700;
  box-shadow:0 8px 18px rgba(0,0,0,0.18);
}
.btnDanger:hover{ filter: brightness(1.05); }
.btnDanger:active{ transform: translateY(1px); }

/* ===== Players filter icon + popup (Admin Tools) ===== */
.filterIconBtn{
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.28);
  background: rgba(255,255,255,0.92);
  color: rgba(15,23,42,0.88);
  padding: 0;
  line-height: 0;
}
.filterIconBtn:hover{ background: rgba(255,255,255,1); }
.filterIconBtn:active{ transform: translateY(1px); }

.filterIconBtn svg{
  width: 22px;
  height: 22px;
  display: block;
}

.playersTopRow{
  /* JS sets this custom property when the panel is open */
  padding-bottom: var(--filters-panel-reserve, 0px);
}

.playersFiltersPanel{
  position: absolute; /* positioned by JS using page coordinates */
  z-index: 40;
  width: min(650px, calc(100vw - 32px));
  max-width: min(650px, calc(100vw - 32px));
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(15,23,42,0.18);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  padding: 12px;
  min-width: 600px;
  max-width: 600px;
  flex: 1;
}

/* Make the dropdown controls themselves narrower inside the players filter popup */
#playersFiltersPanel select.bigSelect{
  width: 210px;        /* <-- change this */
  max-width: 100%;
  min-width: 0;        /* important if bigSelect has a min-width */
}

/* Bigger spacing between Apply and Clear in the Players filter popup */
#playersFiltersPanel #applyPlayersFiltersBtn{
  margin-right: 13px;   /* increase/decrease this */
}

/* ===== Admin working buttons grid (League card) ===== */
.toolGrid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.toolGrid .toolBtn{
  width: 100%;
  min-width: 0; /* override .toolBtn min-width */
  justify-content: center;
}

/* Empty placeholder boxes (for future buttons) */
.toolGridPlaceholder{
  color: transparent !important;
  pointer-events: none;
}
.toolGridPlaceholder:disabled{
  opacity: 1;
}

@media (max-width: 980px){
  .toolGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px){
  .toolGrid{ grid-template-columns: 1fr; }
}

/* ===== Schedule (Tee Time) ===== */
.scheduleGridWrap{
  overflow:auto;
  border: 1px solid rgba(15,23,42,0.18);
  border-radius: 14px;
  background: rgba(255,255,255,0.92);
  max-height: 600px;
  overflow-y: auto;
}

.scheduleTable{
  width: 100%;
  border-collapse: collapse;
  min-width: 900px; /* allows horizontal scroll */
}

.scheduleTable th,
.scheduleTable td{
  border: 1px solid rgba(15,23,42,0.12);
  padding: 8px;
  vertical-align: top;
}

.scheduleTable thead th{
  background: rgba(15,23,42,0.06);
  font-weight: 900;
  text-align: center;
}

.scheduleSticky{
  position: sticky;
  left: 0;
  z-index: 2;
  background: rgba(255,255,255,0.98);
}

.scheduleTimeSelect{
  width: 140px;
  max-width: 140px;
}

.scheduleCell{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.scheduleTeamSelect{
  width: 100%;
  min-width: 160px;
}

.scheduleGenRow td{
  background-color: #e6f2ea;
}

.scheduleGenBtn{
  width: 100%;
  min-width: 120px;
}

.scheduleGenAllBtn,
.compGenAllBtn{
  width: 100%;
  min-width: 120px;
}

/* ===== Schedule header controls ===== */
.scheduleControlsRow{
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.scheduleControlsHint{
  margin: 0;
  flex: 1 1 260px;
  min-width: 220px;
}

.scheduleControlsRight{
  display: flex;
  gap: 12px;
  margin-left: auto;     /* pushes controls to the right */
  flex-wrap: wrap;
  align-items: flex-end;
}

.scheduleControl{
  width: 220px;
  min-width: 200px;
}

.scheduleControlSelect{
  width: 100%;
}

/* ===== User portal cards ===== */
.heroSubtitle{
  margin: 8px 0 0;
  color: rgba(248,250,252,0.85);
  text-align: center;
  font-weight: 600;
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}

.portalSearch{
  font-size: 16px;
}

.portalSection{
  margin-top: 6px;
}

.portalCard{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  border-radius: 16px;
  border: 6px solid rgba(15,23,42,0.85);
  background: url("../assets/images/fairway.png") center/cover no-repeat;
  text-decoration: none;
  color: rgba(15,23,42,0.9);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.portalCard::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.5));
}

.portalFormCard{
  width: 100%;
  align-items: stretch;
  justify-content: flex-start;
  padding: 14px;
  min-height: 0;
  box-sizing: border-box;
}

.portalFormCard::before{
  background: linear-gradient(135deg, rgba(255,255,255,0.75), rgba(255,255,255,0.45));
}

.portalFormInner{
  position: relative;
  z-index: 1;
  width: 100%;
  background: rgba(255,255,255,0.9);
  border-radius: 14px;
  padding: 16px;
  border: 1px solid rgba(15,23,42,0.2);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

.portalCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(0,0,0,0.24);
}

.portalCard:focus-visible{
  outline: 3px solid rgba(34,197,94,0.7);
  outline-offset: 4px;
}

.portalCardLogo{
  position: relative;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.88);
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
  font-weight: 700;
}

.portalCardCta{
  position: absolute;
  right: 18px;
  bottom: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(15,23,42,0.88);
}

.centerStage{
  min-height: 55vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 640px){
  .portalCard{
    min-height: 140px;
  }

  .portalCardCta{
    right: 12px;
    bottom: 10px;
    font-size: 12px;
  }
}

/* ===== Legacy landing styles (from login.css) ===== */
.landing{
  --green-1: #579954;   /* slide 1 green */
  --green-2: #406738;   /* slide 2 darker green */
  --gold:    #F2C30D;   /* headline gold */
  --teal:    #012433;   /* slide 3 left */
  --card:    #ffffff;
  --text:    #0b0f14;
}

.landing *{ box-sizing: border-box; }

.landing .snap{
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.landing .screen{
  min-height: 100vh;
  scroll-snap-align: start;
  position: relative;
  display: flex;
}

/* generic */
.landing .container{
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
}

/* buttons */
.landing .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  border: 2px solid transparent;
  cursor: pointer;
}

.landing .btnPrimary{
  background: var(--gold);
  color: #1d1d1d;
}

.landing .btnGhost{
  background: transparent;
  border-color: rgba(255,255,255,0.6);
  color: #ffffff;
}

/* scroll hint */
.landing .scrollHint{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  text-decoration: none;
  color: rgba(255,255,255,0.85);
  font-size: 26px;
  line-height: 1;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,0.15);
}

/* dots */
.landing .dots{
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 10px;
  z-index: 50;
}

.landing .dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.45);
  border: 2px solid rgba(0,0,0,0.15);
  display: block;
}

.landing .dot.isActive{
  background: var(--gold);
}

/* SLIDE 1 */
.landing .screen--welcome{
  background: var(--green-1);
  color: #fff;
}

.landing .welcomeGrid{
  width: 100%;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  min-height: 100vh;
}

.landing .welcomeLeft{
  padding: clamp(28px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
}

.landing .heroTitle{
  margin: 0;
  color: var(--gold);
  font-weight: 300;
  letter-spacing: 0.5px;
  line-height: 0.95;
  font-size: clamp(44px, 6.5vw, 92px);
}

.landing .heroTag{
  margin: 0;
  opacity: 0.85;
  letter-spacing: 1px;
  font-weight: 700;
}

.landing .heroActions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.landing .welcomeRight{
  /* Replace this with your Canva-exported illustration later if you want */
  background: linear-gradient(180deg, #D8F0F4 0%, #bfe6e2 50%, #7fbf79 100%);
  position: relative;
}

/* decorative golfer area placeholder */
.landing .welcomeRight::after{
  content: "";
  position: absolute;
  inset: 12% 12% 12% 12%;
  border-radius: 24px;
  background: rgba(255,255,255,0.25);
  border: 2px solid rgba(255,255,255,0.35);
}

/* SLIDE 2 */
.landing .screen--opportunities{
  background: var(--green-2);
  color: #fff;
  align-items: flex-start;
  padding-top: 56px;
}

.landing .sectionTitle{
  color: var(--gold);
  font-weight: 300;
  margin: 0 0 24px 0;
  font-size: clamp(36px, 5.5vw, 84px);
  text-align: center;
}

.landing .stackCards{
  display: grid;
  gap: 26px;
  padding-bottom: 64px;
}

.landing .infoCard{
  text-decoration: none;
  color: var(--text);
  background: var(--card);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.18);
  display: block;
}

.landing .infoCardTitle{
  color: var(--gold);
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.landing .infoCardBody{
  margin: 0;
  font-size: 18px;
  line-height: 1.45;
}

/* SLIDE 3 */
.landing .screen--contact{
  background: transparent;
}

.landing .contactGrid{
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
}

.landing .contactLeft{
  background: var(--teal);
  color: #fff;
  padding: clamp(28px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.landing .contactTitle{
  margin: 0 0 10px 0;
  color: var(--gold);
  font-weight: 300;
  font-size: clamp(44px, 6vw, 88px);
}

.landing .contactBlock{ margin-top: 10px; }
.landing .contactLabel{
  color: var(--gold);
  font-weight: 900;
  letter-spacing: 1px;
}

.landing .contactValue{
  color: #dfe9ef;
  text-decoration: none;
  font-size: 20px;
  display: inline-block;
  margin-top: 6px;
}

.landing .contactActions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.landing .contactRight{
  background: #579954;
  position: relative;
  overflow: hidden;
}

/* big light-green circle-ish shape */
.landing .contactRight::after{
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  right: -55%;
  top: 10%;
  border-radius: 999px;
  background: #AFC64F;
  opacity: 0.95;
}

/* Responsive */
@media (max-width: 900px){
  .landing .welcomeGrid,
  .landing .contactGrid{
    grid-template-columns: 1fr;
  }
  .landing .welcomeLeft{
    justify-content: center;
  }
  .landing .welcomeRight{
    min-height: 42vh;
  }
  .landing .contactRight{
    min-height: 35vh;
  }
  .landing .dots{ right: 10px; }
}