/* ============================================================================
 * shell.css — the app shell around every page, loaded after components.css:
 * the icon rail, the section sidebar, the phone bottom bar and its sheets, the
 * nav icons, and the team-branding layers (--pool-* on a branded page).
 * ========================================================================== */
@layer app {
.app-shell {
  --shell-rail-w: 76px;
  --shell-drawer-w: 264px;
  --shell-handle-w: 10px;
  --shell-drawer-col: var(--shell-drawer-w);
  --shell-shadow-rail: 10px 0 32px rgba(0, 0, 0, 0.28), 4px 0 14px rgba(0, 0, 0, 0.16);
  --shell-shadow-drawer: 14px 0 40px rgba(0, 0, 0, 0.22), 6px 0 18px rgba(0, 0, 0, 0.12);
  display: grid;
  grid-template-columns: var(--shell-rail-w) var(--shell-drawer-col) 1fr;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  transition: grid-template-columns 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-shell.sidebar-collapsed {
  --shell-drawer-col: var(--shell-handle-w);
}

/* ── Icon Rail (76px) — sits above drawer when it slides closed ─────────── */
.shell-rail {
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 0; gap: 6px;
  background: var(--bg);
  border-right: 1px solid var(--panel-border);
  position: relative;
  z-index: calc(var(--z-shell) + 2);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: var(--shell-shadow-rail);
}

.shell-rail__logo {
  width: 44px; height: 44px; border-radius: var(--radius-lg);
  display: grid; place-items: center;
  overflow: hidden; margin-bottom: 6px; flex-shrink: 0;
  background: var(--surface);
}

.shell-rail__logo img { width: 100%; height: 100%; object-fit: contain; }

.shell-rail__logo-link {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}

.shell-rail__icon {
  width: 44px; height: 44px; border-radius: var(--radius-lg);
  display: grid; place-items: center;
  color: var(--text-muted); cursor: pointer;
  transition: background .15s, color .15s;
  flex-shrink: 0; border: 0; background: none;
  text-decoration: none;
}

.shell-rail__icon:hover { background: var(--bg-translucent-md); color: var(--text-muted); }

.shell-rail__icon.is-active { background: var(--accent) !important; color: var(--on-accent); }

.shell-rail__spacer { flex: 1; }

.shell-rail__toggle {
  width: 38px; height: 38px; border-radius: var(--radius-lg);
  border: 1px solid var(--panel-border);
  background: none; color: var(--text-muted); cursor: pointer;
  display: grid; place-items: center; flex-shrink: 0;
}

.shell-rail__toggle:hover { background: var(--bg-translucent-md); color: var(--text-muted); }

/* ── Sidebar drawer slot — resizes main; panel slides behind rail ─────── */
.shell-drawer-slot {
  position: relative;
  min-width: 0;
  overflow: hidden;
  z-index: var(--z-shell);
  box-shadow: var(--shell-shadow-drawer);
  transition: box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.shell-side {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--shell-drawer-w);
  background: var(--surface);
  border-right: none;
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  transform: translateX(0);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 8px 0 12px -8px rgba(0, 0, 0, 0.18);
}

.app-shell.sidebar-collapsed .shell-side {
  transform: translateX(calc(-1 * var(--shell-drawer-w)));
  box-shadow: none;
  pointer-events: none;
}

/* Backdrop — mobile overlay only (hidden on desktop) */
.shell-drawer-backdrop { display: none; }

/* Pull tab — full-height strip; always theme-default (never team-branded) */
.shell-drawer-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: calc(var(--z-shell) + 1);
  width: var(--shell-handle-w);
  padding: 0;
  border: none;
  border-left: 1px solid var(--panel-border);
  border-radius: 0;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.shell-drawer-handle:hover {
  background: var(--bg-translucent-hover);
  color: var(--text-primary);
  border-left-color: var(--panel-border-hover);
}

.shell-drawer-handle__grip {
  width: 2px;
  height: 20px;
  border-radius: var(--radius-sm);
  background: currentColor;
  opacity: 0.65;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

:root.theme-light .shell-drawer-handle {
  background: var(--surface);
  border-left-color: rgba(0, 0, 0, 0.14);
  color: var(--text-muted);
}

:root.theme-light .shell-drawer-handle:hover {
  background: var(--surface-head);
  border-left-color: rgba(0, 0, 0, 0.22);
  color: var(--text-primary);
}

:root.theme-dark .shell-drawer-handle {
  background: var(--surface);
  border-left-color: rgba(255, 255, 255, 0.14);
  color: var(--text-muted);
}

:root.theme-dark .shell-drawer-handle:hover {
  background: var(--surface-head);
  border-left-color: rgba(255, 255, 255, 0.22);
  color: var(--text-primary);
}

.shell-side::-webkit-scrollbar { width: 6px; }

.shell-side::-webkit-scrollbar-thumb { background: var(--bg-translucent-lg); border-radius: var(--radius-md); }

.shell-side__head { padding: 20px 16px 6px; flex-shrink: 0; }

.shell-side__titlerow { display: flex; align-items: center; gap: 6px; }

.shell-side__title { font-weight: 800; font-size: var(--fs-md); color: var(--text-primary); flex: 1; }

.shell-side__title--gm {
  display: flex; align-items: center; gap: 8px; min-width: 0;
}

.shell-side__title--gm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.shell-side__title-link {
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-width: 0;
  transition: opacity .12s;
}

.shell-side__title-link:hover { opacity: 0.82; }

.shell-side__gm-logo { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }

.shell-side__sub { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; margin-top: 4px; padding: 0 2px; }

.shell-side__collapse {
  width: 28px; height: 28px; border-radius: var(--radius-md);
  border: 1px solid var(--panel-border); background: none; color: var(--text-muted);
  cursor: pointer; display: grid; place-items: center; flex-shrink: 0;
}

.shell-side__collapse:hover { background: var(--bg-translucent-md); color: var(--text-muted); }

.shell-grp { padding: 0 6px; margin-top: 12px; }

.shell-grp__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px; cursor: pointer; color: var(--text-muted);
  font-weight: 700; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-caps);
  user-select: none;
}

.shell-grp__items { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }

/* A collapsible group (<details>): the head is the toggle, with a turning chevron. */
details.shell-grp > summary { list-style: none; }

details.shell-grp > summary::-webkit-details-marker { display: none; }

details.shell-grp > summary::after { content: '▸'; font-size: var(--fs-sm); transition: transform .15s; }

details.shell-grp[open] > summary::after { transform: rotate(90deg); }

.shell-item {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--radius-md);
  cursor: pointer; color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600;
  transition: background .12s, color .12s; text-decoration: none;
}

.shell-item:hover { background: var(--bg-translucent-md); color: var(--text-primary); }

.shell-item.is-active {
  background: var(--shell-active-bg, var(--bg-translucent-hover));
  color: var(--shell-active-text, var(--accent-blue));
  font-weight: 700;
  box-shadow: none;
}

.shell-item.is-active .item-count { color: var(--accent-blue); }

.shell-item .tag {
  /* Icon chip beside the item's label; 11px text overflows the 24px box. */
  width: 24px; height: 24px; border-radius: var(--radius-md);
  display: grid; place-items: center;
  font-size: var(--fs-micro); font-weight: 800; color: var(--on-chip); flex-shrink: 0;
}

.shell-item .item-count { margin-left: auto; font-size: var(--fs-micro); font-weight: 700; color: var(--text-muted); }

.shell-flat { border-top: 1px solid var(--panel-border); margin: 12px 6px 8px; padding-top: 6px; }

.shell-rail__lang { flex-shrink: 0; width: 100%; padding: 0 12px; }

.shell-rail__lang-toggle {
  width: 100%; max-width: 56px; margin: 0 auto; display: block;
  font-size: var(--fs-xs); font-weight: 800; padding: 6px 2px; border-radius: var(--radius-md);
  border: 1px solid var(--panel-border); background: var(--bg-translucent-md);
  color: var(--text-muted); cursor: pointer; text-align: center;
  font-family: inherit; letter-spacing: var(--tracking-wide);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.shell-rail__lang-toggle:hover {
  background: var(--bg-translucent-hover);
  color: var(--text-primary);
  border-color: var(--accent-blue);
}

/* Labeled logout / login — visible text, not icon-only */
.shell-rail__logout {
  width: calc(100% - 16px);
  max-width: 60px;
  margin: 4px 8px 2px;
  padding: 8px 4px 6px;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--danger) 55%, transparent);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  color: var(--danger);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  text-decoration: none;
  font-family: inherit;
  transition: background .15s, border-color .15s, color .15s;
}

.shell-rail__logout:hover {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border-color: var(--danger);
}

.shell-rail__logout--login {
  border-color: color-mix(in srgb, var(--success) 55%, transparent);
  background: color-mix(in srgb, var(--success) 8%, transparent);
  color: var(--success);
}

.shell-rail__logout--login:hover {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  border-color: var(--success);
}

.shell-rail__logout-label {
  font-size: var(--fs-xs); /* 11px floor */
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  letter-spacing: var(--tracking-wide);
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

/* League selector inside sidebar */
.shell-league-select { width: 100%; margin: 0 0 6px; padding: 8px 12px;
  background: var(--bg-translucent-sm); border: 1px solid var(--panel-border);
  border-radius: var(--radius-md); color: var(--text-primary); font-family: inherit; font-size: var(--fs-sm);
  cursor: pointer; }

/* ── Main content area ──────────────────────────────────────────────────── */
.app-main {
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  padding: 24px 32px 24px;
  box-shadow: inset 12px 0 28px -14px rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 0;
}

.app-main::-webkit-scrollbar { width: 8px; }

.app-main::-webkit-scrollbar-thumb { background: var(--bg-translucent-lg); border-radius: var(--radius-md); }

/* Season state badge (shown in sidebar sub-header) */
.shell-season-badge {
  display: inline-block; font-size: var(--fs-micro); font-weight: 900; letter-spacing: var(--tracking-wide);
  padding: 2px 8px; border-radius: var(--radius-sm); margin-left: 6px; vertical-align: middle;
  text-decoration: none;
}

/* Season state: a solid status fill; --on-status keeps the text readable in both themes. */
.season-state-badge { --state: var(--text-muted); background: var(--state); color: var(--on-status); }

.season-state-badge[data-state="PRE_SEASON"] { --state: var(--success); }

.season-state-badge[data-state="SEASON"] { --state: var(--danger); }

.season-state-badge[data-state="PLAYOFF"] { --state: var(--warning); }

.season-state-badge[data-state="OFFSEASON"] { --state: var(--accent-blue); }

.season-state-badge[data-state="DRAFT"] { --state: var(--ltir); }

/* Light demo shell — white cards on soft gray canvas */
:root.theme-light .app-shell {
  background: var(--surface);
  --shell-shadow-rail: 6px 0 24px rgba(0, 0, 0, 0.12), 2px 0 10px rgba(0, 0, 0, 0.06);
  --shell-shadow-drawer: 10px 0 32px rgba(0, 0, 0, 0.1), 4px 0 14px rgba(0, 0, 0, 0.05);
}

:root.theme-light .app-main {
  box-shadow: inset 10px 0 24px -12px rgba(0, 0, 0, 0.06);
}

:root.theme-dark .app-shell {
  --shell-shadow-rail: 12px 0 36px rgba(0, 0, 0, 0.45), 5px 0 16px rgba(0, 0, 0, 0.25);
  --shell-shadow-drawer: 16px 0 48px rgba(0, 0, 0, 0.32), 8px 0 22px rgba(0, 0, 0, 0.18);
}

:root.theme-dark .app-main {
  box-shadow: inset 14px 0 32px -14px rgba(0, 0, 0, 0.28);
}

:root.theme-light .shell-rail {
  background: var(--surface);
  border-right-color: var(--panel-border);
}

:root.theme-light .shell-side {
  background: var(--surface);
  box-shadow: inset 6px 0 10px -6px rgba(0, 0, 0, 0.06);
}

:root.theme-dark .shell-side {
  box-shadow: inset 8px 0 14px -8px rgba(0, 0, 0, 0.28);
}

:root.theme-light .shell-item.is-active {
  --shell-active-bg: #eaf1ff;
  --shell-active-text: #1d4ed8;
}

:root.theme-light .shell-rail__icon.is-active {
  background: var(--accent-blue) !important;
  color: var(--on-accent);
}

/* ── My Pool NHL team branding (GM dashboard) ── */
.app-shell.is-pool-branded #shell-side {
  background: var(--pool-sidebar-bg) !important;
  color: var(--pool-text-on-sidebar);
}

/* Handle stays theme-default so it contrasts with branded main background */
.app-shell.is-pool-branded #shell-drawer-handle {
  background: var(--surface) !important;
  border-left-color: var(--panel-border);
  color: var(--text-muted);
}

:root.theme-light .app-shell.is-pool-branded #shell-drawer-handle {
  background: var(--surface) !important;
  border-left-color: rgba(0, 0, 0, 0.14) !important;
  color: var(--text-muted);
}

:root.theme-dark .app-shell.is-pool-branded #shell-drawer-handle {
  background: var(--surface) !important;
  border-left-color: rgba(255, 255, 255, 0.14) !important;
  color: var(--text-muted);
}

.app-shell.is-pool-branded #shell-side .shell-side__title,
.app-shell.is-pool-branded #shell-side .shell-side__sub,
.app-shell.is-pool-branded #shell-side .shell-grp__head {
  color: var(--pool-text-on-sidebar);
}

.app-shell.is-pool-branded #shell-side .shell-item {
  color: var(--pool-text-on-sidebar);
}

/* Hover outlines and the active item inverts, so the text keeps the sidebar's contrast
   (darkening an orange or gold sidebar under dark text pushed it under 4.5:1). */
.app-shell.is-pool-branded #shell-side .shell-item:hover {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pool-text-on-sidebar) 45%, transparent);
}

.app-shell.is-pool-branded #shell-side .shell-item.is-active {
  background: var(--pool-text-on-sidebar) !important;
  color: var(--pool-sidebar-bg);
}

.app-shell.is-pool-branded #shell-side .item-count {
  color: var(--pool-text-on-sidebar);
}

.app-shell.is-pool-branded #shell-side .shell-item.is-active .item-count {
  color: var(--pool-sidebar-bg);
}

.app-shell.is-pool-branded #shell-side .shell-flat {
  border-top-color: rgba(0, 0, 0, 0.1);
}

/* On the team colour the theme's text and semantic tokens become ones that read on it
   (computed per team in src/utils/teamPoolBranding.js), so every label, link and
   value placed straight on the page follows without its own rule. */
.app-main.is-pool-branded {
  position: relative;
  background: var(--pool-bg) !important;
  color: var(--pool-text-on-bg);
  --text-primary: var(--pool-text-on-bg);
  --text-muted: var(--pool-muted-on-bg);
  --success: var(--pool-success-on-bg);
  --danger: var(--pool-danger-on-bg);
  --warning: var(--pool-warning-on-bg);
  --accent-blue: var(--pool-accent-on-bg);
}

/* Theme surfaces on a branded page (white or dark panels) get the theme's values back. */
.app-main.is-pool-branded :is(.pl-tier, .pl-capchip, .pl-board, .pl-rtable-wrap, .roster-section, .trade-card, .modal, .modal-overlay, .modal-content, .action-dropdown-menu, .sub-tab.active, #team-selector, #move-sheet, .season-state-badge, .roster-lock-banner, .tonight-game, footer) {
  --text-primary: var(--theme-text-primary);
  --text-muted: var(--theme-text-muted);
  --success: var(--theme-success);
  --danger: var(--theme-danger);
  --warning: var(--theme-warning);
  --accent-blue: var(--theme-accent-blue);
  --bg: var(--theme-bg);
  --surface-head: var(--theme-surface-head);
}

.app-main.is-pool-branded::before {
  content: '';
  position: fixed;
  top: 5%;
  bottom: 5%;
  left: calc(var(--shell-rail-w) + var(--shell-drawer-col));
  right: 5%;
  background-image: var(--pool-logo-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* Content sits above the team logo backdrop; modals keep their own fixed overlay layer. */
.app-main.is-pool-branded > :not(.modal, .modal-overlay) {
  position: relative;
  z-index: 1;
}

.app-shell.is-pool-branded .pl-sechead h2 {
  color: var(--pool-text-on-bg);
}

/* Cap chip always uses default site panel colors — never team-branded */
.app-shell.is-pool-branded .pl-capchip,
:root.theme-light .pl-capchip {
  background: var(--surface) !important;
  border-color: var(--panel-border) !important;
  color: var(--text-muted) !important;
}

.app-shell.is-pool-branded .pl-capchip b,
:root.theme-light .pl-capchip b {
  color: var(--text-primary);
}

.app-shell.is-pool-branded .pl-capchip .sp {
  color: var(--success);
}

.app-shell.is-pool-branded .pl-tier {
  background: var(--surface) !important;
  border-color: var(--panel-border) !important;
  box-shadow: var(--shadow-card);
}

.app-shell.is-pool-branded .pl-tier__head {
  background: var(--bg) !important;
  color: var(--text-primary);
  border-bottom-color: var(--panel-border) !important;
}

:root.theme-light .app-shell.is-pool-branded .pl-tier__head {
  background: var(--surface) !important;
}

.app-shell.is-pool-branded .pl-tier__label {
  color: var(--text-primary);
}

.app-shell.is-pool-branded .pl-board .compact-table thead th,
.app-shell.is-pool-branded .pl-rtable-wrap .compact-table thead th {
  background: var(--pool-table-head-bg) !important;
  color: var(--pool-text-on-bg) !important;
  border-bottom-color: rgba(0, 0, 0, 0.18);
}

.app-shell.is-pool-branded .pl-board .compact-table tbody td,
.app-shell.is-pool-branded .pl-rtable-wrap .compact-table tbody td {
  background: var(--surface) !important;
  color: var(--text-primary) !important;
  border-bottom-color: var(--panel-border) !important;
}

.app-shell.is-pool-branded .pl-board .compact-table tbody tr:hover td,
.app-shell.is-pool-branded .pl-rtable-wrap .compact-table tbody tr:hover td {
  background: var(--bg-translucent-md) !important;
}

.app-shell.is-pool-branded .pl-rtable-wrap .compact-table tbody tr:hover td.col-playing,
.app-shell.is-pool-branded .pl-rtable-wrap .compact-table tbody tr:hover td.col-name {
  background: linear-gradient(var(--bg-translucent-md), var(--bg-translucent-md)), var(--surface) !important;
}

/* Cards take the team's table colour (modals and menus are overlays and keep the theme).
   Inside a card the theme's text tokens follow the card, so every label, value and
   button reads on it whatever the theme; secondary text keeps 5:1 on every team. */
.app-shell.is-pool-branded .glass:not(.modal-content):not(.action-dropdown-menu),
.app-shell.is-pool-branded .roster-card,
.app-shell.is-pool-branded .stat-card,
.app-shell.is-pool-branded .control-panel {
  background: var(--pool-table-bg) !important;
  color: var(--pool-text-on-table);
  border-color: rgba(0, 0, 0, 0.1) !important;
  --text-primary: var(--pool-text-on-table);
  --text-muted: var(--pool-muted-on-table);
  --success: var(--pool-success-on-table);
  --danger: var(--pool-danger-on-table);
  --warning: var(--pool-warning-on-table);
  --accent-blue: var(--pool-accent-on-table);
  /* Header strips and fields inside the card: tints of the card, not the theme's page colour. */
  --bg: color-mix(in srgb, var(--pool-text-on-table) 7%, var(--pool-table-bg));
  --surface-head: var(--pool-table-bg);
}

/* Form fields in a branded card: a tint of the card, not the theme's page colour. */
.app-shell.is-pool-branded :is(.glass, .roster-card, .stat-card, .control-panel) :is(input, select, textarea) {
  background: color-mix(in srgb, var(--pool-text-on-table) 7%, var(--pool-table-bg)) !important;
  color: var(--pool-text-on-table);
  border-color: color-mix(in srgb, var(--pool-text-on-table) 30%, transparent) !important;
}

/* The admin's team switcher sits on the team colour: theme panel colours, like the cap chip. */
.app-main.is-pool-branded #team-selector {
  background: var(--surface) !important;
  color: var(--text-primary);
  border-color: var(--panel-border) !important;
}

.app-shell.is-pool-branded .sticky-col-header {
  background: var(--pool-table-head-bg) !important;
  border-bottom-color: rgba(0, 0, 0, 0.18);
}

.app-shell.is-pool-branded .sticky-col-header .compact-table thead th {
  background: var(--pool-table-head-bg) !important;
  color: var(--pool-text-on-bg) !important;
  border-bottom-color: rgba(0, 0, 0, 0.18) !important;
}

/* Pool-branded main: panel surfaces keep theme text (fix white cards on team-colored bg) */
.app-main.is-pool-branded .trade-card,
.app-main.is-pool-branded .trade-card .asset-item,
.app-main.is-pool-branded .trade-card .trade-card-header,
.app-main.is-pool-branded .trade-card .trade-actions,
.app-main.is-pool-branded .empty-state,
.app-main.is-pool-branded .loading-state,
.app-main.is-pool-branded .modal-content {
  color: var(--text-primary);
}

.app-main.is-pool-branded .trade-card .asset-label,
.app-main.is-pool-branded .trade-card .empty-hint,
.app-main.is-pool-branded .empty-hint {
  color: var(--text-muted);
}

/* Page subtitles/labels on team-colored background (override inline cool-grey) */
.app-main.is-pool-branded .page-header p,
.app-main.is-pool-branded .page-header .header-badge,
.app-main.is-pool-branded .container > header > div > p {
  color: var(--pool-text-on-bg) !important;
}

/* Inbox folder buttons sit on the team colour: outlined, not darkened (a dark overlay
   under dark text on an orange or gold team pushed it under 4.5:1). */
.app-main.is-pool-branded .inbox-nav-btn:not(.active) {
  color: var(--pool-text-on-bg);
  background: transparent !important;
  border-color: color-mix(in srgb, var(--pool-text-on-bg) 45%, transparent) !important;
}

.app-main.is-pool-branded .inbox-nav-btn:not(.active):hover {
  background: transparent !important;
  border-color: var(--pool-text-on-bg) !important;
  color: var(--pool-text-on-bg) !important;
}

.app-main.is-pool-branded .inbox-nav-btn:not(.active) .badge {
  background: rgba(255, 255, 255, 0.22) !important;
  color: var(--pool-text-on-bg);
}

/* Sub-tabs on team-colored background; a modal's tabs sit on the theme surface and keep the theme look. */
.app-main.is-pool-branded .sub-tab:not(.active, .modal-content *) {
  color: var(--pool-text-on-bg);
}

.app-main.is-pool-branded .sub-tab:not(.active, .modal-content *):hover {
  color: var(--pool-text-on-bg) !important;
  background: transparent !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pool-text-on-bg) 45%, transparent);
}

.app-main.is-pool-branded .tab-group:not(.modal-content *) {
  background: transparent !important;
  border-color: color-mix(in srgb, var(--pool-text-on-bg) 35%, transparent) !important;
}

.app-main.is-pool-branded .sub-tab.active:not(.modal-content *) {
  color: var(--text-primary);
  background: var(--surface) !important;
}

/* Pool-branded: theme panels must not inherit team-bg text color */
.app-main.is-pool-branded .trade-card,
.app-main.is-pool-branded .empty-state,
.app-main.is-pool-branded .loading-state,
.app-main.is-pool-branded .modal-content,
.app-main.is-pool-branded .filter-bar,
.app-main.is-pool-branded .fin-tab-content {
  color: var(--text-primary);
}

.app-shell.is-pool-branded .roster-table-scroll .compact-table thead th {
  background: var(--pool-table-head-bg) !important;
  color: var(--pool-text-on-bg) !important;
  border-bottom-color: rgba(0, 0, 0, 0.18);
}

/* Pool-branded pages: headings/subtitles on team color use contrast-safe pool text */
.app-main.is-pool-branded .page-header h1,
.app-main.is-pool-branded .pl-sechead h2,
.app-main.is-pool-branded .team-info h1 {
  color: var(--pool-text-on-bg);
}

.app-main.is-pool-branded .page-header p,
.app-main.is-pool-branded .team-info p {
  color: var(--pool-text-on-bg) !important;
}

.app-main.is-pool-branded .page-header .header-badge {
  color: var(--pool-text-on-bg) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  background: rgba(0, 0, 0, 0.15) !important;
}

/* ============================================================================
 * Phones (≤768px)
 * ========================================================================== */
/* ── Shell mobile overrides (≤768px) ────────────────────────────────────────
 * Desktop icon rail hides; bottom tab bar + "More" sheet replace it.
 * The section sidebar becomes a bottom sheet, opened by tapping the tab of
 * the section you are in (it carries a chevron).
 * ─────────────────────────────────────────────────────────────────────────── */
/* ── Mobile bottom navigation (hidden on desktop) ─────────────────────────── */
.shell-mobile-nav {
  display: none;
}

.shell-mobile-more { display: none; }

.shell-mobile-hint { display: none; }

@media (max-width: 768px) {
  /* Full-width content: hide desktop icon rail, use bottom tab bar instead. */
  .shell-rail { display: none; }

  .app-shell,
  .app-shell.sidebar-collapsed {
    grid-template-columns: 1fr;
    height: 100vh;
    height: 100dvh;
  }

  .app-main {
    overflow-y: auto;
    /* 5vw each side → tables and page content span 90% of the screen. */
    padding-left: 5vw;
    padding-right: 5vw;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  /* Bottom tab bar */
  .shell-mobile-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: calc(var(--z-shell) + 3);
    background: var(--surface);
    border-top: 1px solid var(--panel-border);
    padding: 8px 4px calc(12px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around;
    gap: 2px;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  }

  .shell-mobile-nav__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 2px;
    border: 0;
    background: none;
    color: var(--text-muted);
    /* Scales down on narrow phones so "Mon équipe" and "Échanges" fit five tabs at 320px. */
    font-size: var(--fs-micro);
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-family: inherit;
  }

  .shell-mobile-nav__item svg,
  .shell-mobile-nav__item .shell-icon,
  .shell-mobile-nav__item .shell-nav-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }

  .shell-mobile-nav__item span:not(.shell-nav-icon):not(.shell-icon) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .shell-mobile-nav__item.is-active,
  #shell-mobile-more-btn[aria-expanded="true"] {
    color: var(--accent-blue);
    background: var(--bg-translucent-md);
  }

  /* The tab you are in opens its section menu: a small chevron beside its icon,
     outside the label so the label keeps the tab's full width. */
  .shell-mobile-nav__item[data-mobile-section-tab] {
    position: relative;
  }

  .shell-mobile-nav__item .shell-mobile-nav__chevron {
    position: absolute;
    top: 8px;
    left: calc(50% + 18px);
    width: 12px !important;
    height: 12px !important;
    transition: transform 0.2s;
  }

  .shell-mobile-nav__item[aria-expanded="true"] .shell-mobile-nav__chevron {
    transform: rotate(180deg);
  }

  /* One-time tip above the tab that opens the section menu (inverted colours, both themes). */
  .shell-mobile-hint {
    display: flex;
    position: fixed;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    width: 240px;
    z-index: calc(var(--z-shell) + 3);
    gap: 4px;
    align-items: center;
    padding: 8px 4px 8px 12px;
    border-radius: var(--radius-lg);
    background: var(--text-primary);
    color: var(--bg);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.35;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  }

  .shell-mobile-hint[hidden] { display: none; }

  .shell-mobile-hint::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: calc(var(--hint-arrow-x, 50%) - 6px);
    border: 6px solid transparent;
    border-top-color: var(--text-primary);
    border-bottom: 0;
  }

  .shell-mobile-hint__close {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin: -8px 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: var(--fs-lg);
    cursor: pointer;
  }

  /* "More" sheet */
  .shell-mobile-more {
    display: block;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-overlay) + 2);
    pointer-events: none;
  }

  .shell-mobile-more[hidden] { display: none; }

  .shell-mobile-more:not([hidden]) { pointer-events: auto; }

  .shell-mobile-more__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
  }

  .shell-mobile-more__sheet {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: var(--surface);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border-top: 1px solid var(--panel-border);
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    max-height: 72vh;
    overflow-y: auto;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
  }

  .shell-mobile-more__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    font-size: var(--fs-base);
  }

  .shell-mobile-more__close {
    width: 32px; height: 32px;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-md);
    background: none;
    color: var(--text-muted);
    font-size: var(--fs-lg);
    cursor: pointer;
  }

  .shell-mobile-more__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .shell-mobile-more__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--panel-border);
    background: var(--bg-translucent-sm);
    color: var(--text-primary);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    text-align: left;
  }

  .shell-mobile-more__link.is-active {
    border-color: var(--accent-blue);
    background: var(--bg-translucent-md);
  }

  .shell-mobile-more__icon {
    font-size: var(--fs-lg);
    line-height: 1;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  }

  .shell-mobile-more__link.is-active .shell-mobile-more__icon {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
  }

  .shell-mobile-more__link--btn {
    width: 100%;
    cursor: pointer;
    font-family: inherit;
  }

  .shell-mobile-more__logout {
    width: 100%;
    margin-top: 12px;
    padding: 16px 12px;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--danger) 55%, transparent);
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    color: var(--danger);
    font-weight: 800;
    font-size: var(--fs-base);
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .shell-mobile-more__logout:active {
    background: color-mix(in srgb, var(--danger) 16%, transparent);
  }

  /* Section menu — a bottom sheet that slides up from behind the tab bar.
     Stacking: backdrop (+1) < sheet (+2) < tab bar (+3), so the bar stays
     tappable and the sheet hides behind it when closed. */
  .app-shell {
    grid-template-columns: 1fr;
    transition: none !important;
  }

  .shell-drawer-slot {
    position: fixed;
    inset: auto 0 0 0;
    width: auto;
    z-index: calc(var(--z-shell) + 2);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    transform: translateY(0);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.25);
  }

  .app-shell.sidebar-collapsed .shell-drawer-slot {
    transform: translateY(100%);
    box-shadow: none !important;
  }

  .shell-side {
    position: relative;
    inset: auto;
    width: 100%;
    max-height: 75vh;
    max-height: 75dvh;
    overflow-y: auto;
    /* Clears the tab bar the sheet sits behind. */
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    box-shadow: none !important;
    transform: none !important;
    pointer-events: auto;
  }

  .shell-side .shell-item {
    min-height: 44px;
  }

  .shell-side .shell-side__collapse svg {
    transform: rotate(-90deg);
  }

  .shell-drawer-handle {
    display: none;
  }

  .shell-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-shell) + 1);
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.32s, visibility 0.32s;
  }

  .app-shell:not(.sidebar-collapsed) .shell-drawer-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* Compact stroke icons used in the rail / mobile nav (replaces Material Symbols CDN). */
.shell-icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  vertical-align: middle;
}

/* PNG masks for the four section tabs — tinted with currentColor. */
.shell-nav-icon {
  display: block;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--nav-icon) center / contain no-repeat;
  mask: var(--nav-icon) center / contain no-repeat;
}

.shell-mobile-more__icon.shell-icon {
  width: 1.35em;
  height: 1.35em;
}

.injury-icon.shell-icon {
  width: 1em;
  height: 1em;
  color: var(--danger);
  margin-right: 4px;
}

/* One-off sizes and colours that were inline styles. */
#toast-container {
  top: 20px;
  right: 20px;
  z-index: var(--z-toast);
  pointer-events: none;
}

.season-state-badge--rail {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

#notif-badge {
  top: -2px;
  right: -2px;
  border-radius: 50%;
  min-width: 16px;
  height: 16px;
}

#notif-panel {
  left: 80px;
  bottom: 60px;
  width: 320px;
  max-height: 420px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  z-index: var(--z-overlay);
}

  /* Notification panel rows; unread ones get a tint and an accent edge. */
  .notif-item {
    padding: 8px 12px;
    border-radius: var(--radius-md);
    border-left: 3px solid transparent;
    margin-bottom: 4px;
    font-size: var(--fs-sm);
    line-height: 1.35;
  }

  .notif-item--new {
    background: var(--bg-translucent-md);
    border-left-color: var(--accent);
  }
}