/* Shared layout and touch rules. Feature-specific charts and team colors stay
   in their own stylesheets. These rules also apply to personal player pages. */
:root { --ui-space:12px; --ui-control-radius:10px; --ui-card-radius:18px; }
.ui-icon { display:inline-block; vertical-align:middle; flex:0 0 auto; }
.nav-symbol { display:inline-flex; align-items:center; justify-content:center; }
.nav-symbol .ui-icon { width:21px; height:21px; }
.main-area,.page,.development-page,.development-page>*,.player-portal-main { min-width:0; }
.page>*,.development-page>*,.player-portal-main>* { max-width:100%; }
.button { gap:8px; font-weight:750; border-radius:var(--ui-control-radius); }
.button--small,.button--compact,.button--ghost { min-height:44px; }
.button--primary { box-shadow:0 4px 12px color-mix(in srgb,var(--green-950) 12%,transparent); }
.button-row { gap:var(--ui-space); }
.button:focus-visible,.text-button:focus-visible,.nav-button:focus-visible,
.section-shortcuts a:focus-visible { outline:3px solid var(--green-600); outline-offset:3px; }
.button:disabled { opacity:.58; box-shadow:none; }
.card-heading { gap:16px; }
.card-heading>div { min-width:0; }
.card-heading h2 { line-height:1.25; }
.card-heading p { line-height:1.6; }
.empty-state-actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:8px; }
.empty-state p { line-height:1.6; margin-bottom:20px; }
.empty-state-actions .button { min-height:48px; }
.match-setup-card>.card-heading { flex-wrap:wrap; align-items:flex-start; }
.match-setup-card>.card-heading>div { flex:1 1 300px; }
.match-setup-card>.card-heading>.button { flex:0 0 auto; white-space:nowrap; }
.team-switcher select { min-height:44px; }
.active-match-badge { min-height:44px; }
.live-label { color:var(--danger); }
.live-match-strip .live-label,.live-mobile-utility .live-label { color:#ffdddd; }
.match-hero .live-label { color:var(--danger); }
.live-clock { grid-template-columns:44px auto auto; }
.live-clock-button { width:44px; height:44px; min-width:44px; min-height:44px; }
.live-mode-button,.period-toggle-button,.match-overview-tab,.development-section-tab,
.season-filter-chip,.goal-map-mode-button,.season-summary-toggle-button,
.event-player-dialog .player-choice-button { min-height:44px; }
.goal-map-mode-button { padding-block:9px; }
.player-stat-group-heading-actions .field select { min-height:44px; }
.season-summary-toggle-button { padding:8px 12px; line-height:1.35; white-space:nowrap; }
.period-quick-stats small { overflow:visible; text-overflow:clip; white-space:normal; line-height:1.3; font-size:.7rem; }
.period-quick-stats>span { align-items:center; }
.table-scroll { max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-player strong { min-width:0; }
.player-stat-group-heading { gap:14px; }
.player-stat-group-heading-actions { gap:10px; flex-wrap:wrap; }
.player-stat-group-heading-actions .mep-definition-button { white-space:nowrap; }

/* Player filters remain a single bounded grid in portrait iPad. */
.development-toolbar { display:grid; grid-template-columns:minmax(0,1fr); align-items:stretch; gap:14px; padding:18px; }
.development-toolbar-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; }
.development-selectors { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1fr); gap:12px; width:100%; min-width:0; }
.development-selectors .field { min-width:0; width:100%; }
.development-selectors select { min-width:0; max-width:100%; width:100%; min-height:46px; }
.development-hero { min-height:0; padding:24px; grid-template-columns:72px minmax(0,1fr); gap:16px; border-radius:var(--ui-card-radius); }
.development-profile-mark { width:72px; height:72px; font-size:32px; }
.development-hero-copy { min-width:0; }
.development-hero-copy h1 { font-size:clamp(28px,3.6vw,40px); line-height:1.15; letter-spacing:-.03em; overflow-wrap:anywhere; }
.development-hero-copy p { margin-top:0; }
.development-hero-trend { grid-column:1/-1; min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:5px 12px; padding:10px 14px; border-radius:10px; }
.development-hero-trend strong { margin:0; }
.development-section-tabs { gap:4px; padding:6px; }
.development-section-tab { padding:0 16px; font-weight:750; }
.development-matches-card,.development-chart-wrap,.development-match-heading,
.development-match-heading>*,.development-match-select-field { min-width:0; max-width:100%; }
.development-match-select-field select { min-width:0; width:100%; }
.development-match-metrics article { min-width:0; }

/* A single history layout replaces conflicting older breakpoint grids. */
.history-summary { grid-template-columns:minmax(100px,.9fr) minmax(130px,1.4fr) 32px repeat(4,minmax(64px,.65fr)) 24px; gap:12px; }
.history-summary>* { min-width:0; }
.history-opponent strong { overflow-wrap:anywhere; }
.history-report-row { display:flex; justify-content:flex-end; align-items:center; padding:4px 14px; min-height:48px; }
.history-report-row>.button { width:auto; }
.history-chevron .ui-icon { width:20px; height:20px; }
.history-match--expanded .history-chevron .ui-icon { transform:rotate(180deg); }
.history-chevron { transform:none; }

/* Explicit destinations keep long overviews easy to navigate without hiding data. */
.section-shortcuts { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; padding:6px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.section-shortcuts a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; color:var(--green-800); font-size:.86rem; font-weight:750; text-decoration:none; border-radius:8px; }
.section-shortcuts a:hover,.section-shortcuts a:focus-visible { background:var(--green-50); }
.section-anchor,#season-overview,#season-players { scroll-margin-top:24px; min-width:0; }
.section-anchor>.card { margin:0; }

.squad-player { column-gap:12px; row-gap:10px; }
.squad-player>div:not(.squad-actions) { min-width:0; }
.squad-player strong { overflow-wrap:anywhere; }
.squad-actions { flex-wrap:wrap; gap:8px; }
.squad-actions .button { white-space:nowrap; }
.form-grid--admin-user { grid-template-columns:repeat(2,minmax(0,1fr)); }
.form-grid--admin-user .admin-team-access-field { grid-column:auto; min-width:0; }
.admin-team-access-options { flex-wrap:wrap; }
input[type=file] { min-width:0; max-width:100%; height:auto; min-height:52px; padding:6px; }
input[type=file]::file-selector-button { min-height:38px; margin-right:10px; padding:6px 12px; border:1px solid var(--line); border-radius:7px; background:var(--green-50); color:var(--green-900); font:inherit; font-weight:650; }
.zone-dialog button:not(.goal-map-toggle),.timeout-close { min-height:44px; }
.zone-dialog-header>button,.timeout-close { min-width:44px; }

@media(min-width:901px) and (max-width:1200px) {
 .live-match-strip { padding:12px 16px; min-height:88px; }
 .live-mode-bar { padding:8px 14px; }
 .live-coach-strip { min-height:56px; }
 .live-last-registration { padding:8px 14px; }
 .live-grid--event-first { grid-template-columns:minmax(320px,.9fr) minmax(0,1.25fr); align-items:start; }
 .live-grid--event-first .event-button { padding:8px; gap:8px; }
 .live-grid--event-first .event-symbol { width:28px; height:28px; font-size:18px; flex:0 0 28px; }
 .live-grid--event-first .event-button>span:last-child { min-width:0; }
 .live-grid--event-first .event-button strong { font-size:.9rem; }
 .live-grid--event-first .event-button small { font-size:.72rem; line-height:1.35; }
 .period-quick-stats>span { flex-direction:column; align-items:flex-start; gap:3px; }
 .period-quick-stats { gap:6px; }
 .squad-player { grid-template-columns:40px minmax(0,1fr); }
 .squad-actions { grid-column:2; justify-content:flex-start; }
 .player-stat-group-heading { flex-wrap:wrap; }
 .player-stat-group-heading>div:first-child { flex-basis:100%; }
 .player-stat-group-heading-actions { width:100%; justify-content:flex-start; }
}
@media(max-width:980px) {
 .topbar { flex-direction:column; align-items:stretch; gap:10px; padding:16px; }
 .topbar-actions { width:100%; justify-content:flex-start; align-items:center; }
 .topbar .team-switcher { min-width:150px; }
 .topbar-actions .logout-button { margin-left:auto; }
 .development-selectors select { font-size:.875rem; }
 .development-match-heading { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
 .development-match-select-field { width:100%; }
 .history-summary { grid-template-columns:100px minmax(0,1fr) 32px 82px 24px; }
 .history-summary>.history-metric { display:none; }
 .history-summary>.history-metric--score { display:grid; }
 .player-stat-group-heading { flex-direction:column; align-items:stretch; }
 .player-stat-group-heading-actions { width:100%; justify-content:flex-start; }
 .season-toolbar { flex-wrap:wrap; gap:18px; }
 .season-filters--chips { min-width:0; flex-wrap:wrap; }
}
@media(max-width:680px) {
 .topbar-actions .logout-button { display:inline-flex; margin-left:0; min-height:44px; padding-inline:8px; font-size:.78rem; }
 .topbar .team-switcher { min-width:112px; }
 .topbar-actions { gap:8px; }
 .topbar-actions .sync-pill { font-size:.72rem; padding-inline:10px; }
 .topbar-actions .active-match-badge { display:none; }
 .empty-state { padding:28px 20px; }
 .empty-state-actions { flex-direction:column; width:100%; }
 .empty-state-actions .button { width:100%; max-width:280px; }
 .match-setup-card>.card-heading>.button { width:100%; }
 .match-setup-card .form-grid--match-setup { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
 .match-field--opponent,.match-field--competition { grid-column:1/-1; }
 .development-selectors { grid-template-columns:minmax(0,1fr); }
 .development-selectors select { font-size:1rem; }
 .development-hero { padding:22px; gap:14px; grid-template-columns:56px minmax(0,1fr); }
 .development-profile-mark { width:56px; height:56px; font-size:26px; }
 .development-hero-copy h1 { font-size:28px; }
 .development-hero-trend { flex-direction:column; align-items:flex-start; }
 .development-section-tab { padding-inline:12px; }
 .squad-player { grid-template-columns:36px minmax(0,1fr); }
 .squad-actions { grid-column:1/-1; justify-content:flex-start; }
 .history-summary { grid-template-columns:minmax(0,1fr) 78px 24px; grid-template-rows:auto auto; gap:8px 10px; padding:14px; }
 .history-date { grid-column:1; grid-row:1; }
 .history-opponent { grid-column:1; grid-row:2; }
 .history-opponent>span { display:none; }
 .history-summary>.history-result { display:none; }
 .history-summary>.history-metric--score { grid-column:2; grid-row:1/3; display:grid; }
 .history-chevron { grid-column:3; grid-row:1/3; }
 .history-report-row { flex-direction:row; min-height:48px; padding:0 10px 8px; }
 .history-report-row .button { width:auto; }
 .recent-event { grid-template-columns:32px minmax(0,1fr) auto; gap:10px; }
 .recent-event>.button { grid-column:2/-1; justify-self:start; min-width:84px; min-height:44px; padding:0 12px; }
 .recent-event-meta { min-width:0; }
 .form-grid--admin-user { grid-template-columns:minmax(0,1fr); }
 .player-stat-group-heading-actions { align-items:stretch; }
 .player-stat-group-heading-actions .season-summary-toggle { flex-wrap:wrap; }
 .section-shortcuts a { flex:1; padding-inline:10px; }
}

.roster-option { min-width:0; grid-template-columns:22px 30px minmax(0,1fr); }
.roster-option>span:last-child { min-width:0; }
.roster-option>span:last-child:not(.roster-number) { overflow-wrap:normal; white-space:normal; }
@media(min-width:681px) and (max-width:1100px) { .roster-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.topbar>div:first-child { min-width:0; }
.topbar .eyebrow { overflow-wrap:anywhere; }

@media(max-width:680px) {
 .topbar { position:relative; }
 .topbar>div:first-child { padding-right:88px; }
 .topbar-actions .logout-button { position:absolute; right:12px; top:14px; padding-inline:6px; gap:5px; }
 .topbar-actions .logout-button .ui-icon { width:16px; height:16px; }
 .topbar-actions .help-link { width:44px; min-width:44px; padding:0; gap:0; font-size:0; }
 .topbar-actions .help-link .ui-icon { width:20px; height:20px; }
 .topbar-actions .sync-pill { max-width:110px; white-space:normal; line-height:1.25; }
}

.goalkeeper-shot-map-heading { flex-wrap:wrap; gap:16px; }
.goalkeeper-shot-map-heading>div:first-child { flex:1 1 300px; min-width:0; }
.goal-map-controls { flex:0 1 320px; min-width:0; max-width:100%; }
.goal-map-mode-toggle { width:100%; min-width:min(100%,280px); }
.event-symbol .ui-icon { width:22px; height:22px; }

@media(max-width:680px) { .live-clock { grid-template-columns:44px minmax(0,1fr); } }
@media(max-width:360px) { .live-step--events .event-grid { grid-template-columns:minmax(0,1fr); } }