/* ═══════════════════════════════════════════════════════════════════════════
   THRESHOLD SHARED SHELL — sidebar + collapse tab + nav tooltip frame
   ---------------------------------------------------------------------------
   One stylesheet for every broker app page (cc.html, cma.html,
   cma-manager.html, admin.html) so the sidebar can no longer drift.
   Mirrors client/src/components/app-shell.tsx: navy #162F4A, gold #C9A646,
   220px expanded / 56px collapsed, 0.18s width transition.

   Self-contained on purpose: every value here is literal, so this file does
   NOT read any page's :root. cma.html and admin.html define their own --bg /
   --border / --gold / --text with different meanings; depending on those would
   repaint the sidebar differently on every page.
═══════════════════════════════════════════════════════════════════════════ */

:root{
  --shell-sidebar-w: 220px;
}
body.nav-collapsed{
  /* Set on <body>, not on .sidebar, so the body-level .nav-tooltip inherits it too. */
  --shell-sidebar-w: 56px;
}

/* ── Layout wrapper ────────────────────────────────────────────────────────
   .sidebar is overflow:hidden, so the collapse tab cannot live inside it or
   it gets clipped. This wrapper is relatively positioned and never clipped. */
.sb-wrap{
  position:relative;
  flex-shrink:0;
  height:100vh;
  z-index:10;
}

/* The page column that sits beside the sidebar. Pages put their topbar first
   and their scrolling content in .shell-scroll. */
.shell-main{flex:1;min-width:0;height:100vh;display:flex;flex-direction:column;overflow:hidden;}
.shell-scroll{flex:1;overflow-y:auto;}

.sidebar{
  width:var(--shell-sidebar-w);
  height:100%;
  background:#162F4A;
  color:#E8F0F6;
  border-right:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;
  overflow-x:hidden;overflow-y:auto;
  transition:width .18s ease;
}
.sidebar::-webkit-scrollbar{width:3px;}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);}

/* ── Brand ───────────────────────────────────────────────────────────────── */
.sb-brand{
  padding:18px 16px 14px;
  border-bottom:1px solid rgba(255,255,255,.04);
  flex-shrink:0;
  white-space:nowrap;
}
.sb-logo{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:18px;font-weight:700;
  color:#d4a843;letter-spacing:-.3px;
}
.sb-logo span{color:#C9A646;}
.sb-logo .sb-logo-full,.sb-logo .sb-logo-short{color:inherit;}
.sb-logo-short{display:none;}
.sb-tagline{
  font-size:10px;color:rgba(232,240,246,.45);
  font-family:"DM Mono",monospace;
  margin-top:2px;letter-spacing:.5px;
}

/* ── Section headers ─────────────────────────────────────────────────────── */
.sb-section-hdr{
  padding:14px 16px 4px;
  font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(201,166,70,.55);
  font-family:"DM Mono",monospace;
  white-space:nowrap;
}
.sb-section-hdr.active{color:#C9A646;}

/* ── Nav items ───────────────────────────────────────────────────────────── */
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;margin:1px 6px;
  border-radius:10px;cursor:pointer;
  color:rgba(232,240,246,.60);
  font-size:13px;font-weight:500;
  text-decoration:none;
  transition:background .15s,color .15s,border-color .15s;
  position:relative;
  border:1px solid transparent;
  white-space:nowrap;
}
.nav-item svg{color:rgba(232,240,246,.45);flex-shrink:0;}
.nav-item:hover{color:#E8F0F6;background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.04);}
.nav-item:hover svg{color:rgba(232,240,246,.7);}
.nav-item.active{color:#fff;background:rgba(201,166,70,.12);border-color:#C9A646;}
.nav-item.active svg{color:#fff;}
.nav-item.dim{color:rgba(232,240,246,.42);}
/* PROJECT-CONTEXT LOCK. The six project-scoped apps are unreachable without an
   active project. This lives here, not in cc.html, because every page that ships
   this sidebar has to enforce it — reaching a tool from the CMA pages or the
   React shell used to walk straight past the Command Center's copy of the gate.
   It only ever adds opacity: the subscription tier gate owns `display`, so a
   tier-hidden row stays hidden whether or not it is also project-locked. */
.nav-item.proj-locked{opacity:.38;cursor:not-allowed;}
.nav-item.proj-locked:hover{background:transparent;border-color:transparent;color:rgba(232,240,246,.60);}
.nav-item.proj-locked:hover svg{color:rgba(232,240,246,.45);}
.nav-item.proj-locked .shell-live-pill{opacity:.5;}

/* Rows that switch pages in place (the React Website Builder) are buttons or a
   <summary>, not links; they get the exact same row. */
button.nav-item,summary.nav-item{
  width:calc(100% - 12px);background:transparent;font:inherit;font-size:13px;font-weight:500;
  text-align:left;list-style:none;
}
summary.nav-item::-webkit-details-marker{display:none;}
/* Cities folds out: a small caret at the row's right edge turns when open. */
.sb-nav-group>summary.nav-item::after{
  content:"";width:6px;height:6px;margin-left:auto;margin-right:4px;flex-shrink:0;
  border-right:1.5px solid rgba(232,240,246,.45);border-bottom:1.5px solid rgba(232,240,246,.45);
  transform:rotate(-45deg);transition:transform .15s;
}
.sb-nav-group[open]>summary.nav-item::after{transform:rotate(45deg);}
/* Its contents: indented under the row, a step smaller, no icons. */
.sb-subnav{margin:0 6px 4px 36px;border-left:1px solid rgba(255,255,255,.08);padding-left:6px;}
.sb-subnav button,.sb-subnav summary{
  display:block;width:100%;padding:6px 10px;border:0;border-radius:8px;background:transparent;
  font:inherit;font-size:12px;font-weight:500;color:rgba(232,240,246,.60);text-align:left;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sb-subnav summary{display:list-item;list-style-position:inside;}
.sb-subnav details details{margin-left:10px;}
.sb-subnav button:hover,.sb-subnav summary:hover{color:#E8F0F6;background:rgba(255,255,255,.09);}
body.nav-collapsed .sb-subnav{display:none;}

.nav-ico{font-size:15px;width:20px;text-align:center;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;}
.nav-label{flex:1;overflow:hidden;text-overflow:ellipsis;}
.nav-badge{
  background:#C9A646;color:#162F4A;
  font-size:9px;font-weight:700;font-family:"DM Mono",monospace;
  padding:2px 6px;border-radius:20px;
}
.shell-live-pill{
  font-size:6px;color:#C9A646;
  border:1px solid rgba(201,166,70,.3);
  padding:1px 5px;border-radius:10px;margin-left:auto;
}

.sb-divider{height:1px;background:rgba(255,255,255,.04);margin:8px 12px;flex-shrink:0;}
.sb-divider.pin-bottom{margin-top:auto;}

/* Role-gated links (admin panel) — hidden until the page reveals them. */
.sb-gated{display:none;padding:6px 8px 48px;}
.sb-gated a{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:8px;
  font-size:11px;font-weight:600;letter-spacing:.03em;
  color:#d4a843;background:rgba(201,166,70,.08);
  border:1px solid rgba(201,166,70,.2);
  text-decoration:none;
}
.sb-gated a:hover{background:rgba(201,166,70,.15);}

/* Cursor-following explainer for a locked row. Follows the pointer rather than
   anchoring to the row so it never overlaps the nav it is describing. */
.proj-lock-bubble{
  position:fixed;z-index:1300;pointer-events:none;
  background:#162F4A;border:1px solid #C9A646;border-radius:9px;
  padding:7px 11px;max-width:220px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size:11.5px;font-weight:600;line-height:1.45;color:#E8F0F6;
  box-shadow:0 8px 26px rgba(0,0,0,.45);
  opacity:0;transition:opacity .12s;
}
.proj-lock-bubble.show{opacity:1;}

/* ── Collapse tab ─────────────────────────────────────────────────────────
   Geometry copied from app-shell.tsx so the React and static surfaces are
   pixel-identical. Lives in .sb-wrap (outside .sidebar) so it is never clipped. */
.shell-collapse-tab{
  position:absolute;top:50%;right:-13px;transform:translateY(-50%);
  z-index:30;
  width:26px;height:46px;border-radius:8px;
  background:#C9A646;border:1px solid #C9A646;color:#162F4A;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
  box-shadow:0 2px 8px rgba(12,42,66,.35);
}
.shell-collapse-tab:hover{opacity:.9;}
.shell-collapse-tab svg{display:block;}
.shell-collapse-tab .tab-expand{display:none;}
body.nav-collapsed .shell-collapse-tab .tab-expand{display:block;}
body.nav-collapsed .shell-collapse-tab .tab-collapse{display:none;}

/* ── Collapsed state ─────────────────────────────────────────────────────── */
body.nav-collapsed .nav-label,
body.nav-collapsed .sb-tagline,
body.nav-collapsed .nav-badge,
body.nav-collapsed .shell-live-pill,
body.nav-collapsed .sb-section-hdr,
body.nav-collapsed .sb-gated span,
body.nav-collapsed .sb-foot{display:none;}
body.nav-collapsed .sb-brand{padding:18px 0 14px;text-align:center;}
body.nav-collapsed .sb-logo{font-size:20px;}
body.nav-collapsed .sb-logo.has-short .sb-logo-full{display:none;}
body.nav-collapsed .sb-logo.has-short .sb-logo-short{display:inline;}
body.nav-collapsed .nav-item{justify-content:center;padding:9px 0;margin:2px 8px;gap:0;}
body.nav-collapsed .sb-gated{padding:6px 8px 48px;}
body.nav-collapsed .sb-gated a{justify-content:center;padding:8px 0;}

/* ── Nav tooltip frame (rendered only when a page asks for it) ───────────── */
.nav-tooltip{
  position:fixed;left:calc(var(--shell-sidebar-w) + 8px);
  background:#162F4A;border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:14px 16px;
  width:280px;z-index:1000;
  opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s;
  transform:translateX(-4px);
  box-shadow:0 8px 32px rgba(0,0,0,.5);
}
.nav-tooltip.show{opacity:1;transform:translateX(0);}
.tt-title{font-size:12px;font-weight:700;color:#EAF1F7;margin-bottom:4px;display:flex;align-items:center;gap:6px;}
.tt-desc{font-size:11px;color:#7A9AB0;line-height:1.6;margin-bottom:8px;}
.tt-connects{font-size:10px;font-family:"DM Mono",monospace;color:#4A6A80;border-top:1px solid rgba(255,255,255,.04);padding-top:8px;margin-top:4px;}
.tt-connects strong{color:#D4B458;}
.tt-status{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;font-family:"DM Mono",monospace;padding:2px 7px;border-radius:4px;margin-bottom:6px;}
.tt-status.live{background:rgba(45,96,71,.2);color:#D4B458;border:1px solid rgba(45,96,71,.3);}
.tt-status.bg{background:rgba(45,184,159,.1);color:#2dd4bf;border:1px solid rgba(45,184,159,.2);}
.tt-status.soon{background:rgba(184,137,42,.1);color:#d4a843;border:1px solid rgba(184,137,42,.2);}

/* Light theme only affects the tooltip — the sidebar itself is always navy.
   Ported from cc.html's body.light .nav-tooltip / .tt-* rules. */
body.light .nav-tooltip{background:#fff;border-color:#CDDAE6;box-shadow:0 8px 32px rgba(12,42,66,.18);}
body.light .tt-title{color:#0C2A42;}
body.light .tt-desc{color:#5A7A92;}
body.light .tt-connects{color:#8AAABB;}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN SKIN — forest/cream, admin-only by design. Structure comes from the
   shared shell above; only the palette and a little geometry change here.
   Reproduces admin.html's original .sidebar / .nav-item / brand styling.
═══════════════════════════════════════════════════════════════════════════ */
[data-shell-skin="admin"] .sidebar{
  background:#1A3526;
  border-right:1px solid rgba(255,255,255,.1);
}
[data-shell-skin="admin"] .sb-brand{
  padding:24px 20px 20px;
  border-bottom:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;gap:10px;
}
[data-shell-skin="admin"] .sb-logo{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:700;color:#fff;font-size:15px;letter-spacing:normal;
}
[data-shell-skin="admin"] .sb-logo span{color:#fff;}
[data-shell-skin="admin"] .sb-logo-chip{
  width:32px;height:32px;background:#B07D2A;border-radius:8px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:'Playfair Display',Georgia,serif;font-weight:700;color:#1A3526;font-size:16px;
}
[data-shell-skin="admin"] .sb-tagline{
  font-size:9px;color:rgba(255,255,255,.4);
  text-transform:uppercase;letter-spacing:.1em;
  font-family:'DM Mono',monospace;margin-top:0;
}
[data-shell-skin="admin"] .sb-section-hdr{
  font-size:9px;font-weight:600;color:rgba(255,255,255,.3);
  letter-spacing:.12em;padding:12px 20px 6px;
}
[data-shell-skin="admin"] .nav-item{
  padding:9px 10px;margin:0 12px 2px;border-radius:8px;
  color:rgba(255,255,255,.65);border:1px solid transparent;
}
[data-shell-skin="admin"] .nav-item svg{opacity:.7;color:inherit;}
[data-shell-skin="admin"] .nav-item:hover{background:rgba(255,255,255,.08);color:#fff;border-color:transparent;}
[data-shell-skin="admin"] .nav-item:hover svg{color:inherit;}
[data-shell-skin="admin"] .nav-item.active{background:#B07D2A;color:#1A3526;font-weight:700;border-color:transparent;}
[data-shell-skin="admin"] .nav-item.active svg{opacity:1;color:inherit;}
[data-shell-skin="admin"] .nav-badge{
  margin-left:auto;background:#C62828;color:#fff;
  border-radius:10px;padding:1px 6px;font-size:10px;font-weight:700;
}
[data-shell-skin="admin"] .shell-collapse-tab{
  background:#B07D2A;border-color:#B07D2A;color:#1A3526;
}
[data-shell-skin="admin"] .sb-foot{
  padding:16px 20px;border-top:1px solid rgba(255,255,255,.1);
  font-size:12px;color:rgba(255,255,255,.6);flex-shrink:0;
}
[data-shell-skin="admin"] .sb-foot strong{display:block;color:#fff;font-size:13px;}

/* ── Print: the shell is screen-only ─────────────────────────────────────── */
@media print{
  .sb-wrap,.sidebar,.shell-collapse-tab,.nav-tooltip{display:none !important;}
  /* The flex column must stop clipping/scrolling or only page 1 prints. */
  .shell-main{height:auto !important;overflow:visible !important;display:block !important;}
  .shell-scroll{overflow:visible !important;}
}

/* ══════════════════════════════════════════════════════════════════════════
   SHARED PROJECT-CONTEXT CHIP ("Save to")
   ══════════════════════════════════════════════════════════════════════════
   One definition for every page that is not cc.html. cc.html keeps its own copy
   because its chip is wired directly into the New Project modal; every other page
   opts in by putting <div data-project-chip></div> in its topbar, and shell.js
   fills it. All rules are scoped under that attribute so nothing here can reach
   cc.html's chip and fight with it.

   Values are copied from cc.html deliberately — same padding, radius, fonts and
   colours — because the chip has to look identical wherever a broker sees it.
   The topbar is navy in both themes, so the chip itself needs no day variant; the
   dropdown does, and it follows the CRM contact panel's scheme: white card,
   #CDDAE6 borders, #0C2A42 text, #5A7A92 secondary. */
[data-project-chip]{display:inline-flex;position:relative;}
[data-project-chip] .ctx-chip{
  display:inline-flex;align-items:center;gap:11px;
  font-size:14px;font-family:"DM Mono",ui-monospace,monospace;font-weight:700;
  padding:11px 20px;border-radius:12px;white-space:nowrap;cursor:pointer;
  transition:filter .15s, box-shadow .15s;
}
[data-project-chip] .ctx-chip:hover{filter:brightness(1.08);}
[data-project-chip] .ctx-chip.in-project{background:rgba(45,96,71,.22);border:1.5px solid rgba(201,166,70,.55);color:#E8F0F6;box-shadow:0 1px 8px rgba(201,166,70,.14);}
[data-project-chip] .ctx-chip.needs-project{background:rgba(201,166,70,.16);border:1.5px solid #C9A646;color:#E8F0F6;box-shadow:0 1px 8px rgba(201,166,70,.20);}
[data-project-chip] .ctx-chip-inner{display:inline-flex;align-items:center;gap:11px;}
[data-project-chip] .ctx-chip-label{opacity:.75;text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;}
[data-project-chip] .ctx-chip-val{max-width:280px;overflow:hidden;text-overflow:ellipsis;font-size:14.5px;font-weight:600;}
[data-project-chip] .ctx-chip-caret{font-size:11px;color:#C9A646;}

/* Dropdown — night by default, day under body.light, matching the CRM panel. */
[data-project-chip] .ctx-menu{
  display:none;position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
  min-width:280px;max-height:320px;overflow:auto;
  background:#112438;border:1px solid rgba(255,255,255,.07);border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);z-index:200;padding:6px;
  font-family:"Inter",system-ui,sans-serif;text-align:left;
}
[data-project-chip] .ctx-menu.open{display:block;}
[data-project-chip] .ctx-menu-hd{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:#7A9AB0;padding:6px 8px;}
[data-project-chip] .ctx-menu-item{padding:8px 10px;border-radius:7px;font-size:12px;color:#E8F0F6;cursor:pointer;font-weight:500;}
[data-project-chip] .ctx-menu-item:hover{background:rgba(255,255,255,.05);}
[data-project-chip] .ctx-menu-item.current{font-weight:700;}
[data-project-chip] .ctx-menu-check{float:right;color:#d4a843;font-weight:700;}
[data-project-chip] .ctx-menu-empty{padding:10px;font-size:11px;color:#7A9AB0;}
[data-project-chip] .ctx-menu-new{color:#d4a843;font-weight:700;border-bottom:1px solid rgba(255,255,255,.07);}
body.light [data-project-chip] .ctx-menu{background:#fff;border-color:#CDDAE6;box-shadow:0 10px 30px rgba(12,42,66,.15);}
body.light [data-project-chip] .ctx-menu-hd{color:#5A7A92;}
body.light [data-project-chip] .ctx-menu-item{color:#0C2A42;}
body.light [data-project-chip] .ctx-menu-item:hover{background:rgba(12,42,66,.05);}
body.light [data-project-chip] .ctx-menu-check{color:#b07d2a;}
body.light [data-project-chip] .ctx-menu-empty{color:#5A7A92;}
body.light [data-project-chip] .ctx-menu-new{color:#b07d2a;border-bottom-color:#CDDAE6;}
/* Centred in the topbar like cc.html's chip, but as a real flex item rather than an
   absolute overlay: these pages also carry a title and action buttons, and an overlay
   would sit on top of the title once a long address widened the chip. Auto margins keep
   it centred between the two while guaranteeing it can never collide with either. */
[data-project-chip].topbar-centered{margin:0 auto;flex-shrink:0;}
/* On the CMA pages the topbar also carries a title and actions, so keep the value a
   little tighter than cc.html's 280px to protect the centred layout. */
[data-project-chip].topbar-centered .ctx-chip-val{max-width:230px;}