/* Fioreva Tech · CRM pipeline module
   Every selector carries the crm- prefix. The drag ghost lives on <body>, so card styles never
   depend on sitting inside .crm. */

/* the mount is a flex item of the panel; let it shrink so the lists scroll instead of growing the panel */
[data-module="crm"] { min-height: 0; }

.crm {
  --crm-card: #0b0b0b;
  --crm-card-hi: #121212;
  --crm-red-wash: rgba(255, 0, 37, .05);
  position: relative;
  flex: 1 1 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  min-height: 384px;
  container-type: inline-size;
  font: 500 11px/1.3 var(--mono);
  color: var(--fg-2);
}

/* single-column panels size to content, so the board gets a fixed height there
   (base.css turns the systems grid into one column at 1239px and below) */
@media (max-width: 1239px) {
  .crm { flex: none; height: 432px; }
}

/* ---------- board and columns ---------- */
.crm-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 0;
}
.crm-col {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  transition: background-color .25s;
}
.crm-col + .crm-col { border-left: 1px solid var(--line); }
.crm-col::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .24s var(--ease);
}
.crm-col.is-target { background: var(--crm-red-wash); }
.crm-col.is-target::before { transform: none; }
.crm.is-done .crm-col[data-stage="won"]::before { background: var(--mint); transform: none; }

.crm-head {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  align-content: start;
  gap: 8px 7px;
  height: 60px;
  padding: 12px 12px 0;
  border-bottom: 1px solid var(--line);
}
.crm-name {
  font: 600 12px/16px var(--mono);
  letter-spacing: 0;
  color: var(--fg);
  white-space: nowrap;
  transition: color .2s;
}
.crm-col.is-target .crm-name { color: var(--red); }
.crm-count {
  min-width: 18px;
  height: 16px;
  padding: 0 4px;
  border: 1px solid var(--line-3);
  border-radius: var(--r-s);
  font: 600 10px/14px var(--mono);
  text-align: center;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.crm-meter { justify-self: end; display: flex; gap: 2px; }
.crm-meter i { width: 4px; height: 4px; background: var(--line-3); }
.crm-col[data-stage="new"] .crm-meter i:nth-child(-n+1),
.crm-col[data-stage="contacted"] .crm-meter i:nth-child(-n+2),
.crm-col[data-stage="quote"] .crm-meter i:nth-child(-n+3) { background: var(--red); }
.crm-col[data-stage="won"] .crm-meter i { background: var(--mint); }
.crm-col.is-hit .crm-meter i { animation: crm-meter .54s steps(1, end) both; }
.crm-col.is-hit .crm-meter i:nth-child(2) { animation-delay: .06s; }
.crm-col.is-hit .crm-meter i:nth-child(3) { animation-delay: .12s; }
.crm-col.is-hit .crm-meter i:nth-child(4) { animation-delay: .18s; }
@keyframes crm-meter { 0%, 50% { background: var(--pure); } }

.crm-total {
  grid-column: 1 / -1;
  justify-self: start;
  display: flex;
  align-items: baseline;
  font: 600 16px/18px var(--mono);
  letter-spacing: -0.02em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.crm-total b, .crm-stat b { font-weight: 600; transition: color .3s; }
.crm-col[data-stage="won"] .crm-total b.is-counting:not(.is-down),
.crm-stat-won b.is-counting:not(.is-down) { color: var(--mint); }
.crm-cur {
  margin-right: 4px;
  font: 500 10px/1 var(--mono);
  letter-spacing: .04em;
  color: var(--fg-3);
}

.crm-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 8px 12px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-3) transparent;
}
.crm-item { position: relative; flex: none; }

/* ---------- cards ---------- */
.crm-card {
  position: relative;
  display: grid;
  /* one track no wider than the card, so a long line can't push the chips out of it */
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 8px 9px 9px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-m);
  background: var(--crm-card);
  color: var(--fg-2);
  font: 500 11px/1.3 var(--mono);
  text-align: left;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overflow: hidden;
  transition: border-color .2s, background-color .2s, transform .24s var(--ease);
}
@media (hover: hover) {
  .crm-card:hover { border-color: var(--line-3); background: var(--crm-card-hi); }
}
.crm-card.is-pressing { transform: scale(.97); }
.crm-card.is-flash { border-color: var(--red); }
.crm-card.is-source {
  border-style: dashed;
  border-color: var(--line-3);
  background: transparent;
  cursor: grabbing;
}
.crm-card.is-source > * { visibility: hidden; }
.crm-card.is-landing { opacity: 0; transition: none; }

/* names wrap instead of being cut, so they survive text-spacing overrides; at default spacing they fit one line */
.crm-card-name {
  display: block;
  font: 600 var(--crm-name, 13px)/16px var(--mono);
  letter-spacing: -0.01em;
  color: var(--fg);
  overflow-wrap: anywhere;
}
/* a chip that doesn't fit (a narrow card, or larger text spacing) wraps under its neighbour */
.crm-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 6px;
  min-width: 0;
  min-height: 18px;
}
.crm-val {
  display: flex;
  align-items: baseline;
  font: 600 12px/1 var(--mono);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.crm-owner {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 18px;
  border: 1px solid var(--line-3);
  border-radius: var(--r-s);
  font: 600 9.5px/1 var(--mono);
  letter-spacing: .03em;
  color: var(--fg-2);
}
.crm-owner.is-ai { border-color: rgba(0, 255, 194, .45); color: var(--mint); }
.crm-src {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  height: 18px;
  padding: 0 6px 0 5px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  font: 500 11px/1 var(--mono);
  color: var(--fg-2);
  white-space: nowrap;
}
.crm-src-ai { border-color: var(--mint); background: var(--mint); color: #000; }
.crm-px { flex: none; fill: currentColor; shape-rendering: crispEdges; }
.crm-won {
  display: none;
  align-items: center;
  gap: 4px;
  font: 600 11px/1 var(--mono);
  color: var(--mint);
}
.crm-card.is-won .crm-won { display: inline-flex; }
.crm-won-word { display: var(--crm-won-word, inline); }
.crm-sub {
  display: grid;
  gap: 2px;
  padding-top: 7px;
  border-top: 1px dashed var(--line-2);
  font: 400 11px/15px var(--sans);
  color: var(--fg-2);
}
.crm-sub-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 11px/15px var(--mono);
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.crm-sub[data-kind="order"] {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 11px/15px var(--mono);
  color: var(--fg-3);
}

/* back strip: the card's last row shows where the deal goes back to, and a transparent
   button on top of that row (a sibling of the card) takes the click */
.crm-card-back {
  display: flex;
  align-items: center;
  gap: 7px;
  height: var(--crm-back-h, 26px);
  margin: 1px -9px -9px -10px;
  padding: 0 9px 0 10px;
  border-top: 1px dashed var(--line-2);
  font: 500 11px/1 var(--mono);
  color: var(--fg-3);
  white-space: nowrap;
  transition: color .2s, background-color .2s;
}
.crm-card-back > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crm-back {
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: calc(var(--crm-back-h, 26px) - 1px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0 0 calc(var(--r-m) - 1px) calc(var(--r-m) - 1px);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* hover only where a pointer can hover, so a tap on a touch screen doesn't leave the strip lit */
@media (hover: hover) {
  .crm-item:has(> .crm-back:hover) .crm-card-back { color: var(--fg); background: rgba(255, 255, 255, .05); }
}
.crm-item:has(> .crm-back:active) .crm-card-back { background: rgba(255, 255, 255, .09); }
.crm-board.is-dragging .crm-back { pointer-events: none; }
/* touch: a taller strip, and the hit area fills the 6px gap under the card (29 + 7 = 36px in all) */
@media (pointer: coarse) {
  .crm-board, .crm-ghost { --crm-back-h: 30px; }
  .crm-back::after { content: ""; position: absolute; inset: 0 0 -7px; }
}

/* won: a red stepped wipe, the same pixel wipe as the site's red buttons */
.crm-flash {
  position: absolute;
  inset: -1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 11px;
  border-radius: inherit;
  background: var(--red);
  color: #000;
  font: 700 13px/1 var(--mono);
  letter-spacing: -0.01em;
  pointer-events: none;
  visibility: hidden;
}
.crm-flash-word { display: inline-flex; align-items: center; gap: 6px; }
.crm-flash .crm-px { width: 14px; height: 14px; }
.crm-card.is-flash .crm-flash { visibility: visible; animation: crm-wipe .9s both; }
@keyframes crm-wipe {
  0%, 40% { clip-path: inset(0 0 0 0); animation-timing-function: steps(6, end); }
  100% { clip-path: inset(0 0 0 100%); }
}

/* ---------- drop slot, empty column, folded stack ---------- */
.crm-slot {
  flex: none;
  border: 1px dashed rgba(255, 0, 37, .7);
  border-radius: var(--r-m);
  background: var(--crm-red-wash);
  transition: height .2s var(--ease);
}
.crm-empty {
  flex: none;
  display: grid;
  place-items: center;
  height: 76px;
  padding: 0 8px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-m);
  color: var(--fg-3);
  font: 500 11px/1.3 var(--mono);
  text-align: center;
  transition: border-color .2s, color .2s;
}
.crm-empty:not(:only-child) { display: none; }
.crm-board.is-dragging .crm-col:not(.is-origin) .crm-empty { border-color: var(--line-3); color: var(--fg-2); }

.crm-stack {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 32px;
  margin-bottom: 7px;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-m);
  background: var(--crm-card);
  color: var(--fg-3);
  font: 500 11px/1 var(--mono);
  white-space: nowrap;
}
.crm-stack::before,
.crm-stack::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: -4px;
  height: 4px;
  border: 1px solid var(--line-2);
  border-top: 0;
  border-radius: 0 0 var(--r-s) var(--r-s);
}
.crm-stack::after { left: 10px; right: 10px; bottom: -7px; height: 3px; border-color: var(--line); }
.crm-stack b { font-weight: 600; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.crm-stack-label { display: flex; gap: 5px; }
.crm-stack-val { display: flex; align-items: baseline; }
.crm-stack.is-bump { animation: crm-bump .5s steps(3, end); }
@keyframes crm-bump { from { border-color: var(--mint); } }

/* ---------- footer ---------- */
.crm-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  min-height: 44px;
  padding: 8px 12px;
  border-top: 1px solid var(--line-2);
}
.crm-stats { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.crm-stat { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.crm-stat dt { color: var(--fg-3); }
.crm-stat dd {
  display: flex;
  align-items: baseline;
  font: 600 12px/1 var(--mono);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.crm-hint,
.crm-sync,
.crm-done {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  color: var(--fg-2);
  white-space: nowrap;
}
.crm-hint .crm-px { fill: var(--red); }
.crm-sync, .crm-done { display: none; }
.crm.is-idle .crm-hint { display: none; }
.crm.is-idle .crm-sync { display: flex; }
.crm-sync i { width: 4px; height: 4px; background: var(--red); }
.crm.is-loading .crm-sync i { animation: crm-sync .6s steps(1, end) infinite; }
.crm.is-loading .crm-sync i:nth-child(2) { animation-delay: .2s; }
.crm.is-loading .crm-sync i:nth-child(3) { animation-delay: .4s; }
@keyframes crm-sync { 0%, 66% { opacity: .25; } 67%, 100% { opacity: 1; } }
.crm-sync span { margin-left: 3px; }
.crm.is-done .crm-hint { display: none; }
.crm.is-done .crm-done { display: flex; }
.crm-done { color: var(--fg); }
.crm-done .crm-px { fill: var(--mint); }
.crm-reset {
  min-height: 36px;
  margin: -4px 0;
  padding: 0 12px;
  border: 1px solid var(--line-3);
  border-radius: var(--r-s);
  background: transparent;
  color: var(--fg);
  font: 600 11px/1 var(--mono);
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.crm-reset:hover { border-color: var(--fg); background: rgba(255, 255, 255, .06); }
.crm-demo {
  padding: 3px 5px 2px;
  border: 1px solid var(--line-3);
  border-radius: 2px;
  font: 500 10px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-2);
  white-space: nowrap;
}

/* ---------- activity strip ---------- */
.crm-act {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 16px;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
}
.crm-act-label { font: 500 11px/20px var(--mono); color: var(--fg-3); }
.crm-act-list { display: grid; align-content: start; height: 40px; overflow: hidden; }
.crm-act-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 20px;
  font: 500 11px/20px var(--mono);
  color: var(--fg-3);
  white-space: nowrap;
}
.crm-act-row time { flex: none; font-variant-numeric: tabular-nums; }
.crm-act-row i { flex: none; width: 4px; height: 4px; background: var(--fg-3); }
.crm-act-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crm-act-row b { font-weight: 600; color: var(--fg-2); }
.crm-act-row:first-child span { color: var(--fg-2); }
.crm-act-row:first-child b { color: var(--fg); }
.crm-act-row[data-kind="quote"] i { background: var(--red); }
.crm-act-row[data-kind="won"] i,
.crm-act-row[data-kind="order"] i { background: var(--mint); }
.crm-act-row[data-kind="follow"] i { background: var(--cream); }
.crm-track { display: none; }

/* ---------- loading skeleton (before the board is first seen) ---------- */
.crm.is-idle .crm-card-name > span,
.crm.is-idle .crm-val,
.crm.is-idle .crm-owner,
.crm.is-idle .crm-src,
.crm.is-idle .crm-sub-text,
.crm.is-idle .crm-card-back > span,
.crm.is-idle .crm-count,
.crm.is-idle .crm-total,
.crm.is-idle .crm-stat dd,
.crm.is-idle .crm-stack-label,
.crm.is-idle .crm-stack-val,
.crm.is-idle .crm-act-row span {
  border-color: transparent;
  border-radius: 2px;
  background: var(--line-2);
  color: transparent;
}
.crm.is-idle .crm-act-row b { color: transparent; }
.crm.is-idle .crm-cur,
.crm.is-idle .crm-card .crm-px,
.crm.is-idle .crm-won,
.crm.is-idle .crm-stack b { visibility: hidden; }
.crm.is-loading .crm-card-name > span,
.crm.is-loading .crm-val,
.crm.is-loading .crm-src,
.crm.is-loading .crm-total { animation: crm-skel .56s steps(2, end) infinite alternate; }
@keyframes crm-skel { to { opacity: .45; } }
.crm.is-revealing .crm-card > :not(.crm-flash) { animation: crm-in .46s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes crm-in { from { opacity: 0; transform: translateY(3px); } }

/* ---------- motion layer and the drag ghost ---------- */
.crm-fx { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.crm-burst { position: absolute; inset: 0; }
.crm-bit {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--red);
  animation: crm-bit .62s steps(5, end) var(--d, 0ms) both;
}
.crm-bit.is-w { background: var(--pure); }
@keyframes crm-bit {
  from { transform: translate(0, 0); opacity: 1; }
  to { transform: translate(var(--dx, 0), var(--dy, 0)); opacity: 0; }
}
.crm-trail { animation: crm-trail .4s steps(3, end) var(--d, 0ms) both; }
.crm-trail.is-d { background: var(--red-deep); }
@keyframes crm-trail { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

.crm-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 80;
  pointer-events: none;
  will-change: transform;
}
.crm-ghost .crm-card { cursor: grabbing; }
.crm-ghost.is-drag .crm-card,
.crm-ghost.is-flying .crm-card,
.crm-ghost.is-arriving .crm-card {
  border-color: var(--red);
  background: #0e0e0e;
  box-shadow: 0 0 0 1px rgba(255, 0, 37, .18), 0 16px 44px -16px rgba(255, 0, 37, .6);
}
.crm-ghost.is-drag .crm-card { animation: crm-lift .22s var(--ease) both; }
.crm-ghost.is-drag.is-dropping .crm-card { animation: crm-settle .3s var(--ease) both; }
@keyframes crm-lift { from { transform: scale(1); } to { transform: scale(1.04); } }
@keyframes crm-settle { from { transform: scale(1.04); } to { transform: scale(1); } }
.crm-ghost-tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  padding: 5px 7px;
  border-radius: var(--r-s);
  background: var(--red);
  color: #000;
  font: 600 10.5px/1 var(--mono);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .16s, transform .16s var(--ease), background-color .16s;
}
.crm-ghost.has-target .crm-ghost-tip { opacity: 1; transform: none; }
.crm-ghost.to-won .crm-ghost-tip { background: var(--mint); }

/* ---------- half-width panels (2 x 2 grid from 1240px): a size down so names fit their cards ---------- */
@container (min-width: 560px) and (max-width: 620px) {
  /* the drag and flight ghosts copy these two from the card */
  .crm-board { --crm-name: 12px; --crm-won-word: none; }
  /* 6px more card width keeps 15-character names on one line down to a 560px panel */
  .crm-list { padding-left: 5px; padding-right: 5px; }
  /* the stage meter moves down beside the total, so a long stage name keeps room for its count */
  .crm-total { grid-row: 2; }
  .crm-meter { grid-row: 2; grid-column: 3; }
  /* the column total above already says QAR */
  .crm-stack { gap: 6px; padding: 0 8px; }
  .crm-stack .crm-cur { display: none; }
}

/* ---------- narrow panels: a scroll-snap strip, about 1.3 columns wide ---------- */
@container (max-width: 559px) {
  .crm-board {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(76%, 280px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .crm-board::-webkit-scrollbar { display: none; }
  .crm-board.is-dragging { scroll-snap-type: none; }
  .crm-col { scroll-snap-align: start; }
  .crm-col:last-child { border-right: 1px solid var(--line); }
  /* scroll track: the red thumb is the share of the strip in view */
  .crm-track {
    display: block;
    position: relative;
    height: 2px;
    margin: 0 12px 10px;
    background: var(--line-2);
    overflow: hidden;
  }
  .crm-track i {
    position: absolute;
    inset: 0 auto 0 0;
    width: 33%;
    background: var(--red);
    will-change: transform;
  }
  .crm-stats { flex-basis: 100%; }
  .crm-hint, .crm-sync, .crm-done { margin-left: 0; }
  .crm-act { grid-template-columns: minmax(0, 1fr); }
  .crm-act-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .crm-card, .crm-col, .crm-col::before, .crm-slot, .crm-name, .crm-empty,
  .crm-total b, .crm-stat b, .crm-ghost-tip, .crm-card-back, .crm-reset { transition: none !important; }
  .crm-flash, .crm-burst { display: none !important; }
  .crm.is-revealing .crm-card > *, .crm-ghost .crm-card, .crm-stack.is-bump,
  .crm-col.is-hit .crm-meter i, .crm.is-loading .crm-sync i,
  .crm.is-loading .crm-card-name > span, .crm.is-loading .crm-val,
  .crm.is-loading .crm-src, .crm.is-loading .crm-total { animation: none !important; }
}

/* paused by the visitor: the same end states as reduced motion */
:root[data-motion="paused"] .crm-card,
:root[data-motion="paused"] .crm-col,
:root[data-motion="paused"] .crm-col::before,
:root[data-motion="paused"] .crm-slot,
:root[data-motion="paused"] .crm-name,
:root[data-motion="paused"] .crm-empty,
:root[data-motion="paused"] .crm-total b,
:root[data-motion="paused"] .crm-stat b,
:root[data-motion="paused"] .crm-ghost-tip,
:root[data-motion="paused"] .crm-card-back,
:root[data-motion="paused"] .crm-reset { transition: none !important; }
:root[data-motion="paused"] .crm-flash,
:root[data-motion="paused"] .crm-burst { display: none !important; }
:root[data-motion="paused"] .crm.is-revealing .crm-card > *,
:root[data-motion="paused"] .crm-ghost .crm-card,
:root[data-motion="paused"] .crm-stack.is-bump,
:root[data-motion="paused"] .crm-col.is-hit .crm-meter i,
:root[data-motion="paused"] .crm.is-loading .crm-sync i,
:root[data-motion="paused"] .crm.is-loading .crm-card-name > span,
:root[data-motion="paused"] .crm.is-loading .crm-val,
:root[data-motion="paused"] .crm.is-loading .crm-src,
:root[data-motion="paused"] .crm.is-loading .crm-total { animation: none !important; }