used to provide. Now genuinely un-nested (completed-Match branch, and the upcoming branch for Parent/Player/non-Match Events where this grid still renders), each cell needs its own opaque base. */ .iexel-event-info div { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)), var(--iexel-card); border: 1px solid var(--iexel-border); } .iexel-availability-panel { background: rgba(255,255,255,.04); border: 1px solid var(--iexel-border); border-radius: 14px; padding: 18px; } .iexel-availability-panel h4 { margin: 0 0 14px; color: var(--iexel-white); } .iexel-availability-panel ul { margin: 0; padding-left: 20px; } .iexel-availability-panel.available { border-color: rgba(34,197,94,.45); } .iexel-availability-panel.unavailable { border-color: rgba(239,68,68,.45); } .iexel-availability-panel.pending { border-color: rgba(245,158,11,.45); } .iexel-countdown-card { display: inline-flex; flex-direction: column; gap: 4px; margin-top: 12px; padding: 16px 20px; border: 1px solid var(--iexel-border); border-radius: 14px; background: rgba(255,255,255,.04); color: var(--iexel-color-on-dark, #ffffff); } .iexel-countdown-card span { color: var(--iexel-muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .iexel-countdown-card strong { color: var(--iexel-gold-bright); font-size: 30px; line-height: 1; } .iexel-event-hero-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; } /* Batch 1A: a dedicated, designed Club OS surface for the operational fixture hero, decoupled from the shared photographic banner system entirely (EventHeroCard.php no longer calls event_banner()/ ResponsiveBannerPicture -- see that file for the full rationale). Scoped to "inside an .iexel-os-card" (this hero's only real-world context, both the upcoming and completed-Match render paths) and bled to the parent card's own edges with a negative margin equal to its padding, so this reads as one bold unified premium block rather than a card nested inside a card. min-height is explicitly reset to auto: the shared ".iexel-team-workspace-hero,.iexel-event-hero-card,.iexel-experience-hero" rule elsewhere in this file (untouched, still governs Team Workspace/ Experience heroes) would otherwise still force a tall 210-390px banner height even with the photograph removed. */ .iexel-os-card > .iexel-event-hero-card { position: relative; overflow: hidden; min-height: auto; margin: -24px -24px 24px; padding: 26px 24px; border-radius: 18px 18px 0 0; /* Batch 1B: deepened two-tone depth (wider tonal range, top-right gold glow plus a second bottom-left navy glow) and a restrained gold-tinted seam marking where the hero ends and the rest of the card begins -- using only the established navy/gold tokens already in this file, no new arbitrary colour values. */ background: radial-gradient(130% 160% at 100% 0%, rgba(203,161,53,.2), transparent 52%), radial-gradient(90% 120% at 0% 100%, rgba(16,40,93,.55), transparent 60%), linear-gradient(160deg, #123571 0%, #071d49 55%, #030d24 100%); background-color: var(--iexel-brand-primary, #071d49); border-bottom: 1px solid rgba(203,161,53,.35); } /* Final acceptance correction: the hero above only bleeds to the TOP/left/ right of its wrapping .iexel-os-card (flat bottom + 24px margin-bottom), leaving that card's own remaining padding/background exposed as a visually distinct "collar" strip underneath whenever nothing else is rendered in the same card -- reported as a stray "legacy/footer/card appendage" attached under the hero. This is exactly the normal case now (the hero-wrapping .iexel-os-card was un-nested in Batch 2 to contain ONLY the hero + EventLifecycleBanner, and the banner itself renders nothing for a plain scheduled/in-progress state, and is now suppressed for a plain completed/archived state with no unique message -- see PortalEventDetailPage.php). :last-child detects that case purely via existing DOM structure (no new PHP/markup): when the hero is the ONLY child, it bleeds to all four edges and takes the full border-radius, so the outer card's own background/corners are never separately visible. When EventLifecycleBanner DOES render (a cancellation with a real message), the hero is no longer :last-child and keeps its original flat-bottom/negative-bottom-margin behaviour unchanged, so the banner still sits correctly in the remaining card space below it. */ .iexel-os-card > .iexel-event-hero-card:last-child { margin-bottom: -24px; border-radius: 18px; } .iexel-event-hero-card h1 { color: var(--iexel-white); margin: 24px 0 18px; font-size: clamp(32px, 4vw, 52px); } /* Countdown/status stays useful but visually subordinate to the fixture identity and metadata above -- scoped to this hero only via the descendant selector, so the shared CountdownCard component's default (larger) presentation elsewhere in the portal is completely unaffected. Placed ahead of the existing @media(max-width:680px) completed-Match fluid-typography rule further down this file (same selector specificity) so that rule -- purpose-built for long lifecycle-state words like "ARCHIVED" not overflowing at narrow widths -- still wins there unchanged; this only takes effect at wider widths. */ /* Batch 1B: matches the confident 2px solid gold "Back to Team Events" outline treatment (.iexel-workspace-back), rather than no border at all -- still visually secondary to the fixture identity purely through its smaller, muted-background footprint above, not through a weaker border. */ .iexel-event-hero-card .iexel-countdown-card { min-width: 0; padding: 10px 16px; background: rgba(255,255,255,.06); border: 2px solid var(--iexel-gold-bright, var(--iexel-gold)); border-radius: 10px; } .iexel-event-hero-card .iexel-countdown-card span { font-size: .68rem; letter-spacing: .04em; } .iexel-event-hero-card .iexel-countdown-card strong { font-size: 22px; } .iexel-event-hero-tags { display: flex; gap: 12px; flex-wrap: wrap; } .iexel-event-hero-tags span { border: 1px solid var(--iexel-border); border-radius: 999px; padding: 8px 14px; background: rgba(255,255,255,.04); } .iexel-event-countdown { margin-left: auto; } .iexel-countdown-card { min-width: 160px; text-align: center; background: linear-gradient(135deg, rgba(203,161,53,.18), rgba(255,255,255,.04)); } .iexel-countdown-card strong { font-size: 34px; text-transform: uppercase; } .iexel-event-info { grid-template-columns: repeat(5, minmax(0, 1fr)); } .iexel-event-info div { min-height: 76px; display: flex; align-items: center; gap: 8px; line-height: 1.35; } @media (max-width: 1100px) { .iexel-event-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .iexel-event-info { grid-template-columns: 1fr; } } .iexel-event-info { grid-template-columns: repeat(3, minmax(0, 1fr)); } .iexel-event-info div { align-items: flex-start; flex-direction: column; gap: 6px; } @media (max-width: 900px) { .iexel-event-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ================================================== TEAM ATTENDANCE WORKSPACE ================================================== */ .iexel-team-attendance-workspace { display: grid; gap: 22px; min-width: 0; } .iexel-team-attendance-workspace * { min-width: 0; box-sizing: border-box; } .iexel-team-attendance-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .65fr); gap: 30px; align-items: center; padding: 30px; background: linear-gradient(135deg, var(--iexel-midnight), var(--iexel-navy)); border: 1px solid var(--iexel-border); border-left: 5px solid var(--iexel-gold); border-radius: 22px; box-shadow: var(--iexel-shadow-medium); } /* Final MVP polish: primary Attendance modules move from the older heavy left gold rail to the established Coach workspace gold-TOP accent (see Event Detail / Team Events / Match Report). Scoped to ".iexel-team-attendance-tab" (a marker class present only on the Attendance tab's own wrapper -- see TeamWorkspacePage.php) because TeamAvailabilityWorkspace.php intentionally reuses these same base classes for its own, unrelated Availability cards, which keep their existing left-rail treatment untouched. */ .iexel-team-attendance-tab .iexel-team-attendance-hero { border-left-width: 1px; border-top: 4px solid var(--iexel-gold); } .iexel-team-attendance-tab .iexel-team-attendance-summary, .iexel-team-attendance-tab .iexel-team-upcoming-registers, .iexel-team-attendance-tab .iexel-team-completed-registers { background: linear-gradient(145deg, var(--iexel-midnight), var(--iexel-navy)); border-top: 4px solid var(--iexel-gold); box-shadow: var(--iexel-shadow-medium); } /* Coach Team Workspace Availability -- Final MVP Polish: the same gold-top hierarchy applied to the Availability tab's own reuse of these shared classes (Availability Focus = .iexel-team-attendance-hero; Availability Overview = .iexel-team-dashboard-card, also shared with Team Workspace Overview and TeamEventForm). Scoped to ".iexel-team-availability-tab" (a marker class present only on the Availability tab's own wrapper -- see TeamAvailabilityWorkspace.php) so Attendance's separately-scoped treatment above, Overview's own ".iexel-team-workspace-grid" scoping, and any Parent/Player rendering of these same components, are all left untouched. */ .iexel-team-availability-tab .iexel-team-attendance-hero, .iexel-team-availability-tab .iexel-team-dashboard-card { border-left-width: 1px; border-top: 4px solid var(--iexel-gold); } /* Upcoming Availability Windows: final background-tone correction -- real Dev-site review found the earlier white-wash-over-gradient layering (see prior revision, kept here only in history) visibly paler than Availability Focus/Overview, breaking the "same dark primary-module family" read the Product Owner wants across all three modules. Dropped the white-wash overlay entirely and matched the plain two-tone midnight-to-navy gradient already established for primary Coach Workspace modules (identical treatment to Attendance's own separately- scoped ".iexel-team-upcoming-registers" rule above, and the same colour pair -- just reordered -- as Availability Focus's own ".iexel-team-attendance-hero" gradient). The individual fixture/window card (.iexel-team-attendance-event) is deliberately left untouched -- its existing subtle rgba(255,255,255,.025) tint now reads as the "slightly lighter" operational layer against this darker outer module, which is the intended hierarchy. */ .iexel-team-availability-tab .iexel-team-upcoming-registers { background: linear-gradient(145deg, var(--iexel-midnight), var(--iexel-navy)); border-top: 4px solid var(--iexel-gold); box-shadow: var(--iexel-shadow-medium); } .iexel-team-attendance-hero.is-empty { grid-template-columns: 1fr; } .iexel-team-attendance-hero h2, .iexel-team-attendance-summary h2, .iexel-team-upcoming-registers h2, .iexel-team-completed-registers h2 { margin: 7px 0 16px; color: var(--iexel-white); } .iexel-team-attendance-hero p { margin: 5px 0; color: var(--iexel-color-on-dark-muted, #c8d3e3); font-weight: 700; } .iexel-team-attendance-hero .iexel-button { margin-top: 18px; } .iexel-team-attendance-hero-metrics { display: grid; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .iexel-team-attendance-hero-metrics > div:not(.iexel-team-attendance-progress) { padding: 15px 8px; display: grid; align-content: center; gap: 4px; text-align: center; background: rgba(255,255,255,.05); border: 1px solid var(--iexel-border); border-radius: 14px; } .iexel-team-attendance-hero-metrics strong { display: block; color: var(--iexel-gold); font-size: 25px; } .iexel-team-attendance-hero-metrics span { color: var(--iexel-muted); font-size: 11px; font-weight: 900; text-transform: uppercase; overflow-wrap: anywhere; } .iexel-team-attendance-progress { grid-column: 1 / -1; height: 8px; overflow: hidden; background: rgba(255,255,255,.09); border-radius: 999px; } .iexel-team-attendance-progress > span { display: block; height: 100%; background: var(--iexel-gold); border-radius: inherit; } .iexel-team-attendance-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .iexel-team-attendance-summary-grid div { padding: 18px; background: rgba(255,255,255,.035); border: 1px solid var(--iexel-border); border-radius: 14px; } .iexel-team-attendance-summary-grid strong { display: block; color: var(--iexel-gold); font-size: 26px; } .iexel-team-attendance-summary-grid span { color: var(--iexel-muted); font-size: 12px; font-weight: 800; } .iexel-team-attendance-event-list, .iexel-team-completed-list { display: grid; gap: 12px; } .iexel-team-attendance-event { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px; background: rgba(255,255,255,.025); border: 1px solid var(--iexel-border); border-radius: 16px; } .iexel-team-attendance-event-date { padding: 12px 6px; text-align: center; background: var(--iexel-navy); border-radius: 12px; } .iexel-team-attendance-event-date strong { display: block; color: var(--iexel-gold); font-size: 25px; } .iexel-team-attendance-event-date span { color: var(--iexel-muted); font-size: 11px; font-weight: 900; text-transform: uppercase; } .iexel-team-attendance-event h3 { margin: 3px 0; color: var(--iexel-white); } .iexel-team-attendance-event p { margin: 0 0 9px; color: var(--iexel-muted); } .iexel-team-attendance-event-action { display: grid; gap: 8px; justify-items: end; } .iexel-team-attendance-event-action strong { color: var(--iexel-gold); } .iexel-team-completed-list article { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 14px 0; border-top: 1px solid var(--iexel-border); } .iexel-team-completed-list article:first-child { border-top: 0; } .iexel-team-completed-list h3 { margin: 4px 0 6px; color: var(--iexel-white); } .iexel-team-completed-list article > div > span, .iexel-team-attendance-empty { color: var(--iexel-muted); } /* Final MVP polish: tighten the shared EventLifecycleBanner's own vertical rhythm specifically within Recently Completed Registers so DATE / TITLE / COMPLETED STATUS / OUTCOMES read as one coherent compact record, without touching the shared banner's margin/padding used elsewhere (Event Detail, Team Events, Portal cards, etc.). */ .iexel-team-completed-list .iexel-event-lifecycle-banner { margin-top: 6px; padding: 10px 12px; } .iexel-team-status-totals { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; } .iexel-team-status-totals span { padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 900; } .iexel-team-status-totals .is-available { color: #75e6a4; background: rgba(47,181,101,.12); } .iexel-team-status-totals .is-pending { color: #ffd36a; background: rgba(226,174,42,.12); } .iexel-team-status-totals .is-unavailable { color: #ff8c8c; background: rgba(222,75,75,.12); } .iexel-team-status-totals .is-present { color: #75e6a4; background: rgba(47,181,101,.12); } .iexel-team-status-totals .is-late { color: #ffd36a; background: rgba(226,174,42,.12); } .iexel-team-status-totals .is-absent { color: #ff8c8c; background: rgba(222,75,75,.12); } .iexel-team-status-totals .is-excused { color: #9fc4ff; background: rgba(83,132,207,.12); } @media (max-width: 1024px) { .iexel-team-attendance-hero { grid-template-columns: 1fr; } .iexel-team-attendance-hero-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .iexel-team-attendance-hero { grid-template-columns: 1fr; padding: 22px; } .iexel-team-attendance-hero-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .iexel-team-attendance-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .iexel-team-attendance-event { grid-template-columns: 58px minmax(0, 1fr); } .iexel-team-attendance-event-action { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; justify-items: start; } .iexel-team-completed-list article { align-items: flex-start; flex-direction: column; } .iexel-team-completed-list .iexel-button { width: 100%; text-align: center; } /* Final MVP polish: now that the outcome pills read the full words (Present/Late/Absent/Excused) rather than single letters, a single flex row of four no longer reads cleanly at narrow widths. Reflows to a clean 2x2 grid instead of shrinking type. Scoped to ".iexel-team-completed-list" (exclusive to Recently Completed Registers) so the Availability tab's own, already-full-word ".iexel-team-status-totals" reuse (Available/Pending/Unavailable, 3 items) is unaffected and keeps its existing single-row wrap. */ .iexel-team-completed-list .iexel-team-status-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; /* Follow-up: the Completed banner and this paragraph both carry zero bottom/top margin by design (shared base rules), so they sat directly adjacent with only the banner's own padding as a buffer -- this read as "Completed sitting on top of Present/Late" at narrow widths. Small mobile-only gap added without touching the shared banner component or the base ".iexel-team-status-totals" margin used by the Availability tab. */ margin-top: 10px; } .iexel-team-completed-list .iexel-team-status-totals span { text-align: center; } /* Follow-up: PO wants each mobile history record to read as one deliberate, centred record (date / fixture / Completed / outcomes / View Event), and the section heading centred with it. Desktop must stay exactly as accepted -- scoped to ".iexel-team-attendance-tab" (the Attendance-tab-only marker) combined with ".iexel-team-completed-registers"/".iexel-team-completed-list" (both exclusive to this section), inside the existing 760px breakpoint, so nothing outside Recently Completed Registers and no wider viewport is touched. */ .iexel-team-attendance-tab .iexel-team-completed-registers > .iexel-section-kicker, .iexel-team-attendance-tab .iexel-team-completed-registers > h2 { text-align: center; } .iexel-team-attendance-tab .iexel-team-completed-list article { align-items: center; text-align: center; } .iexel-team-attendance-tab .iexel-team-completed-list article > div { width: 100%; } } @media (max-width: 360px) { .iexel-team-attendance-hero-metrics { grid-template-columns: 1fr; } } @media (max-width: 640px) { .iexel-event-info { grid-template-columns: 1fr; } } .iexel-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 24px 0; } .iexel-summary-card { background: rgba(255,255,255,.04); border: 1px solid var(--iexel-border); border-radius: 16px; padding: 20px; box-shadow: 0 12px 30px rgba(0,0,0,.18); } .iexel-summary-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .iexel-summary-icon { font-size: 24px; } .iexel-summary-title { color: var(--iexel-muted); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .06em; } .iexel-summary-value { color: var(--iexel-white); font-size: 28px; font-weight: 800; } .iexel-summary-success { border-color: rgba(34,197,94,.5); } .iexel-summary-danger { border-color: rgba(239,68,68,.5); } .iexel-summary-warning { border-color: rgba(245,158,11,.5); } .iexel-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 24px 0; } @media (max-width: 900px) { .iexel-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .iexel-stat-grid { grid-template-columns: 1fr; } } .iexel-stat-card { background: rgba(255,255,255,.04); border: 1px solid var(--iexel-border); border-radius: 16px; min-width: 0; padding: 20px; box-shadow: 0 14px 34px rgba(0,0,0,.2); } .iexel-stat-icon { font-size: 28px; margin-bottom: 10px; } .iexel-stat-label { color: var(--iexel-muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } .iexel-stat-value { color: var(--iexel-white); font-size: 34px; font-weight: 900; margin-top: 8px; overflow-wrap: normal; word-break: normal; } .iexel-stat-response .iexel-stat-value { font-size: clamp(26px, 2.1vw, 30px); } .iexel-stat-hint { color: var(--iexel-muted); margin-top: 6px; font-size: 13px; } .iexel-stat-success { border-color: rgba(34,197,94,.5); } .iexel-stat-danger { border-color: rgba(239,68,68,.5); } .iexel-stat-warning { border-color: rgba(245,158,11,.5); } .iexel-section-header { margin: 28px 0 14px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.16); } /* Batch 2: this is always DashboardSection's own first child -- the separator border/spacing meant for a PRECEDING sibling inside the same card reads as a stray line with 24px of card padding above it now that .iexel-dashboard-section is its own opaque card. */ .iexel-dashboard-section > .iexel-section-header:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .iexel-section-kicker { display: block; color: #cba135; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; } .iexel-section-header h3 { margin: 0; color: #ffffff; font-size: 18px; font-weight: 800; } .iexel-availability-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 12px; } .iexel-availability-panel { background: rgba(255, 255, 255, 0.035); border-radius: 14px; padding: 18px; min-height: 110px; } .iexel-availability-panel h4 { margin: 0 0 14px; color: #ffffff; font-size: 14px; font-weight: 800; } .iexel-availability-panel ul { margin: 0; padding-left: 18px; } .iexel-availability-panel li { margin-bottom: 8px; color: #ffffff; font-weight: 700; } .iexel-availability-panel p { margin: 0; color: rgba(255, 255, 255, 0.78); font-weight: 700; } /* Coach Workspace Batch B (B2): a Player's name inside Team Responses is now an inline response-update control -- native

, no JS accordion dependency, and reuses the exact same disclosure-chevron convention already established for .iexel-event-response-summary-row directly above and .iexel-coach-availability-disclosure elsewhere on this page, rather than inventing a fourth. The field layout inside the form reuses .iexel-coach-availability-fields verbatim (previously only used by the now-removed standalone update form) -- same dark-surface- validated select/button sizing, no new form styling invented. Multiple Player editors may be open at once; opening one never closes another. */ .iexel-availability-panel li:has(.iexel-availability-panel-edit) { margin-bottom: 4px; } .iexel-availability-panel-edit summary { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 0; color: #ffffff; font-weight: 700; cursor: pointer; list-style: none; } .iexel-availability-panel-edit summary::-webkit-details-marker { display: none; } .iexel-availability-panel-edit summary::after { content: "\203A"; margin-left: auto; color: var(--iexel-color-on-dark-muted, #c8d3e3); font-size: 16px; transition: transform .15s ease; } .iexel-availability-panel-edit[open] summary::after { transform: rotate(90deg); } .iexel-availability-row-static { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 0; color: #ffffff; font-weight: 700; } .iexel-availability-row-lead { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .iexel-availability-player-name { overflow-wrap: break-word; word-break: break-word; } .iexel-availability-view-receipt { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--iexel-color-on-dark-muted, rgba(255, 255, 255, 0.65)); white-space: nowrap; padding-right: 6px; } .iexel-availability-panel-edit-form { margin: 6px 0 10px; padding: 12px; background: rgba(255,255,255,.035); border: 1px solid var(--iexel-border); border-radius: 10px; } .iexel-availability-panel-edit-form .iexel-coach-availability-fields { grid-template-columns: minmax(0, 1fr) auto; } @media (max-width: 480px) { .iexel-availability-panel-edit summary, .iexel-availability-row-static { flex-wrap: wrap; row-gap: 2px; } .iexel-availability-view-receipt { padding-left: 24px; width: 100%; margin-left: 0; } .iexel-availability-panel-edit-form .iexel-coach-availability-fields { grid-template-columns: 1fr; } .iexel-availability-panel-edit-form .iexel-button { width: 100%; } } .iexel-availability-panel-note { margin-top: 12px; color: rgba(255, 255, 255, 0.72); font-size: 12px; } /* Compact, closed-by-default Response Summary (Batch 1 mobile UX redesign): each response category is a native details/summary row, matching the existing disclosure pattern already used by .iexel-event-lifecycle- confirmation / .iexel-completed-match-actions__recovery elsewhere on this page, rather than a new interaction framework. */ /* Primary card gold top accent standardisation: this card previously only carried the shared .iexel-os-card base treatment (a thin flat gold LEFT stripe, painted via an inset box-shadow -- see .iexel-os-card itself, used unmodified across the whole Club OS portal and never touched here), while this page's other primary modules (Event Information, Coach Actions, Team Availability, Match Selection, Event Actions, ...) all carry a stronger gold TOP edge instead. Overriding just the box-shadow (dropping the inset gold stripe, keeping only the existing drop-shadow already used by every other promoted card) and adding border-top here brings Team Responses into the same consistent "gold-topped operational module" pattern -- the underlying .iexel-os-card background/1px border/radius/padding are untouched, and this class is exclusive to this page (PortalEventDetailPage.php only), so no scoping wrapper is needed. */ .iexel-event-response-summary { display: grid; gap: 10px; border-top: 4px solid var(--iexel-gold); box-shadow: var(--iexel-shadow-small); } .iexel-event-response-summary h3 { margin: 2px 0 4px; color: var(--iexel-white); font-size: 16px; } .iexel-event-response-summary-row { padding: 10px 12px; background: rgba(255,255,255,.035); border: 1px solid var(--iexel-border); border-radius: 10px; } .iexel-event-response-summary-row summary { display: flex; align-items: center; gap: 10px; min-height: 24px; color: var(--iexel-white); font-weight: 800; cursor: pointer; list-style: none; } .iexel-event-response-summary-row summary::-webkit-details-marker { display: none; } .iexel-event-response-summary-row summary::after { content: "\203A"; margin-left: auto; color: var(--iexel-color-on-dark-muted, #c8d3e3); font-size: 18px; transition: transform .15s ease; } .iexel-event-response-summary-row[open] summary::after { transform: rotate(90deg); } .iexel-event-response-summary-row--empty { display: flex; align-items: center; gap: 10px; min-height: 24px; color: var(--iexel-color-on-dark-muted, #c8d3e3); font-weight: 700; opacity: .7; } .iexel-event-response-summary-icon { flex: 0 0 auto; } .iexel-event-response-summary-count { flex: 0 0 auto; min-width: 1.4em; color: var(--iexel-gold-bright, var(--iexel-gold)); font-size: 1.05rem; font-weight: 900; } .iexel-event-response-summary-label { flex: 1 1 auto; overflow-wrap: anywhere; } .iexel-event-response-summary-detail { margin-top: 10px; } .iexel-event-response-summary-detail .iexel-availability-panel { padding: 0; background: none; border: 0; } .iexel-event-response-summary-detail .iexel-availability-panel h4 { display: none; } /* Batch 2: RSVP Reminder progressive disclosure -- count stays visible, the form is collapsed behind the same disclosure pattern as everywhere else on this page. */ /* Primary card gold top accent standardisation: .iexel-rsvp-reminder-card had no rule of its own -- it only ever received the shared .iexel-os-card base treatment (thin flat gold LEFT stripe via inset box-shadow), unlike this page's other promoted primary modules. Same treatment as Team Responses immediately above: drop the inherited inset gold stripe, add a stronger gold top edge. Exclusive to this page -- no scoping wrapper needed. */ .iexel-rsvp-reminder-card { border-top: 4px solid var(--iexel-gold); box-shadow: var(--iexel-shadow-small); } .iexel-rsvp-reminder-count { margin: 6px 0 12px; color: var(--iexel-muted); font-size: .85rem; font-weight: 800; text-transform: uppercase; } .iexel-rsvp-reminder-disclosure summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; color: var(--iexel-color-on-dark, #ffffff); font-weight: 900; cursor: pointer; list-style: none; } .iexel-rsvp-reminder-disclosure summary::-webkit-details-marker { display: none; } .iexel-rsvp-reminder-disclosure summary::after { content: "\203A"; margin-left: auto; color: var(--iexel-color-on-dark-muted, #c8d3e3); font-size: 18px; transition: transform .15s ease; } .iexel-rsvp-reminder-disclosure[open] summary::after { transform: rotate(90deg); } .iexel-rsvp-reminder-disclosure form { margin-top: 10px; } .iexel-rsvp-reminder-disclosure textarea { width: 100%; min-height: 60px; box-sizing: border-box; resize: vertical; } .iexel-rsvp-recipients-fieldset { border: 0; padding: 0; margin: 0 0 4px; } .iexel-rsvp-recipients-list { display: flex; flex-direction: column; gap: 6px; } .iexel-rsvp-recipient-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--iexel-border, rgba(255, 255, 255, .12)); border-radius: 8px; cursor: pointer; color: var(--iexel-color-on-dark, #ffffff); font-size: .9rem; font-weight: 600; } .iexel-rsvp-recipient-row:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); } .iexel-rsvp-recipient-checkbox { width: 18px; height: 18px; min-height: 18px; accent-color: var(--iexel-gold); flex-shrink: 0; cursor: pointer; } .iexel-rsvp-recipient-name { flex: 1 1 auto; overflow-wrap: anywhere; word-break: break-word; } /* Batch 2: Lifecycle Actions (Cancel/Archive/...) collapsed by default -- the whole card is now itself the

, so its own summary chevron matches the pattern above; the inner EventLifecycleControlsCard section (untouched, still has its own per-action confirmation

) loses ONLY its own redundant card chrome here to avoid a card nested in a card, exactly as .iexel-event-response-summary-detail already does for AvailabilityPanel. */ /* MVP surface-hierarchy correction: this class is exclusive to Event Detail (both the future and completed-Match branches, never rendered anywhere else), so it is restyled directly rather than needing the .iexel-event-detail scoping wrapper -- promoted to the same richer treatment as Match Report/ Match Selection/Attendance Summary above. */ .iexel-event-lifecycle-disclosure { background: linear-gradient(180deg, var(--iexel-navy), var(--iexel-midnight)); border: 1px solid rgba(203,161,53,.4); border-top: 4px solid var(--iexel-gold); box-shadow: var(--iexel-shadow-small); } .iexel-event-lifecycle-disclosure > summary { display: flex; align-items: center; gap: 8px; min-height: 24px; color: var(--iexel-color-on-dark, #ffffff); font-weight: 900; text-transform: uppercase; font-size: .85rem; letter-spacing: .04em; cursor: pointer; list-style: none; } .iexel-event-lifecycle-disclosure > summary::-webkit-details-marker { display: none; } .iexel-event-lifecycle-disclosure > summary::after { content: "\203A"; margin-left: auto; color: var(--iexel-color-on-dark-muted, #c8d3e3); font-size: 18px; transition: transform .15s ease; } .iexel-event-lifecycle-disclosure[open] > summary::after { transform: rotate(90deg); } .iexel-event-lifecycle-disclosure .iexel-event-lifecycle-card { padding: 0; background: none; border: 0; margin-top: 14px; } /* Batch 2: Team Availability administrative form collapsed by default. */ .iexel-coach-availability-disclosure summary { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--iexel-color-on-dark, #ffffff); font-weight: 900; cursor: pointer; list-style: none; } .iexel-coach-availability-disclosure summary::-webkit-details-marker { display: none; } .iexel-coach-availability-disclosure summary::after { content: "\203A"; margin-left: auto; color: var(--iexel-color-on-dark-muted, #c8d3e3); font-size: 18px; transition: transform .15s ease; } .iexel-coach-availability-disclosure[open] summary::after { transform: rotate(90deg); } .iexel-coach-availability-disclosure .iexel-coach-availability-update { margin-top: 14px; } .iexel-event-lifecycle-banner { display: grid; gap: 6px; margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); } .iexel-event-lifecycle-banner strong, .iexel-event-lifecycle-banner p { margin: 0; color: inherit; } .iexel-event-card .iexel-event-lifecycle-banner { color: #071d49; } .iexel-event-lifecycle-banner.is-cancelled { border-color: rgba(239,68,68,.45); background: rgba(127,29,29,.22); } .iexel-event-lifecycle-banner.is-completed { border-color: rgba(59,130,246,.4); background: rgba(15,23,42,.24); } .iexel-event-lifecycle-banner.is-draft, .iexel-event-lifecycle-banner.is-archived { border-color: rgba(148,163,184,.35); background: rgba(15,23,42,.18); } @media (max-width: 720px) { .iexel-availability-grid { grid-template-columns: 1fr; } } .iexel-info-label { color: var(--iexel-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .iexel-info-value { display: block; color: var(--iexel-white); font-size: 22px; font-weight: 800; margin-top: 6px; } /* Batch 2 gave this card an opaque dark base (was translucent-only, unsafe once un-nested from the accidental ambient dark backdrop). MVP surface-hierarchy correction promotes it further, from that flatter single-tone navy to the same richer two-stop gradient + gold-top accent as this page's other primary cards -- exclusive to Event Detail already, no scoping wrapper needed. */ .iexel-event-notes-card { margin-top: 24px; background: linear-gradient(180deg, var(--iexel-navy), var(--iexel-midnight)); border: 1px solid rgba(203,161,53,.4); border-top: 4px solid var(--iexel-gold); border-radius: 16px; padding: 20px; box-shadow: var(--iexel-shadow-small); } .iexel-event-notes-card p { margin: 8px 0 0; color: var(--iexel-color-on-dark, #ffffff); font-weight: 600; line-height: 1.6; } /* ========================================================== COACH ACTIONS CARD ========================================================== */ /* Batch 2: same missing-opaque-background issue as .iexel-event-notes-card above, same fix -- var(--iexel-card) navy added as the base layer under the existing translucent tint, now that this card is un-nested directly into the page's light gutter background rather than an ambient dark parent card. */ /* Primary card gold top accent standardisation: this card previously had no gold accent at all (flat 1px border(--iexel-border) on every side -- confirmed acceptable against the continuous canvas by the earlier "4 remaining flatter cards" review, but that review was about background tone/cohesion, not accent-direction consistency, which is what this batch addresses). Background/padding/radius/shadow are unchanged; border-top is the only addition, bringing it into line with this page's other gold-topped primary modules. Exclusive to this page -- no scoping wrapper needed. */ .iexel-coach-actions-card{ margin:28px 0; padding:24px; border-radius:18px; background:linear-gradient( 180deg, rgba(255,255,255,.04), rgba(255,255,255,.02) ), var(--iexel-card); border:1px solid var(--iexel-border); border-top: 4px solid var(--iexel-gold); box-shadow:0 18px 50px rgba(0,0,0,.25); } .iexel-coach-actions-card h3{ margin:6px 0 18px; color:var(--iexel-white); } .iexel-coach-actions-list{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; } .iexel-coach-actions-list .iexel-button{ display:flex; align-items:center; justify-content:center; text-align:center; min-width:0; min-height:42px; padding:10px 8px; font-size:13px; line-height:1.2; box-sizing:border-box; } .iexel-coach-actions-list .iexel-coach-action--full{ grid-column:1 / -1; } /* Batch 2: matches the existing native-disclosure pattern used by .iexel-event-lifecycle-confirmation/.iexel-completed-match-actions__recovery/ .iexel-event-response-summary-row elsewhere on this page. */ .iexel-coach-actions-tools{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);} .iexel-coach-actions-tools summary{display:flex;align-items:center;gap:8px;min-height:24px;color:var(--iexel-color-on-dark,#ffffff);font-size:.85rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;list-style:none;} .iexel-coach-actions-tools summary::-webkit-details-marker{display:none;} .iexel-coach-actions-tools summary::after{content:"\203A";margin-left:auto;color:var(--iexel-color-on-dark-muted,#c8d3e3);font-size:18px;transition:transform .15s ease;} .iexel-coach-actions-tools[open] summary::after{transform:rotate(90deg);} .iexel-coach-actions-tools .iexel-coach-actions-list{margin-top:14px;} .iexel-coach-actions-list button{ background:var(--iexel-midnight-2); color:#fff; border:1px solid var(--iexel-border); border-radius:12px; padding:12px 18px; font-weight:700; cursor:pointer; transition:.2s; } .iexel-coach-actions-list button:hover{ background:var(--iexel-gold); color:#06142f; transform:translateY(-2px); } /* ========================================================== CLUB OS LAYOUT ENGINE ========================================================== */ .iexel-two-column-layout{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:24px; align-items:start; margin:28px 0; } .iexel-two-column-main{ display:flex; flex-direction:column; gap:24px; min-width:0; } .iexel-two-column-sidebar{ display:flex; flex-direction:column; gap:24px; min-width:0; } @media (max-width:1024px){ .iexel-two-column-layout{ grid-template-columns:1fr; } .iexel-two-column-sidebar{ order:-1; } } .iexel-two-column-full{ grid-column:1 / -1; } /* MVP surface-hierarchy correction / mobile vertical rhythm: the completed- Match branch now suppresses EventInfoGrid+Venue for the Coach (the hero already carries every fact) with nothing else rendered in the main column there, leaving an empty .iexel-two-column-main that still contributed its own row-gap on every side -- a genuine dead vertical band at 320px between the sidebar cards above and Match Lineup & Incident History below. Collapsed via :not(:has(*)) (correctly ignores the PHP template's own whitespace text nodes between the open/close tags, unlike :empty) rather than any PHP change to the shared TwoColumnLayout helper. General-purpose correctness fix for the shared layout primitive itself (an empty column should never reserve gap space or a track), not an Event-Detail-only opinion -- safe for every other page that reuses TwoColumnLayout, since main is never actually empty there today. */ .iexel-two-column-main:not(:has(*)) { display: none; } /* :has() cannot itself be nested inside another :has()'s argument (a ":has() cannot contain :has()" restriction in the CSS Selectors spec) -- ".iexel-two-column-layout:has(.iexel-two-column-main:not(:has(*)))" is an invalid selector for that reason and never matches anything. Resolved at the one call site that needs it (PortalEventDetailPage.php's completed- Match branch) with this explicit modifier class instead, so the sidebar spans the full grid width on desktop when main is skipped. */ .iexel-two-column-sidebar--full { grid-column: 1 / -1; } /* ========================================================== WEATHER CARD ========================================================== */ .iexel-weather-card h3{ margin:8px 0; font-size:32px; color:var(--iexel-white); } .iexel-weather-summary{ color: var(--iexel-color-on-dark-muted, #c8d3e3); margin-bottom:18px; } .iexel-weather-stats{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .iexel-weather-stats div{ padding:12px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--iexel-border); } .iexel-weather-stats strong{ display:block; font-size:12px; color:var(--iexel-muted); text-transform:uppercase; margin-bottom:4px; } .iexel-weather-stats span{ font-size:18px; font-weight:700; color:var(--iexel-white); } .iexel-sidebar-stack { display: flex; flex-direction: column; gap: 18px; } .iexel-event-countdown-card{ text-align:center; } .iexel-countdown-value{ font-size:36px; font-weight:700; color:var(--iexel-gold); line-height:1; margin:14px 0 8px; } .iexel-countdown-subtitle{ font-size:13px; color:var(--iexel-text-muted); text-transform:uppercase; letter-spacing:.08em; } .iexel-countdown-date{ margin-top:18px; padding-top:14px; border-top:1px solid var(--iexel-border); color:var(--iexel-white); font-weight:600; } /* Batch 2: DashboardSection previously had no card chrome of its own at all -- safe only because it always used to render inside the single giant ambient-dark outer .iexel-os-card. Now that Team Availability and Coaches Attending sit directly in the page's own light gutter background (the real alignment fix), this needs the same opaque .iexel-os-card-style treatment every other lower section already has, or its own header text and every un-backed translucent child (CoachAvailabilityUpdateForm's .iexel-coach-availability-update, the Coaches Attending .iexel-availability-panel) become close to unreadable against the light page background. */ /* MVP surface-hierarchy correction: promoted from the flatter .iexel-os-card- style single-tone navy to the same richer two-stop gradient as this page's other primary cards -- exclusive to Event Detail already (Team Availability/Coaches Attending), no scoping wrapper needed. Nested children (CoachAvailabilityUpdateForm's .iexel-coach-availability-update, the Coaches Attending .iexel-availability-panel) keep their existing lighter translucent tint unchanged -- the intended nested/detail surface. */ .iexel-dashboard-section { margin-top: 24px; padding: 24px; border-radius: 18px; background: linear-gradient(180deg, var(--iexel-navy), var(--iexel-midnight)); border: 1px solid rgba(203,161,53,.4); border-top: 4px solid var(--iexel-gold); box-shadow: var(--iexel-shadow-small); } .iexel-dashboard-section:first-child { margin-top: 0; } .iexel-button{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px; text-decoration:none; font-weight:600; font-size:14px; transition:.2s; } .iexel-button-primary{ background:var(--iexel-gold); color:#111; } .iexel-button-primary:hover{ transform:translateY(-2px); } .iexel-button-secondary{ background:rgba(255,255,255,.06); border:1px solid var(--iexel-border); color:var(--iexel-white); } .iexel-button-secondary:hover{ background:rgba(255,255,255,.12); } .iexel-workspace-back-row { display: flex; min-width: 0; } .iexel-workspace-back { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 46px; padding: 10px 15px; box-sizing: border-box; border: 2px solid var(--iexel-gold); border-radius: 10px; font-weight: 850; line-height: 1.3; text-align: center; text-decoration: none; overflow-wrap: anywhere; transition: background .18s ease, color .18s ease, border-color .18s ease; } .iexel-workspace-back.is-light { color: var(--iexel-navy); background: var(--iexel-white); } .iexel-workspace-back.is-dark { color: var(--iexel-white); background: var(--iexel-navy); } .iexel-workspace-back:hover { color: var(--iexel-navy); background: var(--iexel-gold); border-color: var(--iexel-gold); } .iexel-workspace-back:focus-visible { color: var(--iexel-navy); background: var(--iexel-gold); border-color: var(--iexel-white); outline: 3px solid var(--iexel-gold-bright); outline-offset: 3px; } .iexel-workspace-back.is-full-width { width: 100%; } @media (max-width: 600px) { .iexel-workspace-back-row, .iexel-workspace-back { width: 100%; } } .iexel-button-active { background: var(--iexel-gold); color: #06142f; border: 1px solid var(--iexel-gold); box-shadow: 0 0 0 3px rgba(203,161,53,.18); } .iexel-button-danger-active { background: var(--iexel-danger); color: #ffffff; border: 1px solid var(--iexel-danger); box-shadow: 0 0 0 3px rgba(239,68,68,.18); } /* ========================================================== BADGES ========================================================== */ .iexel-badge{ display:inline-flex; align-items:center; justify-content:center; padding:6px 14px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--iexel-border); background:#314673; color:#fff; gap:6px; transition:.2s; } .iexel-badge:hover{ transform:translateY(-1px); } .iexel-badge-success{ background:#143d2b; border-color:#22c55e; color:#b9ffd4; } .iexel-badge-danger{ background:#431d28; border-color:#ef4444; color:#ffd0d0; } .iexel-badge-warning{ background:#45340d; border-color:#f59e0b; color:#ffe6a5; } .iexel-badge-info{ background:#1f375e; border-color:#60a5fa; color:#dbeafe; } .iexel-badge-gold{ background:linear-gradient( 135deg, #cba135, #e5bf58 ); color:#06142f; border:none; box-shadow: 0 4px 14px rgba(203,161,53,.35); } .iexel-event-hero-tags .iexel-badge { font-size: 11px; padding: 7px 12px; font-weight: 800; } .iexel-event-hero-tags { margin-top: 12px; } #event-responses, [id^="event-response-"] { scroll-margin-top: clamp(70px, 8vw, 100px); } .iexel-response-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .iexel-response-actions form { margin: 0; } .iexel-response-actions .iexel-button { width: 100%; justify-content: center; } /* Coach Workspace Batch B, Product Owner acceptance fix (Fix 2): "I'm Available" and "Can't Attend" are already equal width and padding here (both fill their form via the rule above; the hero-compact row variant below gives them equal flex-basis too) -- the reported imbalance is a visual-WEIGHT issue, not a sizing one. The base .iexel-button-secondary (rgba(255,255,255,.06) fill, thin var(--iexel-border) gold-tinted edge) is tuned to read as a quiet/receding action elsewhere, but next to the solid-gold .iexel-button-primary here it disappears into this card's own dark translucent background, making the positive choice look dominant by default rather than by the viewer's own response. Scoped to this component only (not a global .iexel-button-secondary change, which other contexts rely on staying subtle) so the pair reads as one balanced decision while keeping the existing positive/negative colour identity. */ .iexel-response-actions .iexel-button-secondary { background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.55); color: #ffffff; } .iexel-response-actions .iexel-button-secondary:hover { background: rgba(255,255,255,.22); } .iexel-section-card { background: rgba(255,255,255,.035); border: 1px solid var(--iexel-border); border-radius: var(--iexel-radius-large); padding: 24px; box-shadow: var(--iexel-shadow-medium); } .iexel-section-card-header { margin-bottom: 18px; } .iexel-section-card-header h3 { margin: 6px 0 0; color: var(--iexel-white); font-size: 20px; font-weight: 800; } /* ========================================================== METRIC GRID ========================================================== */ .iexel-metric-grid{ display:grid; grid-template-columns: repeat( auto-fit, minmax(220px,1fr) ); gap:20px; margin-top:18px; } .iexel-event-checklist-card h3 { margin: 6px 0 18px; color: var(--iexel-white); } .iexel-checklist-progress { margin: 10px 0 16px; color: var(--iexel-muted); font-weight: 700; } .iexel-os-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .iexel-os-checklist li { display: flex; align-items: center; gap: 8px; color: var(--iexel-white); font-weight: 700; } .iexel-os-checklist .is-pending { color: var(--iexel-muted); } .iexel-attendance-summary-card h3 { margin: 6px 0 14px; color: var(--iexel-white); } /* Continuous football workspace canvas (final MVP implementation, per the read-only architecture audit): .iexel-event-detail already wraps the hero, both TwoColumnLayout columns, and every full_width() section for BOTH the future and completed-Match branches, has no CSS rule of its own anywhere, and is used nowhere else as a page-level visual wrapper (confirmed: Option C from the audit -- the only option with zero specificity risk and zero Parent/Player risk, since it needs no new markup and no scoping beyond what already exists). The gradient runs midnight-to-navy (top darker, bottom lighter) -- the OPPOSITE direction to the navy-to-midnight gradient every "primary module" card already uses -- so individual cards visibly sit "elevated" above the canvas rather than blending into it, while both still read as the same tonal family. Every colour here is the existing var(--iexel-navy)/ var(--iexel-midnight)/var(--iexel-border) chain (itself already chained through to club branding -- see BrandingService::css_variables() -> DesignTokens::css_variables() -> --iexel-color-navy-deep/-primary -> --iexel-navy/--iexel-midnight), never a new hardcoded colour. Padding + radius give the canvas an intentional "workspace panel" frame rather than a flush rectangular slab exposing square corners behind the hero's own rounded top. No overflow:hidden -- nothing currently bleeds past the canvas edge, and clipping risk (e.g. a focus ring right at the boundary) is not worth trading for a corner-rounding guarantee nothing here actually needs. */ .iexel-event-detail { background: linear-gradient(180deg, var(--iexel-midnight), var(--iexel-navy)); border: 1px solid var(--iexel-border); border-radius: 24px; padding: 16px; box-shadow: var(--iexel-shadow-medium); } @media (max-width: 600px) { .iexel-event-detail { padding: 10px; border-radius: 18px; } } /* MVP surface-hierarchy correction: AttendanceSummaryCard is also used by EventHubPage.php, so the shared .iexel-attendance-summary-card class itself is left untouched (still the flatter shared .iexel-os-card treatment there) -- scoped instead to the Event Detail page wrapper only, promoted to the same richer two-stop navy gradient + gold-top accent already established by this page's own accepted reference cards (Match Report, Match Selection, Match Summary). The nested .iexel-attendance-summary-grid cells are untouched -- their existing lighter translucent tint is exactly the intended nested/detail surface, and it already composites correctly against any opaque backdrop. */ .iexel-event-detail .iexel-attendance-summary-card { background: linear-gradient(180deg, var(--iexel-navy), var(--iexel-midnight)); border: 1px solid rgba(203,161,53,.4); border-top: 4px solid var(--iexel-gold); box-shadow: var(--iexel-shadow-small); } /* Primary card gold top accent standardisation (completed Match): Final Score, Match Summary and Match Incident Timeline are all shared components (MatchModeScoreCard is also Match Mode's own live scoreboard; MatchSummaryCard/MatchIncidentTimelineCard are also Match Report's/Match Mode's own pages) that carry a thin gold LEFT accent by design there -- confirmed via source (MatchModePage.php, MatchReportPage.php) as deliberately out of scope for this Coach-Event-Detail-only batch. Scoped the same way as .iexel-attendance-summary-card immediately above: the shared classes/components themselves are completely untouched, only their presentation WITHIN this page's own continuous canvas is overridden to the same gold-top pattern as every other primary module here. Each of the three sits as its own direct child within the already gold-topped "Match Lineup & Incident History" wrapper (.iexel-completed- match-history, a CSS grid with its own 22px gap) or completed-match sidebar -- never touching or overlapping another gold top edge. Nested content inside each (Match Summary's metric/leader tiles, lineup rows, individual incident-timeline rows) is untouched -- still the existing lighter translucent tint. */ .iexel-event-detail .iexel-match-mode-score-card { border: 1px solid rgba(203,161,53,.4); border-top: 4px solid var(--iexel-gold); } .iexel-event-detail .iexel-match-report-card { border: 1px solid rgba(203,161,53,.4); border-top: 4px solid var(--iexel-gold); } .iexel-event-detail .iexel-incident-timeline-card { border: 1px solid rgba(203,161,53,.4); border-top: 4px solid var(--iexel-gold); } .iexel-attendance-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } .iexel-attendance-summary-grid div { background: rgba(255,255,255,.045); border: 1px solid var(--iexel-border); border-radius: 12px; padding: 10px; color: var(--iexel-white); font-weight: 800; } .iexel-attendance-summary-grid strong { display: block; font-size: 22px; color: var(--iexel-gold); } .iexel-attendance-summary-grid span { display: block; margin-top: 2px; color: var(--iexel-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; } .iexel-admin-hero { background: #071d49; color: #ffffff; border-left: 5px solid #cba135; border-radius: 16px; padding: 26px; margin: 20px 0; } .iexel-admin-hero h1 { color: #ffffff; margin: 6px 0; } .iexel-admin-hero p { margin: 0; color: rgba(255,255,255,.8); } /* Coach Workspace MVP visual close-out (A8): the legacy 5px LEFT gold rail is replaced by the established .iexel-accent-top-module TOP trim, matching the same migration already applied to other primary immersive modules (main Events header, Matchday Hub hero, My Teams cards) -- consistent with the durable design-system rule, not a one-off. */ .iexel-attendance-hero-card { background: linear-gradient(135deg, var(--iexel-midnight), var(--iexel-navy)); border-radius: 22px; padding: 32px; margin: 24px 0; box-shadow: var(--iexel-shadow-medium); } .iexel-attendance-hero-card.iexel-accent-top-module { border-top: 4px solid var(--iexel-gold); } .iexel-attendance-hero-card h1 { margin: 8px 0 10px; color: var(--iexel-white); font-size: clamp(34px, 5vw, 56px); } .iexel-attendance-hero-card p { margin: 0; color: var(--iexel-color-on-dark-muted, #c8d3e3); font-size: 20px; font-weight: 800; } .iexel-attendance-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .iexel-attendance-hero-meta span { border: 1px solid var(--iexel-border); border-radius: 999px; padding: 8px 12px; color: var(--iexel-white); background: rgba(255,255,255,.045); font-weight: 800; } .iexel-attendance-progress-card{ background:linear-gradient(180deg,var(--iexel-navy),var(--iexel-midnight)); border:1px solid var(--iexel-border); border-radius:20px; padding:24px; margin:24px 0; } /* Coach Workspace MVP visual close-out (A8) */ .iexel-attendance-progress-card.iexel-accent-top-module { border-top: 4px solid var(--iexel-gold); } .iexel-attendance-progress-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:20px 0; } .iexel-attendance-progress-grid div{ text-align:center; padding:16px; border-radius:14px; background:rgba(255,255,255,.04); } .iexel-attendance-progress-grid strong{ display:block; font-size:28px; color:var(--iexel-white); } .iexel-attendance-progress-grid span{ color: var(--iexel-color-on-dark-muted, #c8d3e3); font-size:12px; text-transform:uppercase; letter-spacing:.08em; } @media(max-width:768px){ .iexel-attendance-progress-grid{ grid-template-columns:repeat(2,1fr); } } .iexel-attendance-progress-card h3 { color: var(--iexel-white); margin: 6px 0 18px; } .iexel-attendance-progress-card p { color: var(--iexel-color-on-dark-muted, #c8d3e3); font-weight: 800; } .iexel-attendance-progress-card p strong { color: var(--iexel-gold); } /* Coach Workspace MVP visual close-out, Batch A final polish (A-F4): a restrained accent-top for individual Player attendance cards, approved after the primary-module accent-top treatment was accepted. Implemented as an INSET box-shadow line, not border-top -- .is-present/.is-late/ .is-absent/.is-excused below only ever override border-color (all four sides, uniform width), so a real border-top here would either be masked by that later same-specificity border-color re-declaration or would require restructuring the semantic rules; box-shadow is a completely independent property from border, so the two compose without either one overriding the other -- semantic state colour is fully preserved on all four edges, the accent is an additional, separate top line. 3px (versus the primary modules' 4px solid border-top) and var(--iexel-gold) (the runtime club Accent Colour token) keep this visibly more restrained and subordinate to the primary Attendance modules above it. */ .iexel-attendance-player-card{ background:linear-gradient(180deg,var(--iexel-navy),var(--iexel-midnight)); border:1px solid var(--iexel-border); border-radius:18px; padding:20px; margin-bottom:18px; box-shadow:var(--iexel-shadow-small), inset 0 3px 0 0 var(--iexel-gold); } .iexel-attendance-player-header{ margin-bottom:18px; } .iexel-attendance-player-header h3{ margin:0; color:white; font-size:22px; } .iexel-attendance-player-body{ display:grid; gap:12px; } /* Coach Workspace MVP visual close-out (A10 quality check on the A8 surface): the read-only register's "Status:"/"Notes:" text (AttendancePlayerCard.php's $read_only branch) had no colour of its own and fell through to the ambient page text colour (dark), reading as near-black on this card's own dark navy background -- a pre-existing contrast defect, not something this batch's own accent-top change introduced, but it sits on a page this batch already touches and directly fails the required "no unreadable low-contrast metadata" check. */ .iexel-attendance-player-body p { margin: 0; color: var(--iexel-color-on-dark, #ffffff); } .iexel-attendance-player-body p strong { color: var(--iexel-color-on-dark-muted, #c8d3e3); font-weight: 800; } .iexel-attendance-player-body label{ color: var(--iexel-color-on-dark, #ffffff); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; } .iexel-attendance-player-body select, .iexel-attendance-player-body input{ box-sizing:border-box; width:100%; padding:12px; border-radius:10px; border:1px solid var(--iexel-border); background:#233968; color:white; } .iexel-attendance-form { margin-top: 24px; } .iexel-attendance-player-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 24px; } .iexel-attendance-notice { max-width: 1000px; margin: 12px auto 18px; padding: 14px 18px; border-radius: 14px; background: rgba(34,197,94,.14); border: 1px solid rgba(34,197,94,.45); color: var(--iexel-white); font-weight: 800; } .iexel-attendance-form .iexel-button { margin-top: 18px; } .iexel-attendance-player-card:has(select[value="present"]), .iexel-attendance-player-card.is-present { border-color: rgba(34,197,94,.65); } .iexel-attendance-player-card.is-late { border-color: rgba(245,158,11,.65); } .iexel-attendance-player-card.is-absent { border-color: rgba(239,68,68,.65); } .iexel-attendance-player-card.is-excused { border-color: rgba(59,130,246,.65); } /*================================================== MATCHDAY ACTION BAR ==================================================*/ .iexel-attendance-action-bar{ position:sticky; bottom:20px; display:flex; align-items:center; justify-content:space-between; padding:18px 22px; margin-top:30px; border-radius:18px; background:#071b47; border:1px solid rgba(255,193,7,.25); box-shadow: 0 15px 40px rgba(0,0,0,.35); z-index:50; } .iexel-attendance-status{ font-size:15px; font-weight:700; color:#fff; } .iexel-attendance-action-right{ display:flex; gap:12px; } /*================================================== MATCHDAY BULK ACTIONS ==================================================*/ .iexel-attendance-bulk-card{ margin:24px 0; padding:24px; background:#071b47; border:1px solid rgba(255,193,7,.25); border-radius:20px; box-shadow:0 15px 35px rgba(0,0,0,.25); } /* Coach Workspace MVP visual close-out (A8) */ .iexel-attendance-bulk-card.iexel-accent-top-module { border-top: 4px solid var(--iexel-gold); } .iexel-attendance-bulk-actions{ display:grid; grid-template-columns:repeat(2,minmax(220px,1fr)); gap:16px; margin-top:18px; } .iexel-bulk-attendance{ padding:16px 18px; background:#12295d; color:#fff; border:1px solid rgba(255,193,7,.25); border-radius:14px; font-size:15px; font-weight:700; cursor:pointer; transition:.2s; } .iexel-bulk-attendance:hover{ background:#183878; transform:translateY(-2px); border-color:#d4af37; } @media (max-width:768px){ .iexel-attendance-bulk-actions{ grid-template-columns:1fr; } } .iexel-attendance-bulk-card h3{ margin:8px 0 20px; font-size:30px; font-weight:700; color:#ffffff; } /* A10 quality check on the A8 surface: the read-only "register is preserved for history..." notice (AttendanceBulkActionsCard.php) had the same pre-existing missing-colour issue as the player cards above. */ .iexel-attendance-bulk-card > p { color: var(--iexel-color-on-dark-muted, #c8d3e3); } /* ================================================== PORTAL SHELL ================================================== */ .iexel-portal-shell { width: min(1180px, calc(100% - 32px)); margin: 24px auto 48px; } .iexel-portal-shell-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 22px; margin-bottom: 18px; background: var(--iexel-midnight); border: 1px solid var(--iexel-border); border-bottom: 4px solid var(--iexel-gold); border-radius: var(--iexel-radius-large); box-shadow: var(--iexel-shadow-medium); } .iexel-portal-brand { display: flex; flex-direction: column; gap: 4px; color: var(--iexel-white); } .iexel-portal-brand-kicker { color: var(--iexel-muted); font-size: 11px; font-weight: 900; letter-spacing: .12em; } .iexel-portal-brand strong { font-size: 18px; } .iexel-portal-user-actions { display: flex; align-items: center; gap: 10px; } .iexel-portal-user-actions a { padding: 9px 12px; border: 1px solid var(--iexel-border); border-radius: var(--iexel-radius-small); color: var(--iexel-white); font-weight: 800; text-decoration: none; } .iexel-portal-user-actions a:hover { border-color: var(--iexel-gold); color: var(--iexel-gold); } .iexel-portal-shell-body { min-width: 0; } @media (max-width: 680px) { .iexel-portal-shell { width: min(100% - 20px, 1180px); margin-top: 10px; } .iexel-portal-shell-header { align-items: flex-start; flex-direction: column; } .iexel-portal-user-actions { width: 100%; } .iexel-portal-user-actions a { flex: 1; text-align: center; } } /* ================================================== PORTAL TOP BAR ================================================== */ .iexel-portal-topbar{ display:flex; justify-content:space-between; align-items:center; min-width:0; padding:22px 28px; background:var(--iexel-midnight); border:1px solid var(--iexel-border); border-bottom:4px solid var(--iexel-gold); border-radius:18px; box-shadow:var(--iexel-shadow-medium); margin-bottom:20px; } .iexel-topbar-left{ display:flex; align-items:center; min-width:0; gap:18px; } .iexel-club-logo{ width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px; background:#173a73; } .iexel-club-logo__primary,.iexel-club-logo__compact{display:block;width:100%;height:100%} .iexel-club-logo__compact{display:none} .iexel-club-logo .iexel-club-mark img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain} @media(max-width:600px){.iexel-club-logo.has-compact .iexel-club-logo__primary{display:none}.iexel-club-logo.has-compact .iexel-club-logo__compact{display:block}} .iexel-club-title h2{ margin:4px 0 0; font-size:22px; color:white; overflow-wrap:anywhere; } .iexel-topbar-right{ display:flex; align-items:center; min-width:0; gap:20px; } .iexel-topbar-icon{ flex:none; width:46px; height:46px; border-radius:50%; border:none; cursor:pointer; font-size:20px; background:#173a73; color:white; } .iexel-topbar-user{ display:flex; align-items:center; min-width:0; gap:12px; } .iexel-avatar{ flex:none; width:44px; height:44px; border-radius:50%; background:var(--iexel-gold); color:#111; font-weight:700; display:flex; align-items:center; justify-content:center; } .iexel-topbar-user strong{ display:block; color:white; overflow-wrap:anywhere; } .iexel-topbar-user small{ display:block; color:#b8c4d9; overflow-wrap:anywhere; } /* ================================================== PORTAL NAVIGATION ================================================== */ .iexel-portal-navigation { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 10px; margin-bottom: 20px; box-sizing: border-box; overflow: visible; background: var(--iexel-midnight); border: 1px solid var(--iexel-border); border-radius: 16px; box-shadow: var(--iexel-shadow-small); } .iexel-portal-nav-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 44px; padding: 10px 15px; border: 1px solid transparent; border-radius: 11px; color: var(--iexel-color-on-dark-muted, #c8d3e3); font-weight: 800; text-decoration: none; line-height: 1.25; text-align: center; white-space: normal; overflow-wrap: anywhere; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; } .iexel-portal-nav-link:hover { color: var(--iexel-white); background: rgba(255,255,255,.06); border-color: var(--iexel-border); transform: translateY(-1px); } .iexel-portal-nav-link.is-active { color: var(--iexel-midnight); background: var(--iexel-gold); border-color: var(--iexel-gold); } .iexel-portal-nav-link:focus-visible { outline: 3px solid var(--iexel-gold-bright); outline-offset: 3px; } .iexel-portal-nav-icon { flex: none; font-size: 16px; } @media (max-width: 1024px) { .iexel-portal-navigation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 680px) { .iexel-portal-topbar { align-items: stretch; flex-direction: column; gap: 16px; padding: 18px; } .iexel-topbar-right { width: 100%; } .iexel-topbar-user > div:last-child { min-width: 0; } .iexel-portal-navigation { position: sticky; bottom: 10px; z-index: 40; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: 0; padding: 8px; } .iexel-portal-nav-link { flex-direction: column; gap: 3px; padding: 8px 10px; font-size: 11px; } .iexel-portal-nav-link:last-child:nth-child(odd) { grid-column: 1 / -1; } .iexel-portal-nav-icon { font-size: 18px; } } /* ========================================== BREADCRUMB ========================================== */ .iexel-breadcrumb{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:20px; font-size:14px; color:#8ea2c8; } .iexel-breadcrumb-item{ font-weight:700; } .iexel-breadcrumb-separator{ opacity:.45; font-size:18px; } /* ================================================== COACH WORKSPACE HERO ================================================== */ .iexel-coach-workspace-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; padding: 30px; margin-bottom: 22px; background: linear-gradient( 135deg, var(--iexel-midnight), var(--iexel-navy) ); border: 1px solid var(--iexel-border); border-left: 5px solid var(--iexel-gold); border-radius: 22px; box-shadow: var(--iexel-shadow-medium); } .iexel-coach-workspace-hero h1 { margin: 8px 0 10px; color: var(--iexel-white); font-size: clamp(30px, 4vw, 48px); line-height: 1.05; } .iexel-coach-workspace-hero p { max-width: 660px; margin: 0; color: var(--iexel-color-on-dark-muted, #c8d3e3); font-size: 16px; } .iexel-coach-workspace-hero-summary { min-width: 170px; padding: 20px; text-align: center; background: rgba(255, 255, 255, .045); border: 1px solid var(--iexel-border); border-radius: 16px; } .iexel-coach-workspace-summary-label, .iexel-coach-workspace-hero-summary span { display: block; color: var(--iexel-muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .iexel-coach-workspace-hero-summary strong { display: block; margin: 5px 0; color: var(--iexel-gold); font-size: 34px; line-height: 1; } @media (max-width: 680px) { .iexel-coach-workspace-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 22px 26px 22px 22px; } .iexel-coach-workspace-hero-copy { display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; } .iexel-coach-workspace-hero h1 { margin: 12px 0 16px; } .iexel-coach-workspace-hero p { max-width: 300px; margin-inline: auto; } .iexel-coach-workspace-hero-summary { width: 86%; max-width: 340px; min-width: 0; margin-top: 28px; padding: 20px 22px; box-sizing: border-box; } .iexel-coach-workspace-hero-summary strong { margin-block: 3px; } } /* ================================================== COACH WORKSPACE PAGE ================================================== */ .iexel-coach-workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; } .iexel-coach-workspace-main, .iexel-coach-workspace-sidebar { display: grid; gap: 22px; min-width: 0; } @media (max-width: 900px) { .iexel-coach-workspace-grid { grid-template-columns: 1fr; } } /* ================================================== COACH SCHEDULE WIDGET ================================================== */ .iexel-coach-schedule-widget { padding: 24px; background: linear-gradient( 180deg, var(--iexel-navy), var(--iexel-midnight) ); border: 1px solid var(--iexel-border); border-left: 5px solid var(--iexel-gold); border-radius: 20px; box-shadow: var(--iexel-shadow-medium); } .iexel-coach-schedule-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; } .iexel-coach-schedule-header h2 { margin: 6px 0 0; color: var(--iexel-white); } .iexel-coach-schedule-all-link { color: var(--iexel-gold); font-weight: 800; text-decoration: none; white-space: nowrap; } .iexel-coach-schedule-list { display: grid; gap: 14px; } .iexel-coach-schedule-event { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 18px; padding: 18px; background: rgba(255,255,255,.045); border: 1px solid var(--iexel-border); border-radius: 16px; } .iexel-coach-schedule-date { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 92px; background: var(--iexel-midnight); border: 1px solid var(--iexel-border); border-radius: 13px; text-align: center; } .iexel-coach-schedule-date span, .iexel-coach-schedule-date small { color: var(--iexel-muted); font-size: 11px; font-weight: 900; text-transform: uppercase; } .iexel-coach-schedule-date strong { color: var(--iexel-gold); font-size: 28px; line-height: 1; margin: 4px 0; } .iexel-coach-schedule-content { min-width: 0; } .iexel-coach-event-type { color: var(--iexel-gold); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .iexel-coach-schedule-event h3 { margin: 4px 0 10px; color: var(--iexel-white); font-size: 20px; } .iexel-coach-schedule-meta, .iexel-coach-schedule-availability, .iexel-coach-schedule-actions { display: flex; flex-wrap: wrap; gap: 10px; } .iexel-coach-schedule-meta { color: var(--iexel-color-on-dark-muted, #c8d3e3); font-size: 13px; } .iexel-coach-schedule-availability { margin-top: 12px; font-size: 12px; font-weight: 800; } .iexel-coach-schedule-availability .is-available { color: #5ee28a; } .iexel-coach-schedule-availability .is-pending { color: #f4b942; } .iexel-coach-schedule-availability .is-unavailable { color: #ff6b72; } .iexel-coach-schedule-actions { margin-top: 15px; } .iexel-coach-schedule-empty { padding: 30px; text-align: center; background: rgba(255,255,255,.04); border: 1px dashed var(--iexel-border); border-radius: 16px; } .iexel-coach-schedule-empty h3 { margin: 8px 0; color: var(--iexel-white); } .iexel-coach-schedule-empty p { margin: 0; color: var(--iexel-muted); } @media (max-width: 680px) { .iexel-coach-schedule-header { flex-direction: column; } .iexel-coach-schedule-event { grid-template-columns: 62px minmax(0, 1fr); padding: 14px; } .iexel-coach-schedule-date { min-height: 80px; } .iexel-coach-schedule-actions .iexel-button { flex: 1; text-align: center; } } /* ================================================== TEAM WORKSPACE HERO ================================================== */ .iexel-team-workspace-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; padding: 30px; margin-bottom: 22px; background: linear-gradient( 135deg, var(--iexel-midnight), var(--iexel-navy) ); border: 1px solid var(--iexel-border); border-left: 5px solid var(--iexel-gold); border-radius: 22px; box-shadow: var(--iexel-shadow-medium); } /* Final MVP polish: move the shared Team Workspace hero from a heavy gold LEFT rail to the established stronger gold TOP accent, consistent with Event Detail / Team Events / Match Report / Team Attendance. Scoped to ":not(.is-player-view)" (see TeamWorkspaceHero.php) because this exact component/selector is also rendered, unchanged, for Parent and Player Team Workspace viewers -- content/data/layout are untouched either way. */ .iexel-team-workspace-hero:not(.is-player-view) { border-left-width: 1px; border-top: 4px solid var(--iexel-gold); } .iexel-team-workspace-hero h1 { margin: 8px 0 10px; color: var(--iexel-white); font-size: clamp(30px, 4vw, 48px); line-height: 1.05; } .iexel-team-workspace-hero p { margin: 0; color: var(--iexel-color-on-dark-muted, #c8d3e3); font-size: 16px; font-weight: 800; } .iexel-team-workspace-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--iexel-color-on-dark-muted, #c8d3e3); font-size: 16px; font-weight: 800; } .iexel-team-workspace-hero-meta-item { display: inline-block; white-space: nowrap; } .iexel-team-workspace-hero-meta-sep { color: var(--iexel-color-on-dark-muted, #c8d3e3); opacity: 0.7; user-select: none; } .iexel-team-workspace-hero-stats { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 12px; } .iexel-team-workspace-hero-stats div { padding: 18px; text-align: center; background: rgba(255,255,255,.045); border: 1px solid var(--iexel-border); border-radius: 16px; } .iexel-team-workspace-hero-stats span { display: block; color: var(--iexel-muted); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .iexel-team-workspace-hero-stats strong { display: block; margin-top: 6px; color: var(--iexel-gold); font-size: 30px; line-height: 1; } @media (max-width: 680px) { .iexel-team-workspace-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 22px 26px 22px 22px; text-align: center; } .iexel-team-workspace-hero-copy { display: flex; flex-direction: column; align-items: center; width: 100%; } .iexel-team-workspace-hero h1 { margin: 12px 0 16px; } .iexel-team-workspace-hero p { max-width: 300px; margin-inline: auto; } .iexel-team-workspace-hero-meta { justify-content: center; max-width: 320px; margin-inline: auto; text-align: center; } .iexel-team-workspace-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 340px; margin-top: 28px; } } /* ================================================== TEAM WORKSPACE PAGE ================================================== */ .iexel-team-workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; } .iexel-team-workspace-main, .iexel-team-workspace-sidebar { display: grid; gap: 22px; min-width: 0; } @media (max-width: 900px) { .iexel-team-workspace-grid { grid-template-columns: 1fr; } } /* ================================================== TEAM WORKSPACE NAVIGATION ================================================== */ .iexel-team-navigation { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 8px; padding: 9px; margin-bottom: 22px; overflow: visible; background: var(--iexel-midnight); border: 1px solid var(--iexel-border); border-radius: 16px; box-shadow: var(--iexel-shadow-small); } .iexel-team-navigation.is-player-navigation { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); } /* Final MVP polish: gold-top accent on the shared nav CONTAINER only (not individual tabs -- .is-active already carries its own accepted gold fill, untouched). Scoped to ":not(.is-player-navigation)" -- this component already distinguishes Coach/manager from Parent/Player via that existing class, so no new markup was needed here. Follow-up (desktop 3x2): the base rule above renders 6 destinations as 5 columns + 1 lone item ("5+1"), unbalanced above the existing 64rem breakpoint (an existing, separate duplicate-block pair at ~line 5780 only corrects this to 3 columns in the narrow 42rem-64rem band, never above 64rem). Overriding to a flat 3-column default here -- scoped to the same Coach-only ":not(.is-player-navigation)" selector, at higher specificity than those bare ".iexel-team-navigation" media rules, so it wins at every width -- gives a clean, symmetrical 3x2 for all six destinations from the existing 42rem breakpoint upward (see the mobile override below, which reuses that same existing 42rem token to restore 2 columns below it). Player nav is untouched: ".is-player-navigation" already carries its own higher-specificity auto-fit rule regardless. */ .iexel-team-navigation:not(.is-player-navigation) { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 4px solid var(--iexel-gold); } @media (max-width: 42rem) { .iexel-team-navigation:not(.is-player-navigation) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .iexel-team-navigation-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1px solid transparent; border-radius: 10px; color: var(--iexel-color-on-dark-muted, #c8d3e3); font-weight: 800; text-decoration: none; min-width: 0; white-space: normal; text-align: center; overflow-wrap: anywhere; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; } .iexel-team-navigation-link:hover { color: var(--iexel-white); background: rgba(255, 255, 255, .06); border-color: var(--iexel-border); transform: translateY(-1px); } .iexel-team-navigation-link.is-active { color: var(--iexel-midnight); background: var(--iexel-gold); border-color: var(--iexel-gold); } .iexel-team-navigation-icon { font-size: 15px; } @media (max-width: 680px) { .iexel-team-navigation { padding: 7px; } .iexel-team-navigation.is-player-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); } .iexel-team-navigation-link { flex-direction: column; gap: 3px; padding: 8px 10px; font-size: 11px; } .iexel-team-navigation.is-player-navigation .iexel-team-navigation-link { font-size: 13px; } .iexel-team-navigation-icon { font-size: 17px; } } /* ================================================== TEAM SQUAD ================================================== */ .iexel-team-squad-card { padding: 24px; background: linear-gradient( 180deg, var(--iexel-navy), var(--iexel-midnight) ); border: 1px solid var(--iexel-border); border-left: 5px solid var(--iexel-gold); border-radius: 20px; box-shadow: var(--iexel-shadow-medium); } /* Gold-top polish: move the outer Team Members primary module from the heavy gold LEFT rail to the established stronger gold TOP accent, consistent with the Team Workspace hero/navigation/Overview modules. Scoped to ":not(.is-player-view)" (see TeamSquadCard.php) because this exact component/selector is also rendered, unchanged, for Parent and Player Team Workspace viewers -- content/actions/routes are untouched either way. Nested ".iexel-team-member-row" player/coach rows are deliberately left alone (already a quiet secondary surface). */ .iexel-team-squad-card:not(.is-player-view) { border-left-width: 1px; border-top: 4px solid var(--iexel-gold); } .iexel-team-squad-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; } .iexel-team-squad-header h2 { margin: 6px 0 0; color: var(--iexel-white); } .iexel-team-squad-summary { display: flex; flex-wrap: wrap; gap: 8px; } .iexel-team-squad-summary span { padding: 8px 11px; color: var(--iexel-color-on-dark, #ffffff); font-size: 12px; font-weight: 800; border: 1px solid var(--iexel-border); border-radius: 999px; } .iexel-team-squad-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .iexel-team-squad-group { min-width: 0; } .iexel-team-squad-group h3 { margin: 0 0 12px; color: var(--iexel-white); } .iexel-team-squad-list { display: grid; gap: 10px; } .iexel-team-member-row { display: flex; align-items: center; gap: 12px; padding: 13px; background: rgba(255,255,255,.045); border: 1px solid var(--iexel-border); border-radius: 13px; } .iexel-team-member-avatar { display: flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; color: var(--iexel-midnight); background: var(--iexel-gold); border-radius: 50%; font-weight: 900; } .iexel-team-member-details { min-width: 0; flex: 1; } .iexel-team-member-details strong, .iexel-team-member-details span { display: block; } .iexel-team-member-details strong { color: var(--iexel-white); } .iexel-team-member-details span { color: var(--iexel-muted); font-size: 12px; } .iexel-team-member-number { color: var(--iexel-gold); font-weight: 900; } .iexel-team-squad-empty { padding: 18px; margin: 0; color: var(--iexel-muted); border: 1px dashed var(--iexel-border); border-radius: 13px; } @media (max-width: 760px) { .iexel-team-squad-header { flex-direction: column; } .iexel-team-squad-groups { grid-template-columns: 1fr; } } /* ================================================== TEAM UPCOMING EVENTS ================================================== */ .iexel-team-events-card { padding: 24px; background: linear-gradient( 180deg, var(--iexel-navy), var(--iexel-midnight) ); border: 1px solid var(--iexel-border); border-left: 5px solid var(--iexel-gold); border-radius: 20px; box-shadow: var(--iexel-shadow-medium); } .iexel-team-events-header { margin-bottom: 18px; } .iexel-team-events-header h2 { margin: 6px 0 0; color: var(--iexel-white); } .iexel-team-events-list { display: grid; gap: 12px; } .iexel-team-event-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px; background: rgba(255,255,255,.045); border: 1px solid var(--iexel-border); border-radius: 14px; } .iexel-team-event-main { min-width: 0; } .iexel-team-event-type { color: var(--iexel-gold); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .iexel-team-event-row h3 { margin: 4px 0 9px; color: var(--iexel-white); font-size: 18px; } .iexel-team-event-meta { display: flex; flex-wrap: wrap; gap: 10px; color: var(--iexel-color-on-dark-muted, #c8d3e3); font-size: 12px; } .iexel-team-events-empty { padding: 28px; text-align: center; border: 1px dashed var(--iexel-border); border-radius: 14px; } .iexel-team-events-empty h3 { margin: 8px 0; color: var(--iexel-white); } .iexel-team-events-empty p { margin: 0; color: var(--iexel-muted); } @media (max-width: 680px) { .iexel-team-event-row { align-items: stretch; flex-direction: column; } .iexel-team-event-row .iexel-button { width: 100%; text-align: center; } } /* ================================================== TEAM OVERVIEW DASHBOARD ================================================== */ .iexel-team-dashboard-card { padding: 24px; background: linear-gradient(180deg, var(--iexel-navy), var(--iexel-midnight)); border: 1px solid var(--iexel-border); border-left: 5px solid var(--iexel-gold); border-radius: 20px; box-shadow: var(--iexel-shadow-medium); } /* Final MVP polish: Team Overview's 5 primary modules (Next Upcoming Event, Availability Summary, Latest Match, Squad Summary, Quick Actions) all share this ".iexel-team-dashboard-card" base -- but so do TeamEventForm (the Events tab's "Add Event" form) and TeamAvailabilityWorkspace's own header card (the Availability tab), which are explicitly out of this batch's scope. Scoped to ".iexel-team-workspace-grid" -- the wrapper exclusive to the Overview tab's content -- so only Overview's 5 cards get the gold-top treatment; the Events form and Availability tab keep their existing left-rail look, untouched. */ .iexel-team-workspace-grid .iexel-team-dashboard-card { border-left-width: 1px; border-top: 4px solid var(--iexel-gold); } .iexel-team-dashboard-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; } .iexel-team-dashboard-card-header h2 { margin: 6px 0 0; color: var(--iexel-white); font-size: 21px; } .iexel-team-dashboard-card-header > a, .iexel-team-card-link { color: var(--iexel-gold); font-size: 12px; font-weight: 900; text-decoration: none; } .iexel-team-dashboard-card-header > a:hover, .iexel-team-card-link:hover { color: var(--iexel-white); } .iexel-team-next-event-body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 18px; background: rgba(255, 255, 255, .045); border: 1px solid var(--iexel-border); border-radius: 15px; } .iexel-team-next-event-date { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 68px; height: 72px; color: var(--iexel-midnight); background: var(--iexel-gold); border-radius: 14px; } .iexel-team-next-event-date span { font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .iexel-team-next-event-date strong { font-size: 29px; line-height: 1; } .iexel-team-next-event-copy h3 { margin: 4px 0 9px; color: var(--iexel-white); font-size: 20px; } .iexel-team-attendance-workspace .iexel-team-summary-grid { display: grid; width: 100%; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } .iexel-team-attendance-workspace .iexel-team-summary-stat { padding: 16px 10px; text-align: center; background: rgba(255, 255, 255, .045); border: 1px solid var(--iexel-border); border-radius: 14px; } .iexel-team-attendance-workspace .iexel-team-summary-stat strong, .iexel-team-attendance-workspace .iexel-team-summary-stat > span { display: block; } .iexel-team-attendance-workspace .iexel-team-summary-stat strong { margin: 5px 0 2px; color: var(--iexel-gold); font-size: 27px; } .iexel-team-attendance-workspace .iexel-team-summary-stat > span:last-child { color: var(--iexel-color-on-dark-muted, #c8d3e3); font-size: 12px; font-weight: 800; overflow-wrap: anywhere; } .iexel-team-attendance-workspace > .iexel-team-dashboard-card > .iexel-team-summary-grid { width: 100%; min-width: 0; box-sizing: border-box; grid-template-columns: repeat(6, minmax(0, 1fr)); } .iexel-team-attendance-workspace > .iexel-team-dashboard-card > .iexel-team-summary-grid > .iexel-team-summary-stat { width: 100%; min-width: 0; box-sizing: border-box; } .iexel-team-attendance-workspace > .iexel-team-dashboard-card > .iexel-team-summary-grid > .iexel-team-summary-stat > span:last-child { overflow-wrap: normal; word-break: normal; white-space: normal; } @media (min-width: 761px) and (max-width: 1024px) { .iexel-team-attendance-workspace > .iexel-team-dashboard-card > .iexel-team-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 361px) and (max-width: 760px) { .iexel-team-attendance-workspace > .iexel-team-dashboard-card > .iexel-team-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 360px) { .iexel-team-attendance-workspace > .iexel-team-dashboard-card > .iexel-team-summary-grid { grid-template-columns: minmax(0, 1fr); } } .iexel-team-summary-icon { color: var(--iexel-white); font-size: 18px; } .iexel-team-availability-event { margin: -8px 0 14px; color: var(--iexel-color-on-dark, #ffffff); font-weight: 800; } .iexel-team-availability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 14px; } .iexel-team-availability-grid div { padding: 14px 8px; text-align: center; background: rgba(255, 255, 255, .045); border: 1px solid var(--iexel-border); border-radius: 12px; } .iexel-team-availability-grid strong, .iexel-team-availability-grid span { display: block; } .iexel-team-availability-grid strong { color: var(--iexel-white); font-size: 24px; } .iexel-team-availability-grid span { margin-top: 3px; color: var(--iexel-muted); font-size: 10px; font-weight: 900; text-transform: uppercase; } .iexel-team-availability-grid .is-available { border-top: 3px solid #35c98b; } .iexel-team-availability-grid .is-pending { border-top: 3px solid var(--iexel-gold); } .iexel-team-availability-grid .is-unavailable { border-top: 3px solid #ef6b73; } .iexel-team-season-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .iexel-team-season-stats div { padding: 18px 10px; text-align: center; background: rgba(255, 255, 255, .035); border: 1px solid var(--iexel-border); border-radius: 13px; } .iexel-team-season-stats strong, .iexel-team-season-stats span { display: block; } .iexel-team-season-stats strong { color: var(--iexel-gold); font-size: 25px; } .iexel-team-season-stats span { margin-top: 4px; color: var(--iexel-muted); font-size: 11px; font-weight: 800; } .iexel-team-coming-soon { padding: 6px 9px; color: var(--iexel-midnight); background: var(--iexel-gold); border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; } .iexel-team-quick-actions { display: grid; gap: 9px; } .iexel-team-quick-actions a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; padding: 13px; color: var(--iexel-white); background: rgba(255, 255, 255, .045); border: 1px solid var(--iexel-border); border-radius: 12px; text-decoration: none; transition: border-color .2s ease, transform .2s ease, background .2s ease; } .iexel-team-quick-actions a:hover { background: rgba(255, 255, 255, .075); border-color: var(--iexel-gold); transform: translateY(-1px); } .iexel-team-quick-actions a > span { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--iexel-midnight); background: var(--iexel-gold); border-radius: 10px; } .iexel-team-quick-actions small { color: var(--iexel-gold); font-size: 18px; } .iexel-team-dashboard-empty { padding: 30px 20px; text-align: center; border: 1px dashed var(--iexel-border); border-radius: 14px; } .iexel-team-dashboard-empty h3 { margin: 8px 0; color: var(--iexel-white); } .iexel-team-dashboard-empty p { max-width: 460px; margin: 0 auto; color: var(--iexel-muted); } .iexel-team-dashboard-empty-icon { color: var(--iexel-gold); font-size: 27px; } .iexel-team-dashboard-empty-compact { padding: 20px 14px; } @media (max-width: 760px) { .iexel-team-next-event-body { grid-template-columns: auto minmax(0, 1fr); } .iexel-team-next-event-body .iexel-button { grid-column: 1 / -1; text-align: center; } .iexel-team-season-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Final MVP polish: confirmed real Dev-site defect -- "UNAVAILABLE" is a single unbroken uppercase word with no space to wrap at, so inside an equal 3-column tile at narrow widths it has nowhere to go but overflow its own box. Reflows to Available/Pending on row 1, Unavailable full width on row 2, exactly as approved -- all three labels stay full words, no typography shrink, no abbreviation. Retains the existing 3-column layout above this breakpoint. */ .iexel-team-availability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .iexel-team-availability-grid .is-unavailable { grid-column: 1 / -1; } } /* ================================================== TEAM EVENT FORM ================================================== */ .iexel-team-event-form-card { padding: 26px; background: linear-gradient(180deg, var(--iexel-navy), var(--iexel-midnight)); border: 1px solid var(--iexel-border); border-left: 5px solid var(--iexel-gold); border-radius: 20px; box-shadow: var(--iexel-shadow-medium); } .iexel-team-event-form { display: grid; gap: 22px; } .iexel-team-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .iexel-team-form-grid label { display: grid; gap: 8px; min-width: 0; } .iexel-team-form-grid label > span { color: var(--iexel-color-on-dark, #ffffff); font-size: 12px; font-weight: 900; letter-spacing: .04em; } .iexel-team-form-field-wide { grid-column: 1 / -1; } .iexel-team-event-form input, .iexel-team-event-form select, .iexel-team-event-form textarea { width: 100%; min-height: 46px; padding: 11px 13px; color: var(--iexel-white); background: rgba(255, 255, 255, .055); border: 1px solid var(--iexel-border); border-radius: 11px; font: inherit; box-sizing: border-box; } .iexel-team-event-form select option { color: var(--iexel-midnight); background: var(--iexel-white); } .iexel-team-event-form textarea { min-height: 126px; resize: vertical; } .iexel-team-event-form input:focus, .iexel-team-event-form select:focus, .iexel-team-event-form textarea:focus { outline: 2px solid var(--iexel-gold); outline-offset: 2px; border-color: var(--iexel-gold); } .iexel-team-form-errors { padding: 15px 17px; margin-bottom: 20px; color: #ffd9dc; background: rgba(239, 107, 115, .12); border: 1px solid rgba(239, 107, 115, .5); border-radius: 12px; } .iexel-team-form-errors strong { color: var(--iexel-white); } .iexel-team-form-errors ul { margin: 8px 0 0 18px; padding: 0; } /* Event Builder productivity batch: Duplicate Event's "Creating a copy of" cue -- deliberately light-touch (a single informational line, no heavy UI), reusing the exact same card/spacing language already established for .iexel-team-form-errors immediately above rather than inventing a new notice style. Gold/on-dark tones (not the error red above) since this is informational, not a validation problem. */ .iexel-team-duplicate-notice { display: grid; gap: 4px; padding: 13px 17px; margin-bottom: 20px; background: rgba(255, 255, 255, .04); border: 1px solid var(--iexel-border); border-radius: 12px; color: var(--iexel-white); } .iexel-team-duplicate-notice strong { overflow-wrap: anywhere; } /* Acceptance fix: cross-Team duplicate destination selector -- only rendered when the current user manages more than one Team. Styled to match the existing .iexel-team-player-selector label+select convention rather than inventing a new visual pattern. */ .iexel-team-duplicate-team-select { display: flex; align-items: center; gap: 10px; margin-top: 6px; } .iexel-team-duplicate-team-select span { color: var(--iexel-muted, #667085); font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .iexel-team-duplicate-team-select select { min-width: 160px; max-width: 100%; min-height: 40px; padding: 7px 34px 7px 12px; box-sizing: border-box; border: 2px solid #64748b; border-radius: 10px; background: var(--iexel-midnight-2, #0a1f49); color: var(--iexel-color-on-dark, #fff); font: inherit; font-weight: 800; } .iexel-team-duplicate-team-select select option { background: #fff; color: var(--iexel-ink, #18233a); } .iexel-team-duplicate-team-select select:focus, .iexel-team-duplicate-team-select select:focus-visible { border-color: var(--iexel-gold, #cba135); outline: 3px solid rgba(203, 161, 53, .45); outline-offset: 2px; } @media (max-width: 480px) { .iexel-team-duplicate-team-select { flex-wrap: wrap; } .iexel-team-duplicate-team-select select { width: 100%; } } .iexel-team-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .iexel-team-audience { min-width: 0; margin: 0; padding: 20px; border: 1px solid var(--iexel-border); border-radius: 16px; background: rgba(255, 255, 255, .025); } .iexel-team-audience legend { padding: 0 8px; color: var(--iexel-white); font-size: 18px; font-weight: 900; } .iexel-team-audience-intro, .iexel-team-audience-panel > p { margin: 0 0 14px; color: var(--iexel-muted); } /* Event Builder productivity batch (Recurring Events): matches the established .iexel-team-audience fieldset/legend/muted-text convention immediately above verbatim -- without an explicit colour, this fieldset's text was silently inheriting body.iexel-portal's LIGHT-page ink colour (#082b63) onto this dark card, reading as near-illegible dark-on-dark. */ .iexel-team-recurrence { min-width: 0; margin: 0; padding: 20px; border: 1px solid var(--iexel-border); border-radius: 16px; background: rgba(255, 255, 255, .025); } .iexel-team-recurrence legend { padding: 0 8px; color: var(--iexel-white); font-size: 18px; font-weight: 900; } /* Acceptance fix: a bare ".iexel-team-recurrence-fields { display: grid }" rule -- an AUTHOR stylesheet rule -- always beats the browser's own [hidden]{display:none} USER-AGENT rule at equal (0,1,0) specificity (author origin always wins over UA origin, regardless of source order), so the native `hidden` attribute this element's own visibility toggle relies on (both the server-rendered initial state and the JS weeklyFields.hidden = ... toggle) was silently defeated -- the weekly fields stayed visible even when "Does not repeat" was selected. :not([hidden]) raises specificity only for the visible case, leaving [hidden]'s own display:none completely unopposed when present. */ .iexel-team-recurrence-fields:not([hidden]) { display: grid; gap: 18px; margin-top: 18px; } .iexel-team-recurrence-note { margin: 0; color: var(--iexel-color-on-dark-muted, #c8d3e3); font-size: 13px; line-height: 1.5; } .iexel-team-audience-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; } .iexel-team-audience-mode, .iexel-team-player-option { align-items: center; gap: 10px; cursor: pointer; } .iexel-team-audience-mode { display: flex; } /* * Acceptance fix: scoped to :not([hidden]) for the same reason the * recurrence-fields fix was -- a bare "display: flex" here would be an * AUTHOR-origin rule that always beats the browser's own * [hidden]{display:none} USER-AGENT rule at equal specificity, silently * defeating the new Training Only hide-on-Fixture toggle * (option.hidden = isFixture in TeamEventForm.php) before it ever ships. * * min-width: 0 and flex-wrap: wrap are the actual 320px overflow fix: a * flex item's default min-width is "auto" (its content's min-content * size), not 0 -- so without this, a Training Only row's non-shrinking * children (a nowrap badge, a name span with no shrink allowance) forced * this row wider than its grid track, which then forced its ancestor grid * containers (.iexel-team-player-list, .iexel-team-same-age-group) wider * than the card, overhanging its right edge. flex-wrap lets the badge drop * to its own line instead of being clipped or forcing more width once the * row can no longer fit everything on one line. */ .iexel-team-player-option:not([hidden]) { display: flex; flex-wrap: wrap; min-width: 0; } .iexel-team-audience-mode { min-height: 70px; padding: 14px; border: 1px solid var(--iexel-border); border-radius: 13px; background: rgba(255, 255, 255, .04); color: #f5f7fb; font-weight: 800; transition: border-color .18s ease, background .18s ease, transform .18s ease; } .iexel-team-audience-mode:hover { color: var(--iexel-white); border-color: rgba(244, 190, 72, .75); background: rgba(255, 255, 255, .085); } .iexel-team-audience-mode:focus-within { outline: 3px solid rgba(244, 190, 72, .42); outline-offset: 3px; } .iexel-team-audience-mode:has(input:checked) { color: var(--iexel-white); border-color: var(--iexel-gold); background: rgba(244, 190, 72, .11); } .iexel-team-audience-mode:has(input:checked) { transform: translateY(-1px); } .iexel-team-event-form .iexel-team-audience input[type="radio"], .iexel-team-event-form .iexel-team-audience input[type="checkbox"] { flex: 0 0 auto; width: 18px; min-height: 18px; height: 18px; padding: 0; accent-color: var(--iexel-gold); } /* Coach Workspace MVP visual close-out (A9): the Venue type radios had no dedicated styling of their own, so they fell through to the generic ".iexel-team-event-form input { width:100%; min-height:46px; }" rule meant for text/select fields -- stretching each radio into a large distorted block, detached from its label text. Mirrors the established, already-working ".iexel-team-audience-mode" option-row pattern (own scoped class, not the .iexel-team-audience-scoped selector above, since this fieldset is a different section of the same form) rather than inventing a new visual language. Not width-gated -- this replaces an unstyled fallback with real styling at every width, so it cannot regress the "already healthy" mobile layout the same way a desktop-only override could interact unpredictably with the existing responsive rules. */ .iexel-team-venue-modes { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; } .iexel-team-venue-mode { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--iexel-border); border-radius: 12px; background: rgba(255, 255, 255, .04); color: #f5f7fb; font-weight: 800; cursor: pointer; transition: border-color .18s ease, background .18s ease; } .iexel-team-venue-mode:hover { color: var(--iexel-white); border-color: rgba(244, 190, 72, .75); background: rgba(255, 255, 255, .085); } .iexel-team-venue-mode:has(input:checked) { color: var(--iexel-white); border-color: var(--iexel-gold); background: rgba(244, 190, 72, .11); } .iexel-team-event-form .iexel-team-venue-mode input[type="radio"] { flex: 0 0 auto; width: 18px; min-height: 18px; height: 18px; padding: 0; accent-color: var(--iexel-gold); } .iexel-team-audience-panel { display: none; padding-top: 4px; } .iexel-team-event-form:has(input[name="audience_mode"][value="entire_team"]:checked) [data-audience-panel="entire_team"], .iexel-team-event-form:has(input[name="audience_mode"][value="selected_current"]:checked) [data-audience-panel="selected_current"], .iexel-team-event-form:has(input[name="audience_mode"][value="current_plus_same_age"]:checked) [data-audience-panel="current_plus_same_age"] { display: block; } .iexel-team-player-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .iexel-team-player-option { padding: 11px 12px; border: 1px solid var(--iexel-border); border-radius: 10px; background: rgba(255, 255, 255, .035); color: #edf1f7; } .iexel-team-player-option:hover { color: var(--iexel-white); border-color: rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .075); } .iexel-team-player-option:focus-within { outline: 3px solid rgba(244, 190, 72, .42); outline-offset: 2px; } .iexel-team-player-option:has(input:checked) { color: var(--iexel-white); border-color: var(--iexel-gold); background: rgba(244, 190, 72, .16); box-shadow: inset 4px 0 0 var(--iexel-gold); } .iexel-team-same-age-groups { display: grid; gap: 14px; } .iexel-team-same-age-group { padding: 15px; border: 1px solid var(--iexel-border); border-radius: 13px; background: rgba(0, 0, 0, .12); } .iexel-team-same-age-group h3 { margin: 0 0 12px; font-size: 15px; } /* * Acceptance fix: intentional empty-state for "Optionally add players * from:" when the corrected eligibility logic still finds nobody eligible * -- reusing the same muted/dashed-border convention already established by * .iexel-team-squad-empty rather than inventing a new visual pattern. */ .iexel-team-audience-empty { padding: 14px; margin: 0; color: var(--iexel-muted); border: 1px dashed var(--iexel-border); border-radius: 13px; } /* * Acceptance fix (320px overflow): the player-name span had no min-width * override, so its default flex min-width ("auto" -- its own content's * min-content size) could combine with the badge's own non-shrinking width * to force the row wider than its container. min-width: 0 lets it * genuinely shrink; flex-basis: auto (not 0 -- tried and rejected, see * below) sizes it from its content first, then grows it into the row's * remaining space. overflow-wrap handles a long name (with no natural * break points, e.g. an underscore-joined test name) safely wrapping onto * a second line instead of forcing more width. * * flex-basis: 0 was tried first and rejected: combined with * overflow-wrap: anywhere it made the browser wrap the NAME's own text * character-by-character into a narrow column instead of letting the * badge below drop to its own line -- confirmed visually, not guessed. */ .iexel-team-player-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .iexel-team-player-tag { padding: 2px 8px; margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--iexel-muted); background: rgba(255, 255, 255, .06); border: 1px solid var(--iexel-border); border-radius: 999px; white-space: nowrap; } .iexel-team-field-error { padding: 11px 13px; color: #ffd9dc; background: rgba(239, 107, 115, .12); border: 1px solid rgba(239, 107, 115, .5); border-radius: 10px; } @media (max-width: 680px) { .iexel-team-event-form-card { padding: 20px; } .iexel-team-form-grid { grid-template-columns: 1fr; } .iexel-team-form-field-wide { grid-column: auto; } .iexel-team-audience-modes, .iexel-team-player-list { /* * Acceptance fix: minmax(0, 1fr), not a bare 1fr. A bare 1fr track's * own minimum size still defaults to content-based ("auto"), so a * child that refuses to shrink (the Training Only row's nowrap * badge) could force this single column -- and everything nesting * it (.iexel-team-same-age-group, the fieldset, the card) -- wider * than the viewport at 320px. minmax(0, 1fr) is the same safety the * desktop two-column rule below already relies on. */ grid-template-columns: minmax(0, 1fr); } .iexel-team-audience { padding: 16px; } /* * Acceptance fix: on desktop the badge stays pushed to the row's right * edge via margin-left: auto (unchanged, see .iexel-team-player-tag). * Once the row is narrow enough that flex-wrap drops the badge to its * own line (see .iexel-team-player-option), an auto margin there just * pushes it flush right on that otherwise-empty line -- confirmed * visually cleaner, and closer to the desired mock-up, to reset it to 0 * here so the badge instead sits left-aligned under the name, matching * "[ checkbox ] Name / [ BADGE ]". */ .iexel-team-player-tag { margin-left: 0; } .iexel-team-form-actions .iexel-button { width: 100%; text-align: center; } } /* Matchday Hub */ .iexel-matchday-hub { display: grid; gap: 24px; } /* Design-system consistency: this was the one genuine gap found on Matchday Hub -- its own dark, page-level hero had no club-accent top-edge treatment at all (a plain neutral rgba(126,156,196,.2) side border, no gold), unlike MatchReadinessCard immediately below it (.iexel-match-readiness, already gold-topped) and every other primary Coach Workspace module. Now also carries .iexel-accent-top-module in its own markup (MatchdayHeroCard.php). The .iexel-matchday-grid cards below (Quick Actions, Selected Squad, Attendance, Venue, Emergency Contacts, Timeline, Register Progress -- see .iexel-matchday-card) are a deliberately different, LIGHT (#fff) card language, not part of this dark-immersive-module family, and are untouched by this batch. */ .iexel-matchday-hero { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 28px; padding: 36px; border: 1px solid rgba(126, 156, 196, .2); border-radius: 24px; color: #fff; background: linear-gradient(135deg, #071b36, #0d2d55); box-shadow: 0 18px 48px rgba(3, 14, 31, .28); } .iexel-matchday-hero h1 { margin: 10px 0 6px; color: #fff; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1; } .iexel-matchday-hero p, .iexel-matchday-hero small { color: #b9cce4; } .iexel-matchday-pill { display: inline-flex; padding: 6px 12px; border-radius: 999px; color: #9fd6ff; background: rgba(70, 160, 230, .14); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .iexel-matchday-hero__meta, .iexel-matchday-hero__side { display: flex; flex-wrap: wrap; gap: 12px; } .iexel-matchday-hero__meta span { padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.07); } .iexel-matchday-hero__side { flex-direction: column; justify-content: center; } .iexel-matchday-hero__side > div { display: grid; padding: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(2, 13, 29, .35); } .iexel-matchday-hero__side span { color: #9fb6d1; font-size: .75rem; font-weight: 800; text-transform: uppercase; } .iexel-matchday-hero__side strong { margin: 5px 0; font-size: 1.75rem; } .iexel-matchday-hero__versus { margin: 0 0 16px; color: #fff !important; font-size: clamp(1.1rem, 2.3vw, 1.5rem); font-weight: 850; overflow-wrap: anywhere; } .iexel-matchday-hero__match-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; } .iexel-matchday-hero__match-info > div { display: grid; gap: 3px; min-width: 0; padding: 11px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.055); } .iexel-matchday-hero__match-info span { color: #9fb6d1; font-size: .7rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; } .iexel-matchday-hero__match-info strong { color: #fff; overflow-wrap: anywhere; } .iexel-matchday-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } /* Coach Workspace MVP visual close-out (A4): every top-level Matchday operational module (Selected Squad, Availability Summary, Register Progress, Venue & Directions, Emergency Contacts, Coach Tools, Matchday Timeline) shares this one .iexel-matchday-card base class -- confirmed by source audit before this change -- so bringing it into the established immersive midnight/navy Coach Workspace language here converts all seven at once, with the accent-top pairing applied per component's own markup below. Matchday Hero and Match Readiness (.iexel-matchday-hero, .iexel-match-readiness) are separate classes, already accepted and already dark -- untouched by this rule. */ .iexel-matchday-card { padding: 26px; color: var(--iexel-color-on-dark, #ffffff); border: 1px solid rgba(203,161,53,.4); border-radius: 20px; background: linear-gradient(145deg, var(--iexel-midnight), var(--iexel-navy)); box-shadow: var(--iexel-shadow-medium); } .iexel-matchday-card.iexel-accent-top-module { border-top: 4px solid var(--iexel-gold); } .iexel-matchday-card h3 { margin: 6px 0 18px; color: var(--iexel-white); } .iexel-matchday-card > p { color: var(--iexel-color-on-dark-muted, #c8d3e3); } .iexel-match-readiness { display: grid; gap: 18px; min-width: 0; padding: 28px; color: #fff; background: linear-gradient(145deg, #071b36, #0d2d55); border: 1px solid rgba(203,161,53,.5); border-top: 5px solid var(--iexel-gold); border-radius: 22px; box-shadow: 0 18px 48px rgba(3,14,31,.25); } .iexel-match-readiness__summary { display: grid; grid-template-columns: minmax(160px,.55fr) minmax(220px,1.4fr) minmax(180px,.7fr); gap: 20px; align-items: center; min-width: 0; } .iexel-match-readiness__summary h2 { margin: 4px 0 0; color: var(--iexel-gold); font-size: clamp(2.5rem,6vw,4.5rem); line-height: 1; } .iexel-match-readiness__summary p { margin: 6px 0 0; color: #dbeafe; font-weight: 900; } .iexel-match-readiness__meter { width: 100%; height: 20px; overflow: hidden; appearance: none; background: #061629; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; } .iexel-match-readiness__meter::-webkit-progress-bar { background: #061629; border-radius: 999px; } .iexel-match-readiness__meter::-webkit-progress-value { background: linear-gradient(90deg, #9f7921, var(--iexel-gold)); border-radius: 999px; } .iexel-match-readiness__meter::-moz-progress-bar { background: linear-gradient(90deg, #9f7921, var(--iexel-gold)); border-radius: 999px; } .iexel-match-readiness__next { display: grid; gap: 3px; min-height: 62px; padding: 12px 16px; box-sizing: border-box; color: #071b36; background: var(--iexel-gold); border: 2px solid #f4d77e; border-radius: 12px; text-decoration: none; } .iexel-match-readiness__next small { color: #334155; font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .iexel-match-readiness__next strong { color: #071b36; } .iexel-match-readiness__items { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; min-width: 0; } .iexel-match-readiness-item { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 12px; align-items: center; min-width: 0; min-height: 82px; padding: 14px; box-sizing: border-box; color: #fff; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.13); border-radius: 13px; text-decoration: none; transition: border-color .18s ease, background .18s ease, transform .18s ease; } .iexel-match-readiness-item:hover, .iexel-match-readiness-item:focus-visible { background: rgba(255,255,255,.09); border-color: var(--iexel-gold); transform: translateY(-1px); outline: none; } .iexel-match-readiness-item__icon { display: grid; place-items: center; width: 32px; height: 32px; color: #071b36; background: var(--iexel-gold); border-radius: 50%; font-weight: 900; } .iexel-match-readiness-item:not(.is-completed) .iexel-match-readiness-item__icon { color: #fff7ed; background: #9a3412; } .iexel-match-readiness-item__body { display: grid; gap: 3px; min-width: 0; } .iexel-match-readiness-item__body strong { color: #fff; } .iexel-match-readiness-item__body small { color: #c8d8eb; overflow-wrap: anywhere; } .iexel-match-readiness-item__body em { color: var(--iexel-gold); font-size: .72rem; font-style: normal; font-weight: 800; } .iexel-match-readiness-item__action { display: flex; gap: 6px; align-items: center; color: var(--iexel-gold); font-size: .78rem; font-weight: 900; text-align: right; } .iexel-matchday-checklist, .iexel-matchday-timeline { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .iexel-matchday-checklist li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.1); color: var(--iexel-white); } .iexel-matchday-checklist li span { color: var(--iexel-gold-bright); font-size: 1.25rem; } .iexel-matchday-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .iexel-matchday-action, .iexel-matchday-actions button { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 11px 14px; border: 1px solid var(--iexel-border); border-radius: 12px; color: var(--iexel-white); background: rgba(255,255,255,.06); font: inherit; font-weight: 800; text-align: center; text-decoration: none; transition: background .16s ease, border-color .16s ease; } .iexel-matchday-action:hover { background: rgba(255,255,255,.12); border-color: var(--iexel-gold); } .iexel-matchday-action--full { grid-column: 1 / -1; } .iexel-matchday-actions button { flex-direction: column; color: var(--iexel-muted); background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); cursor: not-allowed; } .iexel-matchday-actions small { font-weight: 600; } .iexel-matchday-selection { grid-column: 1 / -1; display: grid; gap: 20px; min-width: 0; } .iexel-matchday-selection__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; min-width: 0; } .iexel-matchday-selection__heading > div { min-width: 0; } .iexel-matchday-selection__heading h2 { margin: 6px 0; color: var(--iexel-white); } .iexel-matchday-selection__heading p { margin: 0; color: var(--iexel-color-on-dark-muted, #c8d3e3); overflow-wrap: anywhere; } .iexel-matchday-selection__heading-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .iexel-matchday-selection__action { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 16px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1.5px solid var(--iexel-border); color: var(--iexel-white) !important; font-family: inherit; font-size: .84rem; font-weight: 850; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; } .iexel-matchday-selection__action:hover { background: var(--iexel-gold, #cba135); border-color: var(--iexel-gold, #cba135); color: #071d49 !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(7, 27, 54, 0.15); } .iexel-matchday-selection__action:focus-visible { outline: 2px solid var(--iexel-gold); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(203, 161, 53, 0.45); } .iexel-matchday-selection__total, .iexel-matchday-selection-count { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 42px; min-height: 42px; padding: 6px; box-sizing: border-box; color: #071b36; background: var(--iexel-gold); border: 1px solid #d7ad45; border-radius: 999px; font-weight: 900; } .iexel-matchday-selection__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; min-width: 0; } /* A4: Selected Squad's own nested pitch/list panels (below) previously used a pale #f7f9fc tile matching the PRIMARY card's own former white background -- now that the primary card above is dark, an unchanged pale nested panel would read as brighter/more prominent than its dark parent, inverting the intended primary/nested hierarchy. Restyled as a translucent-dark subordinate tile, the same recipe already used for nested tiles elsewhere in this Hub (.iexel-matchday-metrics div) and on Team Events/Attendance -- not a new pattern. */ .iexel-matchday-selection-card { display: grid; align-content: start; gap: 14px; min-width: 0; padding: 18px; color: var(--iexel-white); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(255,255,255,.045); } .iexel-matchday-selection-card--pitch { padding: 18px; } .iexel-matchday-selection-pitch-body { width: 100%; max-width: 100%; overflow: hidden; display: flex; justify-content: center; } .iexel-matchday-selection-pitch-body .iexel-pitch { max-width: 440px; } /* Coach Workspace MVP visual close-out (A3): each .iexel-pitch-slot is a fixed-pixel-height label (avatar + shirt number + name + role badges) centred on a percentage coordinate, inside .iexel-pitch__surface's own overflow:hidden box. Near the coordinate extremes (a Goalkeeper is typically placed close to y=95-100, i.e. its own goal end) that fixed- height content can extend past the true edge of the surface and get clipped -- worse at narrow widths, where the pitch's own absolute pixel height (148% of its own, now-smaller, width) is smaller relative to that same fixed label height. Container-aware fix: shrink .iexel-pitch-slots' own box vertically inside .iexel-pitch__surface (it is itself position:absolute, so it establishes its own containing block for the slots), remapping every slot's existing y 0-100 coordinate into a safe inset sub-range with real top/bottom breathing room, rather than a one-off magic offset for the Goalkeeper position specifically. Left/right is deliberately left at 0 -- an earlier draft also inset horizontally, which pushed already near-edge X positions (e.g. Left/Right Center Back) further out and clipped their position-label pills at the true left/right edge; only the reported vertical clipping needed a fix. Formation shape/relative positions are preserved -- every slot shifts by the same proportion. Scoped to Matchday Hub's own read-only 'full' pitch usage only (this exact wrapper class); Event Detail's separate 'compact' pitch variant and the interactive Lineup Builder pitch are unaffected. Batch A final polish (A-F2): the GK clipping is fixed, but real-formation review (e.g. 1-2-1: rows at y=90/68/48/25, ~20-23 points apart) showed adjacent rows are only ~20% of the pitch's own height apart -- at a small absolute pixel height that is tight enough for one row's label/name/ badge stack to visually crowd the neighbouring row (reported as "Henry James collides with the Centre Back area"). Container-aware fix, not a per-position hack: make the pitch itself taller at this breakpoint (every row's Y coordinate is a % of this same box, so every row gains the same extra absolute pixel spacing, formation-agnostic) and trim the slot content's own fixed-pixel footprint slightly, rather than special- casing any one row/position. Formation shape and slot-key/position derivation (ReadonlyLineupPitch.php, FormationEngine.php) are untouched -- purely a presentation-layer size change. */ @media (max-width: 480px) { .iexel-matchday-selection-pitch-body .iexel-pitch__surface { padding-top: 190%; } .iexel-matchday-selection-pitch-body .iexel-pitch-slots { inset: 5% 0; } .iexel-matchday-selection-pitch-body .iexel-pitch-slot__label { min-height: 1.4em; padding: 1px 5px; font-size: .56rem; max-width: none; } /* Batch A final micro-polish: full football-position names ("Left Striker", "Center Midfielder", "Center Back") no longer fit the compact role badge at this width and were being clipped even with the badge already containing them -- swap to the existing short slot key (see the base .iexel-pitch-slot__label-full/-short rule above) at the Matchday Hub mobile breakpoint only. max-width:none above because the short codes (2-3 characters) never need the 64px cap that exists to bound the much longer full names. */ .iexel-matchday-selection-pitch-body .iexel-pitch-slot__label-full { display: none; } .iexel-matchday-selection-pitch-body .iexel-pitch-slot__label-short { display: inline; } .iexel-matchday-selection-pitch-body .iexel-pitch-slot__number { min-width: 24px; height: 17px; font-size: .58rem; } .iexel-matchday-selection-pitch-body .iexel-pitch-slot__name { font-size: .56rem; max-width: 68px; } .iexel-matchday-selection-pitch-body .iexel-pitch-slot__badges { margin-top: 0; } .iexel-matchday-selection-pitch-body .iexel-pitch-slot__badge { min-width: 17px; height: 14px; font-size: .5rem; } /* Batch A final micro-polish: the Goalkeeper's own data-driven y coordinate (FormationEngine.php, y=90 -- untouched by this or any prior change) already sits inside .iexel-pitch__penalty-bottom (bottom:0, height:17%, i.e. the box spans y=83-100), but the slot's own centring transform (translate(-50%,-50%), same as every other slot) puts its visual centre only a little way into that box, so the GK role label/name stack reads as sitting a touch high relative to the box below it. A small additional translateY -- composed on top of the existing centring transform via CSS transform functions, not a coordinate change -- nudges the whole GK stack down within the box at this breakpoint only. Every other slot's transform, and the GK's own transform at 390px/desktop, are untouched. */ .iexel-matchday-selection-pitch-body .iexel-pitch-slot[data-slot-key="GK"] { transform: translate(-50%, -50%) translateY(12px); } .iexel-matchday-selection-pitch-body .iexel-pitch--readonly .iexel-pitch-slot[data-slot-key="GK"]:hover, .iexel-matchday-selection-pitch-body .iexel-pitch--readonly .iexel-pitch-slot[data-slot-key="GK"]:focus-visible { transform: translate(-50%, -50%) translateY(12px); } } .iexel-matchday-selection-card__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; } .iexel-matchday-selection-card__heading h3 { min-width: 0; margin: 0; color: var(--iexel-white); overflow-wrap: anywhere; } /* Coach Workspace MVP visual close-out, Batch A final polish (A-F3): the formation code used to be concatenated straight into the title string ("Current On Pitch · 1-1-2") and left to the browser to wrap wherever it ran out of room -- at 320px that could land mid-token ("1-\r\n1-2"). The formation is now its own element (MatchdaySelectionCard.php's optional $formation_code param), rendered as one intact, unmodified token; the separator is pure CSS (content:'· '), not baked into the string, so it can be removed and the element stacked onto its own line at narrow widths via structure alone -- this works for any formation code (2-2, 1-2-1, 2-1-1, 3-1, ...), nothing here is specific to one shape. The player-count badge stays a flex sibling of

, unaffected. / .iexel-matchday-selection-formation { display: inline; margin-left: 6px; color: var(--iexel-muted); font-size: .8em; font-weight: 700; } .iexel-matchday-selection-formation::before { content: '· '; } @media (max-width: 480px) { .iexel-matchday-selection-cardheading h3 { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .iexel-matchday-selection-formation { display: block; margin-left: 0; } .iexel-matchday-selection-formation::before { content: none; } } .iexel-matchday-selection-count { min-width: 34px; min-height: 34px; color: var(--iexel-white); background: rgba(255,255,255,.08); border-color: var(--iexel-border); font-size: .85rem; } .iexel-matchday-selection-list { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; } .iexel-matchday-selection-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.04); } .iexel-matchday-selection-player { display: flex; align-items: center; gap: 10px; min-width: 0; } .iexel-matchday-selection-playershirt { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--iexel-midnight); background: var(--iexel-gold); border-radius: 50%; font-weight: 900; } .iexel-matchday-selection-playerbody { display: grid; gap: 2px; min-width: 0; } .iexel-matchday-selection-playerbody strong { color: var(--iexel-white); overflow-wrap: anywhere; } .iexel-matchday-selection-playerposition { color: var(--iexel-muted); font-size: .78rem; } .iexel-matchday-selection-badges { display: flex; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; } .iexel-matchday-selection-badge { display: inline-flex; padding: 4px 8px; color: var(--iexel-white); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; font-size: .68rem; font-weight: 900; line-height: 1.2; white-space: nowrap; } .iexel-matchday-selection-badge.is-leadership { color: #071d49; background: var(--iexel-gold); border-color: #f4d77e; } .iexel-matchday-selection-badge.is-goalkeeper { color: #14532d; background: #86efac; border-color: #4ade80; } .iexel-matchday-selection-empty { margin: 0; padding: 14px; color: var(--iexel-muted); background: rgba(255,255,255,.03); border: 1px dashed rgba(255,255,255,.18); border-radius: 12px; } / Event Detail Coach-Only Match Selection Card (Midnight Dark Surface) / .iexel-event-match-selection-card { margin: 24px 0; padding: 24px; border-radius: 18px; background: linear-gradient(145deg, #071b36 0%, #0d2d55 100%); border: 1px solid rgba(203,161,53,.4); border-top: 4px solid var(--iexel-gold, #cba135); box-shadow: 0 16px 40px rgba(2,6,23,.3); color: #ffffff; display: grid; gap: 18px; min-width: 0; } .iexel-event-match-selection-cardheading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-width: 0; } .iexel-event-match-selection-cardheading h3 { margin: 4px 0 0; color: #ffffff; font-size: 1.25rem; font-weight: 850; } .iexel-event-match-selection-card .iexel-section-kicker { color: var(--iexel-gold, #cba135); font-size: .75rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; } .iexel-event-match-selection-cardformation { margin: 6px 0 0; font-size: .84rem; color: #dbeafe; } .iexel-event-match-selection-cardformation strong { color: var(--iexel-gold, #f4d77e); font-weight: 800; } .iexel-event-match-selection-body { display: grid; gap: 18px; min-width: 0; } .iexel-event-match-selection-subtitle { display: block; font-size: .74rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; color: var(--iexel-gold, #f4d77e); margin-bottom: 10px; } .iexel-event-match-selection-pitch-wrapper { min-width: 0; overflow: hidden; } .iexel-event-match-selection-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .iexel-event-match-selection-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; font-size: .84rem; color: #ffffff; } .iexel-event-match-selection-player-item { display: flex; align-items: center; gap: 10px; min-width: 0; } .iexel-event-match-selection-number { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--iexel-gold, #cba135); color: #071d49; font-weight: 900; font-size: .72rem; flex-shrink: 0; box-shadow: 0 2px 4px rgba(0,0,0,.25); } .iexel-event-match-selection-name { color: #ffffff; font-weight: 800; overflow-wrap: anywhere; } .iexel-event-match-selection-pos { font-size: .74rem; color: #cbd5e1; font-weight: 600; margin-left: auto; } .iexel-event-match-selection-card .iexel-matchday-selection-badges { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .iexel-event-match-selection-card .iexel-matchday-selection-badge { display: inline-flex; align-items: center; justify-content: center; padding: 2px 7px; border-radius: 6px; font-size: .62rem; font-weight: 900; line-height: 1.2; white-space: nowrap; } .iexel-event-match-selection-card .iexel-matchday-selection-badge.is-leadership { color: #071d49; background: var(--iexel-gold, #cba135); border: 1px solid #f4d77e; } .iexel-event-match-selection-card .iexel-matchday-selection-badge.is-goalkeeper { color: #14532d; background: #86efac; border: 1px solid #4ade80; } .iexel-event-match-selection-card .iexel-button { display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-family: inherit; font-weight: 850; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease; } .iexel-event-match-selection-card .iexel-button-secondary { padding: 8px 14px; background: rgba(255,255,255,.08); border: 1.5px solid rgba(203,161,53,.6); color: #ffffff !important; font-size: .82rem; } .iexel-event-match-selection-card .iexel-button-secondary:hover { background: var(--iexel-gold, #cba135); color: #071d49 !important; border-color: #f4d77e; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(2,6,23,.35); } .iexel-event-match-selection-card .iexel-button-secondary:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(203,161,53,.45); } .iexel-event-match-selection-card .iexel-button-primary { padding: 10px 18px; background: var(--iexel-gold, #cba135); color: #071d49 !important; border: 1.5px solid #f4d77e; font-size: .86rem; font-weight: 900; } .iexel-event-match-selection-card .iexel-button-primary:hover { background: #e0bc5a; color: #071d49 !important; border-color: #ffffff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(203,161,53,.45); } .iexel-event-match-selection-card .iexel-button-primary:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(203,161,53,.45); } .iexel-event-match-selection-empty { padding: 24px 18px; border: 1.5px dashed rgba(203,161,53,.35); border-radius: 14px; background: rgba(255,255,255,.03); text-align: center; display: grid; gap: 14px; justify-items: center; color: #cbd5e1; } .iexel-event-match-selection-empty p { margin: 0; color: #e2e8f0; font-size: .9rem; font-weight: 700; } @media (max-width: 600px) { .iexel-event-match-selection-card { padding: 18px 14px; margin: 18px 0; border-radius: 14px; } .iexel-event-match-selection-cardheading { gap: 8px; } } .iexel-matchday-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; } .iexel-matchday-metrics div { display: grid; gap: 3px; padding: 14px; border-radius: 12px; background: rgba(255,255,255,.055); } .iexel-matchday-metrics strong { color: var(--iexel-gold-bright); font-size: 1.4rem; } .iexel-matchday-metrics span { color: var(--iexel-muted); font-size: .75rem; } .iexel-matchday-inline-actions { display: flex; gap: 10px; } .iexel-matchday-inline-actions a { padding: 9px 14px; border: 1px solid var(--iexel-border); border-radius: 10px; color: var(--iexel-white); background: rgba(255,255,255,.06); text-decoration: none; transition: background .16s ease, border-color .16s ease; } .iexel-matchday-inline-actions a:hover { background: rgba(255,255,255,.12); border-color: var(--iexel-gold); } .iexel-matchday-placeholder { color: var(--iexel-muted); } .iexel-matchday-emergency-contacts { min-width: 0; } .iexel-matchday-emergency-contacts > p { margin: 0; color: var(--iexel-muted); } .iexel-matchday-emergency-contact-list { margin-top: 18px; } .iexel-matchday-emergency-contact-label, .iexel-matchday-emergency-contact-phone, .iexel-matchday-emergency-contact-missing { max-width: 100%; overflow-wrap: anywhere; } / A4: Emergency Contacts is explicitly required to "remain especially readable" -- the phone number previously used var(--iexel-brand-primary) (#071d49, a dark navy meant for text on a WHITE card), which would have been close to invisible once this card's own background became dark navy. Switched to the bright gold token already used for other emphasised values across the Hub (readiness %, metrics), a clear, high-contrast value against the new dark surface. / .iexel-matchday-emergency-contact-phone { min-width: 0; color: var(--iexel-gold-bright); font-weight: 800; } .iexel-matchday-emergency-contact-missing { color: var(--iexel-muted); font-weight: 800; } .iexel-matchday-timeline { counter-reset: timeline; } .iexel-matchday-timeline li { position: relative; padding: 10px 10px 10px 34px; border-left: 2px solid rgba(255,255,255,.18); color: var(--iexel-white); } .iexel-matchday-timeline li::before { position: absolute; left: -8px; width: 14px; height: 14px; border-radius: 50%; background: var(--iexel-gold); content: ''; } .iexel-portal-audience-card { display: grid; gap: 20px; } .iexel-portal-audience-card h1 { margin: 6px 0 0; color: #071b36; } .iexel-portal-audience-group { padding: 20px; border: 1px solid #dbe5f0; border-radius: 16px; background: #f7f9fc; } .iexel-portal-audience-group h2 { margin: 4px 0 12px; color: #0d3b69; } .iexel-portal-audience-group ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin: 0; padding: 0; list-style: none; } .iexel-portal-audience-group li { padding: 8px 10px; border-radius: 8px; background: #fff; } @media (max-width: 760px) { .iexel-matchday-hero, .iexel-matchday-grid { grid-template-columns: 1fr; } .iexel-matchday-hero { padding: 24px; } .iexel-matchday-actions, .iexel-matchday-metrics { grid-template-columns: 1fr 1fr; } .iexel-matchday-heromatch-info { grid-template-columns: 1fr; } .iexel-matchday-selectiongroups { grid-template-columns: 1fr; } .iexel-matchday-selection-list li { align-items: flex-start; flex-direction: column; } .iexel-matchday-selection-badges { justify-content: flex-start; } .iexel-portal-audience-group ul { grid-template-columns: 1fr; } .iexel-match-readinesssummary, .iexel-match-readinessitems { grid-template-columns: 1fr; } .iexel-match-readiness-item { grid-template-columns: 34px minmax(0,1fr); } .iexel-match-readiness-itemaction { grid-column: 2; justify-self: start; } } / Live Match Mode / .iexel-match-mode { display: grid; gap: 24px; min-width: 0; } .iexel-match-mode-live-focus { display: grid; gap: 18px; min-width: 0; } .iexel-match-mode-details-disclosure { min-width: 0; } / Match Mode gold-trim polish: Match Recovery and Match Details (the two consumers of this shared
/
disclosure) now use the same 2px gold border already established for this page's premium navigation controls (.iexel-workspace-back, "Back to Matchday Hub") in their resting/collapsed state, instead of a plain grey border that previously only turned gold once expanded ([open] > summary below, still needed for its own border-radius flattening, is now simply redundant-but-harmless on colour). Width, height, padding, radius, background, the disclosure arrow and focus treatment are unchanged. / .iexel-match-mode-details-disclosure > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 14px 20px; box-sizing: border-box; color: #fff; background: #0b1f3a; border: 2px solid var(--iexel-gold); border-radius: 14px; font-weight: 900; text-decoration: none; cursor: pointer; list-style: none; } .iexel-match-mode-details-disclosure > summary::-webkit-details-marker { display: none; } .iexel-match-mode-details-disclosure > summary:focus-visible { outline: 3px solid #f8fafc; outline-offset: 3px; box-shadow: 0 0 0 5px rgba(203,161,53,.38); } .iexel-match-mode-details-disclosure[open] > summary { border-color: var(--iexel-gold); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .iexel-match-mode-details-disclosurebody { display: grid; gap: 18px; padding: 18px; background: #071b36; border: 1px solid var(--iexel-gold); border-top: none; border-radius: 0 0 14px 14px; min-width: 0; } .iexel-match-mode-hero-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: start; min-width: 0; } .iexel-match-mode-hero-actions { position: sticky; top: 16px; display: grid; gap: 10px; align-self: start; width: min(240px,100%); min-width: 200px; } .iexel-match-mode-lineup-shortcut, .iexel-match-mode-action-menu > summary { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px 16px; box-sizing: border-box; border-radius: 11px; font-weight: 900; text-align: center; text-decoration: none; cursor: pointer; } .iexel-match-mode-lineup-shortcut { color: #071b36; background: var(--iexel-gold); border: 2px solid #f4d77e; } .iexel-match-mode-lineup-shortcut:hover { color: #071b36; background: #e6bf5a; border-color: #fff0ad; } .iexel-match-mode-lineup-shortcut:focus-visible, .iexel-match-mode-action-menu > summary:focus-visible { outline: 3px solid #f8fafc; outline-offset: 3px; box-shadow: 0 0 0 5px rgba(203,161,53,.38); } .iexel-match-mode-action-menu { position: relative; } .iexel-match-mode-action-menu > summary { color: #fff; background: #0b1f3a; border: 2px solid #64748b; list-style: none; } .iexel-match-mode-action-menu > summary::-webkit-details-marker { display: none; } .iexel-match-mode-action-menuindicator { margin-left: 8px; } .iexel-match-mode-action-menu[open] > summary { border-color: var(--iexel-gold); } .iexel-match-mode-action-menu nav { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; display: grid; width: min(280px,90vw); padding: 8px; background: #071b36; border: 1px solid var(--iexel-gold); border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.35); } .iexel-match-mode-action-menu nav a { padding: 11px 12px; color: #fff; border-radius: 8px; font-weight: 800; text-decoration: none; } .iexel-match-mode-action-menu nav a:hover, .iexel-match-mode-action-menu nav a:focus-visible { color: #071b36; background: var(--iexel-gold); outline: none; } .iexel-match-mode-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: start; padding: 32px; overflow: hidden; color: var(--iexel-white); background: linear-gradient(135deg, var(--iexel-midnight), var(--iexel-navy)); border: 1px solid var(--iexel-border); border-bottom: 5px solid var(--iexel-gold); border-radius: 22px; box-shadow: var(--iexel-shadow-medium); } .iexel-match-mode-hero > div, .iexel-match-mode-hero dl, .iexel-match-mode-grid > , .iexel-match-mode-stack, .iexel-match-mode-lineups { min-width: 0; } .iexel-match-mode-herosummary { display: grid; align-content: start; gap: 10px; } .iexel-match-mode-hero h1 { margin: 8px 0; color: var(--iexel-white); font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1; } .iexel-match-mode-hero p { margin: 0; color: var(--iexel-gold); font-size: 1.2rem; font-weight: 800; overflow-wrap: anywhere; } .iexel-match-mode-herofixture { max-width: 34rem; line-height: 1.35; } .iexel-match-mode-hero dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; } .iexel-match-mode-hero dl div { padding: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 11px; } .iexel-match-mode-hero dt { color: var(--iexel-muted); font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .iexel-match-mode-hero dd { margin: 4px 0 0; color: var(--iexel-white); font-weight: 800; overflow-wrap: anywhere; } .iexel-match-mode-kicker { color: var(--iexel-gold); font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .iexel-match-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; min-width: 0; } /* Batch 1D: live-only second grid-column grouping -- Match State + the compact closed Match Recovery disclosure stack together so they visually balance the score hero on desktop. Same gap as the parent grid; no forced equal heights. / .iexel-match-mode-state-column { display: grid; gap: 22px; align-content: start; min-width: 0; } / Batch 1E: at the two-column desktop width, the Match State card + Match Recovery disclosure combined slightly overshoot the score hero's own height, so Match Recovery's bottom edge sits a little past the hero's -- tightening only the internal gap between the two right-column items pulls Match Recovery back up to sit closer to the hero's bottom without any fixed/negative positioning. Scoped to exactly the width range where the two-column grid is active (the inverse of the existing 760px collapse breakpoint below), so mobile's already-accepted 22px Match State/Match Recovery spacing is completely untouched. Batch 1F: 14px left a measured ~3.9px residual offset; tightened once more to 10px to bring Match Recovery's bottom almost exactly level with the hero's bottom. / @media (min-width: 761px) { .iexel-match-mode-state-column { gap: 10px; } } .iexel-match-mode-card { display: grid; align-content: start; gap: 14px; min-width: 0; padding: 24px; color: var(--iexel-color-on-dark, #ffffff); background: linear-gradient(180deg, var(--iexel-navy), var(--iexel-midnight)); border: 1px solid var(--iexel-border); border-left: 4px solid var(--iexel-gold); border-radius: 18px; box-shadow: var(--iexel-shadow-small); overflow: hidden; } / Match Mode gold-trim polish: replaces the page's own one-off gold LEFT rail with the restrained gold TOP EDGE + thin neutral remaining border already established elsewhere in Club OS as the primary-module convention (see .iexel-match-report-hero's own identical comment) -- this is the single shared base class every principal Match Mode card (Live Score, Match State, Current On Pitch, Available/Unavailable Bench, Starting Lineup, Other Matchday Players, Match Incident Timeline, Available player audience, Staff) already renders, so one override here reaches all of them with no new per-card selectors. Scoped two ways, deliberately: (1) ".iexel-match-mode " (the page's own outer wrapper, present on MatchModePage/GoalAttribution/Substitution/ GoalkeeperChange/AttendanceChange) so this never reaches the several OTHER, already-established ".iexel-event-detail .iexel-match-mode- score-card / .iexel-incident-timeline-card { border-top: 4px solid var(--iexel-gold); }" rules (equal specificity to a bare ".iexel-match-mode-card" override, so source order would otherwise let a later rule silently reshape that already-accepted, unrelated composition); (2) :not(.iexel-attendance-change-card) because EventAttendancePage.php ALSO renders inside ".iexel-match-mode" and separately borrows this exact shared class for its own, unrelated Attendance Change card -- excluding it keeps that page's existing gold-left-rail look completely untouched. Surface colour, spacing, radius, shadow and every card-specific modifier/child rule (count badges, player rows, incident rows) are untouched. / .iexel-match-mode .iexel-match-mode-card:not(.iexel-attendance-change-card) { border: 1px solid var(--iexel-border); border-top: 4px solid var(--iexel-gold); } .iexel-match-mode-card h2 { margin: 0; color: var(--iexel-white); } .iexel-match-mode-card p { margin: 0; } .iexel-match-mode-card--wide { grid-column: 1 / -1; } .iexel-match-mode-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; min-width: 0; } .iexel-match-mode-card-heading > div { display: grid; gap: 10px; min-width: 0; } .iexel-match-mode-count { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 12px; color: #071d49; background: var(--iexel-gold); border: 1px solid #f4d77e; border-radius: 999px; font-size: 1rem; font-weight: 900; line-height: 1; } .iexel-match-mode-card--on-pitch .iexel-match-mode-count { color: #eafff1; background: rgba(34,197,94,.16); border-color: rgba(74,222,128,.42); } .iexel-match-mode-card--bench .iexel-match-mode-count { color: #fde68a; background: rgba(245,195,66,.12); border-color: rgba(245,195,66,.34); } .iexel-match-mode-card--unavailable .iexel-match-mode-count { color: #fecaca; background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.4); } .iexel-match-mode-card--starting .iexel-match-mode-count { color: #e2e8f0; background: rgba(148,163,184,.14); border-color: rgba(148,163,184,.32); } .iexel-match-mode-score { display: grid; place-content: center; text-align: center; } / Scoped to ".iexel-match-mode " for the same reason as the base-card override above -- so the Live Score card's own slightly-thicker 5px accent never reaches the separate, already-established ".iexel-event-detail .iexel-match-mode-score-card" 4px treatment (this shares the underlying MatchModeScoreCard component, rendered there too, but that context deliberately keeps a uniform 4px across all three of its own primary modules). Three classes deep (.iexel-match-mode .iexel-match-mode-card.iexel-match-mode-score-card, not just two) so this specificity is at least equal to the base-card override's own three-class :not() selector above -- two classes alone would otherwise lose the border-top-width change to that rule. / .iexel-match-mode .iexel-match-mode-card.iexel-match-mode-score-card { background: radial-gradient(circle at top, rgba(245,195,66,.14), transparent 42%), linear-gradient(180deg, var(--iexel-navy), var(--iexel-midnight)); border-top-width: 5px; container: iexel-match-score-card / inline-size; } .iexel-match-mode-scoreboard { display: grid; grid-template-columns: minmax(90px, 1fr) auto minmax(90px, 1fr); align-items: center; column-gap: 16px; row-gap: 6px; width: 100%; } .iexel-match-mode-scorevalue { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 10px 0; padding: 16px 22px; color: var(--iexel-white); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; font-size: clamp(3.3rem, 8vw, 5.9rem); font-weight: 900; line-height: 1; } .iexel-match-mode-scorevalue b { color: var(--iexel-gold); font-size: .65em; } .iexel-match-mode-score p, .iexel-match-mode-help { color: var(--iexel-muted); } .iexel-match-mode-scorecontext { font-size: .95rem; } .iexel-match-mode-scoremeta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .iexel-match-mode-scoremeta span { padding: 6px 10px; color: #e2e8f0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; font-size: .74rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; } / CMC-003 v1 (browser-acceptance correction): the Club goal-scorer summary composes INSIDE the existing midnight-blue score hero's own scoreboard grid, associated with whichever column the Club's own side occupies -- never as an external sibling beneath the hero (that placement put white/ gold text on the pale page background, which this structural change fixes without a new background of its own; it inherits the hero's own dark navy/midnight gradient). .iexel-match-mode-scorescorers positions the summary in the SAME 3-column grid the team names/score already use on desktop; --right is the only override needed since column 1 is the grid default. At the 440px single-column-collapse breakpoints (viewport for live Match Mode, container for the completed view) this becomes an explicit 2-column football grid instead of 1 -- see those breakpoints below and around line 7715 -- so the Club scorer block stays associated with the correct Team side instead of visually reading as belonging to whichever Team happens to sit above it in document order. .iexel-match-goal-scorers itself (MatchGoalScorersCard's own output) is deliberately unboxed -- reusing existing colour tokens only -- shared verbatim by the Coach Match Mode/completed-Event hero (via MatchModeScoreCard) and the Player/Parent completed-Match hero (CompletedParticipantMatchExperience, which renders it directly, not through MatchModeScoreCard). Scorer typography is deliberately SUBORDINATE to the Team name above it (smaller size, lighter weight -- Team name now visually dominates at a substantially larger scale, see .iexel-match-score-team strong below) and entries wrap compactly side-by-side on desktop (flex-wrap, a bullet separator between entries -- the same "\2022" convention already used by .iexel-participant-matchmeta) rather than each consuming its own full row, so a high-scoring Match does not grow the hero unnecessarily tall. Final micro-polish: the scoreboard's row-gap (space between the Team/ score row and the scorer row) is deliberately tighter than its column-gap, and .iexel-match-mode-scorescorers carries its own margin-bottom, so the scorer block reads as attached to the football result above it and clearly separated from the Add Goal/operational content below it -- see .iexel-match-mode-scoreboard's split row-gap/ column-gap above. At <=440px the scorer list switches to one entry per line (bullet suppressed) instead of wrapped/bulleted, which was prone to staggering at narrow widths -- desktop keeps the compact wrapped presentation. Same-Player goal consolidation is unaffected throughout -- MatchGoalScorersCard's own grouping is untouched by this purely visual change. / .iexel-match-mode-scorescorers { grid-column: 1; margin: 0 0 14px; } .iexel-match-mode-scorescorers--right { grid-column: 3; } .iexel-match-goal-scorers { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 4px; row-gap: 2px; margin: 0; padding: 0; list-style: none; text-align: center; } .iexel-match-goal-scorers li { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 5px; min-width: 0; max-width: 100%; } .iexel-match-goal-scorers li:not(:first-child)::before { content: '\2022'; margin-right: 4px; color: var(--iexel-gold); } .iexel-match-goal-scorersname { color: var(--iexel-white); font-size: clamp(.72rem, 1.6vw, .88rem); font-weight: 700; overflow-wrap: anywhere; } .iexel-match-goal-scorersdetail { color: var(--iexel-gold); font-size: clamp(.66rem, 1.4vw, .78rem); font-weight: 600; overflow-wrap: anywhere; } .iexel-match-score-heading { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; width: 100%; } .iexel-incident-timeline-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; } .iexel-match-score-badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; } .iexel-match-result-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 30px; padding: 5px 11px; border: 1px solid transparent; border-radius: 999px; font-size: .72rem; font-weight: 950; letter-spacing: .06em; line-height: 1; text-transform: uppercase; } .iexel-match-result-badge.is-win { color: #bbf7d0; background: rgba(34,197,94,.17); border-color: rgba(74,222,128,.48); } .iexel-match-result-badge.is-draw { color: #071d49; background: var(--iexel-gold); border-color: #f4d77e; } .iexel-match-score-team { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-width: 0; } .iexel-match-score-team small { color: var(--iexel-gold); font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; text-align: center; width: 100%; } .iexel-match-score-team strong { color: var(--iexel-white); font-size: clamp(1.25rem, 3.2vw, 2.5rem); font-weight: 900; letter-spacing: .01em; line-height: 1.05; text-transform: uppercase; overflow-wrap: anywhere; text-align: center; width: 100%; } .iexel-match-score-teamkit { display: flex; align-items: center; justify-content: center; width: 100%; } .iexel-match-score-team .iexel-kit-shirt { margin: 2px 0; align-self: center; } / Focused Match action hero + half-width scorer wrapping polish: the Team-name/scorer sizing above assumes a desktop card roughly half the VIEWPORT wide (3.2vw), which is what the completed-record hero and a full-width single-column card get. It is NOT what the Club actually gets in a two-column desktop layout: .iexel-match-mode-grid (normal Live Match Mode, 50/50) and .iexel-goal-attributiongrid / .iexel-substitution-pagegrid (focused Goal Attribution/Substitution/ Change Goalkeeper, 40/60 -- the score card is the narrower .8fr side) both give the score card only a FRACTION of the viewport, so 3.2vw overshoots the card's real available width and produces exactly the reported character-level break ("U7 / GO / LD") even at ordinary desktop widths -- confirmed empirically (a live 1280px-viewport Match Mode card measures ~410px wide, well under what 3.2vw assumes). This container query -- keyed to iexel-match-score-card's own inline size (see the container: declaration on .iexel-match-mode-score-card above), not the viewport -- reuses the exact CMC-003 long-name mobile- resilience technique (same clamp floor/ceiling, text-wrap: balance, overflow-wrap: break-word) so it applies correctly regardless of WHY the card is narrow: a two-column desktop split, a focused-action page, or an actually-narrow viewport. It also switches the scorer list to one entry per line (bullet suppressed) below the same width, the same guaranteed-intact-entry technique already used at <=440px, because the compact wrapped/bulleted style can otherwise split a single entry's own Player name from its own minute ("TEST PLAYER U7 20′ / • DECLAN ROGERS / 30′") once several entries no longer fit one card-width line together -- confirmed empirically at these same real card widths. 400-620px is a deliberate wide net given real measured widths across every context that renders this card (~410px live 50/50 at 1280px, ~430-460px focused-action 40/60, and completed/single-column cards occasionally narrower than their usual near-full width); it does not fire for a genuinely spacious single-column card. Nested inside .iexel-completed-match-record's OWN already-tuned <=440px container query (a MORE specific selector, so it always wins there regardless of source order), so the already-accepted completed-view presentation at its established breakpoint is unaffected -- this only additionally covers completed cards that fall narrower than usual but above 440px, which previously had no narrow-card handling at all. Empirical testing against these real widths also surfaced a second, compounding cause of the same overflow: .iexel-match-mode-scorevalue's own font-size (clamp(3.3rem, 8vw, 5.9rem), also viewport- not card-relative) can by itself demand more width than a narrow card has left after the two 90px-minimum Team-name columns, pushing the whole 3-column scoreboard wider than the card and shifting content off its left edge -- so the score value gets the same card-relative treatment here too. Wrapped in "min-width: 441px" so this NEVER fires at an actual mobile viewport (where the card's own inline-size also falls under 620px regardless) -- at <=440px the dedicated, already browser-accepted CMC-003 mobile rules below own font-size/list-layout entirely; without this guard, the two would both match there and this rule's card-relative score-digit size would shrink the already-tuned mobile score display, a genuine regression confirmed empirically before this guard was added. / @media (min-width: 441px) { @container iexel-match-score-card (max-width: 620px) { .iexel-match-score-team strong { font-size: clamp(.95rem, 4cqi, 1.5rem); text-wrap: balance; overflow-wrap: break-word; } .iexel-match-mode-scorevalue { gap: 10px; padding: 10px 12px; font-size: clamp(1.6rem, 8cqi, 2.8rem); } .iexel-match-goal-scorers { display: grid; gap: 3px; } .iexel-match-goal-scorers li:not(:first-child)::before { content: none; } } } .iexel-live-state-pill { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 30px; padding: 5px 11px; color: #071d49; background: var(--iexel-gold); border: 1px solid #f4d77e; border-radius: 999px; font-size: .72rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; } .iexel-live-state-card { display: grid; align-content: center; } .iexel-live-phase-summary { display: grid; gap: 4px; padding: 15px 16px; color: var(--iexel-white); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; } .iexel-live-phase-summary span, .iexel-live-action-cluster > span { color: var(--iexel-muted); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .iexel-live-phase-summary strong { color: var(--iexel-white); font-size: clamp(1.25rem, 3vw, 1.7rem); line-height: 1.15; } .iexel-live-action-cluster { display: grid; gap: 10px; } .iexel-live-state-terminal, .iexel-live-controls-closed { margin: 12px 0 0; padding: 12px 14px; color: #e2e8f0; background: rgba(148,163,184,.1); border: 1px solid rgba(148,163,184,.32); border-radius: 10px; font-weight: 800; } .iexel-live-control-form { display: flex; min-width: 0; margin: 0; } .iexel-live-control-form--stacked { display: grid; gap: 14px; } .iexel-live-control-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 160px); gap: 12px; min-width: 0; } .iexel-live-control-field { display: grid; gap: 7px; min-width: 0; color: var(--iexel-white); font-weight: 900; } .iexel-live-control-field span { color: var(--iexel-muted); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .iexel-live-control-field select, .iexel-live-control-field input[type="number"] { width: 100%; max-width: 100%; min-width: 0; min-height: 52px; padding: 11px 12px; box-sizing: border-box; color: var(--iexel-white); background: #0b1f3a; border: 2px solid #64748b; border-radius: 11px; font: inherit; font-weight: 800; } .iexel-live-control-field select:focus, .iexel-live-control-field select:focus-visible, .iexel-live-control-field input[type="number"]:focus, .iexel-live-control-field input[type="number"]:focus-visible { border-color: var(--iexel-gold); outline: 3px solid rgba(245,195,66,.45); outline-offset: 2px; } .iexel-live-control-field select option { color: #111827; background: #ffffff; } .iexel-live-control-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 62px; padding: 13px 16px; box-sizing: border-box; color: #f8fafc; background: #102b4e; border: 2px solid #64748b; border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); font: inherit; font-weight: 900; line-height: 1.2; text-align: center; text-decoration: none; overflow-wrap: anywhere; cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; } .iexel-live-control-button:hover { color: #ffffff; background: #173b67; border-color: var(--iexel-gold); transform: translateY(-1px); } .iexel-live-control-button:focus-visible { outline: 3px solid #f8fafc; outline-offset: 3px; box-shadow: 0 0 0 5px rgba(203,161,53,.45); } .iexel-live-control-button--primary, .iexel-live-control-button--goal { color: #071d49; background: var(--iexel-gold); border-color: #f4d77e; } .iexel-live-control-button--primary:hover, .iexel-live-control-button--goal:hover { color: #071d49; background: #e0bc5a; border-color: #fff0ad; } .iexel-live-control-button--danger { color: #fff7f7; background: #7f1d1d; border-color: #f87171; } .iexel-live-control-button--danger:hover { background: #991b1b; border-color: #fca5a5; } .iexel-live-reopen-caution { display: grid; gap: 10px; margin-top: 18px; padding: 16px; color: #fff7ed; background: rgba(127,29,29,.28); border: 2px solid #ef4444; border-radius: 12px; } .iexel-live-reopen-caution h3, .iexel-live-reopen-caution p { margin: 0; } .iexel-live-reopen-caution h3 { color: #fff7ed; } .iexel-live-reopen-caution p { color: #fecaca; font-weight: 800; } .iexel-live-reopen-caution details { display: grid; gap: 10px; } .iexel-live-reopen-caution summary { color: #fee2e2; font-weight: 900; cursor: pointer; } .iexel-live-reopen-caution details[open] summary { margin-bottom: 10px; } .iexel-live-reopen-caution details p { margin-bottom: 10px; } .iexel-live-control-button:disabled { color: #dbe4ef; background: linear-gradient(180deg, #2c3d55, #223247); border-color: #475569; cursor: not-allowed; opacity: 1; transform: none; box-shadow: none; } .iexel-live-goal-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; min-width: 0; } .iexel-match-mode-lineups { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .iexel-incident-timeline-heading > div { min-width: 0; } .iexel-incident-timeline-heading h2 { margin-bottom: 0; } .iexel-incident-timeline { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; } .iexel-incident-timeline li { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; padding: 13px; color: var(--iexel-white); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-left: 4px solid var(--iexel-gold); border-radius: 11px; } .iexel-incident-timeline li > div { display: grid; gap: 3px; min-width: 0; } .iexel-incident-timeline strong { color: var(--iexel-white); overflow-wrap: anywhere; } .iexel-incident-timeline small { color: var(--iexel-muted); overflow-wrap: anywhere; } .iexel-incident-sequence { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; color: #071d49; background: var(--iexel-gold); border-radius: 9px; font-weight: 900; } .iexel-incident-audit { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--iexel-border); } .iexel-incident-audit summary { color: #f8d77b; font-weight: 900; cursor: pointer; } .iexel-incident-timeline.is-voided li { opacity: .7; border-left-color: #94a3b8; } .iexel-incident-timeline li.is-voided strong { text-decoration: line-through; } .iexel-live-match-notice { margin: 0; } .iexel-match-mode-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .iexel-match-mode-people article { display: grid; gap: 3px; min-width: 0; padding: 14px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; } .iexel-match-mode-people strong { color: var(--iexel-white); overflow-wrap: anywhere; } .iexel-match-mode-people span { color: var(--iexel-gold); font-weight: 900; } .iexel-match-mode-people small { color: var(--iexel-muted); } .iexel-match-mode-player-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .iexel-match-mode-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .iexel-match-mode-badge { padding: 5px 8px; border: 1px solid transparent; border-radius: 999px; font-weight: 800; } .iexel-match-mode-badge.is-success { color: #b9f6d2; background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.4); } .iexel-match-mode-badge.is-warning { color: #fde1a7; background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.4); } .iexel-match-mode-badge.is-danger { color: #fecaca; background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.4); } .iexel-match-mode-badge.is-muted { color: var(--iexel-muted); background: rgba(148,163,184,.1); border-color: rgba(148,163,184,.28); } .iexel-match-mode-stack { display: grid; gap: 20px; } .iexel-match-mode-selection, .iexel-match-mode-timeline { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; } .iexel-match-mode-selection li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 12px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; } .iexel-match-mode-selection li > span { grid-row: 1 / 3; color: var(--iexel-midnight); background: var(--iexel-gold); border-radius: 8px; padding: 8px 4px; font-weight: 900; text-align: center; } .iexel-match-mode-selectionbody { display: grid; gap: 7px; min-width: 0; } .iexel-match-mode-selectionmeta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; } .iexel-match-mode-selectiondetail { color: var(--iexel-muted); font-size: .82rem; } .iexel-match-mode-selection strong { color: var(--iexel-white); overflow-wrap: anywhere; } .iexel-match-mode-selection small { color: var(--iexel-muted); } .iexel-match-mode-selection li.has-warning { border: 1px solid rgba(245,158,11,.55); background: rgba(245,158,11,.1); } .iexel-match-mode-selection li.has-warning .iexel-match-mode-selectiondetail { color: #fde68a; } .iexel-match-mode-empty { padding: 16px; color: var(--iexel-muted); border: 1px dashed var(--iexel-border); border-radius: 11px; } / Attendance / Live Squad batch: "Other Matchday Players" now renders through MatchModeLineupCard (.iexel-match-mode-selection), the same Player rows/cards component used by every other live squad card, so the dedicated .iexel-live-bench-* row/form rules that previously lived here for its own separate markup are no longer used anywhere and have been removed rather than left dead. / / Player Actions (Match Mode Batch 1) -- contextual per-Player menu for On Pitch / Available Bench rows. Reuses the Lineup Builder's established .iexel-lineup-slot-menu visual/interaction pattern (positioned popup, midnight-blue/gold, 44px touch targets, viewport clamping) scoped to Match Mode with its own class names rather than sharing markup/JS with the Lineup Builder. The whole row becomes the tap target (a real