/* ==========================================================
   JARVIS OS · maquette dashboard (injectee par js/dashboard.js)
   Palette relevee au pixel sur la maquette de reference.
   ========================================================== */

.jos{
  --d-bg:#F9FAFB; --d-card:#FFFFFF;
  --d-ink:#2E3A59; --d-ink-2:#1B2337;
  --d-grey:#8A93A8; --d-line:#EDEFF3; --d-line-2:#F4F5F8; --d-active:#F2F3F7;
  --d-violet:#7584D6; --d-violet-2:#8E8DE6;
  --d-orange:#FEA385; --d-pink:#FF9FD7; --d-cyan:#80E5FF; --d-blue:#4F7BE8;

  position:relative;
  width:100%;aspect-ratio:1020/700;
  display:grid;grid-template-columns:232px 1fr;
  background:var(--d-bg);border-radius:20px;overflow:hidden;
  color:var(--d-ink);font-size:13px;line-height:1.4;
  border:1px solid #E7EBF2;
}

.jos svg{fill:none}

/* ---------- sidebar ---------- */
.jos__side{padding:26px 18px;display:flex;flex-direction:column}
.jos__logo{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--d-ink-2);padding:0 8px;margin-bottom:30px}
.jos__logo i{width:11px;height:11px;border-radius:50%;flex:0 0 auto;background:linear-gradient(135deg,#46C1F2,var(--d-violet))}
.jos__logo sup{font-size:9px;color:var(--d-grey);font-weight:700;top:-.7em}
.jos__nav{display:grid;gap:3px}
.jos__item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;font-size:13.5px;font-weight:700;color:var(--d-ink)}
.jos__item.is-on{background:var(--d-active)}
.jos__item svg{width:17px;height:17px;flex:0 0 auto;stroke:var(--d-ink);stroke-width:1.6}
.jos__foot{margin-top:auto}

/* ---------- main ---------- */
.jos__main{padding:24px 26px 26px;display:flex;flex-direction:column;min-width:0}
.jos__top{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.jos__search{display:flex;align-items:center;gap:10px;color:var(--d-grey);font-size:13.5px;font-weight:600}
.jos__search svg{width:17px;height:17px;stroke:var(--d-grey);stroke-width:1.8}
.jos__cta{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--d-violet);color:#fff;font-weight:700;font-size:13px;padding:11px 18px;border-radius:999px;white-space:nowrap}
.jos__cta svg{width:14px;height:14px;stroke:#fff;stroke-width:1.8}
.jos__bell{position:relative}
.jos__bell svg{width:19px;height:19px;stroke:var(--d-ink);stroke-width:1.6}
.jos__bell::after{content:"";position:absolute;right:0;top:1px;width:7px;height:7px;border-radius:50%;background:var(--d-orange);border:1.5px solid var(--d-bg)}
.jos__h{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--d-ink-2);margin:0 0 14px}

/* ---------- stats ---------- */
.jos__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.jstat{background:var(--d-card);border-radius:14px;padding:15px;display:flex;align-items:center;gap:13px;min-width:0}
.jstat__ic{width:34px;height:34px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;background:var(--d-line-2)}
.jstat__ic svg{width:17px;height:17px;stroke-width:1.7}
.jstat__l{font-size:12px;color:var(--d-ink);font-weight:600;margin-bottom:3px}
.jstat__v{display:flex;align-items:baseline;gap:8px}
.jstat__v b{font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--d-ink-2)}
.jstat__v em{font-style:normal;font-size:12px;font-weight:700;color:var(--d-violet)}

/* ---------- panneaux ---------- */
.jos__grid{display:grid;grid-template-columns:1.52fr 1fr;gap:18px;flex:1;min-height:0}
.jpanel{display:flex;flex-direction:column;min-width:0}
.jpanel__h{font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--d-ink-2);margin:0 0 11px}
.jpanel__b{background:var(--d-card);border-radius:14px;padding:16px;flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}

.jleg{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.jleg span{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--d-ink);font-weight:600}
.jleg i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.jleg__sel{margin-left:auto;border:1px solid var(--d-line);border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:700}
.jleg__sel svg{width:10px;height:10px;stroke:var(--d-ink);stroke-width:2}

/* graphe : chaque barre reste dans sa demi-ligne */
.jchart{display:flex;gap:10px;flex:1;min-height:0}
.jchart__y{display:flex;flex-direction:column;justify-content:space-between;font-size:9.5px;color:var(--d-grey);font-weight:600;padding-bottom:16px;text-align:right}
.jchart__plot{flex:1;display:flex;flex-direction:column;min-width:0}
.jchart__area{flex:1;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:relative;min-height:0}
.jchart__area::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--d-line)}
.jbar{height:100%;display:grid;grid-template-rows:1fr 1fr;justify-items:center}
.jbar i{width:7px;border-radius:99px;display:block;max-height:100%}
.jbar .up{align-self:end;height:var(--up);background:var(--d-violet)}
.jbar .dn{align-self:start;height:var(--dn);background:var(--d-orange)}
.jchart__x{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;font-size:9.5px;color:var(--d-grey);font-weight:600;text-align:center;padding-top:6px}

.jdonut{display:grid;place-items:center;flex:1;position:relative;min-height:0}
.jdonut__ring{
  width:min(148px,78%);aspect-ratio:1;border-radius:50%;
  background:conic-gradient(var(--d-pink) 0 25%,var(--d-cyan) 25% 50%,var(--d-blue) 50% 72%,var(--d-violet-2) 72% 100%);
  -webkit-mask:radial-gradient(circle,transparent 42%,#000 43%);
  mask:radial-gradient(circle,transparent 42%,#000 43%);
}
.jdonut__tag{
  position:absolute;top:2%;right:2%;
  background:linear-gradient(140deg,var(--d-violet-2),var(--d-violet));
  color:#fff;font-size:10.5px;font-weight:700;line-height:1.25;
  padding:10px 12px;border-radius:12px 12px 12px 4px;text-align:center;max-width:72px;
}
.jdonut__leg{display:grid;grid-template-columns:1fr 1fr;gap:7px 10px;margin-top:12px}
.jdonut__leg span{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--d-ink);font-weight:600}
.jdonut__leg i{width:7px;height:7px;border-radius:50%;flex:0 0 auto}

.jos__demo{position:absolute;right:14px;bottom:10px;font-size:8.5px;letter-spacing:.14em;font-weight:800;color:var(--d-grey);opacity:.75}

@media(max-width:900px){
  .jos{grid-template-columns:1fr;aspect-ratio:auto}
  .jos__side{flex-direction:row;align-items:center;gap:4px;overflow:hidden;padding:14px 16px}
  .jos__logo{margin:0 12px 0 0}
  .jos__nav{grid-auto-flow:column;gap:2px}
  .jos__item span{display:none}
  .jos__foot{display:none}
  .jos__stats{grid-template-columns:1fr}
  .jos__grid{grid-template-columns:1fr}
  .jchart__area{min-height:200px}
  .jdonut{min-height:190px}
}

/* ---------- dashboard vivant ---------- */
.jos__live{
  display:flex;align-items:center;gap:7px;
  font-size:11px;font-weight:700;color:#5C9E6E;
  background:#EFF8F1;padding:6px 11px;border-radius:999px;white-space:nowrap;
}
.jos__live i{width:6px;height:6px;border-radius:50%;background:#5C9E6E;animation:blip 2.2s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* les barres poussent depuis la ligne mediane */
.jbar i{transform:scaleY(0);transform-origin:bottom;transition:transform .9s cubic-bezier(.2,.9,.3,1) var(--bd,0ms)}
.jbar .dn{transform-origin:top}
.jos.is-live .jbar i{transform:scaleY(1)}

/* le donut se remplit */
.jdonut__ring{
  -webkit-mask:radial-gradient(circle,transparent 42%,#000 43%);
  mask:radial-gradient(circle,transparent 42%,#000 43%);
  clip-path:circle(0% at 50% 50%);
  transition:clip-path 1.5s cubic-bezier(.3,.85,.3,1) .35s;
}
.jos.is-live .jdonut__ring{clip-path:circle(75% at 50% 50%)}
.jdonut__tag{opacity:0;transform:translateY(-8px) scale(.9);transition:opacity .6s var(--ease) 1.1s,transform .7s cubic-bezier(.2,1.1,.3,1) 1.1s}
.jos.is-live .jdonut__tag{opacity:1;transform:none}

/* la ligne active de la sidebar glisse */
.jos__item.is-on{position:relative}
.jos__item.is-on::before{
  content:"";position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:99px;
  background:linear-gradient(180deg,#46C1F2,var(--d-violet));
  transform:scaleY(0);transform-origin:center;
  transition:transform .6s cubic-bezier(.2,1,.3,1) .5s;
}
.jos.is-live .jos__item.is-on::before{transform:scaleY(1)}

/* survol des cartes de stats */
.jstat{transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease}
.jstat:hover{transform:translateY(-3px);box-shadow:0 14px 26px -18px rgba(43,54,84,.5)}

@media (prefers-reduced-motion:reduce){
  .jos__live i{animation:none}
  .jbar i{transform:scaleY(1);transition:none}
  .jdonut__ring{clip-path:none;transition:none}
  .jdonut__tag{opacity:1;transform:none;transition:none}
  .jos__item.is-on::before{transform:scaleY(1)}
}