/* Shared sidebar (2026-08-21 nav-chrome design) — every PM/frontend page.
   Same black chrome and zero-radius rule as header.css. Icons: SVG only,
   never emoji, reused verbatim from index.html's original sidebar. */
#pmSidebar {
  flex: 0 0 210px;
  width: 210px;
  background: #111111;
  color: #cfcfcf;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transition: width .15s ease, flex-basis .15s ease;
}
#pmSidebar.pms-collapsed { flex: 0 0 52px; width: 52px; }

.pms-toggle {
  align-self: flex-end;
  background: none;
  border: none;
  color: #cfcfcf;
  cursor: pointer;
  padding: 8px 14px;
}
#pmSidebar.pms-collapsed .pms-toggle { align-self: center; padding: 10px 0; }
#pmSidebar.pms-collapsed .pms-toggle svg { transform: rotate(180deg); }

.pms-lbl {
  padding: 2px 14px 6px;
  font-size: 9.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #6f6f6f;
}
#pmSidebar.pms-collapsed .pms-lbl { display: none; }

.pms-link {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 9.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 9px 14px 9px 11px;
  box-sizing: border-box;
  border-left: 3px solid transparent;
  color: #cfcfcf;
  text-decoration: none;
}
.pms-link:hover { background: #1e1e1e; color: #fff; }
.pms-link.active { background: #222222; color: #fff; border-left-color: #FFCC00; }
.pms-link svg { flex: 0 0 auto; }
#pmSidebar.pms-collapsed .pms-link {
  justify-content: center;
  padding: 0;
  height: 36px;
  border-left-width: 3px;
}
#pmSidebar.pms-collapsed .pms-label { display: none; }

.pms-fill { flex: 1 1 auto; }

.pms-identity {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border-top: 1px solid #262626;
  box-sizing: border-box;
}
#pmSidebar.pms-collapsed .pms-identity { justify-content: center; padding: 12px 0; }
.pms-badge {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  background: #FFCC00;
  color: #111111;
  font: 900 11px 'Inter', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pms-email {
  font-size: 10.5px;
  color: #9a9a9a;
  font-family: 'Inter', sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#pmSidebar.pms-collapsed .pms-email { display: none; }

/* Saved Views / Team Load — portfolio page only (data-extra="portfolio").
   Class/id names match projects.js's existing renderSideNav() exactly. */
.sn-sec { margin-top: 14px; padding: 0 14px; }
#pmSidebar.pms-collapsed .sn-sec { display: none; }
/* Team Load is a Full-only widget (index.html's Review|Full switch, 2026-09-07):
   only the portfolio page ever stamps body.pm-review/pm-full, so this is a no-op
   on the other four pages, which never render data-mode="full" sections anyway. */
body.pm-review .sn-sec[data-mode="full"] { display: none; }
.sn-lbl-row { display: flex; align-items: center; justify-content: space-between; }
.sn-add-btn {
  width: 16px; height: 16px; border: 1px solid #444; background: none;
  color: #999; font-size: 11px; display: flex; align-items: center;
  justify-content: center; cursor: pointer; padding: 0;
}
.sn-view { display: flex; justify-content: space-between; font-size: 10.5px; color: #cfcfcf;
  padding: 4px 0; cursor: pointer; }
.sn-view.active { color: #FFCC00; }
.sn-view-name { overflow: hidden; text-overflow: ellipsis; }
.sn-tag { color: #666; }
.sn-count { color: #666; }
.sn-empty { font-size: 10.5px; color: #666; padding: 4px 0; }
.sn-load-row { display: flex; justify-content: space-between; font-size: 10px; color: #9a9a9a;
  padding: 2px 0; }
.sn-load-row.over { color: #FFCC00; }
.sn-lbl { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .14em; color: #7a7a7a; }
.sn-sec > .sn-lbl { margin-bottom: 8px; display: block; }
.sn-lbl-row .sn-lbl { margin-bottom: 0; }
.sn-load-row b { font-family: var(--mono, monospace); font-size: 13px; color: #fff; }
.sn-view:hover { background: #1c1c1c; }
.sn-tag { border: 1px solid #444; font-size: 9px; text-transform: uppercase; padding: 1px 4px; }
.sn-count { font-family: var(--mono, monospace); font-variant-numeric: tabular-nums; }
.sn-empty { font-style: italic; color: #7a7a7a; }

@media print { #pmSidebar { display: none; } }

/* Generic two-column layout for the four pages with no existing flex
   wrapper. index.html carries .pm-shell on its shell div (so the phone block
   below reaches it) but keeps its own .main-col column: .pm-main-col is a
   scroll box (overflow: auto) and .main-col deliberately is NOT — the
   portfolio's sticky filter bar and sticky table header scroll with the page.
   Do not add .pm-main-col there (spec 2026-09-07, Correction 1). */
.pm-shell { display: flex; flex: 1 1 auto; min-height: 0; }
.pm-main-col { flex: 1 1 auto; min-width: 0; overflow: auto; box-sizing: border-box; }

/* Phone strip (≤640px, spec 2026-09-07 Decision 1) — the sidebar becomes a
   44px icon strip under the header on every page. Shipped first on
   requests.html (2026-09-05) and moved here so it is written once. Plain
   blocks, not a column flexbox: as flex items the main column shrink-wrapped
   to its widest child on iPhone Safari. The collapse toggle is hidden (there
   is nothing to collapse into), so the shared localStorage state is never
   written from a phone. overflow-x: clip on the root keeps iOS from widening
   its layout viewport if anything below does overflow. This block is later
   in the file than the base rules, so equal specificity is enough. */
@media (max-width: 640px) {
  html { overflow-x: clip; }
  .pm-shell { display: block; }
  #pmSidebar, #pmSidebar.pms-collapsed {
    width: 100%; flex: 0 0 auto; flex-direction: row; align-items: center;
    min-height: 44px; padding: 0 6px; transition: none;
  }
  #pmSidebar .pms-toggle, #pmSidebar .pms-lbl { display: none; }
  #pmSidebar nav { display: flex; }
  #pmSidebar .pms-link, #pmSidebar.pms-collapsed .pms-link {
    height: 44px; min-width: 44px; padding: 0 10px; justify-content: center;
    border-left: 0; border-bottom: 3px solid transparent;
  }
  #pmSidebar .pms-link.active { border-bottom-color: #FFCC00; }
  #pmSidebar .pms-link svg { width: 18px; height: 18px; }
  #pmSidebar .pms-label, #pmSidebar.pms-collapsed .pms-label { display: none; }
  #pmSidebar .pms-identity, #pmSidebar.pms-collapsed .pms-identity {
    border-top: 0; padding: 0 8px; min-width: 0;
  }
  #pmSidebar .pms-email, #pmSidebar.pms-collapsed .pms-email { display: block; max-width: 40vw; }
  /* Saved Views / Team Load (portfolio only): hidden, exactly as the collapsed rail hides them. */
  .sn-sec { display: none; }
}