/* ══════════════════════════════════════════════════════════════════════════
   UPPFÖLJNINGSPLANEN — steg 3:s demo
   ──────────────────────────────────────────────────────────────────────────
   Bygger på behovsdemots grund: .bd-app ger den marinblå paletten och
   .bd-grid/.bd-panelh griden och panelrubrikerna, medan chrome, knappar och
   piller kommer från crmdemo.css. Här bor bara uppföljningsplanens egna
   delar — agentteamkorten, gantt-tabellen, sammanfattningen och listan.

   HÖJDBUDGETEN är räknad, inte gissad. Ytan ger 713 px till griden:
     vänster  info 66 + team 268 + plan 282 + fot 61 + 3x12 gap = 713
     höger    sammanfattning 254 + ingår 210 + nästa 160 + 2x12 = 648
   Ändras en panel måste en annan ge tillbaka lika mycket, annars spiller
   innehållet ut över panelen under (samma fälla som i behovsdemot).

   ALLT SOM ANIMERAS gör det med opacity och transform. Undantaget är
   gantt-staplarnas bredd, som ÄR varaktigheten i tidsplanen.
   ═══════════════════════════════════════════════════════════════════════ */

.pd-vy .cd-vyh h2{display:block}
.pd-grid{grid-template-columns:1fr 320px; gap:20px}
.pd-vy .bd-vanster{gap:12px}
.pd-vy .bd-hoger{gap:12px}

/* ── Infobaren: vem planen gäller och när ─────────────────────────────── */
.pd-info{
  display:grid; grid-template-columns:1.5fr repeat(5,1fr);
  align-items:center; gap:14px;
  height:66px; padding:0 16px; flex:none;
}
.pd-info-ftg{display:flex; align-items:center; gap:10px; min-width:0}
.pd-info-ftgic{
  width:36px; height:36px; flex:none;
  display:grid; place-items:center;
  border-radius:10px;
  background:rgba(47,107,255,.14);
  border:1px solid rgba(47,107,255,.26);
  color:#8FB4FF;
}
.pd-info-ftg b{display:block; font-size:13px; font-weight:700; line-height:1.2}
.pd-info-ftg small{display:block; font-size:10px; color:var(--d-txt2); margin-top:2px}
.pd-info-f{min-width:0; padding-left:14px; border-left:1px solid var(--d-linje2)}
.pd-info-f small{display:block; font-size:9.5px; color:var(--d-txt2); line-height:1.3}
.pd-info-f b{display:block; font-size:11.5px; font-weight:600; margin-top:3px; line-height:1.25}

/* ── Agentteamen ─────────────────────────────────────────────────────── */
.pd-teampanel{padding:12px 12px 14px; flex:none; height:268px; display:flex; flex-direction:column}
.pd-teamrad{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; flex:1; min-height:0}
.pd-team{
  display:flex; flex-direction:column;
  padding:11px 11px 12px;
  border-radius:11px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--d-linje2);
  opacity:.24; transform:translateY(9px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1),
             border-color .5s ease, box-shadow .5s ease;
  overflow:hidden;
}
.pd-team.inne{opacity:1; transform:none}
.pd-team-ic{
  width:30px; height:30px; flex:none;
  display:grid; place-items:center;
  border-radius:9px; margin-bottom:8px;
}
.pd-team-n{display:block; font-size:11px; font-weight:700; line-height:1.25}
.pd-team-t{display:block; font-size:9px; line-height:1.34; color:var(--d-txt2); margin:4px 0 7px}
.pd-team-p{display:flex; flex-direction:column; gap:3.5px; margin-top:auto; flex:none}
.pd-team-p span{display:flex; align-items:center; gap:5px; font-size:9px; line-height:1.2}
.pd-team-p i{display:grid; place-items:center; width:11px; height:11px; flex:none; font-style:normal}

/* Tonen: ikonens färg, kortets kantljus när det tänds, och bockarna i
   punktlistan. Samma fyra toner som badgarna i behovsanalysen. */
.pd-team--gron .pd-team-ic{background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.28); color:#5BE08C}
.pd-team--gron.inne{border-color:rgba(34,197,94,.30); box-shadow:0 0 0 1px rgba(34,197,94,.10)}
.pd-team--gron .pd-team-p i{color:#5BE08C}
.pd-team--bla .pd-team-ic{background:rgba(47,107,255,.14); border:1px solid rgba(47,107,255,.28); color:#8FB4FF}
.pd-team--bla.inne{border-color:rgba(47,107,255,.32); box-shadow:0 0 0 1px rgba(47,107,255,.10)}
.pd-team--bla .pd-team-p i{color:#8FB4FF}
.pd-team--gul .pd-team-ic{background:rgba(245,165,36,.14); border:1px solid rgba(245,165,36,.30); color:#F0AE55}
.pd-team--gul.inne{border-color:rgba(245,165,36,.32); box-shadow:0 0 0 1px rgba(245,165,36,.10)}
.pd-team--gul .pd-team-p i{color:#F0AE55}
.pd-team--rosa .pd-team-ic{background:rgba(240,81,122,.14); border:1px solid rgba(240,81,122,.30); color:#FF8AA8}
.pd-team--rosa.inne{border-color:rgba(240,81,122,.32); box-shadow:0 0 0 1px rgba(240,81,122,.10)}
.pd-team--rosa .pd-team-p i{color:#FF8AA8}

/* ── Implementeringsplanen ───────────────────────────────────────────── */
.pd-planpanel{padding:12px 12px 14px; flex:none; height:282px; display:flex; flex-direction:column}
.pd-tab{flex:1; min-height:0; display:flex; flex-direction:column;
  border-radius:10px; border:1px solid var(--d-linje2); overflow:hidden}

/* Samma kolumnmall i huvudet och i raderna — annars glider veckorna ur led
   med staplarna, och hela gantt-läsningen faller. */
.pd-tabhuvud,.pd-rad{display:grid; grid-template-columns:200px 1fr 340px; align-items:center}
.pd-tabhuvud{
  height:30px; flex:none;
  padding:0 10px;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--d-linje2);
  font-size:11px; font-weight:600; color:var(--d-txt2);
}
.pd-veckor{display:grid; grid-template-columns:repeat(4,1fr); height:100%}
.pd-vecka{display:flex; flex-direction:column; justify-content:center; align-items:center;
  border-left:1px solid var(--d-linje2); line-height:1.15}
.pd-vecka b{font-size:11px; font-weight:600; color:var(--d-txt)}
.pd-vecka small{font-size:9px; color:var(--d-txt3)}

.pd-rad{
  flex:1; min-height:0;
  padding:0 10px;
  border-bottom:1px solid var(--d-linje2);
  opacity:.3;
  transition:opacity .45s ease;
}
.pd-rad:last-child{border-bottom:none}
.pd-rad.inne{opacity:1}
/* Namn och beskrivning hålls på VAR SIN rad: raden är 30 px hög, och en
   radbrytning i något av fälten fick texten att klättra in i raden under. */
.pd-rad-n{display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600;
  padding-right:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pd-rad-ic{
  width:19px; height:19px; flex:none;
  display:grid; place-items:center;
  border-radius:6px;
  background:rgba(124,77,255,.14);
  border:1px solid rgba(124,77,255,.26);
  color:#B9A2FF;
}
.pd-rad-t{font-size:11.5px; line-height:1.25; color:var(--d-txt2); padding-right:14px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* Spåret speglar de fyra veckokolumnerna, så en stapel som slutar vid 48 %
   verkligen slutar mitt i vecka två. */
.pd-rad-spar{
  position:relative; height:100%;
  display:flex; align-items:center;
  background:
    linear-gradient(90deg,var(--d-linje2) 1px,transparent 1px) 0 0/25% 100%;
}
.pd-bar{
  position:absolute; left:var(--start,0); width:0; height:11px;
  border-radius:6px;
  background:linear-gradient(90deg,#7C4DFF,#9B7BFF);
  box-shadow:0 0 14px -3px rgba(124,77,255,.75);
}
.pd-klar{
  position:absolute; right:8px;
  display:inline-flex; align-items:center; gap:4px;
  height:19px; padding:0 8px;
  border-radius:7px;
  background:rgba(34,197,94,.16); border:1px solid rgba(34,197,94,.34);
  color:#5BE08C; font-size:11px; font-weight:600;
  opacity:0; transform:scale(.9);
  transition:opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.pd-klar.inne{opacity:1; transform:none}

/* ── Fotraden ────────────────────────────────────────────────────────── */
.pd-fot{
  display:grid; grid-template-columns:repeat(4,1fr);
  align-items:center; gap:12px;
  height:61px; padding:0 14px; flex:none;
}
.pd-fot-f{display:flex; align-items:center; gap:9px; min-width:0}
.pd-fot-ic{
  width:30px; height:30px; flex:none;
  display:grid; place-items:center;
  border-radius:9px;
  background:rgba(47,107,255,.12);
  border:1px solid rgba(47,107,255,.24);
  color:#8FB4FF;
}
.pd-fot-f b{display:block; font-size:10.5px; font-weight:600; line-height:1.2}
.pd-fot-f small{display:block; font-size:9.5px; color:var(--d-txt2); margin-top:2px; line-height:1.25}

/* ── Sammanfattningen ────────────────────────────────────────────────── */
.pd-sampanel{padding:12px 13px; flex:none}
.pd-sam{
  display:flex; align-items:center; gap:10px;
  padding:6px 0;
  opacity:.26; transform:translateY(6px);
  transition:opacity .42s ease, transform .42s cubic-bezier(.16,1,.3,1);
}
.pd-sam.inne{opacity:1; transform:none}
.pd-sam-ic{
  width:28px; height:28px; flex:none;
  display:grid; place-items:center;
  border-radius:9px;
  background:rgba(124,77,255,.13);
  border:1px solid rgba(124,77,255,.26);
  color:#B9A2FF;
}
.pd-sam b{display:block; font-size:13px; font-weight:700; line-height:1.2}
.pd-sam small{display:block; font-size:10px; color:var(--d-txt2); margin-top:1px}

/* ── Detta ingår ─────────────────────────────────────────────────────── */
.pd-ingarpanel{padding:12px 13px; flex:none}
.pd-ingar{
  display:flex; align-items:center; gap:9px;
  padding:4px 0;
  font-size:10.5px;
  opacity:.26; transform:translateX(-5px);
  transition:opacity .38s ease, transform .38s cubic-bezier(.16,1,.3,1);
}
.pd-ingar.inne{opacity:1; transform:none}
.pd-ingar-b{
  width:18px; height:18px; flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(47,107,255,.16);
  border:1px solid rgba(47,107,255,.32);
  color:#8FB4FF;
}

/* ── Nästa steg ──────────────────────────────────────────────────────── */
.pd-nasta{padding:12px 13px; flex:none; background:linear-gradient(150deg,rgba(47,107,255,.13),rgba(11,18,36,.6))}
.pd-nasta-t{display:block; font-size:10px; line-height:1.45; color:var(--d-txt2); margin-bottom:10px}
.pd-godkann{height:36px; width:100%; justify-content:center; font-size:11.5px; margin-bottom:8px}
.pd-genomgang{height:32px; width:100%; justify-content:center; font-size:11px}

@media (prefers-reduced-motion:reduce){
  .pd-team,.pd-rad,.pd-klar,.pd-sam,.pd-ingar{opacity:1; transform:none; transition:none}
}