/* Pro Workspace — Inventory Intelligence panel. Themed with the app palette;
   count-up (JS) + donut-sweep + bar-grow animations on reveal (.pwiIn). */
.pwiPanel{ margin:0 0 22px; padding:22px; border:1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); border-radius:20px; background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--surface-raised, var(--panel))), var(--surface-raised, var(--panel))); box-shadow:0 14px 40px rgba(0,0,0,.16); animation:pwiPanelIn .5s ease both; }
.pwiHeading{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:18px; }
.pwiHeading span{ color:var(--accent2, var(--accent)); font-size:.62rem; font-weight:900; letter-spacing:.14em; }
.pwiHeading h3{ margin:3px 0 0; font-size:1.25rem; }
.pwiHeading small{ color:var(--muted); font-size:.78rem; }
.pwiEmpty{ color:var(--muted); margin:6px 0 0; }

.pwiHero{ display:grid; grid-template-columns:1.3fr 1fr; gap:16px; margin-bottom:18px; }
.pwiValueCard{ display:flex; flex-direction:column; gap:6px; justify-content:center; padding:20px 22px; border-radius:16px; background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--surface-main, var(--panel))), var(--surface-main, var(--panel))); border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); }
.pwiValueLabel{ color:var(--accent2, var(--accent)); font-size:.64rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.pwiValueAmount{ font-size:2.4rem; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.pwiValueSub{ color:var(--muted); font-size:.82rem; font-weight:600; }

.pwiHealth{ display:flex; align-items:center; gap:16px; padding:16px 18px; border-radius:16px; background:var(--surface-main, var(--panel)); border:1px solid var(--line); }
.pwiDonut{ width:120px; height:120px; flex:0 0 auto; }
.pwiDonutSeg{ stroke-dashoffset:var(--off); stroke-dasharray:0 999; transition:stroke-dasharray .9s cubic-bezier(.3,.9,.3,1); transition-delay:calc(var(--i) * .12s); }
.pwiIn .pwiDonutSeg{ stroke-dasharray:var(--dash); }
.pwiDonutSeg.ok{ stroke:var(--good,#16a34a); }
.pwiDonutSeg.low{ stroke:var(--warn,#d97706); }
.pwiDonutSeg.out{ stroke:var(--bad,#dc2626); }
.pwiDonutNum{ fill:var(--text); font-size:20px; font-weight:800; text-anchor:middle; }
.pwiDonutLbl{ fill:var(--muted); font-size:8px; font-weight:700; text-anchor:middle; letter-spacing:.1em; text-transform:uppercase; }
.pwiHealthLegend{ display:flex; flex-direction:column; gap:8px; flex:1 1 auto; min-width:0; }
.pwiHealthLegend span{ display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--muted); }
.pwiHealthLegend b{ margin-left:auto; color:var(--text); font-weight:800; }
.pwiHealthLegend i{ width:11px; height:11px; border-radius:3px; flex:0 0 auto; }
.pwiHealthLegend .ok i{ background:var(--good,#16a34a); }
.pwiHealthLegend .low i{ background:var(--warn,#d97706); }
.pwiHealthLegend .out i{ background:var(--bad,#dc2626); }

.pwiCharts{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pwiChart{ padding:16px 18px; border-radius:16px; background:var(--surface-main, var(--panel)); border:1px solid var(--line); }
.pwiChart h4{ margin:0 0 12px; font-size:.9rem; color:var(--muted); font-weight:750; }
.pwiBars, .pwiColors{ display:flex; flex-direction:column; gap:10px; }
.pwiBar{ display:grid; grid-template-columns:76px 1fr auto; align-items:center; gap:10px; }
.pwiBarLabel{ font-size:.8rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pwiBarTrack{ height:12px; border-radius:999px; background:color-mix(in srgb, var(--line) 60%, transparent); overflow:hidden; }
.pwiBarFill{ display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 68%, var(--accent2, var(--accent))), var(--accent)); transition:width .9s cubic-bezier(.2,.8,.2,1); }
.pwiIn .pwiBarFill{ width:var(--w); }
.pwiBarVal{ font-size:.8rem; font-weight:800; font-variant-numeric:tabular-nums; }

.pwiColorRow{ display:grid; grid-template-columns:auto 1fr 76px auto; align-items:center; gap:10px; }
.pwiColorDot{ width:16px; height:16px; border-radius:5px; background:var(--c); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), 0 0 0 1px rgba(15,23,42,.14); }
.pwiColorName{ font-size:.8rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pwiColorTrack{ height:10px; border-radius:999px; background:color-mix(in srgb, var(--line) 60%, transparent); overflow:hidden; }
.pwiColorTrack i{ display:block; height:100%; width:0; border-radius:999px; background:var(--c); transition:width .9s cubic-bezier(.2,.8,.2,1) .1s; }
.pwiIn .pwiColorTrack i{ width:var(--w); }
.pwiColorVal{ font-size:.78rem; font-weight:800; font-variant-numeric:tabular-nums; }

@keyframes pwiPanelIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media(max-width:760px){ .pwiHero{ grid-template-columns:1fr; } .pwiCharts{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ .pwiPanel,.pwiDonutSeg,.pwiBarFill,.pwiColorTrack i{ animation:none!important; transition:none!important; } }