/* ====================================================================
   LIBRARY MODULE — Commercial Intelligence Dashboard
   Light theme · Stripe / Linear-grade polish · 2026-05-26 redesign
   Self-contained: literal hex only, no @import, no main-stylesheet vars.

   SECTION MAP
     0.  Keyframes & helpers (fade-in stagger, skeleton shimmer)
     1.  Screen shell + navy header
     2.  Header search + tab buttons
     3.  Tab panes
     4.  Executive hero band
     5.  KPI strip
     6.  Filter chips
     7.  Project grid (cards, banner, load more, empty)
     8.  Intelligence dashboard (panels)
     9.  Funnel
     10. Converted vs Lost
     11. Velocity
     12. Tables
     13. Responsive
     14. Trends — CSS bar charts + typology
     15. Minimal transparent tab strip (no-banner; refines tab-btn/search)
     16. Floating action bar (Leads-style cluster)
     17. Rich tooltip
     18. Time filters (Projects tab)
     19. Auto-insight cards (good/warn/info)
     20. Period comparator (delta up/down)
     21. Top movers
     22. Projection / run-rate
     23. Responsive — new-section tweaks
   ==================================================================== */


/* ====================================================================
   0. KEYFRAMES & HELPERS
   ==================================================================== */

/* Staggered entrance for grid cards — JS sets --card-index inline.
   Delay capped so very long lists don't wait forever. */
@keyframes lib-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Soft sweep for loading skeletons */
@keyframes lib-shimmer {
  0%   { background-position: -460px 0; }
  100% { background-position: 460px 0; }
}

/* Skeleton placeholder — wire up in JS for loading states.
   Usage: <div class="lib-skeleton" style="height:18px;width:60%"></div> */
.lib-skeleton {
  position: relative;
  border-radius: 8px;
  background-color: #eef1f7;
  background-image: linear-gradient(
    90deg,
    rgba(238,241,247,0) 0%,
    rgba(255,255,255,0.85) 50%,
    rgba(238,241,247,0) 100%
  );
  background-size: 460px 100%;
  background-repeat: no-repeat;
  animation: lib-shimmer 1.25s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .lib-skeleton { animation: none; }
  .lib-card { animation: none !important; }
}


/* ====================================================================
   1. SCREEN SHELL + COMPACT LIGHT HEADER
   Matches the Leads/Quotes .portal-header pattern: a thin, light,
   integrated bar — NOT a tall solid-navy banner.
   NOTE: global app controls the left offset via margin-left in the
   main stylesheet. DO NOT set position/left/margin-left here.
   ==================================================================== */
.lib-screen {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  z-index: 50;
  background: #f4f6fb;
  color: #021d49;
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Compact light command bar */
.lib-header {
  flex-shrink: 0;
  height: 52px; min-height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 0 22px;
  background: #fff;
  border-bottom: 1px solid #e6e9f0;
  box-shadow: 0 1px 3px rgba(2,29,73,0.05);
  z-index: 2;
}
.lib-header-left {
  display: flex; align-items: center; gap: 12px;
  min-width: 0; flex-shrink: 0;
}
.lib-back-btn {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #e6e9f0; border-radius: 9px;
  background: #f4f6fb;
  color: #021d49; cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.lib-back-btn:hover { background: #eef1f7; border-color: #d6dbe7; transform: translateX(-1px); }
.lib-back-btn:active { transform: translateX(0) scale(0.96); }
/* Natural navy logo on the light bar — no white-invert filter */
.lib-logo { height: 18px; flex-shrink: 0; }
.lib-header-sep { width: 1px; height: 22px; background: #e6e9f0; flex-shrink: 0; }
.lib-title {
  margin: 0;
  color: #021d49;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}


/* ====================================================================
   2. HEADER SEARCH + TAB BUTTONS  (light treatment)
   ==================================================================== */
.lib-header-center {
  flex: 1; min-width: 0;
  display: flex; justify-content: center;
  padding: 0 12px;
}
.lib-search-wrap { position: relative; width: 100%; max-width: 400px; }
.lib-search-icon {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  color: #8a93ad;
  pointer-events: none;
  display: flex;
}
.lib-search-input {
  width: 100%;
  padding: 8px 14px 8px 34px;
  border: 1px solid #e6e9f0;
  border-radius: 10px;
  background: #f4f6fb;
  color: #021d49;
  font-family: 'Inter', sans-serif; font-size: 13px;
  outline: none;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.lib-search-input::placeholder { color: #8a93ad; }
.lib-search-input:focus {
  border-color: #1800ff;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(24,0,255,0.14);
}

.lib-header-right { display: flex; gap: 6px; flex-shrink: 0; }
.lib-tab-btn {
  padding: 7px 16px;
  border: 1px solid #e6e9f0;
  border-radius: 10px;
  background: #f4f6fb;
  color: #4a5170;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  white-space: nowrap; cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.lib-tab-btn:hover { color: #021d49; background: #eef1f7; border-color: #d6dbe7; transform: translateY(-1px); }
.lib-tab-btn.active {
  background: #1800ff;
  border-color: #1800ff;
  color: #fff;
  box-shadow: 0 4px 14px rgba(24,0,255,0.28);
}


/* ====================================================================
   3. TAB PANES
   ==================================================================== */
.lib-tab-pane {
  flex: 1;
  overflow-y: auto; overflow-x: hidden;
  padding: 24px clamp(16px, 3vw, 34px) 60px;
}
.lib-tab-pane.hidden { display: none; }


/* ====================================================================
   4. EXECUTIVE HERO BAND
   Reads like a confident summary band — thin separators between stats.
   ==================================================================== */
.lib-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  margin-bottom: 20px;
  background: #e6e9f0;            /* shows through gaps as hairline dividers */
  border: 1px solid #e6e9f0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(2,29,73,0.04);
}
.lib-hero-stat {
  background: #fff;
  padding: 20px 22px;
  transition: background 0.16s ease;
}
.lib-hero-stat:hover { background: #fbfcfe; }
.lib-hero-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px; font-weight: 800; line-height: 1.04;
  letter-spacing: -0.025em;
  color: #021d49;
}
.lib-hero-label {
  margin-top: 7px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: #6a7290;
}


/* ====================================================================
   5. KPI STRIP
   auto-fit minmax so cards never crush or clip.
   ==================================================================== */
.lib-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.lib-kpi {
  padding: 18px 20px;
  border: 1px solid #e6e9f0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(2,29,73,0.04);
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.lib-kpi:hover {
  transform: translateY(-3px);
  border-color: #dde2ee;
  box-shadow: 0 10px 28px rgba(2,29,73,0.10);
}
.lib-kpi-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 29px; font-weight: 800; line-height: 1.04;
  letter-spacing: -0.025em;
  color: #021d49;
}
.lib-kpi-label {
  margin-top: 7px;
  font-size: 12px; font-weight: 600;
  color: #4a5170;
}
.lib-kpi-sub {
  margin-top: 4px;
  font-size: 11px;
  color: #9aa1b8;
}


/* ====================================================================
   6. FILTER CHIPS
   ==================================================================== */
.lib-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 22px;
}
.lib-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border: 1px solid #e1e5ee;
  border-radius: 999px;
  background: #fff;
  color: #4a5170;
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600;
  white-space: nowrap; cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.lib-chip:hover {
  border-color: #c2c8da;
  box-shadow: 0 3px 10px rgba(2,29,73,0.07);
  transform: translateY(-1px);
}
.lib-chip.active {
  background: #021d49;
  border-color: #021d49;
  color: #fff;
  box-shadow: 0 4px 12px rgba(2,29,73,0.20);
}
.lib-chip-won.active  { background: #059669; border-color: #059669; box-shadow: 0 4px 12px rgba(5,150,105,0.28); }
.lib-chip-lost.active { background: #7c3aed; border-color: #7c3aed; box-shadow: 0 4px 12px rgba(124,58,237,0.28); }
.lib-chip-n {
  min-width: 20px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(2,29,73,0.08);
  font-size: 11px; font-weight: 700; text-align: center;
}
.lib-chip.active .lib-chip-n { background: rgba(255,255,255,0.24); color: #fff; }
.lib-chip-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--chip-c, #94a3b8);
  flex-shrink: 0;
}


/* ====================================================================
   7. PROJECT GRID (cards, banner, load more, empty)
   ==================================================================== */
.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
  align-items: start;
}

/* Banner row + load-more sit inside the grid (span full width) */
.lib-grid-banner {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px;
  font-size: 12.5px; color: #6a7290;
}
.lib-loadmore {
  padding: 6px 15px;
  border: none; border-radius: 9px;
  background: #021d49;
  color: #fff;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.lib-loadmore:hover { background: #1800ff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(24,0,255,0.30); }

/* Banner toolbar: count on the left, sort + export on the right */
.lib-grid-count { flex: 1; }
.lib-grid-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.lib-sort {
  padding: 6px 12px; border: 1px solid #dfe3ee; border-radius: 9px;
  background: #fff; color: #2a3050; font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600; cursor: pointer; outline: none;
}
.lib-sort:focus { border-color: #1800ff; box-shadow: 0 0 0 3px rgba(24,0,255,0.12); }
.lib-export {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border: 1px solid #dfe3ee; border-radius: 9px;
  background: #fff; color: #021d49; font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all 0.16s ease;
}
.lib-export:hover { border-color: #1800ff; color: #1800ff; box-shadow: 0 2px 8px rgba(2,29,73,0.08); }

/* Card — left rail color driven by --st-c, staggered fade-in via --card-index */
.lib-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px;
  border: 1px solid #e6e9f0;
  border-left: 4px solid var(--st-c, #94a3b8);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(2,29,73,0.04);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  animation: lib-card-in 0.4s ease both;
  animation-delay: calc(min(var(--card-index, 0), 24) * 28ms);
}
.lib-card:hover {
  transform: translateY(-3px);
  border-color: #dde2ee;
  box-shadow: 0 12px 30px rgba(2,29,73,0.12);
}
.lib-card-top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.lib-card-name {
  min-width: 0;
  color: #021d49;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px; font-weight: 700; line-height: 1.25;
  letter-spacing: -0.01em;
  word-break: break-word;
}
.lib-card-inv {
  display: block;
  margin-top: 3px;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 500;
  color: #9aa1b8;
}
.lib-card-price {
  flex-shrink: 0;
  color: #059669;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px; font-weight: 800; letter-spacing: -0.02em;
  white-space: nowrap;
}
.lib-card-client {
  color: #5a6178;
  font-size: 12.5px; line-height: 1.4;
  word-break: break-word;
}
.lib-card-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
}
.lib-card-status {
  display: inline-flex; align-items: center; gap: 7px;
  color: #3a4160; font-size: 11.5px; font-weight: 600;
}
.lib-card-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--st-c, #94a3b8);
  flex-shrink: 0;
}
.lib-card-badge {
  padding: 3px 9px;
  border-radius: 7px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
  white-space: nowrap;
}
.lib-card-badge.won     { background: #d1fae5; color: #047857; }
.lib-card-badge.lost    { background: #ede9fe; color: #6d28d9; }
.lib-card-badge.neutral { background: #f1f3f8; color: #5a6178; }
.lib-card-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid #eef0f5;
  font-size: 11.5px; color: #9aa1b8;
}
.lib-card-days { color: #b0b6c8; white-space: nowrap; }

.lib-empty {
  grid-column: 1 / -1;
  padding: 56px 20px;
  text-align: center;
  color: #9aa1b8; font-size: 13px;
}


/* ====================================================================
   8. INTELLIGENCE + TRENDS DASHBOARD — PANEL SYSTEM
   One cohesive grid for BOTH the Intelligence and Trends dashboards.
   auto-fit minmax(320px) → panels are equal-width tiles that reflow
   cleanly; .lib-span-2 highlights wide panels on roomy screens and
   collapses to 1 col on narrow. EVERY panel shares the same padding,
   radius, border, shadow and title/sub rhythm so the dashboard reads
   as a single designed system (Stripe / Linear grade).
   ==================================================================== */
.lib-intel-scroll { width: 100%; }
.lib-intel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;       /* panels top-align — no stretched empty space */
}

/* Base panel — the single source of truth for tile chrome.
   Identical internal padding + corner + border + resting shadow. */
.lib-card-panel {
  min-width: 0;             /* allow inner tables/charts to shrink, not overflow the grid */
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  border: 1px solid #e6e9f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(2,29,73,0.04);
  transition: box-shadow 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}
.lib-card-panel:hover {
  transform: translateY(-2px);
  border-color: #dde2ee;
  box-shadow: 0 6px 20px rgba(2,29,73,0.08);
}
.lib-span-2 { grid-column: span 2; }

/* Highlight / summary panels get a tasteful brand top-accent so the
   "summary" tier (comparator, projection) reads as a distinct group from
   the "detail" tier (funnel, tables, charts) — Vignelli-minimal: a 2px
   hairline, no loud blocks. We target the projection panel (always has
   .lib-projection) and the comparator panel (the only panel containing
   .lib-compare). :has keeps this precise — no accent leaks onto the
   Intelligence funnel panel, which is also a first .lib-span-2 child. */
.lib-card-panel.lib-projection { border-top: 2px solid #1800ff; }
.lib-card-panel:has(.lib-compare) { border-top: 2px solid #1800ff; }

/* Standardized panel rhythm — same title/sub/content spacing everywhere.
   Default: title → 16px → content. When a sub follows, the title tightens
   to 4px and the sub owns the 16px gap. This keeps every panel's vertical
   rhythm identical whether or not it has a sub-line. */
.lib-panel-title {
  margin: 0 0 16px;
  color: #021d49;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
}
.lib-panel-title:has(+ .lib-panel-sub) { margin-bottom: 4px; }
.lib-panel-sub {
  margin: 0 0 16px;
  color: #6a7290;
  font-size: 12.5px; line-height: 1.4;
}
.lib-panel-hint {
  margin: 14px 0 0;
  color: #9aa1b8;
  font-size: 11.5px; font-style: italic; line-height: 1.4;
}


/* ====================================================================
   9. FUNNEL
   Flexible label column (minmax + ellipsis) so labels never clip.
   ==================================================================== */
.lib-funnel { display: flex; flex-direction: column; gap: 8px; }
.lib-funnel-row {
  display: grid;
  grid-template-columns: minmax(110px, 1.1fr) minmax(0, 2.2fr) auto auto;
  align-items: center; gap: 14px;
  padding: 3px 6px;
  margin: 0 -6px;
  border-radius: 8px;
  transition: background 0.16s ease;
}
.lib-funnel-row:hover { background: #f7f9fd; }
.lib-funnel-label {
  min-width: 0;
  color: #3a4160;
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lib-funnel-track {
  position: relative;
  height: 22px;
  border-radius: 7px;
  background: #eef0f5;
  overflow: hidden;
}
.lib-funnel-fill {
  height: 100%;
  min-width: 3px;
  border-radius: 7px;
  transition: width 0.6s cubic-bezier(0.2,0.8,0.2,1);
}
.lib-funnel-n {
  min-width: 34px;
  color: #021d49;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px; font-weight: 800; text-align: right;
}
.lib-funnel-v {
  min-width: 86px;
  color: #6a7290;
  font-size: 12px; text-align: right;
  white-space: nowrap;
}


/* ====================================================================
   10. CONVERTED VS LOST
   ==================================================================== */
.lib-cvl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lib-cvl-col {
  padding: 18px 16px;
  border-radius: 12px;
  text-align: center;
  border: 1px solid transparent;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.lib-cvl-col:hover { transform: translateY(-2px); }
/* Tinted, not saturated: green=won, violet=lost */
.lib-cvl-col.won  { background: rgba(5,150,105,0.08);  border-color: rgba(5,150,105,0.20); }
.lib-cvl-col.lost { background: rgba(124,58,237,0.08); border-color: rgba(124,58,237,0.20); }
.lib-cvl-col.won:hover  { box-shadow: 0 6px 16px rgba(5,150,105,0.14); }
.lib-cvl-col.lost:hover { box-shadow: 0 6px 16px rgba(124,58,237,0.14); }
.lib-cvl-tag {
  margin-bottom: 8px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.lib-cvl-col.won  .lib-cvl-tag { color: #047857; }
.lib-cvl-col.lost .lib-cvl-tag { color: #6d28d9; }
.lib-cvl-price {
  color: #021d49;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px; font-weight: 800; letter-spacing: -0.025em;
}
.lib-cvl-sf {
  margin-top: 4px;
  color: #6a7290; font-size: 11.5px;
}


/* ====================================================================
   11. VELOCITY
   ==================================================================== */
.lib-velocity { display: flex; gap: 28px; flex-wrap: wrap; }
.lib-velocity > div { display: flex; flex-direction: column; gap: 2px; }
.lib-vel-n {
  color: #021d49;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 30px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.05;
}
.lib-vel-l { color: #6a7290; font-size: 11.5px; }


/* ====================================================================
   12. TABLES  — never clip
   The JS emits some tables inside .lib-table-wrap (the typology trend,
   which can have many year columns) and some bare inside the panel
   (Intelligence tables, YoY — all narrow, ≤6 columns).

   · .lib-table-wrap  → a real horizontal scroller. This is the element
     that scrolls; the table inside it is allowed to exceed the wrapper
     width (min-width) so columns never crush. THIS is the cut-off fix.
   · bare .lib-table  → normal width:100% table; their column counts fit
     the panel, so no scroll machinery (and no risk of forcing the panel
     to overflow with an empty narrow table).
   ==================================================================== */
.lib-table-wrap {
  margin: 4px -4px 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #cdd4e3 transparent;
}
.lib-table-wrap::-webkit-scrollbar { height: 7px; }
.lib-table-wrap::-webkit-scrollbar-thumb { background: #cdd4e3; border-radius: 999px; }
.lib-table-wrap::-webkit-scrollbar-track { background: transparent; }

.lib-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
/* Inside the scroller, allow the table to grow past the wrapper so the
   wrapper (not the panel) scrolls and columns stay legible. */
.lib-table-wrap .lib-table {
  min-width: 100%;
  width: max-content;
  max-width: none;
}

.lib-table th {
  padding: 8px 11px;
  border-bottom: 2px solid #eef0f5;
  color: #8a91a8;
  font-size: 10px; font-weight: 700;
  text-align: left; text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
  background: #fff;          /* keeps header opaque if a first col is sticky */
}
.lib-table td {
  padding: 9px 11px;
  border-bottom: 1px solid #f2f4f9;
  color: #2a3050;
  white-space: nowrap;       /* numeric/year cells stay on one line → scroll, never crush */
}
.lib-table tbody tr { transition: background 0.12s ease; }
.lib-table tbody tr:hover { background: #fafbfe; }
.lib-table tbody tr:last-child td { border-bottom: none; }
.lib-table td.num, .lib-table th.num { text-align: right; white-space: nowrap; }
.lib-table td:first-child, .lib-table th:first-child {
  color: #021d49; font-weight: 600;
}
.lib-stale-days { color: #d97706; font-weight: 800; }


/* ====================================================================
   13. RESPONSIVE
   ==================================================================== */
@media (max-width: 1100px) {
  /* Wide panels collapse to a single column — the auto-fit grid keeps
     the remaining tiles consistent. */
  .lib-span-2 { grid-column: span 1; }
  .lib-intel-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
@media (max-width: 720px) {
  .lib-header-center { display: none; }      /* hide header search */
  .lib-tab-pane { padding: 16px 14px 48px; }

  /* Single column on phones — nothing should ever sit side-by-side */
  .lib-intel-grid { grid-template-columns: 1fr; gap: 12px; }
  .lib-card-panel { padding: 16px 16px; }    /* tighter, still uniform */
  .lib-panel-sub { margin-bottom: 14px; }

  .lib-cvl { grid-template-columns: 1fr; }    /* stack converted vs lost */
  .lib-compare { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }

  .lib-funnel-row { grid-template-columns: minmax(80px, 1fr) minmax(0, 2fr) auto; }
  .lib-funnel-v { display: none; }            /* shrink funnel */
  .lib-velocity { gap: 20px; }
  .lib-vel-n { font-size: 26px; }
  .lib-hero-value, .lib-kpi-value { font-size: 25px; }

  /* Wrapped tables keep enough width to stay legible — the wrapper
     scrolls. Bare tables stay 100% and fit (few columns). */
  .lib-table-wrap .lib-table { min-width: max(100%, 320px); }
}

/* ====================================================================
   14. TRENDS — CSS bar charts (year/month/seasonality) + typology
   ==================================================================== */
.lib-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px;
}
.lib-panel-head > div { min-width: 0; }          /* title block can shrink/ellipsize */
.lib-panel-head .lib-panel-sub { margin-bottom: 0; }   /* control gets the spacing */
.lib-panel-head .lib-sort,
.lib-panel-head .lib-time-select { flex-shrink: 0; }
/* When a head carries the title+sub, give the chart that follows room */
.lib-panel-head + .lib-chart,
.lib-panel-head + .lib-chart-tall { margin-top: 16px; }

/* Bar chart row — bars grow from the baseline */
.lib-chart {
  display: flex; align-items: flex-end; gap: 6px;
  height: 150px;
  margin-top: 4px; padding-top: 8px;
  border-bottom: 1px solid #e6e9f0;
}
.lib-chart-tall { height: 190px; }
.lib-bar-col {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: 100%; gap: 4px;
  cursor: help;
}
/* The growing bar — clear track for total, brand-blue inner for converted */
.lib-bar-stack {
  width: 100%; max-width: 38px;
  background: #dfe4f1; border-radius: 6px 6px 0 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: height 0.6s cubic-bezier(0.2,0.8,0.2,1), filter 0.16s ease, opacity 0.16s ease;
  min-height: 2px;
}
.lib-bar-col:hover .lib-bar-stack { filter: brightness(0.96); }
/* Dim sibling bars slightly to spotlight the hovered one */
.lib-chart:hover .lib-bar-col:not(:hover) .lib-bar-stack { opacity: 0.72; }
.lib-bar-fill-conv {
  width: 100%;
  background: linear-gradient(180deg,#1800ff,#4f5ae8);
  border-radius: 6px 6px 0 0;
  transition: height 0.6s cubic-bezier(0.2,0.8,0.2,1);
}
.lib-bar-stack.peak { background: #ec4a00; }   /* seasonality peak month (brand orange) */
.lib-bar-label { font-size: 10px; color: #6a7290; font-weight: 600; white-space: nowrap; }
.lib-bar-n { font-size: 10px; color: #021d49; font-weight: 700; font-family: 'Space Grotesk', sans-serif; }

/* Typology table dots + converted hint.
   The type name + dot must NEVER wrap and NEVER clip even with many
   year columns. We keep the first cell on one line and pin it sticky
   so the type label stays visible while the year columns scroll. */
.lib-type-dot {
  display: inline-block;
  width: 9px; height: 9px; border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
  flex-shrink: 0;
}
.lib-type-conv {
  color: #059669;
  font-size: 10.5px; font-weight: 600;
  white-space: nowrap;       /* "(N✓)" stays on the count's line */
}

/* Typology / first-column sticky behaviour: keep the type name pinned
   to the left edge of the scroll area so it never gets clipped or lost
   when the year columns overflow horizontally. */
.lib-table-wrap .lib-table td:first-child,
.lib-table-wrap .lib-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  white-space: nowrap;
  /* subtle edge so the pinned column reads as a layer over scrolled cells */
  box-shadow: 1px 0 0 #f2f4f9;
}
.lib-table-wrap .lib-table tbody tr:hover td:first-child { background: #fafbfe; }

@media (max-width: 720px) {
  .lib-chart { height: 120px; gap: 3px; }
  .lib-chart-tall { height: 150px; }
  .lib-bar-label { font-size: 8px; }
}


/* ====================================================================
   15. MINIMAL TRANSPARENT TAB STRIP  (replaces the navy header banner)
   A thin, see-through strip at the very top of .lib-screen. NO colored
   band, NO navy bottom border — at most a hairline. Tabs on the left,
   compact search on the right. Sits directly on the #f4f6fb body.
   ==================================================================== */
.lib-tabstrip {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: transparent;          /* no banner — show the body through */
  border-bottom: 1px solid #e6e9f0; /* hairline only (or none) */
  z-index: 2;
}
.lib-tabstrip-left {
  display: flex; align-items: center; gap: 6px;
  min-width: 0; flex-wrap: wrap;
}

/* Refine .lib-tab-btn for the no-banner strip:
   inactive = solid white pill on the transparent strip (was #f4f6fb,
   which blended into the body). Active stays brand blue. */
.lib-tabstrip .lib-tab-btn,
.lib-tab-btn {
  padding: 7px 16px;
  border: 1px solid #e6e9f0;
  border-radius: 10px;
  background: #fff;
  color: #4a5170;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  white-space: nowrap; cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease,
              border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.lib-tab-btn:hover {
  color: #021d49;
  background: #f4f6fb;
  border-color: #d6dbe7;
  transform: translateY(-1px);
}
.lib-tab-btn.active {
  background: #1800ff;
  border-color: #1800ff;
  color: #fff;
  box-shadow: 0 4px 14px rgba(24,0,255,0.28);
}

/* Compact search living inside the strip (refined from §2 to sit nicely
   on the right of the transparent strip). */
.lib-tabstrip .lib-search-wrap {
  position: relative; width: 100%; max-width: 300px; flex-shrink: 1;
}
.lib-tabstrip .lib-search-icon {
  position: absolute; left: 11px; top: 50%;
  transform: translateY(-50%);
  color: #8a93ad; pointer-events: none; display: flex;
}
.lib-tabstrip .lib-search-input {
  width: 100%;
  padding: 8px 14px 8px 33px;
  border: 1px solid #e6e9f0;
  border-radius: 10px;
  background: #fff;
  color: #021d49;
  font-family: 'Inter', sans-serif; font-size: 13px;
  outline: none;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.lib-tabstrip .lib-search-input::placeholder { color: #8a93ad; }
.lib-tabstrip .lib-search-input:focus {
  border-color: #1800ff;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(24,0,255,0.14);
}


/* ====================================================================
   16. FLOATING ACTION BAR  (Leads-style floating cluster, bottom-right)
   ==================================================================== */
.lib-fab {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 60;
  display: flex; align-items: center; gap: 10px;
}
.lib-fab-btn {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #e6e9f0;
  border-radius: 999px;
  background: #fff;
  color: #021d49;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(2,29,73,0.15);
  transition: transform 0.16s ease, box-shadow 0.16s ease,
              border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.lib-fab-btn svg { display: block; }
.lib-fab-btn:hover {
  transform: translateY(-2px);
  border-color: #1800ff;
  color: #1800ff;
  box-shadow: 0 10px 26px rgba(2,29,73,0.20);
}
.lib-fab-btn:active { transform: translateY(0) scale(0.96); }

/* Primary action (export) — solid brand blue, white icon */
.lib-fab-btn.lib-fab-primary {
  background: #1800ff;
  border-color: #1800ff;
  color: #fff;
  box-shadow: 0 6px 20px rgba(24,0,255,0.32);
}
.lib-fab-btn.lib-fab-primary:hover {
  background: #1400d6;
  border-color: #1400d6;
  color: #fff;
  box-shadow: 0 10px 28px rgba(24,0,255,0.40);
}


/* ====================================================================
   17. RICH TOOLTIP  (fixed, JS-positioned, toggled via .show)
   ==================================================================== */
.lib-tooltip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  max-width: 280px;
  padding: 10px 12px;
  background: #021d49;
  color: #fff;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 12px; line-height: 1.45;
  box-shadow: 0 8px 28px rgba(2,29,73,0.30);
  opacity: 0;
  transition: opacity 0.12s ease;
}
.lib-tooltip.show { opacity: 1; }
.lib-tip-title {
  margin-bottom: 3px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 700;
  color: #fff;
}
.lib-tip-body {
  font-size: 11.5px;
  color: rgba(255,255,255,0.78);
}
[data-tip] { cursor: help; }


/* ====================================================================
   18. TIME FILTERS  (Projects tab)
   ==================================================================== */
.lib-time-filters { margin-bottom: 14px; }
.lib-time-wrap {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid #e6e9f0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(2,29,73,0.04);
}
.lib-time-wrap svg { color: #021d49; flex-shrink: 0; display: block; }
.lib-time-select {
  padding: 5px 10px;
  border: 1px solid #e6e9f0;
  border-radius: 8px;
  background: #fff;
  color: #2a3050;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  cursor: pointer; outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.lib-time-select:focus {
  border-color: #1800ff;
  box-shadow: 0 0 0 3px rgba(24,0,255,0.14);
}
.lib-time-clear {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: #f1f3f8;
  color: #6a7290;
  font-size: 13px; line-height: 1; cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.lib-time-clear:hover { background: #fde8e8; color: #ef4444; transform: scale(1.08); }
.lib-time-clear:active { transform: scale(0.94); }


/* ====================================================================
   19. AUTO-INSIGHT CARDS  (tone: good / warn / info)
   ==================================================================== */
.lib-insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.lib-insight {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px 14px 18px;
  border: 1px solid #e6e9f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(2,29,73,0.04);
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.lib-insight:hover {
  transform: translateY(-2px);
  border-color: #dde2ee;
  box-shadow: 0 8px 22px rgba(2,29,73,0.10);
}
/* Left accent rail — colored by tone */
.lib-insight::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: #94a3b8;
}
.lib-insight.good::before { background: #059669; }
.lib-insight.warn::before { background: #d97706; }
.lib-insight.info::before { background: #1800ff; }

.lib-insight-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  font-size: 16px; line-height: 1;
  background: rgba(148,163,184,0.14);
  color: #5a6178;
}
.lib-insight.good .lib-insight-icon { background: rgba(5,150,105,0.12);  color: #059669; }
.lib-insight.warn .lib-insight-icon { background: rgba(217,119,6,0.12);  color: #d97706; }
.lib-insight.info .lib-insight-icon { background: rgba(24,0,255,0.10);   color: #1800ff; }
.lib-insight-text {
  min-width: 0;
  color: #2a3050;
  font-size: 13px; line-height: 1.4;
}


/* ====================================================================
   20. PERIOD COMPARATOR
   ==================================================================== */
.lib-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.lib-compare-cell {
  padding: 16px;
  border: 1px solid #e6e9f0;
  border-radius: 12px;
  background: #fbfcfe;
  box-shadow: 0 1px 3px rgba(2,29,73,0.04);
  text-align: center;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.lib-compare-cell:hover {
  transform: translateY(-2px);
  border-color: #dde2ee;
  background: #fff;
  box-shadow: 0 8px 20px rgba(2,29,73,0.09);
}
.lib-compare-label {
  margin-bottom: 8px;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: #8a91a8;
}
.lib-compare-value {
  color: #021d49;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 26px; font-weight: 800; line-height: 1.04;
  letter-spacing: -0.025em;
}
.lib-compare-delta {
  display: inline-flex; align-items: center; gap: 3px;
  margin-top: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11.5px; font-weight: 700;
  background: #f1f3f8;
  color: #6a7290;
}
.lib-compare-delta.up   { background: #d1fae5; color: #047857; }
.lib-compare-delta.down { background: #fde8e8; color: #ef4444; }


/* ====================================================================
   21. TOP MOVERS
   ==================================================================== */
.lib-movers { display: flex; flex-direction: column; }
.lib-mover-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 8px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  border-bottom: 1px solid #f2f4f9;
  cursor: help;
  transition: background 0.16s ease;
}
.lib-mover-row:hover { background: #f7f9fd; }
.lib-mover-row:last-child { border-bottom: none; }
.lib-mover-name {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0;
  color: #021d49;
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lib-mover-name::before {
  content: '';
  flex-shrink: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mover-c, #94a3b8);
}
.lib-mover-delta {
  flex-shrink: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 800;
  white-space: nowrap;
  color: #6a7290;
}
.lib-mover-delta.up   { color: #059669; }
.lib-mover-delta.down { color: #ef4444; }


/* ====================================================================
   22. PROJECTION / RUN-RATE
   In the dashboard the JS renders this as `.lib-card-panel.lib-projection`,
   so it inherits the unified panel chrome from §8 (padding/radius/border/
   shadow + brand top-accent). We only define the INNER bits here. The
   .lib-projection chrome below is a fallback for any standalone use.
   ==================================================================== */
.lib-projection:not(.lib-card-panel) {
  padding: 18px 20px;
  border: 1px solid #e6e9f0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(2,29,73,0.04);
}
.lib-proj-value {
  color: #021d49;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 32px; font-weight: 800; line-height: 1.02;
  letter-spacing: -0.025em;
}
.lib-proj-caption {
  margin-top: 4px;
  font-size: 11.5px; color: #6a7290;
}
.lib-proj-bar {
  position: relative;
  height: 10px;
  margin: 16px 0 14px;
  border-radius: 999px;
  background: #eef0f5;
  overflow: hidden;
}
.lib-proj-fill {
  height: 100%;
  min-width: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1800ff, #4f5ae8);
  transition: width 0.5s cubic-bezier(0.2,0.8,0.2,1);
}
.lib-proj-stat {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid #f2f4f9;
  font-size: 12.5px;
}
.lib-proj-stat:first-of-type { border-top: none; }
.lib-proj-stat-label { color: #6a7290; }
.lib-proj-stat-value {
  color: #021d49;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
}


/* ====================================================================
   23. RESPONSIVE — new-section tweaks (no-banner layout)
   ==================================================================== */
@media (max-width: 720px) {
  .lib-tabstrip { padding: 12px 14px; gap: 10px; }
  .lib-tabstrip .lib-search-wrap { max-width: 160px; }

  /* Keep FAB bottom-right but smaller, and lift it above the global
     mobile tab bar so it doesn't overlap. */
  .lib-fab { bottom: 84px; right: 16px; gap: 8px; }
  .lib-fab-btn { width: 40px; height: 40px; }

  .lib-compare-value { font-size: 23px; }
  .lib-proj-value { font-size: 27px; }
}


/* ====================================================================
   24. PREDICTIVE  (Intelligence scorecards + price realization + lost
   reasons + Trends regression overlay). Shares the panel/table chrome
   above; only the section-specific bits live here.
   ==================================================================== */

/* ---- 24a. Scorecards row (top of Intelligence) ---- */
.lib-scorecards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.lib-score {
  position: relative;
  display: flex; flex-direction: column;
  padding: 16px 18px;
  border: 1px solid #e6e9f0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(2,29,73,0.04);
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.lib-score:hover {
  transform: translateY(-3px);
  border-color: #dde2ee;
  box-shadow: 0 10px 28px rgba(2,29,73,0.10);
}
/* North-star (Sales Velocity) gets the brand top-accent + tint */
.lib-score.north {
  border-top: 2px solid #1800ff;
  background: linear-gradient(180deg, rgba(24,0,255,0.04), #fff 60%);
}
.lib-score-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.lib-score-label {
  font-size: 12px; font-weight: 600; color: #4a5170;
}
.lib-score-star {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: #1800ff;
  background: rgba(24,0,255,0.10);
  padding: 2px 7px; border-radius: 999px;
  white-space: nowrap;
}
.lib-score-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 27px; font-weight: 800; line-height: 1.04;
  letter-spacing: -0.025em;
  color: #021d49;
}
.lib-score-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.lib-spark { width: 64px; height: 20px; opacity: 0.55; display: block; }
.lib-score-spark { display: inline-flex; }
.lib-score-trend {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  background: #f1f3f8; color: #6a7290;
  white-space: nowrap;
}
.lib-score-trend.up   { background: #d1fae5; color: #047857; }
.lib-score-trend.down { background: #fde8e8; color: #dc2626; }
.lib-score-trend.flat { background: #eef0f5; color: #6a7290; }
.lib-score-trend.none { background: transparent; color: #b0b6c8; }

/* ---- 24b. Price realization / leakage panel ---- */
.lib-rz-big {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 38px; font-weight: 800; letter-spacing: -0.03em; line-height: 1;
}
.lib-rz-big-sub {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 500; color: #6a7290;
  letter-spacing: 0;
}
.lib-rz-bars { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.lib-rz-bar-row {
  display: grid;
  grid-template-columns: 78px minmax(0,1fr) auto;
  align-items: center; gap: 12px;
}
.lib-rz-bar-label { font-size: 11.5px; font-weight: 600; color: #4a5170; }
.lib-rz-track {
  height: 16px; border-radius: 6px; background: #eef0f5; overflow: hidden;
}
.lib-rz-fill {
  height: 100%; min-width: 3px; border-radius: 6px;
  transition: width 0.6s cubic-bezier(0.2,0.8,0.2,1);
}
.lib-rz-fill.quoted   { background: #c2c8da; }
.lib-rz-fill.realized { background: linear-gradient(90deg,#1800ff,#4f5ae8); }
.lib-rz-bar-val {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 700; color: #021d49; white-space: nowrap;
}
.lib-rz-leak {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid #f2f4f9;
}
.lib-rz-leak-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: #8a91a8;
}
.lib-rz-leak-val {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px; font-weight: 800; color: #dc2626; letter-spacing: -0.02em;
}
.lib-rz-leak-pct { font-size: 13px; font-weight: 700; color: #ef6363; }

/* ---- 24c. Lost reasons (horizontal bars) ---- */
.lib-lostr { display: flex; flex-direction: column; gap: 9px; }
.lib-lostr-row {
  display: grid;
  grid-template-columns: minmax(90px, 1.2fr) minmax(0, 2.4fr) auto;
  align-items: center; gap: 12px;
  cursor: help;
}
.lib-lostr-label {
  min-width: 0; color: #3a4160; font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lib-lostr-track { height: 18px; border-radius: 6px; background: #eef0f5; overflow: hidden; }
.lib-lostr-fill {
  height: 100%; min-width: 3px; border-radius: 6px;
  background: linear-gradient(90deg,#7c3aed,#9a6bf0);
  transition: width 0.6s cubic-bezier(0.2,0.8,0.2,1);
}
.lib-lostr-n {
  min-width: 28px; text-align: right;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 800; color: #021d49;
}

/* ---- 24d. Trends — regression trendline overlay + projection bars ---- */
/* The chart becomes position:relative so the SVG overlay can sit on top
   of the bars, sized to the chart box (drawn in % via viewBox 0 0 100 100). */
.lib-chart-trend { position: relative; }
.lib-trendline {
  position: absolute; inset: 8px 0 0 0;   /* match .lib-chart padding-top */
  width: 100%; height: calc(100% - 8px);
  pointer-events: none; z-index: 2;
  overflow: visible;
}
/* Projected (ghost) bars — dashed outline, no fill, muted. */
.lib-bar-stack.ghost {
  background: repeating-linear-gradient(
    -45deg, rgba(236,74,0,0.10), rgba(236,74,0,0.10) 4px,
    transparent 4px, transparent 8px);
  border: 1px dashed rgba(236,74,0,0.55);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}
.lib-bar-n.proj {
  color: #ec4a00; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
}
/* Empty future-month slot (no data, no projection) — neutral placeholder
   so the chart still spans Jan→Dec without dragging the trendline to 0. */
.lib-bar-col-empty .lib-bar-stack.empty {
  height: 8px !important;
  background: repeating-linear-gradient(
    90deg, #eef0f5 0, #eef0f5 3px,
    transparent 3px, transparent 6px);
  border-radius: 4px;
  opacity: 0.6;
}
.lib-bar-col-empty .lib-bar-label { opacity: 0.5; }
.lib-trend-legend {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 12px;
}
.lib-trend-legend-item {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; color: #6a7290; font-weight: 600;
}
.lib-trend-swatch { width: 18px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.lib-trend-swatch.line {
  height: 0; border-top: 2px dashed #ec4a00; border-radius: 0;
}
.lib-trend-swatch.ghost {
  background: repeating-linear-gradient(
    -45deg, rgba(236,74,0,0.12), rgba(236,74,0,0.12) 3px,
    transparent 3px, transparent 6px);
  border: 1px dashed rgba(236,74,0,0.55);
}

/* ---- 24e. Trends — REAL SALES dual-series money charts -------------
   Vendido (azul, brand) vs Cobrado (verde) side-by-side per slot.
   Sourced from /api/library/sales — propuestas aceptadas vs pagos
   recibidos. Two distinct colors so the user never confuses them. */
.lib-chart-money .lib-bar-group {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: 100%; gap: 4px;
  cursor: help;
}
.lib-chart-money .lib-bar-pair {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 3px; width: 100%; height: 100%;
}
/* Each series bar grows from baseline; capped width so pairs stay tidy. */
.lib-chart-money .lib-bar-stack {
  width: 100%; max-width: 16px;
  border-radius: 5px 5px 0 0;
  min-height: 2px;
  transition: height 0.6s cubic-bezier(0.2,0.8,0.2,1), filter 0.16s ease, opacity 0.16s ease;
}
.lib-chart-money .lib-bar-stack.sold {
  background: linear-gradient(180deg,#1800ff,#4f5ae8);   /* VENDIDO — brand blue */
}
.lib-chart-money .lib-bar-stack.collected {
  background: linear-gradient(180deg,#059669,#34d399);   /* COBRADO — green */
}
.lib-chart-money .lib-bar-group:hover .lib-bar-stack { filter: brightness(1.05); }
.lib-chart-money:hover .lib-bar-group:not(:hover) .lib-bar-stack { opacity: 0.7; }
.lib-chart-money .lib-bar-col-empty .lib-bar-stack { opacity: 0.4; }

/* Money-chart legend swatches (reuse .lib-trend-swatch box). */
.lib-trend-swatch.sold      { background: linear-gradient(180deg,#1800ff,#4f5ae8); }
.lib-trend-swatch.collected { background: linear-gradient(180deg,#059669,#34d399); }

/* SALES-base access-error banner (full-width, above the grid). */
.lib-sales-banner { margin-bottom: 14px; }


/* ====================================================================
   25. CUSTOMER EXCELLENCE  (Clientes tab) — RFM segments, RFM matrix,
   churn queue, expansion, cohort retention, top accounts. Reuses the
   .lib-intel-grid / .lib-card-panel / .lib-table-wrap / .lib-table
   system; only the section-specific bits live here.
   ==================================================================== */
.lib-customers-scroll { width: 100%; }

/* ---- 25a. RFM segment distribution bars ---- */
.lib-seg-bars { display: flex; flex-direction: column; gap: 11px; }
.lib-seg-row {
  display: grid;
  grid-template-columns: minmax(110px, 1.1fr) minmax(0, 2.4fr) auto;
  align-items: center; gap: 12px;
  cursor: help;
}
.lib-seg-label {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0; color: #3a4160; font-size: 12.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lib-seg-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.lib-seg-track { height: 18px; border-radius: 6px; background: #eef0f5; overflow: hidden; }
.lib-seg-fill {
  height: 100%; min-width: 3px; border-radius: 6px;
  transition: width 0.6s cubic-bezier(0.2,0.8,0.2,1);
}
.lib-seg-n {
  min-width: 30px; text-align: right;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px; font-weight: 800; color: #021d49;
}

/* Segment chip used in tables (color set inline per-segment) */
.lib-seg-chip {
  display: inline-block;
  padding: 2px 9px; border-radius: 7px;
  font-size: 10.5px; font-weight: 700;
  white-space: nowrap;
}

/* ---- 25b. RFM matrix (5x5 grid) ---- */
.lib-rfm-wrap {
  display: grid;
  grid-template-columns: 16px 1fr;
  grid-template-areas: "axisY grid" ".  axisX";
  gap: 6px;
  align-items: center;
}
.lib-rfm-axis-y {
  grid-area: axisY;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: #8a91a8;
  text-align: center;
}
.lib-rfm-axis-x {
  grid-area: axisX; justify-self: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: #8a91a8;
}
.lib-rfm-grid {
  grid-area: grid;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 5px;
  aspect-ratio: 1 / 1;
}
.lib-rfm-cell {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #e6e9f0;
  border-radius: 8px;
  background: rgba(24,0,255,0.04);
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
  min-height: 34px;
}
.lib-rfm-cell:hover {
  transform: translateY(-1px) scale(1.03);
  border-color: #1800ff;
  box-shadow: 0 4px 12px rgba(24,0,255,0.18);
  z-index: 1;
}
.lib-rfm-cell.empty { cursor: default; background: #f7f9fd !important; }
.lib-rfm-cell.empty:hover { transform: none; border-color: #e6e9f0; box-shadow: none; }
.lib-rfm-cell.selected {
  border-color: #1800ff; border-width: 2px;
  box-shadow: 0 0 0 3px rgba(24,0,255,0.16);
}
.lib-rfm-count {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 800; color: #021d49;
  mix-blend-mode: multiply;
}
.lib-rfm-detail { margin-top: 16px; padding-top: 14px; border-top: 1px solid #f2f4f9; }
.lib-rfm-detail-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 700; color: #021d49;
}
.lib-rfm-detail-n { color: #8a91a8; font-weight: 600; }
.lib-rfm-detail-head .lib-time-clear { margin-left: auto; }
.lib-rfm-code {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px; font-weight: 700; color: #4a5170;
  letter-spacing: 0.02em;
}

/* ---- 25c. Customer badges (risk / expand) ---- */
.lib-cust-badge {
  display: inline-block;
  padding: 3px 9px; border-radius: 7px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
  white-space: nowrap;
}
.lib-cust-badge.risk   { background: rgba(217,119,6,0.14);  color: #b45309; }
.lib-cust-badge.expand { background: rgba(5,150,105,0.14);  color: #047857; }

/* ---- 25d. Health bar + pill ---- */
.lib-health-bar {
  width: 80px; max-width: 100%;
  height: 8px; border-radius: 999px; background: #eef0f5; overflow: hidden;
}
.lib-health-bar-fill {
  height: 100%; min-width: 3px; border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.2,0.8,0.2,1);
}
.lib-health-pill {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 800;
}

/* ---- 25e. Cohort retention band chip ---- */
.lib-cohort-band {
  display: inline-block;
  padding: 2px 9px; border-radius: 7px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}


/* ====================================================================
   26. RESPONSIVE — predictive + customer excellence
   ==================================================================== */
@media (max-width: 1100px) {
  .lib-scorecards { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
@media (max-width: 720px) {
  .lib-scorecards { grid-template-columns: 1fr; gap: 12px; }
  .lib-score-value { font-size: 24px; }
  .lib-rz-big { font-size: 30px; }
  .lib-rz-bar-row { grid-template-columns: 64px minmax(0,1fr) auto; gap: 8px; }
  .lib-rfm-count { font-size: 11px; }
  .lib-rfm-cell { min-height: 28px; }
  .lib-health-bar { width: 60px; }
}

/* Hover tooltips are desktop-only — on touch they stick & clip at the viewport
   edge. Disable on mobile/coarse-pointer devices. */
@media (max-width: 768px), (hover: none) {
  .lib-tooltip { display: none !important; }
}