/* ============================================================
   Baseline — App Shell (Football-Manager structure, SaaS polish)
   Persistent left sidebar (grouped nav) + game-context top bar +
   scrolling content column. Light theme, built on the semantic
   token aliases. Loaded after app.css so it owns the chrome.
   ============================================================ */

:root {
  --fm-sidebar-w: 240px;
  --fm-topbar-h: 58px;
  --fm-app-bg: var(--gray-50);
}

/* App background sits a step below the white panels for depth. */
body { background: var(--fm-app-bg); }

/* ---------------------------------------------------------- Shell grid */
/* Single column: top-bar nav is primary, the sidebar is an off-canvas drawer
   (hamburger) at every width so content runs full-width — the SaaS layout. */
.fm-shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

/* Off-canvas toggle (CSS-only). */
.fm-navtoggle { position: absolute; opacity: 0; pointer-events: none; }
.fm-scrim { display: none; }

/* ---------------------------------------------------------- Sidebar (drawer) */
.fm-sidebar {
  grid-column: 1; position: fixed; left: 0; top: 0; z-index: 60;
  width: var(--fm-sidebar-w); height: 100vh; overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--dur-base, 180ms) var(--ease-out, ease);
  box-shadow: var(--shadow-lg, 0 8px 30px rgba(0,0,0,0.18));
  background: var(--surface-card);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  padding: 14px 12px 24px;
}
.fm-navtoggle:checked ~ .fm-sidebar { transform: none; }
.fm-navtoggle:checked ~ .fm-scrim {
  display: block; position: fixed; inset: 0; z-index: 50;
  background: rgba(15, 20, 25, 0.4);
}

.fm-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 14px; margin-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.fm-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.fm-brand-title {
  font-family: var(--font-display); font-weight: 800; font-size: 17px;
  letter-spacing: -0.01em; color: var(--text-primary);
}
.fm-brand-sub {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--brand-strong); margin-top: 3px;
}

.fm-nav { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.fm-navgroup { display: flex; flex-direction: column; gap: 1px; }
.fm-navgroup-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-faint);
  padding: 2px 10px 6px;
}
.fm-navitem {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--text-secondary);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.fm-navitem:hover { background: var(--surface-subtle); color: var(--text-primary); }
.fm-navitem.active {
  background: var(--green-50); color: var(--brand-strong);
  box-shadow: inset 2px 0 0 var(--brand);
}
.fm-navicon {
  flex: none; width: 20px; text-align: center; font-size: 14px; line-height: 1;
  filter: grayscale(0.15);
}
.fm-navlabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------- Main column */
.fm-main { grid-column: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---------------------------------------------------------- Top dropdown nav */
.fm-topbrand {
  flex: none; font-family: var(--font-display); font-weight: 800; font-size: 15px;
  letter-spacing: -0.01em; color: var(--text-primary); text-decoration: none;
  padding-right: 14px; margin-right: 6px; border-right: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.fm-topnav { display: flex; align-items: stretch; height: 100%; gap: 0; }
.fm-tn-group { position: relative; display: flex; align-items: center; }
.fm-tn-btn {
  background: none; border: none; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--text-secondary); padding: 0 12px; height: 100%; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.fm-tn-caret { font-size: 9px; opacity: 0.7; }
.fm-tn-group:hover .fm-tn-btn, .fm-tn-btn.active { color: var(--text-primary); }
.fm-tn-btn.active { box-shadow: inset 0 -2px 0 var(--brand); }
.fm-tn-menu {
  position: absolute; top: calc(100% - 6px); left: 0; min-width: 210px;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: 9px; box-shadow: var(--shadow-lg, 0 8px 30px rgba(0,0,0,0.16));
  padding: 6px; display: none; flex-direction: column; gap: 1px; z-index: 80;
}
.fm-tn-group:hover .fm-tn-menu, .fm-tn-group:focus-within .fm-tn-menu { display: flex; }
.fm-tn-item {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 6px;
  font-size: 13px; font-weight: 600; color: var(--text-secondary); white-space: nowrap;
  text-decoration: none;
}
.fm-tn-item:hover { background: var(--surface-subtle); color: var(--text-primary); }
.fm-tn-item.active { color: var(--brand-strong); background: var(--green-50); }
.fm-tn-ic { flex: none; width: 18px; text-align: center; }

/* ---------------------------------------------------------- Top bar (game state) */
.fm-topbar {
  position: sticky; top: 0; z-index: 20;
  height: var(--fm-topbar-h); flex: none;
  display: flex; align-items: center; gap: 0;
  padding: 0 18px;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
}
.fm-hamburger {
  display: none; flex: none; cursor: pointer;
  width: 34px; height: 34px; margin-right: 6px;
  align-items: center; justify-content: center;
  border: 1px solid var(--border-default); border-radius: 7px;
  font-size: 16px; color: var(--text-secondary);
}

/* Game-context cells */
.fm-gc { display: flex; align-items: center; gap: 9px; padding: 0 16px; }
.fm-gc-sep { border-left: 1px solid var(--border-subtle); }
.fm-gc-stack { display: flex; flex-direction: column; line-height: 1.15; }
.fm-gc-k {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-muted);
}
.fm-gc-v {
  font-size: 14px; font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; gap: 6px;
}
.fm-gc-sub { font-weight: 500; color: var(--text-muted); }
.fm-gc-rec {
  font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700;
  color: var(--brand-strong); background: var(--green-50);
  border-radius: var(--radius-pill); padding: 1px 8px;
}

.fm-topbar-right {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  padding-left: 16px;
}
.fm-uniform { display: flex; }
.fm-advance {
  height: 34px; padding: 0 15px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; border-radius: 7px;
  color: var(--brand-contrast); background: var(--brand);
  border: 1px solid var(--brand);
  transition: background var(--dur-fast);
}
.fm-advance:hover { background: var(--brand-strong); }
.fm-newleague {
  display: inline-flex; align-items: center; height: 34px; padding: 0 12px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap; border-radius: 7px;
  color: var(--text-secondary); border: 1px solid var(--border-default);
  text-decoration: none; transition: color var(--dur-fast), border-color var(--dur-fast);
}
.fm-newleague:hover { color: var(--brand-strong); border-color: var(--border-strong); }

/* ---------------------------------------------------------- Content */
.fm-content { flex: 1; min-width: 0; }

/* ---------------------------------------------------------- Responsive */
/* Narrow screens: hide the dropdown bar and fall back to the hamburger drawer. */
@media (max-width: 820px) {
  .fm-topnav, .fm-topbrand { display: none; }
  .fm-hamburger { display: inline-flex; }
  .fm-gc-next { display: none; }
}

@media (max-width: 620px) {
  .fm-gc-team .fm-gc-k { display: none; }
  .fm-gc-sep { display: none; }
  .fm-uniform { display: none; }          /* pages carry their own division switch */
  .fm-advance { padding: 0 10px; gap: 0; }
  .fm-advance-label { display: none; }     /* icon-only CTA on phones */
}