/* The ERP sidebar, copied for Sourcing (owner, 25 Sep 2026: "keep copy of ERP sidebar in
   sourcing 100%").
   Values are taken from the ERP's AppShell.tsx and shell-theme.css, not approximated.

   WHY THIS IS A FILE AND NOT MORE INLINE CSS. Both cockpits already carried an
   "aligned to the ERP sidebar" block, and in both it was dead: it sat at the top of the inline
   <style>, and the original .sidebar/.nav/.nav-lbl/.sb-brand rules were re-declared further
   down at the same specificity, so the later copy won every property. The sidebars therefore
   rendered in the old navy, with the old sizes, while the file claimed alignment.
   Loading this AFTER the inline style ends that class of bug: source order is the whole point.
   One file also means the two cockpits cannot drift apart again, which is how they got here.

   Sourcing markup -> ERP equivalent:
     .sidebar      aside#qp-sidebar
     .sb-brand     the 52px logo/company header
     .nav-lbl.grp  the module group button (chevron, per-module colour when active)
     .navgrp       the group's children, behind their coloured left rail
     .nav          a child row
     .ico / .ic    the row icon (cockpit.html uses .ico, client-cockpit.html uses .ic) */

/* ---- shared cockpit chrome ------------------------------------------------------
   Not the sidebar, but it belongs here for the same reason the sidebar does: both
   cockpits need it identically, and a rule copied into two inline stylesheets is what
   produced the dead alignment block in the first place.

   The workspace heading (owner, 25 Sep 2026: "BUYER PLATFORM - all capital letter,
   large font"). Caps need the tracking opened up; the page default is -0.02em, which
   on uppercase reads as cramped rather than tight. */
.page-h h2.platform-h{
  font-size:clamp(26px,3.4vw,34px);
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  line-height:1.15;
}
@media (max-width:700px){ .page-h h2.platform-h{font-size:24px} }

/* The platform heading as a strip under the top bar (owner, 25 Sep 2026: "always visible when
   another module opens in the main content area"). .main is a fixed-height flex column whose
   panes scroll on their own, so flex:none keeps this in place over every module. The accent is
   each workspace's own top-bar colour - gold selling, blue buying. */
.platform-bar{
  flex:none;display:flex;align-items:center;
  padding:9px clamp(14px,3vw,26px);
  background:var(--surface,#fff);
  border-bottom:1px solid var(--line,#e0e7f1);
  border-left:4px solid var(--brand,#1f6fe6);
}
.platform-bar.sell{border-left-color:var(--gold,#9a7420)}
.platform-bar .platform-h{
  margin:0;color:var(--ink,#0d1830);
  font-size:clamp(22px,2.6vw,30px);font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;line-height:1.15;
}
@media (max-width:700px){
  .platform-bar{padding:7px 14px}
  .platform-bar .platform-h{font-size:18px}
}

/* The back bar over an embedded ERP screen: only "<- Back to ..." is a control (owner, 25 Sep
   2026). `.main` raises specificity above the pages' own .erpback rule, one of which loads after
   this file. */
.main .erpback{cursor:default}
.main .erpback .bk,.main .erpback .lb{cursor:pointer}

/* The company's logo, at the head of the top bar. Hidden until one is loaded, so a
   business without a logo gets the bar it had rather than an empty box. */
.tb-logo{
  height:30px;max-width:132px;object-fit:contain;flex:none;
  background:#fff;border-radius:7px;padding:3px;
  box-shadow:0 1px 2px rgba(13,24,48,.10);
}
.tb-logo[hidden]{display:none}
/* The counterparty picker moves off the edge to sit with the logo rather than against it. */
.topbar .switcher{margin-left:12px}
@media (max-width:1100px){ .tb-logo{height:26px;max-width:104px} }
@media (max-width:700px){ .tb-logo{height:22px;max-width:80px} .topbar .switcher{margin-left:6px} }

/* ---- surface ------------------------------------------------------------------- */
.sidebar{
  background:#07080f;
  border-right:1px solid #1a2540;
  color:#f1f5f9;
  font-family:'DM Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  padding:0;
  gap:0;
  box-shadow:2px 0 20px rgba(0,0,0,.5);
  scrollbar-width:thin;
  scrollbar-color:#1a2540 transparent;
}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:#1a2540;border-radius:8px}
.sidebar::-webkit-scrollbar-track{background:transparent}

/* ---- one Dashboard (owner, 25 Sep 2026) -------------------------------------
   The heading opens the dashboard, so the row that repeated its name is hidden and
   the word appears once. In the icon rail headings are not shown, so there the row
   is the way in and stays visible. The heading carries the current-page look when
   the dashboard is the page you are on. */
.nav.dash-row{display:none}
.layout.rail:not(.peek):not(.pin) .nav.dash-row{display:flex}
.nav-lbl.grp.dash-head:has(+ .navgrp .nav.dash-row.active){color:#c7d2fe;background:rgba(99,102,241,.15)}
:root[data-theme="light"] .nav-lbl.grp.dash-head:has(+ .navgrp .nav.dash-row.active){
  color:#ffffff;background:#101018;box-shadow:inset 3px 0 0 #38ce3c;
}

/* ---- brand header: 52px, name over a spaced caption ---------------------------- */
.sb-brand{
  height:52px;min-height:52px;
  display:flex;align-items:center;gap:8px;
  padding:0 10px;margin:0;
  border-bottom:1px solid #1a2540;
  flex:0 0 auto;overflow:hidden;
  color:#e2e8f0;font-weight:700;font-size:14px;letter-spacing:0;
}
.sb-brand .bm{
  width:28px;height:28px;border-radius:6px;flex:none;
  background:#0a1628;display:grid;place-items:center;
  color:#c7d2fe;font-weight:800;font-size:14px;
}
.sb-brand .logo-lockup{max-height:26px;width:auto}
/* The caption under the name. The ERP puts the platform and its shortcut here. */
.sb-brand .sb-sub{
  display:block;color:#6366f1;font-size:11px;font-weight:600;letter-spacing:.5px;
  text-transform:none;margin-top:1px;
}

/* ---- the New button: kept, but quietened to sit inside an ERP sidebar ---------- */
.sb-new{
  margin:8px 6px 4px;padding:7px 10px;
  background:rgba(99,102,241,.16);
  color:#c7d2fe;border:1px solid #1e2d4a;border-radius:7px;
  font-size:14px;font-weight:600;box-shadow:none;
  display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  transition:all .15s;
}
.sb-new:hover{background:rgba(99,102,241,.26);color:#fff}

/* ---- group header --------------------------------------------------------------
   The ERP's group button: sentence case, 12px, a chevron that turns. Sourcing had
   9.5px uppercase tracked-out labels, which is the single loudest difference. */
.nav-lbl{
  font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;
  color:#8a9bb0;padding:7px 10px;margin:0;
}
.nav-lbl.grp{
  display:flex;align-items:center;gap:9px;width:100%;
  border-radius:7px;margin-bottom:1px;
  background:transparent;border:0;cursor:pointer;text-align:left;
  transition:all .15s;
}
.nav-lbl.grp:hover,.nav-lbl.grp.peek{color:#c7d2fe;background:rgba(99,102,241,.10)}
.nav-lbl.grp .cv{margin-left:auto;font-size:11px;opacity:.9;transition:transform .2s}
.nav-lbl.grp.shut .cv{transform:rotate(-90deg)}
.nav-lbl.grp.shut.peek .cv{transform:rotate(0deg)}
.nav-lbl.grp .gdot{width:5px;height:5px;border-radius:50%;background:#6366f1;opacity:0;transition:.15s}
.nav-lbl.grp.shut .gdot.on{opacity:1}

/* ---- the group's children, behind a coloured rail ------------------------------ */
.navgrp{margin:0 0 4px 14px;border-left:2px solid #1e2d4a;padding-left:10px}
.layout.rail .navgrp{margin-left:0;border-left:0;padding-left:0}

/* Per-module rail colours, matched to the ERP. groupSidebar() slugs each heading into
   data-grp, so the heading's own words pick the colour - no extra markup. */
.navgrp[data-grp*="project"]{border-left-color:#4c1d95}
.navgrp[data-grp*="crm"],
.navgrp[data-grp*="sales"],
.navgrp[data-grp*="customer"]{border-left-color:#064e3b}
.navgrp[data-grp*="hr"],
.navgrp[data-grp*="people"],
.navgrp[data-grp*="team"]{border-left-color:#831843}
.navgrp[data-grp*="financ"],
.navgrp[data-grp*="account"],
.navgrp[data-grp*="billing"],
.navgrp[data-grp*="payment"]{border-left-color:#78350f}
.navgrp[data-grp*="setting"]{border-left-color:#1e3a5f}

/* ---- a child row --------------------------------------------------------------- */
.nav{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:7px 8px;border-radius:7px;margin-bottom:1px;
  background:transparent;border:0;text-align:left;cursor:pointer;
  font-size:14px;font-weight:600;color:#f1f5f9;
  transition:all .15s;white-space:nowrap;
}
/* The indent belongs to the group container (margin 14 + padding 10), as in the ERP. Both
   cockpits also push the row itself in by 16px, which double-indents it. */
.navgrp .nav{padding:7px 8px}
.nav:hover{background:rgba(255,255,255,.06);color:#fff}
.nav.active{background:rgba(99,102,241,.15);color:#c7d2fe;box-shadow:none}
.nav .ico,.nav .ic{width:15px;height:15px;flex:none;font-size:14px;opacity:1;text-align:center}
.nav.active .ico,.nav.active .ic{color:#c7d2fe}
.nav .badge{
  margin-left:auto;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 6px;border-radius:5px;
}
/* The AI pill. The seller cockpit defined this for itself; the buyer never had it, so it lives
   here now and both sides render it the same. */
.nav .badge-ai{background:linear-gradient(120deg,#9a86ff,#8b6ff5);color:#fff}
.nav .badge-soon{background:rgba(255,255,255,.14);color:#cdddf3}
.nav .cnt{
  margin-left:auto;background:rgba(99,102,241,.3);color:#c7d2fe;
  font-size:12px;font-weight:700;border-radius:999px;padding:1px 7px;
}

/* ---- module search: the ERP's box under the header, with its result list --------
   Built by erp-sidebar.js from the menu already on the page, so it stays correct as
   modules come and go. */
.sb-find{padding:6px 8px;border-bottom:1px solid #0f1929;position:relative;flex:0 0 auto}
.sb-find .box{
  display:flex;align-items:center;gap:6px;
  background:#0d1520;border:1px solid #1a2540;border-radius:8px;padding:5px 10px;
}
.sb-find .box span{font-size:13px;color:#334155}
.sb-find input{
  background:none;border:0;outline:none;width:100%;min-width:0;
  color:#f1f5f9;font:inherit;font-size:13px;
}
.sb-find input::placeholder{color:#475569}
.sb-find .clr{background:none;border:0;color:#334155;cursor:pointer;padding:0;font-size:14px}
.sb-hits{
  position:absolute;top:100%;left:8px;right:8px;z-index:9999;
  background:#0d1520;border:1px solid #1e3a5f;border-radius:8px;overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.sb-hits button{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;
  padding:8px 12px;background:none;border:0;border-bottom:1px solid #0f1929;
  cursor:pointer;text-align:left;
}
.sb-hits button:last-child{border-bottom:0}
.sb-hits button:hover{background:rgba(99,102,241,.15)}
.sb-hits .t{font-size:14px;font-weight:600;color:#c7d2fe}
.sb-hits .s{font-size:12px;color:#475569}
.layout.rail .sb-find{display:none}
.layout.rail.peek .sb-find{display:block}

/* The pin, in the header. Indigo once it is holding the sidebar open. */
.sb-pin{
  background:none;border:0;cursor:pointer;color:#334155;
  padding:2px;flex:none;font-size:16px;line-height:1;
}
.sb-pin.on{color:#6366f1}
.layout.rail .sb-pin{display:none}
.layout.rail.peek .sb-pin{display:block}

:root[data-theme="light"] .sb-find{border-bottom-color:rgba(255,255,255,.08)}
:root[data-theme="light"] .sb-find .box{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
:root[data-theme="light"] .sb-find input{color:#ffffff}
:root[data-theme="light"] .sb-find input::placeholder{color:rgba(255,255,255,.5)}
:root[data-theme="light"] .sb-hits{background:#ffffff;border-color:#e6e7ee;box-shadow:0 8px 24px rgba(24,24,36,.15)}
:root[data-theme="light"] .sb-hits .t{color:#181824}
:root[data-theme="light"] .sb-hits .s{color:#6b6b80}
:root[data-theme="light"] .sb-pin.on{color:#38ce3c}

/* ---- footer -------------------------------------------------------------------- */
.sb-foot{
  margin-top:auto;display:flex;align-items:center;gap:9px;
  padding:10px 12px;border-top:1px solid #1a2540;
  font-size:12px;color:#475569;
}

/* ---- collapsed rail ------------------------------------------------------------ */
.layout.rail .sidebar{padding:0}
.layout.rail .sb-brand{padding:0 8px;justify-content:center}
.layout.rail .sb-new{margin:8px 6px 4px;padding:7px 0;justify-content:center}
.layout.rail .sidebar .nav{justify-content:center;padding:7px 0;gap:0}
.layout.rail.peek .sidebar{padding:0}
.layout.rail.peek .sb-brand{padding:0 10px;justify-content:flex-start}
.layout.rail.peek .sidebar .nav{justify-content:flex-start;padding:7px 8px;gap:8px}
.layout.rail.peek .navgrp{margin-left:14px;border-left:2px solid #1e2d4a;padding-left:10px}

/* Pinned: the ERP's pin outranks the collapse, so the sidebar stays wide and readable
   even while the rail is switched on. Mirrors the peek rules rather than inventing a
   second way of being open. */
.layout.pin{grid-template-columns:240px 1fr}
.layout.rail.pin .sidebar{padding:0}
.layout.rail.pin .sb-brand{padding:0 10px;justify-content:flex-start}
.layout.rail.pin .sidebar .nav{justify-content:flex-start;padding:7px 8px;gap:8px}
.layout.rail.pin .navgrp{margin-left:14px;border-left:2px solid #1e2d4a;padding-left:10px}
.layout.rail.pin .sb-find{display:block}
.layout.rail.pin .sidebar .nav-lbl,
.layout.rail.pin .sidebar .nav span:not(.ico):not([data-i]),
.layout.rail.pin .sidebar .nav span:not(.ic),
.layout.rail.pin .sidebar .sb-new,
.layout.rail.pin .sidebar .badge,
.layout.rail.pin .sidebar .cnt,
.layout.rail.pin .sb-foot div{display:revert}

/* ---- phone: the ERP's 280px drawer over a dark scrim --------------------------- */
@media (max-width:900px){
  .sidebar{
    position:fixed;top:0;bottom:0;left:0;
    width:280px;max-width:85vw;z-index:1000;
    display:flex;
    transform:translateX(-110%);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow:none;
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .sidebar.open{transform:translateX(0);box-shadow:2px 0 30px rgba(0,0,0,.7)}
  /* The scrim is created by the shared script, so both cockpits get it from one place. */
  .sb-scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:999}
}

/* ---- bright theme: the ERP's #181824 sidebar with the green marker -------------- */
:root[data-theme="light"] .sidebar{
  background:#181824;border-right:0;
  box-shadow:2px 0 10px rgba(24,24,36,.18);
  color:#d4d4de;
}
:root[data-theme="light"] .sb-brand{color:#ffffff;border-bottom:1px solid rgba(255,255,255,.08)}
:root[data-theme="light"] .sb-brand .bm{background:rgba(255,255,255,.08);color:#38ce3c}
:root[data-theme="light"] .sb-brand .sb-sub{color:#38ce3c}
:root[data-theme="light"] .nav-lbl{color:#38ce3c}
:root[data-theme="light"] .nav-lbl.grp:hover,
:root[data-theme="light"] .nav-lbl.grp.peek{color:#ffffff;background:rgba(255,255,255,.06)}
:root[data-theme="light"] .nav{color:#d4d4de}
:root[data-theme="light"] .nav:hover{background:rgba(255,255,255,.06);color:#ffffff}
/* The page you are on: darker band, white text, green marker. */
:root[data-theme="light"] .nav.active{
  background:#101018;color:#ffffff;box-shadow:inset 3px 0 0 #38ce3c;
}
:root[data-theme="light"] .nav.active .ico,
:root[data-theme="light"] .nav.active .ic{color:#38ce3c}
:root[data-theme="light"] .navgrp{border-left-color:rgba(255,255,255,.07)}
:root[data-theme="light"] .sb-new{background:rgba(255,255,255,.08);color:#ffffff;border-color:rgba(255,255,255,.12)}
:root[data-theme="light"] .sb-new:hover{background:rgba(255,255,255,.14)}
:root[data-theme="light"] .sb-foot{color:rgba(255,255,255,.45);border-top-color:rgba(255,255,255,.08)}
:root[data-theme="light"] .sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}

@media (prefers-reduced-motion:reduce){
  .sidebar,.nav,.nav-lbl.grp,.nav-lbl.grp .cv{transition:none}
}
/* Header = the client company only (owner, 28 Sep): name, then the Company ID. */
.platform-bar .platform-id{display:block;margin-top:2px;font:600 12px/1.3 var(--mono,ui-monospace,monospace);color:var(--ink-3,#5b6b85);letter-spacing:.04em}
.platform-bar .platform-h:empty,.platform-bar .platform-id:empty{display:none}