/* Insight cards - the Hub's dashboard card (Chris, 2026-09-19: "Look how these cards are setup. I like
   this, can we start moving more to this setup", pointing at Insightly's Insights page).

   One card = a title, one big number, a line saying what the number is, then the chart or table that
   explains it, and an optional footer. Cards sit in a grid that fills the width and stacks on a phone.

   <div class="ic-grid">
     <section class="ic-card">                       add ic-wide to span two columns, ic-full for the whole row
       <h3 class="ic-title">Closing rate</h3>
       <div class="ic-value">23%</div>
       <div class="ic-sub">Won out of estimates run, Aug 1 - Sep 19</div>
       <div class="ic-body"> ... bars, table, map ... </div>
       <div class="ic-foot">optional note or control</div>
     </section>
   </div>

   Bars:  <div class="ic-bars"><div class="ic-bar"><span class="ic-lab">Jack</span>
            <span class="ic-track"><i style="width:40%;background:var(--ic-s1)"></i></span><span class="ic-val">23%</span></div></div>
   Series colors are the validated categorical order (--ic-s1 ... --ic-s6): give each entity a fixed slot
   (by name, not by rank) so a filter never repaints the survivors. Numbers stay in ink, never in the
   series color. */
.ic-grid { --ic-ink:#2b2420; --ic-muted:#7a6c64; --ic-line:#e6ddd6; --ic-panel:#fff; --ic-soft:#f6f1ec;
  --ic-s1:#2a78d6; --ic-s2:#eb6834; --ic-s3:#1baf7a; --ic-s4:#eda100; --ic-s5:#e87ba4; --ic-s6:#4a3aa7;
  display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(360px, 1fr)); margin-bottom:14px; }
.ic-card { background:var(--ic-panel); border:1px solid var(--ic-line); border-radius:12px; padding:16px 18px 12px;
  display:flex; flex-direction:column; min-width:0;
  /* The card is always light, so its text must not inherit the page's ink: on a phone in dark mode the tables came out
     pale beige on white (Chris 10/7, "Ready to schedule"). Muted lines use the card's own muted tone too. */
  color:var(--ic-ink); }
.ic-card .crmmuted { color:var(--ic-muted); }
.ic-wide { grid-column:span 2; }
.ic-full { grid-column:1 / -1; }
@media (max-width:760px) { .ic-wide { grid-column:auto; } }
.ic-title { font-size:15px; font-weight:600; margin:0; color:var(--ic-ink); }
.ic-value { font-size:26px; line-height:1.2; margin-top:4px; color:var(--ic-ink); font-variant-numeric:tabular-nums; }
.ic-sub { font-size:12px; color:var(--ic-muted); margin-top:2px; }
.ic-body { margin-top:14px; flex:1; min-width:0; overflow-x:auto; }
/* Folding (Chris, 2026-09-21): a card shows its title, number and one line; the head toggles the body. */
.ic-card.ic-fold > .ic-head { cursor:pointer; user-select:none; position:relative; padding-right:22px; }
.ic-card.ic-fold > .ic-head::after { content:'\25BE'; position:absolute; right:2px; top:2px; color:var(--ic-muted); transition:transform .15s; }
.ic-card.ic-fold:not(.open) > .ic-head::after { transform:rotate(-90deg); }
.ic-card.ic-fold:not(.open) > .ic-body, .ic-card.ic-fold:not(.open) > .ic-foot { display:none; }
.ic-card.ic-fold:not(.open) { padding-bottom:14px; }
.ic-card.t-ok { border-left:4px solid var(--ic-s3); } .ic-card.t-warn { border-left:4px solid var(--ic-s4); } .ic-card.t-bad { border-left:4px solid #a3261f; }
.ic-rows .phrow { padding:7px 4px; } .ic-rows .phwho span[data-cust-phone], .ic-rows .phwho span[data-cust-job] { font-weight:600; }
.ic-more { margin-top:6px; font-size:12px; }
.ic-foot { margin-top:12px; padding-top:8px; border-top:1px solid var(--ic-line); font-size:12px; color:var(--ic-muted); }
.ic-card table { border-collapse:collapse; width:100%; }
.ic-card th, .ic-card td { border-bottom:1px solid var(--ic-line); padding:6px 8px; text-align:left; font-size:13px; white-space:nowrap; }
.ic-card th { background:var(--ic-soft); font-weight:600; color:var(--ic-ink); }
.ic-card td.n, .ic-card th.n { text-align:right; font-variant-numeric:tabular-nums; }
.ic-bars { display:flex; flex-direction:column; gap:10px; padding:4px 0; }
.ic-bar { display:grid; grid-template-columns:minmax(64px, auto) 1fr auto; align-items:center; gap:10px; font-size:13px; }
.ic-lab { color:var(--ic-ink); white-space:nowrap; }
.ic-track { position:relative; height:12px; background:var(--ic-soft); border-radius:0 4px 4px 0; }
.ic-track i { position:absolute; left:0; top:0; bottom:0; border-radius:0 4px 4px 0; min-width:2px; }
.ic-track .ic-ref { position:absolute; top:-4px; bottom:-4px; width:0; border-left:2px dashed var(--ic-muted); }
.ic-val { color:var(--ic-ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ic-val { text-align:right; }
.ic-val small { display:block; color:var(--ic-muted); font-size:11px; line-height:1.2; }
.ic-key { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:middle; }

/* Call bar at the top of the customer card while the call is live (Chris via Elon, 2026-09-22) */
.tlcallbar{padding:8px 44px 8px 15px;background:#F1FAF4;border-bottom:1px solid rgba(46,125,82,.45);font:600 13px system-ui;color:#26201C}
.tlcallbar .cbRow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tlcallbar .cbRow+.cbRow{margin-top:6px}
.tlcallbar .cbLbl{flex:1;white-space:nowrap}
.tlcallbar button,.tlcallbar select{font:600 12px system-ui;padding:5px 9px;border-radius:9px;border:1px solid rgba(46,125,82,.45);background:#fff;color:#26201C;cursor:pointer;max-width:100%}
.tlcallbar select{font-weight:500}
.tlcallbar .cbEnd{border-color:#7D1816;color:#7D1816}
.tlcallbar button:disabled,.tlcallbar select:disabled{opacity:.55;cursor:default}
/* Settings > Assets: sold and archived vehicles stay out of the way until asked for */
.asttab .astGone{display:none}
.asttab.showgone .astGone{display:table-row}