/* ═══════════════════════════════════════════════════════════════════════════
   CRM-SKÄRMARNA — formatmallen

   Inte att förväxla med css/crmdemo.css, som är de gamla nedskalade
   produktskärmarnas formatmall och lånas av js/behovsdemo.js.

   Tre vyer i samma fönster: briefingen, pipen och kalendern. Reserven är satt
   per vy, som i paneldemot: de skiljer sig för mycket för ett gemensamt mått.
   ═══════════════════════════════════════════════════════════════════════ */

/* RESERV PER VY. Uppmätt 6 september 2026 vid den smalaste bredden i varje
   spann, med panelen tvingad synlig: en ruta i ett hidden-element mäter noll
   och lånar sin egen reserv, alltså mäter man sitt eget gamla värde.
   Briefingen 1384 px vid 342, 812 vid 717 och 720 vid 1072. Pipen 769/745/739.
   Kalendern 857/591/585. */
.crd{position:relative;display:flex;flex-direction:column;margin-top:.85rem;
  min-height:1395px;border-radius:16px}
.crd[data-vy="affarer"]{min-height:770px}
.crd[data-vy="kalender"]{min-height:860px}
.crd:empty{border:1px solid var(--line);background:
  radial-gradient(300px 200px at 15% 110%, rgba(79,195,255,.2), transparent 60%),
  radial-gradient(300px 200px at 85% -10%, rgba(127,176,255,.15), transparent 60%),
  #eaeff9}

.cr{position:relative;flex:1;min-height:0;display:flex;overflow:hidden;
  border:1px solid var(--line);border-radius:16px;background:#e9eef9;
  box-shadow:0 22px 50px -44px rgba(10,24,84,.6)}
/* min-width:0 PÅ SJÄLVA PANELEN OCKSÅ. Ett sträckt flexbarn har min-width:auto
   och växer med sitt bredaste innehåll: tavlan är bredare än fönstret, och utan
   detta blev hela panelen 1350 px i ett fönster på 1280 och talraden hamnade
   utanför kanten. */
.cr-panel{display:flex;flex-direction:column;gap:.5rem;min-width:0;background:#fff;
  border:1px solid var(--line2);border-radius:12px;
  padding:clamp(.5rem,1.1vw,.68rem);overflow:auto}
.cr-kol{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.cr-ing{margin:0;font-size:.72rem;line-height:1.5;color:var(--muted)}
.cr-rub{display:flex;flex-wrap:wrap;align-items:baseline;gap:.45rem;
  font-family:var(--display);font-size:.9rem;font-weight:600;color:var(--text);
  margin:0 0 .25rem}
.cr-av{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.6rem;
  font-weight:700;color:var(--faint)}
.cr-block{padding:.5rem .6rem;border:1px solid var(--line2);border-radius:11px;
  background:#fbfcff}

/* ── Briefingen ──────────────────────────────────────────────────────────── */
.cr-ringa{display:grid;gap:.1rem;padding:.5rem .65rem;border-radius:11px;
  border:1px solid rgba(92,141,255,.28);background:rgba(92,141,255,.07)}
.cr-ringa b{font-family:var(--display);font-size:.95rem;font-weight:600;color:var(--text)}
.cr-ringa em{font-style:normal;font-size:.72rem;color:var(--muted)}

.cr-lista{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
/* Den röda kanten är ärendets allvar och inte ett fel. Den ligger till vänster
   som i produkten, och den försvinner när utkastet är skrivet. */
.cr-arende{display:grid;gap:.2rem;padding:.45rem .55rem .5rem;border-radius:10px;
  border:1px solid var(--line2);border-left:3px solid #b4453f;background:#fff}
.cr-arende--klar{border-left-color:#2f7d4a}
.cr-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .5rem}
.cr-h b{font-size:.79rem;font-weight:650;color:var(--text)}
.cr-h em{font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.53rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint)}
.cr-arende p{margin:0;font-size:.72rem;line-height:1.5;color:var(--muted)}
.cr-kn{align-self:start;display:inline-flex;align-items:center;gap:.35rem;
  margin-top:.15rem;padding:.32rem .65rem;border-radius:8px;cursor:pointer;
  border:0;background:#1b3a8f;color:#fff;font:inherit;font-size:.72rem;font-weight:700;
  transition:background .18s var(--ease-solutra,ease)}
.cr-kn:hover{background:#16307a}
.cr-kn:focus-visible{outline:2px solid var(--g3);outline-offset:2px}
.cr-klar{display:grid;gap:.1rem;margin-top:.2rem;padding:.35rem .5rem;border-radius:8px;
  background:rgba(47,125,74,.08);border:1px solid rgba(47,125,74,.3)}
.cr-klar b{font-size:.72rem;font-weight:700;color:#2f7d4a}
.cr-klar i{font-style:normal;font-size:.68rem;line-height:1.45;color:var(--muted)}

.cr-kort{display:grid;gap:.2rem;padding:.6rem .7rem;border-radius:11px;
  border:1px solid var(--line2);background:linear-gradient(180deg,#fbfcff,#f3f7ff)}
.cr-nar{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.53rem;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.cr-kort h4{margin:0;font-family:var(--display);font-size:1rem;font-weight:600;
  line-height:1.25;color:var(--text)}
.cr-kort p{margin:.1rem 0 0;font-size:.71rem;line-height:1.55;color:var(--muted)}

.cr-natt{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.cr-natt li{display:grid;gap:.08rem}
.cr-natt em{font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.53rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--g2)}
.cr-natt p{margin:0;font-size:.71rem;line-height:1.5;color:var(--muted)}
.cr-natt i{font-style:normal;font-size:.63rem;color:var(--faint)}

.cr-raknare{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.cr-raknare li{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:.05rem .6rem;align-items:baseline;padding:.4rem .55rem;border-radius:10px;
  border:1px solid var(--line2);background:#fbfcff}
.cr-raknare b{grid-row:1/span 2;align-self:center;font-family:var(--display);
  font-size:1.3rem;font-weight:600;color:var(--text)}
.cr-raknare em{font-style:normal;font-size:.74rem;font-weight:650;color:var(--text)}
.cr-raknare i{font-style:normal;font-size:.66rem;color:var(--faint)}

/* ── Pipelinen ───────────────────────────────────────────────────────────── */
.cr-vaxel{display:inline-flex;align-self:start;gap:.15rem;padding:.15rem;
  border-radius:9px;border:1px solid var(--line);background:#f3f7ff}
.cr-vaxel span{padding:.2rem .6rem;border-radius:7px;font-size:.71rem;
  font-weight:650;color:var(--faint)}
.cr-vaxel span.pa{background:#fff;color:var(--text);
  box-shadow:0 6px 14px -12px rgba(10,24,84,.8)}

.cr-tal{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.cr-tal li{display:grid;gap:.05rem;padding:.4rem .55rem;border-radius:10px;
  border:1px solid var(--line2);background:#fbfcff}
.cr-tal em{font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.52rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint)}
.cr-tal b{font-family:var(--display);font-size:1.05rem;font-weight:600;color:var(--text)}

.cr-natt-rad{display:flex}
.cr-kn--natt{background:#0d1b46}
.cr-kn--natt:hover{background:#16307a}
.cr-natt-klar{display:grid;gap:.1rem;padding:.4rem .6rem;border-radius:9px;
  background:rgba(47,125,74,.08);border:1px solid rgba(47,125,74,.3)}
.cr-natt-klar b{font-size:.74rem;font-weight:700;color:#2f7d4a}
.cr-natt-klar i{font-style:normal;font-size:.68rem;line-height:1.5;color:var(--muted)}

/* Tavlan skrollar i sidled precis som i produkten. Sju stadier ryms inte i en
   panel, och att vika ned dem hade gjort en pipeline till en lista. */
/* min-width:0 ÄR INTE KOSMETIK. Ett flexbarn krymper inte under sitt innehåll
   av sig självt, och sju spalter à 11,5 rem är bredare än panelen: utan detta
   växte hela panelen med tavlan, och talraden ovanför sköts ut ur fönstret i
   stället för att tavlan skrollade. */
.cr-panel > *{min-width:0}
.cr-tavla{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.3rem;
  min-width:0;scroll-snap-type:x proximity}
.cr-spalt{flex:none;width:11.5rem;scroll-snap-align:start;display:flex;
  flex-direction:column;gap:.3rem}
.cr-spalt h5{display:flex;align-items:baseline;gap:.35rem;margin:0;
  font-size:.68rem;font-weight:700;color:var(--muted)}
.cr-spalt h5::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--g2);flex:none}
.cr-spalt h5 span{margin-left:auto;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.6rem;color:var(--faint)}
.cr-affar{display:grid;gap:.12rem;padding:.42rem .5rem;border-radius:9px;
  border:1px solid var(--line2);background:#fff;
  box-shadow:0 8px 18px -16px rgba(10,24,84,.7)}
.cr-affar--ny{border-color:rgba(47,125,74,.45);background:rgba(47,125,74,.045)}
.cr-affar b{font-size:.73rem;font-weight:650;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-affar > em{font-style:normal;font-size:.64rem;color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-rad2{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .45rem}
.cr-varde{font-size:.73rem;font-weight:700;color:var(--g2)}
.cr-inget{font-style:italic;font-size:.65rem;color:var(--faint)}
.cr-dagar{font-style:normal;font-size:.62rem;color:var(--faint)}
.cr-affar--ny .cr-dagar{color:#2f7d4a;font-weight:700}
.cr-handelse{display:grid;gap:.08rem;margin-top:.15rem;padding:.3rem .4rem;
  border-radius:7px;background:rgba(92,141,255,.07)}
.cr-handelse--ny{background:rgba(194,164,105,.14)}
.cr-handelse em{font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.5rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--g2)}
.cr-handelse--ny em{color:#755c2e}
.cr-handelse i{font-style:normal;font-size:.63rem;line-height:1.4;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cr-summa{margin:auto 0 0;padding-top:.25rem;border-top:1px solid var(--line2);
  font-size:.64rem;font-weight:700;color:var(--faint)}

/* ── Kalendern ───────────────────────────────────────────────────────────── */
.cr-kal-topp{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.cr-agent{margin-left:auto;padding:.25rem .55rem;border-radius:8px;
  border:1px solid var(--line);background:#fbfcff;font-size:.7rem;color:var(--muted)}
.cr-rutnat{display:grid;grid-template-columns:2rem repeat(7,minmax(0,1fr));
  border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:#fff}
.cr-hjorn{background:#fbfcff;border-bottom:1px solid var(--line2)}
.cr-dag{display:grid;gap:.02rem;justify-items:center;padding:.25rem .1rem;
  background:#fbfcff;border-bottom:1px solid var(--line2);border-left:1px solid var(--line2);
  font-size:.58rem;color:var(--faint);text-transform:capitalize}
.cr-dag b{font-size:.78rem;font-weight:650;color:var(--text)}
.cr-tim{padding:.15rem .2rem;border-top:1px solid var(--line2);
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.55rem;
  color:var(--faint);text-align:right}
.cr-cell{min-height:2.1rem;border-top:1px solid var(--line2);
  border-left:1px solid var(--line2);padding:1px}
.cr-hand{display:grid;gap:.02rem;height:100%;padding:.15rem .25rem;border-radius:5px;
  background:rgba(92,141,255,.12);border-left:2px solid var(--g2);overflow:hidden}
.cr-hand--uppfoljning{background:rgba(194,164,105,.14);border-left-color:#c2a469}
.cr-hand b{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.5rem;
  font-weight:700;color:var(--text)}
.cr-hand i,.cr-hand em{font-style:normal;font-size:.53rem;line-height:1.2;
  color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-hand em{color:var(--faint)}

.cr-sidokort{padding:.5rem .6rem;border-radius:11px;border:1px solid var(--line2);
  background:#fbfcff}
.cr-sidokort h4{margin:0 0 .15rem;font-family:var(--display);font-size:.88rem;
  font-weight:600;color:var(--text)}
.cr-sidokort p{margin:0;font-size:.71rem;line-height:1.5;color:var(--muted)}
.cr-kal-konto{display:flex;align-items:center;gap:.4rem}
.cr-prick{flex:none;width:7px;height:7px;border-radius:50%;background:#2f7d4a}

.cr-not{flex:none;margin:.45rem 0 0;padding-top:.42rem;border-top:1px dashed var(--line);
  font-size:.72rem;line-height:1.55;color:var(--muted)}
.cr-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

@media(min-width:760px){
  .crd{min-height:830px}
  .crd[data-vy="affarer"]{min-height:760px}
  .crd[data-vy="kalender"]{min-height:605px}
  .cr-panel--brief,.cr-panel--kal{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    gap:.7rem;align-items:start}
  .cr-tal{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:1000px){
  .crd{min-height:735px}
  .crd[data-vy="affarer"]{min-height:755px}
  .crd[data-vy="kalender"]{min-height:600px}
}

@media(prefers-reduced-motion:reduce){
  .cr-kn{transition:none}
}