/* =========================================
FONT: Geist + Geist Mono — pdlstack design system
========================================= */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');
/* =========================================
VARIABLES & GLOBAL DESIGN TOKENS (V2)
========================================= */
:root {
/* Backgrounds */
--bg-base: #0a0b0d;
--bg-surface: #141518;
--bg-surface-elevated: #141518;
--bg-surface-hover: #22252a;
/* Borders */
--border-subtle: #343941;
--border-focus: #c4f02e;
--border-strong: #343941;
/* Accent (lime/chartreuse) */
--accent: #c4f02e;
--accent-hover: #d0ff3a;
--accent-glow: rgba(196,240,46,0.10);
--accent-soft: rgba(196,240,46,0.10);
--accent-ghost: rgba(196,240,46,0.05);
--accent-border: rgba(196,240,46,0.22);
--accent-btn-txt: #0c1006;
/* Status */
--live: #4ade80;
--live-bg: rgba(74,222,128,0.12);
--live-border:rgba(74,222,128,0.30);
--warn: #fbbf24;
--status-live-bg: #1f5a36;
--status-live-text: #86efac;
--status-draft-bg: #5a4314;
--status-ended-bg: #22252a;
--danger: #f87171;
--danger-bg: rgba(248,113,113,0.10);
/* Text */
--text-main: #e8ebef;
--text-soft: #9ba3af;
--text-dim: #9ba3af;
--text-faint: #646c79;
--text-dim2: #646c79;
/* Misc surface tokens */
--chip-bg: rgba(255,255,255,0.04);
--surface-faint:rgba(255,255,255,0.02);
--toggle-off: rgba(255,255,255,0.12);
--surface-3: #1d2024;
/* Category Play tones. The top bar uses the opaque base color; court
borders keep their existing translucent treatment below. */
--category-play-tone-1: rgb(96 132 172);
--category-play-tone-2: rgb(104 148 118);
--category-play-muted-tone-1: rgb(53 70 90);
--category-play-muted-tone-2: rgb(57 77 65);
--category-play-section-tone-1: rgb(32 46 62);
--category-play-section-tone-2: rgb(35 49 39);
--category-play-court-tone-1: rgba(53, 70, 90, 0.72);
--category-play-court-tone-2: rgba(57, 77, 65, 0.72);
/* Typography — Geist (pdlstack design system) */
--font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-display: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-mono: 'Geist Mono', ui-monospace, monospace;
/* Radius */
--radius-lg: 8px;
--radius-md: 6px;
--radius-sm: 4px;
--radius: 6px;
--radius-xl: 8px;
/* ── New design-system token aliases (map new names → existing values) ── */
--bg: var(--bg-base);
--surface-1: var(--bg-surface);
--surface-2: var(--bg-surface-elevated);
--surface-hover:var(--bg-surface-hover);
--border: var(--border-subtle);
--text-1: var(--text-main);
--text-2: var(--text-dim);
--text-3: var(--text-faint);
--text-4: var(--text-dim2);
--accent-fg: #0c1006;
--accent-faint: rgba(196, 240, 46, 0.05);
--accent-ring: var(--accent-border);
--success: var(--live);
--success-soft: var(--live-bg);
--warning: var(--warn);
/* Button tokens — solid dark-theme colors only. */
--button-height: 40px;
--button-radius: 999px;
--button-padding-x: 20px;
--button-primary-bg: #c4f02e;
--button-primary-text: #0c1006;
--button-primary-hover: #d0ff3a;
--button-primary-pressed: #a9d522;
--button-secondary-bg: #141518;
--button-secondary-text: #e8ebef;
--button-secondary-border: #343941;
--button-secondary-hover: #22252a;
--button-secondary-pressed: #343941;
--button-blue-bg: #006cff;
--button-blue-text: #ffffff;
--button-blue-hover: #0057d8;
--button-blue-pressed: #0046ad;
--button-danger-bg: #ff3b30;
--button-danger-text: #ffffff;
--button-danger-hover: #ef4444;
--button-danger-pressed: #c92f29;
--button-success-bg: #4ade80;
--button-success-text: #0c1006;
--button-success-hover: #34d399;
--button-success-pressed: #22c55e;
--button-warning-bg: #fbbf24;
--button-warning-text: #000000;
--button-warning-hover: #f59e0b;
--button-warning-pressed: #d97706;
--button-disabled-bg: #141518;
--button-disabled-text: #646c79;
--button-disabled-border: #343941;
--button-focus-color: #c4f02e;
/* Shadows */
--shadow-card: 0 6px 24px rgba(197,245,0,0.10);
--shadow-frame:0 30px 80px rgba(0,0,0,0.25);
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--mobile-bottom-nav-height: 60px;
--vv-top: 0px;
--vvh: 100dvh;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Remove all browser focus rings and tap highlights from interactive elements */
button, a, [role="button"] {
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
appearance: none;
}
button:focus, button:focus-visible, button:focus-within,
a:focus, a:focus-visible,
[role="button"]:focus, [role="button"]:focus-visible {
outline: none !important;
box-shadow: none !important;
}
body {
font-family: var(--font-family);
background-color: var(--bg-base);
color: var(--text-main);
display: flex;
flex-direction: column;
width: 100vw;
height: 100dvh;
overflow: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: 'cv11', 'ss01', 'ss03';
font-synthesis: none; /* Prevent OS from faking bold/italic with system fonts */
font-optical-sizing: auto;
letter-spacing: -0.005em;
margin: 0;
padding: 0;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; color: var(--text-main); }
/* Mono utility — times, scores, DUPR IDs */
.mono, .font-mono { font-family: var(--font-mono) !important; font-feature-settings: 'tnum'; }
/* Display utility — hero headings */
.display { font-family: var(--font-display) !important; letter-spacing: -0.025em; }
.text-accent { color: var(--accent) !important; }
.accent-discipline .text-accent { color: var(--text-main) !important; }
.text-danger { color: var(--danger) !important; }
.text-dim { color: var(--text-dim) !important; }
.text-center { text-align: center; }
.font-normal { font-weight: 400; }
.hidden { display: none !important; }
.desktop-only { display: block; }
.mobile-only { display: none; }
.mobile-header { display: none; }
.flex-row { display: flex; }
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.gap-10 { gap: 10px; }
.gap-15 { gap: 15px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-25 { margin-bottom: 25px; }
.p-20 { padding: 20px; }
.align-center { align-items: center; }
.space-between { display: flex; justify-content: space-between; align-items: center; }
.no-padding { padding: 0 !important; }
.divider { border: 0; border-top: 1px solid var(--border-subtle); margin: 25px 0; }
* {
scrollbar-width: thin; /* Firefox */
scrollbar-color: rgba(255,255,255,0.2) transparent; /* Firefox */
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.2); /* Semi-transparent like Mac */
border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }
/* AMBIENT BACKGROUND */
.ambient-background { position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; z-index: -1; overflow: hidden; background: #000; }
.blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; animation: float 20s infinite ease-in-out alternate; }
.blob-1 { width: 50vw; height: 50vw; background: rgba(197,245,0,0.04); top: -10%; left: -10%; }
.blob-2 { width: 40vw; height: 40vw; background: rgba(0, 229, 255, 0.05); bottom: -10%; right: -5%; animation-delay: -5s; }
.blob-3 { width: 30vw; height: 30vw; background: rgba(106, 0, 255, 0.05); top: 40%; left: 40%; animation-delay: -10s; }
@keyframes float { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(50px, 50px) scale(1.1); } }
/* Gender Styling */
.gender-txt { font-weight: 800; font-size: 11px; margin-right: 4px; }
.gender-M { color: #5ac8fa; }
.gender-F { color: #ff2d55; }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 10px 18px;
border: 1px solid transparent;
border-radius: var(--radius-md);
font-size: 15px;
font-weight: 600;
font-family: var(--font-family);
cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
letter-spacing: -0.02em;
line-height: 1;
min-height: 36px;
white-space: nowrap;
flex-shrink: 0;
outline: none !important;
box-shadow: none !important;
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
appearance: none;
}
.btn:focus, .btn:focus-visible, .btn:focus-within { outline: none !important; box-shadow: none !important; }
.btn:active { transform: scale(0.96); outline: none !important; box-shadow: none !important; }
/* Start Game buttons drive their press state from a JS-toggled class instead
of native :active — see _startGamePressStart's comment in queue-game.ts
for why (native :active doesn't survive the DOM swap when a long-press
enters pick mode mid-hold). */
.sg-picker-trigger:active { transform: none; }
.sg-picker-trigger.sg-press-active { transform: scale(0.96); }
/* "Select a Matchup" state — swaps the button off the usual lime accent so
it visually reads as a distinct mode, not just another Start Game press. */
.sg-picker-trigger.sg-pick-mode-btn {
background: #3b82f6 !important;
border-color: #3b82f6 !important;
color: #fff !important;
}
.sg-picker-trigger.sg-pick-mode-btn:hover { background: #2f6fe0 !important; }
.sg-picker-trigger.sg-pick-mode-btn img { filter: brightness(0) invert(1) !important; }
.modal-input {
width: 100%; background: var(--bg-base); border: 1px solid var(--border-subtle);
color: var(--text-main); padding: 10px 14px;
border-radius: var(--radius-md);
font-size: 15px; font-family: var(--font-family); transition: border-color 0.15s, box-shadow 0.15s; appearance: none;
}
/* Keep the native clock affordance on time fields. The shared modal input
reset removes it otherwise, even though the field remains a time picker. */
input[type="time"].modal-input {
appearance: auto;
-webkit-appearance: auto;
}
/* Native /[type="date"] internals (the digit segments,
AM/PM, calendar-picker icon) are rendered by the browser's own shadow DOM
and don't reliably inherit `color` from .modal-input — without this they
can render near-black text on our dark background, reading as "empty"
even though a value (like the auto-filled current time) is actually set. */
input[type="time"], input[type="date"] {
color-scheme: dark;
}
.modal-input:focus {
outline: none;
border-color: var(--border-focus);
box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}
.modal-input::placeholder { color: var(--text-faint); }
/* Custom calendar popup for the setup wizard's Date field — replaces the
native so it matches the app's dark theme instead of
the OS picker. */
.date-popup-trigger {
display: flex;
align-items: center;
text-align: left;
cursor: pointer;
color: var(--text-main);
}
.date-popup-trigger:hover { border-color: var(--border-focus); }
.date-popup {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 100;
width: 260px;
background: var(--bg-surface-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
box-shadow: 0 10px 25px rgba(0,0,0,0.5);
padding: 12px;
}
.date-popup-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.date-popup-header-label { font-size: 13px; font-weight: 700; color: var(--text-main); }
.date-popup-nav-btn {
width: 26px; height: 26px;
display: grid; place-items: center;
border-radius: 6px;
color: var(--text-dim);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.date-popup-nav-btn:hover { background: var(--bg-surface-hover); color: var(--text-main); }
.date-popup-weekdays, .date-popup-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.date-popup-weekday {
text-align: center;
font-size: 10px;
font-weight: 700;
color: var(--text-faint);
padding: 4px 0 6px;
text-transform: uppercase;
}
.date-popup-day {
aspect-ratio: 1;
display: grid;
place-items: center;
font-size: 13px;
color: var(--text-main);
border-radius: 6px;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.date-popup-day:hover { background: var(--bg-surface-hover); }
.date-popup-day.outside-month { color: var(--text-faint); opacity: 0.4; }
.date-popup-day.is-today { color: var(--accent); font-weight: 700; }
.date-popup-day.is-selected { background: var(--accent); color: #0c1006; font-weight: 700; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield; /* Firefox */
appearance: textfield;
}
.btn-block { width: 100%; }
.btn-lg { padding: 14px 22px; font-size: 15px; font-weight: 600; border-radius: var(--radius-lg); }
.btn.btn-primary { border-radius: 999px !important; }
.btn-primary { background: var(--button-primary-bg); color: var(--button-primary-text); font-weight: 600; border-color: var(--button-primary-bg); box-shadow: none; }
.btn-primary:hover { background: var(--button-primary-hover); border-color: var(--button-primary-hover); box-shadow: none; }
/* Record Match's Save button only — kept off the app-wide lime accent since
green there reads as a "win" indicator on a modal that also shows scores. */
#btn-save-tm.btn-primary { background: #3b82f6; color: #fff; }
#btn-save-tm.btn-primary:hover { background: #2f6fd1; }
/* Archive creation triggers — dark/white theme instead of the app-wide lime
accent so the event/session/tournament archive headers read consistently. */
#btn-create-event-dropdown.btn-primary,
#btn-new-session-archive.btn-primary,
#btn-new-tourney-archive.btn-primary,
#btn-db-add-player.btn-primary {
background: var(--bg-surface-elevated);
color: var(--text-main);
border: 1px solid var(--button-secondary-border);
}
#btn-create-event-dropdown.btn-primary:hover,
#btn-new-session-archive.btn-primary:hover,
#btn-new-tourney-archive.btn-primary:hover,
#btn-db-add-player.btn-primary:hover {
background: var(--bg-surface-hover);
border-color: var(--button-secondary-border);
}
/* Home's Create Event action is the primary light action: white surface,
borderless, with black text and icon for maximum contrast. */
#btn-create-event-dropdown.btn-primary {
background: #fff;
color: #000;
border: none;
}
#btn-create-event-dropdown.btn-primary:hover {
background: #ededed;
border: none;
}
#btn-create-event-dropdown.btn-primary img,
#btn-new-session-archive.btn-primary img,
#btn-new-tourney-archive.btn-primary img,
#btn-db-add-player.btn-primary img { filter: invert(1) !important; }
#btn-create-event-dropdown.btn-primary img { filter: brightness(0) !important; }
#btn-create-event-dropdown.btn-primary .ico,
#btn-new-session-archive.btn-primary .ico,
#btn-new-tourney-archive.btn-primary .ico,
#btn-db-add-player.btn-primary .ico { color: var(--text-main); }
#btn-create-event-dropdown.btn-primary .ico { color: #000; }
/* Forfeit buttons show the real (sometimes long, two-player) team name —
.flex-1 alone doesn't shrink below content size, so long names pushed
these past the modal's edge instead of truncating. */
#tm-forfeit-p1, #tm-forfeit-p2 { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; }
.btn-secondary { background: var(--button-secondary-bg); color: var(--button-secondary-text); border-color: var(--button-secondary-border); }
.btn-secondary:hover { background: var(--button-secondary-hover); border-color: var(--button-secondary-border); }
.btn-graphite {
background: var(--button-secondary-hover);
color: var(--text-main);
border-color: var(--button-secondary-border);
border-radius: 999px !important;
}
.btn-graphite:hover {
background: var(--button-secondary-bg);
border-color: var(--button-secondary-border);
}
.btn-ghost { background: var(--button-secondary-bg); color: var(--text-main); border-color: var(--button-secondary-bg); }
.btn-ghost:hover { background: var(--button-secondary-hover); border-color: var(--button-secondary-hover); }
/* Truly bare icon button — no background, no border, just the icon (e.g. the
past-sessions sort toggle) — unlike .btn-ghost/.btn-secondary which both
still paint a visible box. */
.icon-btn-plain {
background: none;
border: none;
width: 40px;
height: 40px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: var(--radius-sm);
transition: background-color 0.15s ease, color 0.15s ease;
}
.icon-btn-plain:hover { background: var(--bg-surface-hover); }
.icon-btn-plain:active { background: var(--bg-surface-elevated); }
.icon-btn-plain:focus-visible {
outline: 2px solid var(--accent-border);
outline-offset: 2px;
}
.sort-menu-trigger {
width: 40px;
min-width: 40px;
height: 40px;
padding: 0;
justify-content: center;
border-radius: var(--radius-sm);
}
.sort-menu-dropdown .dropdown-item {
display: flex;
align-items: center;
padding: 10px 16px;
color: var(--text-main);
cursor: pointer;
transition: background 0.15s ease;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
}
.sort-menu-dropdown .dropdown-item.active { color: var(--accent); font-weight: 700; }
.sort-menu-dropdown,
.scheduled-session-menu,
.category-assign-menu,
.tny-cat-pill-menu,
#create-event-dropdown-menu,
#new-session-archive-dropdown-menu,
#setup-fee-mode-menu,
#setup-cat1-fee-mode-menu,
#setup-cat2-fee-mode-menu,
#finance-fee-mode-menu,
#tm-forfeit-menu {
background: var(--bg-surface-elevated, #101114) !important;
border-color: var(--border-subtle, #2a2d31) !important;
}
#dash-manage-queue-btn, #dash-rotation-toggle { background: transparent; border-color: transparent; }
#dash-manage-queue-btn:hover, #dash-rotation-toggle:hover {
background: var(--bg-surface-hover);
border-color: transparent;
}
/* Chevron-only accordion toggles: no square button chrome, just the icon */
.chevron-btn, .chevron-btn:hover { background: transparent; border-color: transparent; box-shadow: none; }
.btn-danger { background: var(--button-danger-bg); color: var(--button-danger-text); border-color: var(--button-danger-bg); }
.btn-danger:hover { background: var(--button-danger-hover); color: var(--button-danger-text); border-color: var(--button-danger-hover); }
.btn-undo { background: var(--button-warning-bg); color: var(--button-warning-text); border-color: var(--button-warning-bg); }
.btn-undo:hover { background: var(--button-warning-hover); color: var(--button-warning-text); border-color: var(--button-warning-hover); }
/* Now lives in the top action bar — sized like its siblings (Add Player, Undo, etc.)
instead of the wide standalone width it had in its old spot. */
#top-action-buttons .podium-toggle-btn { min-width: unset; }
#top-prompter-btn,
#top-category-prompter-btn,
#top-kiosk-btn {
min-height: 34px;
padding: 7px 14px;
border-radius: 999px;
border: none;
background: transparent;
color: var(--text-main);
gap: 8px;
box-shadow: none;
}
#top-prompter-btn:hover,
#top-category-prompter-btn:hover,
#top-kiosk-btn:hover {
border: none;
background: var(--bg-surface-hover);
color: var(--text-main);
}
#top-prompter-btn img,
#top-category-prompter-btn img,
#top-kiosk-btn img {
filter: invert(1);
}
#top-prompter-btn .btn-label,
#top-category-prompter-btn .btn-label,
#top-kiosk-btn .btn-label {
font-size: 13px;
font-weight: 700;
}
/* Session LB toggle: consistent "Show Podium / Back to Leaderboard" control */
.podium-toggle-btn {
min-width: 215px;
justify-content: center;
gap: 8px;
padding: 10px 14px;
border-radius: 8px;
border: 1px solid var(--border-focus);
background: var(--bg-surface);
color: var(--text-main);
font-weight: 600;
}
.podium-toggle-btn:hover {
background: var(--bg-surface-elevated);
}
.podium-toggle-btn.is-podium {
background: var(--bg-surface);
color: var(--text-main);
border-color: var(--border-focus);
}
.podium-toggle-btn.is-podium:hover {
background: var(--bg-surface-elevated);
}
.podium-toggle-btn .ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
}
/* Session Leaderboard sits directly against its results panel. Keep this
scoped so the shared .toolbar spacing remains unchanged elsewhere. */
#view-session_lb #session-lb-toolbar {
margin-bottom: 0;
}
.btn-tiny { background: var(--surface-faint); color: var(--text-main); border: 1px solid var(--border-subtle); padding: 5px 10px; border-radius: var(--radius-sm); font-size: 11px; cursor: pointer; font-weight: 600; transition: background 0.15s, border-color 0.15s, transform 0.1s; line-height: 1; min-height: 28px; white-space: nowrap; flex-shrink: 0; outline: none; box-shadow: none; }
.btn-tiny:hover { background: var(--bg-surface-elevated); border-color: var(--border-focus); }
.btn.btn-outline-live { background: var(--status-live-bg); color: var(--status-live-text); border-color: var(--status-live-bg); }
.btn-outline-live:hover { background: #286e43; border-color: #286e43; }
.btn-tiny:focus { outline: none; box-shadow: none; }
.btn-tiny:active { transform: scale(0.94); }
.btn-icon { background: transparent; color: var(--text-main); border: none; border-radius: var(--radius-sm); width: 32px; height: 32px; min-width: 32px; min-height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: 600; flex-shrink: 0; outline: none; box-shadow: none; transition: background 0.15s, transform 0.1s; }
.btn-icon:hover { background: var(--bg-surface-hover); }
.btn-icon:focus { outline: none; box-shadow: none; }
.btn-icon:active { transform: scale(0.9); }
.modal-close { background: none !important; border: none !important; color: var(--text-dim); width: 36px; height: 36px; min-width: 36px; min-height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; font-weight: 300; line-height: 1; border-radius: 50%; outline: none; box-shadow: none; transition: color 0.15s, background 0.15s; flex-shrink: 0; }
.modal-close:hover { color: var(--text-main); background: rgba(255,255,255,0.08) !important; }
.modal-close:active { transform: scale(0.9); }
.ui-icon-img { width: 1em; height: 1em; filter: invert(1); display: inline-block; vertical-align: -0.125em; pointer-events: none; flex: none; }
.btn .ui-icon-img { width: 16px; height: 16px; vertical-align: middle; margin-right: 7px; }
.modal-close .ui-icon-img { width: 18px; height: 18px; margin: 0; opacity: 0.8; }
.modal-hero-icon { width: 56px; height: 56px; margin: 0 auto 15px; display: grid; place-items: center; }
.modal-hero-icon .ui-icon-img { width: 100%; height: 100%; margin: 0; }
/* Prevent layout shifts when toggle/button labels change (OFF -> ON (Active), etc.). */
.btn[id^="btn-toggle-"],
#btn-checkout,
#btn-checkout-paywall,
#btn-verify-payment {
min-width: 120px;
white-space: nowrap;
flex-shrink: 0;
}
.paywall-promo-banner {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
min-height: 58px;
margin: -40px -32px 30px;
padding: 10px 56px 10px 24px;
overflow: hidden;
background-color: #102f5f;
background-image:
linear-gradient(90deg, rgba(8, 15, 28, 0.86) 0%, rgba(16, 47, 95, 0.96) 38%, rgba(21, 87, 165, 0.96) 58%, rgba(8, 15, 28, 0.92) 100%),
linear-gradient(90deg, #07101d 0%, #123f79 48%, #07101d 100%);
border-bottom: 1px solid rgba(125, 196, 255, 0.32);
color: #fff;
font-weight: 800;
}
.paywall-promo-banner::before,
.paywall-promo-banner::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 34%;
opacity: 0.62;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='112' viewBox='0 0 168 112'%3E%3Cg fill='none' stroke='white' stroke-opacity='.18' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M42 8 76 28 42 48 8 28Z'/%3E%3Cpath d='M8 28v40l34 20 34-20V28'/%3E%3Cpath d='M42 48v40'/%3E%3Cpath d='M126-48v40'/%3E%3Cpath d='M92-28 126-8l34-20'/%3E%3Cpath d='M92-28v40l34 20 34-20v-40'/%3E%3Cpath d='M126 64 160 84l-34 20-34-20Z'/%3E%3Cpath d='M92 84v40l34 20 34-20V84'/%3E%3Cpath d='M126 104v40'/%3E%3C/g%3E%3C/svg%3E");
background-size: 84px 56px;
pointer-events: none;
}
.paywall-promo-banner::before {
left: 0;
background-position: left center;
mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 100%);
}
.paywall-promo-banner::after {
right: 0;
background-position: right center;
transform: scaleX(-1);
mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 100%);
}
.paywall-promo-banner span,
.paywall-promo-banner strong {
position: relative;
z-index: 1;
font-size: 12px;
line-height: 1.2;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.paywall-promo-banner span {
color: #d8ecff;
}
.paywall-promo-banner strong {
color: #ffffff;
}
.btn-promo-outline {
border: 1px solid rgba(125, 196, 255, 0.72) !important;
border-radius: 999px !important;
background: rgba(21, 87, 165, 0.16) !important;
color: #ffffff !important;
box-shadow: none !important;
}
.btn-promo-outline:hover {
border-color: rgba(125, 196, 255, 0.95) !important;
background: rgba(21, 87, 165, 0.28) !important;
}
/* Password Toggle styling */
.password-wrapper { position: relative; width: 100%; }
.password-toggle {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--text-dim);
cursor: pointer;
font-size: 18px;
padding: 4px;
transition: color 0.2s ease;
}
.password-toggle:hover { color: var(--text-main); }
/* Force inputs to 16px to prevent iOS Safari auto-zoom */
.input-group label { display: block; font-size: 11px; color: var(--text-dim); margin-bottom: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;}
.modal-input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(255,255,255,0.06); }
.modal-input::placeholder { color: var(--text-faint); }
.select-wrapper { position: relative; }
.select-wrapper::after {
content: '';
width: 11px;
height: 11px;
background-color: var(--text-dim);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
.select-wrapper.field-club-locked select { opacity: 0.4; filter: grayscale(0.4); pointer-events: none; cursor: not-allowed; }
.select-wrapper.field-club-locked { cursor: not-allowed; }
/* Partner linking uses the same bottom-sheet pattern as Manage Tournament's
court constraints, while keeping the real select hidden as the save path's
source of truth. */
.partner-picker-trigger {
display: flex;
align-items: center;
justify-content: space-between;
text-align: left;
cursor: pointer;
padding-right: 42px;
}
.partner-picker-trigger:focus { outline: none; }
.partner-picker-field.field-club-locked .partner-picker-trigger {
opacity: 0.48;
filter: grayscale(0.35);
}
.partner-picker-sheet-panel {
width: min(100vw, 620px);
max-width: none;
max-height: min(78dvh, 640px);
padding: 16px 20px calc(18px + var(--safe-bottom, 0px));
gap: 14px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-bottom: none;
box-shadow: 0 -24px 70px rgba(0,0,0,0.5);
}
.partner-picker-sheet-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.partner-picker-sheet-close {
display: grid;
place-items: center;
width: 38px;
height: 38px;
flex: none;
border: 1px solid var(--border-subtle);
border-radius: 8px;
background: var(--bg-surface-elevated);
color: var(--text-dim);
font-size: 26px;
line-height: 1;
cursor: pointer;
}
.partner-picker-sheet-close:hover { color: var(--text-main); border-color: var(--border-focus); }
.partner-picker-sheet-list {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
.partner-picker-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
width: 100%;
min-height: 56px;
padding: 11px 14px;
border: 1px solid var(--border-subtle);
border-radius: 8px;
background: var(--bg-surface-elevated);
color: var(--text-main);
text-align: left;
cursor: pointer;
transition: transform 120ms ease, border-color 150ms ease, background-color 150ms ease;
}
.partner-picker-row:hover { border-color: var(--border-focus); }
.partner-picker-row:active { transform: scale(0.985); }
.partner-picker-row.is-selected {
border-color: var(--accent);
background: var(--accent-soft);
}
.partner-picker-row-copy { display: flex; flex-direction: column; min-width: 0; }
.partner-picker-row-copy strong { font-size: 15px; font-weight: 700; }
.partner-picker-row-copy small { margin-top: 3px; color: var(--text-dim); font-size: 12px; font-weight: 600; }
.partner-picker-row-check { visibility: hidden; color: var(--accent); font-size: 20px; font-weight: 800; }
.partner-picker-row.is-selected .partner-picker-row-check { visibility: visible; }
.partner-picker-sheet-done {
width: 100%;
min-height: 44px;
border: 1px solid var(--border-subtle);
border-radius: 999px;
color: var(--text-dim);
}
@media (prefers-reduced-motion: reduce) {
.partner-picker-sheet-panel { transition: opacity 160ms ease; transform: none !important; }
.partner-picker-row { transition: border-color 150ms ease, background-color 150ms ease; }
.partner-picker-row:active { transform: none; }
}
/* The shared tournament sheet defaults to a light surface when its local
tournament tokens are absent. Pin this app-level sheet to Graphite after
those shared rules, and keep it a short full-width tray rather than a tall
centered panel. */
#edit-partner-sheet .partner-picker-sheet-panel {
width: 100vw !important;
max-width: none !important;
height: 55dvh;
min-height: 0;
max-height: 55dvh;
padding: 14px 20px calc(14px + var(--safe-bottom, 0px));
gap: 10px;
background: var(--bg-surface) !important;
color: var(--text-main);
border-color: var(--border-subtle);
box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.55);
}
#edit-partner-sheet .partner-picker-sheet-head,
#edit-partner-sheet .partner-picker-sheet-setting,
#edit-partner-sheet .partner-picker-sheet-list {
width: 100%;
max-width: 460px;
margin-left: auto;
margin-right: auto;
}
#edit-partner-sheet .partner-picker-sheet-setting {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
#edit-modal .partner-picker-unlink-setting {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
gap: 12px;
margin-top: 12px;
}
#edit-modal #edit-partner-group {
display: grid;
grid-template-columns: minmax(0, 1fr) max-content;
align-items: start;
column-gap: 12px;
row-gap: 6px;
}
#edit-modal #edit-partner-group > .partner-picker-link-setting {
grid-column: 1;
min-width: 0;
}
#edit-modal .partner-picker-link-setting > label {
display: block;
margin-bottom: 6px;
color: var(--text-dim);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
}
#edit-modal .partner-picker-link-setting > .partner-picker-field {
width: 100%;
}
#edit-modal #edit-partner-group > .partner-picker-unlink-setting {
grid-column: 2;
margin-top: 0;
}
#edit-modal .field-pill-group {
border-radius: var(--radius-md) !important;
}
#edit-modal .field-pill-group .field-pill-btn {
border-radius: var(--radius-sm) !important;
}
#edit-modal .partner-picker-unlink-setting > label {
order: 1;
margin: 0;
color: var(--text-dim);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
}
#edit-modal .partner-picker-unlink-setting .partner-picker-unlink-control {
order: 2;
}
.partner-picker-unlink-control {
display: flex;
align-items: center;
width: max-content;
flex: 0 0 auto;
gap: 12px;
color: var(--text-main);
font-size: 14px;
}
.partner-picker-unlink-btn {
width: 36px;
height: 36px;
flex: none;
}
.partner-picker-unlink-value {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
min-width: 64px;
gap: 6px;
}
.partner-picker-unlink-count {
color: var(--text-main);
font-family: var(--font-mono);
font-size: 14px;
font-weight: 700;
text-align: center;
}
.partner-picker-unlink-unit {
min-width: 0;
}
#edit-partner-sheet .partner-picker-sheet-setting > label {
order: 1;
color: var(--text-main);
font-size: 13px;
font-weight: 800;
}
#edit-partner-sheet .partner-picker-sheet-setting-control {
display: flex;
align-items: center;
gap: 8px;
color: var(--text-dim);
font-size: 12px;
font-weight: 700;
}
#edit-partner-sheet .partner-picker-unlink-control {
order: 2;
}
#edit-partner-sheet .partner-picker-sheet-setting-control .modal-input {
width: 92px;
min-height: 36px;
padding: 7px 10px;
}
#edit-partner-sheet .partner-picker-sheet-setting > small {
color: var(--text-faint);
font-size: 11px;
}
#edit-partner-sheet .partner-picker-search {
display: block;
width: 100%;
max-width: 460px;
margin: 0 auto;
}
#edit-partner-sheet .partner-picker-search input {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--bg-base);
color: var(--text-main);
font-size: 15px;
font-family: var(--font-family);
}
#edit-partner-sheet .partner-picker-search input:focus {
outline: none;
border-color: var(--border-focus);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}
#edit-partner-sheet .partner-picker-search input::placeholder { color: var(--text-faint); }
#edit-partner-sheet .partner-picker-empty {
padding: 18px 14px;
color: var(--text-dim);
text-align: center;
font-size: 13px;
font-weight: 600;
}
#edit-partner-sheet .partner-picker-sheet-list {
flex: 1 1 auto;
min-height: 0;
}
#edit-partner-sheet .partner-picker-sheet-done {
flex: none;
width: 100%;
max-width: 460px;
margin-left: auto;
margin-right: auto;
min-height: 38px;
padding: 8px 16px;
background: var(--bg-surface-elevated);
border-color: var(--border-subtle);
color: var(--text-main);
}
#edit-partner-sheet .partner-picker-sheet-done:hover {
background: var(--bg-surface-hover);
border-color: var(--border-focus);
}
#edit-partner-sheet .partner-picker-sheet-close {
background: var(--bg-surface-elevated);
border-color: var(--border-subtle);
color: var(--text-dim);
}
#edit-partner-sheet .partner-picker-row {
height: 37px;
min-height: 37px;
padding: 0 10px;
gap: 12px;
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 0;
background: transparent;
color: #f5f7ff;
}
#edit-partner-sheet .partner-picker-row:hover,
#edit-partner-sheet .partner-picker-row:focus-visible {
background: rgba(255, 255, 255, 0.035);
border-color: rgba(255, 255, 255, 0.08);
}
#edit-partner-sheet .partner-picker-row.is-selected {
background: transparent;
border-bottom-color: rgba(255, 255, 255, 0.08);
}
#edit-partner-sheet .partner-picker-row-checkbox {
position: relative;
width: 16px;
height: 16px;
flex: none;
border: 2px solid #9ba3af;
border-radius: 4px;
background: #fff;
box-sizing: border-box;
}
#edit-partner-sheet .partner-picker-row.is-selected .partner-picker-row-checkbox {
border-color: #0a84ff;
background: #0a84ff;
box-shadow: none;
}
#edit-partner-sheet .partner-picker-row.is-selected .partner-picker-row-checkbox::after {
content: '';
position: absolute;
left: 4px;
top: 1px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
#edit-partner-sheet .partner-picker-row-copy {
flex: 1 1 auto;
display: flex;
flex-direction: row;
align-items: center;
gap: 0;
min-width: 0;
}
#edit-partner-sheet .partner-picker-row-copy strong {
overflow: hidden;
color: #f5f7ff;
font-size: 0.95rem;
font-weight: 500;
text-overflow: ellipsis;
white-space: nowrap;
}
#edit-partner-sheet .partner-picker-row-gender {
flex: none;
margin-right: 6px;
font-size: 0.95rem;
font-weight: 800;
}
#edit-partner-sheet .partner-picker-row-gender.gender-M { color: #5ac8fa; }
#edit-partner-sheet .partner-picker-row-gender.gender-F { color: #ff2d55; }
.badge { background: var(--bg-surface-hover); padding: 4px 10px; 8px; font-size: 11px; font-weight: 600; color: var(--text-dim); }
.rank-badge { font-size: 11px; padding: 3px 6px; border-radius: 4px; font-weight: 800; color: #000; letter-spacing: 0.5px; }
.rank-BEG { background: #7DD3FC; }
.rank-INT { background: var(--accent); }
.rank-ADV { background: #FB923C; }
/* ---- Toggle Switch (iOS-style) ---- */
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
position: absolute; inset: 0;
background: var(--toggle-off);
border-radius: 8px;
cursor: pointer;
transition: background 0.2s ease;
}
.toggle-slider::before {
content: '';
position: absolute;
width: 18px; height: 18px;
left: 3px; top: 3px;
background: #fff;
border-radius: 50%;
transition: transform 0.2s ease;
box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.toggle-switch input:checked + .toggle-slider { background: #0066ff; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
/* APP LAYOUT & NAVIGATION */
/* =========================================
SIDEBAR ACCORDION GROUPS
========================================= */
.nav-group { margin-bottom: 0; }
#ng-open-play { margin-top: 28px; }
.nav-group-header {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 12px 8px; cursor: pointer;
font-size: 11px; font-weight: 800; color: var(--text-main);
text-transform: uppercase; letter-spacing: 1.5px; transition: color 0.2s;
}
.nav-group-header:hover { color: var(--text-main); }
/* A selected child keeps its accordion header selected too, so the sidebar
hierarchy remains visible while the user is inside Club Data or Settings. */
.nav-group:has(> .nav-group-header + .nav-group-content .nav-item.active) > .nav-group-header {
background: var(--bg-surface-hover);
border-radius: 8px;
}
/* Sidebar navigation is an interaction surface, not selectable document text.
Safari/iOS can otherwise paint a blue selection over the label and a tinted
selection rectangle over the adjacent SVG when a tap becomes a long-press. */
.sidebar .nav-item,
.sidebar .nav-group-header,
.sidebar .nav-item *,
.sidebar .nav-group-header * {
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
/* Icon matches .nav-item's icon size/gap exactly so the sidebar's icon column
lines up across both plain nav items and group headers. */
.nav-group-header-label { display: flex; align-items: center; gap: 10px; }
.nav-group-header-label img { width: 16px; height: 16px; opacity: 0.95; }
.nav-group-header i { width: 14px; height: 14px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
/* Rotate the chevron when open */
.nav-group.open > .nav-group-header i { transform: rotate(180deg); }
/* Smooth height & fade animation */
.nav-group-content {
display: grid;
grid-template-rows: 0fr;
min-height: 0;
overflow: hidden;
transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
opacity: 0;
}
.nav-group.open > .nav-group-content {
grid-template-rows: 1fr;
opacity: 1;
}
.category-nav-group .nav-group-content {
display: block;
grid-template-rows: none;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}
.category-nav-group.open .nav-group-content {
max-height: 420px;
opacity: 1;
}
.nav-group-inner {
overflow: hidden;
min-height: 0;
}
/* Vertical guide rail beside an accordion's sub-items (Club Data / Settings),
so their text lines up under a consistent indent instead of floating at the
same left edge as the group header's own icon. Scoped to groups that have a
header (Home/Open Play are headerless single-item groups and stay flush). */
.nav-group-header ~ .nav-group-content .nav-group-inner {
position: relative;
margin-left: 18px;
padding-left: 14px;
}
.nav-group-header ~ .nav-group-content .nav-group-inner::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 1px;
background: var(--border-subtle);
}
/* The accent active-indicator bar duplicates/clashes with the guide rail right
next to it in these groups — the rail itself is enough to show hierarchy. */
.nav-group-header ~ .nav-group-content .nav-item.active::before {
display: none;
}
.app-layout {
display: flex;
flex-direction: row;
flex: 1 1 auto;
overflow: hidden;
width: 100vw;
height: 100dvh; /* Force it to take up the full screen height, tracking the browser's collapsible URL bar */
}
/* Sidebar logo */
.sidebar .brand { padding: 12px 10px 16px; justify-content: flex-start; }
.sidebar .brand-logo { height: 34px; width: auto; max-width: 150px; object-fit: contain; display: block; }
/* Login Screen Logo */
.splash-logo-img { height: 80px; width: auto; object-fit: contain; margin: 0 auto 15px; display: block; }
.brand-logo { height: 36px; width: auto; object-fit: contain; }
/* min-height pins the row to its normal (text-visible) height — without it,
collapsing the sidebar's font-size to 0 shrinks each item's own
line-height-driven height (~38px -> ~34px), nudging every item below it
upward by the difference, compounding down the list. */
.nav-item { padding: 9px 12px; min-height: 38px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; color: var(--text-main); cursor: pointer; font-size: 15px; font-weight: 500; border-radius: 8px; transition: background-color 0.15s, color 0.15s; position: relative; }
.nav-item:hover:not(.disabled) { background: var(--bg-surface-hover); }
.nav-item.active { background: var(--bg-surface-hover); color: var(--text-main); font-weight: 500; }
.nav-item.active::before { content: ""; position: absolute; left: -14px; top: 7px; bottom: 7px; width: 2px; background: var(--accent); border-radius: 0 2px 2px 0; }
.nav-item.disabled { opacity: 0.5; cursor: not-allowed; }
.nav-item-inline-link { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-dim); text-decoration: underline; flex: none; }
.nav-item-inline-link:hover { color: var(--text-main); }
.nav-item-inline-pill {
margin-left: auto;
padding: 3px 8px;
border: 1px solid var(--border-subtle);
border-radius: 999px;
color: var(--text-dim);
font-size: 11px;
font-weight: 700;
line-height: 1.2;
flex: none;
}
.nav-item-inline-pill:hover {
border-color: var(--border-focus);
color: var(--text-main);
}
.nav-confirm-popover {
position: fixed;
left: var(--nav-confirm-left, 88px);
top: var(--nav-confirm-top, 320px);
z-index: 5000;
width: min(220px, max(0px, calc(var(--app-sidebar-w, 260px) - 24px)));
box-sizing: border-box;
padding: 12px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md, 8px);
background: var(--bg-surface-elevated, #101114);
box-shadow: 0 10px 25px rgba(0,0,0,0.5);
color: var(--text-main);
cursor: default;
}
.nav-confirm-title {
font-size: 13px;
font-weight: 700;
}
.nav-confirm-popover p {
margin-top: 5px;
color: var(--text-dim);
font-size: 12px;
line-height: 1.35;
}
.nav-confirm-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 12px;
}
.nav-confirm-actions button {
min-height: 28px;
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
flex-shrink: 0;
}
.nav-confirm-cancel {
color: var(--text-dim);
background: transparent;
border: 1px solid var(--border-subtle);
}
.nav-confirm-danger {
color: #fff;
background: rgba(248, 113, 113, 0.14);
border: 1px solid rgba(248, 113, 113, 0.45);
}
.nav-confirm-primary {
color: var(--accent-btn-txt, #0c1006);
background: var(--accent);
border: 1px solid var(--accent);
}
.nav-confirm-cancel:hover,
.nav-confirm-danger:hover {
color: var(--text-main);
border-color: var(--border-focus);
}
.nav-confirm-primary:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
}
.top-stack-timers-wrap {
display: inline-flex;
align-items: center;
margin-left: 4px;
}
.top-stack-timers-btn {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 999px;
background: transparent;
color: var(--text-main);
flex: none;
}
.top-stack-timers-btn img {
width: 15px;
height: 15px;
filter: invert(1);
pointer-events: none;
}
.top-stack-timers-btn:hover {
border: none;
background: var(--bg-surface-hover);
}
.top-stack-timers-menu {
width: 240px;
}
.stack-timer-actions {
justify-content: stretch;
}
.stack-timer-actions button {
flex: 1;
}
.main-content { flex: 1; display: flex; flex-direction: column; padding: 0 40px 40px; overflow-y: auto; overflow-x: hidden; overflow-anchor: none; background: transparent; }
.view-section { display: flex; flex-direction: column; animation: fadeIn 0.3s ease-out forwards; }
/* Opacity-only: a `transform` here (even the fadeIn's own translateY(0) end
state, retained indefinitely by `forwards`) makes this ancestor the
containing block for any `position:fixed` descendant — e.g. the tournament
group-setup wizard's fullscreen `.tny-groups-page` overlay — which then gets
sized/clipped relative to this element instead of the viewport, silently
breaking layout for anything rendered past `.main`'s overflow:hidden edge.
See the group-setup wizard "invisible controls" bug. */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.action-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
margin-bottom: 12px;
border-bottom: 1px solid var(--border-subtle);
position: sticky;
top: 0;
background: var(--bg-base);
z-index: 100;
transition: border-color 0.2s ease;
}
.action-buttons { display: flex; gap: 8px; }
.action-buttons .btn { min-height: 32px; padding: 8px 12px; font-size: 13px; }
.action-buttons .btn i,
.action-buttons .btn .app-icon-svg { width: 14px; height: 14px; }
.action-buttons .btn.btn-primary i,
.action-buttons .btn.btn-primary .app-icon-svg { width: 16px; height: 16px; }
.action-title { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.2px; }
.global-timer-widget { display: flex; align-items: center; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 6px 16px; gap: 16px; }
.gt-label { font-size: 11px; font-weight: 700; color: var(--text-dim); letter-spacing: 1px; }
.gt-time { font-family: var(--font-mono); font-size: 24px; font-weight: 800; color: var(--accent); min-width: 60px; text-align: center; letter-spacing: -0.02em; }
.section-header { margin-bottom: 20px; }
.section-title { font-size: 1.5rem; color: #fff; }
.section-subtitle { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
/* PADDLE RACKS (QUEUE) */
.rack-container { display: flex; gap: 20px; height: 380px; margin-bottom: 32px; }
.rack { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; transition: border-color 0.2s; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; }
.rack.wide { flex: 1.5 1 0; }
.rack.active { border-color: var(--border-focus); box-shadow: 0 0 0 1px var(--border-focus); }
.rack.pull-insufficient {
border-color: var(--danger) !important;
box-shadow: 0 0 0 1px var(--danger);
}
.rack-header { padding: 6px 16px; min-height: 40px; border-bottom: 1px solid var(--border-subtle); display: flex; justify-content: space-between; align-items: center; background: var(--bg-surface-elevated);}
.rack-title { font-size: 15px; font-weight: 700; color: #fff;}
.rack-subtitle { font-size: 11px; color: var(--text-dim); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.rack-indicator { font-size: 11px; font-weight: 800; background: var(--bg-surface-elevated); color: var(--text-main); border: 1px solid var(--border-subtle); padding: 4px 8px; border-radius: 2px; }
.rack-body { flex: 1; display: flex; padding: 12px; background: var(--bg-base); overflow-y: auto; overflow-x: auto; -webkit-tap-highlight-color: transparent; outline: none; }
.rack-body-two-col {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
align-content: start;
overflow-x: hidden;
}
.rack-body-two-col .player-pill {
min-width: 0;
}
#rack-card-new,
#rack-card-winners,
#rack-card-losers {
min-height: 0;
height: fit-content;
}
#rack-new,
#rack-winners,
#rack-losers {
flex-direction: column;
gap: 8px;
flex: 0 1 auto;
max-height: 184px; /* 3 compact player-card rows visible before scrolling */
overflow-y: auto;
scrollbar-gutter: stable;
}
@media (min-width: 1025px) {
#rack-new,
#rack-winners,
#rack-losers {
height: 184px;
min-height: 184px;
max-height: 184px;
}
}
.player-pill { background: var(--bg-surface-elevated); border: none; padding: 8px 10px; border-radius: var(--radius-sm); display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: nowrap; transition: all 0.15s; min-width: 0; cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; outline: none; }
.player-pill:active { cursor: pointer; }
.player-pill button, .player-pill .btn-tiny, .player-pill .btn-icon { cursor: pointer; }
.player-pill > div { min-width: 0; }
.player-pill > div:first-child { flex: 1 1 0; min-width: 0; overflow: hidden; }
.player-pill > div:first-child > div:last-child { min-width: 0; flex-wrap: wrap; }
.player-pill > div:last-child { flex: 0 0 auto; gap: 3px !important; flex-wrap: nowrap; justify-content: flex-end; }
.player-pill .btn-tiny {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
min-height: 32px !important;
padding: 0 !important;
font-size: 11px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
aspect-ratio: 1 / 1;
}
.player-pill .drag-handle { font-size: 13px; opacity: 0.6; cursor: grab; }
.pill-player-name, .preview-player-name { font-size: 13px; line-height: 1; }
.player-pill:hover { background: var(--bg-surface-hover); border-color: transparent; }
/* While a pill is selected for swapping, give every other pill a stronger, accent-colored
hover to signal "click here to swap with the selected player". Desktop only (hover-capable
pointer) — touch devices don't have a hover state to enhance. */
@media (hover: hover) and (pointer: fine) {
body.queue-swap-active .player-pill:hover,
body.queue-swap-active .preview-player-card:hover {
border-color: transparent !important;
background: var(--bg-surface-hover) !important;
box-shadow: none;
}
}
/* While an Up Next player is selected, whole rack cards become one-click
"send here" targets (no swap) — a static dashed outline, no hover state.
The hover highlight stays reserved for player pills (the swap-selection
cue above); a rack card hovering solid would compete with that. */
body.queue-swap-active-preview .rack {
cursor: pointer;
border-radius: var(--radius-md);
outline: 1px dashed var(--accent-border);
outline-offset: -1px;
}
body.queue-swap-active-rack #preview-container {
cursor: pointer;
}
.player-pill.on-deck { border-left-color: #555 !important; background: var(--bg-base); border-style: dashed; }
.player-pill.resting { opacity: 0.5; border-left-color: #555; background: repeating-linear-gradient(45deg, var(--bg-base), var(--bg-base) 10px, var(--bg-surface) 10px, var(--bg-surface) 20px); }
.player-list-row.resting { opacity: 0.6; }
.player-badge { font-size: 11px; color: var(--text-dim); font-weight: 700; }
.drag-handle {
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
color: transparent;
cursor: pointer;
font-size: 18px;
padding: 10px;
margin-left: -10px;
margin-right: 2px;
touch-action: none;
transition: color 0.15s;
}
.player-pill:hover .drag-handle,
.drag-handle:hover { color: var(--text-dim); }
.drag-handle:active { cursor: pointer; color: #fff; }
/* The placeholder left behind while dragging */
.sortable-ghost {
opacity: 0.3 !important;
background: var(--bg-surface-elevated) !important;
border: 2px dashed var(--accent) !important;
}
/* The actual card being dragged (Lifts it off the page) */
.sortable-chosen {
cursor: grabbing !important;
border-color: var(--accent) !important;
box-shadow: 0 0 0 2px rgba(201, 255, 0, 0.22), 0 12px 28px rgba(0,0,0,0.35) !important;
transform: scale(1.015);
transition: box-shadow 0.12s ease, border-color 0.12s ease, transform 0.12s ease !important;
}
.sortable-drag {
cursor: grabbing !important;
box-shadow: 0 20px 40px rgba(0,0,0,0.8) !important;
opacity: 1 !important;
z-index: 9999 !important;
background: var(--bg-surface) !important;
border-color: var(--border-focus) !important;
transition: none !important;
pointer-events: none !important;
}
.sortable-fallback {
transition: none !important;
pointer-events: none !important;
}
.sortable-swap-highlight {
background: rgba(197,245,0,0.15) !important;
border: 2px solid var(--accent) !important;
transform: scale(1.02);
transition: all 0.2s ease;
}
/* Belt-and-suspenders: the touchmove preventDefault() added on drag-start is what actually
stops an in-flight scroll gesture; this keeps other scroll paths (wheel, momentum) locked
too for the brief window a pill is actively being dragged. */
body.dragging-active {
overflow: hidden;
touch-action: none;
}
/* Dynamic Stale Indicators */
.wait-time-display { font-size: 11px; font-weight: 600; color: var(--text-dim); background: transparent; padding: 0; margin-left: 8px;}
.stale-glow { border-left-color: var(--danger) !important; background: var(--danger-bg); }
.stale-glow .wait-time-display { color: var(--danger); background: transparent; padding: 0;}
/* Queue Themes */
.theme-rotate #rack-card-winners, .theme-rotate #rack-card-losers,
.theme-winners_stay #rack-card-winners, .theme-winners_stay #rack-card-losers,
.theme-split_winners #rack-card-winners, .theme-split_winners #rack-card-losers {
display: none !important;
}
.theme-rotate #rack-card-new.active,
.theme-winners_stay #rack-card-new.active,
.theme-split_winners #rack-card-new.active {
border-color: #3b82f6; box-shadow: 0 0 0 1px #3b82f6;
}
/* PREVIEW & COURTS */
.preview-box { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 32px; }
.preview-header { padding: 6px 20px; min-height: 40px; border-bottom: 1px solid var(--border-subtle); display: flex; justify-content: space-between; align-items: center; background: var(--bg-surface-elevated);}
.preview-title { font-weight: 700; color: #fff; }
.preview-actions { display: flex; gap: 12px; }
.preview-content { padding: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; min-height: 90px; background: var(--bg-base);}
/* ── Live Court Cards (brand-design §6.6) ── */
.courts-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.court-card {
background: var(--bg-surface);
border: none;
border-radius: var(--radius);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color 150ms;
}
.court-card:hover { border-color: var(--border-subtle); box-shadow: none; }
/* Active court: lime ring, no glow */
.court-card.active-court {
border-color: transparent !important;
background: var(--accent-faint) !important;
box-shadow: none !important;
}
.court-header {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Status pill — Open = green, Live = green, etc. */
.court-status {
font-size: 11px;
padding: 3px 8px;
border-radius: 4px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
background: var(--bg-surface-elevated);
color: var(--text-faint);
border: 1px solid var(--border-subtle);
}
.court-status.open,
.court-status.status-open { background: var(--success-soft); color: var(--success); border-color: transparent; box-shadow: none; }
.court-status.active,
.court-status.status-live { background: var(--success-soft); color: var(--success); border-color: transparent; box-shadow: none; }
.court-status.status-waiting { background: rgba(251,191,36,0.12); color: var(--warn); border-color: transparent; }
.court-status.status-warmup { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-ring); }
/* Recessed Team Matchup Blocks */
.active-match-row { display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; margin-bottom: 24px;}
.team-block { display: flex; flex-direction: column; align-items: center; font-size: 15px; font-weight: 600; background: var(--bg-surface); padding: 12px 10px; border-radius: var(--radius-md); flex: 1; border: 1px solid var(--border-subtle); gap: 4px; box-shadow: none;}
.team-label { font-size: 11px; color: var(--text-dim); font-weight: 800; margin-bottom: 4px; letter-spacing: 1px;}
.vs-badge { font-weight: 900; font-size: 13px; color: var(--text-dim); font-style: italic; opacity: 0.6;}
/* ── Setup Banner (brand-design §6.4) ── */
.setup-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 16px 20px;
background: var(--bg-surface);
border: 1px solid var(--accent-ring);
border-radius: var(--radius-lg);
margin-bottom: 14px;
position: relative;
overflow: hidden;
}
.setup-banner::after {
content: "";
position: absolute;
inset: 0;
background: rgba(196,240,46,0.05);
pointer-events: none;
}
.setup-banner-inner {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 14px;
}
.setup-dot {
width: 8px; height: 8px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 0 4px var(--accent-soft);
flex-shrink: 0;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.setup-title { font-size: 13px; font-weight: 600; color: var(--text-main); margin: 0 0 2px; }
.setup-sub { font-size: 13px; color: var(--text-dim); margin: 0; }
/* DASHBOARD PANELS & STATS */
/* Home view's full-width, user-customizable image banner. Click anywhere on
it to upload a replacement image (see App.uploadHomeBannerImage). */
.home-image-banner {
position: relative;
width: 100%;
aspect-ratio: 16 / 5;
max-height: 280px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-surface-elevated);
border: none;
border-radius: var(--radius-lg);
margin-bottom: 20px;
overflow: hidden;
cursor: pointer;
}
@media (max-width: 720px) {
.home-image-banner { aspect-ratio: 16 / 7; }
}
.home-image-banner-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* A small "Edit" pill in the bottom-right corner, not a full-image darken —
shown on hover (desktop) and always-on for touch devices (no hover). */
.home-image-banner-overlay {
position: absolute;
inset: auto 10px 10px auto;
display: flex;
align-items: center;
gap: 6px;
border-radius: 999px;
padding: 6px 12px;
background: rgba(0, 0, 0, 0.65);
color: var(--text-main);
font-size: 12px;
font-weight: 600;
opacity: 0;
transition: opacity 0.15s ease;
pointer-events: none;
}
.home-image-banner:hover .home-image-banner-overlay { opacity: 1; }
@media (hover: none) {
.home-image-banner-overlay { opacity: 1; }
}
/* Small remove/trash button, opposite corner from the Edit pill — only
shown once the user has actually uploaded a custom image (toggled in JS). */
.home-image-banner-remove {
position: absolute;
inset: 10px auto auto 10px;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: none;
border-radius: 999px;
background: rgba(0, 0, 0, 0.65);
cursor: pointer;
opacity: 0;
transition: opacity 0.15s ease, background-color 0.15s ease;
}
.home-image-banner-remove:hover { background: rgba(200, 40, 40, 0.85); }
.home-image-banner:hover .home-image-banner-remove { opacity: 1; }
@media (hover: none) {
.home-image-banner-remove { opacity: 1; }
}
.dash-panel {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: 14px;
transition: border-color 120ms;
}
.dash-panel:hover {
border-color: var(--border-subtle);
}
/* The Finance fee-mode menu is positioned below its trigger and must be able
to escape the panel body instead of being clipped by the shared card chrome. */
#finance-fee-panel:has(#finance-fee-mode-menu:not(.hidden)) {
position: relative;
z-index: 20;
overflow: visible;
}
.panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 16px;
min-height: 40px;
border-bottom: 1px solid var(--border-subtle);
background: var(--bg-surface);
}
/* Header action buttons (e.g. "Courts", "+ Add Match", "Manage Queue") were
full-size .btn (min-height 36px) — the actual height driver, not the
header's own padding. Shrink just inside .panel-header, matching
.btn-tiny's metrics, without touching the shared .btn class elsewhere. */
.panel-header .btn {
padding: 6px 12px;
min-height: 28px;
font-size: 12px;
}
.panel-header h3 {
font-size: 13px;
color: var(--text-main);
letter-spacing: -0.005em;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}
.panel-body { padding: 16px 20px; }
/* Live Courts: header keeps the card's lighter --bg-surface tone, but the
body area (behind the individual court cards) reads as flush with the
page instead, same treatment as the Recent Matches row list above. Each
.court-card now matches that same --bg-surface tone (was
--bg-surface-elevated) so the header row and card fills read as one
consistent surface color instead of two adjacent shades. */
.courts-panel-body {
background: var(--bg-base);
}
/* Players leaderboard: same flush-with-page treatment as Live Courts/Recent
Matches above — the panel header keeps --bg-surface, the row list behind
it reads as part of the page instead of a lighter card surface. */
#leaderboard-list.dash-panel-body { background: var(--bg-base); }
#database-list.dash-panel-body { background: var(--bg-base); }
/* Session Info Card — grid layout matching new design */
.session-info-card {
display: grid;
grid-template-columns: repeat(4, 1fr);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
margin-bottom: 14px;
overflow: hidden;
}
.session-meta-toggle-btn { display: none !important; }
#dash-session-meta {
position: relative;
}
.dashboard-details-close {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
display: grid;
place-items: center;
border: none;
border-radius: 0;
background: transparent;
cursor: pointer;
opacity: 0.75;
transition: opacity 0.15s ease;
}
.dashboard-details-close:hover {
opacity: 1;
}
.dashboard-details-close .ui-icon-img {
width: 13px;
height: 13px;
margin: 0;
filter: invert(1);
opacity: 0.9;
}
#top-dashboard-details-toggle {
align-items: center;
gap: 6px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
color: var(--text-main);
margin-left: 10px;
padding: 7px 14px;
min-height: 32px;
font-size: 12.5px;
line-height: 1;
cursor: pointer;
}
#top-dashboard-details-toggle img {
width: 14px;
height: 14px;
filter: invert(1);
opacity: 0.9;
pointer-events: none;
}
#top-dashboard-details-toggle:hover {
background: var(--bg-surface-hover);
border-color: var(--border-focus);
}
.info-item {
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px 20px;
border-right: 1px solid var(--border-subtle);
}
.info-item:last-child, .info-item:nth-child(4n) { border-right: none; }
.info-label {
font-size: 11px;
font-weight: 400;
color: var(--text-faint);
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1;
}
.info-value {
font-size: 18px;
color: var(--text-main);
font-weight: 600;
letter-spacing: -0.01em;
}
/* Modern Stat Cards */
.dash-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; min-width: 0;}
.dash-stats-grid > * { min-width: 0; }
/* Home page shortcut cards — same responsive recipe as .dash-stats-grid,
.dash-panel already gives the card chrome (border/radius/bg) for free. */
.home-shortcuts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.home-shortcut-card { cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.home-shortcut-card:hover { border-color: var(--border-focus); background: var(--bg-surface-hover); }
.home-shortcut-label { font-weight: 400; font-size: 14px; color: var(--text-main); }
/* Home page "Your Tournaments" list — filter pills + row list. */
.home-filter-row { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.home-filter-pill {
background: transparent;
border: 1px solid transparent;
color: var(--text-dim);
font-size: 13px;
font-weight: 500;
padding: 9px 16px;
border-radius: 999px;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.home-filter-pill:hover { background: transparent; color: var(--text-main); }
.home-filter-pill.active { background: var(--bg-surface-hover); border-color: transparent; color: var(--text-main); }
#home-tourney-list {
border-top: none;
}
#home-tourney-list .archive-session-row {
padding-left: 16px;
padding-right: 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
border-radius: 8px;
}
#home-tourney-list .archive-session-thumb {
border: none;
}
#home-tourney-list .archive-session-thumb-tournament {
background: #262215;
}
#home-tourney-list .archive-session-thumb-category {
background: #0D1727;
}
#home-tourney-list .archive-session-thumb-open-play {
background: #12241B;
}
#home-tourney-list .archive-session-row:last-child {
border-bottom: none;
}
#home-tourney-list .archive-session-action .btn-tiny,
#home-tourney-list .archive-session-action .btn-tiny:hover {
border: none;
}
#home-tourney-list .home-tourney-status {
border: none;
}
#home-tourney-list .archive-session-row:hover {
background: var(--bg-surface-hover);
}
@media (min-width: 1025px) {
#home-tourney-list .archive-session-row,
#past-sessions-list .archive-session-row,
#past-tournaments-list .archive-session-row {
/* Keep the title independent from the compact metadata group. */
grid-template-columns: 44px minmax(280px, 1.15fr) minmax(0, 2.85fr) 120px;
}
.archive-session-details {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
gap: 18px;
min-width: 0;
}
.archive-session-details > * {
min-width: 0;
}
.archive-session-date {
min-width: 0;
overflow: hidden;
}
#home-tourney-list .archive-session-title-wrap {
align-items: center;
gap: 14px;
}
#home-tourney-list .archive-session-meta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 0;
white-space: nowrap;
flex-shrink: 0;
}
#home-tourney-list .archive-session-inline-meta {
display: inline-flex;
align-items: center;
gap: 7px;
min-width: 0;
max-width: 100%;
}
#home-tourney-list .archive-session-inline-meta img,
#home-tourney-list .archive-session-meta img {
width: 16px;
height: 16px;
flex: 0 0 auto;
filter: invert(1);
opacity: 0.78;
}
#home-tourney-list .archive-session-inline-meta .archive-session-col-value {
min-width: 0;
margin-top: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#home-tourney-list .archive-session-players {
min-width: 0;
}
#home-tourney-list .archive-session-players-meta {
width: 100%;
}
}
@media (max-width: 720px) {
#home-tourney-list {
border-top: none !important;
}
}
.home-tourney-status {
display: inline-flex;
align-items: center;
justify-content: center;
width: 96px;
min-width: 96px;
text-align: center;
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border: none;
border-radius: 999px;
white-space: nowrap;
}
.home-tourney-status.status-active {
background: var(--status-live-bg);
color: var(--status-live-text);
}
.home-tourney-status.status-ended,
.home-tourney-status.status-concluded {
background: var(--status-ended-bg);
color: var(--text-soft);
}
.home-tourney-status.status-scheduled,
.home-tourney-status.status-draft {
background: var(--status-draft-bg);
color: var(--warn);
}
/* Up Next player surfaces use fill and spacing for separation; remove the
blue/accent outer strokes from both queue pills and preview cards. */
.player-pill,
.preview-player-card {
border: none !important;
}
.home-tourney-empty { padding: 30px 20px; text-align: center; color: var(--text-dim); font-size: 14px; }
#home-active-banner.setup-banner {
background: var(--bg-base);
border-color: var(--border-subtle);
}
#home-active-banner.setup-banner::before,
#home-active-banner.setup-banner::after {
background: transparent;
}
#home-active-banner .setup-dot {
width: 34px;
height: 34px;
display: grid;
place-items: center;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
animation: none;
}
#home-active-banner .home-active-banner-icon img {
width: 24px;
height: 24px;
filter: invert(1);
opacity: 0.9;
pointer-events: none;
}
#home-active-banner #home-banner-btn.btn-primary {
background: var(--bg-surface-elevated);
color: var(--text-main);
border: 1px solid var(--border-subtle);
}
#home-active-banner #home-banner-btn.btn-primary:hover {
background: var(--bg-surface-hover);
border-color: var(--border-focus);
}
.dropdown-item:hover { background: var(--bg-surface-hover); }
.dropdown-label-inline {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
white-space: nowrap;
}
.club-premium-icon {
width: 13px;
height: 13px;
opacity: 0.9;
filter: invert(1);
flex-shrink: 0;
vertical-align: -2px;
}
.dropdown-item.club-locked {
opacity: 0.45;
filter: grayscale(0.45);
}
.dropdown-item.club-locked:hover {
background: transparent;
}
/* V2 stat strip — matches new design stats-row */
.v2-stat-strip {
display: grid;
grid-template-columns: repeat(5, 1fr);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: 14px;
}
.v2-stat-strip .dash-panel {
border: none;
border-right: 1px solid var(--border-subtle);
border-radius: 0;
margin-bottom: 0;
padding: 16px 20px;
}
.v2-stat-strip .dash-panel:last-child { border-right: none; }
.v2-stat-strip .dash-panel:hover { border-color: var(--border-subtle); }
@media (max-width: 1180px) {
.v2-stat-strip { grid-template-columns: repeat(3, 1fr); }
.v2-stat-strip .dash-panel:nth-child(3n) { border-right: none; }
.v2-stat-strip .dash-panel:nth-child(-n+3) { border-bottom: 1px solid var(--border-subtle); }
}
@media (max-width: 720px) {
.session-meta-toggle-btn {
width: 100%;
display: none !important;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 14px;
border: none;
border-bottom: 1px solid var(--border-subtle);
background: var(--bg-surface);
color: var(--text-dim);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.session-meta-toggle-btn #dash-session-meta-toggle-icon { color: var(--text-faint); }
/* Animated collapse matching .collapsible so all accordions feel the same */
#dash-session-meta-body {
max-height: 2000px;
opacity: 1;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.session-meta-accordion.collapsed #dash-session-meta-body {
max-height: 0;
opacity: 0;
}
#dash-session-meta-body .session-info-card {
border: none;
border-bottom: 1px solid var(--border-subtle);
border-radius: 0;
margin-bottom: 0;
gap: 0;
}
#dash-session-meta-body .session-info-card .info-item {
padding: 14px;
border-right: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
}
#dash-session-meta-body .session-info-card .info-item:nth-child(2n) { border-right: none; }
#dash-session-meta-body .session-info-card .info-item:nth-child(n+3) { border-bottom: none; }
#dash-session-meta-body .v2-stat-strip {
border: none;
border-radius: 0;
margin-bottom: 0;
}
#dash-session-meta-body .v2-stat-strip .stat-cell-new {
border-right: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
}
#dash-session-meta-body .v2-stat-strip .stat-cell-new:nth-child(2n) { border-right: none; }
#dash-session-meta-body .v2-stat-strip .stat-cell-new:nth-last-child(-n+1) { border-bottom: none; }
#dash-session-meta-body .v2-stat-strip .stat-cell-new:last-child {
grid-column: 1 / -1;
border-right: none;
}
.v2-stat-strip { grid-template-columns: repeat(2, 1fr); }
}
.stat-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 24px; display: flex; align-items: center; gap: 18px; transition: all 0.3s ease; box-shadow: 0 5px 6px rgba(0,0,0,0.3); }
.stat-card:hover { transform: translateY(-4px); border-color: var(--border-focus); box-shadow: 0 12px 30px rgba(0,0,0,0.6); }
/* Squircle App Icons for Stats */
.stat-icon { font-size: 24px; background: rgba(255,255,255,0.03); width: 60px; height: 60px; 8px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.05); box-shadow: inset 0 4px 10px rgba(0,0,0,0.3); }
.stat-content { display: flex; flex-direction: column; gap: 2px; }
.stat-label { font-size: 11px; color: var(--text-dim); font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
.stat-value { font-size: 1.5rem; font-weight: 900; color: #fff; letter-spacing: -0.5px; }
/* Logic Engine Selectors */
.logic-selector {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
width: 100%;
}
/* On tablets/smaller screens, wrap to 2 columns */
@media (max-width: 1000px) {
.logic-selector { grid-template-columns: repeat(2, 1fr); }
}
/* On very small phones, wrap to 1 column */
@media (max-width: 600px) {
.logic-selector { grid-template-columns: 1fr; }
}
.logic-option {
background: var(--bg-surface-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius);
padding: 16px;
cursor: pointer;
transition: background 120ms, border-color 120ms;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 8px;
min-height: 150px;
position: relative;
}
.logic-option:hover {
background: var(--bg-surface-hover);
border-color: var(--border-strong);
}
.logic-option.active {
background: var(--accent-faint) !important;
border-color: var(--accent-ring) !important;
box-shadow: none !important;
}
/* Checkmark badge on active */
.logic-option.active::after {
content: "✓";
position: absolute;
top: 12px;
right: 12px;
width: 18px;
height: 18px;
background: var(--accent);
color: var(--accent-fg);
border-radius: 50%;
display: grid;
place-items: center;
font-size: 11px;
font-weight: 700;
}
.logic-icon {
width: 32px;
height: 32px;
display: grid;
place-items: center;
background: transparent;
border-radius: 8px;
color: var(--text-dim);
flex-shrink: 0;
}
.logic-option.active .logic-icon {
background: var(--accent);
color: var(--accent-fg);
}
.logic-title {
font-weight: 600;
color: var(--text-main);
font-size: 13px;
letter-spacing: -0.005em;
text-align: left;
}
/* --- Expandable Logic Descriptions --- */
.logic-desc-expander {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.3s ease;
width: 100%;
font-size: 11px;
color: var(--text-dim);
line-height: 1.5;
}
.logic-option.active .logic-desc-expander {
max-height: 200px;
opacity: 1;
}
/* =========================================
MATCH HISTORY DROPDOWN
========================================= */
/* No border-bottom here — the row templates (render-main.ts) already put a
conditional inline border-top on every row but the first. Setting both
stacked two 1px divider lines back-to-back at each row boundary, which
read as a thicker banded/shaded line rather than a single flat divider. */
.match-history-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; background: transparent; }
/* The card itself (.dash-panel) and its header use the lighter --bg-surface
card tone, on purpose — but the row list area should read as flush with
the page behind it, not as more "card," so it explicitly uses --bg-base
(the page's own background) instead of inheriting --bg-surface. */
#dash-match-history-body,
#queue-match-history-body {
background: var(--bg-base);
}
.match-team { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.match-court-badge { font-size: 11px; background: var(--border-subtle); padding: 3px 6px; border-radius: 4px; color: var(--text-dim); font-weight: 800; letter-spacing: 0.5px; }
.match-score-display { font-size: 18px; font-weight: 800; color: var(--accent); font-family: var(--font-mono); letter-spacing: -0.02em; }
/* LISTS & LEADERBOARD (TABLE STYLES) */
.tabs { display: flex; background: var(--bg-base); padding: 4px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle);}
.tab { flex: 1; padding: 8px 16px; border: none; background: transparent; color: var(--text-dim); font-size: 13px; font-weight: 600; border-radius: 2px; cursor: pointer; transition: 0.2s;}
.tab.active { background: var(--bg-surface-elevated); color: #fff; box-shadow: var(--shadow-sm); }
.toolbar { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.search-box { flex: 2; position: relative; min-width: 250px;}
.search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 15px; opacity: 0.5;}
.search-input { padding-left: 40px !important; }
.toolbar-select { flex: 1; min-width: 200px; }
.list-header { display: flex; padding: 12px 24px; background: var(--bg-surface-elevated); font-size: 11px; color: var(--text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-subtle); }
.player-list-row, .lb-row { display: flex; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--border-subtle); transition: background 0.2s; gap: 8px; }
.player-list-row:last-child, .lb-row:last-child { border-bottom: none; }
.player-list-row:hover, .lb-row:hover { background: var(--bg-base); }
.swap-player-modal-card {
background: var(--bg-base);
overflow: hidden;
}
.swap-player-search-wrap,
.swap-player-list {
width: 100%;
box-sizing: border-box;
}
.swap-player-row {
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 0;
border-bottom: 1px solid var(--border-subtle);
transition: background 0.2s;
}
.swap-player-row:last-child {
border-bottom: none;
}
.swap-player-row:hover {
background: var(--bg-base);
}
/* Compact variant for the sidebar dashboard roster column */
#dash-all-players .player-list-row { padding: 10px 12px; flex-wrap: wrap; gap: 6px; }
#dash-all-players .player-list-row > div:first-child { width: 22px !important; }
#dash-all-players .p-info { gap: 6px; flex: 1 1 100%; min-width: 0; order: 1; }
#dash-all-players .p-name { font-size: 13px; max-width: none; flex: 1; min-width: 0; }
#dash-all-players .player-list-row > div:nth-child(3) { width: auto !important; flex: 0 0 auto; order: 2; }
#dash-all-players .player-list-row > div:nth-child(4) { width: auto !important; flex-direction: row !important; gap: 4px !important; order: 3; }
#dash-all-players .player-list-row > div:nth-child(4) > span:last-child { display: none; }
#dash-all-players .player-list-row > div:nth-child(5) { min-width: 0 !important; flex: 0 0 auto; gap: 3px !important; order: 4; margin-left: auto; }
#dash-all-players .stat-pill { font-size: 11px; padding: 3px 6px; }
#dash-all-players .status-badge { font-size: 11px; padding: 3px 6px; }
#dash-all-players .btn-tiny { padding: 4px 7px; font-size: 11px; }
/* Player pills (queue racks): nowrap on internal badges + a touch more breathing room */
.player-pill { gap: 6px; }
.player-pill .player-badge,
.player-pill .wait-time-display { white-space: nowrap; }
/* Dashboard Roster Specifics */
.p-info { display: flex; align-items: center; gap: 12px; flex: 1; font-weight: 600; }
.p-name { color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px;}
.status-badge { font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 2px; background: var(--bg-base); color: var(--text-dim); border: 1px solid var(--border-subtle);}
.status-badge.playing { color: var(--live); border-color: var(--live-border); background: var(--live-bg); }
.status-badge.stale { color: var(--danger); border-color: rgba(255, 59, 48, 0.3); background: var(--danger-bg); }
.p-stats { display: flex; gap: 5px; margin-right: 5px; }
.stat-pill { font-size: 11px; padding: 4px 8px; border-radius: 2px; font-weight: 900; }
.win-pill { background: var(--bg-surface-elevated); color: var(--text-main); border: 1px solid var(--border-subtle); }
.loss-pill { background: rgba(255, 51, 51, 0.15); color: var(--danger); border: 1px solid var(--danger); }
/* Leaderboard Specifics */
.lb-col-rank { width: 40px; font-weight: 800; color: var(--text-dim); }
.lb-col-name { flex: 1; font-weight: 700; color: #fff; font-size: 13px; display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lb-col-stat { width: 80px; text-align: center; font-weight: 600; font-size: 15px;}
.win-rate-badge { background: var(--bg-base); border: 1px solid var(--border-subtle); padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 700;}
.win-rate-high { border-color: var(--border-focus); color: var(--text-main); }
/* =========================================
ARCHIVE ACCORDION
========================================= */
.archive-row {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
margin-bottom: 12px;
background: var(--bg-surface);
overflow: hidden;
transition: border-color 0.2s;
}
.archive-row:hover {
border-color: var(--border-focus);
}
.archive-header {
display: flex;
padding: 16px 20px;
cursor: pointer;
align-items: center;
background: var(--bg-surface);
transition: background 0.2s;
user-select: none;
}
.archive-header:hover {
background: var(--bg-surface-hover);
}
.archive-body {
max-height: 0;
opacity: 0;
overflow: hidden;
padding: 0 20px;
border-top: 1px solid transparent;
background: var(--bg-base);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.archive-body.open {
max-height: 1500px;
opacity: 1;
padding: 20px 20px;
margin-top: 5px;
border-top-color: var(--border-subtle);
}
.archive-stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 16px;
}
.archive-players {
font-size: 13px;
color: #fff;
line-height: 1.6;
background: var(--bg-surface);
padding: 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-subtle);
}
/* MODALS & SPLASH SCREEN */
.modal {
position: fixed; inset: 0;
background: rgba(0,0,0,0.6); /* Slightly lighter dark overlay */
backdrop-filter: blur(6px); /* Premium frosted glass effect */
-webkit-backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
z-index: 2000; padding: 20px;
animation: fadeIn 0.2s ease;
}
.modal-card {
background: var(--bg-surface);
border: 1px solid color-mix(in srgb, #141618 72%, transparent);
padding: 36px;
border-radius: var(--radius-lg);
width: 100%;
max-width: 460px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}
/* Add Player source switcher — reuses the Category Play file-tab language:
inactive tabs sit on an elevated surface, while the active tab visually
opens into the modal content below it. */
.add-player-tabs {
display: flex;
gap: 4px;
width: 100%;
border-bottom: 1px solid var(--border-subtle);
margin-bottom: 20px;
}
.add-player-tab {
flex: 0 0 auto;
appearance: none;
background: transparent;
border: 1px solid var(--border-subtle);
border-bottom: none;
border-radius: 8px 8px 0 0;
color: var(--text-dim);
font-size: 15px;
font-weight: 600;
padding: 10px 14px;
cursor: pointer;
transform: translateY(1px);
transition: background 0.15s ease, color 0.15s ease;
}
.add-player-tab:hover { color: var(--text-main); }
.add-player-tab.active {
background: var(--bg-surface);
border-bottom: 1px solid var(--bg-surface);
color: var(--text-main);
}
.add-player-modal-card {
overflow: hidden;
}
.add-player-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 14px;
}
.add-player-modal-header .modal-close {
margin-left: auto;
}
.add-player-single-panel,
.add-player-mass-panel {
min-width: 0;
}
.add-player-mass-panel {
display: flex;
flex-direction: column;
max-height: 60vh;
}
.add-player-checkin-btn {
display: block;
width: 50%;
margin-left: auto;
}
.add-player-modal-footer {
display: flex;
align-items: center;
border-top: 1px solid var(--border-subtle);
margin: 0px -36px -36px;
padding: 20px 36px;
}
.add-player-single-panel .add-player-modal-footer {
margin: 25px -36px -36px;
}
.add-player-mass-panel .add-player-modal-footer {
margin: 0px -36px -36px;
}
.add-player-selected-count {
color: var(--text-dim);
font-size: 13px;
font-weight: 600;
line-height: 1;
}
#add-modal .modal-card {
background: #0c0e0f;
}
#swap-player-modal .modal-card {
background: var(--bg-base);
}
#edit-modal .modal-card {
background: #0c0e0f;
}
/* Right-anchored slide-in drawer variant — mirrors the .sidebar off-canvas
pattern (same transform/transition values) instead of the centered
.modal-card dialog. .modal still supplies the fixed full-viewport backdrop
+ hidden/show toggling; this only repositions the content to the right
edge and adds the slide transform. */
.side-drawer {
justify-content: flex-end;
align-items: stretch;
padding: 0;
}
.side-drawer-panel {
background: var(--bg-base);
border-left: 1px solid var(--border-subtle);
width: 100%;
max-width: 340px;
height: 100%;
display: flex;
flex-direction: column;
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
transform: translateX(100%);
transition: transform 240ms cubic-bezier(.4, 0, .2, 1);
overflow-y: auto;
}
.side-drawer.side-drawer-open .side-drawer-panel {
transform: translateX(0);
}
.side-drawer-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
padding: 24px;
border-bottom: 1px solid var(--border-subtle);
flex-shrink: 0;
}
.side-drawer-body {
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
flex: 1;
}
.side-drawer-footer {
padding: 20px 24px;
border-top: 1px solid var(--border-subtle);
flex-shrink: 0;
}
.prompter-drawer .side-drawer-header .modal-desc {
margin: 6px 0 0;
}
.prompter-drawer {
--tny-ink: var(--text-main);
--tny-ink-soft: var(--text-soft);
--tny-muted: var(--text-dim);
--tny-panel: var(--bg-surface-elevated);
--tny-surface: var(--bg-surface);
--tny-border: var(--border-subtle);
}
.prompter-drawer-panel {
position: relative;
max-width: 460px;
background: var(--bg-base);
border-left-color: var(--border-subtle);
box-shadow: -24px 0 60px rgba(0, 0, 0, 0.55);
}
.prompter-drawer .side-drawer-header {
align-items: center;
padding: 24px;
border-bottom: 1px solid var(--border-subtle);
}
.prompter-drawer .side-drawer-header > div {
padding-right: 96px;
}
.prompter-drawer .modal-title {
margin: 0;
font-size: 15px;
font-weight: 700;
line-height: 1.25;
color: var(--text-main);
letter-spacing: -0.3px;
}
.prompter-drawer .modal-desc {
font-size: 13px;
line-height: 1.5;
color: var(--text-dim);
}
.prompter-drawer-close {
flex: none;
padding: 8px 18px;
font-size: 13px;
font-weight: 700;
}
.prompter-drawer-body {
padding: 24px;
gap: 14px;
}
.prompter-choice-card {
background: transparent;
border: 0;
border-bottom: 1px solid var(--border-subtle);
border-radius: 0;
padding: 0 0 18px;
}
.prompter-choice-card.club-locked {
opacity: 0.45;
filter: grayscale(0.45);
}
.prompter-choice-heading {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
color: var(--text-main);
font-weight: 700;
font-size: 15px;
}
.prompter-choice-heading img {
width: 16px;
height: 16px;
filter: invert(1);
opacity: 0.92;
}
.prompter-choice-actions {
display: flex;
gap: 10px;
}
.prompter-choice-actions .btn {
border-radius: 999px;
min-height: 38px;
padding: 8px 14px;
font-size: 13px;
font-weight: 700;
}
.prompter-choice-actions .btn-secondary {
background: var(--bg-surface);
border-color: var(--border-subtle);
color: var(--text-main);
}
.prompter-choice-actions .btn-secondary:hover {
background: var(--bg-surface-elevated);
border-color: var(--border-strong);
color: var(--text-main);
}
@media (max-width: 460px) {
.prompter-drawer-panel {
max-width: 100%;
}
.prompter-drawer .side-drawer-header,
.prompter-drawer-body {
padding-left: 20px;
padding-right: 20px;
}
.prompter-choice-actions {
flex-direction: column;
}
}
.courts-counter-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.courts-counter {
display: flex;
align-items: center;
gap: 14px;
}
.courts-circ-btn {
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: 50%;
border: 1px solid var(--border-subtle);
background: var(--bg-surface-elevated);
color: var(--text-main);
display: grid;
place-items: center;
font-size: 18px;
line-height: 1;
cursor: pointer;
}
.courts-circ-btn:hover { background: var(--bg-surface); }
.courts-counter-val {
font-size: 16px;
font-weight: 700;
min-width: 18px;
text-align: center;
}
.courts-field-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 40px;
gap: 8px;
align-items: center;
}
.courts-field-card {
display: block;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 12px 14px;
background: var(--bg-surface);
transition: border-color 0.15s ease;
}
.courts-field-card:focus-within { border-color: var(--text-main); }
.courts-field-label {
display: block;
font-size: 11px;
font-weight: 700;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.4px;
margin-bottom: 4px;
}
.courts-field-input {
display: block;
width: 100%;
border: none;
background: transparent;
padding: 0;
font-size: 14px;
color: var(--text-main);
outline: none;
font-family: var(--font-family);
}
.courts-field-input::placeholder { color: var(--text-faint); }
.courts-field-remove {
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
flex-shrink: 0;
background: transparent;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
display: grid;
place-items: center;
cursor: pointer;
}
.courts-field-remove img {
filter: invert(43%) sepia(73%) saturate(2863%) hue-rotate(334deg) brightness(102%) contrast(96%);
}
.courts-field-remove:hover {
background: var(--danger-bg, rgba(255,59,48,0.1));
border-color: var(--danger, #ff3b30);
}
.eh-team-row {
display: flex;
align-items: stretch;
gap: 14px;
}
.eh-score-box {
width: 72px;
flex-shrink: 0;
text-align: center;
font-size: 1.8rem;
font-weight: 800;
color: var(--text-main);
background: var(--bg-surface-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 0;
}
.eh-score-box:focus {
border-color: var(--border-focus);
outline: none;
}
.eh-score-box.eh-winning {
background: var(--accent-soft);
border-color: var(--accent-border);
color: var(--accent);
}
.eh-players-col {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.eh-player-pill {
width: 100%;
text-align: left;
padding: 12px 16px;
border-radius: var(--radius-md);
border: 1px solid var(--border-subtle);
background: transparent;
color: var(--text-main);
font-weight: 700;
font-size: 15px;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.eh-player-pill:hover {
background: var(--bg-surface-elevated);
}
.eh-player-pill.selected {
border-color: var(--accent);
background: var(--accent-soft);
color: var(--accent);
}
.eh-dupr-list {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 4px;
border-top: 1px solid var(--border-subtle);
}
.eh-dupr-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
}
.eh-dupr-name {
font-weight: 700;
font-size: 14px;
color: var(--text-main);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.eh-dupr-id-input {
font-size: 13px;
font-weight: 600;
color: var(--text-main);
flex-shrink: 0;
width: 110px;
text-align: right;
background: var(--bg-surface-elevated, #101114);
border: 1px solid var(--border-subtle);
border-radius: 6px;
padding: 6px 10px;
text-transform: uppercase;
}
.eh-dupr-id-input::placeholder {
color: var(--text-dim);
text-transform: none;
}
.eh-dupr-id-input:focus {
outline: none;
border-color: var(--accent);
}
.eh-dupr-id-input:disabled {
opacity: 0.4;
cursor: not-allowed;
}
@media (max-width: 720px) {
.side-drawer-panel {
max-width: 100%;
}
}
.modal-title {
font-size: 15px; /* Title tier — pairs with the existing 14px mobile override below */
margin-bottom: 6px;
font-weight: 700;
letter-spacing: -0.3px; /* DM Sans looks great tightened up slightly */
}
/* Emphasis variant for modal titles meant to stand out as the modal's hero
heading (Tournament Name, Session Details, paywall headline) rather than a
standard section title — Large tier instead of Title tier. */
.modal-title-emphasis { font-size: 18px; font-weight: 900; }
@media (max-width: 720px) {
.modal-title-emphasis { font-size: 16px; }
}
.modal-desc {
font-size: 13px;
color: var(--text-dim);
margin-bottom: 24px;
line-height: 1.5;
}
.wipe-account-card {
position: relative;
max-width: 460px;
padding: 34px;
border-color: rgba(255, 90, 95, 0.35);
}
.wipe-account-close {
position: absolute;
top: 16px;
right: 16px;
}
.wipe-account-mark {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 999px;
background: var(--danger-bg);
border: 1px solid rgba(255, 90, 95, 0.28);
color: var(--danger);
margin-bottom: 18px;
}
.wipe-account-mark img {
width: 18px;
height: 18px;
}
.wipe-account-title {
color: var(--danger);
margin-bottom: 8px;
}
.wipe-account-copy {
margin-bottom: 18px;
}
.wipe-account-label {
display: block;
color: var(--text-dim);
font-size: 12px;
font-weight: 700;
margin-bottom: 8px;
}
.wipe-account-input {
width: 100%;
}
.wipe-account-actions {
margin-top: 22px;
}
#wipe-account-confirm-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
#score-modal .score-modal-card {
position: relative;
width: 100%;
max-width: 460px;
padding: 36px;
border-radius: var(--radius-lg);
/* Match the Add Player modal surface exactly. */
border: 1px solid color-mix(in srgb, #141618 72%, transparent);
background: #0c0e0f;
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
}
#score-modal .score-modal-header {
margin-bottom: 18px;
}
#score-modal .score-modal-title {
font-size: 18px;
font-weight: 800;
margin-bottom: 0;
color: #f3f4f7;
letter-spacing: -0.04em;
}
#score-modal .score-modal-court {
margin-top: 8px;
text-align: center;
color: #8892a5;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
#score-modal .score-modal-desc {
margin-top: 10px;
margin-bottom: 0;
}
#score-modal .score-modal-close {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
}
#score-modal .score-buttons {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-bottom: 18px;
}
#score-modal .btn-score {
border: 0;
cursor: default;
transition: none;
}
#score-modal .btn-score:hover {
transform: none;
}
#score-modal .score-team-card {
padding: 12px 12px 12px;
min-height: 0;
height: 212px;
display: grid;
grid-template-rows: 1fr auto;
align-items: center;
gap: 12px;
border-radius: 8px;
box-shadow: none;
border: 1px solid transparent;
outline: none;
outline-offset: 0;
transform-origin: center;
position: relative;
}
#score-modal .score-team-card.is-selectable {
cursor: pointer;
}
#score-modal .score-team-card.is-selectable:hover {
transform: none;
}
#score-modal .score-team-card:focus,
#score-modal .score-team-card:focus-visible {
outline: none;
box-shadow: none;
}
#score-modal .score-buttons.has-selection .score-team-card.is-selectable:not(.is-selected) {
opacity: 0.58;
filter: saturate(0.78) brightness(0.9);
}
#score-modal .score-team-card.is-selected {
border: 1px solid rgba(203, 255, 24, 0.96);
outline: none;
transform: none;
transition: none;
box-shadow: none;
opacity: 1;
filter: none;
}
#score-modal .score-team-card.is-selected .score-input-shell {
border-color: var(--border-subtle);
box-shadow: none;
}
#score-modal .score-team-card-a {
background: #1f89b1;
}
#score-modal .score-team-card-b {
background: #ae4d41;
}
#score-modal .score-team-card.is-dupr-mode {
background: #0c0e0f;
}
#score-modal .btn-score strong {
font-size: 26px;
font-weight: 800;
color: #fff;
width: 100%;
text-align: center;
line-height: 1.08;
letter-spacing: -0.04em;
white-space: pre-line;
min-height: 0;
margin-top: 0;
display: flex;
align-items: center;
justify-content: center;
align-self: stretch;
padding: 10px 0 4px;
}
#score-modal .score-input-shell {
width: 100%;
margin-top: auto;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: 8px;
padding: 8px;
min-height: 88px;
box-shadow: none;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
#score-modal .score-input-shell.is-empty {
background: var(--bg-surface-elevated);
border-color: var(--border-subtle);
}
#score-modal .score-input-shell.is-keypad-target {
border-color: var(--border-subtle);
box-shadow: none;
}
#score-modal .score-input-shell.is-keypad-target::after {
content: "";
position: absolute;
top: 20%;
bottom: 20%;
left: 50%;
width: 3px;
border-radius: 999px;
background: #f7f7f8;
pointer-events: none;
animation: score-modal-caret-blink 1s steps(1, end) infinite;
}
#score-modal .score-input-shell.is-keypad-target[data-score-length="1"]::after {
transform: translateX(clamp(6px, 2vw, 10px));
}
#score-modal .score-input-shell.is-keypad-target[data-score-length="2"]::after {
transform: translateX(clamp(10px, 3vw, 16px));
}
@keyframes score-modal-caret-blink {
0%, 45% { opacity: 1; }
46%, 100% { opacity: 0; }
}
#score-modal .score-input-shell.is-empty[data-score-hint]:not([data-score-hint=""])::before {
content: attr(data-score-hint);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
white-space: pre-line;
padding: 0 12px;
font-size: 15px;
line-height: 1.2;
font-weight: 600;
letter-spacing: -0.03em;
color: rgba(247,247,248,0.38);
pointer-events: none;
}
#score-modal .score-team-input {
background: transparent;
border: 0;
box-shadow: none;
min-height: 0;
height: auto;
width: 100%;
padding: 0 6px;
font-family: var(--font-display);
font-size: 50px;
font-weight: 800;
line-height: 1;
color: #f7f7f8;
caret-color: transparent;
transition: color 0.18s ease, opacity 0.18s ease;
}
#score-modal.score-numpad-disabled .score-team-input {
caret-color: currentColor;
}
#score-modal .score-team-input:focus {
border: 0;
box-shadow: none;
}
#score-modal .score-team-input::placeholder {
color: rgba(247,247,248,0.38);
}
#score-modal .score-team-input.has-long-placeholder::placeholder {
font-size: 0.34em;
letter-spacing: -0.03em;
}
#score-modal .score-input-shell[data-score-hint]:not([data-score-hint=""]) .score-team-input::placeholder {
color: transparent;
}
#score-modal .score-team-input.is-empty {
color: rgba(247,247,248,0.38);
}
#score-modal .score-numpad {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
width: 100%;
margin: -4px auto 14px;
padding: 0;
}
#score-modal .score-numpad .score-numpad-spacer {
min-height: 52px;
}
#score-modal .score-numpad button[data-score-key="1"] { grid-column: 1; grid-row: 1; }
#score-modal .score-numpad button[data-score-key="2"] { grid-column: 2; grid-row: 1; }
#score-modal .score-numpad button[data-score-key="3"] { grid-column: 3; grid-row: 1; }
#score-modal .score-numpad button[data-score-key="4"] { grid-column: 1; grid-row: 2; }
#score-modal .score-numpad button[data-score-key="5"] { grid-column: 2; grid-row: 2; }
#score-modal .score-numpad button[data-score-key="6"] { grid-column: 3; grid-row: 2; }
#score-modal .score-numpad button[data-score-key="7"] { grid-column: 1; grid-row: 3; }
#score-modal .score-numpad button[data-score-key="8"] { grid-column: 2; grid-row: 3; }
#score-modal .score-numpad button[data-score-key="9"] { grid-column: 3; grid-row: 3; }
#score-modal .score-numpad button[data-score-key="0"] { grid-column: 2; grid-row: 4; }
#score-modal .score-numpad button[data-score-key="backspace"] { grid-column: 4; grid-row: 1; }
#score-modal .score-numpad button[data-score-key="clear"] { grid-column: 4; grid-row: 2; }
#score-modal .score-numpad.hidden {
display: none;
}
#score-modal .score-numpad button {
min-height: 52px;
height: 52px;
padding: 0 8px;
border: 1px solid var(--border-subtle);
border-radius: 8px;
background: transparent;
color: var(--text-main);
font-family: var(--font-display);
font-size: 16px;
font-weight: 800;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
#score-modal .score-numpad button:hover,
#score-modal .score-numpad button:focus-visible {
background: var(--bg-surface-hover);
border-color: var(--border-strong);
}
#score-modal .score-numpad button:focus,
#score-modal .score-numpad button:focus-visible {
outline: none;
}
@media (hover: none), (pointer: coarse) {
#score-modal .score-numpad button:hover,
#score-modal .score-numpad button:focus,
#score-modal .score-numpad button:focus-visible {
background: transparent;
border-color: var(--border-subtle);
}
}
#score-modal .score-numpad button:active {
transform: scale(0.97);
}
#score-modal .score-numpad button[data-score-key="clear"] {
color: var(--text-dim);
font-size: 12px;
}
#score-modal .score-numpad button[data-score-key="backspace"] {
font-size: 20px;
line-height: 1;
}
#score-modal .score-modal-actions {
display: flex;
align-items: stretch;
gap: 10px;
}
#score-modal .score-dupr-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
justify-content: flex-start;
min-width: 124px;
min-height: 44px;
padding: 0 10px 0 12px;
border-radius: 999px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
color: #fff;
cursor: pointer;
user-select: none;
position: relative;
}
#score-modal .score-dupr-toggle input {
position: absolute;
opacity: 0;
pointer-events: none;
}
#score-modal .score-dupr-label {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.02em;
}
#score-modal .score-dupr-switch {
position: relative;
display: inline-grid;
grid-template-columns: 1fr 1fr;
align-items: center;
width: 64px;
height: 28px;
padding: 3px;
border-radius: 999px;
background: rgba(255,255,255,0.14);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
#score-modal .score-dupr-thumb {
position: absolute;
top: 3px;
left: 3px;
width: 28px;
height: 22px;
border-radius: 999px;
background: #2437bf;
box-shadow: 0 2px 8px rgba(0,0,0,0.22);
transition: transform 0.18s ease, background 0.18s ease;
}
#score-modal .score-dupr-option {
position: relative;
z-index: 1;
text-align: center;
font-size: 9px;
font-weight: 800;
letter-spacing: -0.02em;
color: rgba(255,255,255,0.68);
transition: color 0.18s ease;
}
#score-modal .score-dupr-toggle.is-off .score-dupr-option-off {
color: #ffffff;
}
#score-modal .score-dupr-toggle:not(.is-off) .score-dupr-option-on {
color: #ffffff;
}
#score-modal .score-dupr-toggle:not(.is-off) .score-dupr-thumb {
transform: translateX(0);
}
#score-modal .score-dupr-toggle.is-off .score-dupr-switch {
background: rgba(255,255,255,0.16);
}
#score-modal .score-dupr-toggle.is-off .score-dupr-thumb {
transform: translateX(30px);
background: #8b92a1;
}
#score-modal .score-dupr-toggle.is-off .score-dupr-label {
color: #c2c8d2;
}
#score-modal .score-save-btn {
flex: 1;
min-height: 52px;
border-radius: 8px;
font-size: 12px;
font-weight: 800;
letter-spacing: -0.03em;
background: #cbff18;
color: #020405;
}
#score-modal .score-save-btn:hover {
background: #d8ff48;
}
#score-modal .score-save-btn:disabled {
background: var(--border-strong);
color: var(--text-soft);
cursor: not-allowed;
}
/* Match complete modal — phone browsers often report wider CSS widths than the
old 720px breakpoint, so give touch devices their own layout tuning. */
@media (pointer: coarse) and (max-width: 900px), (hover: none) and (max-width: 900px) {
#score-modal.modal {
padding: 10px !important;
}
#score-modal .score-modal-card {
width: 100% !important;
max-width: 460px !important;
padding: 20px 18px 16px !important;
border-radius: var(--radius-lg) !important;
}
#score-modal .score-modal-header {
margin-bottom: 14px !important;
}
#score-modal .score-modal-title {
font-size: 17px !important;
}
#score-modal .score-modal-close {
top: 12px !important;
right: 12px !important;
width: 36px !important;
height: 36px !important;
}
#score-modal .score-buttons {
gap: 12px !important;
margin-bottom: 22px !important;
align-items: start !important;
}
#score-modal .score-team-card {
min-height: 0 !important;
height: 132px !important;
padding: 12px 10px 10px !important;
gap: 6px !important;
border-radius: 8px !important;
}
#score-modal .team-badge {
font-size: 10px !important;
}
#score-modal .btn-score strong {
font-size: clamp(22px, 5vw, 30px) !important;
line-height: 1.08 !important;
min-height: 0 !important;
margin-top: 0 !important;
}
#score-modal .score-input-shell {
padding: 5px !important;
border-width: 1px !important;
border-radius: 8px !important;
min-height: 46px !important;
}
#score-modal .score-numpad {
gap: 5px !important;
width: 100% !important;
margin-bottom: 10px !important;
padding: 0 !important;
}
#score-modal .score-numpad button {
min-height: 48px !important;
height: 48px !important;
font-size: 15px !important;
}
#score-modal .score-numpad .score-numpad-spacer {
min-height: 48px !important;
}
#score-modal .score-team-input {
min-height: 0 !important;
height: auto !important;
width: 100% !important;
padding: 0 4px !important;
font-size: clamp(30px, 6vw, 44px) !important;
line-height: 1 !important;
}
#score-modal .score-modal-actions {
gap: 12px !important;
align-items: stretch !important;
}
#score-modal .score-dupr-toggle {
min-width: 120px !important;
min-height: 40px !important;
padding: 0 9px 0 11px !important;
}
#score-modal .score-dupr-label {
font-size: 10px !important;
}
#score-modal .score-save-btn {
min-height: 40px !important;
font-size: 13px !important;
border-radius: 8px !important;
}
}
@media (min-width: 721px) {
#score-modal .score-modal-card {
width: 100% !important;
max-width: 460px !important;
padding: 36px !important;
border-radius: var(--radius-lg) !important;
}
}
/* --- AUTH / SPLASH SCREEN --- */
.splash-screen {
position: fixed; inset: 0;
background: var(--bg-base);
z-index: 9999;
display: flex; align-items: stretch; justify-content: center;
}
/* Cross-device auth revocation notice. Keep this independent of the auth
form so a stale app shell cannot flash behind the message. */
.session-ended-screen {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
min-height: 100svh;
z-index: 20000;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
box-sizing: border-box;
padding: max(32px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
background: #000;
color: #fff;
}
.session-ended-card {
width: min(100%, 520px);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.session-ended-icon {
width: 64px;
height: 64px;
display: grid;
place-items: center;
margin-bottom: 28px;
color: #fff;
}
.session-ended-icon img {
width: 58px;
height: 58px;
filter: brightness(0) invert(1);
}
.session-ended-card h1 {
margin: 0;
color: #fff;
font-size: clamp(25px, 4vw, 36px);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1.1;
}
.session-ended-message {
max-width: 420px;
margin: 18px 0 0;
color: rgba(255, 255, 255, 0.68);
font-size: 15px;
line-height: 1.6;
}
.session-ended-continue {
min-height: 42px;
margin-top: 32px;
padding: 0 20px;
border: 1px solid #fff;
border-radius: 999px;
background: #fff;
color: #070707;
cursor: pointer;
font: inherit;
font-size: 13px;
font-weight: 700;
transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.session-ended-continue:hover {
border-color: #e8e8e8;
background: #e8e8e8;
}
.session-ended-continue:active {
transform: translateY(1px);
}
.session-ended-continue:focus-visible {
outline: 3px solid rgba(255, 255, 255, 0.9);
outline-offset: 3px;
}
@media (max-height: 600px) {
.session-ended-icon { margin-bottom: 18px; }
.session-ended-message { margin-top: 12px; }
.session-ended-continue { margin-top: 20px; }
}
/* V2 split-panel: brand left + form right */
.auth-split {
display: flex;
width: 100%;
height: 100%;
}
.auth-brand-panel {
flex: 0 0 42%;
background: var(--bg-surface);
border-right: 1px solid var(--border-subtle);
display: flex;
flex-direction: column;
padding: 56px 48px;
position: relative;
overflow: hidden;
}
.auth-brand-panel::before {
content: '';
position: absolute;
top: -120px; left: -120px;
width: 400px; height: 400px;
border-radius: 50%;
background: rgba(197,245,0,0.10);
pointer-events: none;
}
.auth-brand-inner {
display: flex;
flex-direction: column;
height: 100%;
}
.auth-brand-logo {
margin-bottom: 40px;
}
.auth-brand-logo img {
height: 38px;
width: auto;
object-fit: contain;
}
.auth-brand-headline {
font-family: var(--font-display);
font-size: 24px;
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.04em;
color: var(--text-main);
margin-bottom: 16px;
}
.auth-brand-sub {
font-size: 15px;
color: var(--text-dim);
line-height: 1.6;
margin-bottom: 36px;
}
.auth-brand-features {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: auto;
}
.auth-brand-feature {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 13px;
color: var(--text-soft);
line-height: 1.4;
}
.auth-brand-feature-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
margin-top: 6px;
flex-shrink: 0;
}
.auth-testimonial {
margin-top: 40px;
padding: 20px;
background: var(--bg-surface-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
}
.auth-testimonial-text {
font-size: 13px;
color: var(--text-soft);
line-height: 1.6;
font-style: italic;
margin-bottom: 12px;
}
.auth-testimonial-author {
font-size: 11px;
font-weight: 600;
color: var(--text-dim);
}
.auth-testimonial-author span {
color: var(--accent);
}
/* Right: form panel */
.auth-form-panel {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
overflow-y: auto;
}
.splash-card {
width: 100%;
max-width: 400px;
background: transparent;
padding: 0;
}
/* Mobile: hide brand panel, stack form full-screen */
@media (max-width: 800px) {
.auth-brand-panel { display: none !important; }
.auth-form-panel {
padding: 32px 20px;
background: var(--bg-base);
}
.splash-card {
max-width: 420px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
padding: 32px 24px;
border-radius: var(--radius-lg);
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
}
.splash-logo-img { height: 42px; width: auto; object-fit: contain; margin: 0 auto 16px; display: block; }
.splash-subtitle { color: var(--text-dim); }
.splash-input-group { text-align: left; margin-bottom: 20px; }
/* Industry Standard Line Divider */
.auth-divider {
display: flex;
align-items: center;
text-align: center;
margin: 24px 0;
color: var(--text-dim);
font-size: 11px;
font-weight: 600;
}
.auth-divider::before, .auth-divider::after {
content: '';
flex: 1;
border-bottom: 1px solid var(--border-subtle);
}
.auth-divider span { padding: 0 12px; }
/* Proper Google Button */
.btn-google {
width: 100%;
background: #ffffff;
color: #18181b;
border: 1px solid #d4d4d8;
padding: 12px;
font-weight: 600;
font-size: 15px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
transition: all 0.2s ease;
}
.btn-google:hover { background: #f4f4f5; border-color: #a1a1aa; }
/* Premium Underline Links */
.auth-link {
color: var(--text-main);
text-decoration: underline;
text-decoration-color: var(--border-subtle);
text-underline-offset: 4px;
transition: all 0.2s ease;
font-weight: 600;
}
.auth-link:hover {
color: var(--accent);
text-decoration-color: var(--accent);
}
/* Setup modal sections */
.setup-section { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; }
.setup-section-header { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--bg-surface-elevated); font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); border-bottom: 1px solid var(--border-subtle); }
.setup-section-header i { opacity: 0.7; }
.setup-section-body { padding: 16px; }
.setup-section-plain {
border: none;
border-radius: 0;
overflow: visible;
background: transparent;
margin-bottom: 22px;
}
.setup-section-plain .setup-section-header {
padding: 0;
margin-bottom: 14px;
background: transparent;
border-bottom: none;
}
.setup-section-plain .setup-section-body {
padding: 0;
}
#view-setup .setup-section {
border: none !important;
border-radius: 0 !important;
overflow: visible !important;
background: transparent !important;
box-shadow: none !important;
}
#view-setup .setup-section-header {
padding: 0 !important;
margin-bottom: 14px !important;
background: transparent !important;
border-bottom: none !important;
}
#view-setup .setup-section-body {
padding: 0 !important;
}
/* Type scale (see FONT_SIZE.md): Large tier for the modal title, Body for its
subtitle, Title tier for the DUPR toggle / logic card headings, Small tier
for their secondary copy. Scoped to #setup-modal (New Session) only — the
Tournament setup modal shares some of these class names and is intentionally
left on its existing sizing. Desktop default here, ≤720px override below. */
#setup-modal .setup-section-header { font-size: 11px; }
.setup-modal-title { font-size: 18px; font-weight: 900; font-style: italic; letter-spacing: -1px; color: #fff; }
.setup-modal-subtitle { font-size: 13px; margin-top: 2px; }
.dupr-toggle-title { font-size: 15px; font-weight: 800; color: #fff; letter-spacing: 0.2px; }
.dupr-toggle-desc { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.setup-logic-card-title { font-size: 15px; }
.setup-logic-card-desc { font-size: 13px; }
.setup-stay-limit-label { font-size: 13px; }
.setup-stay-limit-input { font-size: 13px; }
.setup-stay-limit-card {
position: absolute;
left: 20px;
right: 20px;
bottom: 18px;
margin-top: 0;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.08);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
text-align: left;
}
.setup-stay-limit-card .setup-stay-limit-label {
color: var(--text-main);
font-weight: 700;
margin: 0;
flex: 1;
}
/* .setup-stay-limit-card is position:absolute (pinned to the bottom of the
card) so it doesn't push layout when it appears/disappears on select —
but that means it overlaps the description paragraph instead of the card
growing to fit both. Simplest fix: hide the description once a card's
own max-wins control is showing, rather than trying to reflow around it. */
.tourney-type-card:has(.setup-stay-limit-card:not(.hidden)) .setup-logic-card-desc {
display: none;
}
.setup-stay-limit-card .setup-stay-limit-input {
width: 68px;
min-width: 68px;
height: 38px;
padding: 0;
text-align: center;
font-weight: 700;
flex-shrink: 0;
}
#setup-modal .splash-input-group label { font-size: 11px; }
#view-setup .splash-input-group label {
display: block;
margin-bottom: 8px;
}
/* FONT_SIZE.md generic type-scale utilities. Use these on any one-off element
(modal copy, labels, hints) instead of an inline font-size — desktop value
here, ≤720px override below. Podium is exempt from the whole type system;
never apply these to podium elements. */
.fs-micro { font-size: 11px; }
.fs-small { font-size: 11px; }
.fs-body { font-size: 13px; }
.fs-title { font-size: 15px; }
.fs-large { font-size: 18px; }
@media (max-width: 720px) {
.fs-micro { font-size: 8px; }
.fs-small { font-size: 10px; }
.fs-body { font-size: 12px; }
.fs-title { font-size: 14px; }
.fs-large { font-size: 16px; }
}
.setup-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; align-items: start; }
.setup-modal-footer { position: sticky; bottom: -1px; z-index: 5; padding: 14px 0 0; margin: 0 -2px; background: linear-gradient(to top, var(--bg-surface, #0f0f0f) 60%, rgba(15,15,15,0)); }
.setup-modal-card { padding-bottom: 8px; }
.setup-modal-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.setup-modal-col > .setup-section { margin-bottom: 0; }
.setup-match-rules-row {
display: grid;
grid-template-columns: auto;
gap: 12px;
align-items: end;
}
.form-row-3col {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 120px;
gap: 15px;
}
.setup-date-time-dupr-row {
align-items: end;
}
.setup-dupr-field {
min-width: 0;
width: 100%;
justify-self: stretch;
}
.setup-dupr-field label {
text-align: left;
}
.setup-fee-row {
margin-top: 15px;
}
.setup-fee-controls {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 15px;
align-items: end;
}
.setup-fee-mode-wrap {
min-width: 0;
}
.setup-fee-mode-wrap > .modal-input,
.setup-fee-amount-wrap .modal-input,
#setup-fee-amount-wrap .modal-input {
width: 100%;
}
#setup-fee-amount-wrap {
margin-top: 0 !important;
min-width: 0;
}
#setup-fee-amount-wrap label {
display: block;
}
.setup-courts-field {
width: 100%;
}
.setup-courts-field .modal-input {
width: 100%;
text-align: center;
padding-left: 0;
padding-right: 0;
}
.setup-courts-container {
padding: 0;
overflow: hidden;
}
.setup-courts-editor {
display: grid;
gap: 0;
}
.setup-courts-editor-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 64px;
padding: 14px 22px;
}
.setup-courts-editor-header label {
margin: 0;
}
.setup-courts-heading {
color: var(--text-main);
font-size: 17px;
font-weight: 700;
}
.setup-court-count-control {
display: inline-flex;
align-items: center;
gap: 12px;
}
.setup-court-count-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid var(--border-subtle);
border-radius: 50%;
background: transparent;
color: var(--text-main);
font-size: 21px;
line-height: 1;
}
.setup-court-count-btn:hover:not(:disabled) {
background: var(--bg-surface-elevated);
}
.setup-court-count-btn:disabled {
cursor: not-allowed;
opacity: 0.35;
}
.setup-court-count-control .setup-court-count-btn {
width: 40px;
height: 40px;
border: none;
border-radius: var(--radius-sm);
background: transparent;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.setup-court-count-control .setup-court-count-btn:hover:not(:disabled) {
background: var(--bg-surface-hover);
}
.setup-court-count-control .setup-court-count-btn:focus-visible {
outline: 2px solid var(--accent-border);
outline-offset: 2px;
}
#setup-courts-count {
min-width: 24px;
color: var(--text-main);
font-family: var(--font-mono);
font-size: 14px;
font-weight: 700;
text-align: center;
}
.setup-court-fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
padding: 16px 20px 20px;
}
.setup-court-fields-single {
grid-template-columns: minmax(0, 382px);
justify-content: center;
}
.setup-court-fields-single .setup-court-row {
width: 100%;
max-width: 382px;
}
.setup-court-row {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
min-height: 220px;
padding: 16px;
border: 0;
border-radius: var(--radius-md);
background: var(--bg-surface-elevated);
}
.setup-court-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.setup-court-card-header .setup-court-name-wrap {
flex: 1 1 auto;
}
.setup-court-preview {
display: flex;
flex: 1 1 auto;
min-height: 86px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
border: 1px dashed var(--border-subtle);
border-radius: var(--radius-md);
color: var(--text-dim);
font-size: 13px;
text-align: center;
}
.setup-court-preview img {
width: 26px;
height: 26px;
filter: invert(1);
opacity: 0.9;
}
.setup-court-card-footer {
min-height: 28px;
}
.setup-court-card-footer:empty {
display: none;
}
.setup-court-row .modal-input {
width: 100%;
min-height: 36px;
padding: 0 36px 0 0;
border: 0;
background: transparent;
color: var(--text-main);
font-family: var(--font-mono);
font-size: 16px;
font-weight: 700;
}
.setup-court-row .setup-court-name-input {
/* Fill the name wrapper; the edit affordance is positioned inside it and
the input padding keeps long names clear of that icon. */
width: 100%;
box-sizing: border-box;
}
.setup-court-name-wrap {
position: relative;
min-width: 0;
width: 100%;
}
.setup-court-edit-icon {
position: absolute;
right: 12px;
top: 50%;
width: 15px;
height: 15px;
transform: translateY(-50%);
filter: invert(72%) sepia(8%) saturate(489%) hue-rotate(180deg) brightness(86%) contrast(88%);
opacity: 0.38;
pointer-events: none;
}
.setup-court-remove {
position: static;
flex: 0 0 36px;
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
transform: none;
background: transparent;
border-color: transparent;
}
.setup-court-remove img {
filter: invert(43%) sepia(73%) saturate(2863%) hue-rotate(334deg) brightness(102%) contrast(96%);
}
.setup-court-remove:disabled img {
filter: invert(52%) sepia(7%) saturate(502%) hue-rotate(179deg) brightness(88%) contrast(87%);
opacity: 0.5;
}
.setup-court-remove:hover {
background: transparent;
border-color: transparent;
}
.setup-court-pin-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding-top: 8px;
}
.setup-court-pin-row label {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--text-dim);
cursor: pointer;
font-size: 12px;
}
.setup-config-row {
margin-top: 22px;
}
.setup-config-options {
display: grid;
grid-template-columns: 210px minmax(0, 1fr);
gap: 15px;
align-items: end;
margin-top: 18px;
justify-content: start;
}
.setup-scoring-type-field {
width: 210px;
min-width: 0;
}
.setup-dupr-under-date {
width: max-content;
margin-top: 22px;
margin-bottom: 0;
}
.setup-fee-under-time {
margin-top: 15px;
margin-bottom: 0;
}
.input-currency-wrap {
position: relative;
}
.input-currency-wrap .modal-input {
padding-left: 26px;
}
.input-currency-sign {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--text-dim);
font-size: 13px;
font-weight: 600;
pointer-events: none;
}
#setup-step-3 .setup-config-row {
display: block;
}
#setup-step-3 .setup-dupr-field {
justify-self: start;
width: max-content;
}
#setup-step-3 .setup-dupr-field label {
text-align: left;
}
.setup-dupr-inline {
min-height: 52px;
height: 52px;
width: 100%;
padding: 0 14px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--bg-base);
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 10px;
box-sizing: border-box;
user-select: none;
-webkit-user-select: none;
}
#setup-step-1 .modal-input,
#setup-step-1 .date-popup-trigger,
#setup-step-1 .setup-dupr-inline,
#setup-step-1 .input-currency-wrap {
min-height: 52px;
height: 52px;
box-sizing: border-box;
}
#setup-step-1 .date-popup-trigger,
#setup-step-1 .modal-input {
display: flex;
align-items: center;
}
#setup-step-1 .input-currency-wrap {
display: flex;
align-items: center;
}
#setup-step-1 #setup-time {
display: block;
}
.setup-dupr-field {
align-self: end;
}
.setup-dupr-title {
font-size: 12px;
font-weight: 700;
color: #f0f3f8;
line-height: 1;
}
.setup-dupr-segmented {
position: relative;
display: inline-grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 4px;
min-width: 116px;
height: 36px;
padding: 4px;
border-radius: 999px;
background: rgba(255,255,255,0.10);
box-sizing: border-box;
flex: 0 0 auto;
}
.setup-dupr-segmented input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.setup-dupr-segment {
position: relative;
z-index: 1;
min-width: 50px;
height: 28px;
border: 0;
border-radius: 999px;
background: transparent;
color: #a5aebb;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: color 0.18s ease, background-color 0.18s ease;
}
.setup-dupr-segmented:has(input:checked) .setup-dupr-segment-yes,
.setup-dupr-segmented:has(input:not(:checked)) .setup-dupr-segment-no {
background: #2f47df;
color: #ffffff;
}
.setup-dupr-segmented:has(input:checked) .setup-dupr-segment-no,
.setup-dupr-segmented:has(input:not(:checked)) .setup-dupr-segment-yes {
color: #a5aebb;
}
.setup-step-shell {
width: 100%;
margin-inline: auto;
margin-top: 28px;
}
.setup-step-shell-sm {
max-width: 640px;
}
.setup-step-shell-courts {
max-width: 820px;
margin-top: 0;
}
/* Category 1 / Category 2 steps use a two-column layout (name/DUPR/fee on the
left, stacking logic cards on the right) — wider than the other steps to
give the 2x2 logic-card grid room on the right. */
.setup-step-shell-cat {
max-width: 820px;
}
.setup-cat-columns {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 28px;
align-items: start;
}
#view-setup > .mb-15 {
max-width: 640px;
margin-inline: auto;
}
@media (min-width: 1025px) {
#view-setup {
padding-top: 22px;
}
#setup-step-1 {
height: auto;
padding-bottom: 0;
}
#setup-step-1 .setup-group-body {
max-height: none;
overflow: visible;
padding-bottom: 0;
}
}
.setup-group {
margin-bottom: 22px;
}
.setup-group-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
font-size: 11px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-dim);
}
.setup-group-body {
padding: 0;
}
#setup-step-1,
#setup-step-2,
#setup-step-3,
#setup-step-cat1,
#setup-step-cat2,
#setup-step-review {
position: relative;
height: auto;
min-height: 0;
padding-bottom: 0;
box-sizing: border-box;
}
.setup-finish-inline {
margin-top: 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
position: sticky;
bottom: 0;
padding: 16px 0 20px;
background: linear-gradient(to top, var(--bg-base) 60%, rgba(11,11,14,0));
z-index: 5;
}
/* Legacy per-step footers remain in the step markup for compatibility, but
the live controls now render in the shared sibling bottom bar. */
#view-setup > [id^="setup-step-"] > .setup-finish-inline {
display: none !important;
}
.setup-bottom-bar {
margin-top: auto;
}
.setup-bottom-actions {
justify-content: flex-end;
margin-left: auto;
}
/* Keep the live shared footer aligned with the wizard's Start Session control.
Back, Next, and Start Session should all occupy the same action width instead
of changing size based on their label. */
.setup-bottom-bar #setup-bottom-back,
.setup-bottom-bar button[data-setup-footer-step],
.setup-bottom-bar .setup-finish-group > .btn-primary {
width: 220px;
min-width: 220px;
max-width: 220px;
}
.setup-bottom-bar .setup-finish-group {
display: flex;
align-items: center;
gap: 10px;
}
.setup-bottom-bar .setup-save-session-link {
border: 1px solid rgba(255, 255, 255, 0.10);
background: var(--bg-surface-elevated);
color: var(--text-main);
padding: 0 18px;
}
.setup-bottom-bar .setup-save-session-link:hover {
background: var(--bg-surface-hover);
color: var(--text-main);
}
.setup-bottom-bar .es-footer-action strong {
font-weight: 600;
}
.setup-finish-inline-end {
justify-content: flex-end;
}
.setup-finish-inline-split {
justify-content: space-between;
}
.setup-next-button {
min-width: 220px;
width: 220px;
max-width: 100%;
padding-inline: 40px;
}
/* Sticky to the bottom of the viewport (not the step container) — this is
what keeps Back/Next/Start in the same on-screen spot across every step
regardless of how tall that step's own content is, now that the step
containers themselves are content-height (no internal scroll, no fixed
container height forcing them into fixed alignment the old way). */
#setup-step-1 > .setup-finish-inline,
#setup-step-2 > .setup-finish-inline,
#setup-step-3 > .setup-finish-inline,
#setup-step-cat1 > .setup-finish-inline,
#setup-step-cat2 > .setup-finish-inline,
#setup-step-review > .setup-finish-inline {
position: sticky;
left: auto;
bottom: 0;
transform: none;
width: 100%;
max-width: 640px;
margin-inline: auto;
justify-content: space-between !important;
align-items: end;
background: linear-gradient(to top, var(--bg-base) 60%, rgba(11,11,14,0));
padding: 16px 0 20px;
margin-top: 24px;
z-index: 5;
}
#setup-step-cat1 > .setup-finish-inline,
#setup-step-cat2 > .setup-finish-inline {
max-width: 820px;
}
#setup-step-1 > .setup-finish-inline {
display: grid;
grid-template-columns: minmax(0, 1fr) 220px;
gap: 16px;
}
#setup-step-2 > .setup-finish-inline,
#setup-step-cat1 > .setup-finish-inline,
#setup-step-cat2 > .setup-finish-inline {
display: grid;
grid-template-columns: auto 220px;
column-gap: 16px;
}
/* Step 3 and the Category Play Review step both put a "Save Session" text
link right beside Start Session — both sit together in their own group on
the right, Back stays on the left. */
#setup-step-3 > .setup-finish-inline,
#setup-step-review > .setup-finish-inline {
display: grid;
grid-template-columns: auto auto;
column-gap: 12px;
}
.setup-finish-group {
display: flex;
align-items: center;
gap: 18px;
}
.setup-save-session-link {
background: none;
border: none;
padding: 0;
color: var(--text-dim);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: color 0.15s ease;
}
.setup-save-session-link:hover { color: var(--text-main); }
#setup-step-1 .setup-group-body,
#setup-step-cat1 .setup-group-body,
#setup-step-cat2 .setup-group-body,
#setup-step-3 .setup-group-body {
max-height: none;
overflow: visible;
padding-bottom: 0;
}
.setup-config-note {
align-self: end;
margin: 0;
color: var(--text-dim);
font-size: 13px;
line-height: 44px;
text-align: left;
}
#setup-step-1 > .setup-finish-inline > #setup-next-button {
justify-self: end;
}
.setup-finish-inline-step1 {
gap: 16px;
}
.setup-back-button {
justify-self: start;
}
.setup-finish-button {
width: auto;
min-width: 220px;
max-width: 220px;
min-height: 58px;
padding: 0 24px;
white-space: normal;
line-height: 1.2;
box-shadow: none;
}
.setup-logic-grid {
width: 100%;
}
.setup-logic-grid .tourney-type-card {
min-height: 190px;
height: 190px;
overflow: hidden;
}
.setup-logic-grid .tourney-type-card[data-logic="winners_stay"],
.setup-logic-grid .tourney-type-card[data-logic="split_winners"] {
position: relative;
}
.setup-logic-grid .tourney-type-card.logic-locked,
.rotation-grid .logic-option.logic-locked {
opacity: 0.42;
filter: grayscale(1);
border-color: var(--border-subtle) !important;
background: rgba(255, 255, 255, 0.025) !important;
}
.setup-logic-grid .tourney-type-card.logic-locked:hover,
.rotation-grid .logic-option.logic-locked:hover {
opacity: 0.58;
border-color: var(--border-subtle) !important;
box-shadow: none !important;
}
.setup-logic-grid .tourney-type-card.logic-locked.selected,
.rotation-grid .logic-option.logic-locked.active {
opacity: 0.58;
}
@media (max-width: 900px) { .setup-modal-grid { grid-template-columns: 1fr; } }
.form-row-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.form-row-3col {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(220px, 0.9fr);
gap: 15px;
}
@media (max-width: 720px) {
#add-modal .add-player-modal-footer {
margin-left: -20px;
margin-right: -20px;
margin-bottom: -20px;
padding: 16px 20px calc(24px + var(--safe-bottom));
}
#add-modal .add-player-single-panel .add-player-modal-footer {
margin-top: 20px;
}
#view-setup {
padding-inline: 18px;
}
#view-setup > .mb-15 {
margin-bottom: 8px;
}
.setup-step-shell {
margin-top: 8px;
}
#view-setup > .mb-15,
.setup-step-shell-sm,
#setup-step-1 > .setup-finish-inline,
#setup-step-2 > .setup-finish-inline,
#setup-step-3 > .setup-finish-inline,
#setup-step-cat1 > .setup-finish-inline,
#setup-step-cat2 > .setup-finish-inline,
#setup-step-review > .setup-finish-inline {
max-width: calc(100vw - 48px);
}
#setup-step-1,
#setup-step-2,
#setup-step-3,
#setup-step-cat1,
#setup-step-cat2,
#setup-step-review {
height: auto;
min-height: 0;
padding-bottom: 0;
}
/* Step 1 stays compact on phones: the paired fields share rows instead of
turning the event-details form into a long single-column scroll. */
#view-setup .form-row-2col {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-bottom: 0 !important;
}
#setup-step-1 .setup-group-body {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 10px;
row-gap: 12px;
}
#setup-step-1 .setup-group-body > .splash-input-group.mb-15,
#setup-step-1 .setup-group-body > .form-row-2col {
grid-column: 1 / -1;
margin-bottom: 0 !important;
}
#setup-step1-datetime-row,
#setup-step1-fee-row {
display: contents !important;
}
#setup-step1-fee-row {
margin-top: 0;
}
#setup-step-1 .setup-date-time-dupr-row {
column-gap: 10px !important;
row-gap: 0 !important;
align-items: stretch !important;
}
#setup-step-1 .setup-fee-controls {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
column-gap: 10px !important;
row-gap: 0 !important;
align-items: end !important;
}
#setup-step-1 .setup-date-time-dupr-row > .splash-input-group,
#setup-step-1 .setup-fee-controls > .splash-input-group,
#setup-step-1 .setup-fee-controls > #setup-fee-amount-wrap {
min-width: 0 !important;
}
#setup-step-1 .setup-dupr-field {
justify-self: stretch !important;
}
#setup-step-1 .setup-dupr-inline {
width: 100% !important;
justify-content: center !important;
gap: 6px !important;
padding-inline: 8px;
}
#setup-step-1 .setup-dupr-title { display: none; }
#setup-step-1 .setup-dupr-segmented { min-width: 0; width: 116px; }
#setup-step-1 .setup-dupr-segment { min-width: 0; padding-inline: 6px; }
#setup-step-1 #setup-date-display,
#setup-step-1 #setup-time,
#setup-step-1 #btn-setup-fee-mode,
#setup-step-1 #setup-fee-amount-input {
width: 100% !important;
}
#view-setup #setup-fee-mode-menu,
#view-setup #setup-cat1-fee-mode-menu,
#view-setup #setup-cat2-fee-mode-menu {
min-width: 0 !important;
max-width: calc(100vw - 48px) !important;
box-sizing: border-box;
}
/* The Date control lives in a half-width grid cell, but its calendar is a
wizard-level surface on phones. Pull it out of that cell so the full
calendar is visible without being clipped by the form or footer. */
#setup-date-popup {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: var(--mobile-bottom-nav-height) !important;
width: auto !important;
max-width: none !important;
max-height: none !important;
overflow-y: auto;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
padding: 18px;
border-radius: 0;
border: none;
box-shadow: none;
z-index: 60 !important;
}
/* The picker is a modal surface, so lift its page stacking context above
the sticky topbar and wizard footer while keeping the bottom nav above
it as the app-level navigation escape hatch. */
.page:has(#setup-date-popup:not(.hidden)) {
position: relative;
z-index: 40;
}
#setup-date-popup .date-popup-header-label {
font-size: 18px;
}
#setup-date-popup .date-popup-nav-btn {
width: 32px;
height: 32px;
}
#setup-date-popup .date-popup-weekday {
font-size: 12px;
padding-top: 6px;
padding-bottom: 8px;
}
#setup-date-popup .date-popup-day {
font-size: 16px;
border-radius: 8px;
}
#setup-step-1 .modal-input,
#setup-step-1 .date-popup-trigger {
font-size: 14px !important;
}
#view-setup .modal-input,
#view-setup select.modal-input {
min-height: 48px;
height: 48px;
font-size: 16px;
}
#setup-step-1 .setup-group-body,
#setup-step-3 .setup-group-body,
#setup-step-cat1 .setup-group-body,
#setup-step-cat2 .setup-group-body {
max-height: none;
overflow: visible;
padding-bottom: 0;
}
#view-setup {
flex: 1 0 auto;
}
#setup-bottom-bar {
flex: 0 0 auto;
margin-top: 0;
padding-top: 12px;
padding-bottom: calc(12px + var(--safe-bottom));
}
#setup-bottom-bar .es-footer-action {
height: 36px;
min-height: 36px;
padding-inline: 16px;
font-size: 14px;
}
#setup-bottom-bar .setup-save-session-link {
display: none !important;
}
/* The Category 1/2 steps' two-column layout (name/DUPR/fee left, logic
cards right) stacks to a single column on mobile — name/DUPR/fee first,
logic cards below, same order as the desktop reading order. */
.setup-step-shell-cat {
max-width: calc(100vw - 48px);
}
.setup-cat-columns {
grid-template-columns: 1fr !important;
gap: 15px !important;
}
.setup-cat-col-left .setup-dupr-inline {
width: 100% !important;
justify-content: center !important;
gap: 6px !important;
}
.setup-cat-col-left [id^="btn-setup-cat"],
.setup-cat-col-left [id$="-fee-amount-input"] {
width: 100% !important;
}
#setup-step-1 > .setup-finish-inline,
#setup-step-2 > .setup-finish-inline,
#setup-step-3 > .setup-finish-inline,
#setup-step-cat1 > .setup-finish-inline,
#setup-step-cat2 > .setup-finish-inline,
#setup-step-review > .setup-finish-inline {
position: static;
left: auto;
bottom: auto;
transform: none;
width: 100%;
margin-top: 18px;
}
#setup-step-1 > .setup-finish-inline {
display: flex;
justify-content: flex-end !important;
gap: 12px;
}
#setup-step-2 > .setup-finish-inline,
#setup-step-cat1 > .setup-finish-inline,
#setup-step-cat2 > .setup-finish-inline {
display: flex;
justify-content: space-between !important;
}
/* Step 3 and Review's 2nd column each hold the Save Session link + Start
Session button together (.setup-finish-group) — the fixed 160px used
for step 2 only fit the button alone, so the extra "Save Session" text
overflowed the column and got clipped off the right edge. Size to
content instead. */
#setup-step-3 > .setup-finish-inline,
#setup-step-review > .setup-finish-inline {
display: flex;
justify-content: space-between !important;
column-gap: 8px;
}
.setup-finish-group {
gap: 8px;
}
.setup-save-session-link {
white-space: nowrap;
font-size: 12px;
}
#setup-step-3 .setup-finish-button,
#setup-step-review .setup-finish-button {
width: 140px;
min-width: 140px;
max-width: 140px;
padding-inline: 12px;
font-size: 14px;
}
#setup-step-3 .setup-back-button,
#setup-step-review .setup-back-button {
padding-inline: 14px;
}
.setup-next-button,
.setup-finish-button,
.setup-bottom-bar #setup-bottom-back,
.setup-bottom-bar button[data-setup-footer-step],
.setup-bottom-bar .setup-finish-group > .btn-primary {
width: 160px;
min-width: 160px;
max-width: 160px;
padding-inline: 20px;
}
.setup-bottom-bar #setup-bottom-back {
width: 80px;
min-width: 80px;
max-width: 80px;
padding-inline: 8px;
}
.setup-logic-grid {
grid-template-columns: 1fr !important;
max-height: none;
overflow: visible;
padding-bottom: 8px;
}
.setup-logic-grid .tourney-type-card {
display: grid !important;
grid-template-columns: 28px minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: 12px;
row-gap: 0;
align-content: center;
justify-items: start;
height: 72px;
min-height: 72px;
padding: 0 16px !important;
align-items: center;
justify-content: flex-start;
text-align: left;
border-radius: 8px;
}
.setup-logic-grid .tourney-type-card:has(.setup-stay-limit-card:not(.hidden)) {
height: 136px;
min-height: 136px;
grid-template-rows: auto auto auto;
row-gap: 4px;
align-content: center;
}
.setup-logic-grid .tourney-type-card img {
grid-column: 1;
grid-row: 1 / span 2;
width: 20px !important;
height: 20px !important;
margin: 0 !important;
}
.setup-logic-card-title {
grid-column: 2;
grid-row: 1;
font-size: 14px;
margin: 0 !important;
justify-content: flex-start !important;
text-align: left;
}
.setup-logic-card-desc {
grid-column: 2;
grid-row: 2;
display: block;
font-size: 11px;
line-height: 1.25;
margin: 3px 0 0 !important;
text-align: left;
}
.setup-stay-limit-card {
grid-column: 1 / -1;
grid-row: 3;
width: 100%;
justify-self: stretch;
margin-top: 8px;
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,0.08);
gap: 8px;
display: flex;
align-items: center;
justify-content: space-between;
}
.setup-stay-limit-card .setup-stay-limit-label {
font-size: 12px;
white-space: nowrap;
min-width: 0;
text-align: left;
}
.setup-stay-limit-card .setup-stay-limit-input {
height: 34px !important;
min-height: 34px !important;
width: 46px;
min-width: 46px;
font-size: 14px;
}
.setup-courts-container {
padding: 0;
}
.setup-court-row {
gap: 10px;
min-height: 0;
padding: 12px;
}
#setup-court-fields .setup-court-preview {
flex: 0 0 86px;
min-height: 86px;
}
#setup-court-fields .setup-court-card-footer {
min-height: 0;
}
.setup-court-fields {
grid-template-columns: 1fr;
}
.setup-court-row .modal-input {
min-height: 36px;
font-size: 16px;
padding-right: 36px;
}
.setup-court-row .setup-court-name-input {
width: 100%;
}
.setup-court-edit-icon {
right: 12px;
}
.setup-court-remove {
flex-basis: 34px;
width: 34px;
height: 34px;
min-width: 34px;
min-height: 34px;
}
.setup-config-options {
grid-template-columns: minmax(0, 170px) minmax(0, 1fr);
align-items: end;
gap: 12px;
}
.setup-scoring-type-field {
width: 170px;
}
.setup-config-note {
grid-column: 1 / -1;
line-height: 1.4;
}
}
@media (max-width: 400px) {
#setup-step-3 .setup-config-options {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
#setup-step-3 .setup-scoring-type-field {
width: 100% !important;
}
}
/* Info tooltip */
.info-tooltip { position: relative; display: inline-flex; align-items: center; cursor: help; }
.info-tooltip .tooltip-box { position: absolute; bottom: calc(100% + 6px); left: 0; background: var(--bg-surface-elevated); border: 1px solid var(--border-focus); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--text-main); white-space: pre-line; width: 260px; z-index: 9999; box-shadow: 0 8px 24px rgba(0,0,0,0.5); line-height: 1.6; font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease 0s, visibility 0s linear 0.15s; text-wrap: pretty; }
/* 300ms hover delay (the standard threshold for "did the cursor actually
stop here" vs. just passing over) so a quick incidental pass over the
icon doesn't pop the box open — only the show is delayed, hiding stays
instant. */
.info-tooltip:hover .tooltip-box { opacity: 1; visibility: visible; transition: opacity 0.15s ease 0.3s, visibility 0s linear 0.3s; }
.info-tooltip:focus .tooltip-box { opacity: 1; visibility: visible; transition: opacity 0.15s ease 0s, visibility 0s linear 0s; }
/* Use when the icon sits near the top of a scrollable/clipped container (a
drawer body, a sheet) and the default upward placement would render the
box off-screen or clipped by an ancestor's overflow. */
.info-tooltip .tooltip-box.tooltip-below { bottom: auto; top: calc(100% + 6px); }
/* Player add feedback flash */
@keyframes flashFade { 0%,100% { opacity:0; transform: translateY(4px); } 20%,80% { opacity:1; transform: translateY(0); } }
.setup-add-flash { font-size: 13px; color: #22c55e; font-weight: 700; animation: flashFade 1.8s ease forwards; display: inline-block; }
.end-title { font-size: 24px; font-style: italic; font-weight: 900; margin-bottom: 8px; }
/* End Session page — standings list (left) + podium (right) */
.es-session-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) {
.es-session-grid { grid-template-columns: 1fr; }
}
/* Podium stays in view while the (often much longer) player list scrolls —
same "sticky beside a scrolling column" pattern as .master-roster-toolbar,
including reusing --topbar-h so it sticks below the sticky .topbar instead
of overlapping it. align-items:start above (not stretch) is what gives the
grid area enough headroom for this to actually engage — see Sticky Footer
/ Scrollport Quirks in the HQ knowledge base for why that matters. Desktop
only: at the 900px breakpoint the grid stacks to one column, where a
sticky podium wouldn't make sense sitting above/below the list. */
@media (min-width: 901px) {
/* --es-tabs-h (kept in sync by renderEndSessionSummary, 0px when the
Category Play tabs aren't shown) stacks the podium's stick point below
the tabs bar's own sticky top:var(--topbar-h) — without this both
stuck at the identical offset and the podium's header row (Singles/
Doubles toggle, Save Image) ended up hidden behind the tabs. */
#es-podium-panel { position: sticky; top: calc(var(--topbar-h, 68px) + var(--es-tabs-h, 0px)); }
/* Category Play only (Open Play's End Session has no tabs, so this class
never gets added there) — the podium's header row (Singles/Doubles
toggle, Save Image) sat flush against the stuck tabs bar above it with
no breathing room. Also vertically centers the podium cards (not the
header row, which stays pinned at top) in the leftover space between
the tabs and #es-bottom-bar (~96px: its own padding + button height)
instead of them clustering at the top with dead space below. */
#es-podium-panel.es-podium-below-tabs {
padding-top: 16px;
display: flex;
flex-direction: column;
min-height: calc(100dvh - 53px - var(--es-tabs-h, 0px) - 96px);
}
#es-podium-panel.es-podium-below-tabs .es-podium {
margin-top: auto;
margin-bottom: auto;
}
}
/* Category Play's End Event preview switcher — Windows-Explorer-style folder
tabs so the host can flip between each category's standings before
ending. Tabs share the row's bottom border; the active tab's own bottom
border matches the page background, giving the "attached to the content
below it" folder-tab look instead of a plain segmented control. */
/* Sticks right below .topbar (same sticky-below-topbar pattern as
#session-lb-toolbar/#tourney-archive-sticky-toolbar) instead of scrolling
away with the player list beneath it — an opaque background is required
for a sticky element or the scrolling content shows through underneath. */
.es-category-tabs {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--border-subtle);
/* Sits directly under .topbar — its own margin-bottom:18px already gives
enough clearance, so no extra margin here (End Event only; every
other .topbar's own spacing is untouched). */
margin-top: 0;
margin-bottom: 8px;
position: sticky;
/* .topbar's height is a fixed, documented 53px (see the "THE topbar
height" comment on .topbar) — using that directly instead of
var(--topbar-h, 68px)'s 68px fallback, which only applies once the
app.ts ResizeObserver has actually measured .topbar and can otherwise
overshoot the real height, reading as an oversized gap once stuck. */
top: 53px;
z-index: 15;
background: var(--bg-base);
padding-top: 0;
}
.es-cat-tab {
appearance: none;
background: var(--bg-surface-elevated);
border: 1px solid var(--border-subtle);
border-bottom: none;
border-radius: 8px 8px 0 0;
color: var(--text-dim);
font-size: 13px;
font-weight: 600;
padding: 9px 18px;
cursor: pointer;
transform: translateY(1px);
transition: background 0.15s ease, color 0.15s ease;
}
.es-cat-tab:hover { color: var(--text-main); }
.es-cat-tab.active {
background: var(--bg-base);
border-bottom: 1px solid var(--bg-base);
color: var(--text-main);
}
/* Shown in #es-player-list / #es-podium-panel while switchEndEventCategoryTab
loads the other category's snapshot — same shimmer convention as other
loading placeholders in the app, sized to roughly match a real row so the
list doesn't jump when the actual data replaces it. */
.es-player-row-skeleton { gap: 16px; }
.skeleton-block {
border-radius: 4px;
background: linear-gradient(90deg, var(--bg-surface-elevated) 25%, var(--border-subtle) 50%, var(--bg-surface-elevated) 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.es-podium-loading { display: flex; align-items: center; justify-content: center; min-height: 240px; }
.es-podium-loading .spinner {
width: 28px;
height: 28px;
border: 3px solid rgba(197, 245, 0, 0.08);
border-top-color: var(--accent);
border-radius: 50%;
animation: loader-spin 0.9s infinite linear;
}
.es-session-left { display: flex; flex-direction: column; min-width: 0; }
.es-player-list { display: flex; flex-direction: column; }
.es-player-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 48px; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border-subtle); }
.es-player-row:last-child { border-bottom: none; }
.es-player-rank { font-size: 12px; font-weight: 700; color: var(--text-dim); text-align: center; }
.es-player-name { font-size: 14px; font-weight: 600; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-player-record { font-size: 12px; font-weight: 600; white-space: nowrap; }
.es-player-pct { font-size: 12px; font-weight: 700; color: var(--text-dim); text-align: right; }
/* End Session podium — dedicated classes (not the shared .podium-panel/
.podium-col used by the live Session Leaderboard page) so this can be
sized/tuned independently. Visually matches the downloadable podium PNG
(_drawPodiumCanvas in render-leaderboard.ts): gold/silver/bronze pedestal
accent bar + gradient fill, glowing medal-colored avatar ring, crown on
1st, and a "point diff" stat alongside win rate (the export shows both;
the old in-page version only showed win rate). */
.es-podium {
display: grid;
grid-template-columns: 1fr 1.18fr 1fr;
align-items: end;
gap: 18px;
padding: 20px 100px 0;
margin-bottom: 20px;
}
.es-pod-col { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.es-pod-col.is-second { padding-bottom: 166px; }
.es-pod-col.is-first { padding-bottom: 210px; }
.es-pod-col.is-third { padding-bottom: 134px; }
.es-pod-figure { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; text-align: center; width: 100%; }
.es-pod-crown { color: #ffc431; margin-bottom: 2px; filter: drop-shadow(0 1px 6px rgba(255, 196, 49, 0.35)); }
.es-pod-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--surface-3);
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
font-weight: 600;
color: var(--text-1);
white-space: nowrap;
line-height: 1;
border: 2px solid var(--border-strong);
}
.es-pod-col.is-first .es-pod-avatar { width: 76px; height: 76px; font-size: 21px; border-color: #ffc431; box-shadow: 0 0 0 4px rgba(255, 196, 49, 0.12); }
.es-pod-col.is-second .es-pod-avatar { border-color: #c5d1de; box-shadow: 0 0 0 3px rgba(180, 195, 210, 0.12); }
.es-pod-col.is-third .es-pod-avatar { border-color: #c47133; box-shadow: 0 0 0 3px rgba(192, 113, 51, 0.14); }
.es-pod-name { font-size: 14.5px; font-weight: 600; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.es-pod-col.is-first .es-pod-name { font-size: 16px; }
.es-pod-record { font-size: 12px; color: var(--text-2); display: flex; align-items: center; justify-content: center; width: 100%; white-space: nowrap; gap: 8px; }
.es-pod-record .pod-win { color: var(--success); font-weight: 600; }
.es-pod-record .pod-loss { color: var(--text-3); }
.es-pod-record .pod-sep { color: var(--text-4); }
.es-pod-pedestal {
position: absolute;
bottom: 0; left: 0; right: 0;
border: 1px solid var(--border);
8px 8px 8px 8px;
background: var(--surface-2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
overflow: hidden;
}
.es-pod-pedestal::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.es-pod-col.is-first .es-pod-pedestal { height: 192px; background: linear-gradient(180deg, rgba(255, 196, 49, 0.08) 0%, transparent 55%), var(--surface-2); border-color: rgba(255, 196, 49, 0.25); }
.es-pod-col.is-first .es-pod-pedestal::before { background: #ffc431; }
.es-pod-col.is-second .es-pod-pedestal { height: 148px; background: linear-gradient(180deg, rgba(180, 195, 210, 0.07) 0%, transparent 55%), var(--surface-2); border-color: rgba(180, 195, 210, 0.2); }
.es-pod-col.is-second .es-pod-pedestal::before { background: #c5d1de; }
.es-pod-col.is-third .es-pod-pedestal { height: 116px; background: linear-gradient(180deg, rgba(192, 113, 51, 0.08) 0%, transparent 55%), var(--surface-2); border-color: rgba(192, 113, 51, 0.22); }
.es-pod-col.is-third .es-pod-pedestal::before { background: #c47133; }
.es-pod-rank { font-size: 40px; font-weight: 800; line-height: 1; }
.es-pod-col.is-first .es-pod-rank { font-size: 52px; color: #ffc431; }
.es-pod-col.is-second .es-pod-rank { color: #c5d1de; }
.es-pod-col.is-third .es-pod-rank { color: #c47133; }
.es-pod-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.es-pod-col.is-first .es-pod-label { color: #ffc431; }
.es-pod-stat { font-size: 11.5px; color: var(--text-2); }
/* End Session stacks below the desktop breakpoint. Flatten the left content
wrapper so the details, podium, and player list can each occupy the full
available width in the intended mobile order. */
@media (max-width: 900px) {
#view-end-session .es-session-grid {
display: flex;
flex-direction: column;
width: 100%;
}
#view-end-session .es-session-left {
display: contents;
}
#view-end-session .es-session-left > .home-events-toolbar { order: 0; }
#view-end-session .es-session-left > .ps-view-meta-row { order: 1; }
#view-end-session #es-podium-panel {
order: 2;
width: 100%;
min-width: 0;
}
#view-end-session #es-player-list {
order: 3;
width: 100%;
max-width: none;
min-width: 0;
}
#view-end-session .es-player-row {
width: 100%;
box-sizing: border-box;
}
}
/* End Session on phones: show the podium first, then the player list, and
compact the three columns so the podium stays inside the phone width. */
@media (max-width: 720px) {
#view-end-session .es-session-grid {
display: flex;
flex-direction: column;
gap: 16px;
}
#view-end-session #es-podium-panel {
order: 2;
position: static;
width: 100%;
min-width: 0;
}
#view-end-session .es-session-left {
display: contents;
}
#view-end-session .es-session-left > .home-events-toolbar {
order: 0;
}
#view-end-session .es-session-left > .ps-view-meta-row {
order: 1;
}
#view-end-session .es-session-left > #es-player-list {
order: 3;
}
#view-end-session .es-pod-header-row {
flex-wrap: nowrap;
gap: 8px;
margin-bottom: 12px;
}
#view-end-session .podium-seg {
min-width: 0;
flex: 1 1 auto;
}
#view-end-session .podium-seg-btn {
gap: 4px;
padding: 6px 8px;
font-size: 11px;
}
#view-end-session .es-pod-export-btn {
flex: 0 0 auto;
margin-left: 0;
}
#view-end-session .es-podium {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px;
padding: 12px 4px 0;
margin-bottom: 8px;
}
#view-end-session .es-pod-col.is-second { padding-bottom: 94px; }
#view-end-session .es-pod-col.is-first { padding-bottom: 126px; }
#view-end-session .es-pod-col.is-third { padding-bottom: 76px; }
#view-end-session .es-pod-figure { margin-bottom: 14px; }
#view-end-session .es-pod-avatar {
width: 44px;
height: 44px;
font-size: 14px;
}
#view-end-session .es-pod-col.is-first .es-pod-avatar {
width: 56px;
height: 56px;
font-size: 17px;
}
#view-end-session .es-pod-name,
#view-end-session .es-pod-col.is-first .es-pod-name {
max-width: 100%;
font-size: 12px;
}
#view-end-session .es-pod-col.is-first .es-pod-name { font-size: 13px; }
#view-end-session .es-pod-record { font-size: 10px; gap: 4px; }
#view-end-session .es-pod-pedestal { border-radius: 8px 8px 6px 6px; }
#view-end-session .es-pod-col.is-first .es-pod-pedestal { height: 140px; }
#view-end-session .es-pod-col.is-second .es-pod-pedestal { height: 116px; }
#view-end-session .es-pod-col.is-third .es-pod-pedestal { height: 102px; }
#view-end-session .es-pod-rank { font-size: 28px; }
#view-end-session .es-pod-col.is-first .es-pod-rank { font-size: 36px; }
#view-end-session .es-pod-label { font-size: 9px; }
#view-end-session .es-pod-stat { font-size: 10px; line-height: 1.3; }
}
/* Past Session's podium is an on-page view, not a downloaded artifact. Keep
it on the main content width so the standings can breathe independently of
the sticky footer actions. */
.past-session-podium-container {
width: 100%;
box-sizing: border-box;
margin: 20px 0 28px;
padding: 20px 24px 8px;
border: 1px solid var(--border-subtle);
border-radius: 8px;
background: var(--bg-surface);
}
.past-session-podium-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 4px;
}
.past-session-podium-heading h3 {
margin: 0;
color: var(--text-main);
font-size: 18px;
}
.past-session-podium-heading span {
display: block;
margin-top: 4px;
color: var(--text-dim);
font-size: 13px;
}
.past-session-podium-empty {
padding: 24px 0;
color: var(--text-dim);
text-align: center;
}
.past-session-podium-container .es-podium {
margin-bottom: 10px;
}
/* Podium mode replaces the Past Session detail surface instead of placing a
podium card between the search controls and match log. */
#view-past-session.past-session-podium-mode > #ps-view-toolbar,
#view-past-session.past-session-podium-mode > #ps-view-match-log {
display: none !important;
}
#view-past-session.past-session-podium-mode > #ps-view-category-tabs {
display: flex !important;
}
#view-past-session.past-session-podium-mode > #past-session-podium-container {
display: block !important;
min-height: 0;
width: min(100%, 1340px);
max-width: 1340px;
margin: 0 auto;
padding: 24px 0 24px;
border: 0;
border-radius: 0;
background: transparent;
}
#view-past-session.past-session-podium-mode .es-podium {
width: 100%;
max-width: none;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 600px) {
.past-session-podium-container {
padding: 16px 12px 4px;
}
.past-session-podium-container .es-podium {
gap: 8px;
}
.past-session-podium-container .es-pod-name {
font-size: 12px;
}
.past-session-podium-container .es-pod-col.is-first .es-pod-name {
font-size: 13px;
}
.past-session-podium-container .es-pod-record,
.past-session-podium-container .es-pod-stat {
font-size: 10px;
}
}
/* Doubles pairs — paired avatars, toggled against the singles podium via
the Singles/Doubles seg control (see renderEndSessionSummary in queue-game.ts). */
.es-pod-duo { display: flex; align-items: center; justify-content: center; }
.es-pod-duo .es-pod-avatar:nth-child(2) { margin-left: -16px; }
.es-pod-col.is-first .es-pod-duo .es-pod-avatar:nth-child(2) { margin-left: -20px; }
.es-pod-name-duo { display: flex; flex-direction: column; align-items: center; line-height: 1.25; white-space: normal; }
.es-pod-name-duo .duo-amp { color: var(--text-4); font-weight: 500; font-size: 0.82em; margin: 1px 0; }
/* Header row above the podium: Singles/Doubles seg control on the left,
Save Image pushed to the right via margin-left:auto on the button itself
so the row still works when the seg control is absent (no doubles data). */
.es-pod-header-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.es-pod-export-btn { margin-left: auto; }
/* Bottom nav-style bar — mirrors .topbar's exact technique (see .topbar
above): position:sticky against .main's own scrollport (the nearest
scrolling ancestor), so it's pinned to the bottom of the screen without
ever being "part of the scroll" visually, same as .topbar pins to the
top. The negative side margins + matching padding bleed it edge-to-edge
across .main's own horizontal padding, exactly like .topbar does. */
.es-bottom-bar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
flex-wrap: wrap;
position: sticky;
bottom: 0;
z-index: 20;
background: var(--bg-surface);
margin-top: auto;
/* Same wide-screen centering compensation as .topbar (see its comment on
--app-sidebar-w) — without the extra term this bar stops short of the
true edge once .main is wider than 1280px + padding, which becomes
far more visible once the sidebar can collapse to a 72px rail and
free up that extra width. */
margin-left: calc(-1 * var(--main-pad-x, 40px) - max(0px, calc((100vw - var(--app-sidebar-w, 260px) - 2 * var(--main-pad-x, 40px) - 1280px) / 2)));
margin-right: calc(-1 * var(--main-pad-x, 40px) - max(0px, calc((100vw - var(--app-sidebar-w, 260px) - 2 * var(--main-pad-x, 40px) - 1280px) / 2)));
padding-top: 22px;
padding-left: calc(var(--main-pad-x, 40px) + max(0px, calc((100vw - var(--app-sidebar-w, 260px) - 2 * var(--main-pad-x, 40px) - 1280px) / 2)));
padding-right: calc(var(--main-pad-x, 40px) + max(0px, calc((100vw - var(--app-sidebar-w, 260px) - 2 * var(--main-pad-x, 40px) - 1280px) / 2)));
border-top: 1px solid var(--border-subtle);
padding-bottom: calc(22px + var(--safe-bottom));
}
.es-footer-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.es-bottom-bar .es-footer-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
box-sizing: border-box;
height: 42px;
min-height: 42px;
padding: 0 18px;
border-radius: 999px !important;
font-size: 15px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
flex-shrink: 0;
box-shadow: none;
}
.es-bottom-bar .es-footer-action.btn-ghost,
.es-bottom-bar .es-footer-action.btn-secondary {
background: var(--bg-surface-elevated);
color: var(--text-main);
border-color: rgba(255, 255, 255, 0.10);
}
.es-bottom-bar .es-footer-action.btn-ghost:hover,
.es-bottom-bar .es-footer-action.btn-secondary:hover {
background: var(--bg-surface-hover);
border-color: rgba(255, 255, 255, 0.24);
}
.es-bottom-bar .es-footer-action.btn-primary {
background: var(--accent);
color: var(--accent-btn-txt);
border-color: transparent;
}
.es-bottom-bar .es-footer-action.btn-primary:hover {
background: var(--accent-hover);
}
.es-bottom-bar .es-footer-action.btn-primary img {
filter: brightness(0) !important;
opacity: 1 !important;
}
.es-bottom-bar .es-footer-action-dupr {
background: #006cff !important;
color: #fff !important;
border-color: #006cff !important;
padding-left: 16px;
padding-right: 16px;
}
.es-bottom-bar .es-footer-action-dupr,
.es-bottom-bar .es-footer-action-dupr span {
color: #fff !important;
}
.es-bottom-bar .es-footer-action-dupr:hover {
background: #0057d8 !important;
border-color: #0057d8 !important;
}
#btn-export-dupr-past img,
#btn-export-dupr-live img,
.es-bottom-bar .es-footer-action-dupr img {
filter: brightness(0) invert(1) !important;
opacity: 1 !important;
}
#btn-download-past-podium .es-footer-icon {
filter: brightness(0) invert(1) !important;
opacity: 1 !important;
}
.es-bottom-bar .es-footer-action-danger {
color: var(--danger) !important;
}
.es-bottom-bar .es-footer-action-danger img {
filter: invert(49%) sepia(85%) saturate(1579%) hue-rotate(323deg) brightness(101%) contrast(101%) !important;
opacity: 1 !important;
}
/* Sticky alone only keeps the bar from scrolling PAST the bottom edge — with
a short player list, .page's content is shorter than .main's viewport-height
scrollport, so the bar just sits at the end of the (short) content instead
of touching the true bottom. .es-fill-height (toggled alongside .es-no-pad,
same End Session view) makes .page a column flex container tall enough to
fill .main, so margin-top:auto above pushes the bar down to the real edge
when content is short, while sticky still keeps it pinned once content
overflows and the page scrolls. */
.page.es-fill-height {
min-height: 100%;
display: flex;
flex-direction: column;
}
.es-end-session-btn {
min-width: 220px;
background: var(--danger);
color: #fff;
border-color: var(--danger);
font-weight: 700;
}
.es-end-session-btn:hover {
background: var(--danger);
filter: brightness(0.92);
border-color: var(--danger);
}
.es-footer-label-mobile { display: none; }
/* position:sticky's "bottom:0" is clamped to .main's own padding box, which
sits .main's own bottom padding (80px) short of its true visible edge —
no amount of margin/padding on the bar or its ancestors can push past
that; .main's padding is the actual scrollport boundary sticky respects.
Toggled (render-main.ts) only while the End Session view is active, since
removing it globally would collapse the breathing room every other view
relies on at the end of its own scroll. */
.main.es-no-pad { padding-bottom: 0; }
/* =========================================
ACCOUNT SETTINGS LAYOUT (SaaS Split Pane)
========================================= */
.settings-layout {
display: flex;
gap: 40px;
align-items: flex-start;
}
.settings-sidebar {
width: 240px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 6px;
position: sticky;
top: 100px; /* Sticks to the top as they scroll */
}
.settings-nav-item {
padding: 10px 16px;
border-radius: var(--radius-md);
color: var(--text-dim);
font-weight: 600;
font-size: 15px;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.2s ease;
border-left: 3px solid transparent;
}
.settings-nav-item:hover {
background: var(--bg-surface-hover);
color: var(--text-main);
}
.settings-nav-item.active {
background: var(--bg-surface-elevated);
color: var(--text-main);
border-left: 3px solid var(--accent);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.settings-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
max-width: 64%;
}
/* Tools has no visible settings sidebar, so let its cards use the same full
content width as the account danger-zone card. */
.tools-page-content {
max-width: none;
width: 100%;
}
.settings-sidebar.hidden + .settings-content {
max-width: none;
}
/* Settings page header — big title + subtitle per tab, PayMongo-style */
.settings-page-header { margin-bottom: 20px; }
.settings-page-header h1 { font-size: 28px; font-weight: 700; color: var(--text-main); letter-spacing: -0.01em; margin-bottom: 6px; }
.settings-page-header p { color: var(--text-dim); font-size: 15px; margin: 0; }
/* Settings card — one bordered container per tab holding grouped blocks,
instead of a separate boxed panel-header bar per block. */
.settings-card { background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 20px; }
.settings-card.danger-card { border-color: rgba(255, 59, 48, 0.3); }
.settings-block { padding: 22px 24px; }
.settings-block + .settings-block { border-top: 1px solid var(--border-subtle); }
/* Free Trial / Visitor: shown but disabled, not hidden — with an upsell note
instead of the feature just silently not being there. */
.settings-block.locked-feature .flex-row { opacity: 0.45; filter: grayscale(0.4); pointer-events: none; }
.settings-block.locked-feature button.disabled,
.settings-block.locked-feature label.disabled { cursor: not-allowed; }
.settings-block-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.settings-block-header h3 { font-size: 16px; font-weight: 700; color: var(--text-main); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.settings-block-header p { color: var(--text-dim); font-size: 14px; margin: 0; line-height: 1.4; }
.settings-action-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, 45%);
align-items: center;
gap: 28px;
}
.settings-action-grid .settings-block-header {
margin-bottom: 0;
}
.settings-action-stack {
display: flex;
justify-content: center;
gap: 10px;
min-width: 0;
}
.settings-action-stack-two > * {
flex: 1 1 0;
min-width: 0;
}
.settings-action-stack-two {
flex-direction: column;
}
.settings-action-stack .btn {
min-height: 54px;
}
.settings-card-cta {
width: 100%;
min-height: 54px;
border-radius: 999px !important;
justify-content: center;
}
.settings-action-stack:not(.settings-action-stack-two) .btn {
width: 100%;
max-width: 360px;
}
@media (max-width: 900px) {
.settings-action-grid {
grid-template-columns: 1fr;
align-items: stretch;
gap: 18px;
}
.settings-action-stack {
justify-content: flex-start;
}
}
@media (max-width: 600px) {
.settings-action-stack,
.settings-action-stack-two {
flex-direction: column;
}
}
/* Read-only field display (view mode) inside a settings-block, toggled to an
edit form via the block header's Edit/Cancel/Save buttons. */
.settings-field-grid { display: flex; flex-wrap: wrap; gap: 24px; }
.settings-field { flex: 1; min-width: 180px; }
.settings-field label { display: block; color: var(--text-dim); font-size: 13px; margin-bottom: 4px; }
.settings-field-value { color: var(--text-main); font-weight: 600; font-size: 15px; }
.settings-pane {
display: flex;
flex-direction: column;
animation: fadeIn 0.3s ease-out forwards;
}
.mobile-settings-back { display: none; }
/* Mobile Fix for Settings */
@media (max-width: 800px) {
.settings-layout { flex-direction: column; gap: 20px; }
.settings-sidebar { width: 100%; flex-direction: row; overflow-x: auto; position: static; padding-bottom: 5px; scrollbar-width: none; }
.settings-sidebar::-webkit-scrollbar { display: none; }
.settings-nav-item { white-space: nowrap; flex: 0 0 auto; border-left: none; border-bottom: 3px solid transparent; border-radius: var(--radius-md); }
.settings-nav-item.active { border-left: none; border-bottom: 3px solid var(--accent); border-radius: var(--radius-md) var(--radius-md) 0 0; }
}
/* Keep Settings' local tabs available on phones. The sidebar is hidden on
desktop because the global navigation owns these routes; on mobile the
local tab cards need to appear before the selected settings pane. */
@media (max-width: 720px) {
#view-account .settings-sidebar.hidden {
display: flex !important;
flex-direction: column;
gap: 8px;
width: 100%;
padding: 0;
overflow: visible;
position: static;
}
#view-account.settings-mobile-menu-open .settings-content {
display: none;
}
#view-account:not(.settings-mobile-menu-open) .settings-sidebar.hidden {
display: none !important;
}
.mobile-settings-back {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 8px;
min-height: 36px;
margin: 0 0 18px;
padding: 0;
border: 0;
background: transparent;
color: var(--text-dim);
font: inherit;
font-size: 15px;
cursor: pointer;
}
.mobile-settings-back:hover { color: var(--text-main); }
.mobile-settings-back img { width: 16px; height: 16px; filter: invert(1); }
#view-account .settings-nav-item {
width: 100%;
min-height: 52px;
padding: 14px 20px;
border: 0;
border-radius: var(--radius-md);
background: transparent;
color: var(--text-dim);
box-shadow: none;
font-size: 17px;
font-weight: 500;
}
#view-account .settings-nav-item:hover,
#view-account .settings-nav-item.active {
background: var(--bg-surface-hover);
color: var(--text-main);
border: 0;
border-radius: var(--radius-md);
}
#view-account .settings-nav-item img {
display: inline-block;
flex: 0 0 20px;
width: 20px !important;
height: 20px !important;
}
#view-account .settings-nav-item-danger {
color: var(--danger);
}
#view-account .settings-nav-item-danger:hover { color: var(--danger); }
}
/* =========================================
RESPONSIVE DESIGN (MOBILE OPTIMIZATION)
========================================= */
@media (min-width: 800px) {
.leaderboard-header, .lb-row { grid-template-columns: 40px 1fr 80px 60px 60px 60px 80px; gap: 15px; }
}
@media (max-width: 800px) {
body { flex-direction: column; }
.desktop-only { display: none !important; }
.mobile-only { display: inline-block; }
.nav-item.mobile-only { display: flex; }
/* Sticky Top Header */
.mobile-header { display: block !important; background: rgba(13,14,16,0.85); backdrop-filter: blur(16px); padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); text-align: center; position: sticky; top: 0; z-index: 50; }
.mobile-header .brand { font-size: 16px; margin: 0; padding: 0; }
.app-layout { flex-direction: column; overflow: visible; }
/* Bottom Navigation Bar — disabled in revamp (off-canvas drawer used instead) */
/* .sidebar { position: fixed; bottom: 0; ... } */
.nav-list { flex-direction: row; width: 100%; padding: 0;}
.nav-item {
padding: 10px 14px; display: flex; align-items: center; gap: 12px;
color: var(--text-main); cursor: pointer; font-size: 14px; font-weight: 500;
border-radius: 8px; transition: all 0.2s ease; margin-bottom: 2px;
}
.nav-item:hover:not(.disabled) { background: var(--bg-surface-hover); }
.nav-item.active { background: var(--bg-surface-hover); color: var(--text-main); }
.nav-item.disabled { opacity: 0.5; cursor: not-allowed; }
.nav-icon { display: block; font-size: 16px; margin-bottom: 2px;}
.main-content { padding: 12px; padding-bottom: calc(100px + var(--safe-bottom)); }
/* Scrollable Horizontal Action Bar */
.action-bar { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 0; position: static; background: transparent;}
.global-timer-widget { justify-content: space-between; padding: 12px; }
.action-buttons { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 5px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.action-buttons::-webkit-scrollbar { display: none; }
.action-buttons .btn { flex: 0 0 auto; white-space: nowrap; font-size: 14px; padding: 10px 16px; }
/* Queue Swipe Layout */
.rack-container { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 12px; padding-bottom: 12px; height: 340px; margin-right: -12px; padding-right: 12px;}
.rack { flex: 0 0 88vw; min-width: 88vw; scroll-snap-align: center; }
.rack.wide { flex: 0 0 88vw; min-width: 88vw; }
.courts-container, .dash-stats-grid, .session-info-card, .logic-selector { grid-template-columns: 1fr; gap: 12px; }
.info-item { padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle); }
.info-item:last-child { border-bottom: none; padding-bottom: 0;}
/* Mobile Tables & Lists */
.list-header {
display: flex; padding: 12px 24px; background: var(--bg-surface-elevated);
font-size: 12px; color: var(--text-dim); font-weight: 800; /* Bolder headers */
text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--border-subtle);
}
.player-list-row, .lb-row {
display: flex; align-items: center; padding: 14px 24px;
border-bottom: 1px solid var(--border-subtle); transition: background 0.2s ease;
}
.player-list-row:last-child, .lb-row:last-child { border-bottom: none; }
.player-list-row:hover, .lb-row:hover {
background: var(--bg-surface-hover);
}
.player-list-row > div:nth-child(3), .player-list-row > div:nth-child(4) { width: auto !important; text-align: left !important; }
.player-list-row > div:nth-child(5) { width: 100% !important; justify-content: flex-start !important; margin-top: 8px; border-top: 1px solid var(--border-subtle); padding-top: 12px;}
.lb-col-rank { width: auto; font-size: 12px; background: var(--border-subtle); padding: 4px 8px; border-radius: 3px;}
.lb-col-stat { width: auto; font-size: 12px; }
/* Native Bottom-Sheet Modals */
.modal {
position: fixed; inset: 0;
background: rgba(0,0,0,0.7); /* Darker backdrop */
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
z-index: 2000; padding: 20px;
animation: fadeIn 0.2s ease;
}
.modal-card {
background: var(--bg-surface);
border: 1px solid color-mix(in srgb, #141618 72%, transparent);
padding: 20px;
border-radius: var(--radius-lg);
width: 100%;
max-width: 480px;
/* Massive premium drop-shadow + inset highlight line on top */
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
/* Toolbar & search: stack vertically, remove fixed min-widths */
.toolbar { flex-direction: column; gap: 10px; }
.search-box { min-width: 0; flex: none; width: 100%; }
.main-page-search { flex: 1 1 100% !important; width: 100% !important; max-width: none !important; }
.toolbar-select { min-width: 0; flex: none; width: 100%; }
/* Player name: allow full width in wrapped mobile rows */
.p-name { max-width: none; }
/* Tooltip: prevent overflow on narrow screens */
.info-tooltip .tooltip-box { width: min(260px, calc(100vw - 40px)); }
/* Tap-friendly action buttons */
.btn-tiny { padding: 8px 12px; font-size: 0.75rem; min-height: 36px; }
/* Section header sizing */
.section-title { font-size: 16px; }
.section-header { margin-bottom: 14px; }
}
/* =========================================
EXTRA-SMALL PHONES (≤380px)
========================================= */
@media (max-width: 380px) {
.main-content { padding: 8px; padding-bottom: calc(90px + var(--safe-bottom)); }
.section-title { font-size: 16px; }
.modal-card { padding: 16px; border-radius: var(--radius-lg); }
}
/* Post-creation guide for a newly started Open Play session. This follows the
existing modal language while giving the live session a quieter, more
spacious first-run moment. */
.open-play-created-card {
position: relative;
z-index: 1;
background: #0c0e0f;
width: min(600px, calc(100vw - 40px));
max-width: 600px;
padding: 28px 30px 26px;
border-radius: 8px;
border-color: color-mix(in srgb, #141618 72%, transparent);
transform-origin: center center;
animation: open-play-created-pop-in 280ms cubic-bezier(0.22, 1.18, 0.36, 1) both;
}
.dupr-export-confirm-card {
position: relative;
max-width: 520px;
background: #061660;
border-color: rgba(255, 255, 255, 0.16);
}
#dupr-export-confirm-modal .modal-title-emphasis {
color: #f5f7ff;
}
#dupr-export-confirm-modal .modal-desc {
color: #b9c0dc;
}
#dupr-export-confirm-modal .dupr-export-confirm-field {
color: #c2c8e0;
}
#dupr-export-confirm-modal .dupr-export-confirm-field .modal-input {
background: #ffffff14;
border: 0;
color: #f5f7ff;
}
#dupr-export-confirm-modal .dupr-export-confirm-field .modal-input:focus {
border: 0;
box-shadow: none;
}
#dupr-export-confirm-modal .dupr-export-confirm-field .modal-input::placeholder {
color: #8f98bb;
}
#dupr-export-confirm-modal .dupr-export-confirm-close {
color: #c2c8e0;
}
#dupr-export-confirm-modal .dupr-export-confirm-close:hover {
color: #f5f7ff;
}
#dupr-export-confirm-modal .dupr-export-confirm-actions .btn-secondary {
background: transparent;
border-color: rgba(255, 255, 255, 0.22);
color: #f5f7ff;
}
.dupr-export-confirm-close {
position: absolute;
top: 18px;
right: 18px;
width: 32px;
height: 32px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
color: var(--text-dim);
}
.dupr-export-confirm-close:hover { color: var(--text-main); }
.dupr-export-confirm-close .ui-icon-img { width: 18px; height: 18px; filter: invert(0.65); }
.dupr-export-confirm-body {
display: grid;
grid-template-columns: minmax(0, 1fr) 190px;
gap: 24px;
align-items: center;
margin-top: 22px;
}
.dupr-export-confirm-fields {
display: grid;
gap: 14px;
}
.dupr-export-confirm-illustration {
display: grid;
place-items: center;
min-height: 250px;
border-radius: 8px;
background: transparent;
}
.dupr-export-confirm-illustration img {
width: min(150px, 78%);
height: auto;
filter: invert(1);
opacity: 0.72;
}
.dupr-export-confirm-field {
display: grid;
gap: 7px;
color: var(--text-dim);
font-size: 13px;
font-weight: 600;
}
.dupr-export-confirm-actions {
display: flex;
justify-content: space-between;
gap: 10px;
margin-top: 26px;
}
#dupr-export-confirm-modal .dupr-export-confirm-actions .btn-secondary {
flex: 0 0 auto;
padding-inline: 0;
border: 0;
background: transparent;
color: #c2c8e0;
}
#dupr-export-confirm-modal .dupr-export-confirm-actions .btn-secondary:hover {
background: transparent;
color: #f5f7ff;
}
#dupr-export-confirm-modal .dupr-export-confirm-actions .btn-primary {
background: #ffffff;
border-color: #ffffff;
color: #061660;
}
#dupr-export-confirm-modal .dupr-export-confirm-actions .btn-primary:hover {
background: #eef0f7;
border-color: #eef0f7;
}
#dupr-export-confirm-modal .dupr-export-confirm-actions .btn-primary:disabled {
cursor: not-allowed;
opacity: 0.42;
}
.dupr-export-submit-group {
position: relative;
display: flex;
align-items: center;
gap: 12px;
}
.dupr-missing-ids-warning {
position: relative;
}
.dupr-missing-ids-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0;
border: 0;
background: transparent;
color: #ffd66b;
font: inherit;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.dupr-missing-ids-trigger:hover { color: #ffe8a6; }
.dupr-missing-ids-trigger img { width: 16px; height: 16px; filter: invert(86%) sepia(55%) saturate(700%) hue-rotate(340deg); }
#dupr-missing-ids-sheet {
z-index: 2100;
opacity: 0;
animation: none;
transition: opacity 240ms ease;
}
#dupr-missing-ids-sheet.bottom-sheet-open { opacity: 1; }
#dupr-missing-ids-sheet .dupr-missing-ids-sheet-panel {
width: 100vw;
max-width: none;
max-height: 640px;
padding-bottom: 0;
background: #061660;
border: 1px solid rgba(255, 255, 255, 0.16);
border-bottom: 0;
color: #f5f7ff;
}
#dupr-missing-ids-sheet .bottom-sheet-handle { background: #c2c8e0; }
#dupr-missing-ids-sheet .dupr-missing-ids-sheet-header,
#dupr-missing-ids-sheet .dupr-missing-ids-sheet-list,
#dupr-missing-ids-sheet .dupr-missing-ids-sheet-actions {
width: 100%;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.dupr-missing-ids-sheet-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.dupr-missing-ids-sheet-header h2 {
margin: 0 0 6px;
color: #f5f7ff;
font-size: 20px;
}
.dupr-missing-ids-sheet-header p {
margin: 0;
color: #c2c8e0;
font-size: 13px;
}
.dupr-missing-ids-sheet-close {
padding: 0;
border: 0;
background: transparent;
color: #c2c8e0;
font-size: 28px;
line-height: 1;
}
.dupr-missing-ids-sheet-close:hover { color: #fff; }
.dupr-missing-ids-sheet-list {
display: grid;
gap: 8px;
max-height: 40vh;
margin: 0;
padding: 0;
overflow-y: auto;
list-style: none;
}
.dupr-missing-ids-sheet-list li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 14px;
border-radius: 8px;
background: #ffffff14;
color: #f5f7ff;
font-size: 14px;
font-weight: 600;
}
.dupr-missing-ids-player-details {
display: grid;
gap: 3px;
min-width: 0;
}
.dupr-missing-ids-player-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dupr-missing-ids-player-input {
width: 150px;
padding: 8px 10px;
border: 0;
border-radius: 8px;
background: #ffffff14;
color: #f5f7ff;
font: inherit;
font-size: 13px;
}
.dupr-missing-ids-player-input:focus {
outline: none;
box-shadow: none;
}
.dupr-missing-ids-player-input.is-invalid {
background: rgba(255, 59, 48, 0.24);
box-shadow: inset 0 0 0 1px #ff3b30;
}
.dupr-missing-ids-player-input::placeholder { color: #aeb7d4; }
.dupr-missing-ids-sheet-actions {
margin: 0 auto;
}
.dupr-missing-ids-sheet-save {
display: block;
width: 100%;
min-height: 44px;
margin: 16px 0 24px;
padding: 8px 16px;
border: 0;
border-radius: 999px;
background: #fff;
color: #061660;
font: inherit;
font-weight: 700;
}
.dupr-missing-ids-sheet-save:hover { background: #eef0f7; }
.dupr-missing-ids-sheet-save:disabled { cursor: wait; opacity: 0.55; }
@media (max-width: 560px) {
.dupr-missing-ids-sheet-list li { align-items: stretch; flex-direction: column; }
.dupr-missing-ids-player-input { width: 100%; box-sizing: border-box; }
}
@media (max-width: 560px) {
.dupr-export-confirm-body { grid-template-columns: 1fr; }
.dupr-export-confirm-illustration { min-height: 120px; }
.dupr-export-confirm-illustration img { width: 92px; }
.dupr-export-submit-group { flex: 1; justify-content: flex-end; }
.dupr-export-confirm-actions .btn-primary { flex: 0 1 auto; }
}
html[data-theme="light"] .dupr-export-confirm-illustration img { filter: none; }
.open-play-created-confetti {
position: fixed;
z-index: 2;
inset: 0;
width: 100dvw;
height: 100dvh;
min-width: 100dvw;
min-height: 100dvh;
pointer-events: none;
}
@keyframes open-play-created-pop-in {
from { opacity: 0; transform: translateY(10px) scale(0.88); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.open-play-created-close {
position: absolute;
top: 18px;
right: 18px;
width: 32px;
height: 32px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
color: var(--text-dim);
}
.open-play-created-close:hover { color: var(--text-main); }
.open-play-created-close .ui-icon-img { width: 18px; height: 18px; filter: var(--open-play-created-icon-filter, invert(0.65)); }
.open-play-created-heading h2 {
margin: 0 0 8px;
color: var(--text-main);
font-size: clamp(22px, 2.4vw, 25px);
line-height: 1.12;
letter-spacing: -0.045em;
}
.open-play-created-heading p {
margin: 0;
color: var(--text-dim);
font-size: clamp(13px, 1.3vw, 14px);
line-height: 1.35;
font-weight: 600;
}
.open-play-created-body {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(200px, 0.78fr);
gap: 18px;
align-items: start;
margin-top: 22px;
}
.open-play-created-steps h3 {
margin: 0 0 13px;
color: var(--text-main);
font-size: 17px;
letter-spacing: -0.03em;
}
.open-play-created-step {
display: grid;
grid-template-columns: 26px minmax(0, 1fr);
gap: 9px;
align-items: start;
margin-bottom: 11px;
}
.open-play-created-step:last-child { margin-bottom: 0; }
.open-play-created-step-icon {
width: 25px;
height: 25px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.open-play-created-step-icon img {
width: 24px;
height: 24px;
filter: var(--open-play-created-icon-filter, invert(0.65));
}
.open-play-created-step > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 12px;
align-items: center;
}
.open-play-created-step h4 {
grid-column: 1 / -1;
margin: 0 0 3px;
color: var(--text-main);
font-size: 15px;
letter-spacing: -0.02em;
}
.open-play-created-step p {
grid-column: 1;
max-width: none;
margin: 0;
color: var(--text-dim);
font-size: 12px;
line-height: 1.4;
font-weight: 600;
}
.open-play-created-control-preview {
display: inline-flex;
align-items: center;
gap: 5px;
grid-column: 2;
grid-row: 2;
align-self: center;
margin-top: 0;
padding: 5px 9px;
border: 1px solid var(--accent-border);
border-radius: 7px;
background: var(--accent);
color: var(--accent-btn-txt);
font-size: 11px;
font-weight: 800;
line-height: 1;
}
.open-play-created-control-preview img {
width: 13px;
height: 13px;
filter: brightness(0);
}
.open-play-created-summary {
overflow: hidden;
}
.open-play-created-summary-placeholder {
position: relative;
overflow: hidden;
height: 230px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
padding-bottom: 0;
background: transparent;
color: var(--text-dim);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.01em;
}
.open-play-created-summary-placeholder .open-play-created-paddle {
width: 132px;
height: 132px;
filter: var(--open-play-created-icon-filter, invert(0.65));
}
.open-play-created-summary-copy { padding: 12px 14px 14px; }
.open-play-created-summary-date {
margin: 0 0 4px;
color: var(--text-dim);
font-size: 12px;
line-height: 1.3;
font-weight: 700;
}
.open-play-created-summary-copy h3 {
margin: 0 0 5px;
color: var(--text-main);
font-size: 16px;
line-height: 1.15;
letter-spacing: -0.03em;
overflow-wrap: anywhere;
}
.open-play-created-summary-location {
margin: 0;
color: var(--text-dim);
font-size: 12px;
line-height: 1.35;
font-weight: 600;
overflow-wrap: anywhere;
}
.open-play-created-action {
width: 100%;
min-height: 40px;
margin-top: 20px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
}
html[data-theme="light"] {
--open-play-created-icon-filter: none;
}
@media (max-width: 760px) {
.open-play-created-card {
width: min(560px, calc(100vw - 24px));
max-height: calc(100dvh - 24px);
overflow-y: auto;
padding: 48px 22px 22px;
border-radius: 8px;
}
.open-play-created-close { top: 14px; right: 14px; }
.open-play-created-heading h2 { font-size: clamp(22px, 2.4vw, 25px); }
.open-play-created-heading p { font-size: clamp(13px, 1.3vw, 14px); }
.open-play-created-body {
grid-template-columns: minmax(0, 1fr) minmax(120px, 0.78fr);
gap: 14px;
margin-top: 22px;
}
.open-play-created-steps h3 { margin-bottom: 13px; font-size: 17px; }
.open-play-created-step { margin-bottom: 11px; }
.open-play-created-step > div { display: grid; }
.open-play-created-step p { max-width: none; }
.open-play-created-control-preview { margin-top: 0; }
.open-play-created-summary-placeholder { height: 180px; }
.open-play-created-summary-placeholder .open-play-created-paddle {
width: 112px;
height: 112px;
}
.open-play-created-action { margin-top: 20px; min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
.open-play-created-card { animation: none; }
.open-play-created-confetti { display: none; }
}
/* =========================================
SMOOTH COLLAPSE UTILITY
========================================= */
.collapsible {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.collapsible.open {
max-height: 2000px; /* Expands to fit dynamic content */
opacity: 1;
}
/* Match history logs can grow past the generic 2000px cap on long sessions.
Give them their own scroll container instead of silently clipping rows. */
#dash-match-history-body.open,
#queue-match-history-body.open,
#category-overview-recent-matches-body.open {
max-height: 520px;
overflow-y: auto;
}
/* Padded panel bodies (e.g. Rotation Engine) must drop their padding when
closed, or the padding stays visible below the header. `transition: all`
above animates the padding along with max-height. */
.collapsible:not(.open) {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* =========================================
LIGHT MODE THEME OVERRIDES (HIGH CONTRAST)
========================================= */
html[data-theme="light"] {
/* Straight dark-to-light inversion of the existing shell palette. */
--bg-base: #fafafa;
--bg-surface: #fafafa;
--bg-surface-elevated: #f4f4f5;
--bg-surface-hover: #e4e4e7;
--border-subtle: #c9cdd2;
--border-focus: #8f969f;
--border-strong: #aeb4bb;
--text-main: #151516;
--text-soft: #2f3032;
--text-dim: #52525b;
--text-faint: #71717a;
--text-dim2: #a1a1aa;
--chip-bg: #f4f4f5;
--surface-faint: #fafafa;
--toggle-off: #d4d4d8;
--surface-3: #e4e4e7;
--shadow-card: 0 10px 30px rgba(0, 0, 0, 0.08);
--shadow-frame: 0 30px 80px rgba(0, 0, 0, 0.12);
--accent: #c4f02e;
--accent-hover: #d0ff3a;
--accent-glow: rgba(196, 240, 46, 0.10);
--accent-soft: rgba(196, 240, 46, 0.12);
--accent-ghost: rgba(196, 240, 46, 0.06);
--accent-border: rgba(110, 140, 0, 0.35);
--accent-btn-txt: #0c1006;
--accent-fg: #0c1006;
--accent-faint: rgba(196, 240, 46, 0.06);
--accent-ring: rgba(110, 140, 0, 0.35);
--live: #16a34a;
--live-bg: rgba(22, 163, 74, 0.10);
--live-border: rgba(22, 163, 74, 0.25);
--warn: #a16207;
--danger: #dc2626;
--danger-bg: rgba(220, 38, 38, 0.08);
}
/* The shell uses image icons authored for the dark theme. In light mode the
same glyphs should resolve to ink instead of being inverted to white. */
[data-theme="light"] .sidebar .nav-item img,
[data-theme="light"] .sidebar .nav-group-header img,
[data-theme="light"] .sidebar .sidebar-promo-banner-icon,
[data-theme="light"] .topbar img,
[data-theme="light"] .mobile-menu-fab img {
filter: none !important;
}
[data-theme="light"] .ambient-background {
background: var(--bg-base);
}
[data-theme="light"] .ambient-background .blob {
opacity: 0.08;
}
[data-theme="light"] .ambient-background .blob-2,
[data-theme="light"] .ambient-background .blob-3 {
display: none;
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
background: rgba(23, 32, 25, 0.18);
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
background: rgba(23, 32, 25, 0.28);
}
/* Light shell surfaces: keep the navigation brighter than the working area. */
html[data-theme="light"] .sidebar {
background: #fafafa;
}
html[data-theme="light"] .main,
html[data-theme="light"] .topbar {
background: #f4f5f7;
}
/* Archive/home chrome still contains legacy inline dark-theme filters and a
sticky toolbar with no tokenized fill. Reset both for the light shell. */
html[data-theme="light"] #home-sticky-toolbar,
html[data-theme="light"] #open-play-sticky-toolbar,
html[data-theme="light"] #tourney-archive-sticky-toolbar {
background: #f4f5f7 !important;
}
html[data-theme="light"] .archive-session-thumb img,
html[data-theme="light"] .home-events-toolbar img,
html[data-theme="light"] .home-filter-row img,
html[data-theme="light"] .search-box img,
html[data-theme="light"] .dropdown-item img,
html[data-theme="light"] .archive-session-action img {
filter: none !important;
opacity: 1 !important;
}
html[data-theme="light"] #home-tourney-list,
html[data-theme="light"] #past-sessions-list {
background: transparent !important;
}
/* The Audience preview (#tourney-home) sets [data-theme="light"] on itself
rather than , scoped to just that page. Give the preview a complete
local light palette: its cards/controls use the base --bg-* and --text-*
tokens directly, while the tournament components also consume the --tny-*
aliases. --tny-accent is deliberately left alone — the public Audience
page's own light theme keeps the lime accent too, unlike the app's own
global light mode which swaps it to black. */
#tourney-home[data-theme="light"] {
--bg-base: #f5f6f8;
--bg-surface: #ffffff;
--bg-surface-elevated: #ffffff;
--bg-surface-hover: #eef0f3;
--border-subtle: #dde1e6;
--border-strong: #c5cbd3;
--text-main: #16181d;
--text-soft: #303640;
--text-dim: #5b6270;
--text-faint: #7a8290;
--tny-ink: var(--text-main);
--tny-ink-soft: var(--text-main);
--tny-muted: var(--text-dim);
--tny-panel: var(--bg-surface-elevated);
--tny-surface: var(--bg-surface);
--tny-border: var(--border-subtle);
}
/* Venue markers and editor toolbar controls are utility chrome, not status
accents. Keep them neutral in the light Audience surface so the lime accent
remains reserved for primary actions and selected states. */
#tourney-home[data-theme="light"] #tny-home-venues-body .tny-manage-empty-icon {
background: var(--tny-surface);
border-color: var(--tny-border);
color: var(--tny-ink-soft);
}
#tourney-home[data-theme="light"] .tny-home-notes-toolbar .tny-home-notes-color-control::after {
background: var(--tny-ink-soft);
}
#tourney-home[data-theme="light"] .tny-home-notes-toolbar button.is-active {
background: var(--tny-surface);
border-color: var(--tny-border);
color: var(--tny-ink);
}
#tourney-home[data-theme="light"] .tny-home-notes-format-select:focus,
#tourney-home[data-theme="light"] .tny-home-notes-body:focus {
box-shadow: 0 0 0 1px var(--tny-ink-soft);
}
/* #tourney-home only fills .tny-page-shell's 960px centered column, so a
background painted on #tourney-home itself still left dark edges either
side of it (the rest of .tourney-active-main, which is full-width in
single-column tab mode). Custom properties only inherit downward, so
#tourney-home's [data-theme="light"] override isn't visible to this
ancestor either — var(--bg-base) here would still resolve dark — hence
the literal color instead of a var() reference. .main is the actual
scrollable pane (height:100dvh, its own `background: var(--bg-base)`) —
painting only .tourney-active-main left .main's 40px side padding and the
space below the last card still dark. .topbar keeps its own explicit
dark background (var(--bg-base), never overridden) regardless, same as
the rest of the app chrome — only the content pane goes light. */
.main:has(#tourney-home[data-theme="light"]:not(.hidden)) {
background: #f4f4f5;
/* Dark vs. light content isn't always the exact same rendered height
(font metrics/line-height rounding differ enough to cross the
auto-overflow threshold), so .main's scrollbar can appear/disappear
between the two — reserving its gutter unconditionally here stops the
centered 960px column from visibly shifting a few px when that
happens, without changing anything for pages that never engage this
rule. */
scrollbar-gutter: stable;
}
[data-theme="light"] .section-title,
[data-theme="light"] .rack-title,
[data-theme="light"] .preview-title,
[data-theme="light"] .panel-header h3,
[data-theme="light"] .info-value,
[data-theme="light"] .stat-value,
[data-theme="light"] .logic-title,
[data-theme="light"] .tab.active,
[data-theme="light"] .p-name,
[data-theme="light"] .lb-col-name,
[data-theme="light"] .btn-score strong,
[data-theme="light"] .team-label,
[data-theme="light"] .stat-label,
[data-theme="light"] .footer-column h4,
[data-theme="light"] .ttc-name,
[data-theme="light"] .tsetup-title,
[data-theme="light"] .tsetup-pill.active {
color: var(--text-main) !important;
}
/* 2. Catch ALL inline HTML styles (covers all browser serialization formats) */
[data-theme="light"] *[style*="color: #fff"],
[data-theme="light"] *[style*="color:#fff"],
[data-theme="light"] *[style*="color: #ffffff"],
[data-theme="light"] *[style*="color:#ffffff"],
[data-theme="light"] *[style*="color: white"],
[data-theme="light"] *[style*="color: rgb(255, 255, 255)"],
[data-theme="light"] *[style*="color: rgb(255,255,255)"] {
color: var(--text-main) !important;
}
/* 3. Manually override specific structural elements injected by JS */
[data-theme="light"] .player-pill span,
[data-theme="light"] .court-header span,
[data-theme="light"] .match-team,
[data-theme="light"] #queue-empty-state h3,
[data-theme="light"] #stage-team-list,
[data-theme="light"] .modal-card h2,
[data-theme="light"] .modal-card h3,
[data-theme="light"] .modal-card h4,
[data-theme="light"] .modal-card label,
[data-theme="light"] .modal-card .modal-desc,
[data-theme="light"] .ps-view-meta-value {
color: var(--text-main) !important;
}
/* 4. Protect specific elements that SHOULD remain dim or colored */
[data-theme="light"] .player-pill span.wait-time-display,
[data-theme="light"] .player-pill span.player-badge,
[data-theme="light"] .player-pill span.drag-handle,
[data-theme="light"] .match-team:last-child {
color: var(--text-dim) !important;
}
[data-theme="light"] .player-pill span.rank-badge {
color: #000 !important;
}
/* 5. Keep danger buttons and warning badges visibly white */
[data-theme="light"] .btn-danger,
[data-theme="light"] .btn-danger:hover,
[data-theme="light"] .btn-danger *,
[data-theme="light"] .status-badge.waiting,
[data-theme="light"] .vs-badge,
[data-theme="light"] .win-rate-badge {
color: #ffffff !important;
}
/* =========================================
TOURNAMENT BRACKET ENGINE
========================================= */
.bracket-wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
overflow-x: auto;
padding: 20px 40px 60px 40px;
gap: 60px;
background: var(--bg-surface);
border-radius: var(--radius-md);
border: none;
min-height: 500px;
position: relative;
}
.bracket-round {
display: flex;
flex-direction: column;
justify-content: space-around;
flex: 1;
min-width: 250px;
position: relative;
}
.bracket-round-title {
text-align: center;
font-size: 13px;
font-weight: 800;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 20px;
position: absolute;
top: -10px;
width: 100%;
}
/* A second title inside the same .bracket-round (the 3rd Place match sits in
the Final's own column) can't reuse the absolute top:-10px positioning —
that would stack it directly on top of "Final" instead of below the
final's match card. */
.bracket-third-place-title {
position: static;
margin-top: 32px;
}
.bracket-match {
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
margin: 15px 0;
overflow: hidden;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
z-index: 2;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.bracket-match:hover {
border-color: var(--accent);
box-shadow: 0 0 20px var(--accent-glow);
transform: translateY(-2px);
}
.bracket-match.completed { opacity: 0.8; }
.bracket-match.completed:hover { opacity: 1; border-color: var(--text-dim); box-shadow: none; transform: none;}
.bracket-match-number {
position: absolute;
top: 4px;
right: 6px;
font-size: 10px;
font-weight: 800;
color: var(--text-dim);
z-index: 3;
}
.bracket-team {
padding: 12px 16px;
font-weight: 400;
font-size: 15px;
color: #fff;
border-bottom: 1px solid var(--border-subtle);
display: flex;
justify-content: space-between;
align-items: center;
}
.bracket-team:last-child { border-bottom: none; }
/* Visual States for Advancing */
.bracket-team.winner { color: var(--accent); background: var(--accent-ghost); }
.bracket-team.loser { color: var(--text-dim); text-decoration: line-through; opacity: 0.6;}
.b-score { font-family: var(--font-mono); font-weight: 900; font-size: 18px; letter-spacing: -0.02em; }
/* CSS connecting lines pointing to the right */
.bracket-round:not(:last-child) .bracket-match::after {
content: '';
position: absolute;
right: -30px;
top: 50%;
width: 30px;
height: 2px;
background: var(--border-subtle);
z-index: 0;
}
/* =========================================
INTERACTIVE DUPR TOGGLE
========================================= */
.dupr-toggle {
cursor: pointer;
transition: all 0.2s ease;
user-select: none;
border: 1px solid transparent;
background: transparent;
padding: 3px 8px;
font-size: 11px;
border-radius: 4px;
font-weight: 800;
letter-spacing: 0.5px;
display: inline-flex;
align-items: center;
}
.dupr-toggle:active { transform: scale(0.95); }
.dupr-pending { background: rgba(245, 158, 11, 0.1); color: #f59e0b; border-color: #f59e0b; }
.dupr-recorded { background: rgba(34, 197, 94, 0.1); color: #22c55e; border-color: #22c55e; }
.dupr-badge-short { display: none; }
.podium-btn-text-short { display: none; }
/* MULTI-SELECT UPGRADE */
.db-selectable-row {
cursor: pointer;
transition: all 0.2s ease;
position: relative;
border-left: 4px solid transparent !important;
}
.db-selectable-row:hover {
background: var(--bg-surface-hover) !important;
}
.db-selectable-row {
transition: all 0.2s ease;
position: relative;
border-left: 4px solid transparent !important;
cursor: default; /* Change from pointer to default */
}
.db-select-indicator {
width: 20px;
height: 20px;
border: 2px solid var(--border-subtle);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
flex-shrink: 0;
cursor: pointer; /* Ensure only the box shows the hand icon */
}
.selected .db-select-indicator {
background: var(--accent);
border-color: var(--accent);
}
.selected .db-select-indicator::after {
content: '✓';
color: #000;
font-size: 11px;
font-weight: 900;
}
/* FIX SEARCH ICON DRIFT */
.search-box {
position: relative;
display: flex;
align-items: center;
}
.main-page-search { min-width: 0 !important; }
.search-icon {
position: absolute;
left: 16px;
pointer-events: none; /* Ensures clicking the icon still focuses the input */
}
.search-input {
width: 100%;
padding-left: 45px !important;
}
.main-page-search .search-input {
background: var(--bg-surface);
}
.sort-select-compact {
flex: 0 0 auto !important;
width: auto !important;
min-width: 280px !important;
}
.sort-select-compact .toolbar-select {
width: 280px !important;
min-width: 280px !important;
padding-right: 42px !important;
}
/* Home/Open Play "Your Events"/"Your Sessions" title + search + Create/New
button row. Desktop keeps the search and action together below the title;
mobile keeps the same controls together in a compact single row. */
.home-events-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
column-gap: 16px;
row-gap: 14px;
}
.home-events-toolbar-title { flex: 1 1 100%; }
/* the button's own .btn min-height (36px) and the input's font-driven auto
height didn't quite match, so pin both to the same explicit height. */
.home-events-toolbar .search-input,
.home-events-toolbar > .btn.btn-primary,
.home-events-toolbar #btn-create-event-dropdown,
.home-events-toolbar #btn-new-session-archive {
height: 44px;
}
/* Home desktop command bar: keep search, filters, arrangement, and Create
Event in one clear control row. The existing stacked layout remains intact
below desktop width. */
@media (min-width: 1025px) {
#home-sticky-toolbar #home-events-header {
display: grid;
grid-template-columns: minmax(240px, 360px) auto 40px auto;
align-items: center;
column-gap: 16px;
justify-content: space-between;
}
#home-sticky-toolbar #home-events-header > .search-box {
grid-column: 1;
max-width: none !important;
width: 100%;
}
#home-sticky-toolbar #home-events-header > #home-tourney-filter {
grid-column: 2;
display: flex;
align-items: center;
justify-content: flex-start !important;
gap: 12px;
margin-bottom: 0 !important;
min-width: max-content;
}
#home-sticky-toolbar #home-events-header > #home-tourney-filter > div:first-child {
display: flex;
align-items: center;
gap: 8px;
}
#home-sticky-toolbar #home-events-header > #home-tourney-filter > #btn-home-tourney-sort {
flex: 0 0 40px;
}
#home-sticky-toolbar #home-events-header > div:nth-child(3) {
grid-column: 4;
}
#home-sticky-toolbar #home-events-header {
margin-bottom: 0 !important;
}
}
.master-roster-actions #btn-db-add-player {
height: 44px;
display: inline-flex;
align-items: center;
gap: 6px;
}
/* GLOBAL SVG ICON STYLING */
.nav-icon svg, .btn-icon svg {
display: inline-block;
vertical-align: middle;
transition: color 0.2s ease, fill 0.2s ease, stroke 0.2s ease, transform 0.2s ease;
}
/* Active Nav State colors the SVG */
.nav-item.active .nav-icon svg {
color: var(--accent);
}
.app-icon-svg {
outline: none;
filter: none !important;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
width: 1em;
height: 1em;
flex-shrink: 0;
shape-rendering: geometricPrecision;
}
i[data-lucide] {
display: inline-block;
width: 1em;
height: 1em;
line-height: 1;
flex-shrink: 0;
}
.badge-club {
background: var(--accent-soft);
color: var(--accent);
border: 1px solid var(--accent-border);
font-size: 11px;
padding: 2px 6px; /* Tightened padding */
border-radius: 4px;
font-weight: 800; /* Bolder for DM Sans */
margin-left: 8px;
display: inline-flex; /* THE FIX: Keeps it perfectly centered with text */
align-items: center;
justify-content: center;
height: 18px; /* Fixed height for consistent alignment */
vertical-align: text-top;
text-transform: uppercase;
letter-spacing: 0.5px;
width: 22px;
padding: 2px;
}
.badge-club-icon {
display: inline-block;
width: 12px;
height: 12px;
background-color: currentColor;
-webkit-mask-image: url('/icons/regular/flag-banner.svg');
mask-image: url('/icons/regular/flag-banner.svg');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.badge-beta {
background: rgba(59, 130, 246, 0.1);
color: #3b82f6;
border: 1px solid rgba(59, 130, 246, 0.3);
font-size: 11px;
padding: 2px 6px;
border-radius: 4px;
font-weight: 800;
margin-left: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
height: 18px;
vertical-align: text-top;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* =========================================
PREMIUM TOAST NOTIFICATIONS
========================================= */
.toast-container {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 12px;
pointer-events: none;
align-items: flex-end;
}
.toast {
background: var(--bg-surface-elevated);
border: 1px solid var(--border-subtle);
padding: 16px;
border-radius: var(--radius-md); /* 8px rectangular shape */
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
display: flex;
align-items: center;
gap: 12px;
min-width: 340px;
max-width: 420px;
animation: slideLeftFade 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
pointer-events: auto;
}
@keyframes slideLeftFade {
from { opacity: 0; transform: translateX(50px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeOutRight {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(50px); }
}
/* Toast Type Variants */
.toast--update {
border-color: var(--accent);
}
.toast--update i {
color: var(--accent);
}
.toast--premium {
border-color: #fbbf24;
}
.toast--premium i {
color: #fbbf24;
}
.toast--error {
border-color: #ff3b30;
}
.toast--error i {
color: #ff3b30;
}
.toast--info {
border-color: #3b82f6;
}
.toast--info i {
color: #3b82f6;
}
@media (max-width: 600px) {
.toast-container {
left: 12px !important;
right: 12px !important;
bottom: calc(var(--mobile-bottom-nav-height) + var(--safe-bottom) + 16px) !important;
align-items: stretch !important;
}
.toast {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
padding: 12px !important;
gap: 10px !important;
}
.toast-icon-wrap { width: 28px !important; height: 28px !important; }
.toast-icon-wrap i { width: 14px !important; height: 14px !important; }
.toast-message { font-size: 12px !important; margin-right: 6px !important; }
.toast-action { padding: 6px 10px !important; font-size: 12px !important; }
}
.nav-icon i, .btn i {
width: 18px;
height: 18px;
vertical-align: middle;
stroke-width: 2px;
}
.nav-item i {
margin-right: 4px;
color: var(--text-dim);
}
/* =========================================
RANK-BASED PLAYER PILL LEFT BORDERS
========================================= */
.player-pill.rank-pill-BEG { border-left-color: #3b82f6; }
.player-pill.rank-pill-INT { border-left-color: #eab308; }
.player-pill.rank-pill-ADV { border-left-color: #ef4444; }
/* Pill buttons use fill and contrast for state; keep their chrome borderless. */
button[class*="pill"],
button.btn-primary,
button.btn-graphite,
button.btn-promo-outline,
button.btn-outline-live,
button.tny-primary-btn,
button.tny-white-btn,
#top-kiosk-btn,
.nav-confirm-actions button,
.prompter-choice-actions .btn,
#score-modal .score-dupr-toggle {
border: none !important;
}
.status-badge,
.home-tourney-status {
border: none !important;
}
/* =========================================
COURT CARD PLAYER NAMES
========================================= */
.court-player {
font-size: 15px;
font-weight: 700;
color: var(--text-main);
line-height: 1.3;
margin: 2px 0;
}
/* =========================================
MOBILE: HIDE ADVANCED NAV ITEMS
========================================= */
@media (max-width: 800px) {
#nav-generate,
#nav-tournament { display: none !important; }
}
.nav-item.active i {
color: var(--accent);
}
.status-badge i, .match-team i {
display: inline-block;
vertical-align: text-bottom;
margin-right: 4px;
}
.stat-icon i {
width: 28px;
height: 28px;
stroke-width: 1.5px;
}
/* --- Logic Option Expander Animations --- */
.logic-desc-expander {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.3s ease;
width: 100%;
}
.logic-option.active .logic-desc-expander {
max-height: 200px;
opacity: 1;
}
/* =========================================
SaaS FOOTER (GLOBAL)
========================================= */
.saas-footer {
background: var(--bg-base);
color: var(--text-dim);
padding: 80px 20px 40px;
border-top: 1px solid var(--border-subtle);
font-family: var(--font-family, 'DM Sans', sans-serif);
margin-top: auto; /* THIS anchors it to the bottom! */
width: 100%;
}
.saas-footer-content {
max-width: 1100px;
margin: 0 auto;
}
.footer-top {
display: flex;
justify-content: space-between;
gap: 60px;
margin-bottom: 60px;
flex-wrap: wrap;
}
.footer-brand {
flex: 2;
min-width: 280px;
}
.footer-logo {
height: 35px;
margin-bottom: 20px;
/* Forces logo to stay correct color even on light themes */
filter: none !important;
}
.footer-brand p {
font-size: 15px;
line-height: 1.6;
color: #8e8e93;
max-width: 350px;
}
.footer-links {
flex: 3;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 40px;
}
.footer-column h4 {
color: #ffffff;
font-size: 18px;
font-weight: 700;
margin-bottom: 24px;
letter-spacing: 0.5px;
}
.footer-column a {
display: block;
color: #8e8e93;
text-decoration: none;
font-size: 15px;
margin-bottom: 14px;
transition: color 0.2s ease;
font-weight: 500;
}
.footer-column a:hover {
color: var(--accent);
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 30px;
border-top: 1px solid var(--border-subtle);
font-size: 13px;
flex-wrap: wrap;
gap: 20px;
}
.footer-legal {
display: flex;
gap: 24px;
}
.footer-legal a {
color: #8e8e93;
text-decoration: none;
transition: color 0.2s ease;
}
.footer-legal a:hover {
color: #ffffff;
}
@media (max-width: 800px) {
.saas-footer { padding: 60px 20px 30px; }
.footer-top { flex-direction: column; gap: 40px; margin-bottom: 40px;}
.footer-bottom { flex-direction: column-reverse; text-align: center; }
}
/* --- SIDEBAR ACCORDION CHEVRON FLIP --- */
.nav-group-header svg {
transition: transform 0.3s ease !important; /* Smooth animation */
}
/* When the group is open, rotate the chevron 180 degrees (pointing up) */
.nav-group.open > .nav-group-header svg {
transform: rotate(180deg);
}
/* Same chevron-down icon + rotate-on-open pattern, reused by the dashboard
accordion toggles (Session Summary, Rotation Engine, Queue Racks) so they
match the sidebar instead of using ad-hoc "▴/▾" glyphs. */
.accordion-chevron {
transition: transform 0.3s ease;
}
.accordion-chevron.is-open {
transform: rotate(180deg);
}
/* --- TOURNAMENT TYPE CARDS --- */
.tourney-type-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.tourney-type-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 8px;
border: 1.5px solid var(--border-subtle);
background: var(--bg-surface);
cursor: pointer;
transition: border-color 0.18s, background 0.18s;
position: relative;
}
.tourney-type-card:hover {
border-color: var(--accent);
background: var(--bg-surface);
}
.tourney-type-card.selected {
border-color: var(--accent);
background: var(--bg-surface);
}
.ttc-icon {
font-size: 24px;
line-height: 1;
flex-shrink: 0;
}
.ttc-body {
flex: 1;
min-width: 0;
}
.ttc-name {
font-size: 13px;
font-weight: 700;
color: #fff;
line-height: 1.2;
}
.ttc-desc {
font-size: 11px;
color: var(--text-dim);
margin-top: 2px;
line-height: 1.3;
}
.ttc-meta {
font-size: 11px;
color: var(--accent);
margin-top: 4px;
font-weight: 400;
opacity: 0.85;
}
.ttc-check {
font-size: 13px;
font-weight: 900;
color: var(--accent);
opacity: 0;
transition: opacity 0.15s;
flex-shrink: 0;
}
.tourney-type-card.selected .ttc-check {
opacity: 1;
}
/* ============================================
TOURNAMENT SETUP MODAL — REDESIGN
============================================ */
.tsetup-card {
max-width: 1200px !important;
max-height: 95vh;
overflow-y: auto;
padding: 32px 36px 28px !important;
}
.tsetup-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 24px;
}
.tsetup-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 4px;
}
.tsetup-title {
font-size: 24px;
font-weight: 900;
font-style: italic;
letter-spacing: -0.5px;
color: #fff;
line-height: 1;
margin: 0;
}
/* Hero name input */
.tsetup-name-row {
margin-bottom: 24px;
}
.tsetup-name-input {
width: 100%;
background: transparent;
border: none;
border-bottom: 2px solid var(--border-subtle);
border-radius: 0;
padding: 10px 0;
font-size: 18px;
font-weight: 700;
color: #fff;
outline: none;
transition: border-color 0.2s;
box-sizing: border-box;
}
.tsetup-name-input::placeholder {
color: rgba(255,255,255,0.2);
font-weight: 400;
}
.tsetup-name-input:focus {
border-bottom-color: var(--accent);
}
/* Two-column body */
.tsetup-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
align-items: start;
}
.tsetup-col-left,
.tsetup-col-right {
display: flex;
flex-direction: column;
}
/* Section label */
.tsetup-section-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border-subtle);
}
/* Format pills */
.tsetup-format-pills {
display: flex;
gap: 8px;
}
.tsetup-pill {
flex: 1;
padding: 8px 12px;
border-radius: 8px;
border: 1.5px solid var(--border-subtle);
background: var(--bg-surface);
color: var(--text-dim);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
text-align: center;
}
.tsetup-pill:hover {
border-color: var(--accent);
color: #fff;
}
.tsetup-pill.active {
border-color: var(--accent);
background: rgba(255, 107, 53, 0.12);
color: #fff;
}
/* Field grid inside right column */
.tsetup-field-grid {
display: grid;
gap: 10px;
}
.tsetup-field-grid--2 {
grid-template-columns: 1fr 1fr;
}
/* Tighten label spacing inside this modal */
.tsetup-col-right .splash-input-group label,
.tsetup-col-right .splash-input-group > label {
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 5px;
}
/* Footer */
.tsetup-footer {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--border-subtle);
display: flex;
justify-content: flex-end;
}
.tsetup-cta {
padding: 12px 32px !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: 0.02em;
border-radius: 8px !important;
min-width: 220px;
}
/* Tighter type cards inside the redesigned modal */
.tsetup-col-left .tourney-type-grid {
gap: 8px;
}
.tsetup-col-left .tourney-type-card {
padding: 10px 12px;
}
.tsetup-col-left .ttc-icon {
font-size: 18px;
}
.tsetup-col-left .ttc-name {
font-size: 13px;
}
.tsetup-col-left .ttc-desc {
font-size: 11px;
}
.tsetup-col-left .ttc-meta {
font-size: 11px;
margin-top: 3px;
}
/* ============================================
TOURNAMENT DASHBOARD — BANNER & STATES
============================================ */
/* Banner pre-generation state */
.tourney-banner-pre-gen {
border: 1px solid var(--accent-border);
background: var(--accent-soft);
box-shadow: 0 0 0 1px var(--accent-border) inset;
}
.tourney-banner-pre-gen #tourney-banner-title {
color: var(--accent);
margin-bottom: 4px;
}
/* Banner post-generation state */
.tourney-banner-success {
border: 1px solid #4ade80;
background: rgba(74, 222, 128, 0.05);
box-shadow: 0 0 20px rgba(74, 222, 128, 0.08);
}
.tourney-banner-success #tourney-banner-title {
color: #4ade80;
margin-bottom: 4px;
}
.tourney-banner-success #tourney-banner-desc {
color: var(--text-dim);
}
/* Seeding locked badge */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.badge-locked {
background: rgba(168, 85, 247, 0.12);
color: #d8b4fe;
}
.badge.hidden {
display: none;
}
/* Teams sidebar wrapper — hidden by default post-gen */
#tourney-active-layout.tourney-dashboard-single {
display: block !important;
}
#tourney-active-layout.tourney-dashboard-single .tourney-active-main {
width: 100%;
max-width: none;
}
#tourney-home.tny-page-shell:not(.hidden),
#tourney-dash.tny-page-shell:not(.hidden),
#tourney-teams-page.tny-page-shell:not(.hidden) {
margin-top: 18px;
}
#tourney-active-layout.tourney-dashboard-single #tourney-teams-sidebar {
display: none !important;
}
#tourney-teams-sidebar {
transition: opacity 0.2s, visibility 0.2s;
}
#tourney-teams-sidebar.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
#tourney-teams-toggle {
opacity: 0.7;
transition: opacity 0.15s;
}
#tourney-teams-toggle:hover {
opacity: 1;
}
/* --- TOURNAMENT QOL POLISH --- */
.tourney-banner-success {
border: 1px solid var(--accent-border) !important;
background: var(--accent-soft) !important;
box-shadow: 0 0 0 1px var(--accent-border) inset;
}
.badge-locked {
background: rgba(255, 255, 255, 0.1);
color: var(--text-dim);
border: 1px solid var(--border-subtle);
font-size: 11px;
}
/* session-info-card override — grid layout per brand-design §6.5 */
.session-info-card .info-label {
display: block;
font-size: 11px;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-faint);
}
/* --- TOURNAMENT SETUP CARDS --- */
.tourney-type-card {
background: var(--bg-surface-elevated);
border: 2px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 20px;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.tourney-type-card:hover {
border-color: var(--border-focus);
background: var(--bg-surface-hover);
}
.tourney-type-card.selected {
border-color: var(--accent);
background: var(--accent-glow);
}
.tsetup-pill {
opacity: 0.6;
transition: all 0.2s;
border: 2px solid transparent;
}
.tsetup-pill.active {
opacity: 1;
border-color: var(--accent) !important;
background: var(--accent-glow) !important;
color: var(--accent) !important;
}
/* ==========================================
GUIDE CMS THEME OVERRIDES
Strictly enforces uniform typography, distinct header sizes, and spacing
========================================== */
#guide-dynamic-content {
font-family: var(--font-family) !important;
}
#guide-dynamic-content * {
font-family: inherit !important;
}
/* --- BODY TEXT & SPACING --- */
#guide-dynamic-content p {
color: var(--text-dim) !important;
font-size: 15px !important; /* Uniform body size */
line-height: 1.5 !important;
}
#guide-dynamic-content span,
#guide-dynamic-content li,
#guide-dynamic-content div {
color: var(--text-dim) !important;
font-size: 15px !important; /* Uniform body size */
line-height: 1.7 !important;
}
#guide-dynamic-content p {
margin-top: 0 !important;
margin-bottom: 3px !important;
}
/* --- HEADINGS (DISTINCT SIZES) --- */
#guide-dynamic-content h1,
#guide-dynamic-content h2,
#guide-dynamic-content h3,
#guide-dynamic-content h4,
#guide-dynamic-content h5,
#guide-dynamic-content h6 {
color: var(--text-main) !important;
font-weight: 800 !important;
margin-top: 35px !important;
margin-bottom: 15px !important;
line-height: 1.2 !important;
}
/* H1: Main Title (Largest) */
#guide-dynamic-content h1 {
font-size: 24px !important;
letter-spacing: -0.03em !important;
margin-top: 0 !important;
}
/* H2: Major Section (Underlined for distinction) */
#guide-dynamic-content h2 {
font-size: 24px !important;
letter-spacing: -0.02em !important;
border-bottom: 1px solid var(--border-subtle) !important;
padding-bottom: 8px !important;
}
/* H3: Sub-section */
#guide-dynamic-content h3 {
font-size: 18px !important;
}
/* H4: Small Accent Header */
#guide-dynamic-content h4 {
font-size: 15px !important;
color: var(--accent) !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
/* --- BOLD TEXT --- */
#guide-dynamic-content strong,
#guide-dynamic-content b {
color: var(--text-main) !important;
font-weight: 700 !important;
}
/* --- LISTS --- */
#guide-dynamic-content ul,
#guide-dynamic-content ol {
margin-top: 0 !important;
margin-bottom: 0px !important;
padding-left: 25px !important;
}
#guide-dynamic-content li {
margin-bottom: 10px !important;
}
/* Make bullet points your app's accent color */
#guide-dynamic-content li::marker {
color: var(--accent) !important;
font-weight: bold !important;
}
/* --- LINKS --- */
#guide-dynamic-content a {
color: var(--accent) !important;
text-decoration: underline !important;
font-weight: 600 !important;
transition: opacity 0.2s ease !important;
}
#guide-dynamic-content a:hover {
opacity: 0.7 !important;
}
/* --- DIVIDERS (Horizontal Rule) --- */
#guide-dynamic-content hr {
border: none !important;
border-top: 1px solid var(--border-subtle) !important;
margin: 35px 0 !important;
}
/* --- INPUT ERROR STATES --- */
.input-error {
border-color: var(--danger) !important;
box-shadow: 0 0 0 1px var(--danger) !important;
background: rgba(255, 59, 48, 0.05) !important;
}
.error-msg {
animation: fade-in-up 0.2s ease-out forwards;
}
.error-tip {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 10000;
background: var(--bg-surface-elevated, #1a1a1a);
color: var(--danger, #ff3b30);
border: 1px solid var(--danger, #ff3b30);
border-radius: 6px;
padding: 6px 10px;
font-size: 11px;
font-weight: 700;
line-height: 1.3;
white-space: nowrap;
box-shadow: 0 6px 16px rgba(0,0,0,0.5);
pointer-events: none;
}
.error-tip::before {
content: '';
position: absolute;
top: -5px;
left: 14px;
width: 8px;
height: 8px;
background: var(--bg-surface-elevated, #1a1a1a);
border-left: 1px solid var(--danger, #ff3b30);
border-top: 1px solid var(--danger, #ff3b30);
transform: rotate(45deg);
}
@keyframes fade-in-up {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* --- Dash Roster Column Fix --- */
.dash-roster-column {
display: flex;
flex-direction: column;
gap: 8px; /* Breathing room between players */
}
/* The New Player Card */
.roster-card {
background: var(--bg-surface-elevated);
border: 1px solid var(--border-subtle);
border-radius: 8px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color 0.2s;
}
.roster-card:hover {
border-color: var(--border-focus);
}
.roster-card.resting {
opacity: 0.6;
border-style: dashed;
}
/* Top Line: Identity */
.roster-top-line {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 700;
color: #fff;
}
.roster-name {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Bottom Line: Stats & Actions */
.roster-bottom-line {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
}
.roster-stats-group {
display: flex;
align-items: center;
gap: 10px;
color: var(--text-dim);
}
.roster-stats-group b.text-accent { color: var(--accent); font-weight: 800; }
.roster-stats-group b.text-danger { color: var(--danger); font-weight: 800; }
.roster-action-group {
display: flex;
gap: 6px;
}
/* Tiny Square Buttons for the Dashboard */
.btn-tiny-square {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-surface-hover);
border: 1px solid var(--border-focus);
border-radius: 6px;
color: var(--text-dim);
cursor: pointer;
transition: all 0.2s;
}
.btn-tiny-square:hover {
color: #fff;
border-color: #666;
}
.btn-tiny-square.danger:hover {
color: var(--danger);
border-color: rgba(255, 59, 48, 0.4);
background: rgba(255, 59, 48, 0.1);
}
/* =========================================
PREMIUM APP LOADING SCREEN SKELETON
========================================= */
.app-loader-wrapper {
position: fixed;
inset: 0;
background: var(--bg-base);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 99999;
transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s ease;
}
.app-loader-container {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
}
.app-loader-logo {
height: 50px;
width: auto;
object-fit: contain;
animation: loader-logo-pulse 2s infinite ease-in-out;
}
.app-loader-spinner {
width: 36px;
height: 36px;
border: 3.5px solid rgba(197, 245, 0, 0.08);
border-top-color: var(--accent);
border-radius: 50%;
animation: loader-spin 0.9s infinite linear;
box-shadow: 0 0 20px var(--accent-glow);
}
@keyframes loader-logo-pulse {
0%, 100% { transform: scale(1); opacity: 0.85; }
50% { transform: scale(1.06); opacity: 1; filter: drop-shadow(0 0 20px var(--accent-glow)); }
}
/* =========================================
MOBILE FIX: Past Session Modal
========================================= */
#past-sessions-list {
border-top: none;
}
.archive-session-row {
display: grid;
grid-template-columns: 44px minmax(0, 1.4fr) minmax(0, 2.6fr) 96px;
gap: 14px;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid var(--border-subtle);
cursor: pointer;
transition: background 0.15s ease;
}
.archive-session-details {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
gap: 14px;
min-width: 0;
}
.archive-session-details > * { min-width: 0; }
.archive-session-row:hover {
background: var(--bg-surface);
}
.archive-session-action .btn-tiny {
width: 78px;
justify-content: center;
}
.archive-session-thumb {
width: 44px;
height: 44px;
border-radius: 8px;
background: transparent;
border: 1px solid var(--border-subtle);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.archive-session-main {
min-width: 0;
}
.archive-session-title-wrap {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.archive-session-title {
font-size: 15px;
font-weight: 700;
letter-spacing: -0.1px;
color: var(--text-main);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.archive-session-meta {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-dim);
margin-top: 4px;
flex: 0 0 auto;
}
.archive-session-inline-meta {
display: inline-flex;
align-items: center;
gap: 7px;
min-width: 0;
max-width: 100%;
}
.archive-session-inline-meta img,
.archive-session-meta img {
width: 16px;
height: 16px;
flex: 0 0 auto;
filter: invert(1);
opacity: 0.78;
}
.archive-session-inline-meta .archive-session-col-value { margin-top: 0; }
.archive-session-mobile-meta,
.archive-session-caret { display: none; }
.archive-session-col-label {
font-size: 13px;
font-weight: 700;
color: var(--text-main);
}
.archive-session-col-value {
font-size: 12px;
color: var(--text-dim);
margin-top: 3px;
}
.archive-session-arrow {
color: var(--text-dim);
}
.archive-session-arrow i {
width: 14px;
height: 14px;
}
.archive-stat-value {
font-size: 1em;
}
.archive-stat-label {
color: var(--text-dim);
font-weight: 400;
font-family: inherit;
font-size: 11px;
}
.ps-view-meta-row {
display: flex;
flex-wrap: wrap;
gap: 40px;
margin: 0 0 24px 0;
}
.ps-view-meta-label {
font-size: 12px;
font-weight: 700;
color: var(--text-dim);
margin-bottom: 6px;
}
.ps-view-meta-value {
font-size: 1.1rem;
font-weight: 700;
color: var(--text-main);
}
.ps-view-toolbar {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 0px;
/* Stacks directly below #ps-view-category-tabs (top:0 on this page, since
the global topbar is hidden here — see #ps-view-category-tabs override
below). --ps-tabs-h is measured/set in renderPastSessionDetail()
(archive.ts) so the offset only accounts for the tabs when they're
actually visible (multi-category sessions). */
position: sticky;
top: var(--ps-tabs-h, 0px);
z-index: 14;
background: var(--bg-base);
padding-top: 18px;
margin-top: -18px;
padding-bottom: 18px;
}
/* #ps-view-category-tabs reuses .es-category-tabs (top:53px, sized for
End Session's page which keeps the global topbar visible) — Past Session
Detail hides the topbar entirely, so this tab row sticks flush to the
viewport top instead. Also gets its own breathing room below the tabs
(the shared .es-category-tabs margin-bottom:8px reads cramped once
.ps-view-toolbar's sticky background sits right on top of it). */
#ps-view-category-tabs.es-category-tabs {
top: 0;
margin-bottom: 16px;
}
.ps-view-match-row {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 28px 80px 60px auto;
gap: 16px;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--border-subtle);
transition: background 0.15s ease;
}
.ps-view-match-row:hover {
background: var(--bg-surface);
}
.ps-view-match-row:last-child {
border-bottom: none;
}
.ps-view-match-score-value {
font-size: 15px;
font-weight: 700;
color: var(--text-main);
}
.ps-view-match-score-dash {
color: var(--text-faint);
margin: 0 3px;
}
.ps-view-match-score-win {
font-size: 11px;
font-weight: 700;
color: var(--accent);
border: 1px solid var(--accent-border);
background: var(--accent-soft);
padding: 3px 8px;
border-radius: 4px;
letter-spacing: 0.4px;
}
.ps-view-match-teams {
min-width: 0;
}
.ps-view-match-winner {
font-size: 13px;
font-weight: 500;
letter-spacing: -0.1px;
color: var(--accent);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ps-view-match-warning-col {
display: flex;
align-items: center;
justify-content: center;
}
.ps-view-match-dupr-warning {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--warn);
}
.ps-view-match-dupr-warning img {
width: 10px !important;
height: 10px !important;
filter: brightness(0) saturate(100%) !important;
}
.ps-view-match-loser {
font-size: 13px;
font-weight: 500;
letter-spacing: -0.1px;
color: #fff;
margin-top: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ps-view-match-col-label {
font-size: 13px;
font-weight: 700;
color: var(--text-main);
}
.ps-view-match-col-value {
font-size: 12px;
color: var(--text-dim);
margin-top: 3px;
}
.ps-view-match-action {
display: flex;
justify-content: flex-end;
}
@media (max-width: 820px) {
#ps-view-title {
line-height: 1.25 !important;
margin-bottom: 3px !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
letter-spacing: -0.01em !important;
gap: 6px !important;
}
.ps-view-meta-row {
gap: 20px !important;
margin-left: 0 !important;
}
#ps-view-match-log {
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch !important;
}
.ps-view-match-row {
grid-template-columns: 56px minmax(0, 1fr) 24px auto !important;
padding: 12px 0 !important;
}
.ps-view-match-col {
display: none !important;
}
.archive-toolbar {
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
.archive-toolbar-actions {
width: 100% !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
}
.archive-toolbar-actions .btn {
width: 100% !important;
min-height: 40px !important;
}
.archive-head-wrap {
display: none !important;
}
/* A little extra breathing room on the edges for the browsing views
(Home, the Open Play archive, Club Analytics, Master Roster, Funds, Account/
Settings) — deliberately NOT applied to #dash-active-session, #view-
queue, or #view-session_lb (the live session dashboard and its sub-
pages), which keep their existing edge-to-edge layout untouched. */
#view-home,
#dash-no-session,
#view-players,
#view-database,
#view-funds,
#view-account,
#tourney-past {
width: 100% !important;
padding-left: 8px !important;
padding-right: 8px !important;
}
/* Mobile landing menus should use the same full content width as Home.
Settings inherits the desktop split-pane's flex-start alignment, so
explicitly stretch both menu wrappers on phones. */
#view-account .settings-layout,
#view-database .mobile-club-data-menu {
width: 100% !important;
max-width: none !important;
align-self: stretch;
}
/* The desktop welcome greeting is omitted on phones to bring the banner
and event controls higher into the viewport. */
.home-welcome-header {
display: none !important;
}
/* Let the Home/profile banner use the complete phone viewport while the
surrounding controls retain the standard mobile content inset. */
#home-image-banner {
width: calc(100% + 44px);
max-width: none;
margin-left: -22px;
margin-right: -22px;
border: none;
border-radius: 0;
}
/* The active tournament shortcut is useful on desktop but consumes too
much of the first mobile viewport; the tournament remains available
from the event list and navigation. */
#home-active-banner {
display: none !important;
}
/* Archive headings should stay compact on phones, with enough separation
from the search/action row to keep the header from feeling cramped. */
#view-home > .home-events-toolbar-title,
#dash-no-session > .home-events-toolbar-title,
#tourney-past > .home-events-toolbar-title {
font-size: 18px !important;
line-height: 1.25 !important;
margin-top: 16px !important;
margin-bottom: 16px !important;
}
/* Keep the section title above, then place the search field and its
Create/New action on one compact row on phones. */
.home-events-toolbar-title { order: 0; flex: 1 1 auto !important; min-width: 0; margin: 0 !important; }
.home-events-toolbar > div:last-child,
.home-events-toolbar > #btn-new-tourney-archive {
order: 1;
flex: 0 0 auto !important;
margin-left: 0;
}
.home-events-toolbar {
flex-wrap: nowrap;
column-gap: 8px;
}
.home-events-toolbar .search-box {
order: 0;
flex: 1 1 auto !important;
min-width: 0;
max-width: none !important;
}
/* Home owns its filter row inside the command bar. On desktop it is a
grid column; on phones it must become a second, independently scrolling
row so Search and Create Event never squeeze or overlap it. */
#home-sticky-toolbar #home-events-header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: 8px;
row-gap: 10px;
}
#home-sticky-toolbar #home-events-header > .search-box {
grid-column: 1;
grid-row: 1;
width: 100%;
}
#home-sticky-toolbar #home-events-header > #home-tourney-filter {
grid-column: 1 / -1;
grid-row: 2;
width: 100%;
margin-bottom: 0 !important;
}
#home-sticky-toolbar #home-events-header > div:nth-child(3) {
grid-column: 2;
grid-row: 1;
min-width: 0;
}
/* Match the archive filters to the compact Resume/View action size on
phones. Keep the complete filter set on one scrollable row instead of
allowing large pills to wrap into a tall control block. */
.home-filter-row {
flex-wrap: nowrap !important;
justify-content: flex-start !important;
width: 100%;
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.home-filter-row::-webkit-scrollbar { display: none; }
.home-filter-row > div:first-child {
display: flex;
flex: 0 0 auto;
gap: 8px;
}
.home-filter-pill {
flex: 0 0 auto;
width: auto;
min-height: 40px;
height: 40px;
padding: 4px 10px;
font-size: 12px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Session/event rows keep title+date, location, status, and action from
desktop, reflowed onto two compact lines (title+date, then location +
status + action together) instead of one wide row or a tall stack, so
nothing wastes vertical space and everything stays visible without
horizontal scroll. The thumbnail and Players/Teams count are dropped
on mobile entirely — decorative/secondary, not needed at a glance.
Uses dedicated classes (not nth-child) so the DOM order of the row's
children can change without silently breaking this layout again. */
.archive-session-thumb,
.archive-session-players,
.archive-session-col-label,
.archive-session-date { display: none !important; }
.archive-session-details { display: contents !important; }
.archive-session-row {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
column-gap: 10px !important;
row-gap: 2px !important;
padding: 8px 0 !important;
}
.archive-session-main { flex: 1 1 100% !important; }
/* flex-basis:0 (not auto) so Location only ever claims left-over space
and truncates instead of pushing Status/View onto a wrapped 3rd line
when the location text is long. */
.archive-session-loc {
flex: 1 1 0% !important;
min-width: 0 !important;
overflow: hidden !important;
order: 1 !important;
}
.archive-session-loc .archive-session-col-value {
font-size: 13px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.archive-session-row > .home-tourney-status,
.archive-session-details > .home-tourney-status { flex: 0 0 auto !important; order: 2 !important; }
.archive-session-row > .archive-session-action,
.archive-session-details > .archive-session-action {
flex: 0 0 auto !important;
order: 3 !important;
margin-left: auto !important;
}
.archive-session-stats-inline {
display: flex !important;
align-items: center !important;
gap: 5px !important;
margin-top: 5px !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--text-main) !important;
}
.archive-stats-sep { color: var(--text-dim); font-weight: 400; }
.archive-stats-badge-right { margin-left: auto !important; }
.archive-session-title-wrap {
min-width: 0 !important;
overflow: hidden !important;
}
.archive-session-title {
font-size: 12px;
font-weight: 700 !important;
line-height: 1.25 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
word-break: unset !important;
overflow-wrap: unset !important;
}
.archive-session-meta {
margin-top: 1px !important;
font-size: 13px !important;
line-height: 1.2 !important;
}
.home-tourney-status {
padding: 3px 9px !important;
font-size: 10px !important;
}
.archive-session-action .btn-tiny {
min-height: 30px !important;
padding: 5px 12px !important;
font-size: 13px !important;
}
/* Directly openable sessions use a mobile-first card: event icon, three
compact text lines, and one clear affordance to open/resume the item.
Keep the desktop status/action controls out of this card so the row
stays calm and tappable on a phone. */
.archive-session-row-openable {
display: grid !important;
grid-template-columns: 44px minmax(0, 1fr) auto 18px !important;
align-items: center !important;
column-gap: 12px !important;
row-gap: 0 !important;
min-height: 76px;
margin-bottom: 10px;
padding: 14px !important;
border: none !important;
border-radius: 8px !important;
background: var(--bg-surface) !important;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 120ms ease, background-color 120ms ease;
}
.archive-session-row-openable:hover {
background: var(--bg-surface-hover) !important;
}
.archive-session-row-openable:active {
transform: scale(0.985);
background: var(--bg-surface-hover) !important;
}
.archive-session-row-openable.is-loading:active {
transform: none;
}
.archive-session-row-openable .archive-session-thumb {
display: flex !important;
grid-column: 1;
grid-row: 1;
width: 44px;
height: 44px;
border: none !important;
border-radius: 8px;
background: var(--bg-surface-hover);
}
.archive-session-row-openable .archive-session-thumb-tournament {
background: #3a2d0c !important;
}
.archive-session-row-openable .archive-session-thumb-open-play {
background: #073524 !important;
}
.archive-session-row-openable .archive-session-thumb-category {
background: #0a315f !important;
}
.archive-session-row-openable .archive-session-main {
grid-column: 2;
grid-row: 1;
min-width: 0;
width: 100%;
}
.archive-session-row-openable .archive-session-title-wrap {
display: block !important;
min-width: 0;
}
.archive-session-row-openable .archive-session-title {
display: block;
font-size: 12px;
line-height: 1.25 !important;
}
.archive-session-row-openable .archive-session-meta,
.archive-session-row-openable .archive-session-loc,
.archive-session-row-openable .archive-session-players,
.archive-session-row-openable .archive-session-action {
display: none !important;
}
.archive-session-row-openable .home-tourney-status {
display: inline-flex !important;
grid-column: 3;
grid-row: 1;
align-items: center;
align-self: center;
justify-self: end !important;
width: 68px !important;
min-width: 68px !important;
padding: 4px 8px !important;
font-size: 10px !important;
}
.archive-session-row-openable .archive-session-mobile-meta {
display: flex;
flex-direction: column;
gap: 3px;
margin-top: 5px;
min-width: 0;
color: var(--text-dim);
font-size: 12px;
line-height: 1.25;
}
.archive-session-row-openable .archive-session-mobile-meta span {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.archive-session-row-openable .archive-session-mobile-meta img {
width: 13px;
height: 13px;
flex: 0 0 auto;
filter: invert(1);
opacity: 0.65;
}
.archive-session-row-openable .archive-session-caret {
display: flex;
grid-column: 4;
grid-row: 1;
align-items: center;
justify-content: center;
}
.archive-session-row-openable .archive-session-caret img {
width: 16px;
height: 16px;
filter: invert(1);
opacity: 0.55;
transform: rotate(-90deg);
}
.archive-session-row-openable.is-loading .archive-session-caret img {
display: none;
}
.archive-session-row-openable.is-loading .archive-session-caret::before {
content: '';
display: block;
width: 14px;
height: 14px;
border: 2px solid var(--border-subtle);
border-top-color: var(--text-main);
border-radius: 50%;
animation: archive-session-row-spin 0.75s linear infinite;
}
}
@keyframes archive-session-row-spin {
to { transform: rotate(360deg); }
}
@keyframes loader-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Desktop density pass: keep layout, reduce vertical footprint */
@media (min-width: 1200px) {
.main-page-search {
flex: 0 0 360px !important;
width: 360px;
max-width: 360px !important;
}
.main-content { padding: 0 24px 24px; }
.action-bar { padding: 8px 0; margin-bottom: 8px; }
.action-title { font-size: 13px; }
.action-buttons .btn { min-height: 30px; padding: 6px 10px; font-size: 11px; }
.action-buttons .btn i,
.action-buttons .btn .app-icon-svg { width: 13px; height: 13px; }
.action-buttons .btn.btn-primary i,
.action-buttons .btn.btn-primary .app-icon-svg { width: 15px; height: 15px; }
.section-header { margin-bottom: 12px; }
.section-title { font-size: 15px; }
.section-subtitle { font-size: 13px; margin-top: 2px; }
.dash-panel { border-radius: 8px; }
.panel-header { padding: 6px 16px; }
.panel-header h3 { font-size: 15px; }
.category-live-panel-title { font-size: 15px; }
.panel-body { padding: 12px; }
.p-20 { padding: 12px !important; }
.session-info-card { padding: 12px; margin-bottom: 10px; gap: 10px; }
.info-label { font-size: 11px; }
.info-value { font-size: 15px; }
.dash-stats-grid { gap: 10px; margin-bottom: 10px; }
.dash-stats-grid .dash-panel { min-height: 86px; }
.courts-container { gap: 10px; }
.court-card { padding: 12px; }
.court-header { padding-bottom: 8px !important; margin-bottom: 10px !important; }
.logic-selector { gap: 10px; }
.logic-option { min-height: 104px; padding: 10px; }
.logic-title { font-size: 15px; }
}
/* Icon hierarchy */
.nav-item i, .nav-item .app-icon-svg { width: 18px; height: 18px; opacity: 0.95; }
.panel-header i, .panel-header .app-icon-svg { width: 16px; height: 16px; }
.section-title i, .section-title .app-icon-svg { width: 18px; height: 18px; }
.btn-primary i, .btn-primary .app-icon-svg { width: 16px; height: 16px; }
.btn-secondary i, .btn-secondary .app-icon-svg,
.btn-ghost i, .btn-ghost .app-icon-svg { width: 14px; height: 14px; }
.btn-tiny i, .btn-tiny .app-icon-svg { width: 12px; height: 12px; }
/* Touch ergonomics — larger tap targets for buttons/inputs, NOT sidebar nav */
@media (pointer: coarse) {
.btn { min-height: 44px; padding: 10px 14px; }
.btn-icon { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
.match-type-custom-btn {
width:44px !important;
height:44px !important;
min-width:44px !important;
min-height:44px !important;
max-width:44px !important;
max-height:44px !important;
}
.btn-tiny { min-height: 40px; padding: 8px 12px; font-size: 13px; }
.action-buttons { gap: 10px; }
.toolbar-select, .modal-input, .search-input { min-height: 44px; }
.logic-option { min-height: 132px; }
}
/* Icon color discipline — img tags use CSS filter since currentColor doesn't apply */
/* Default: white icons for dark backgrounds (already set per-icon via filter:invert(1)) */
/* btn-primary has a light/green background → icons must be black */
.btn-primary img { filter: brightness(0) !important; }
/* btn-danger has colored background → keep white */
.btn-danger img { filter: invert(1); }
/* Legacy selectors kept for any remaining SVG/i usage */
i[data-lucide], .app-icon-svg { color: var(--text-dim); }
.btn-primary i, .btn-primary .app-icon-svg { color: #111; }
.btn-danger i, .btn-danger .app-icon-svg { color: currentColor; }
.nav-item.active i, .nav-item.active .app-icon-svg { color: var(--accent); }
.status-badge.playing i, .status-badge.playing .app-icon-svg { color: var(--live); }
.text-accent i, .text-accent .app-icon-svg { color: currentColor; }
/* =========================================================
BRAND-DESIGN.MD ENFORCEMENT (SaaS dark consistency pass)
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');
:root {
--bg-base: #0a0b0d;
--bg-surface: #141518;
--bg-surface-elevated: #141518;
--bg-surface-hover: #22252a;
--border-subtle: #343941;
--border-strong: #343941;
--border-focus: #c4f02e;
--text-main: #e8ebef;
--text-soft: #9ba3af;
--text-dim: #9ba3af;
--text-faint: #646c79;
--text-dim2: #646c79;
--accent: #c4f02e;
--accent-hover: #d0ff3a;
--accent-soft: rgba(196,240,46,0.10);
--accent-ghost: rgba(196,240,46,0.05);
--accent-border: rgba(196,240,46,0.22);
--accent-glow: rgba(196,240,46,0.10);
}
body {
font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
letter-spacing: -0.005em;
}
.mono, .font-mono, .gt-time, .court-num {
font-family: 'Geist Mono', ui-monospace, monospace !important;
}
.main-content {
padding: 18px 24px 80px;
background: var(--bg-base);
}
.action-bar {
padding: 0 0 14px;
margin-bottom: 14px;
border-bottom: 1px solid var(--border-subtle);
background: var(--bg-base);
}
.action-title {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
}
.action-buttons { gap: 6px; }
.btn {
border-radius: 8px;
font-size: 15px;
font-weight: 500;
min-height: 34px;
padding: 7px 12px;
border-color: var(--border-subtle);
}
.btn-primary {
font-weight: 600;
box-shadow: none !important;
}
/* toggleAutoPull() swaps this button between .btn-primary (ON) and
.btn-secondary (OFF) classes entirely (render-main.ts) — only .btn-primary
picks up the app-wide pill border-radius, so without this the OFF state
rendered with square corners while ON was a pill. Pin the shape here so
both states match regardless of which button variant class is active. */
#btn-auto-pull {
border-radius: 999px !important;
}
#btn-auto-pull.auto-pull-active {
background: var(--accent);
color: var(--accent-btn-txt);
border-color: color-mix(in srgb, var(--accent) 70%, #fff 30%);
box-shadow: none !important;
}
#btn-auto-pull.auto-pull-active:hover {
background: var(--accent-hover);
border-color: color-mix(in srgb, var(--accent) 78%, #fff 22%);
}
#btn-auto-pull.auto-pull-active .btn-text {
letter-spacing: 0.04em;
}
#btn-auto-pull.auto-pull-active img {
filter: brightness(0) !important;
opacity: 1;
}
.btn-ghost {
border-color: transparent;
color: var(--text-dim);
}
.btn-ghost:hover {
background: var(--bg-surface-elevated);
color: var(--text-main);
}
.section-header {
margin-bottom: 14px;
}
/* Cleanup overrides — all aligned to brand-design §6 */
.dash-panel, .rack, .preview-box { box-shadow: none !important; }
.court-card { box-shadow: none !important; }
/* court-header: no separator — gap on .court-card handles spacing */
.court-header {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
border-bottom: none !important;
}
.logic-option.active {
background: var(--accent-faint) !important;
}
.nav-item {
font-weight: 500;
border-radius: 8px;
}
.nav-item.active {
font-weight: 500;
background: var(--bg-surface-hover);
}
.nav-item.active::before {
content: "";
position: absolute;
left: -12px;
top: 7px;
bottom: 7px;
width: 2px;
background: var(--accent);
border-radius: 0 2px 2px 0;
}
/* =============================================================
pdlstack v2 design system — new component classes
(ported from pdlstack-revamp/project/styles.css)
============================================================= */
/* ── stat strip cells (used in v2-stat-strip) ── */
.stat-cell-new {
padding: 16px 20px;
border-right: 1px solid var(--border-subtle);
display: flex;
flex-direction: column;
gap: 6px;
}
.stat-cell-new:last-child { border-right: none; }
.stat-label-new {
font-size: 11px;
font-weight: 400;
letter-spacing: 0.08em;
color: var(--text-faint);
text-transform: uppercase;
margin-bottom: 2px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.stat-val-new {
font-size: 24px;
font-weight: 600;
color: var(--text-main);
letter-spacing: -0.02em;
display: flex;
align-items: baseline;
gap: 6px;
}
.stat-val-new.muted { color: var(--text-faint); }
/* Cells with long text (player names, rotation-engine names) need a smaller size than the
default 24px used by short numeric stats — .fs-title alone loses to .stat-val-new's later
cascade position, so pin it here with matching specificity. */
.stat-val-new.fs-title { font-size: 15px; }
.muted { color: var(--text-faint); }
.stat-tag {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--accent);
background: var(--accent-soft);
border: 1px solid var(--accent-border);
border-radius: 4px;
padding: 2px 6px;
}
/* ── panel-title (used in panel-header) ── */
.panel-header { background: transparent; }
.panel-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 600;
color: var(--text-main);
letter-spacing: -0.005em;
}
.panel-title .count, .count {
font-size: 11px;
font-weight: 500;
color: var(--text-dim);
background: var(--surface-3);
padding: 1px 7px;
border-radius: 8px;
border: 1px solid var(--border-subtle);
}
/* ── courts grid ── */
.courts-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
/* 1-5 courts → explicit desktop layouts; 6 courts → 3x2; larger counts fall back */
@media (min-width: 721px) {
.courts-grid:has(.court-card:nth-child(1)):not(:has(.court-card:nth-child(2))) {
grid-template-columns: minmax(0, 560px);
justify-content: center;
}
.courts-grid:has(.court-card:nth-child(2)):not(:has(.court-card:nth-child(3))) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.courts-grid:has(.court-card:nth-child(3)):not(:has(.court-card:nth-child(4))) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.courts-grid:has(.court-card:nth-child(4)):not(:has(.court-card:nth-child(5))) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.courts-grid:has(.court-card:nth-child(5)):not(:has(.court-card:nth-child(6))) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.courts-grid:has(.court-card:nth-child(6)):not(:has(.court-card:nth-child(7))) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* Narrow desktop band: the sidebar remains expanded through 1024px, so keep
the four-court cards readable just above the hamburger breakpoint. */
@media (min-width: 721px) and (max-width: 1199px) {
.courts-grid:has(.court-card:nth-child(4)):not(:has(.court-card:nth-child(5))) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.courts-grid:has(.court-card:nth-child(4)):not(:has(.court-card:nth-child(5))) .court-card {
min-height: 180px;
}
.courts-grid:has(.court-card:nth-child(5)):not(:has(.court-card:nth-child(6))) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.courts-grid:has(.court-card:nth-child(5)):not(:has(.court-card:nth-child(6))) .court-card {
min-height: 180px;
}
#dash-courts-container .court-card,
#courts-container .court-card {
min-height: 180px;
padding: 10px 12px;
gap: 6px;
}
#dash-courts-container .court-matchup-grid,
#courts-container .court-matchup-grid {
min-height: 72px;
padding: 6px;
margin-top: -2px;
margin-bottom: -2px;
}
#dash-courts-container .court-body,
#courts-container .court-body {
min-height: 64px;
padding: 10px 12px;
}
#dash-courts-container .court-body:has(.court-empty-icon),
#courts-container .court-body:has(.court-empty-icon) {
min-height: 56px;
}
#dash-courts-container .court-action-row,
#courts-container .court-action-row {
gap: 6px;
min-width: 0;
}
#dash-courts-container .court-action-row > .btn-icon,
#courts-container .court-action-row > .btn-icon {
width: 42px;
min-width: 42px;
max-width: 42px;
height: 42px;
min-height: 42px;
max-height: 42px;
}
#dash-courts-container .court-action-row > .btn,
#courts-container .court-action-row > .btn {
min-width: 0;
flex: 1 1 0;
flex-shrink: 1;
gap: 5px;
padding-left: 8px;
padding-right: 8px;
font-size: 13px;
}
#dash-courts-container .court-score-label-full,
#courts-container .court-score-label-full { display: none; }
#dash-courts-container .court-score-label-narrow,
#courts-container .court-score-label-narrow { display: inline; }
.category-overview-court-card .court-action-row {
gap: 6px;
min-width: 0;
}
.category-overview-court-card .court-action-row > .btn-icon {
width: 32px;
min-width: 32px;
max-width: 32px;
height: 32px;
min-height: 32px;
max-height: 32px;
}
.category-overview-court-card .court-action-row > .btn {
min-width: 0;
flex: 1 1 0;
flex-shrink: 1;
gap: 5px;
padding-left: 8px;
padding-right: 8px;
font-size: 13px;
}
.category-overview-court-card .court-score-label-full { display: none; }
.category-overview-court-card .court-score-label-narrow { display: inline; }
#view-queue .queue-court-card {
min-height: 180px;
padding: 10px 12px;
gap: 6px;
}
#view-queue .queue-court-card .court-matchup-grid {
min-height: 72px;
padding: 6px;
margin-top: -2px;
margin-bottom: -2px;
}
#view-queue .queue-court-card .court-body {
min-height: 64px;
padding: 10px 12px;
}
#view-queue .queue-court-card .court-body:has(.court-empty-icon) {
min-height: 56px;
}
#view-queue .queue-court-card .court-action-row {
gap: 6px;
min-width: 0;
}
#view-queue .queue-court-card .court-action-row > .btn-icon {
width: 42px;
min-width: 42px;
max-width: 42px;
height: 42px;
min-height: 42px;
max-height: 42px;
}
#view-queue .queue-court-card .court-action-row > .btn {
min-width: 0;
flex: 1 1 0;
flex-shrink: 1;
gap: 5px;
padding-left: 8px;
padding-right: 8px;
font-size: 13px;
}
#view-queue .queue-court-card .court-score-label-full { display: none; }
#view-queue .queue-court-card .court-score-label-narrow { display: inline; }
}
.court-card {
background: var(--bg-surface);
border: none !important;
border-radius: var(--radius);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
transition: border-color 150ms;
}
.court-card:hover { border: none !important; }
.court-card.category-court-tone-1 {
border: none !important;
}
.court-card.category-court-tone-2 {
border: none !important;
}
.court-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.court-id {
display: flex;
align-items: center;
gap: 10px;
}
.court-status-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--live);
box-shadow: 0 0 0 3px var(--live-bg);
}
.court-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--text-faint);
text-transform: uppercase;
}
.court-num {
font-size: 15px;
font-weight: 600;
color: var(--text-main);
letter-spacing: -0.01em;
}
.court-state {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--live);
background: var(--live-bg);
padding: 3px 8px;
border-radius: 4px;
text-transform: uppercase;
}
.court-actions {
display: flex;
align-items: center;
gap: 6px;
}
.court-card .court-actions .icon-btn,
.court-card .court-actions .btn-tiny {
background: transparent;
border-color: transparent;
box-shadow: none;
}
.court-card .court-actions .icon-btn:hover,
.court-card .court-actions .btn-tiny:hover {
background: transparent;
border-color: transparent;
color: var(--text-main);
}
.icon-btn {
width: 28px; height: 28px;
display: grid;
place-items: center;
border-radius: 6px;
background: transparent;
border: none;
color: var(--text-main);
cursor: pointer;
transition: background 120ms, color 120ms;
}
.icon-btn:hover { background: var(--bg-surface-hover); }
.icon-btn.lock {
width: auto; padding: 0 10px;
font-size: 11px; font-weight: 500; gap: 5px;
display: inline-flex; align-items: center;
}
.court-body {
background: var(--bg-surface);
border: 1px dashed var(--border-strong);
border-radius: 8px;
padding: 28px 16px;
text-align: center;
color: var(--text-dim);
font-size: 13px;
/* Absorb whatever extra height the grid stretched this card to (matching a taller
sibling in the same row) so the Start Game button below lands at the same
vertical position across every court card, not wherever this content happens
to end. */
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.court-body .court-empty-icon { color: var(--text-dim2); margin-bottom: 8px; }
.court-cta { width: 100%; justify-content: center; padding: 11px 14px; }
.court-cta.is-loading {
cursor: wait;
opacity: 0.82;
}
.start-match-spinner {
width: 14px;
height: 14px;
flex: 0 0 14px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: start-match-spin 0.75s linear infinite;
}
@keyframes start-match-spin {
to { transform: rotate(360deg); }
}
.court-score-label-narrow { display: none; }
.court-card .court-body {
/* Match .court-matchup-grid's min-height so a card doesn't visibly resize the
instant a match starts and the empty-state placeholder swaps for real matchup
content — was min-height:0, letting this shrink to whatever the "Ready for
next 4 players" text needed, which is shorter than the matchup grid. */
min-height: 84px;
}
.court-card .court-body:has(.court-empty-icon) {
min-height: 68px;
}
.court-card .court-body .court-empty-icon img {
width: 24px !important;
height: 24px !important;
}
.court-card .court-body:has(.court-empty-icon) {
padding: 14px 16px;
}
.court-matchup-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
gap: 10px;
align-items: center;
align-content: center;
margin-top: -4px;
margin-bottom: -4px;
min-height: 84px;
padding: 12px 8px;
/* Same reasoning as .court-body: absorb stretched extra height from the grid row
so the action row below lands at a consistent height across sibling cards. */
flex: 1;
}
.court-matchup-team {
min-width: 0;
justify-content: center;
}
.court-matchup-team > div {
min-height: 20px;
}
/* Up Next dashboard card is a compact preview, not a live court — shrink the
padding, avatar/text sizes, and card min-height that .court-card/
.court-matchup-grid assume for full court cards. */
#dash-upnext-container .court-card { padding: 10px 12px; gap: 6px; }
#dash-upnext-container .court-head { margin-bottom: 0; }
#dash-upnext-container .court-label { font-size: 11px; }
#dash-upnext-container .court-matchup-grid { min-height: 0; padding: 4px 4px; margin: 0; gap: 6px; }
#dash-upnext-container .court-matchup-team > div { min-height: 0; gap: 6px !important; }
#dash-upnext-container .court-matchup-player { font-size: 12px; }
#dash-upnext-container .court-player-avatar { width: 18px !important; height: 18px !important; font-size: 7px !important; }
#dash-upnext-container .court-matchup-divider { font-size: 0.85rem !important; }
.court-matchup-divider {
align-self: center;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
min-height: 100%;
}
.court-matchup-player {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
line-height: 1;
}
.court-action-row {
display: flex;
align-items: stretch;
gap: 8px;
margin-top: 4px;
}
.court-card .court-action-row > .btn,
.court-card .court-action-row > .btn-icon {
height: 42px;
min-height: 42px;
max-height: 42px;
}
.court-card .court-action-row > .btn {
padding-top: 0;
padding-bottom: 0;
}
.court-card .court-action-row > .btn-icon {
width: 42px;
min-width: 42px;
max-width: 42px;
flex: 0 0 42px;
}
/* ── rotation engine ── */
.rotation-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 0;
}
.rot-card {
background: var(--bg-surface-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius);
padding: 16px;
cursor: pointer;
transition: background 120ms, border-color 120ms;
display: flex;
flex-direction: column;
gap: 8px;
min-height: 150px;
position: relative;
}
.rot-card:hover { background: var(--bg-surface-hover); border-color: var(--border-strong); }
.rot-card.active {
background: var(--accent-ghost) !important;
border-color: var(--accent-border) !important;
}
.merge-player-card.selected {
background: var(--accent-ghost);
border-color: var(--accent-border) !important;
}
.rot-card.active::after {
display: none;
}
.maintenance-overlay {
position: absolute;
inset: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
background: rgba(10, 10, 12, 0.72);
backdrop-filter: blur(1px);
border-radius: inherit;
cursor: not-allowed;
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: center;
padding: 8px;
}
.rot-icon {
width: 32px; height: 32px;
display: grid; place-items: center;
background: transparent;
border-radius: 8px;
color: var(--text-dim);
flex-shrink: 0;
}
.rot-card.active .rot-icon {
background: var(--accent);
color: var(--accent-btn-txt);
}
/* The icons are ![]()
tags (not inline SVG), so `color` above has no effect on
them — they're rendered black by default and flipped white via the inline
filter:invert(1) every icon uses for visibility on dark card backgrounds.
On the active lime tile that inverted-white icon has poor contrast, so
cancel the invert here and let it render in its natural black. */
.rot-card.active .rot-icon img {
filter: none !important;
}
.rot-title {
font-size: 15px;
font-weight: 600;
color: var(--text-main);
letter-spacing: -0.005em;
}
.rot-title-row {
display: flex;
align-items: center;
gap: 8px;
}
.rot-desc {
font-size: 11px;
color: var(--text-dim);
line-height: 1.5;
}
/* ── toggle cards ── */
.toggle-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 12px;
}
.toggle-row.has-strict-skill-split {
grid-template-columns: 1fr 1fr 1fr;
}
.toggle-card {
background: var(--bg-surface-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius);
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
}
/* Pull Sequence block (Rotation Engine dashboard panel) — whole thing (hint text,
chip list, quick-add row) sits inside one bordered box. */
.pull-sequence-block {
padding:12px; border-radius:var(--radius); background:var(--bg-surface-elevated);
border:1px solid var(--border-subtle);
}
.pull-sequence-chips { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; min-height:32px; align-content:flex-start; }
.empty-state-inline { color: var(--text-faint); align-self:center; }
.seq-chip { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:6px 10px; border-radius:6px; background:var(--bg-surface); border:1px solid var(--border-subtle); font-size:12px; cursor:pointer; flex:1 1 90px; }
.seq-chip-label { flex:1; text-align:center; }
.seq-chip:hover { border-color:var(--border-focus); }
.seq-chip-active { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.seq-chip-selected { border-color:var(--accent) !important; background:var(--accent-soft) !important; box-shadow:0 0 0 1px var(--accent-border) inset; }
.seq-chip-remove { background:none; border:none; color:var(--text-faint); cursor:pointer; padding:4px; margin:-4px; font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center; }
.seq-chip-remove:hover { color:var(--danger); }
.pull-sequence-quick-add { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.pull-sequence-quick-add.maxed button:not(.btn-ghost) { opacity:0.4; cursor:not-allowed; }
.pull-sequence-block.club-locked { cursor: not-allowed; }
.pull-sequence-block.club-locked #pull-sequence-interactive,
.pull-sequence-block.club-locked #acc-pull-sequence-interactive { opacity:0.35; filter:grayscale(0.4); pointer-events:none; }
/* Men vs women currently waiting in the queue — context while building the sequence. */
.gender-meter { margin-bottom: 10px; }
.gender-meter-bar { display:flex; height:6px; border-radius:3px; overflow:hidden; background:var(--bg-surface); }
.gender-meter-fill-m { background:#5AC8FA; transition: width 300ms; }
.gender-meter-fill-f { background:#FF2D55; transition: width 300ms; }
.gender-meter-labels { display:flex; justify-content:space-between; margin-top:4px; font-size:11px; font-weight: 400; }
.gender-meter-label-m { color:#5AC8FA; }
.gender-meter-label-f { color:#FF2D55; }
/* The Custom button sits beside the concrete format dropdown and highlights green
while the Pull Sequence is driving pulls. */
.match-type-control-group { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.match-type-custom-btn {
width:32px !important;
height:32px !important;
min-width:32px !important;
min-height:32px !important;
max-width:32px !important;
max-height:32px !important;
box-sizing:border-box;
padding:0 !important;
border-radius:var(--radius-sm) !important;
gap:0;
aspect-ratio:1 / 1;
}
.match-type-custom-btn.match-type-custom-active {
border-color:var(--accent) !important;
background:var(--accent) !important;
color:#000 !important;
}
.match-type-custom-btn.match-type-custom-active img {
filter:none !important;
}
#btn-pull-preview {
width:160px;
justify-content:center;
}
.toggle-icon {
width: 32px; height: 32px;
display: grid; place-items: center;
background: transparent;
border-radius: 8px;
color: var(--text-dim);
flex-shrink: 0;
}
.toggle-body { flex: 1; min-width: 0; }
.toggle-title {
font-size: 15px;
font-weight: 600;
color: var(--text-main);
margin-bottom: 2px;
}
.toggle-title-row {
display: flex;
align-items: center;
gap: 8px;
}
.toggle-sub {
font-size: 11px;
color: var(--text-dim);
line-height: 1.45;
}
.mobile-info-only { display: none; }
.card-help-btn {
margin-left: auto;
width: 20px;
height: 20px;
padding: 0;
border-radius: 999px;
border: 1px solid var(--border-strong);
background: var(--surface-3);
color: var(--text-dim);
display: grid;
place-items: center;
font-size: 11px;
font-weight: 600;
cursor: pointer;
line-height: 1;
flex-shrink: 0;
}
/* ── switch toggle ── */
.switch {
appearance: none;
-webkit-appearance: none;
width: 36px;
height: 20px;
background: var(--surface-3);
border-radius: 999px;
position: relative;
cursor: pointer;
border: 1px solid var(--border-strong);
flex-shrink: 0;
transition: background 150ms, border-color 150ms;
}
.switch::after {
content: "";
position: absolute;
top: 2px; left: 2px;
width: 14px; height: 14px;
background: var(--text-faint);
border-radius: 50%;
transition: transform 180ms cubic-bezier(.4,0,.2,1), background 150ms;
}
.switch.on {
background: var(--accent);
border-color: var(--accent);
}
.switch.on::after {
transform: translateX(16px);
background: var(--accent-btn-txt);
}
/* ── racks grid (Queue & Courts) ── */
.racks-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-bottom: 14px;
}
.rack {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
min-height: 360px;
min-width: 0;
overflow: hidden;
}
.rack-head {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 6px 18px;
min-height: 40px;
border-bottom: 1px solid var(--border-subtle);
}
.rack-head > div:first-child {
min-width: 0;
flex-shrink: 1;
overflow: hidden;
}
.rack-head .rack-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rack-sub {
font-size: 11px;
color: var(--text-faint);
}
.rack-count {
flex-shrink: 0;
min-width: 24px;
padding: 3px 7px;
border: 1px solid var(--border-subtle);
border-radius: 999px;
color: var(--text-dim);
background: var(--chip-bg);
font-size: 11px;
font-weight: 700;
line-height: 1;
text-align: center;
}
.rack-counts {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.rack-count-resting { cursor: pointer; }
.rack-count-resting:hover { border-color: var(--accent-border); color: var(--text-main); }
.resting-player-focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.rack-search-wrap {
display: flex;
align-items: center;
gap: 6px;
flex: 1 1 auto;
min-width: 0;
max-width: 140px;
padding: 5px 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border-subtle);
border-radius: 999px;
}
.rack-search-icon {
width: 12px;
height: 12px;
flex-shrink: 0;
opacity: 0.5;
filter: invert(1);
}
.rack-search-input {
flex: 1;
min-width: 0;
width: 100%;
background: transparent;
border: none;
outline: none;
color: var(--text-main);
font-size: 12px;
font-family: inherit;
}
.rack-search-input::placeholder {
color: var(--text-faint);
}
.ai-pool {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #93c5fd;
background: rgba(96, 165, 250, 0.10);
border: 1px solid rgba(96, 165, 250, 0.25);
padding: 4px 8px;
border-radius: 5px;
flex-shrink: 0;
white-space: nowrap;
}
.rack-empty {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 0;
color: var(--text-faint);
font-size: 13px;
font-weight: 500;
}
.rack-empty-icon {
width: 28px; height: 28px;
display: grid; place-items: center;
background: var(--surface-3);
border-radius: 8px;
color: var(--text-faint);
}
/* ── pulled · next up bar ── */
.pulled-bar {
/* Left holds two selects, right only two icon buttons — those two sides
are never equal weight, so a symmetric grid (equal columns, or an
equal-fraction split) either starves the left side into wrapping or
throws off the Pull button's centering, one or the other. Take the
button out of that tradeoff entirely: position it dead-center in the
bar via absolute positioning, independent of what's on either side. */
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
border-bottom: 1px solid var(--border-subtle);
}
.pulled-center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: max-content;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.pulled-left {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: nowrap;
}
.pulled-label {
/* The panel's own context already makes this obvious — dropping it frees up
real width for the Doubles/Mixed selects instead of squeezing them. */
display: none;
}
#match-type {
/* app.html sets min-width:140px which is more than any option ("Women's")
actually needs, crowding the row next to Doubles + Pull 4 + Auto. */
min-width: 108px !important;
}
#match-type-wrapper .tny-branded-select-wrap {
display: inline-block;
width: 108px;
min-width: 108px;
}
#match-type-wrapper .tny-branded-select-trigger {
width: 100%;
height: 28px;
min-width: 108px;
padding: 4px 22px 4px 10px;
border-color: var(--border-subtle);
font-size: 13px;
}
#match-type-wrapper .tny-branded-select-trigger.match-type-custom-active {
border-color: var(--accent) !important;
background: var(--accent-soft) !important;
color: transparent !important;
}
.format-select {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: var(--bg-surface-elevated);
border: 1px solid var(--border-subtle);
border-radius: 999px;
color: var(--text-main);
font-size: 13px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
min-width: 150px;
justify-content: space-between;
}
.format-select:hover { background: var(--bg-surface-hover); border-color: var(--border-strong); }
.upnext-mode-toggle {
display: none;
flex-shrink: 0;
}
/* Doubles-only UI for now. Keep the control markup and handlers wired so
queue-mode dependencies remain intact if Singles is re-enabled later. */
.upnext-mode-toggle,
.match-mode-select-wrapper {
display: none !important;
}
.pulled-right {
display: flex;
align-items: center;
gap: 6px;
justify-content: flex-end;
}
.auto-btn { color: var(--text-dim); }
.auto-btn.on {
background: var(--accent-soft);
border-color: var(--accent-border);
color: var(--accent);
}
.pulled-body { padding: 20px; }
.preview-next-match-wrap {
position: relative;
overflow-anchor: none;
--preview-next-row-indicator-y: 50%;
--preview-next-row-indicator-color: var(--border-strong);
--preview-next-row-left-indicator-x: -18px;
--preview-next-row-right-indicator-x: calc(100% - 16px);
}
.preview-grid-bottom-next > .preview-player-card {
grid-column: var(--preview-grid-wide-col);
grid-row: var(--preview-grid-wide-row);
}
.preview-next-match-arrow {
display: none;
position: absolute;
top: var(--preview-next-row-indicator-y);
transform: translateY(-50%);
z-index: 5;
width: 34px;
height: 58px;
font-size: 0;
line-height: 0;
pointer-events: none;
}
.preview-next-match-arrow::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: var(--preview-next-row-indicator-color);
}
.has-next-match > .preview-next-match-arrow {
display: block;
}
.preview-next-match-arrow-left {
left: var(--preview-next-row-left-indicator-x);
}
.preview-next-match-arrow-left::before {
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.preview-next-match-arrow-right {
left: var(--preview-next-row-right-indicator-x);
}
.preview-next-match-arrow-right::before {
clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.preview-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
padding: 12px 16px 16px;
}
.preview-grid.preview-grid-singles {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1024px) {
.preview-grid-bottom-next > .preview-player-card {
grid-column: var(--preview-grid-narrow-col);
grid-row: var(--preview-grid-narrow-row);
}
.preview-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 10px; }
}
.preview-player-card {
border-radius: var(--radius-sm);
padding: 8px 10px;
background: var(--preview-row-bg, var(--accent-soft));
border: 1px solid var(--preview-row-border, var(--accent-border));
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
cursor: pointer;
touch-action: pan-y;
position: relative;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
outline: none;
}
.preview-player-card .btn-tiny {
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
}
/* The swap action is an inline affordance inside the preview row, not a
standalone square button. Keep its hit area without the boxed treatment. */
.preview-player-card .btn-tiny {
background: transparent;
border-color: transparent;
box-shadow: none;
margin-left: 1px;
}
.preview-player-card .btn-tiny:hover {
background: rgba(255, 255, 255, 0.045);
border-color: rgba(255, 255, 255, 0.12);
}
/* A vacated Up Next seat — the player was sent back to a rack, and this slot
holds their spot until someone (rack selection tap, next pull) fills it. */
.preview-player-card.preview-slot-empty {
background: var(--bg-base);
border-style: dashed;
border-color: var(--border-subtle);
justify-content: center;
box-shadow: none;
}
.preview-slot-empty-label {
font-size: 0.68rem;
color: var(--text-dim);
font-weight: 500;
}
.preview-grid:not(.preview-grid-singles) .preview-player-card:nth-child(4n + 2) {
margin-right: 18px;
}
.preview-grid:not(.preview-grid-singles) .preview-player-card:nth-child(4n + 3) {
margin-left: 18px;
}
.preview-grid:not(.preview-grid-singles) .preview-player-card:nth-child(4n + 3)::before {
content: "VS";
position: absolute;
left: -22px;
top: 50%;
transform: translate(-50%, -50%);
width: 24px;
height: 24px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.08);
background: color-mix(in srgb, var(--bg-surface) 82%, black);
color: rgba(255,255,255,0.58);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 3;
box-shadow: 0 0 0 4px rgba(8,10,16,0.9);
}
.preview-grid:not(.preview-grid-singles) .preview-player-card.preview-has-foursome-history::before {
content: none;
display: none;
}
.preview-vs-history-divider {
position: absolute;
left: -22px;
top: 50%;
transform: translate(-50%, -50%);
width: 34px;
min-width: 34px;
height: 52px;
padding: 5px 2px;
box-sizing: border-box;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.12);
background: color-mix(in srgb, var(--bg-surface) 82%, black);
color: rgba(255,255,255,0.58);
display: inline-flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 1px;
white-space: nowrap;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.04em;
pointer-events: none;
z-index: 3;
box-shadow: 0 0 0 4px rgba(8,10,16,0.9);
}
.preview-vs-history-count {
color: var(--text-main);
font-size: 12px;
line-height: 1;
letter-spacing: 0;
}
/* Holds the linked-partner badge and/or the match-history count badge,
stacked vertically in the gap between the two paired cards — either can
appear alone or both together. */
.preview-mid-badge-stack {
position: absolute;
left: -14px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
z-index: 3;
}
.preview-link-badge {
width: 20px;
height: 20px;
border-radius: 5px;
border: 1px solid var(--preview-row-border, var(--accent-border));
background: var(--bg-surface-elevated);
display: flex;
align-items: center;
justify-content: center;
}
/* Sits in the gap between the two paired cards (the same slot the
linked-partner badge uses — the two stack together when both apply) so
the count reads the same at every width instead of switching to a
name-adjacent inline badge on wide screens. */
.preview-pair-history-mid-badge {
display: flex;
min-width: 20px;
height: 20px;
padding: 0 4px;
border-radius: 5px;
/* Solid background (not tinted to the group's accent color like the
link badge is) so the count stays legible against light card tones
instead of washing out with a translucent fill. */
border: 1px solid rgba(255,255,255,0.14);
background: var(--bg-surface-elevated);
color: var(--text-dim);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.04em;
align-items: center;
justify-content: center;
z-index: 2;
pointer-events: none;
}
/* Long-press "pick mode" — cards belonging to a selectable Up Next match
row. No permanent highlight (avoids visually resizing/thickening every
eligible card at once) — hovering any card in the row (via JS, so the
whole match highlights together, not just the card under the cursor)
toggles this class on every card that shares its group offset. */
.preview-pick-eligible.preview-pick-hover {
border: none !important;
background: color-mix(in srgb, var(--preview-row-bg, var(--bg-surface-hover)) 72%, var(--text-main) 28%) !important;
}
.court-card.preview-pick-eligible:hover {
border: none !important;
background: var(--bg-surface-hover) !important;
}
/* Divider between doubles groups */
.preview-grid.has-overflow-groups .preview-player-card:nth-child(n + 5) {
border-top-color: var(--border-strong);
}
/* Winner-based engines mid-round (winners_stay/split_winners, court(s) already occupied):
incoming players are a plain row, never a fresh 2v2 matchup — no VS divider/spacing. */
.preview-grid.preview-grid-challenger-mode .preview-player-card:nth-child(4n + 2) {
margin-right: 0;
}
.preview-grid.preview-grid-challenger-mode .preview-player-card:nth-child(4n + 3) {
margin-left: 0;
}
.preview-grid.preview-grid-challenger-mode .preview-player-card:nth-child(4n + 3)::before {
content: none;
display: none;
}
/* Matches the sidebar's off-canvas/hamburger breakpoint (see .sidebar at
max-width: 1024px) so the preview grid's 2-column layout, and everything
that depends on it, kicks in exactly when the app switches to mobile
navigation — not at a narrower width that left iPad-width screens stuck
with a cramped 4-column layout and no center history badge fallback. */
@media (max-width: 1024px) {
.preview-grid:not(.preview-grid-singles) .preview-player-card:nth-child(4n + 2),
.preview-grid:not(.preview-grid-singles) .preview-player-card:nth-child(4n + 3) {
margin-right: 0;
margin-left: 0;
}
.preview-grid.has-overflow-groups .preview-player-card:nth-child(n + 5) {
border-top-color: var(--preview-row-border, var(--border-subtle));
margin-top: 0;
padding-top: 8px;
}
.preview-grid:not(.preview-grid-singles) .preview-player-card:nth-child(4n + 3)::before {
display: none;
}
.preview-grid:not(.preview-grid-singles) .preview-vs-history-divider {
display: none;
}
}
/* Phone layout: keep each teammate pair together in a vertical column —
Team A occupies the left column and Team B the right column. Challenger
pulls remain a normal two-column list because those players are not a
complete team matchup yet. */
@media (max-width: 720px) {
/* Every complete doubles matchup gets its own opponent divider. The
anchor is the first card in Team B's column, so the line spans both
stacked teammate cards and the label sits in their middle gap. */
.preview-grid:not(.preview-grid-singles):not(.preview-grid-challenger-mode) {
--preview-opponent-divider-gap: 52px;
column-gap: var(--preview-opponent-divider-gap);
}
.preview-grid:not(.preview-grid-singles):not(.preview-grid-challenger-mode) > .preview-player-card.preview-opponent-divider-anchor::after {
content: "";
position: absolute;
left: var(--preview-opponent-divider-left, calc(var(--preview-opponent-divider-gap) / -2));
top: 0;
bottom: calc(-100% - 6px);
width: 1px;
background: var(--border-strong);
z-index: 5;
pointer-events: none;
}
.preview-grid:not(.preview-grid-singles):not(.preview-grid-challenger-mode) > .preview-player-card.preview-opponent-divider-anchor::before {
content: "VS";
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: var(--preview-opponent-divider-left, calc(var(--preview-opponent-divider-gap) / -2));
top: calc(100% + 3px);
width: 20px;
height: 14px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
transform: translate(-50%, -50%);
z-index: 7;
pointer-events: none;
box-shadow: none;
}
.preview-grid:not(.preview-grid-singles):not(.preview-grid-challenger-mode) > .preview-player-card {
grid-column: var(--preview-grid-mobile-col);
grid-row: var(--preview-grid-mobile-row);
}
.preview-grid:not(.preview-grid-singles):not(.preview-grid-challenger-mode) .preview-player-card:nth-child(4n + 2) .preview-mid-badge-stack,
.preview-grid:not(.preview-grid-singles):not(.preview-grid-challenger-mode) .preview-player-card:nth-child(4n + 4) .preview-mid-badge-stack {
left: 50%;
top: -6px;
transform: translate(-50%, -50%);
}
}
@media (max-width: 600px) {
.preview-player-rank {
display: none;
}
.preview-player-card {
padding: 5px 8px !important;
gap: 6px !important;
}
.preview-player-card .btn-tiny {
padding: 2px !important;
min-height: 24px !important;
min-width: 24px !important;
width: 24px !important;
height: 24px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
}
.queue-empty-heading { font-size: 15px; font-weight: 800; margin-bottom: 5px; color: #fff; }
.queue-empty-sub { font-size: 13px; color: var(--text-dim); margin-bottom: 20px; }
.queue-racks-toggle-btn {
display: none;
width: 100%;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 14px;
margin-bottom: 10px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--bg-surface);
color: var(--text-dim);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.empty-state {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: var(--text-faint);
font-size: 13px;
padding: 8px 0;
}
/* =============================================================
Responsive — v2 design system breakpoints
============================================================= */
/* ≤1180px: keep the stat strip as ONE row of 5 (splitting into 3+2 rows adds
a 3rd row to the panel overall, on top of the Event/Location/Date/Checked In
row above it). Top Player and Rotation carry more content (icon, sub-stats,
a tag) than the plain numeric cells, so shrink everything and let the
Rotation tag drop below its label instead of squeezing beside it. */
@media (max-width: 1180px) {
.v2-stat-strip { grid-template-columns: repeat(5, 1fr); }
.stat-cell-new {
padding: 10px 12px;
gap: 3px;
min-width: 0;
}
.stat-label-new { font-size: 9px; flex-wrap: wrap; row-gap: 2px; }
.stat-val-new { font-size: 16px; }
.stat-val-new.fs-title { font-size: 13px; }
.stat-val-new img { width: 12px !important; height: 12px !important; flex-shrink: 0; }
.stat-val-new span,
#dash-top-player-stats,
#dash-logic-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.racks-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rotation-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ≤1024px: sidebar off-canvas drawer */
@media (max-width: 1024px) {
.racks-grid { grid-template-columns: 1fr 1fr; }
.racks-grid .rack:first-child { grid-column: 1 / -1; }
.top-actions .btn-label { display: none; }
.top-actions .btn { padding: 8px 10px; }
.top-actions .btn-primary { padding: 8px 12px; }
.top-actions .btn-primary .btn-label { display: inline; }
}
/* 721px–1024px: iPad width. The two selects still may not have quite enough
room at this narrower width — let them shrink to their content instead of
their app.html min-widths (the label is now hidden at all widths, see
the base .pulled-label rule above). */
@media (min-width: 721px) and (max-width: 1024px) {
.pulled-bar { gap: 8px; }
.pulled-left { gap: 8px; }
.pulled-left .select-wrapper { flex-shrink: 0; }
.pulled-left #match-mode { min-width: 0 !important; padding-right: 20px !important; }
.pulled-left #match-type { min-width: 0 !important; padding-right: 20px !important; }
#match-type-wrapper .tny-branded-select-wrap { width: auto; min-width: 0; }
#match-type-wrapper .tny-branded-select-trigger { width: auto; min-width: 0; padding-right: 20px; }
.pulled-center { flex-shrink: 0; }
.pulled-right { flex-shrink: 0; }
}
/* ≤720px: single column, mobile layout */
@media (max-width: 720px) {
.btn { font-size: 14px; }
.queue-racks-toggle-btn { display: flex; }
.v2-stat-strip { grid-template-columns: repeat(2, 1fr); }
/* Undo the 1180px breakpoint's 6-col spans — this is back to a plain 2-col grid. */
.stat-cell-new { grid-column: span 1; }
.stat-cell-new:nth-child(2n) { border-right: none; }
.stat-cell-new:nth-child(-n+4) { border-bottom: 1px solid var(--border-subtle); }
.stat-cell-new:nth-child(3n) { border-right: 1px solid var(--border-subtle); }
.stat-cell-new:nth-child(2n) { border-right: none; }
.rotation-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.rot-card {
display: grid;
grid-template-columns: 28px 1fr;
align-items: center;
gap: 6px 10px;
min-height: auto;
padding: 10px 12px;
}
.rot-icon { width: 28px; height: 28px; border-radius: 7px; grid-column: 1; grid-row: 1; }
.rot-title-row { grid-column: 2; grid-row: 1; }
.rot-title { font-size: 14px; line-height: 1.25; }
.rot-maxwins-row { grid-column: 1 / -1; grid-row: 2; }
.mobile-info-only { display: block; }
.rot-desc { display: none; }
.courts-grid { grid-template-columns: 1fr; }
.racks-grid { grid-template-columns: 1fr; }
.toggle-row, .toggle-row.has-strict-skill-split { grid-template-columns: 1fr !important; gap: 8px; }
.toggle-card { padding: 12px; gap: 10px; align-items: flex-start; }
.toggle-icon { width: 28px; height: 28px; border-radius: 7px; }
.toggle-title { font-size: 14px; line-height: 1.25; margin-bottom: 1px; }
.toggle-sub { display: none; }
.toggle-card .btn {
margin-left: auto;
min-width: 120px;
min-height: 38px;
white-space: nowrap;
}
.toggle-card .switch { margin-left: auto; }
.inline-limit-input { width: 50px !important; height: 26px !important; font-size: 12px !important; }
.setup-banner { flex-direction: column; align-items: stretch; gap: 12px; }
.setup-banner .btn-lg { width: 100%; justify-content: center; }
.panel-header { padding: 6px 12px; flex-wrap: wrap; gap: 8px; }
.panel-header > span { display: none; }
.rotation-hint { display: none !important; }
.add-match-label { display: none !important; }
.panel-header .btn { padding: 6px 8px !important; }
.dupr-toggle { font-size: 10px !important; }
.dupr-badge-full { display: none !important; }
.dupr-badge-short { display: inline !important; }
.podium-btn-text-full { display: none !important; }
.podium-btn-text-short { display: inline !important; }
/* Master Roster rows: slim header (select-all only) + compact grid, fix wrapping (mirrors #leaderboard-list) */
#view-database .db-list-header {
grid-template-columns: 26px !important;
padding: 8px 12px !important;
}
#view-database .db-list-header > div:not(.db-header-checkbox-wrap) { display: none !important; }
#database-list .slb-avatar { display: none !important; }
#database-list .slb-player-cell { gap: 0 !important; }
#database-list .slb-player-sub { display: none !important; }
#database-list .dupr-status-dot { display: block !important; }
#database-list .slb-row {
grid-template-columns: 26px 1fr 52px 68px !important;
gap: 4px !important;
padding: 10px 12px !important;
}
#database-list .db-select-indicator { width: 18px !important; height: 18px !important; }
#database-list .db-actions-cell { gap: 8px !important; }
#database-list .db-actions-cell .btn-tiny {
padding: 0 !important;
width: 21px !important;
height: 21px !important;
min-width: 21px !important;
min-height: 21px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.panel-body { padding: 14px; }
.stat-cell-new { padding: 8px 10px !important; gap: 3px !important; }
.stat-val-new { font-size: 16px; }
.stat-label-new { font-size: 8px; letter-spacing: 0.05em; }
.info-label { font-size: 8px; }
.info-value { font-size: 12px; }
#dash-session-meta-body .session-info-card .info-item { padding: 8px 10px !important; gap: 3px !important; }
.pulled-bar {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
padding: 12px 14px;
flex-wrap: wrap;
}
.pulled-left {
width: auto;
gap: 8px;
flex-wrap: wrap;
flex-shrink: 0;
justify-content: center;
}
.pulled-label { display: none; }
.upnext-mode-toggle,
#match-type-custom-btn,
#btn-return-preview,
#btn-auto-pull {
display: inline-flex;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
max-width: 36px !important;
max-height: 36px !important;
padding: 0 !important;
gap: 0 !important;
aspect-ratio: 1 / 1 !important;
align-items: center;
justify-content: center;
overflow: hidden;
}
.match-mode-select-wrapper { display: none; }
.pulled-left .select-wrapper { width: auto; flex-shrink: 0; }
.pulled-left #match-type {
width: auto;
min-width: 0 !important;
height: 36px !important;
font-size: 16px !important;
}
#match-type-wrapper .tny-branded-select-wrap { width: auto; min-width: 0; }
#match-type-wrapper .tny-branded-select-trigger { width: auto; min-width: 0; height: 36px; font-size: 16px; }
.pulled-center {
/* The bar wraps into multiple rows here (flex-wrap on .pulled-bar), so
absolute centering (see base rule) would place the button at the
vertical midpoint of the whole wrapped block, not in its own row —
go back to normal flow and let it sit inline like the rest. */
position: relative;
left: auto;
top: auto;
transform: none;
width: max-content;
height: 44px;
flex: 0 0 auto;
}
.pulled-right {
width: auto;
display: flex;
gap: 8px;
flex-shrink: 0;
}
.pulled-right .btn { width: auto; justify-content: center; min-height: 42px; white-space: nowrap; }
#btn-auto-pull .btn-text,
#btn-return-preview .btn-text { display: none; }
#preview-container {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
padding: 12px !important;
}
#preview-container > div { min-width: 0; }
.session-info-card { grid-template-columns: repeat(2, 1fr); }
.info-item:nth-child(2n) { border-right: none; }
.info-item:nth-child(-n+2) { border-bottom: 1px solid var(--border-subtle); }
/* Live Courts cards: keep the mobile card compact without changing the
desktop/tablet court proportions. */
#dash-courts-container .court-card,
#courts-container .court-card {
padding: 10px;
gap: 6px;
min-width: 0;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
}
#dash-courts-container .court-head,
#courts-container .court-head {
align-items: flex-start;
gap: 8px;
}
#dash-courts-container .court-actions,
#courts-container .court-actions {
flex-wrap: wrap;
justify-content: flex-end;
}
#dash-courts-container .court-actions .icon-btn,
#courts-container .court-actions .icon-btn {
width: 32px;
height: 32px;
}
#dash-courts-container .court-actions .icon-btn.lock,
#courts-container .court-actions .icon-btn.lock {
height: 32px;
padding: 0 10px;
}
#dash-courts-container .court-matchup-grid,
#courts-container .court-matchup-grid {
gap: 6px;
min-height: 72px;
padding: 6px 6px;
margin-top: -2px;
margin-bottom: -2px;
}
#dash-courts-container .court-matchup-team,
#courts-container .court-matchup-team {
padding: 0 6px !important;
gap: 2px !important;
}
#dash-courts-container .court-matchup-team > div,
#courts-container .court-matchup-team > div { min-height: 18px; }
#dash-courts-container .court-matchup-player,
#courts-container .court-matchup-player { font-size: 12px; }
#dash-courts-container .court-action-row .btn,
#courts-container .court-action-row .btn {
min-height: 38px;
height: 38px;
max-height: 38px;
padding-left: 10px;
padding-right: 10px;
}
#dash-courts-container .court-action-row .btn-icon,
#courts-container .court-action-row .btn-icon {
width: 38px;
height: 38px;
min-width: 38px;
max-width: 38px;
min-height: 38px;
max-height: 38px;
flex-shrink: 0;
}
}
/* ≤480px: rotation cards horizontal, rack A/B stack */
@media (max-width: 480px) {
.rotation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.toggle-row { grid-template-columns: 1fr; }
.rot-card { min-height: auto; }
.rot-card .rot-icon { flex-shrink: 0; }
.rot-card.active::after { top: 10px; right: 10px; }
.pulled-bar { padding: 10px 12px; gap: 6px; justify-content: center; flex-wrap: nowrap; }
.pulled-label { display: none; }
.pulled-left { gap: 6px; justify-content: center; flex-wrap: nowrap; }
.pulled-left #match-type { width: 36px !important; min-width: 36px !important; }
.pulled-left #match-type { height: 36px !important; font-size: 0 !important; }
#match-type-wrapper .tny-branded-select-wrap,
#match-type-wrapper .tny-branded-select-trigger {
width: 36px !important;
min-width: 36px !important;
height: 36px !important;
min-height: 36px !important;
max-height: 36px !important;
}
#match-type-wrapper .tny-branded-select-trigger {
display: flex !important;
align-items: center;
justify-content: center;
padding: 0 !important;
gap: 0 !important;
background: var(--surface-faint) !important;
border: 1px solid var(--border-subtle) !important;
color: var(--text-main) !important;
box-shadow: none !important;
border-radius: var(--radius-sm) !important;
font-size: 0 !important;
}
#match-type-wrapper .tny-branded-select-trigger:hover {
background: var(--bg-surface-elevated) !important;
border-color: var(--border-focus) !important;
}
#match-type-wrapper .select-wrapper::after {
display: none;
}
#match-type-wrapper .tny-branded-select-trigger-label,
#match-type-wrapper .tny-branded-select-chevron {
display: none !important;
}
#match-type-wrapper .tny-branded-select-trigger::before {
content: "";
width: 17px;
height: 17px;
background: url("/icons/regular/users-four.svg") center / contain no-repeat;
filter: invert(1);
}
#match-type-wrapper[data-next-match-type="mixed"] .tny-branded-select-trigger::before {
background-image: url("/icons/regular/gender-mixed.svg");
}
#match-type-wrapper[data-next-match-type="mens"] .tny-branded-select-trigger::before {
background-image: url("/icons/regular/gender-men.svg");
}
#match-type-wrapper[data-next-match-type="womens"] .tny-branded-select-trigger::before {
background-image: url("/icons/regular/gender-women.svg");
}
#match-type-wrapper[data-next-match-type="open"] .tny-branded-select-trigger::before {
background-image: url("/icons/regular/lifebuoy.svg");
}
.pulled-right { display: flex !important; width: auto !important; gap: 6px; flex-shrink: 0; justify-content: center; }
.pulled-right .btn-text { display: none; }
.pulled-right .btn { width: auto !important; min-height: unset !important; }
.upnext-mode-toggle,
#btn-return-preview,
#btn-auto-pull {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
max-width: 36px !important;
max-height: 36px !important;
padding: 0 !important;
gap: 0 !important;
aspect-ratio: 1 / 1 !important;
justify-content: center;
overflow: hidden;
}
.pulled-center {
width: max-content !important;
flex: 0 0 auto !important;
}
#btn-pull-preview {
width: 120px !important;
flex: 0 0 120px !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
#btn-return-preview { display: inline-flex !important; position: static !important; transform: none !important; }
#btn-pull-preview .btn-text { font-weight: 600; display: inline; }
.pulled-body { padding: 10px; }
.court-body { padding: 20px 14px; }
/* Keep side-by-side layout on dashboard — same as queue page */
}
/* court-header → alias for court-head (used by JS-generated court cards) */
.court-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
margin-bottom: 0;
border-bottom: none;
}
/* ── unified session card: stat strip inside dash-panel should be flush ── */
.dash-panel > .v2-stat-strip {
border: none;
border-radius: 0;
margin-bottom: 0;
overflow: hidden;
}
/* stat-cell-new dividers within v2-stat-strip */
.v2-stat-strip > .stat-cell-new {
border: none;
border-right: 1px solid var(--border-subtle);
}
.v2-stat-strip > .stat-cell-new:last-child { border-right: none; }
/* Session summary strip sits inside #dash-session-meta-body (not directly under .dash-panel),
so force it flush there as well to avoid double bottom borders on desktop. */
#dash-session-meta-body > .v2-stat-strip {
border: none;
border-radius: 0;
margin-bottom: 0;
overflow: hidden;
}
#dash-session-meta-body > .v2-stat-strip > .stat-cell-new {
border-bottom: none;
}
/* ── topbar (replaces action-bar) ── */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 18px;
/* ══ THE topbar height, for every page in the app — do not change this
number without re-running the measurement method below. ══
height (not min-height/max-height) is deliberate: min-height only
floors empty tabs and silently lets any tab with taller content grow
past it, which is exactly how this drifted before (a title-only tab
at 52px next to a button-bearing tab quietly rendering 62px). A hard
height makes every .topbar identical by construction — any future
control that doesn't fit inside 53px overflows visibly instead of
silently stretching the bar, which is the point: a broken-looking
overflow gets noticed and fixed at the control, not absorbed here.
Reference value: Organize/Settings' topbar (title-only, no buttons —
the simplest possible case, the "Organize" this comment means).
Every topbar control (buttons, the standings category