/* ══════════════════════════════════════════════════════════════════════════
   SOLUTRA CRM — telefonläget
   ──────────────────────────────────────────────────────────────────────────
   På en telefon får laptopens skärmglas 327 px, alltså skala 0,227 mot
   designytan: dashboardens brödtext blir 2,7 px. Att zooma sig ur det kräver
   4x, och då syns 6 % av gränssnittet åt gången. Skrivbordsvyn går helt
   enkelt inte att rädda på en liten skärm.

   Därför en EGEN enhet: en telefon ritad i CSS (ingen bild, alltså skarp i
   alla storlekar och ingen extra vikt) med en stående designyta på 390x844.
   Då blir skalan ~0,84 och 13 px text landar på 11 px — läsbart utan zoom.

   Innehållet är medvetet destillerat, inte hopklämt. Samma berättelse, samma
   akter och samma repliker som på skrivbordet, men bara de element som bär
   historien: ett leadkort som kommer in, ett lodrätt flöde som tänds steg
   för steg, en pipeline som affären vandrar igenom.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Telefonen ────────────────────────────────────────────────────────── */

.mobscen{position:relative;width:100%;max-width:330px;margin:0 auto}

.telefon{
  position:relative;
  width:100%;
  aspect-ratio:390/844;
  border-radius:44px;
  padding:8px;
  /* Chassit: mörk metall med ljusare kant där ljuset fångas. */
  background:
    linear-gradient(150deg,#2b3358 0%,#161d3c 22%,#0e1430 50%,#1b2445 78%,#39436e 100%);
  box-shadow:
    0 0 0 1px rgba(150,180,255,.22),
    0 30px 60px -24px rgba(0,0,0,.95),
    0 0 60px -18px rgba(47,107,255,.45);
}
/* Sidoknappar. Rena rektanglar i samma metall, precis utanför chassit. */
.telefon::before,.telefon::after{
  content:"";position:absolute;left:-2px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,#3a4570,#222b52);
}
.telefon::before{top:21%;height:7%}
.telefon::after{top:31%;height:11%}
.telefon-hoger{position:absolute;right:-2px;top:26%;width:2px;height:13%;
  border-radius:2px;background:linear-gradient(180deg,#3a4570,#222b52)}

.telefon-glas{
  position:relative;
  width:100%;height:100%;
  border-radius:36px;
  overflow:hidden;
  background:#050A18;
  isolation:isolate;
}
/* Dynamisk ö. Ligger ÖVER appen som en fysisk detalj i glaset, precis som
   notchen på laptopen — appen ritar sitt innehåll under den. */
.telefon-o{
  position:absolute;left:50%;top:9px;translate:-50% 0;
  width:29%;height:3.3%;
  border-radius:999px;background:#04070f;
  z-index:20;pointer-events:none;
}

/* ── Appen i stående format ───────────────────────────────────────────── */

/* text-align återställs: heron centrerar sin spalt på mobil, och den
   centreringen ärvdes rakt in i appen så leadkorten fick mittställd text. */
.crmd-app--mobil{
  text-align:left;
  grid-template-columns:1fr;
  width:390px;height:844px;
  font-size:14px;
}
/* Sidomenyn och toppfältets söklåda hör till en skrivbordsvy. På telefonen
   ersätts de av en app-topp och en flikrad längst ned, som i en riktig app. */
.crmd-app--mobil .cd-sido{display:none}
.crmd-app--mobil .cd-huvud{height:100%}

.cdm-topp{
  display:flex;align-items:center;gap:9px;
  /* Toppluften rymmer den dynamiska ön: appen ritar aldrig under den, precis
     som en riktig app håller sig under statusraden. */
  height:88px;padding:36px 16px 0;
  flex:none;
  border-bottom:1px solid var(--d-linje);
}
.cdm-topp .cd-logo-m{width:22px;height:22px;flex:none;color:var(--d-bla2)}
.cdm-topp b{font-size:13px;font-weight:700;letter-spacing:.05em}
.cdm-topp .cd-ikbtn{margin-left:auto;width:32px;height:32px}

.cdm-yta{position:relative;flex:1;min-height:0;overflow:hidden}

.cdm-vy{
  position:absolute;inset:0;
  padding:16px 16px 0;
  display:flex;flex-direction:column;
  opacity:0;transform:scale(1.03);
  transition:opacity .36s ease,transform .36s cubic-bezier(.3,0,.2,1);
  will-change:transform,opacity;
}
.cdm-vy.inne{opacity:1;transform:none}
.cdm-vy.ut{opacity:0;transform:scale(.97)}

.cdm-h{font-family:inherit;font-size:21px;font-weight:700;letter-spacing:-.02em}
.cdm-sub{margin-top:3px;font-size:13px;color:var(--d-txt2)}

/* Flikrad längst ned, som i en app. Persistent genom alla akter. */
.cdm-flikar{
  position:relative;
  display:flex;flex:none;
  border-top:1px solid var(--d-linje);
  padding:8px 6px 14px;
}
.cdm-flik{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:9.5px;font-weight:600;color:var(--d-txt3);
  transition:color .3s ease;
}
.cdm-flik svg{opacity:.75;transition:opacity .3s ease}
.cdm-flik.pa{color:var(--d-bla2)}
.cdm-flik.pa svg{opacity:1}

/* ── Akt 1: leadlistan ────────────────────────────────────────────────── */

.cdm-kpi{
  display:flex;align-items:center;gap:11px;
  margin-top:13px;padding:12px 13px;
  border-radius:13px;
  background:var(--d-panel);border:1px solid var(--d-linje);
  flex:none;
}
.cdm-kpi-ic{width:32px;height:32px;flex:none;display:grid;place-items:center;
  border-radius:10px;background:rgba(47,107,255,.14);
  border:1px solid rgba(47,107,255,.25);color:var(--d-bla2)}
.cdm-kpi small{display:block;font-size:12.5px;color:var(--d-txt2)}
.cdm-kpi b{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em}
.cdm-kpi-d{margin-left:auto;font-size:11px;font-weight:600;color:var(--d-gron)}

.cdm-lista{margin-top:12px;display:flex;flex-direction:column;gap:9px;flex:1;min-height:0}

.cdm-kort{
  position:relative;
  display:flex;align-items:center;gap:11px;
  padding:11px 12px;
  border-radius:13px;
  background:var(--d-panel);border:1px solid var(--d-linje);
  transition:border-color .3s ease,box-shadow .3s ease;
}
.cdm-kort-t{flex:1;min-width:0}
.cdm-kort-t b{display:block;font-size:14px;font-weight:600}
.cdm-kort-t small{display:block;font-size:12.5px;color:var(--d-txt2);margin-top:1px}
.cdm-kort .cd-ring{width:34px;height:34px;flex:none}
.cdm-kort .cd-ring b{font-size:11px}

/* Elins kort: höjden fälls ut, sedan två pulser i ramen. */
.cdm-kort--ny{overflow:hidden;height:0;padding-top:0;padding-bottom:0;border-width:0}
.cdm-kort--ny > *{opacity:0;transform:translateY(-6px)}
.cdm-kort--ny.inne{height:60px;padding:11px 12px;border-width:1px;
  transition:height .34s cubic-bezier(.3,0,.2,1),padding .34s cubic-bezier(.3,0,.2,1)}
.cdm-kort--ny.inne > *{opacity:1;transform:none;
  transition:opacity .3s ease .12s,transform .3s ease .12s}
.cdm-kort--ny.glod{border-color:rgba(76,141,255,.65);
  box-shadow:0 0 24px -6px rgba(47,107,255,.7);
  animation:cdmGlod 1.05s ease 2}
@keyframes cdmGlod{0%,100%{box-shadow:0 0 0 0 rgba(47,107,255,0)}
  45%{box-shadow:0 0 26px -4px rgba(47,107,255,.8)}}

/* ── Akt 2: det lodräta flödet ────────────────────────────────────────── */

.cdm-flode{margin-top:14px;display:flex;flex-direction:column;gap:0;flex:1;min-height:0}
/* Kaskaden. Klassen sätts när JS bygger vyn, så utan JS eller vid reducerad
   rörelse står flödet synligt från start. */
.cdm-flode.bygger .cdm-nod,
.cdm-flode.bygger .cdm-koppling{opacity:0;transform:translateY(9px)}
.cdm-flode.bygger .cdm-nod.in,
.cdm-flode.bygger .cdm-koppling.in{opacity:1;transform:none;
  transition:opacity .34s ease,transform .34s ease}

.cdm-nod{
  position:relative;
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border-radius:13px;
  background:var(--d-panel2);border:1px solid var(--d-linje);
  transition:border-color .3s ease,box-shadow .35s ease,opacity .35s ease,filter .35s ease;
}
.cdm-nod-ic{width:28px;height:28px;flex:none;display:grid;place-items:center;
  border-radius:9px;background:rgba(47,107,255,.15);color:var(--d-bla2)}
.cdm-nod b{display:block;font-size:13.5px;font-weight:600}
.cdm-nod small{display:block;font-size:12px;color:var(--d-txt2);margin-top:1px}
.cdm-nod--lila .cdm-nod-ic{background:rgba(124,77,255,.18);color:#A98BFF}
.cdm-nod--gul .cdm-nod-ic{background:rgba(245,165,36,.16);color:var(--d-gul)}
.cdm-nod--gron .cdm-nod-ic{background:rgba(34,197,94,.16);color:#4ADE80}
.cdm-nod.aktiv{border-color:rgba(76,141,255,.75);
  box-shadow:0 0 26px -8px rgba(47,107,255,.8)}
.cdm-nod.aktiv .cdm-nod-ic{animation:cdmIkon .5s cubic-bezier(.3,0,.2,1)}
@keyframes cdmIkon{from{transform:rotate(-100deg) scale(.6);opacity:0}to{transform:none;opacity:1}}
.cdm-nod.gron{border-color:rgba(34,197,94,.6)}
.cdm-nod.dimmad{opacity:.28;filter:grayscale(1)}

/* Kopplingen mellan noderna: en linje som fylls underifrån när partikeln
   passerar. Höjden är fast så flödet aldrig hoppar. */
.cdm-koppling{position:relative;height:18px;flex:none;margin-left:25px}
.cdm-koppling::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:rgba(140,175,255,.22)}
.cdm-koppling i{position:absolute;left:0;top:0;width:2px;height:100%;
  background:linear-gradient(180deg,var(--d-bla2),var(--d-bla));
  transform-origin:50% 0;transform:scaleY(0)}
.cdm-koppling.fylld i{transform:scaleY(1);transition:transform .42s cubic-bezier(.3,0,.2,1)}

.cdm-bock{position:absolute;right:-6px;top:-6px;width:18px;height:18px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--d-gron);color:#04240F;
  box-shadow:0 0 12px -2px rgba(34,197,94,.8);
  opacity:0;transform:scale(.3)}
.cdm-bock.inne{opacity:1;transform:none;
  transition:opacity .22s ease,transform .3s cubic-bezier(.2,1.4,.4,1)}

.cdm-om{margin-left:auto;font-size:11px;font-weight:700;color:var(--d-gul);
  opacity:0;transform:translateX(6px)}
.cdm-om.inne{opacity:1;transform:none;transition:opacity .25s ease,transform .25s ease}
.cdm-om.sant{color:#4ADE80}

/* ── Akt 3: pipelinen ─────────────────────────────────────────────────── */

.cdm-intakt{margin-top:14px;padding:14px 15px;border-radius:14px;
  background:var(--d-panel);border:1px solid var(--d-linje);flex:none}
.cdm-intakt small{font-size:11.5px;color:var(--d-txt2)}
.cdm-intakt b{display:block;margin-top:3px;font-size:27px;font-weight:700;letter-spacing:-.025em}
.cdm-intakt b i{font-style:normal;font-size:13px;font-weight:600;color:var(--d-txt2);margin-left:4px}
.cdm-intakt .cdm-delta{font-size:11.5px;font-weight:600;color:var(--d-gron)}

.cdm-pipe{margin-top:12px;display:flex;flex-direction:column;gap:7px;flex:none}
.cdm-pk{
  position:relative;
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:12px;
  border:1px solid var(--d-linje);
  background:rgba(255,255,255,.018);
  transition:border-color .3s ease,background-color .3s ease;
}
.cdm-pk-namn{font-size:13.5px;font-weight:600;color:var(--d-txt2);transition:color .3s ease}
.cdm-pk-v{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--d-txt3)}
.cdm-pk.pa{border-color:rgba(76,141,255,.5);background:rgba(47,107,255,.10)}
.cdm-pk.pa .cdm-pk-namn{color:var(--d-txt)}
.cdm-pk.vunnen{border-color:rgba(34,197,94,.55);background:rgba(34,197,94,.10)}
.cdm-pk.vunnen .cdm-pk-namn{color:#4ADE80}

/* Affärskortet som vandrar. Ligger i eget lager och flyttas med transform. */
.cdm-affar{
  position:absolute;left:16px;right:16px;top:0;
  display:flex;align-items:center;gap:9px;
  padding:9px 11px;border-radius:12px;
  background:#15224A;border:1px solid rgba(120,165,255,.45);
  box-shadow:0 12px 26px -12px rgba(0,0,0,.9),0 0 22px -6px rgba(47,107,255,.55);
  z-index:12;will-change:transform;
}
.cdm-affar b{font-size:13px;font-weight:600}
.cdm-affar small{display:block;font-size:12px;color:#8FB4FF;font-weight:600}
.cdm-affar.vunnen{border-color:rgba(34,197,94,.6);
  box-shadow:0 12px 26px -12px rgba(0,0,0,.9),0 0 26px -4px rgba(34,197,94,.7)}

/* ── Fingret ──────────────────────────────────────────────────────────── */

/* På en telefon finns ingen muspekare. En mjuk tryckpunkt med ring läser
   som ett finger utan att behöva rita en hand. */
.cdm-finger{
  position:absolute;left:0;top:0;
  width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;
  background:radial-gradient(circle at 38% 34%, rgba(235,243,255,.55), rgba(150,190,255,.22) 60%, transparent 72%);
  border:1px solid rgba(190,215,255,.5);
  opacity:0;z-index:30;pointer-events:none;
  will-change:transform;
  transition:opacity .3s ease;
}
.cdm-finger.syns{opacity:1}
.cdm-finger.tryck{animation:cdmTryck .28s ease}
@keyframes cdmTryck{50%{transform:scale(.78)}}

/* ── Överlägg ─────────────────────────────────────────────────────────── */

.cdm-toast{
  position:absolute;left:16px;right:16px;bottom:84px;
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;border-radius:13px;
  background:#101A38;border:1px solid rgba(120,160,255,.24);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.95);
  opacity:0;transform:translateY(12px);z-index:25;
}
/* Akt 3:s toast ligger uppe: översikten rullar då, och underkanten är
   upptagen av uppgiftslistan som spelar i samma sekund. */
.cdm-toast--topp{top:52px;bottom:auto;transform:translateY(-12px)}
.cdm-toast.inne{opacity:1;transform:none;
  transition:opacity .34s ease,transform .34s cubic-bezier(.25,.9,.3,1.15)}
.cdm-toast.ut{opacity:0;transform:translateY(8px);transition:opacity .28s ease,transform .28s ease}
.cdm-toast-ic{width:28px;height:28px;flex:none;display:grid;place-items:center;
  border-radius:9px;background:rgba(34,197,94,.16);color:#4ADE80}
.cdm-toast-ic--bla{background:rgba(47,107,255,.16);color:var(--d-bla2)}
.cdm-toast b{display:block;font-size:13px}
.cdm-toast small{display:block;font-size:12px;color:var(--d-txt2)}

.cdm-burst{position:absolute;left:0;top:0;width:0;height:0;z-index:26;pointer-events:none}
.cdm-burst i{position:absolute;left:0;top:0;width:5px;height:5px;border-radius:50%;
  will-change:transform,opacity}

.cdm-slut{
  position:absolute;left:16px;right:16px;bottom:78px;
  text-align:center;font-size:14.5px;font-weight:600;line-height:1.4;
  opacity:0;transform:translateY(8px);z-index:27;
}
.cdm-slut.inne{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}

.cdm-rida{position:absolute;inset:0;background:var(--d-bg);opacity:0;
  transition:opacity .3s ease;z-index:40;pointer-events:none}
.cdm-rida.inne{opacity:1}

@media(prefers-reduced-motion:reduce){
  .crmd-app--mobil *,.crmd-app--mobil *::before,.crmd-app--mobil *::after{
    transition-duration:.01ms !important;animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}

/* ══ ÖVERSIKTENS TRE LISTOR ═══════════════════════════════════════════════
   Aktivitetsflöde, säljarliga och uppgifter. Skrivbordet spelar upp alla tre
   i akt 3; telefonen visade tidigare bara intäkterna och pipelinen och slutade
   därmed fem sekunder innan berättelsen var slut.

   Måtten är telefonens, inte skrivbordets nedskalade: 12-13 px text, 8 px
   radhöjd-luft och inga avatarer. Samma innehåll, satt för handen. */
.cdm-rubr{margin:16px 0 7px;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--d-txt2)}

.cdm-feed,.cdm-reps,.cdm-upg{display:flex;flex-direction:column;gap:6px}

.cdm-fi{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:11px;
  background:var(--d-panel);border:1px solid var(--d-linje)}
.cdm-fi-ic{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;
  background:rgba(92,141,255,.14);color:var(--d-bla)}
.cdm-fi-t{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.cdm-fi-t b{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cdm-fi-t small{font-size:11px;color:var(--d-txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cdm-fi time{margin-left:auto;flex:none;font-size:10.5px;color:var(--d-txt3,var(--d-txt2))}
/* Den nya raden glider in uppifrån i stället för att bara dyka upp - det är
   den som bär "det hände just nu". */
.cdm-fi--ny{opacity:0;transform:translateY(-8px);
  transition:opacity .32s ease,transform .32s cubic-bezier(.2,.8,.3,1);
  border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.10)}
.cdm-fi--ny.inne{opacity:1;transform:none}
.cdm-fi--ny .cdm-fi-ic{background:rgba(34,197,94,.16);color:#22C55E}

.cdm-ri{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:11px;
  background:var(--d-panel);border:1px solid var(--d-linje)}
.cdm-ri-nr{flex:none;width:18px;height:18px;border-radius:6px;display:grid;place-items:center;
  font-size:10.5px;font-weight:700;color:var(--d-txt2);background:rgba(255,255,255,.06)}
.cdm-ri-t{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}
.cdm-ri-t b{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cdm-ri-bar{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
/* Stapeln skalas med transform och inte width: bredden räknas om av layouten,
   transform gör det på kompositorn. Samma val som i multiplikatorn. */
.cdm-ri-bar i{display:block;height:100%;border-radius:2px;background:var(--d-bla);
  transform-origin:left center;transform:scaleX(var(--v,0));
  transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.cdm-ri-v{flex:none;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
.cdm-ri.topp{border-color:rgba(92,141,255,.5)}
.cdm-ri.topp .cdm-ri-bar i{background:linear-gradient(90deg,var(--d-bla),#8fd8ff)}

.cdm-ui{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:11px;
  background:var(--d-panel);border:1px solid var(--d-linje)}
.cdm-kryss{flex:none;width:15px;height:15px;border-radius:5px;border:1.6px solid var(--d-linje2,var(--d-linje))}
.cdm-ui-t{min-width:0;flex:1;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cdm-ui time{flex:none;font-size:10.5px;color:var(--d-txt2)}
.cdm-ui.klar .cdm-ui-t{color:var(--d-txt2);text-decoration:line-through}
.cdm-ui.klar .cdm-kryss{background:#22C55E;border-color:#22C55E;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304240F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.6 4.5L19 7'/%3E%3C/svg%3E");
  background-size:11px;background-position:center;background-repeat:no-repeat}
.cdm-ui--ny{opacity:0;transform:translateY(8px);
  transition:opacity .32s ease,transform .32s cubic-bezier(.2,.8,.3,1);
  border-color:rgba(92,141,255,.45)}
.cdm-ui--ny.inne{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .cdm-fi--ny,.cdm-ui--ny,.cdm-ri-bar i{transition:none}
}


/* ══ ÖVERSIKTEN RULLAR ════════════════════════════════════════════════════
   Med aktivitetsflöde, säljarliga och uppgifter på plats är vyn högre än
   telefonens skärm - precis som skrivbordets översikt är högre än sitt
   fönster. Där löses det med en kamera som panorerar; här rullar ytan i
   stället. Samma dramaturgi, rätt verktyg för formatet.

   Rullningen styrs av tidslinjen, inte av fingret: scrollbaren döljs och
   touch-rullning stängs av, så demot alltid visar det repliken talar om. */
.cdm-vy[data-vy="oversikt"]{overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;-ms-overflow-style:none;touch-action:none;
  scroll-behavior:smooth;padding-bottom:14px}
.cdm-vy[data-vy="oversikt"]::-webkit-scrollbar{display:none}

@media (prefers-reduced-motion: reduce){
  .cdm-vy[data-vy="oversikt"]{scroll-behavior:auto}
}

/* ══ DRAGET I FLÖDET ══════════════════════════════════════════════════════
   Skrivbordet drar in "Skicka notis" ur en verktygspalett. Telefonen har
   ingen palett, så platsen öppnar sig i flödet i stället och noden glider in
   under fingret. Samma innebörd - att ett steg läggs till för hand - med det
   format som finns. */
.cdm-flode.bygger .cdm-nod.plats,
.cdm-nod.plats{opacity:1;transform:none;border-style:dashed;
  border-color:rgba(120,165,255,.5);background:rgba(92,141,255,.06);box-shadow:none}
.cdm-nod.plats > *{opacity:0}
.cdm-nod.dragen{animation:cdmSlapp .42s cubic-bezier(.2,.9,.3,1)}
@keyframes cdmSlapp{
  from{transform:translateY(-14px) scale(1.04);box-shadow:0 16px 30px -12px rgba(0,0,0,.9)}
  to{transform:none}
}
@media (prefers-reduced-motion: reduce){ .cdm-nod.dragen{animation:none} }