/* ============================================================ Tournament Brackets — Challonge-inspired, PILA-themed ------------------------------------------------------------ Uses PILA design tokens (--bg-card, --text-primary, --border-color, --brand-*, --shadow-*) so everything tracks dark/light mode set via [data-theme="dark"|"light"] on . ============================================================ */ :root { --bracket-gap-x: 64px; --bracket-stub: 32px; --bracket-card-min-w: 240px; --bracket-card-radius: 10px; --bracket-row-pad-y: 8px; --bracket-row-pad-x: 12px; } /* -- Container & rounds --------------------------------------- */ .bracket-container { display: flex; gap: var(--bracket-gap-x); overflow-x: auto; padding: .75rem 0 1.75rem; align-items: stretch; font-size: 13px; line-height: 1.35; color: var(--text-primary); scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); scrollbar-width: thin; } .bracket-container::-webkit-scrollbar { height: 8px; } .bracket-container::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 4px; } .bracket-container::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } .bracket-container::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } .bracket-round { display: flex; flex-direction: column; justify-content: space-around; min-width: var(--bracket-card-min-w); flex-shrink: 0; position: relative; row-gap: 10px; } .bracket-round-label { text-align: center; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; padding-bottom: .85rem; } /* -- Match slot (the connector host) ------------------------- */ .match-slot { flex: 1 1 0; display: flex; align-items: center; position: relative; padding: 8px 0; min-height: 96px; } /* Slots that contain the organizer score-entry footer need extra height so the input row never overlaps the next match below. */ .match-slot:has(.match-card .score-entry) { min-height: 148px; } /* Horizontal stub from the right edge of every match in a non-last round */ .bracket-round.has-next .match-slot::after { content: ''; position: absolute; right: calc(var(--bracket-stub) * -1); top: 50%; width: var(--bracket-stub); border-top: 1px solid var(--border-color); } /* Vertical Y-merge: only for pair rounds (next round halves the matches). */ .bracket-round.pairs .match-slot.pair-top::before { content: ''; position: absolute; right: calc(var(--bracket-stub) * -1); top: 50%; height: 100%; border-right: 1px solid var(--border-color); } /* -- Match card ---------------------------------------------- */ .match-card { width: 100%; position: relative; border: 1px solid var(--border-color); border-radius: var(--bracket-card-radius); background: var(--bg-card); color: var(--text-primary); overflow: visible; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; } .match-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-hover); transform: translateY(-1px); } .match-card .row-p { display: flex; justify-content: space-between; align-items: center; padding: var(--bracket-row-pad-y) var(--bracket-row-pad-x); border-bottom: 1px solid var(--border-subtle); min-height: 36px; color: var(--text-primary); background: transparent; } .match-card .row-p:last-child { border-bottom: none; } .match-card .row-p .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: .5rem; font-weight: 500; } .match-card .row-p .score { font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; font-weight: 700; color: var(--text-secondary); } .match-card .row-p.tbd .name { color: var(--text-muted); font-style: italic; font-weight: 400; } .match-card .row-p.winner { background: var(--brand-success-light); color: var(--text-primary); font-weight: 700; } .match-card .row-p.winner .score { color: var(--color-winner); } .match-card .row-p.loser { color: var(--text-muted); } .match-card .row-p.loser .score { color: var(--text-muted); } .match-card .play-order-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 1px 7px; border-radius: 999px; background: var(--brand-primary); color: var(--text-on-brand); font-size: 10px; font-weight: 700; letter-spacing: .04em; line-height: 1.4; box-shadow: var(--shadow-sm); pointer-events: none; white-space: nowrap; } .match-card .seed-badge { display: inline-block; min-width: 20px; margin-right: .4rem; padding: 1px 5px; border-radius: 4px; background: var(--brand-primary-light); color: var(--brand-primary); font-size: 10px; font-weight: 700; text-align: center; vertical-align: middle; border: 1px solid var(--border-subtle); } /* Score-entry footer (organizer view) — themed inputs */ .match-card .score-entry { border-top: 1px solid var(--border-color); padding: 8px var(--bracket-row-pad-x); background: var(--bg-card-header); display: flex; gap: .4rem; align-items: center; } .match-card .score-entry input { width: 60px; height: 32px; padding: 2px 8px; font-size: 13px; background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 6px; transition: border-color .15s ease, box-shadow .15s ease; } .match-card .score-entry input:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 2px var(--brand-primary-light); } .match-card .score-entry .btn-success { background: var(--brand-success); border-color: var(--brand-success); color: var(--text-on-brand); border-radius: 999px; width: 36px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .match-card .score-entry .btn-success:hover { filter: brightness(1.1); } /* Section headings (DE: WB / LB / GF) */ .bracket-section-header { font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin: 1.25rem 0 .25rem; display: flex; align-items: center; gap: .5rem; color: var(--text-primary); } .bracket-section-header.text-warning { color: var(--brand-warning) !important; } .bracket-section-header.text-danger { color: var(--brand-error) !important; } /* Special card variants */ .match-card.bye-card { opacity: .55; background: var(--bg-surface); border-style: dashed; } .match-card.bye-card .row-p:not(.tbd) { background: var(--brand-tertiary-light); } .third-place-match { border-color: var(--brand-warning) !important; background: var(--brand-warning-light) !important; } .match-card.reset-active { border-color: var(--brand-warning) !important; box-shadow: 0 0 0 2px var(--brand-warning-light), var(--shadow-sm); } .match-card.reset-pending { opacity: .5; border-style: dashed !important; background: var(--bg-surface); } /* Champion banner */ .tournament-champion { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1.1rem; border-radius: 999px; background: var(--brand-warning-light); border: 1px solid var(--brand-warning); color: var(--text-primary); font-weight: 700; font-size: 14px; box-shadow: var(--shadow-sm); } .tournament-champion .bi-trophy-fill { color: var(--brand-warning); } /* Drag-and-drop seeding rows */ .seed-row { cursor: grab; transition: background .15s ease, border-color .15s ease; border-left: 3px solid transparent; } .seed-row:hover { background: var(--bg-hover); border-left-color: var(--brand-primary); } .seed-row:active, .seed-row.dragging { cursor: grabbing; background: var(--brand-primary-light); border-left-color: var(--brand-primary); } .seed-row .seed-handle { color: var(--text-muted); font-size: 1.1rem; cursor: grab; } .seed-row .seed-handle:active { cursor: grabbing; } /* -- Mobile: collapse to vertical-stacked rounds, drop connectors -- */ @media (max-width: 768px) { .bracket-container { flex-direction: column; gap: 1rem; padding-bottom: 1rem; } .bracket-round { flex-direction: column; min-width: unset; width: 100%; } .bracket-round.has-next .match-slot::after, .bracket-round.pairs .match-slot.pair-top::before { content: none; } .match-slot { min-height: unset; } .match-card { min-width: 0; } } /* ============================================================ Tournament listing cards (Tournaments.razor) ============================================================ */ .tournament-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md, 14px); color: var(--text-primary); box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; overflow: hidden; height: 100%; display: flex; flex-direction: column; } .tournament-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-hover); } .tournament-card .tc-body { padding: 1.1rem 1.25rem; flex: 1 1 auto; } .tournament-card .tc-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin: 0 0 .25rem; display: flex; align-items: center; gap: .5rem; } .tournament-card .tc-desc { color: var(--text-muted); font-size: .85rem; margin-bottom: .9rem; min-height: 1.25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tournament-card .tc-meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .9rem; } .tournament-card .tc-chip { display: inline-flex; align-items: center; gap: .3rem; padding: 3px 9px; font-size: 11px; font-weight: 600; letter-spacing: .03em; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--bg-surface); color: var(--text-secondary); } .tournament-card .tc-chip-format { background: var(--brand-primary-light); color: var(--brand-primary); border-color: var(--brand-primary-light); } .tournament-card .tc-chip-game { background: var(--brand-tertiary-light); color: var(--text-primary); } .tournament-card .tc-chip-status { text-transform: uppercase; font-size: 10px; letter-spacing: .08em; } .tournament-card .tc-chip-status.is-draft { background: var(--bg-surface); color: var(--text-muted); } .tournament-card .tc-chip-status.is-registration { background: var(--brand-primary-light); color: var(--brand-primary); border-color: var(--brand-primary); } .tournament-card .tc-chip-status.is-progress { background: var(--brand-warning-light); color: var(--brand-warning); border-color: var(--brand-warning); } .tournament-card .tc-chip-status.is-completed { background: var(--brand-success-light); color: var(--color-winner); border-color: var(--color-winner); } .tournament-card .tc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .75rem; color: var(--text-secondary); font-size: .8rem; margin-bottom: 1rem; } .tournament-card .tc-stat { display: flex; align-items: center; gap: .35rem; } .tournament-card .tc-stat i { color: var(--brand-primary); font-size: .95rem; } .tournament-card .tc-progress { height: 6px; background: var(--bg-surface); border-radius: 999px; overflow: hidden; margin-bottom: 1rem; } .tournament-card .tc-progress-bar { height: 100%; background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-success) 100%); border-radius: 999px; transition: width .4s ease; } .tournament-card .tc-actions { display: flex; flex-direction: column; gap: .5rem; } .tournament-card .tc-footer { padding: .55rem 1.25rem; background: var(--bg-card-header); border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: .75rem; display: flex; justify-content: space-between; align-items: center; } .tournament-card.is-status-completed { border-color: var(--color-winner); } .tournament-card.is-status-completed .tc-title::before { content: '\F586'; font-family: 'bootstrap-icons'; color: var(--brand-warning); } .tournament-card.is-status-progress { border-color: var(--brand-warning); } /* Empty-state hero */ .tournaments-empty { background: var(--bg-card); border: 1px dashed var(--border-color); border-radius: var(--radius-md, 14px); padding: 3.5rem 1.5rem; text-align: center; color: var(--text-muted); } .tournaments-empty i.bi-trophy { color: var(--brand-warning); opacity: .55; } /* Page header */ .tournaments-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; } .tournaments-header h1 { color: var(--text-primary); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; display: flex; align-items: center; gap: .65rem; } .tournaments-header h1 .bi-trophy { color: var(--brand-warning); } .tournaments-header .tournaments-subtitle { color: var(--text-muted); font-size: .9rem; margin: .25rem 0 0; } /* ============================================================ Matches Panel (TournamentMatches.razor) — Sophisticated UI ============================================================ */ .matches-panel { color: var(--text-primary); } /* Progress card */ .mp-progress-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md, 14px); padding: 1rem 1.25rem; margin-bottom: 1.25rem; box-shadow: var(--shadow-sm); } .mp-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; } .mp-progress-label { font-weight: 700; font-size: .9rem; color: var(--text-primary); display: flex; align-items: center; gap: .4rem; } .mp-progress-label i { color: var(--brand-primary); } .mp-progress-fraction { font-size: .8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } .mp-progress-bar-track { height: 8px; background: var(--bg-surface); border-radius: 999px; overflow: hidden; margin-bottom: .35rem; } .mp-progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-success) 100%); border-radius: 999px; transition: width .4s ease; } .mp-progress-bar-fill.complete { background: var(--brand-success); } .mp-progress-pct { font-size: .72rem; color: var(--text-muted); font-weight: 600; } /* Round selector */ .mp-round-selector { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; } /* Section tabs (DE: Winners / Losers / Grand Final) */ .mp-section-tabs { display: flex; gap: .5rem; margin-bottom: 1rem; } .mp-section-tab { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .65rem 1rem; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-card); color: var(--text-secondary); font-weight: 700; font-size: .82rem; cursor: pointer; transition: all .15s ease; } .mp-section-tab:hover { border-color: var(--brand-primary); color: var(--brand-primary); background: var(--brand-primary-light); } .mp-section-tab.active { background: var(--brand-primary); color: var(--text-on-brand); border-color: var(--brand-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, .2); } .mp-section-tab .bi-trophy-fill { color: var(--brand-warning); } .mp-section-tab.active .bi-trophy-fill, .mp-section-tab.active .bi-arrow-down-circle-fill, .mp-section-tab.active .bi-star-fill { color: var(--text-on-brand); } .mp-section-tab .bi-arrow-down-circle-fill { color: var(--brand-error); } .mp-section-tab .bi-star-fill { color: var(--brand-warning); } .mp-round-btn { flex: 1 1 0; min-width: 72px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .55rem .75rem; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-card); color: var(--text-secondary); font-weight: 600; font-size: .82rem; cursor: pointer; transition: all .15s ease; } .mp-round-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); background: var(--brand-primary-light); } .mp-round-btn.active { background: var(--brand-primary); color: var(--text-on-brand); border-color: var(--brand-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, .2); } .mp-round-btn-label { font-weight: 700; } .mp-round-btn-count { font-size: .68rem; opacity: .75; font-variant-numeric: tabular-nums; } /* View toggle */ .mp-view-toggle { display: inline-flex; gap: 0; border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; margin-bottom: 1.25rem; } .mp-toggle-btn { padding: .5rem 1rem; font-size: .8rem; font-weight: 600; border: none; background: var(--bg-card); color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; transition: all .12s ease; } .mp-toggle-btn + .mp-toggle-btn { border-left: 1px solid var(--border-color); } .mp-toggle-btn:hover { background: var(--bg-hover); color: var(--text-primary); } .mp-toggle-btn.active { background: var(--brand-primary); color: var(--text-on-brand); } /* Match grid (list view) */ .mp-match-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; } /* Match card */ .mp-match-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md, 14px); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease; } .mp-match-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .mp-match-card.completed { border-color: var(--brand-success); } .mp-match-card.live { border-color: var(--brand-warning); box-shadow: 0 0 0 1px var(--brand-warning-light), var(--shadow-sm); } .mp-match-card-head { display: flex; justify-content: space-between; align-items: center; padding: .6rem 1rem; background: var(--bg-card-header); border-bottom: 1px solid var(--border-subtle); } .mp-match-num { font-weight: 700; font-size: .82rem; color: var(--text-primary); display: flex; align-items: center; gap: .5rem; } .mp-court-tag { font-size: .7rem; font-weight: 600; color: var(--text-muted); background: var(--bg-surface); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-subtle); } .mp-status-chip { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 10px; border-radius: 999px; border: 1px solid; } .mp-status-chip.pending { background: var(--bg-surface); border-color: var(--border-color); color: var(--text-muted); } .mp-status-chip.completed { background: var(--brand-success-light); border-color: var(--brand-success); color: var(--color-winner); } .mp-status-chip.live { background: var(--brand-warning-light); border-color: var(--brand-warning); color: var(--brand-warning); animation: pulse-live 1.5s ease infinite; } .mp-status-chip.mini { font-size: .6rem; padding: 2px 7px; } @keyframes pulse-live { 0%, 100% { opacity: 1; } 50% { opacity: .65; } } .mp-match-card-body { padding: .75rem 1rem; } /* Player row */ .mp-player-row { display: flex; align-items: center; justify-content: space-between; padding: .5rem .65rem; border-radius: 8px; margin-bottom: .35rem; transition: background .12s ease; } .mp-player-row:last-child { margin-bottom: 0; } .mp-player-row.winner { background: var(--brand-success-light); } .mp-player-row.loser { opacity: .55; } .mp-player-row.compact { padding: .35rem .5rem; margin-bottom: .2rem; } .mp-player-info { display: flex; align-items: center; gap: .45rem; min-width: 0; flex: 1; } .mp-seed { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; background: var(--brand-primary-light); color: var(--brand-primary); font-size: .7rem; font-weight: 800; flex-shrink: 0; border: 1px solid var(--border-subtle); } .mp-seed.sm { min-width: 18px; height: 18px; font-size: .62rem; border-radius: 4px; } .mp-player-name { font-weight: 600; font-size: .85rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mp-player-row.winner .mp-player-name { font-weight: 700; } .mp-player-row.loser .mp-player-name { color: var(--text-muted); } .mp-trophy { color: var(--brand-warning); font-size: .8rem; flex-shrink: 0; } .mp-score { font-weight: 800; font-size: .95rem; font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; color: var(--text-secondary); } .mp-score.sm { font-size: .78rem; min-width: 22px; } .mp-player-row.winner .mp-score { color: var(--color-winner); } /* Record button */ .mp-match-card-foot { border-top: 1px solid var(--border-subtle); padding: .6rem 1rem; background: var(--bg-card-header); } .mp-record-btn { width: 100%; padding: .55rem 1rem; font-size: .8rem; font-weight: 700; border: none; border-radius: 8px; background: var(--brand-primary); color: var(--text-on-brand); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; transition: filter .12s ease, transform .1s ease; } .mp-record-btn:hover { filter: brightness(1.1); transform: translateY(-1px); } .mp-record-btn.compact { width: 100%; padding: .4rem .75rem; font-size: .72rem; margin-top: .4rem; } /* Court grid view */ .mp-court-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; } .mp-court-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md, 14px); overflow: hidden; box-shadow: var(--shadow-sm); } .mp-court-card-head { padding: .65rem 1rem; background: var(--bg-card-header); border-bottom: 1px solid var(--border-subtle); font-weight: 700; font-size: .85rem; color: var(--text-primary); display: flex; align-items: center; gap: .5rem; } .mp-court-card-head i { color: var(--brand-primary); } .mp-court-badge { margin-left: auto; min-width: 22px; text-align: center; padding: 2px 8px; font-size: .68rem; font-weight: 700; background: var(--brand-primary-light); color: var(--brand-primary); border-radius: 999px; } .mp-court-card-body { padding: .75rem; display: flex; flex-direction: column; gap: .75rem; } .mp-court-empty { text-align: center; padding: 1.5rem; color: var(--text-muted); font-size: .82rem; } .mp-court-match { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 10px; padding: .6rem .75rem; } .mp-court-match.completed { border-color: var(--brand-success); } .mp-court-match-head { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; font-weight: 700; color: var(--text-muted); margin-bottom: .4rem; } /* Modal */ .mp-modal-backdrop { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, .65); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 1rem; } .mp-modal { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md, 14px); width: 100%; max-width: 440px; box-shadow: var(--shadow-lg); overflow: hidden; color: var(--text-primary); } .mp-modal-head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.25rem; background: var(--bg-card-header); border-bottom: 1px solid var(--border-subtle); } .mp-modal-head h5 { margin: 0; font-weight: 700; font-size: 1rem; display: flex; align-items: center; gap: .4rem; } .mp-modal-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.1rem; padding: .25rem; border-radius: 6px; transition: background .12s ease; } .mp-modal-close:hover { background: var(--bg-hover); color: var(--text-primary); } .mp-modal-body { padding: 1.25rem; } .mp-modal-label { font-weight: 600; font-size: .82rem; color: var(--text-secondary); margin-bottom: .5rem; display: block; } .mp-winner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1.25rem; } .mp-winner-btn { padding: .65rem .75rem; font-size: .8rem; font-weight: 600; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-surface); color: var(--text-primary); cursor: pointer; transition: all .12s ease; display: flex; align-items: center; justify-content: center; gap: .35rem; text-align: center; } .mp-winner-btn:hover { border-color: var(--brand-primary); background: var(--brand-primary-light); } .mp-winner-btn.selected { background: var(--brand-success-light); border-color: var(--brand-success); color: var(--color-winner); font-weight: 700; } .mp-score-grid { display: flex; align-items: center; gap: .75rem; justify-content: center; } .mp-score-col { flex: 1; text-align: center; } .mp-score-label { display: block; font-size: .72rem; font-weight: 600; color: var(--text-muted); margin-bottom: .35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mp-score-input { width: 100%; height: 48px; text-align: center; font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 10px; transition: border-color .12s ease, box-shadow .12s ease; } .mp-score-input:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-primary-light); } .mp-vs { font-weight: 700; font-size: .85rem; color: var(--text-muted); padding-top: 1.2rem; } .mp-modal-foot { display: flex; justify-content: flex-end; gap: .5rem; padding: .9rem 1.25rem; background: var(--bg-card-header); border-top: 1px solid var(--border-subtle); } .mp-btn-cancel { padding: .5rem 1rem; font-size: .82rem; font-weight: 600; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-surface); color: var(--text-secondary); cursor: pointer; transition: all .12s ease; } .mp-btn-cancel:hover { background: var(--bg-hover); color: var(--text-primary); } .mp-btn-save { padding: .5rem 1.25rem; font-size: .82rem; font-weight: 700; border: none; border-radius: 8px; background: var(--brand-primary); color: var(--text-on-brand); cursor: pointer; transition: filter .12s ease; } .mp-btn-save:hover { filter: brightness(1.1); } .mp-btn-save:disabled { opacity: .4; cursor: not-allowed; } @media (max-width: 640px) { .mp-match-grid { grid-template-columns: 1fr; } .mp-court-grid { grid-template-columns: 1fr; } .mp-winner-grid { grid-template-columns: 1fr; } } /* ============================================ TOURNAMENTS PAGINATION ============================================ */ .tournaments-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; padding: 16px 0 8px; flex-wrap: wrap; } .tc-page-info { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; } .tc-page-loading { display: flex; align-items: center; color: var(--text-muted); font-size: 0.85rem; padding: 8px 16px; } /* Style pagination to match dark theme */ .tournaments-pagination .page-link { background: var(--bg-card, #1e1e1e); border-color: var(--border-color, rgba(255,255,255,0.1)); color: var(--text-secondary); transition: background 0.15s, color 0.15s; } .tournaments-pagination .page-link:hover { background: var(--bg-hover, rgba(204,255,0,0.07)); color: var(--brand-primary, #CCFF00); border-color: var(--brand-primary, #CCFF00); } .tournaments-pagination .page-item.active .page-link { background: var(--brand-primary, #CCFF00); border-color: var(--brand-primary, #CCFF00); color: #111; font-weight: 700; } .tournaments-pagination .page-item.disabled .page-link { background: var(--bg-card, #1e1e1e); border-color: var(--border-color, rgba(255,255,255,0.08)); color: var(--text-muted); opacity: 0.45; } /* Light mode */ [data-theme="light"] .tournaments-pagination .page-link { background: #fff; border-color: #dee2e6; color: #333; } [data-theme="light"] .tournaments-pagination .page-link:hover { background: rgba(0,69,126,0.06); color: #00457E; border-color: #00457E; } [data-theme="light"] .tournaments-pagination .page-item.active .page-link { background: #CCFF00; border-color: #CCFF00; color: #111; } [data-theme="light"] .tournaments-pagination .page-item.disabled .page-link { background: #f8f9fa; color: #adb5bd; }