/* Edge-to-edge app shell: backgrounds reach the screen edge; content stays in
   the safe area. Insets remain CSS variables so landscape cutouts are covered. */
:root {
  --tpc-safe-top: env(safe-area-inset-top, 0px);
  --tpc-safe-right: env(safe-area-inset-right, 0px);
  --tpc-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tpc-safe-left: env(safe-area-inset-left, 0px);
  --tpc-chrome-color: #001e8e;
  --fan-safe-bottom: var(--tpc-safe-bottom);
}
html[data-tpc-shell="portal"] { --tpc-chrome-color: #00267f; }
html[data-tpc-theme="dark"] { --tpc-chrome-color: #071426; }
html[data-tpc-shell] { min-height: 100%; background-color: var(--tpc-chrome-color); }
body:not([data-page="print"]) {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding-left: var(--tpc-safe-left);
  padding-right: var(--tpc-safe-right);
  padding-bottom: var(--tpc-safe-bottom);
}
/* Hidden horizontal overflow creates an extra scroll container and prevents
   sticky headers from staying below the status bar. Clip without that trap;
   loader/dialog overflow locks keep their more specific existing rules. */
@supports (overflow: clip) {
  html[data-tpc-shell], html[data-tpc-shell] body { overflow-x: clip; }
}

/* A solid, full-width pinned edge also lets Safari sample the actual shell
   colour when it chooses its own toolbar tint. No transparent corner gaps. */
html[data-tpc-shell="public"] #mainNav.pmc-nav {
  top: 0;
  margin-left: calc(0px - var(--tpc-safe-left));
  margin-right: calc(0px - var(--tpc-safe-right));
  padding: calc(.45rem + var(--tpc-safe-top))
    calc(.65rem + var(--tpc-safe-right)) .45rem
    calc(.65rem + var(--tpc-safe-left)) !important;
  border-radius: 0;
  background: var(--tpc-chrome-color) !important;
  filter: none !important;
  box-shadow: 0 1px 0 #f1c30b42 !important;
}
html[data-tpc-shell="public"] #mainNav .pmc-nav-shell {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
}
html[data-tpc-shell="public"] #mainNav #mobileMenu {
  max-height: calc(100dvh - var(--tpc-safe-top) - var(--tpc-safe-bottom) - 7rem);
  overflow-y: auto;
}
html[data-tpc-shell="public"] body:is([data-page="privacy"], [data-page="offline"], [data-page="not-found"]) {
  padding-top: calc(1rem + var(--tpc-safe-top));
}

/* Backend and manager pages have a separate shell, but the same safe edges. */
html[data-tpc-shell="portal"] body { padding-top: var(--tpc-safe-top); }
html[data-tpc-shell="portal"]::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: var(--tpc-safe-top);
  background-color: var(--tpc-chrome-color);
  pointer-events: none;
  z-index: 90;
}
html[data-tpc-shell="portal"] :is(#loginView, .manager-auth-shell, .manager-app-shell) {
  min-height: calc(100svh - var(--tpc-safe-top) - var(--tpc-safe-bottom));
}
html[data-tpc-shell="portal"] #adminView > main > header {
  top: var(--tpc-safe-top);
}
#adminSidebar { max-height: calc(100dvh - 2rem - var(--tpc-safe-top) - var(--tpc-safe-bottom)); }
.manager-sidebar { top: var(--tpc-safe-top); }
@media (min-width: 901px) {
  .manager-sidebar { height: calc(100dvh - var(--tpc-safe-top) - var(--tpc-safe-bottom)); }
}

/* Dialog backdrops still fill the display; only their scrollable cards are
   inset. dvh follows expanding browser toolbars and the on-screen keyboard. */
:is(#formModal, .manager-modal, .tpc-player-modal, .tpc-gallery-lightbox, .tpc-player-picker-pop) {
  box-sizing: border-box;
  padding: calc(1rem + var(--tpc-safe-top)) calc(1rem + var(--tpc-safe-right))
    calc(1rem + var(--tpc-safe-bottom)) calc(1rem + var(--tpc-safe-left));
}
:is(#formModalContent, .manager-modal-content, .tpc-player-modal-card, .tpc-gallery-dialog),
.tpc-player-picker-pop > div,
#tpcPublicPlayerModal .tpc-player-modal-card.v31 {
  box-sizing: border-box;
  max-height: calc(100vh - 2rem - var(--tpc-safe-top) - var(--tpc-safe-bottom));
  max-height: calc(100dvh - 2rem - var(--tpc-safe-top) - var(--tpc-safe-bottom));
  max-width: 100%;
  overflow-y: auto;
}
:is(.tpc-loading-screen.tpc-loading-v133, .tpc-portal-install-overlay) {
  padding: max(1.25rem, var(--tpc-safe-top)) max(1.25rem, var(--tpc-safe-right))
    max(1.25rem, var(--tpc-safe-bottom)) max(1.25rem, var(--tpc-safe-left));
}
:is(#toast, .manager-toast) {
  right: calc(1rem + var(--tpc-safe-right));
  bottom: calc(1rem + var(--tpc-safe-bottom));
  max-width: calc(100% - 2rem - var(--tpc-safe-left) - var(--tpc-safe-right));
}
:is(.tpc-update-banner, .tpc-matchday-offline-banner) {
  left: calc(1rem + var(--tpc-safe-left));
  right: calc(1rem + var(--tpc-safe-right));
  bottom: calc(1rem + var(--tpc-safe-bottom));
}

@media (max-width: 900px) {
  #adminSidebar {
    top: var(--tpc-safe-top);
    left: var(--tpc-safe-left);
    bottom: var(--tpc-safe-bottom);
    height: auto;
    max-height: calc(100dvh - var(--tpc-safe-top) - var(--tpc-safe-bottom));
  }
  #adminView > main > header {
    margin: 0;
    border-radius: 0;
    border: 0 !important;
    background: var(--tpc-chrome-color) !important;
    color: #fff;
  }
  #adminView > main > header :is(#adminPageTitle, #adminPageSubtitle, .text-gray-500) { color: #fff !important; }
  .manager-topbar {
    background: var(--tpc-chrome-color);
    color: #fff;
  }
  .manager-topbar :is(h1, p) { color: #fff !important; }
}
@media (max-width: 820px) {
  html[data-tpc-shell="public"] #fanBottomNav.fan-bottom-nav {
    box-sizing: border-box;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: calc(var(--fan-bottom-nav-height, 4.35rem) + var(--tpc-safe-bottom));
    padding: .34rem calc(.45rem + var(--tpc-safe-right))
      calc(.34rem + var(--tpc-safe-bottom)) calc(.45rem + var(--tpc-safe-left));
    border: 0;
    border-top: 1px solid #ffffff26;
    border-radius: 0;
    background: var(--tpc-chrome-color) !important;
    backdrop-filter: none;
    box-shadow: 0 -8px 24px #00145f20;
  }
  body.fan-has-bottom-nav {
    padding-bottom: calc(var(--fan-bottom-nav-height, 4.35rem) + var(--tpc-safe-bottom) + .75rem);
  }
  body.fan-has-bottom-nav :is(.tpc-update-banner, .tpc-matchday-offline-banner, #toast) {
    bottom: calc(var(--fan-bottom-nav-height, 4.35rem) + var(--tpc-safe-bottom) + 1rem);
  }
}
@media print {
  html[data-tpc-shell], body { min-height: 0; background: #fff !important; }
  body:not([data-page="print"]) { padding: 0 !important; }
  html[data-tpc-shell="portal"]::before { display: none; }
  :is(#mainNav, #fanBottomNav) { display: none !important; }
}