/* Whitelabel brand overrides.
   Layered on top of the shared FanApp compiled CSS (app.css); brand colours come from
   :root variables set in the server App.razor layout and refreshed by js/whitelabel-brand.js
   when the WASM client boots. */
:root {
    --wl-primary-color: #000000;
    --wl-secondary-color: #ffffff;
}

/* Desktop nav bar: club primary colour instead of the Fanbase black
   (--secondary-bg-color). Text/icons are forced white so they stay legible on
   the primary colour regardless of the active FanApp theme. */
.fixed-header.desktop-header {
    background-color: var(--wl-primary-color, #000000);
    color: #ffffff;
}

.fixed-header.desktop-header .lg-nav-left {
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.fixed-header.desktop-header .lg-nav-left::-webkit-scrollbar {
    display: none;
}

.fixed-header.desktop-header .lg-nav-left .nav-item,
.fixed-header.desktop-header .icon-holder-l {
    flex: 0 0 auto;
}

.fixed-header.desktop-header .lg-nav-right {
    flex: 0 0 auto;
}

.fixed-header.desktop-header .icon-holder-l {
    background-color: transparent;
    color: #ffffff;
}

.fixed-header.desktop-header .lg-nav-left .nav-item {
    color: #ffffff;
}

.fixed-header.desktop-header .lg-nav-left .nav-item.active {
    background-color: #ffffff;
    color: var(--wl-primary-color, #000000);
}

/* Mobile bottom nav: the active pill is Fanbase black by default; use the club
   primary colour with a white icon. */
.fb-bottom-nav .nav-item.active {
    background-color: var(--wl-primary-color, #000000);
}

.fb-bottom-nav .nav-item.active i {
    color: #ffffff !important;
}

/* Mobile top-level header: route title plus configured slot 6-7 actions. */
.wl-mobile-main-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    min-height: 56px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: env(safe-area-inset-top) 16px 0;
    background-color: var(--wl-primary-color, #000000);
    color: #ffffff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.wl-mobile-main-header h1 {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #ffffff;
    font-size: 20px;
    line-height: 28px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wl-mobile-main-header__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
}

.wl-mobile-main-header__action {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #ffffff;
    text-decoration: none !important;
}

.wl-mobile-main-header__action i {
    color: #ffffff !important;
}

.wl-mobile-main-header__action.active {
    background-color: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.wl-mobile-main-header__action:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    background-color: rgba(255, 255, 255, 0.18);
}

button.nav-item,
button.wl-mobile-main-header__action {
    border: none;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

@media (min-width: 769px) {
    .wl-mobile-main-header,
    .wl-mobile-home-header {
        display: none;
    }
}

/* Mobile home header: club background image with logo, name, and header actions. */
.wl-mobile-home-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    min-height: 120px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: calc(env(safe-area-inset-top) + 16px) 16px 20px;
    background-color: var(--wl-primary-color, #000000);
    background-size: cover;
    background-position: center;
    color: #ffffff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.wl-mobile-home-header__brand {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;
}

.wl-mobile-home-header__logo {
    display: flex;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.96);
    padding: 4px;
}

.wl-mobile-home-header__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wl-mobile-home-header__name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    white-space: normal;
}

.wl-mobile-home-header .wl-mobile-main-header__actions {
    align-self: flex-end;
    margin-bottom: 2px;
}

.wl-mobile-home-header--no-bg .wl-mobile-home-header__name {
    color: #ffffff;
}

/* ==========================================================================
   Whitelabel button system.
   app.css paints .btn colours through theme vars with !important, so the
   overrides below must match that weight.

   Two contexts:
   1. Light (main app) pages: primary buttons keep the club primary colour;
      the club secondary colour provides a visible border + focus accent.
   2. The club-primary background (landing/auth): a primary-coloured button
      would vanish into the page, so roles flip — primary actions use a white
      fill with dark text, secondary/tertiary actions become outlined ghost
      buttons with a white outline.
   ========================================================================== */

.btn.btn-primary:not(:disabled) {
    background-color: var(--wl-primary-color, #000000) !important;
    border-color: var(--wl-secondary-color, #ffffff) !important;
    /* Club primaries are dark; theme-dark would otherwise set black text. */
    color: #ffffff !important;
}

/* Dark-theme secondary button (e.g. modals over the main app) is black on
   black by default; club primary fill with a secondary-colour border keeps
   it visible. */
.theme-dark .btn.btn-secondary:not(:disabled) {
    background-color: var(--wl-primary-color, #000000) !important;
    border-color: var(--wl-secondary-color, #ffffff) !important;
    color: #ffffff !important;
}

/* Keyboard focus ring in the secondary colour (app.css removes the default
   outline on every .btn state). */
.btn:focus-visible {
    outline: 2px solid var(--wl-secondary-color, #ffffff) !important;
    outline-offset: 2px;
}

/* --- Buttons on the primary-coloured landing/auth background --- */

/* Primary action: white fill with dark text so it reads as the one solid
   button on the page. */
.auth-layout .btn.btn-primary:not(:disabled) {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #191919 !important;
}

.auth-layout .btn.btn-primary:not(:disabled):hover,
.auth-layout .btn.btn-primary:not(:disabled):active {
    filter: brightness(0.92);
}

/* Secondary action ("Sign up" on the landing): transparent with a visible
   white outline and white text, mirroring the main app's ghost treatment for
   btn-secondary on the dark landing. */
.auth-layout .btn.btn-secondary:not(:disabled) {
    background-color: transparent !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
}

.auth-layout .btn.btn-secondary:not(:disabled):hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Tertiary/link actions ("Continue as guest", "Don't have an account? Sign
   Up"): plain white text, no box — same as the main app's btn-outline on its
   dark landing/auth pages. Forced here so it stays legible even before the
   dark theme class lands. */
.auth-layout .btn.btn-outline:not(:disabled) {
    background-color: transparent !important;
    border: none !important;
    color: #ffffff !important;
}

/* Landing CTAs are the design's large pill: 24px/12px padding around a 16px
   bold label at every width (button.scss only steps up to 16px on desktop). */
.auth-layout .btn.btn-primary,
.auth-layout .btn.btn-secondary {
    padding: 12px 24px;
    font-size: 16px;
    line-height: 20px;
}

/* The tertiary action reads as a text link rather than a button label. */
.auth-layout .btn.btn-outline {
    padding: 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

/* button.scss stacks the CTAs 8px apart; the design uses 16px. */
.auth-layout .btn-holder {
    gap: 16px;
}

/* Club dashboard header: dark text only when there is NO background image.
   When an image IS present the shared white-text rule (nav.scss) applies,
   which is correct over the dark overlay. */
/* Club dashboard / wallet / match-centre tab bars: shared CSS paints these
   with Fanbase black; use the club primary colour instead. */
.club-tabs-holder,
.club-tabs-holder .nav-link.active {
    background-color: var(--wl-primary-color, #000000);
}

.club-header.club-header--no-bg {
    color: var(--cl-black, #191919);
}

/* Match/purchase header: shared CSS sets white text for the background-image
   case; when no image is configured the header sits on the white page, so
   switch to dark text. */
.schedule-item-base-header.no-bg-image .header {
    color: var(--cl-black, #191919);
}

/* Whitelabel desktop nav: drop the circular ring and show the logo at
   a legible size (shared CSS constrains it to 20px inside a 48px circle). */
.fixed-header.desktop-header .fb-logo-holder-s {
    border: none;
    border-radius: 0;
    background-color: transparent;
}

.fixed-header.desktop-header .fb-logo-holder-s img {
    width: 40px;
    max-height: 44px;
}

/* Whitelabel landing page: use the club primary colour as the background
   instead of the FanApp default black, and show the logo prominently.
   layout.scss only gives .auth-layout a height at the desktop breakpoint, so
   without a min-height the club colour would stop at the end of the content
   and expose the dark theme's black body underneath. */
.auth-layout {
    /* Flat fill first: it is the fallback wherever color-mix() is unsupported. */
    background-color: var(--wl-primary-color, #000000);
    /* Design gradient: the club colour lifted by 20% white at the top of the
       screen, settling into the flat colour behind the CTAs. */
    background-image: linear-gradient(179deg,
        color-mix(in srgb, var(--wl-primary-color, #000000) 80%, #ffffff) 0%,
        var(--wl-primary-color, #000000) 100%);
    min-height: 100vh;
    min-height: 100dvh;
}

/* Below the shared desktop breakpoint (769px) layout.scss leaves .auth-layout
   in normal flow, so opt into a column flex chain that lets the page content
   claim the leftover height. Scoped to a media query so it cannot outrank
   layout.scss's desktop centring rules (this file loads after app.css). */
@media (max-width: 768px) {
    .auth-layout,
    .auth-layout__body {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }

    /* Design pads the CTA block 16px from each edge and 24px from the bottom;
       layout.scss's 5% is wider than that and scales with the viewport. */
    .auth-layout {
        padding: calc(env(safe-area-inset-top) + 16px) 16px calc(24px + env(safe-area-inset-bottom));
    }
}

/* nav.scss paints .fixed-footer with the theme background, which is black on
   these dark-theme auth pages and now reads as a band across the club colour. */
.auth-layout .fixed-footer {
    background-color: transparent;
    box-shadow: none;
}

/* Auth page inputs: the dark theme sets --primary-bg-color to black which
   looks wrong on the coloured background. Use a subtle translucent white. */
.auth-layout .input-holder input {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff;
}

.auth-layout .input-holder input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* Focus: swap the shared white outline for the club secondary colour and
   keep the translucent fill (app.css resets it to inherit on focus). */
.auth-layout .input-holder input:focus,
.auth-layout .input-holder input:active {
    outline: 2px solid var(--wl-secondary-color, #ffffff) !important;
    background-color: rgba(255, 255, 255, 0.16) !important;
}

/* Password-reveal addon: match the translucent input treatment instead of
   the default solid white block, sharing the input's 8px rounding. */
.auth-layout .input-holder .input-group-text {
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-left: none;
    border-radius: 0 8px 8px 0;
    color: #ffffff;
    cursor: pointer;
}

/* Keep the input flush with the addon after the reveal toggles the field
   from type=password (which app.css rounds) to type=text. */
.auth-layout .input-holder .input-group input {
    border-radius: 8px 0 0 8px;
}

/* "Remember me" switch: recolour the Fanbase green active state to the club
   secondary colour so the auth pages stay in palette. */
.auth-layout .form-check-input:checked {
    background-color: var(--wl-secondary-color, #ffffff) !important;
    border-color: var(--wl-secondary-color, #ffffff) !important;
}

/* Logo, heading and actions sit together at the foot of the screen with the
   club colour filling everything above them. margin-top: auto does the
   anchoring; at desktop widths the shared layout centres the block instead. */
.wl-landing {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: auto;
    padding-bottom: env(safe-area-inset-bottom);
}

/* The design insets the logo and heading 24px while the CTAs sit at 16px; the
   page padding above covers the 16px, so this block adds the remaining 8px. */
.wl-landing-logo,
.wl-landing-heading {
    padding-inline: 8px;
}

.wl-landing-logo {
    display: flex;
    padding-top: 16px;
}

.wl-landing-logo img {
    width: 183px;
    height: 92px;
    object-fit: contain;
    object-position: left center;
}

.wl-landing-heading {
    margin-bottom: 16px;
}

.wl-landing-heading h1 {
    line-height: 32px;
    margin-bottom: 0;
}

.wl-landing-heading p {
    margin-bottom: 0;
}

/* Club links bottom-sheet modal */
.club-links-modal {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
    overflow-y: auto;
    background-color: #ffffff;
}

.club-links-modal__handle {
    display: flex;
    justify-content: center;
    padding: 4px 0 8px;
    color: var(--cl-grey-5, #9e9e9e);
}

.club-links-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.club-links-modal__header h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.club-links-modal__close {
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
}

.club-links-modal__links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.club-links-modal__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px;
    border-radius: 8px;
    background-color: var(--cl-grey-1, #f5f5f5);
    cursor: pointer;
}

.club-links-modal__link-label {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 16px;
    font-size: 16px;
}

.club-links-modal__link-label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.club-sponsors-section {
    padding: 16px;
    border-radius: 8px;
    background-color: var(--cl-grey-2, #eeeeee);
    text-align: center;
}

.club-sponsors-section--modal {
    margin-top: 24px;
}

.club-sponsors-section--home {
    margin-bottom: 16px;
}

.club-sponsors-section__heading {
    display: block;
    margin-bottom: 16px;
    color: var(--cl-grey-7, #616161);
    font-size: 14px;
}

.club-sponsors-section__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px 24px;
}

.club-sponsors-section__logo {
    max-width: 96px;
    max-height: 40px;
    object-fit: contain;
}

@media (min-width: 769px) {
    .club-links-modal {
        border-radius: 16px;
        margin: 0 auto;
    }

    .club-links-modal__handle {
        display: none;
    }
}