/* ===== Admin gate =====
       Hidden until the admin password unlocks the session:
       Event Setup, Submissions, the external sheet links under More,
       the CSV import/export tools, settings, and the footer sign-out lock.
       Analytics and Rewind are public. */
    body:not(.isAdmin) #sidebarSportsQuestionsBtn,
    body:not(.isAdmin) #sidebarSportsSubmissionsBtn,
    body:not(.isAdmin) #sidebarDataUploadBtn,
    body:not(.isAdmin) .moreSideNavLink,
    body:not(.isAdmin) .headerSlot,
    body:not(.isAdmin) #exportCurrentPngBtn,
    body:not(.isAdmin) #openSettingsBtn,
    body:not(.isAdmin) .questionPageImportExportRow,
    body:not(.isAdmin) #adminLoginBtn {
      display: none !important;
    }

    /* Once logged in, the header lock disappears and settings takes its place. */
    body.isAdmin #headerAdminBtn {
      display: none !important;
    }

    .adminHeaderLockIcon {
      width: 20px;
      height: 20px;
    }

    .sideNavFooter {
      gap: 6px;
    }

    body.sidebarCollapsed .sideNavFooter {
      flex-direction: column;
      align-items: center;
    }

    .adminGateBtn svg {
      width: 16px;
      height: 16px;
    }

    .adminGateBtn.adminActive {
      color: rgb(254, 161, 1);
    }

    .adminLoginOverlay {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(5, 8, 14, .72);
      z-index: 220;
      padding: 16px;
    }

    .adminLoginOverlay.open {
      display: flex;
    }

    .adminLoginCard {
      width: min(360px, 100%);
      background: var(--sidePanelBg);
      border: 1px solid rgba(203, 215, 255, .08);
      border-radius: 12px;
      padding: 22px;
      box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
    }

    .adminLoginTitleRow {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }

    .adminLoginTitle {
      font-family: "Geogrotesque Wide", sans-serif !important;
      font-weight: 800 !important;
      font-style: italic !important;
      text-transform: uppercase;
      font-size: 18px;
      letter-spacing: -0.02em;
      color: #fff;
    }

    .adminLoginCloseBtn {
      border: 0;
      background: transparent;
      color: #B2B6C4;
      cursor: pointer;
      font-size: 18px;
      line-height: 1;
      padding: 4px;
    }

    .adminLoginCloseBtn:hover {
      color: #fff;
    }

    .adminLoginHint {
      font-size: 12px;
      color: #B2B6C4;
      margin: 0 0 14px;
      line-height: 1.5;
    }

    .adminPasswordInput {
      width: 100%;
      box-sizing: border-box;
      height: 40px;
      border-radius: 9px;
      border: 1px solid rgba(203, 215, 255, .14);
      background: #11141c;
      color: #fff;
      padding: 0 12px;
      font-size: 14px;
      outline: none;
    }

    .adminPasswordInput:focus {
      border-color: rgb(254, 161, 1);
    }

    .adminLoginError {
      min-height: 16px;
      font-size: 12px;
      color: #ff6464;
      margin: 8px 0 4px;
    }

    .adminLoginSubmitBtn {
      width: 100%;
      height: 40px;
      border: 0;
      border-radius: 9px;
      cursor: pointer;
      background: rgb(254, 161, 1);
      color: #1a1405;
      font-weight: 800;
      font-family: "Geogrotesque Wide", sans-serif !important;
      text-transform: uppercase;
      font-size: 14px;
      letter-spacing: .02em;
    }

    .adminLoginSubmitBtn:hover {
      filter: brightness(1.07);
    }

    /* ===== Fluid boards (all screen sizes) =====
       Grid items default to min-width:auto, which lets wide boards blow
       their 1fr track past the available space (e.g. when the chat panel
       is open). Let them shrink, then scroll the board itself sideways
       inside its capture wrapper instead of the whole page. */
    .qPageGrid>* {
      min-width: 0;
    }

    .exportCapture {
      max-width: 100%;
      overflow-x: auto;
    }

    .exportCapture>* {
      width: max-content;
      min-width: 100%;
    }

    /* ===== Mobile layout ===== */
    .mobileNavToggleBtn {
      display: none;
    }

    .mobileNavBackdrop {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      top: var(--headerHeight);
      background: rgba(5, 8, 14, .6);
      z-index: 55;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease;
    }

    body.mobileNavOpen .mobileNavBackdrop {
      opacity: 1;
      pointer-events: auto;
    }

    @media (max-width: 980px) {
      /* The right sidebar is hidden at this width, so its open button does nothing. */
      #openRightSidebarBtn,
      body.rightSidebarClosed #openRightSidebarBtn {
        display: none;
      }
    }

    @media (max-width: 760px) {

      /* Release the desktop "fixed table width" pin so page containers
         shrink to the phone viewport; the site's own ≤900px/≤620px rules
         then reflow the grids into single columns. */
      :root {
        --tableAreaFixedWidth: 100%;
      }

      /* The decorative fixed gutter strips are sized for the desktop
         sidebar positions and paint a stray line on phone screens. */
      body::before,
      body::after {
        display: none;
      }

      .mobileNavToggleBtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: #B2B6C4;
        cursor: pointer;
      }

      .mobileNavToggleBtn:hover {
        color: #fff;
        background: #252935;
      }

      .mobileNavToggleBtn svg {
        width: 22px;
        height: 22px;
      }

      .siteHeader,
      .siteHeaderInner {
        box-sizing: border-box;
      }

      .siteHeaderInner {
        padding: 0 8px;
        gap: 6px;
      }

      /* Desktop-only decorative side panel; juts off-screen on phones. */
      .leaderboardUtcDatePanel {
        display: none !important;
      }

      .brand {
        margin-left: 0;
      }

      .headerSlot,
      .headerPngBtn {
        display: none !important;
      }

      .leftSidePanel {
        width: var(--leftSidePanelWidth) !important;
        transform: translateX(-110%);
        transition: transform .22s ease, width .18s ease;
        z-index: 60;
        box-shadow: 14px 0 44px rgba(0, 0, 0, .55);
      }

      body.mobileNavOpen .leftSidePanel {
        transform: translateX(0);
      }

      #sidebarToggleBtn {
        display: none !important;
      }

      .contentArea,
      body.sidebarCollapsed .contentArea,
      body.rightSidebarClosed .contentArea,
      body.sidebarCollapsed.rightSidebarClosed .contentArea {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
      }

      .globalBottomAreaInner,
      body.sidebarCollapsed .globalBottomAreaInner,
      body.rightSidebarClosed .globalBottomAreaInner,
      body.sidebarCollapsed.rightSidebarClosed .globalBottomAreaInner {
        width: calc(100% - 24px);
        margin-left: 12px;
        margin-right: 12px;
      }
    }

/* ===== World Cup hosted data table ===== */
.worldCupDataEmpty {
  color: #B2B6C4;
  font-size: 14px;
  padding: 24px 6px;
}

.worldCupDataTableWrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 8px;
}

.worldCupDataTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.worldCupDataTable th {
  text-align: left;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .02em;
  color: #686D7B;
  font-weight: 600;
  background: #cbd7ff08;
  padding: 12px 16px;
  white-space: nowrap;
}

.worldCupDataTable td {
  color: #E3E6EF;
  padding: 11px 16px;
  border-top: 1px solid rgba(203, 215, 255, .06);
  white-space: nowrap;
}

.worldCupDataTable tbody tr:hover {
  background: #cbd7ff05;
}

/* ===== Totals page ===== */
.totalsToolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 14px;
}

.totalsSearchInput {
  max-width: 260px;
}

.totalsMeta {
  color: #686D7B;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 600;
}

.totalsTable .totalsRankCell {
  color: #686D7B;
  width: 1%;
}

/* ===== Data Upload page ===== */
.dataUploadShell {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 560px;
  padding-bottom: 24px;
}

.dataUploadPanel {
  background: #cbd7ff08;
  border: 1px solid rgba(203, 215, 255, .08);
  border-radius: 12px;
  padding: 20px;
}

.dataUploadPanelTitle {
  font-family: "Geogrotesque Wide", sans-serif !important;
  font-weight: 800 !important;
  font-style: italic !important;
  text-transform: uppercase;
  font-size: 16px;
  color: #fff;
  margin-bottom: 8px;
}

.dataUploadHint {
  font-size: 12px;
  color: #B2B6C4;
  line-height: 1.5;
  margin: 0 0 14px;
}

.dataUploadAuthForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dataUploadSignedIn {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: #B2B6C4;
  font-size: 13px;
  margin-bottom: 14px;
}

.dataUploadSignedIn strong {
  color: #fff;
}

.dataUploadFieldRow {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.dataUploadLabel {
  font-size: 12px;
  color: #B2B6C4;
  line-height: 1.4;
}

.dataUploadFileInput {
  color: #B2B6C4;
  font-size: 13px;
}

.dataUploadPreview {
  font-size: 13px;
  color: #B2B6C4;
  line-height: 1.6;
  margin-bottom: 12px;
}

.dataUploadPreview strong {
  color: #fff;
}

.dataUploadStatus {
  min-height: 18px;
  font-size: 13px;
  color: #7ddf8a;
  margin-top: 10px;
}

.dataUploadStatus.dataUploadStatusError {
  color: #ff6464;
}

/* Hidden until the Supabase project is configured in js/supabase-data.js */
body.supabaseUnconfigured #sidebarTotalsBtn,
body.supabaseUnconfigured #sidebarDataUploadBtn {
  display: none !important;
}

.dataUploadRelinkBtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dataUploadRelinkBtn:hover {
  color: rgb(254, 161, 1);
}

.dataUploadDeleteBtn {
  width: 100%;
  height: 38px;
  margin-top: 10px;
  border: 1px solid rgba(255, 100, 100, .45);
  border-radius: 9px;
  cursor: pointer;
  background: transparent;
  color: #ff6464;
  font-weight: 800;
  font-family: "Geogrotesque Wide", sans-serif !important;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .02em;
  transition: background .12s ease, color .12s ease;
}

.dataUploadDeleteBtn:hover:not(:disabled),
.dataUploadDeleteBtn[data-confirming="true"] {
  background: rgba(255, 100, 100, .12);
  color: #ff8a8a;
}

.dataUploadDeleteBtn:disabled {
  opacity: .5;
  cursor: not-allowed;
}