/* Colour pass (Mohamed 2026-10-25: "add more colours, like the images I uploaded"). Loaded LAST: only colour, no
   layout. What the references share (inspo-2026-10-25: 07 Syncrowave, 09/10 CRM Dash, 11, 14 Homies): a warm tinted
   page instead of flat grey, one colour per headline number (a tinted icon chip + a soft wash at the top of the card),
   one bold gradient hero card, colour-coded columns and statuses. The palette is tokens.css (the same in light and dark);
   the IB red stays the one accent for actions. Text keeps its AA contrast: colour sits in chips, washes and bars. */

/* ---------------------------------------------------------------- the page: a warm wash, not flat grey */
body {
  background:
    radial-gradient(1100px 560px at 88% -12%, rgba(255, 122, 89, 0.16), transparent 62%),
    radial-gradient(900px 520px at 12% -18%, rgba(124, 92, 230, 0.09), transparent 60%),
    radial-gradient(800px 420px at 50% 112%, rgba(37, 99, 235, 0.06), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
:root[data-theme="dark"] body {
  background:
    radial-gradient(1100px 560px at 88% -12%, rgba(240, 57, 74, 0.13), transparent 62%),
    radial-gradient(900px 520px at 12% -18%, rgba(164, 139, 245, 0.08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background:
      radial-gradient(1100px 560px at 88% -12%, rgba(240, 57, 74, 0.13), transparent 62%),
      radial-gradient(900px 520px at 12% -18%, rgba(164, 139, 245, 0.08), transparent 60%),
      var(--bg);
    background-attachment: fixed;
  }
}
.sidebar { background: color-mix(in srgb, var(--sidebar-bg) 88%, transparent); backdrop-filter: blur(14px); }
.sb__link.is-on { background: var(--red-soft); color: var(--red-ink); box-shadow: inset 3px 0 0 var(--red); }
.sb__link.is-on .icon { color: var(--red); }

/* ---------------------------------------------------------------- headline numbers: one colour each */
.kc { --tone: var(--slate); --tone-soft: var(--slate-soft); --tone-ink: var(--slate-ink); position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--tone-soft) 0, var(--paper) 62%); }
.kc::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--tone); opacity: 0.85; }
.kc .kc__ico { background: var(--tone); color: #fff; box-shadow: 0 6px 14px -6px var(--tone); }
.kc .kc__label { color: var(--tone-ink); font-weight: 600; }
.kc--t-leads { --tone: var(--teal); --tone-soft: var(--teal-soft); --tone-ink: var(--teal-ink); }
.kc--t-hot { --tone: var(--amber); --tone-soft: var(--amber-soft); --tone-ink: var(--amber-ink); }
.kc--t-booked { --tone: var(--blue); --tone-soft: var(--blue-soft); --tone-ink: var(--blue-ink); }
.kc--t-showed { --tone: var(--lilac); --tone-soft: var(--lilac-soft); --tone-ink: var(--lilac-ink); }
/* the money: the one hero card (ref 07 "Overall Revenue"), IB red into coral, white text */
.kc--t-cash { background: linear-gradient(135deg, #e11d2e 0%, #f0394a 45%, #ff7a59 100%); color: #fff; box-shadow: 0 18px 36px -18px rgba(225, 29, 46, 0.65); }
.kc--t-cash::before { display: none; }
.kc--t-cash::after { content: ''; position: absolute; right: -40px; top: -60px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 65%); pointer-events: none; }
.kc--t-cash .kc__ico { background: rgba(255, 255, 255, 0.22); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.kc--t-cash .kc__label, .kc--t-cash .kc__vs, .kc--t-cash .kn, .kc--t-cash .kn * { color: #fff !important; }
.kc--t-cash .kc__vs { opacity: 0.85; }
.kc--t-cash .delta, .kc--t-cash [class*="delta"] { background: rgba(255, 255, 255, 0.22) !important; color: #fff !important; }

/* ---------------------------------------------------------------- the pipeline: each column in its status colour */
.kcol { --col: var(--st-new-dot); --col-soft: var(--st-new-bg); background: linear-gradient(180deg, var(--col-soft) 0, var(--paper-2) 140px); box-shadow: 0 0 0 1px var(--line), inset 0 3px 0 var(--col); }
.kcol--contacted { --col: var(--st-contacted-dot); --col-soft: var(--st-contacted-bg); }
.kcol--booked { --col: var(--st-booked-dot); --col-soft: var(--st-booked-bg); }
.kcol--call_done { --col: var(--st-call_done-dot); --col-soft: var(--st-call_done-bg); }
.kcol--client { --col: var(--st-client-dot); --col-soft: var(--st-client-bg); }
.kcol--not_a_fit { --col: var(--st-not_a_fit-dot); --col-soft: var(--st-not_a_fit-bg); }
.kcol .kcol__n { color: var(--col); font-weight: 700; }
.kcol .kcard { box-shadow: 0 0 0 1px var(--line), inset 3px 0 0 var(--col); }

/* ---------------------------------------------------------------- cards: a coloured accent on the card titles */
.card__title::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 3px; vertical-align: 1px;
  background: linear-gradient(135deg, var(--red), var(--coral)); }
.sheet .card__title::before, .kc .card__title::before { display: none; }