/* ═══════════════════════════════════════════════════════════════════════════ Gladiator Sports — Organizer Portal chrome ─────────────────────────────────────────────────────────────────────────── Shared styles for the signed-in organizer area (dashboard / my-events / manage-event / create event). Loaded only on those pages so styles.css stays cache-stable. Inherits every token + component (.btn, .form-card, .chiplet, .field, .input, .hint, .note) from styles.css — this only adds portal-specific layout: the sub-nav, KPI tiles, event rows, filter chips, and progress bars. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Portal sub-nav (the "pages within the login") ───────────────────────── */ .og-subnav { position: relative; z-index: 5; border-bottom: 1px solid var(--border-gold); background: linear-gradient(180deg, rgba(16,14,10,0.9), rgba(10,9,7,0.7)); backdrop-filter: blur(6px); } .og-subnav__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; flex-wrap: wrap; } .og-subnav__links { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; overflow-x: auto; } .og-subnav__right { display: flex; align-items: center; gap: 10px; } .og-subnav__link { display: inline-block; white-space: nowrap; font-family: var(--display); font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 9px 14px; border-radius: 8px; border: 1px solid transparent; transition: color .16s ease, background .16s ease, border-color .16s ease; } .og-subnav__link:hover { color: var(--gold-light); background: rgba(201,168,76,0.06); } .og-subnav__link[aria-current="page"] { color: var(--gold); background: rgba(201,168,76,0.1); border-color: var(--border-gold); } .og-subnav__signout { appearance: none; background: none; border: 0; cursor: pointer; font-family: var(--serif); font-size: 16px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; padding: 6px 4px; } .og-subnav__signout:hover { color: var(--ember-light); } /* ── App-shell header (signed-in pages) ────────────────────────────────────── Inside the login the public marketing nav drops away: the Gladiator Sports logo becomes the one-tap route to the user's app home (set by gs-backend.js's applySignedInChrome — organizer dashboard / player home), and the portal sub-nav below carries all in-app navigation. Applied via the hook so it's pure-CSS — no flash of the public nav. (gs-backend also hides these tabs by session on the public discovery pages.) */ .app-shell .nav__links, .app-shell .nav__toggle { display: none !important; } /* Phone header on app-shell pages. There's no dropdown menu to collapse into, so the header carries the brand + one primary CTA. The old layout also kept the "My Account" link inline, which pushed brand + link + button past the viewport and made the whole page scroll sideways. Drop the redundant link (the sub-nav already has Account), slim the brand + button, and tighten the bar so it fits. Also collapse the portal sub-nav to a single horizontally-scrollable row instead of letting it wrap to two or three. Applies to every portal/app-shell page. */ @media (max-width: 600px) { .app-shell .nav { height: 58px; } .app-shell .nav__cta { gap: 8px; } .app-shell .nav__cta .btn--primary { display: inline-flex !important; } .app-shell .nav__cta .nav__link { display: none; } /* redundant with the sub-nav */ .app-shell .brand { gap: 9px; } .app-shell .brand__name { font-size: 16px; letter-spacing: .07em; } .app-shell .brand__name small { display: none; } .app-shell .nav__cta .btn--small { padding: 9px 13px; min-height: 38px; font-size: 10.5px; letter-spacing: .1em; } .og-subnav__inner { flex-wrap: nowrap; overflow-x: auto; gap: 10px; padding-block: 7px; scrollbar-width: none; } .og-subnav__inner::-webkit-scrollbar { display: none; } .og-subnav__right { flex: 0 0 auto; } .og-subnav__link { padding: 7px 11px; } /* In-card action buttons carry long labels ("Set Up Payouts with Stripe", "Open the Tournament Control Room"). The base .btn is white-space:nowrap, so on a phone those run past the card and the viewport. Let them wrap and cap at the card width so they stay on-screen. */ .form-card .btn { white-space: normal; max-width: 100%; } } /* ── Account-mode switch (organizer ⇄ player) — auto-mounted into [data-mode-switch] */ .mode-switch { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-family: var(--display); font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--gold-light); white-space: nowrap; background: rgba(201,168,76,0.08); border: 1px solid var(--border-gold); border-radius: 999px; padding: 8px 14px; transition: color .16s ease, background .16s ease, border-color .16s ease; } .mode-switch:hover { color: var(--gold); background: rgba(201,168,76,0.16); border-color: var(--gold); } .mode-switch:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .mode-switch[disabled] { opacity: .6; cursor: default; } .mode-switch__icon { font-size: 14px; line-height: 1; } .mode-switch--locked { color: var(--muted); background: none; border-color: var(--border-warm); cursor: default; } /* Operator-only jump into the admin control room — ember-toned to read as "elevated". */ .mode-switch--admin { color: var(--ember-light); background: rgba(200,90,60,0.10); border-color: rgba(200,90,60,0.45); text-decoration: none; } .mode-switch--admin:hover { color: #fff; background: rgba(200,90,60,0.22); border-color: var(--ember-light); } .mode-switch--admin:focus-visible { outline: 2px solid var(--ember-light); outline-offset: 2px; } /* ── Portal header (greeting + action) ───────────────────────────────────── */ .portal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .portal-head__actions { display: flex; gap: 10px; flex-wrap: wrap; } /* ── KPI tiles ───────────────────────────────────────────────────────────── */ .kpi-grid { display: grid; gap: clamp(12px, 1.8vw, 18px); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 24px; } .kpi { border: 1px solid var(--border-warm); border-radius: var(--r-md); background: linear-gradient(180deg, var(--surface), var(--surface-2)); padding: 18px 18px 16px; position: relative; overflow: hidden; } .kpi--accent { border-color: var(--border-gold); background: linear-gradient(180deg, rgba(201,168,76,0.07), var(--surface-2)); } .kpi__num { font-family: var(--display); font-weight: 900; font-size: clamp(26px, 3.4vw, 36px); line-height: 1; color: var(--ink); } .kpi__num--gold { color: var(--gold-light); } .kpi__label { display: block; margin-top: 9px; font-family: var(--display); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .kpi__sub { display: block; margin-top: 4px; font-size: 14px; color: var(--muted-2); } /* ── Event rows (dashboard preview + my-events list) ─────────────────────── */ .pevent-list { display: flex; flex-direction: column; } .pevent { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 18px 0; border-top: 1px solid rgba(240,234,214,0.1); flex-wrap: wrap; } .pevent:first-child { border-top: 0; } .pevent__main { min-width: 220px; flex: 1; } .pevent__title { font-family: var(--display); font-size: 17.5px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .pevent__meta { color: var(--muted); font-size: 15.5px; margin-top: 4px; } .pevent__meta--free { color: #7bd88f; } .pevent__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* ── Status chiplets (extends styles.css .chiplet) ───────────────────────── */ .chiplet--ok { color: #0c0b08; background: #7bd88f; border-color: #7bd88f; } .chiplet--ok::before { color: #0c0b08; } .chiplet--draft { color: var(--muted); } .chiplet--draft::before { color: var(--muted-2); } .chiplet--rejected { color: #0c0b08; background: var(--ember-light); border-color: var(--ember-light); } .chiplet--rejected::before { color: #0c0b08; } /* ── Filter chips (my-events) ────────────────────────────────────────────── */ .filter-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; } .filter-chip { appearance: none; cursor: pointer; font-family: var(--display); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: none; border: 1px solid var(--border-warm); border-radius: 999px; padding: 8px 15px; transition: color .16s ease, border-color .16s ease, background .16s ease; } .filter-chip:hover { color: var(--gold-light); border-color: var(--border-gold); } .filter-chip.is-active { color: var(--gold); border-color: var(--gold); background: rgba(201,168,76,0.1); } .filter-chip__n { opacity: .7; margin-left: 5px; } /* ── Fill progress bar (manage-event) ────────────────────────────────────── */ .progress { height: 9px; border-radius: 999px; background: rgba(240,234,214,0.1); overflow: hidden; margin-top: 8px; } .progress__bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-deep), var(--gold-light)); transition: width .5s ease; } /* ── Detail rows (manage-event details card) ─────────────────────────────── */ .detail-grid { display: grid; gap: 2px; } .detail-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(240,234,214,0.08); } .detail-row:first-child { border-top: 0; } .detail-row__k { color: var(--muted); font-size: 16px; } .detail-row__v { color: var(--ink-soft); font-size: 16px; text-align: right; } /* ── Empty state ─────────────────────────────────────────────────────────── */ .empty { text-align: center; padding: 40px 24px; border: 1px dashed var(--border-gold); border-radius: var(--r-md); background: rgba(201,168,76,0.03); } .empty__emblem { font-size: 34px; color: var(--gold); } .empty h3 { font-family: var(--display); font-size: 21px; margin: 12px 0 8px; } .empty p { color: var(--muted); max-width: 440px; margin: 0 auto 18px; } /* ── Spinner / loading line ──────────────────────────────────────────────── */ .portal-loading { color: var(--muted); font-size: 16px; } /* ── Visually-hidden (accessible labels) ─────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }