/* BCVL Dashboard — shared styles (mockup, sample data) */ .bcvl-dash { font-family: 'Open Sans', Arial, sans-serif; color: #22282f; padding-bottom: 48px; font-size: 16px; line-height: 1.6; } /* Breathing room between the hero image/box above and the dashboard content below — scoped to the Tournament page only (its section is the only one with the cid-tournament-dash class), since the hero and the blue "Get Ready!" pending card otherwise touch with zero gap. Set to 70px to match the gap already below the blue card before the footer (.bcvl-card's 22px margin-bottom + .bcvl-dash's 48px padding-bottom), so the card reads as evenly spaced top and bottom. */ .cid-tournament-dash { padding-top: 70px; } .bcvl-dash h1, .bcvl-dash h2, .bcvl-dash h3, .bcvl-dash .display { font-family: 'Jost', 'Open Sans', sans-serif; font-weight: 600; letter-spacing: 0.01em; } .bcvl-btn { font-family: inherit; font-size: 12.5px; border: 1px solid #d7dde6; background: #fff; color: #22282f; padding: 7px 13px; border-radius: 6px; cursor: pointer; } .bcvl-btn.primary { background: var(--brand-accent, #3e62a8); color: #fff; border-color: var(--brand-accent, #3e62a8); } .bcvl-btn:hover { filter: brightness(0.97); } .bcvl-subtabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .bcvl-subtabs button { font-family: 'Jost', sans-serif; font-size: 12.5px; font-weight: 500; padding: 7px 16px; border-radius: 18px; border: 1px solid #d7dde6; background: #fff; color: #6b7280; cursor: pointer; } .bcvl-subtabs button.active { background: var(--brand-accent, #3e62a8); color: #fff; border-color: var(--brand-accent, #3e62a8); } /* Committee-only "Team Rosters" tab (Teams page) — summary table of every team's tournament-eligible count, plus the dropdown that picks which team's full roster shows below it. */ .bcvl-roster-summary-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .bcvl-roster-summary-table th, .bcvl-roster-summary-table td { padding: 8px 16px; text-align: left; border-bottom: 1px solid #e2e6ec; white-space: nowrap; } .bcvl-roster-summary-table th { color: #6b7280; font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; } .bcvl-roster-summary-table tbody tr { cursor: pointer; } .bcvl-roster-summary-table tbody tr:hover { background: #f5f7fb; } .bcvl-roster-summary-table tbody tr.is-selected { background: #eef2fa; } .bcvl-eligible-count { font-weight: 700; } .bcvl-roster-picker { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px 16px; border-top: 1px solid #e2e6ec; } .bcvl-roster-picker select { padding: 7px 10px; border: 1px solid #d7dde6; border-radius: 6px; font-size: 13.5px; font-family: inherit; } /* Committee-only "Attendance" tab (Teams page) — one team's real-scheduled- games x roster-players grid. The name column is sticky so it stays readable while scrolling right across a full season's worth of game columns; the table itself scrolls inside its own wrapper (see the inline overflow-x:auto wrapper in bcvl-teams-render.js) rather than the page, same pattern as bcvl-roster-summary-table above. */ .bcvl-attendance-table { border-collapse: collapse; font-size: 13px; } .bcvl-attendance-table th, .bcvl-attendance-table td { padding: 7px 10px; text-align: center; border-bottom: 1px solid #e2e6ec; white-space: nowrap; } .bcvl-attendance-table th { color: #6b7280; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.02em; } .bcvl-attendance-name-col { text-align: left !important; position: sticky; left: 0; background: #fff; z-index: 1; box-shadow: 1px 0 0 #e2e6ec; } .bcvl-attendance-table th.bcvl-attendance-name-col { background: #fafbfc; } .bcvl-attendance-cell input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; } .bcvl-attendance-cell input[type="checkbox"]:disabled { cursor: wait; opacity: 0.6; } .bcvl-attendance-count { font-weight: 700; } /* "All Weeks" view — up to ~22 numeral-only week columns, squeezed down so the grid fits on screen without horizontal scrolling on a normal desktop width. Not used in the single-week view, where one column can stay wide and fully labeled ("Week 12 — Aug 15"). */ .bcvl-attendance-table th.bcvl-attendance-week-col-narrow, .bcvl-attendance-table td.bcvl-attendance-week-col-narrow { padding-left: 5px; padding-right: 5px; } .bcvl-attendance-table th.bcvl-attendance-week-col-narrow { text-transform: none; font-size: 12px; } .bcvl-card { background: #fff; border: 1px solid #e2e6ec; border-radius: 10px; overflow: hidden; margin-bottom: 22px; text-align: left; } .bcvl-card-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; color: #fff; } .bcvl-card-head .name { font-size: 17px; font-family: 'Jost', sans-serif; font-weight: 600; } .bcvl-card-head .bcvl-btn { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.4); color: #fff; } .bcvl-dash table { border-collapse: collapse; width: 100%; font-size: 16px; } .bcvl-dash th, .bcvl-dash td { padding: 8px 10px; text-align: center; border-bottom: 1px solid #e2e6ec; white-space: nowrap; } .bcvl-dash th { background: #fafbfc; color: #667; font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; position: sticky; top: 0; } .bcvl-dash td.team-name { text-align: left; font-weight: 600; } .bcvl-dash td.rank { color: #aab; font-weight: 700; width: 28px; } .bcvl-dash td.total { font-weight: 700; background: #f2f4f8; } .bcvl-dash .tie-note { font-size: 11px; color: #8a8f98; font-weight: 400; } /* Results page standings tables (regular-season + archived/Pending-page "Final Standings"): each division renders as its own separate , so with the default table-layout: auto every table sized its # / Team / Total Points columns independently off that division's own longest team name — the Team column landed at a different width in every division. table-layout: fixed plus explicit widths on the # and Total Points columns pins those two to the same width everywhere and lets Team take whatever's left, so the column boundaries now line up division to division regardless of team-name length. */ .bcvl-standings-table { table-layout: fixed; } .bcvl-standings-table th:first-child, .bcvl-standings-table td.rank { width: 40px; } .bcvl-standings-table th:last-child, .bcvl-standings-table td.total { width: 130px; } .bcvl-matrix-scroll { overflow-x: auto; } .bcvl-dash td.freeze1, .bcvl-dash th.freeze1 { position: sticky; left: 0; background: #fff; z-index: 2; min-width: 160px; } .bcvl-dash td.freeze2, .bcvl-dash th.freeze2 { position: sticky; left: 160px; background: #f2f4f8; z-index: 2; min-width: 70px; } .bcvl-dash th.freeze1, .bcvl-dash th.freeze2 { background: #fafbfc; z-index: 3; } .bcvl-week-picker { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .bcvl-week-picker select { padding: 6px 10px; border-radius: 6px; border: 1px solid #d7dde6; font-size: 13px; } .bcvl-slots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .bcvl-slot { border: 1px dashed #d7dde6; border-radius: 8px; padding: 12px; background: #fafbfc; min-height: 92px; text-align: left; } .bcvl-slot.played { border-style: solid; background: #fff; } .bcvl-slot .slot-label { font-size: 11px; color: #8a8f98; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.03em; } .bcvl-slot .matchup { font-size: 15.5px; font-weight: 600; } .bcvl-slot .matchup .vs { color: #8a8f98; font-weight: 400; margin: 0 4px; } .bcvl-slot .result { font-size: 16px; font-weight: 700; } .bcvl-slot .result .score { color: var(--brand-accent, #3e62a8); } .bcvl-slot select { width: 100%; padding: 5px; margin-top: 4px; font-size: 12.5px; border-radius: 5px; border: 1px solid #d7dde6; } .bcvl-slot .division-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; } .bcvl-score-slot { display: grid; grid-template-columns: 130px 1fr 40px 16px 40px 1fr; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #e2e6ec; } .bcvl-score-slot:last-child { border-bottom: none; } .bcvl-score-slot .gym-time { font-size: 11.5px; color: #8a8f98; } .bcvl-score-slot .team-a { text-align: right; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bcvl-score-slot .team-b { text-align: left; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bcvl-score-slot .dash { text-align: center; color: #8a8f98; } .bcvl-score-slot input { width: 40px; text-align: center; padding: 6px 2px; border: 1px solid #d7dde6; border-radius: 5px; font-size: 13px; justify-self: center; } /* Public Schedule page, "By Team" and "By Referee" sub-views (league-schedule-render.js) — reuse .bcvl-score-slot's grid/border styling but with their own column counts, set here as real classes (not the inline grid-template-columns these two views used to carry directly on each row) specifically so the mobile override below can actually win the cascade — an inline style="" always beats an external stylesheet rule of equal or lesser specificity, which is exactly why these two views used to stay locked to their desktop column widths on a phone no matter what the @media rule below said. */ .bcvl-score-slot--by-team { grid-template-columns: 1fr 90px 1fr; } .bcvl-score-slot--by-team .ss-when { text-align: left; } .bcvl-score-slot--by-team .ss-week { font-weight: 600; } .bcvl-score-slot--by-team .ss-vs { text-align: center; font-weight: 700; } .bcvl-score-slot--by-team .ss-opponent { text-align: right; } /* "By Referee" sub-view (re-added v3.6.0 — see league-schedule-render.js's viewMode comment). Only two columns of real content (when + matchup, no score/"vs" column — a referee's own schedule isn't about who won), so this gets its own narrower template rather than reusing --by-team's three-column one. */ .bcvl-score-slot--by-referee { grid-template-columns: 1fr 1fr; } .bcvl-score-slot--by-referee .ss-when { text-align: left; } .bcvl-score-slot--by-referee .ss-week { font-weight: 600; } .bcvl-score-slot--by-referee .ss-matchup { text-align: right; font-weight: 600; } .bcvl-empty-state { padding: 30px; text-align: center; color: #8a8f98; font-size: 15px; } /* Tournament seeding tables (public) — plain
markup, no width/nowrap forced, so it already reflows fine at 320-375px; this just matches the rest of the site's card styling instead of falling back to unstyled browser defaults. */ .bcvl-card table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .bcvl-card table th, .bcvl-card table td { padding: 8px 16px; text-align: left; border-bottom: 1px solid #e2e6ec; } .bcvl-card table td.rank { color: #8a8f98; width: 44px; } .bcvl-card table tr:last-child td { border-bottom: none; } /* Shared responsive full-date / short-ISO-date toggle — used by both the Season Info page's "Season at a Glance" table (league-season-overview- render.js) and the Tournament page's Pending views (league-tournament- render.js's dualDateHtml()), so any place on the site that prints a real date gets the same behavior: the full date ("Mon, Oct 19, 2026") at tablet/desktop widths, the short ISO one ("2026-10-19") at 480px and below, so a real weekday+month name never has to wrap across multiple lines in a narrow cell or a centered

. Global (not scoped to a specific container) since it's about the date value, not the layout around it. */ .bcvl-date-short { display: none; } @media (max-width: 480px) { .bcvl-date-full { display: none; } .bcvl-date-short { display: inline; } } /* Season Info page — "Season at a Glance" table (public, read-only, computed from the real Schedule week dates + Tournament pending-page dates; no separate data entry). Placed after the generic ".bcvl-card table" rules above and written against "table th"/"table td" (not just th/td) so its centering/width rules reliably win over those generic ones at equal specificity, regardless of source order. Week column is a touch narrower and bold so it reads as a row label, not data; the two Monday/Tuesday date columns share the remaining width evenly. The two tournament rows (Playoff Friday / Championship Saturday) get a light accent tint and a heavier top border so they visually separate from the regular season weeks above them without needing a second table. */ .bcvl-season-overview table { table-layout: fixed; } .bcvl-season-overview table th, .bcvl-season-overview table td { text-align: center; white-space: normal; } .bcvl-season-overview table th:first-child, .bcvl-season-overview table td.week-label { text-align: left; width: 30%; } .bcvl-season-overview table td.week-label { font-weight: 600; } .bcvl-season-overview table td .tbd { color: #8a8f98; font-style: italic; } .bcvl-season-overview table td .na { color: #c3c9d3; } .bcvl-season-overview table tr.bcvl-season-overview-tourney-row td { background: #eef2fa; font-weight: 600; border-top: 2px solid var(--brand-accent, #3e62a8); } @media (max-width: 480px) { .bcvl-season-overview table th, .bcvl-season-overview table td { padding: 7px 6px; font-size: 11.5px; } .bcvl-season-overview table th:first-child, .bcvl-season-overview table td.week-label { width: 34%; } } /* Referee "Your Assignments" table — Week/Time/Gym are always short (e.g. "Week 3", "7:00 PM", "Gym A") so keep them on one line even at 320px; only the Date column (which carries a weekday name to disambiguate Monday vs Tuesday) is left free to wrap to a second line there instead of shrinking everything to fit. */ .bcvl-referee-assignments th:not(:first-child), .bcvl-referee-assignments td:not(:first-child) { white-space: nowrap; } /* A grouped row (same night + gym, several back-to-back start times) puts more than one time in the Time cell via
, so the row grows taller than the Date/Week/Gym cells next to it — top-align everything instead of the default middle alignment so it doesn't look lopsided. */ .bcvl-referee-assignments td { vertical-align: top; } /* Print/Save-PDF sheets — shared rules for BOTH the referee's "Your Assignments" print (league-referees-render.js's printMyAssignments(), #bcvl-print-referee-assignments, toggled via body class .bcvl-printing-referee-assignments) and a team's schedule print (league-schedule-render.js's printTeamSchedule(), #bcvl-print-team-schedule, toggled via body class .bcvl-printing-team-schedule). Each is a hidden container appended straight to , built and populated on demand right before window.print() is called, and hidden again on screen always via the shared .bcvl-print-sheet class below. Only one of the two toggle classes is ever set at a time (each lives on its own page), so it's safe for both class rules below to share one .bcvl-print-sheet selector for the inner content. When body carries the matching toggle class, the print media query hides every other direct child of — the site's nav, hero, and footer sections, plus every script/hidden-input tag, are all direct body children in every dashboard page — leaving only the printed container's own title/table on the printed page/PDF. */ .bcvl-print-sheet { display: none; } @media print { body.bcvl-printing-referee-assignments > *:not(#bcvl-print-referee-assignments), body.bcvl-printing-team-schedule > *:not(#bcvl-print-team-schedule) { display: none !important; } body.bcvl-printing-referee-assignments #bcvl-print-referee-assignments, body.bcvl-printing-team-schedule #bcvl-print-team-schedule { display: block; padding: 24px; font-family: Arial, Helvetica, sans-serif; color: #000; background: #fff; } .bcvl-print-sheet .bcvl-print-title { font-size: 22px; font-weight: 700; margin-bottom: 2px; } .bcvl-print-sheet .bcvl-print-subtitle { font-size: 14px; color: #333; margin-bottom: 4px; } /* "Printed [date]" — bold per Drew's ask, so it reads as a clear timestamp on a page a referee or captain might keep around for weeks. */ .bcvl-print-sheet .bcvl-print-meta { font-size: 11px; color: #666; margin-bottom: 6px; font-weight: 700; } /* Bold, high-contrast "this can still change" warning — deliberately black (not the muted grey the meta line uses) so it doesn't read as fine print on a page someone prints and tapes to a wall. */ .bcvl-print-sheet .bcvl-print-disclaimer { font-size: 11.5px; color: #000; font-weight: 700; margin-bottom: 18px; } .bcvl-print-sheet table { width: 100%; border-collapse: collapse; font-size: 13px; } .bcvl-print-sheet th, .bcvl-print-sheet td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #999; } .bcvl-print-sheet th { border-bottom: 2px solid #000; } /* On screen some of these columns stay on one line via nowrap so they don't wrap mid-word inside a narrow phone card (see the .bcvl-referee-assignments / .bcvl-team-schedule-print rules); a printed/PDF page is plenty wide for that already, and nowrap here would fight normal page-width text flow for no reason. */ .bcvl-print-sheet .bcvl-referee-assignments th, .bcvl-print-sheet .bcvl-referee-assignments td, .bcvl-print-sheet .bcvl-team-schedule-print th, .bcvl-print-sheet .bcvl-team-schedule-print td { white-space: normal; } } .bcvl-legend { display: flex; gap: 16px; margin-bottom: 16px; font-size: 12.5px; color: #6b7280; flex-wrap: wrap; } .bcvl-legend span { display: flex; align-items: center; gap: 6px; } .bcvl-legend .dot { width: 10px; height: 10px; border-radius: 50%; } .bcvl-roster ul { list-style: none; margin: 0; padding: 0; } .bcvl-roster li { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; border-bottom: 1px solid #e2e6ec; font-size: 16px; } /* Team rows (Teams page only — the Referees list above still uses the plain flex .bcvl-roster li rule). Every row uses the SAME fixed-width grid-template-columns for its view mode, which is what makes the columns actually line up top to bottom — team name flexes/ellipsizes, everything else sits in a fixed-width column so it lands in the same horizontal spot on every row regardless of how long any given team or captain name is. Three modes: public (no class) 3 cols — Team, Captain, Players committee (.is-admin) 6 cols — + Phone, E-mail, trailing Remove button captain (.is-captain) 5 cols — + Phone, E-mail (read-only, no Remove) */ .bcvl-roster li.bcvl-team-row { display: grid; grid-template-columns: minmax(120px, 1.4fr) minmax(70px, 1fr) minmax(50px, 0.6fr); column-gap: 14px; align-items: center; } .bcvl-team-list.is-admin li.bcvl-team-row { grid-template-columns: minmax(120px, 1.3fr) minmax(70px, 1fr) minmax(60px, 0.9fr) minmax(90px, 1.3fr) minmax(50px, 0.6fr) minmax(40px, 0.5fr); } /* "Show Division Requested" toggle (v3.7.0) — an optional 7th column, only present in the grid at all when the toggle is on (the JS leaves the .show-div-requested class and the cell markup out entirely when it's off, rather than just hiding it with CSS, so the column doesn't sit there taking up width nobody asked to see). 3-class selector here outweighs the plain .is-admin rule above regardless of source order. */ .bcvl-team-list.is-admin.show-div-requested li.bcvl-team-row { grid-template-columns: minmax(120px, 1.2fr) minmax(70px, 1fr) minmax(60px, 0.9fr) minmax(90px, 1.3fr) minmax(90px, 1.1fr) minmax(50px, 0.6fr) minmax(40px, 0.5fr); } .bcvl-team-list.is-captain li.bcvl-team-row { grid-template-columns: minmax(120px, 1.3fr) minmax(70px, 1fr) minmax(60px, 0.9fr) minmax(90px, 1.3fr) minmax(50px, 0.6fr); } /* The 6-column committee view and 5-column captain view don't fit comfortably on a phone screen no matter how tight the columns get — past a point, squeezing the team-name column to make room just breaks readability. Rather than that, each list gets a minimum total width and the roster card scrolls horizontally (overflow-x on .bcvl-roster, overridden further down from the base .bcvl-card's `overflow: hidden`) once the viewport is narrower than that, same trade a real HTML table would make. */ .bcvl-roster { overflow-x: auto; } .bcvl-team-list { min-width: 420px; } .bcvl-team-list.is-admin { min-width: 720px; } .bcvl-team-list.is-admin.show-div-requested { min-width: 860px; } .bcvl-team-list.is-captain { min-width: 660px; } .bcvl-team-row--head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #8a8f98; padding-top: 10px; padding-bottom: 8px; border-bottom: 2px solid #d7dde6; } .bcvl-team-row .cell-captain, .bcvl-team-row .cell-phone, .bcvl-team-row .cell-email, .bcvl-team-row .cell-div-requested { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* "Division Requested" is a longer header label than this column is wide (it's an occasional/optional column, not worth giving more permanent width to) — let just the header text wrap onto two lines instead of ellipsis-truncating into "DIVISION REQUES…", which nobody could read. */ .bcvl-team-row--head .cell-div-requested { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; } .bcvl-team-row .cell-count { text-align: right; } .bcvl-team-row .cell-remove { text-align: right; } .bcvl-team-row .cell-email a { color: var(--brand-accent, #3e62a8); text-decoration: none; } .bcvl-team-row .cell-email a:hover { text-decoration: underline; } /* Data rows: smaller than the 16px base so five-plus columns of Team/ Captain/Phone/E-mail/Players breathe instead of crowding each other, now that columns share width more evenly (see grid-template-columns above) instead of team-name absorbing all the leftover space. Also fixes descenders (g/y/p/q/j) getting visually clipped: the site theme's global `span { line-height: 1; }` reset (assets/theme/css/style.css) left no room below the baseline once combined with overflow:hidden on these cells — 1.35 restores normal spacing without inflating row height much. */ .bcvl-roster li.bcvl-team-row { font-size: 13.5px; } .bcvl-team-row .team-name, .bcvl-team-row .cell-captain, .bcvl-team-row .cell-phone, .bcvl-team-row .cell-email, .bcvl-team-row .cell-count, .bcvl-team-row .cell-games-played, .bcvl-team-row .cell-eligible { line-height: 1.35; } /* Preferred-name display (Drew: "Drew Baldock (Andrew Baldock)") — the primary name (preferred first + legal last, or the plain legal name when no preferred name is on file) stays the default text color/weight of whatever cell it's in; only the legal-name parenthetical gets this secondary treatment so it reads as supplementary, not the headline. Used by renderPlayerNameHtml() in league-teams-render.js, wherever a roster player's name is shown (Your Roster, Team Rosters, Attendance). */ .bcvl-legal-name { font-style: italic; color: #8a8f98; font-weight: 400; } .bcvl-add-team-form { display: flex; gap: 8px; padding: 12px 16px; } .bcvl-add-team-form input { flex: 1; padding: 7px 10px; border: 1px solid #d7dde6; border-radius: 6px; font-size: 13px; } /* "Cancel" a pending player removal (Attendance tab) — deliberately NOT styled like the red "X" remove icon buttons (.bcvl-icon-btn-danger) used everywhere else; this undoes a destructive action rather than triggering one, so it stays neutral, not alarming. */ .bcvl-cancel-removal { color: #3e62a8; cursor: pointer; font-size: 12px; background: none; border: 1px solid #c7d2e3; border-radius: 4px; padding: 2px 8px; } .bcvl-cancel-removal:hover { background: #eef2f9; } /* Pending-removal state (Attendance tab row + Team Rosters note) — dimmed and clearly labeled, but not hidden, so a committee member can see and, if needed, cancel a queued removal before the next sync makes it permanent. See roster_players.removal_requested_at's own schema comment for the full flow. */ .bcvl-row-pending-removal { opacity: 0.6; } .bcvl-removal-pending { color: #a13a3a; font-style: italic; font-weight: 600; font-size: 11.5px; } /* Referee rows (committee-only management tab) — Name / Phone / E-mail / Monday Availability (dropdown) / Tuesday Availability (dropdown) / Remove. Each night has its OWN Full Time/Part Time/Occasional/None dropdown — a referee can be available differently night to night, so this is deliberately two independent selects rather than one shared availability value plus day checkboxes (the original design). Contact info and availability are never sent to a non-committee viewer (see api/teams.php) — this whole tab only ever renders for a committee session in the first place, so there's no separate public/captain layout to worry about, unlike the Teams list above. */ .bcvl-roster li.bcvl-referee-row { display: grid; grid-template-columns: minmax(110px, 1.2fr) minmax(90px, 1fr) minmax(130px, 1.3fr) minmax(104px, 1fr) minmax(104px, 1fr) minmax(50px, 0.5fr); column-gap: 14px; align-items: center; font-size: 13.5px; } .bcvl-referee-row .ref-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The logged-in-referee view's "Referees" table (league-referees-render.js's renderRefereesLoggedIn) links each e-mail as mailto: — same treatment as the Captains page's .cell-email a above, and for the same reason: without an explicit color this was inheriting page/theme link styling that renders white-on-white here and is effectively invisible (reported by Drew, v3.6.0 fix). The committee-only editable Referees tab doesn't need this rule — that one's an , not a link. */ .bcvl-referee-row .ref-email a { color: var(--brand-accent, #3e62a8); text-decoration: none; } .bcvl-referee-row .ref-email a:hover { text-decoration: underline; } .bcvl-referee-row input.referee-phone-input, .bcvl-referee-row input.referee-email-input { font-size: 12px; padding: 4px 8px; border: 1px solid #d7dde6; border-radius: 5px; width: 100%; box-sizing: border-box; } .bcvl-referee-row select.referee-availability-input { font-size: 12px; padding: 4px 6px; border: 1px solid #d7dde6; border-radius: 5px; width: 100%; box-sizing: border-box; } .bcvl-referee-row .cell-remove { text-align: right; } .bcvl-referee-row--head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #8a8f98; padding: 10px 16px 8px; border-bottom: 2px solid #d7dde6; } .bcvl-roster .bcvl-referee-list { min-width: 660px; } /* Committee "Accounts" management lists — Committee Accounts (Settings page), Captain Logins and Referee Logins (Teams page, committee tabs): one row per account, name/badge on the left, Reset Password / Remove buttons on the right. Shared class so all three lists get the same mobile stacking below instead of each needing its own fix. */ .bcvl-account-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid #e2e6ec; font-size: 13.5px; } .bcvl-account-row .bcvl-account-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } /* Home-page "Buttons" admin rows (Hero Buttons, and the per-page Action Buttons list) — a style chip, the button's label/target, and a row of 4 small reorder/Edit/Remove controls, all in one line with nothing to contain it on mobile. */ .bcvl-hero-btn-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #e2e6ec; flex-wrap: wrap; } .bcvl-hero-btn-label { flex: 1 1 160px; font-size: 13.5px; min-width: 160px; } .bcvl-hero-btn-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } /* Contact page e-mail editor — before-@ / after-@ fields side by side with an "@" separator between them. */ .bcvl-contact-email-row { display: flex; gap: 8px; align-items: center; } .bcvl-add-division-card { background: #fff; border: 1px solid #e2e6ec; border-radius: 10px; padding: 16px; margin-bottom: 22px; text-align: left; } .bcvl-add-division-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .bcvl-add-division-form input[type=text] { padding: 7px 10px; border: 1px solid #d7dde6; border-radius: 6px; font-size: 13px; width: 170px; } .bcvl-add-division-form select { padding: 7px 10px; border: 1px solid #d7dde6; border-radius: 6px; font-size: 13px; } .bcvl-add-division-form input[type=color] { width: 40px; height: 34px; border: 1px solid #d7dde6; border-radius: 6px; padding: 2px; } .bcvl-add-division-form input[type=date] { padding: 7px 10px; border: 1px solid #d7dde6; border-radius: 6px; font-size: 13px; } .bcvl-mock-banner { background: #fff7e6; border: 1px solid #f0d9a6; color: #8a6416; font-size: 12px; padding: 8px 14px; border-radius: 6px; margin-bottom: 18px; } /* Page status toggle (pending/active) */ .bcvl-status-toggle { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #6b7280; margin-bottom: 16px; } .bcvl-status-btn { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 14px; border: 1px solid #d7dde6; background: #fff; color: #6b7280; cursor: pointer; } .bcvl-status-btn.active { background: var(--brand-accent, #3e62a8); color: #fff; border-color: var(--brand-accent, #3e62a8); } .bcvl-pending-notice { background: #eef2fa; border: 1px solid #d7e0f0; border-radius: 10px; padding: 26px 20px; text-align: center; color: var(--brand-accent, #3e62a8); font-size: 14.5px; } .bcvl-pending-notice strong { display: block; font-family: 'Jost', sans-serif; font-size: 17px; margin-bottom: 8px; } /* Rules */ .bcvl-rule-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 16px; border-bottom: 1px solid #e2e6ec; } .bcvl-rule-item:last-child { border-bottom: none; } .bcvl-rule-tag { font-weight: 700; font-size: 11.5px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; margin-top: 2px; } .bcvl-rule-number { font-weight: 700; color: var(--brand-accent, #3e62a8); font-family: 'Jost', sans-serif; min-width: 26px; text-align: right; margin-top: 1px; } .bcvl-rule-tag.NEW { color: #c0392b; background: #fbe6e4; } .bcvl-rule-tag.UPDATED { color: #1e232b; background: #eef0f3; } .bcvl-rule-text { flex: 1; font-size: 16px; line-height: 1.6; white-space: pre-line; } .bcvl-rule-controls { display: flex; flex-direction: column; gap: 2px; } .bcvl-rule-controls button { background: none; border: 1px solid #d7dde6; border-radius: 4px; width: 22px; height: 22px; font-size: 11px; cursor: pointer; color: #6b7280; line-height: 1; } .bcvl-rule-controls button:hover { background: #f2f4f8; } .bcvl-add-rule-form { padding: 14px 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; border-top: 1px solid #e2e6ec; } .bcvl-add-rule-form textarea { flex: 1; min-width: 220px; padding: 8px 10px; border: 1px solid #d7dde6; border-radius: 6px; font-size: 13px; font-family: inherit; resize: vertical; min-height: 40px; } .bcvl-add-rule-form select { padding: 8px 10px; border: 1px solid #d7dde6; border-radius: 6px; font-size: 13px; } /* Guidelines & Responsibilities lists (Captains/Referees pages) reuse the .bcvl-rule-* structure above but render as plain bullets, not numbered or unmarked, via this modifier on .bcvl-rule-text. */ .bcvl-rule-text.bcvl-guideline-text::before { content: "\2022"; color: var(--brand-accent, #3e62a8); font-weight: 700; margin-right: 10px; } .bcvl-rules-meta { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; font-size: 12.5px; color: #6b7280; } .bcvl-rules-meta input[type=text] { padding: 6px 10px; border: 1px solid #d7dde6; border-radius: 6px; font-size: 13px; } /* Teams / captain (logged-in editable fields — each fills its grid cell, which is what actually sizes the column; see .bcvl-team-row above) */ .bcvl-roster li input.captain-input, .bcvl-roster li input.captain-phone-input, .bcvl-roster li input.captain-email-input, .bcvl-roster li input.div-requested-input, .bcvl-roster li input.team-name-input { font-size: 12px; padding: 4px 8px; border: 1px solid #d7dde6; border-radius: 5px; width: 100%; box-sizing: border-box; } /* Team-name rename field specifically (committee-only — see the change listener in league-teams-render.js) — bolded like the plain-text team name it replaces in this cell, and a touch larger since it's the row's primary label, not a secondary contact field like the captain inputs above. */ .bcvl-roster li input.team-name-input { font-size: 13px; font-weight: 600; } /* Team Captain login (public view) — collapsed toggle button, or the expanded login form once clicked. Deliberately scoped to this page only: unlike the committee login, there's no site-wide nav link for this. */ .bcvl-captain-login-toggle { display: block; width: 100%; text-align: left; margin-bottom: 18px; background: #eef2fa; border: 1px solid #d7e0f0; border-radius: 8px; padding: 12px 16px; font-size: 13.5px; color: var(--brand-accent, #3e62a8); cursor: pointer; font-family: inherit; } .bcvl-captain-login-toggle:hover { background: #e3eaf7; } .bcvl-captain-login-form { background: #fff; border: 1px solid #e2e6ec; border-radius: 10px; padding: 16px; margin-bottom: 18px; max-width: 360px; } .bcvl-captain-login-form strong { display: block; font-family: 'Jost', sans-serif; font-size: 14.5px; margin-bottom: 6px; } .bcvl-captain-login-form p { font-size: 12.5px; color: #6b7280; margin: 0 0 12px; line-height: 1.5; } .bcvl-captain-login-form input { display: block; width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #d7dde6; border-radius: 6px; font-size: 13.5px; margin-bottom: 10px; } .bcvl-captain-login-error { color: #c0392b; font-size: 12.5px; margin-bottom: 10px; } .bcvl-roster li .team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Roster count ("X of Y") — public, from the Jotform waiver-count sync. inline-block so text-align:right on the parent .cell-count actually right-aligns the whole pill rather than just the text inside it. */ .bcvl-roster li .roster-count { display: inline-block; font-size: 12px; color: #6b7280; font-weight: 600; background: #eef2fa; border-radius: 10px; padding: 2px 8px; white-space: nowrap; } .bcvl-roster li .roster-count.full { color: #a13a3a; background: #fbeaea; } /* "Your Roster" (captain view only) — a separate 3-column grid mode from the Team/Captain/Phone/E-mail/Players table below it, reusing the same .bcvl-team-row grid-row mechanics (see the big comment above) so header and data rows line up the same way, just with its own column set: Name, Games Played, Tournament Eligible. */ .bcvl-your-roster { margin-bottom: 22px; } .bcvl-team-list.is-your-roster li.bcvl-team-row { grid-template-columns: minmax(120px, 1.3fr) minmax(90px, 1fr) minmax(90px, 1fr); } .bcvl-team-list.is-your-roster { min-width: 460px; } .bcvl-team-row .cell-games-played { text-align: right; } .bcvl-team-row .cell-eligible { text-align: center; } .eligible-yes { color: #1e8a4c; font-weight: 700; } .eligible-no { color: #a13a3a; font-weight: 700; } .eligible-unknown { color: #8a8f98; } /* Committee-only "Team Rosters" (renderTeamRosterRow() in league-teams-render.js) — same Name/Games/Eligible columns as "Your Roster" above, plus two narrow icon-only action columns: Move (opens a native team-picker dropdown) and Remove (a confirm-then-queue X). Both used to live inline on the Attendance tab; moved here this round since that grid was overflowing with columns. */ .bcvl-team-list.is-committee-roster li.bcvl-team-row { grid-template-columns: minmax(120px, 1.3fr) minmax(90px, 1fr) minmax(90px, 1fr) minmax(40px, 0.5fr) minmax(40px, 0.5fr); } .bcvl-team-list.is-committee-roster { min-width: 560px; } .bcvl-team-row .cell-move-team, .bcvl-team-row .cell-remove-player { text-align: center; } .bcvl-team-row--head .cell-move-team, .bcvl-team-row--head .cell-remove-player { font-size: 10.5px; } /* Icon-only action controls (Move/Remove) — 28px tap targets, generous enough for touch even though the visible icon is smaller. */ .bcvl-icon-select-wrap, .bcvl-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; vertical-align: middle; } .bcvl-icon-select-wrap:hover, .bcvl-icon-btn:hover { background: #eef2f9; } /* The