.app-shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-width: 0; min-height: 100vh; min-height: 100dvh; }
.sidebar { position: sticky; top: 0; z-index: 40; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 24px; overflow-x: hidden; overflow-y: auto; padding: 24px 18px; border-inline-end: 1px solid var(--line); background: var(--surface); }
.brand { display: flex; min-width: 0; align-items: center; gap: 12px; }
.brand-mark { display: grid; flex: 0 0 auto; place-items: center; width: 42px; aspect-ratio: 1; border-radius: 13px; color: #03251f; background: var(--accent); font-weight: 900; }
.brand-copy { display: grid; min-width: 0; gap: 3px; }
.brand-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-copy small { color: var(--muted); font-size: .72rem; line-height: 1.3; }
.app-nav { display: grid; min-width: 0; gap: 6px; }
.nav-item { min-height: var(--touch-target); border: 0; border-radius: 11px; padding: 11px 13px; color: var(--muted); background: transparent; text-align: start; }
.nav-item:hover, .nav-item[data-active='true'] { color: var(--text); background: var(--surface-2); }
.nav-item[data-active='true'] { box-shadow: inset 3px 0 var(--accent); }
[dir='rtl'] .nav-item[data-active='true'] { box-shadow: inset -3px 0 var(--accent); }
.sidebar-actions { display: grid; gap: 8px; margin-top: auto; }
.page-root { min-width: 0; padding: clamp(22px, 3vw, 36px) var(--content-gutter); }
.page { width: min(1500px, 100%); min-width: 0; margin-inline: auto; }
.page-header { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 18px 24px; margin-bottom: clamp(18px, 3vw, 28px); }
.page-header > * { min-width: 0; }
.page-header h1 { margin-bottom: 0; font-size: clamp(1.65rem, 2.8vw, 2.35rem); line-height: 1.15; }
.page-header p { max-width: 70ch; color: var(--muted); }

@media (max-width: 1100px) {
  .app-shell { display: block; }
  .sidebar { position: sticky; width: 100%; height: auto; min-height: 0; display: grid; grid-template-areas: 'brand nav actions'; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; overflow: visible; padding: 12px max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left)); border-inline-end: 0; border-block-end: 1px solid var(--line); box-shadow: 0 12px 28px rgba(0, 0, 0, .18); }
  .brand { grid-area: brand; }
  .app-nav { grid-area: nav; display: flex; gap: 4px; overflow-x: auto; overscroll-behavior-inline: contain; padding: 2px; scrollbar-width: thin; scroll-snap-type: inline proximity; }
  .nav-item { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
  .nav-item[data-active='true'], [dir='rtl'] .nav-item[data-active='true'] { box-shadow: inset 0 -3px var(--accent); }
  .sidebar-actions { grid-area: actions; display: flex; margin: 0; }
  .sidebar-actions .icon-button { white-space: nowrap; }
  .page-root { padding: clamp(18px, 3vw, 30px) var(--content-gutter); }
}

@media (max-width: 900px) {
  .brand-copy small { display: none; }
}

@media (max-width: 700px) {
  .sidebar { grid-template-areas: 'brand actions' 'nav nav'; grid-template-columns: minmax(0, 1fr) auto; gap: 9px 12px; padding-block: max(10px, env(safe-area-inset-top)) 9px; }
  .app-nav { margin-inline: -4px; }
  .sidebar-actions { gap: 6px; }
  .sidebar-actions .icon-button { min-height: 38px; padding: 7px 10px; font-size: .82rem; }
  .page-root { padding: 18px max(10px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .page-header { align-items: stretch; flex-direction: column; gap: 12px; }
  .page-header .page-actions, .page-header .roster-toolbar { width: 100%; }
}

@media (max-width: 420px) {
  .brand-mark { width: 36px; border-radius: 11px; }
  .brand-copy strong { font-size: .92rem; }
  .nav-item { min-height: 40px; padding: 8px 10px; font-size: .82rem; }
  .page-header h1 { font-size: 1.55rem; }
}

@media (max-height: 520px) and (min-width: 701px) and (max-width: 1100px) {
  .sidebar { position: static; }
}

/* v14 adaptive density system — applies to every page */
.nav-item { display: flex; align-items: center; gap: 10px; }
.nav-item__icon { display: grid; flex: 0 0 auto; place-items: center; width: 24px; height: 24px; font-size: 1rem; font-weight: 800; }
.nav-item__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
  .page-root { --content-gutter: 14px; }
  .page { max-width: 100%; }
  .page-header p, .brand-copy small { display: none; }
  .page-header { margin-bottom: 16px; }
}

@media (max-width: 520px) {
  .sidebar { position: fixed; inset-inline: 0; inset-block-end: 0; top: auto; z-index: 60; grid-template-areas: 'nav'; grid-template-columns: 1fr; padding: 7px max(8px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); border-block: 1px solid var(--line) 0; background: color-mix(in srgb, var(--bg) 94%, transparent); box-shadow: 0 -12px 30px rgba(0,0,0,.25); backdrop-filter: blur(18px); }
  .brand, .sidebar-actions { display: none; }
  .app-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; margin: 0; overflow: visible; }
  .nav-item { display: grid; justify-items: center; gap: 2px; min-height: 52px; padding: 5px 2px; border-radius: 12px; text-align: center; }
  .nav-item:nth-child(n+6) { display: none; }
  .nav-item__icon { width: 28px; height: 27px; font-size: 1.12rem; }
  .nav-item__label { max-width: 100%; font-size: .62rem; }
  .nav-item[data-active='true'], [dir='rtl'] .nav-item[data-active='true'] { box-shadow: none; color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
  .page-root { padding: 14px 10px calc(78px + env(safe-area-inset-bottom)); }
  .page-header h1 { font-size: 1.35rem; }
  .page-header .button:not(.button-primary), .page-actions .button:not(.button-primary) { padding-inline: 11px; }
}