/* ─────────────────────────────────────────────────────────────────────────
   Football Intelligence — Layout
   Faza 2, redesign v2.

   Shell: header (sticky) + main (flex-grow) + footer.
   Sidebar (desktop) jest placeholderem — pełna implementacja w Fazie 3
   (leagues nav data-driven z /api/matches).

   Mobile (≤768px): nav schowany pod burger button, slide-down panel.
   Desktop: nav inline w headerze.

   Wymaga design-system.css + components.css załadowanych pierwszych.
   ───────────────────────────────────────────────────────────────────────── */

/* C7 — Font-size bump (Karol "troszkę większe").
   18px base (was 17px), 20px @ ≥1280px (was 18px).
   Match-row 6-column grid tested: token sizes are rem-based so they scale
   proportionally. Sticky header height is px-fixed (55px/60px) — unaffected.
   design-system.css sets font-size: var(--text-body) on html,body — the
   html override here wins because it is a more specific *element* rule
   loading after design-system.css. Do NOT change body or :root here. */
html { font-size: 18px; }
@media (min-width: 1280px) { html { font-size: 20px; } }


/* === Shell ================================================================ */

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


/* === Header =============================================================== */

.app-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 55px;
  padding: 0 var(--space-2);
  background: rgba(6, 10, 15, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--divider);
}

@media (min-width: 768px) {
  .app-header { height: 60px; padding: 0 var(--space-3); }
}

/* 5.6.3.3: header brand layout — [SVG logo mark 24/28px] + UPPERCASE wordmark.
   Logo z static/img/logo-fi.svg (vector, scales clean). Wordmark Inter 500
   z letter-spacing 0.02em (Karol pacing rules: NIE weight 700+, NIE
   letter-spacing > 0.05em). Mobile <380px: wordmark ukryty, tylko mark
   widoczny (click area full brand link nadal działa). */
.app-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-primary);
  flex-shrink: 0;
}
.app-header__brand:hover { color: var(--text-primary); }
.app-header__brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.app-header__brand-mark {
  width: 24px; height: 24px;
  flex-shrink: 0;
  display: block;
}
@media (min-width: 768px) {
  .app-header__brand-mark { width: 28px; height: 28px; }
  .app-header__brand { gap: 12px; }
}

.app-header__brand-name {
  /* F5.18 (Karol: "na mobilnym brakuje napisu FOOTBALL INTELLIGENCE"): the
     wordmark was hidden below 380px (his phone is 360px). Show it at every
     width; a small base size keeps it clear of the user menu on narrow phones. */
  display: inline-block;
  font-size: 0.78rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  line-height: 1;
}
@media (min-width: 768px) {
  .app-header__brand-name { font-size: 1rem; }
}

.app-header__nav {
  display: none;
  flex: 1;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-2);
}
@media (min-width: 768px) {
  .app-header__nav { display: flex; }
}

.app-header__nav a {
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  text-decoration: none;
  padding: 0.4rem 0;
  position: relative;
  transition: color var(--duration-fast) var(--easing-out);
}
.app-header__nav a:hover { color: var(--text-primary); }
.app-header__nav a[aria-current="page"] {
  color: var(--accent);
}
.app-header__nav a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -16px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

.app-header__actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

/* Sign-up cutoff fix (Karol QA, iPhone): the guest top-bar packed Plans + Log in
   + Sign up next to the wordmark, clipping the primary Sign-up button off the
   right edge on narrow phones. Plans and Log in are both reachable from the
   bottom dock (and the hamburger nav), so drop those two ghost CTAs from the top
   bar below 768px and keep the Sign-up button fully visible. */
@media (max-width: 767px) {
  .app-header__actions .header-guest-cta { display: none; }
}

/* F5.8.2.1: user dropdown menu z Logout. Karol QA "brak opcji wylogowania".
   Dropdown z native button trigger + absolute-positioned menu. Click-outside
   + ESC close handled JS-side w app.js renderHeader. */
.user-menu {
  position: relative;
  display: inline-block;
}
.user-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.user-menu__name {
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
/* Karol QA rev3: user wants the nickname visible (not just the plan badge).
   Truncate with ellipsis on mobile so a long nick fits between the brand
   wordmark and the plan badge. Drop the plan badge below 480px to free
   space for the name. */
@media (max-width: 767px) {
  .user-menu__name {
    max-width: 7ch;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.78rem;
  }
}
@media (max-width: 480px) {
  /* Very narrow phones — hide the plan badge instead so the name reads.
     Plan info is still one tap away in the dropdown. */
  .user-menu__trigger .user-menu__plan-badge { display: none; }
}
.user-menu__plan-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.55rem;
  font-weight: var(--weight-extrabold);
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--surface-3);
  color: var(--text-tertiary);
}
.user-menu__plan-badge--pro,
.user-menu__plan-badge--elite,
.user-menu__plan-badge--unlimited {
  background: var(--accent-soft);
  color: var(--accent);
}
.user-menu__caret {
  font-size: 0.7rem;
  opacity: 0.7;
  margin-left: 2px;
}
.user-menu__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  /* Mobile guard: dropdown anchored to trigger's right edge — if the
     trigger sits near the viewport edge, an unconstrained width would
     bleed off-screen. Cap to viewport-minus-padding. */
  max-width: calc(100vw - 24px);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  padding: 4px;
  z-index: var(--z-dropdown, 100);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.user-menu__dropdown[hidden] { display: none; }
.user-menu__item {
  display: block;
  padding: 8px 12px;
  font-size: 0.875rem;
  color: var(--text-primary);
  text-decoration: none;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-out);
}
.user-menu__item:hover,
.user-menu__item:focus-visible {
  background: var(--surface-2);
  outline: none;
}
.user-menu__separator {
  border: none;
  border-top: 1px solid var(--divider);
  margin: 4px 0;
}
.user-menu__item--logout {
  color: var(--system-red);
  width: 100%;
}
.user-menu__item--logout:hover,
.user-menu__item--logout:focus-visible {
  background: rgba(255, 47, 84, 0.08);
  color: var(--system-red);
}

/* F5.8.3.2b: DEMO balance row inside user dropdown (visible <769px gdy
   .header-balance schowane). Pierwszy item w dropdown'ie. */
.user-menu__balance-row {
  display: none;
  padding: 8px 12px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.user-menu__balance-label {
  font-size: 0.6rem;
  font-weight: var(--weight-extrabold);
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
.user-menu__balance-value {
  font-size: 0.95rem;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 768px) {
  .user-menu__balance-row { display: flex; }
}

/* F5.8.3.2b: sticky DEMO balance card w headerze (desktop ≥769px). Single-
   accent dot pattern jak tier badges — outline + soft tinted background gdy
   user "in profit" (balance > default 100). Refresh button = inline pill
   secondary action; cooldown state w tooltip via title attr. */
.header-balance {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.header-balance--healthy {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.header-balance__label {
  font-size: 0.6rem;
  font-weight: var(--weight-extrabold);
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
.header-balance--healthy .header-balance__label { color: var(--accent); }
.header-balance__value {
  font-size: 0.9rem;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.header-balance__refresh {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  width: 22px;
  height: 22px;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color var(--duration-fast) var(--easing-out),
              color var(--duration-fast) var(--easing-out),
              border-color var(--duration-fast) var(--easing-out);
}
.header-balance__refresh:hover,
.header-balance__refresh:focus-visible {
  background: var(--surface-3);
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}
@media (min-width: 769px) {
  .header-balance { display: inline-flex; }
}

/* Mobile burger button — hidden on mobile ≤767px because the bottom dock nav
   already provides all primary routes (Matches / Analysis / DEMO or Plans /
   Profile or Login). Showing both creates a redundant second nav.
   Plans remains reachable: dock slot 4 (guests) + user-menu dropdown (authed).
   Burger stays visible on desktop-adjacent widths where the dock is hidden. */
.app-header__menu-btn {
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: none; /* hidden by default — shown only on mid-range widths below */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.app-header__menu-btn span {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 1px;
  transition: transform var(--duration-fast) var(--easing-out),
              opacity var(--duration-fast) var(--easing-out);
}
.app-header__menu-btn[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.app-header__menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.app-header__menu-btn[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (min-width: 768px) {
  .app-header__menu-btn { display: none; }
}


/* === Mobile menu (slide-down panel) ====================================== */

@media (max-width: 767px) {
  body.mobile-menu-open .app-header__nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: fixed;
    top: 55px;
    left: 0; right: 0;
    background: var(--surface-1);
    border-bottom: 1px solid var(--divider);
    padding: var(--space-1) var(--space-2);
    margin-left: 0;
    z-index: var(--z-sticky);
    animation: mobile-menu-slide var(--duration-base) var(--easing-out);
  }
  body.mobile-menu-open .app-header__nav a {
    padding: 0.85rem var(--space-1);
    border-bottom: 1px solid var(--divider);
    width: 100%;
  }
  body.mobile-menu-open .app-header__nav a:last-child { border-bottom: none; }
  body.mobile-menu-open .app-header__nav a[aria-current="page"]::after { display: none; }
  body.mobile-menu-open .app-header__nav a[aria-current="page"] {
    background: var(--accent-soft);
    border-radius: var(--radius-sm);
    padding-left: var(--space-1);
  }
}

@keyframes mobile-menu-slide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* === Main content area ==================================================== */

.app-main {
  flex: 1;
  width: 100%;
  /* B2: widened from 1280px → 1440px to reduce empty side rails on large
     screens. The extra 160px gives the matches right-rail breathing room
     and stops the "empty canvas" feel on 1920px monitors. */
  max-width: 1440px;
  margin: 0 auto;
  /* --space-2 = 16px: single symmetric side inset for mobile. Page-level
     components (fi-analysis, etc.) must use 0 horizontal padding so they
     don't double-indent and cause asymmetry or right-side clipping. */
  padding: var(--space-3) var(--space-2);
}

@media (max-width: 390px) {
  /* 12px symmetric insets at very narrow phones (360-390px) maximises
     usable width without needing to clip. */
  .app-main { padding-left: 12px; padding-right: 12px; }
}

@media (min-width: 768px) {
  .app-main { padding: var(--space-4) var(--space-3); }
}

/* Faza 3+ extends with sidebar grid layout. Placeholder for now: */
.app-main--with-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 1024px) {
  .app-main--with-sidebar { grid-template-columns: 220px 1fr; }
}


/* === Page placeholder (Faza 2 only) ====================================== */

.page-placeholder {
  max-width: 720px;
  padding: var(--space-3);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.page-placeholder header { margin-bottom: var(--space-2); }
.page-placeholder header > div:first-child { margin-bottom: 4px; }
.page-placeholder code {
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8em;
}


/* === Footer =============================================================== */

.app-footer {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-2) var(--space-4);
  border-top: 1px solid var(--divider);
  background: var(--surface-1);
}

/* Karol 2026-06-02 evening: news strip condensed into the global footer,
   rendered on every route. Above the legal-footer block, separated by a
   subtle divider. Hydrated by mountNewsWidget() in app.js renderFooter. */
.app-footer__newsstrip {
  /* B2: match the widened app-main canvas */
  max-width: 1440px;
  margin: 0 auto var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--divider);
}
.app-footer__newsstrip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.app-footer__newsstrip-title {
  margin: 0;
  font-size: var(--text-h3, 1rem);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.app-footer__newsstrip-link {
  font-size: var(--text-small);
  color: var(--accent);
  text-decoration: none;
}
.app-footer__newsstrip-link:hover { text-decoration: underline; }

.app-footer__inner {
  /* B2: match the widened app-main canvas */
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}
@media (min-width: 768px) {
  .app-footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
}

.app-footer__disclaimer {
  margin: 0;
  max-width: 60ch;
  line-height: var(--leading-relaxed);
}
.app-footer__disclaimer strong {
  color: var(--text-secondary);
  font-weight: var(--weight-bold);
  margin-right: 4px;
}

.app-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  font-size: var(--text-small);
}
.app-footer__links a {
  color: var(--text-tertiary);
  transition: color var(--duration-fast) var(--easing-out);
}
.app-footer__links a:hover { color: var(--accent); }

.app-footer__copyright { margin: 0; }


/* === Toast container (anchor for showToast) ============================== */

.app-toasts {
  position: fixed;
  bottom: var(--space-2);
  right: var(--space-2);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-1);
  max-width: calc(100vw - 2 * var(--space-2));
  pointer-events: none;
}
.app-toasts > .toast {
  pointer-events: all;
  animation: toast-slide-in var(--duration-base) var(--easing-out);
}

/* Mobile (≤767px): the bottom dock nav is 72px tall and would otherwise sit
   on top of toasts. Raise the toast container so messages remain visible. */
@media (max-width: 767px) {
  .app-toasts {
    bottom: calc(72px + var(--space-2));
  }
}

@keyframes toast-slide-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}


/* F5.16-tweak v7: route loading skeleton — pokazywany instant gdy renderRoute()
   przygotowuje się do delegacji do mountera. Karol QA "podczas wchodzenia
   między zakładkami widzę placeholderowe znaczniki banerów". */
.route-loading {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--space-4) 0;
}
.route-loading__bar {
  height: 16px;
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: route-loading-shimmer 1.4s infinite;
}
.route-loading__bar--medium { width: 60%; }
.route-loading__bar--short  { width: 35%; }
@keyframes route-loading-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .route-loading__bar { animation: none; }
}