/* ============================================================
   Pipeline Tracker styles — extracted from tracker.broadwaters.com
   Auth gate stripped; logo URL pointed at local asset.
   ============================================================ */

/* Tabular numerics */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; }

/* Native form controls match brand */
input, select, textarea, button { font-family: var(--font-text); }
select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #6B7280 50%),
    linear-gradient(135deg, #6B7280 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px !important;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--bw-accent-green);
  outline-offset: 2px;
}
::placeholder { color: var(--bw-neutral-3); opacity: 1; font-weight: 300; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.45; cursor: pointer; }

/* Masthead logo — points at our local asset */
.bw-masthead-logo {
  width: 44px; height: 44px; flex-shrink: 0;
  background: url("assets/logo-mark-color.png") no-repeat center / contain;
  display: block;
}

/* Inside the Hub shell, let the tracker fill the main column rather than
   cap at 1440px and center.  The Hub topbar carries the masthead duties,
   so we suppress the tracker's own internal masthead too. */
.hub-main .app-container {
  max-width: none !important;
  margin: 0 !important;
  padding: 18px 28px 24px !important;
  position: relative;
}
.hub-main .app-container > header:first-of-type { display: none !important; }

/* Pull the action row UP into the tab nav so they share one horizontal row.
   Compressed action buttons + reserved padding on tabs row. */
.hub-main .pipeline-meta-row {
  position: absolute !important;
  top: 14px !important;
  right: 28px !important;
  margin: 0 !important;
  z-index: 4;
}
/* Compress the tracker's in-line action row so it fits beside the tabs. */
.hub-main nav[data-print-hide] {
  padding-right: 320px;  /* room for compressed action row */
  margin-bottom: 14px !important;
}
.hub-main .pipeline-meta-row .actions-row {
  gap: 4px !important;
}
.hub-main .pipeline-meta-row .actions-row > button {
  padding: 6px 10px !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
}
.hub-main .pipeline-meta-row .actions-row > div:first-child button {
  padding: 6px 10px !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
}

/* ============================================================
   STICKY TOP — desktop list view
   When scrolling the list, freeze the KPI strip + filter chips so
   they don't scroll off-screen. Stage section headers stay sticky
   too so you always see which section you're inside.
   ============================================================ */
@media (min-width: 901px) {
  .hub-main .kpi-strip {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg);
    padding-top: 12px !important;
    padding-bottom: 4px !important;
    margin-top: -12px !important;
  }
  .hub-main .filters-row {
    position: sticky;
    /* Sits directly under the kpi strip — top value tuned to the strip's
       rendered height (single row, ~78px after padding compression) */
    top: 78px;
    z-index: 4;
    background: var(--bg);
  }
  .hub-main section.stage-section > div:first-child {
    position: sticky;
    top: 142px; /* under kpi strip + filters row */
    z-index: 3;
    background: var(--bg);
    padding-top: 6px;
  }

  /* Chip currently in view (scroll-spy, separate from filter-active state) */
  .hub-main .filters-row > button[data-stage-chip].is-viewing {
    box-shadow: inset 0 -2px 0 0 var(--bw-accent-green);
  }
}

@media (max-width: 1180px) {
  .hub-main nav[data-print-hide] { padding-right: 0 !important; }
  .hub-main .pipeline-meta-row {
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin-top: 12px !important;
  }
}
/* Hide the redundant in-tracker "+ New Record" — Hub topbar has the + button */
.hub-main .pipeline-meta-row .actions-row > button:last-child { display: none !important; }
/* Tracker's in-pipeline search is redundant with global Hub search — hide it */
.hub-main .filters-row > input[type="text"] { display: none !important; }
/* Pipeline sublabel — "Brokerage & advisory mandates · Lead → Outreach…" — hide
   the long description; the tab nav already carries the label. */
.hub-main .pipeline-sublabel { display: none !important; }

/* Compress KPI strip — it was a huge hero band. Now a slim utility strip. */
.hub-main .kpi-strip {
  margin: 4px 0 18px !important;
}
.hub-main .kpi-strip > div { padding: 10px 18px !important; }
.hub-main .kpi-strip > div > div:first-child { font-size: 9px !important; letter-spacing: 0.14em !important; margin-bottom: 4px !important; }
.hub-main .kpi-strip > div > div:last-child  { font-size: 22px !important; }

/* Tighten gap between filters and first stage section */
.hub-main .filters-row { padding: 8px 0 12px !important; }

@media (max-width: 900px) {
  .hub-main .app-container { padding: 16px 18px 80px !important; }
  .hub-main .pipeline-meta-row {
    position: static !important;
    top: auto !important;
    right: auto !important;
  }
  .hub-main nav[data-print-hide] { padding-right: 0; }
}

/* Print-only blocks hidden in live UI */
.print-only { display: none; }

/* ============================================================
   REPORTING — institutional Briefs
   Each Brief is a printable one-page memo. On-screen, we render it
   inside a paper-style card; in print, the card chrome falls away
   and the Brief becomes the page (see @media print rules below).
   ============================================================ */
.reporting-shell {
  font-family: var(--font-text);
}
.brief-page {
  /* Subtle paper shadow on screen to reinforce the document metaphor */
  box-shadow: 0 1px 2px rgba(10, 37, 64, 0.04), 0 6px 24px rgba(10, 37, 64, 0.06);
}
.brief-page table tbody tr:hover {
  background: rgba(34, 197, 94, 0.03) !important;
}

/* Mobile screen view only — never affects print output. */
@media screen and (max-width: 900px) {
  .brief-page { padding: 28px 22px !important; max-width: none !important; }
  .brief-page > div[style*="grid-template-columns: 1.4fr 1fr"],
  .brief-page > div[style*="grid-template-columns: 1.2fr 1fr"],
  .brief-page > div[style*="grid-template-columns: 1fr 1.2fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Wide tables get a horizontal scroll on phone instead of squishing. */
  .brief-page .brief-grouped-table { display: block; overflow-x: auto; }
}

/* When body.printing-brief is on, FORCE the desktop layout even on
   mobile screens. iOS Safari's print preview snapshots the on-screen
   render — so we have to actually render desktop dimensions before
   triggering the print. JS adds this class + widens the viewport
   meta + waits 2 frames so the layout commits before window.print().
   Higher specificity (body.printing-brief + .brief-page = 2 classes)
   defeats the responsive screen rule's single-class specificity. */
body.printing-brief .brief-page {
  padding: 44px 56px 56px !important;
  max-width: 1280px !important;
  width: 1280px !important;
  margin: 0 auto !important;
}
body.printing-brief .brief-page > div[style*="grid-template-columns: 1.4fr 1fr"] {
  grid-template-columns: 1.4fr 1fr !important;
  gap: 40px !important;
}
body.printing-brief .brief-page > div[style*="grid-template-columns: 1.2fr 1fr"] {
  grid-template-columns: 1.2fr 1fr !important;
  gap: 40px !important;
}
body.printing-brief .brief-page > div[style*="grid-template-columns: 1fr 1.2fr"] {
  grid-template-columns: 1fr 1.2fr !important;
  gap: 40px !important;
}
body.printing-brief .brief-page .brief-grouped-table {
  display: table !important;
  overflow: visible !important;
  width: 100% !important;
}
/* Hide the Hub chrome on screen while printing too — clean visual */
body.printing-brief .topbar-mobile,
body.printing-brief .rail,
body.printing-brief .bw-chat-fab-group,
body.printing-brief .bw-chat-panel,
body.printing-brief .reporting-shell > div:first-child { display: none !important; }

/* ============================================================
   PRINT / PDF — Institutional report layout
   ============================================================ */
@page {
  size: Letter landscape;
  margin: 0.4in 0.5in;
}
@media print {
  html, body { background: #fff !important; font-size: 8.5pt; }
  .no-print, nav[data-print-hide], .filters-row, .actions-row,
  .pipeline-sublabel, [data-modal-root],
  .rail, .topbar, .topbar-mobile, .tabbar,
  .bw-chat-panel, .bw-chat-fab-group { display: none !important; }
  /* Brief print rules — the .brief-page IS the page; nothing else prints. */
  body.printing-brief .reporting-shell .no-print { display: none !important; }
  /* Force a desktop-shaped print canvas regardless of source viewport.
     Without this, iOS Safari prints at the device viewport width and
     the brief looks portrait-mobile in the resulting PDF. We force
     1100px so the table column widths (which sum to ~1170) fit, and
     the rest of the page CSS handles scale-to-Letter-landscape from there. */
  body.printing-brief {
    width: 1100px !important;
    margin: 0 auto !important;
    overflow: visible !important;
    position: static !important;
  }
  body.printing-brief .hub-shell,
  body.printing-brief .hub-main,
  body.printing-brief .hub-view {
    width: 100% !important;
    overflow: visible !important;
    display: block !important;
  }
  body.printing-brief .topbar-mobile { display: none !important; }
  body.printing-brief .brief-page {
    border: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
  /* Undo any 'block + overflow-x: auto' from the mobile screen rule
     so the table prints intact. */
  body.printing-brief .brief-grouped-table {
    display: table !important;
    overflow: visible !important;
  }
  body.printing-brief footer { page-break-inside: avoid; page-break-before: auto; }

  /* Each Brief group is preferred-kept-together when small; large groups
     break naturally. Within a group, keep header + first row together. */
  .brief-group { page-break-inside: auto; }
  .brief-group > header { page-break-after: avoid; }
  .brief-page table { font-size: 8pt !important; }
  .brief-page table thead { display: table-header-group; }  /* repeat th on every page */
  .brief-page table tr { page-break-inside: avoid; }
  /* The hero section should NOT break — it's the headline */
  .brief-page > section:first-of-type,
  .brief-page > header:first-child { page-break-inside: avoid; }
  /* Collapse the Hub grid for print — sidebar gone, main column takes full page */
  .hub-shell {
    display: block !important;
    height: auto !important;
    width: auto !important;
    grid-template-columns: none !important;
  }
  .hub-main { overflow: visible !important; height: auto !important; }
  .hub-view { overflow: visible !important; box-shadow: none !important; }
  .app-container { max-width: none !important; margin: 0 !important; padding: 0 !important; }
  .print-masthead {
    display: flex !important;
    justify-content: space-between; align-items: flex-end;
    border-bottom: 0.75pt solid #0A2540 !important;
    padding-bottom: 4pt; margin-bottom: 6pt;
  }
  .print-masthead h1 { font-size: 18pt !important; line-height: 1 !important; margin: 0 !important; }
  .print-masthead img, .print-masthead svg { max-height: 22pt !important; width: auto !important; }
  .print-section-title {
    display: block !important;
    margin: 0 0 5pt !important;
    padding-bottom: 3pt !important;
    border-bottom: 0.5pt solid #0A2540 !important;
  }
  .print-section-title > div:last-child { font-size: 11pt !important; line-height: 1.1 !important; margin-top: 0 !important; }
  .kpi-strip {
    page-break-inside: avoid;
    padding: 3pt 0 !important;
    margin: 0 0 6pt !important;
    border-top: 0.5pt solid #D1D5DB !important;
    border-bottom: 0.5pt solid #D1D5DB !important;
  }
  .kpi-strip > * { padding: 1pt 6pt !important; }
  .kpi-strip * { font-size: 7pt !important; line-height: 1.15 !important; }
  .kpi-strip .kpi-label { font-size: 6pt !important; }
  .kpi-strip .kpi-value { font-size: 12pt !important; font-weight: 500 !important; margin-top: 0 !important; }
  table { font-size: 7pt !important; page-break-inside: auto; width: 100% !important; }
  thead { display: table-header-group; }
  th { font-size: 6pt !important; padding: 2pt 4pt !important; }
  td { padding: 2pt 4pt !important; line-height: 1.2 !important; }
  tr { page-break-inside: avoid; page-break-after: auto; }
  tbody tr:hover { background: transparent !important; }
  /* Drop noise columns from the print — checkboxes for selection and the
     last-updated timestamp don't earn their space on a printed page.
     Keeps just the record-identifying columns so more rows fit per sheet. */
  table th:first-child, table td:first-child { display: none !important; }
  table th:last-child, table td:last-child { display: none !important; }
  section.stage-section { page-break-inside: auto !important; break-inside: auto !important; margin-bottom: 6pt !important; }
  section.stage-section > div:first-child { page-break-after: avoid; break-after: avoid; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-footer { display: flex !important; }
  a { color: inherit; text-decoration: none; }
}

/* ============================================================
   MOBILE — tracker-specific responsive overrides
   ============================================================ */
@media (max-width: 760px) {
  .app-container { max-width: none !important; padding: 16px 14px 40px !important; }

  .app-container > header:first-of-type { padding-bottom: 16px !important; margin-bottom: 20px !important; }
  .app-container > header:first-of-type > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .app-container > header:first-of-type > div > div:last-child { text-align: left !important; }
  .app-container > header:first-of-type h1 { font-size: 26px !important; }
  .bw-masthead-logo { width: 38px !important; height: 38px !important; }
  .app-container > header:first-of-type > div > div:first-child > div:nth-child(2) { display: none !important; }

  /* Pipeline tabs — horizontal scroll, tighter spacing */
  nav[data-print-hide] {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    margin: 0 -14px 14px !important;
    padding: 0 14px !important;
    padding-right: 14px !important;
    scrollbar-width: none;
    border-bottom: 1px solid var(--rule) !important;
  }
  nav[data-print-hide]::-webkit-scrollbar { display: none; }
  nav[data-print-hide] button {
    flex-shrink: 0 !important;
    padding: 10px 0 12px !important;
    margin-right: 22px !important;
  }
  nav[data-print-hide] button > div:first-child { font-size: 14px !important; }
  nav[data-print-hide] button > div:nth-child(2) { font-size: 9px !important; margin-top: 3px !important; }

  /* Action row — sits below tabs, scrolls horizontally if needed */
  .pipeline-meta-row {
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin-bottom: 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    justify-content: flex-start !important;
  }
  .pipeline-meta-row::-webkit-scrollbar { display: none; }
  .pipeline-sublabel { display: none !important; }
  .actions-row {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin-top: 0 !important;
    flex-shrink: 0 !important;
  }
  .actions-row button {
    font-size: 10px !important;
    padding: 8px 11px !important;
    flex-shrink: 0 !important;
  }

  /* Hide rarely-used actions on mobile — print/export/import/view-toggle.
     They take up bar space without earning it on a phone. Still available
     on desktop. */
  .actions-row .action-print,
  .actions-row .action-export-csv,
  .actions-row .action-import-csv,
  .actions-row .view-toggle { display: none !important; }

  /* KPI strip — single horizontal-scroll row instead of 2-column grid.
     Was eating 3 rows of vertical space before any record appeared. */
  .kpi-strip {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin: 0 -14px 14px !important;
    padding: 0 14px !important;
    gap: 8px;
    border-top: 0 !important;
    border-bottom: 0 !important;
  }
  .kpi-strip::-webkit-scrollbar { display: none; }
  .kpi-strip > div {
    flex: 0 0 auto !important;
    padding: 8px 12px !important;
    border: 1px solid var(--rule) !important;
    border-radius: 6px !important;
    background: var(--bg-elevated);
    min-width: 96px;
  }
  .kpi-strip > div > div:first-child {
    font-size: 9px !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 2px !important;
  }
  .kpi-strip > div > div:last-child {
    font-size: 18px !important;
    font-weight: 600;
  }

  /* Stage filter chips — single horizontal-scroll row, tighter pills.
     Stop the wrapping to 3 rows that ate the screen. */
  .filters-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin: 0 -14px !important;
    padding: 8px 14px 10px !important;
    gap: 6px !important;
    border-bottom: 1px solid var(--rule) !important;
  }
  .filters-row::-webkit-scrollbar { display: none; }
  .filters-row > button {
    flex-shrink: 0 !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    white-space: nowrap;
  }

  /* Hide the stage-progress bar in record modals — the dropdown below
     does the same job in less space. The visual bar gets cramped at
     phone width and pushes form fields off-screen. */
  .stage-progress-bar { display: none !important; }

  /* Filters row — search full width, chips wrap */
  .filters-row {
    padding: 6px 0 12px !important;
    border-bottom: 1px solid var(--rule) !important;
  }
  .filters-row input[type="text"] {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    margin-bottom: 6px !important;
    height: 38px !important;
    font-size: 14px !important;
  }
  .filters-row button {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }

  section.stage-section { margin-bottom: 22px !important; }
  section.stage-section > div:first-child {
    margin-bottom: 10px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--rule);
  }
  section.stage-section > div:first-child h2 { font-size: 16px !important; }

  /* Tables → stacked cards */
  section.stage-section table { display: block !important; width: 100% !important; }
  section.stage-section thead   { display: none !important; }
  section.stage-section tbody   { display: block !important; }
  section.stage-section tr {
    display: block !important;
    padding: 14px !important;
    margin-bottom: 8px;
    border: 1px solid var(--rule) !important;
    border-left: 3px solid var(--bw-primary-blue) !important;
    background: var(--bg-elevated);
    border-radius: 2px;
  }
  section.stage-section td { display: block !important; padding: 3px 0 !important; border: none !important; font-size: 13px !important; }
  /* Hide checkbox + last-updated columns on mobile */
  section.stage-section td:nth-child(1),
  section.stage-section td:last-child { display: none !important; }
  section.stage-section td:nth-child(5) > div > div:first-child { font-size: 12px !important; }

  /* Mobile modal — true full-screen sheet that covers the page topbar.
     Was at z-index 100 (vs topbar's 20) but Safari sometimes hoists
     sticky positioned elements above fixed siblings — bumping the
     backdrop to 9999 and explicitly hiding the page topbar when a
     modal is open avoids the whole class of leak. */
  body.modal-open { overflow: hidden !important; position: fixed; width: 100%; }
  body.modal-open .topbar-mobile { display: none !important; }
  [data-modal-root] > div {
    padding: 0 !important;
    align-items: stretch !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--bg) !important;
    overflow: hidden !important;
    z-index: 9999 !important;
  }
  [data-modal-root] > div > div {
    max-width: none !important; width: 100% !important;
    height: 100vh !important; height: 100dvh !important;
    margin: 0 !important; border: none !important; box-shadow: none !important;
    overflow-y: auto !important; -webkit-overflow-scrolling: touch;
    display: flex !important; flex-direction: column !important;
    border-radius: 0 !important;
  }
  /* Header — pads for the iOS notch / dynamic island */
  [data-modal-root] > div > div > div:first-child {
    padding: max(20px, env(safe-area-inset-top)) 20px 14px !important;
    flex-shrink: 0;
  }
  [data-modal-root] > div > div > div:first-child h2 {
    font-size: 20px !important;
    padding-right: 56px !important;
    line-height: 1.25 !important;
    margin-top: 4px !important;
  }
  /* Body — the only scrollable area, takes the slack */
  [data-modal-root] > div > div > div:nth-child(2) {
    padding: 18px 18px !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  [data-modal-root] > div > div > div:first-child button[aria-label="Close"] {
    width: 44px !important; height: 44px !important;
    top: max(16px, env(safe-area-inset-top)) !important; right: 12px !important;
    font-size: 26px !important;
    background: var(--bg-elevated) !important;
  }
  /* Hide the floating "Ask Broadwaters" inside the record on mobile —
     it competed with Close + the title for the same corner and made the
     header feel cramped. Mobile users have the chat trigger in the bottom
     of the mobile top bar (sparkles icon) for the same affordance. */
  [data-modal-root] .record-ask-broadwaters { display: none !important; }
  [data-modal-root] > div > div > div:nth-child(2) > div {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  [data-modal-root] > div > div > div:nth-child(2) > div > div { grid-column: auto !important; }
  [data-modal-root] > div > div > div:last-child {
    padding: 12px 16px !important;
    flex-wrap: wrap; gap: 8px;
    position: sticky; bottom: 0;
    background: var(--bg-elevated);
    border-top: 1px solid var(--rule);
  }
  [data-modal-root] > div > div > div:first-child > div[style*="margin-top: 22"] { gap: 10px !important; }

  /* iOS form fields — prevent zoom on focus */
  [data-modal-root] input, [data-modal-root] textarea, [data-modal-root] select {
    font-size: 16px !important;
  }

  button[style*="grid-template-columns: 70px"] {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  button[style*="grid-template-columns: 70px"] > span:first-child,
  button[style*="grid-template-columns: 70px"] > span:last-child { font-size: 9px !important; }

  footer { flex-direction: column !important; align-items: flex-start !important; gap: 14px; padding-bottom: 24px !important; }
}

@media (max-width: 480px) {
  .app-container { padding: 14px 12px 40px !important; }
  .kpi-strip { grid-template-columns: 1fr 1fr !important; }
  .kpi-strip > div > div:last-child { font-size: 18px !important; }
  .kpi-strip > div { padding: 10px 12px !important; }
}