/* ============================================================
   PlantariB2B — Area Riservata (prototipo) — app chrome
   Estende assets/style.css (tokens teal/mono già definiti lì).
   ============================================================ */

.appbody{background:var(--bg-soft);min-height:100vh}

/* demo badge */
.demo-badge{position:fixed;top:0;left:0;right:0;z-index:300;height:30px;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--sand);color:#fff;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.demo-badge a{color:#fff;text-decoration:underline;text-underline-offset:2px;opacity:.92}
.demo-badge button{color:#fff;font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;opacity:.85;text-decoration:underline;text-underline-offset:2px}

/* ---------- AUTH ---------- */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:54px 22px 22px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--teal-deep),var(--teal-d) 60%,#0c5e55)}
.auth::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(120% 90% at 70% 0%,#000,transparent 72%);-webkit-mask-image:radial-gradient(120% 90% at 70% 0%,#000,transparent 72%)}
.auth::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(149,222,210,.22),transparent 70%);top:-220px;right:-160px;pointer-events:none}
.auth-card{position:relative;width:100%;max-width:420px;background:var(--white);border-radius:24px;padding:38px 34px;box-shadow:var(--shadow-lg)}
.auth-logo{display:flex;align-items:center;gap:11px;margin-bottom:26px}
.auth-logo .logo-mark{width:40px;height:40px;border-radius:11px;background:linear-gradient(150deg,#13897b,#0a564d);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(14,110,99,.28)}
.auth-logo .logo-mark svg{width:23px;height:23px;color:#fff}
.auth-logo b{font-size:17px;font-weight:600;letter-spacing:-.02em}
.auth-logo i{display:block;font-family:var(--mono);font-size:10px;font-weight:600;font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-top:2px}
.auth h1{font-size:24px;font-weight:600;letter-spacing:-.022em;margin-bottom:6px}
.auth .sub{font-size:14px;color:var(--ink3);margin-bottom:24px;line-height:1.5}
.auth .field{margin-bottom:14px}
.auth .demo-hint{margin-top:18px;font-family:var(--mono);font-size:11px;color:var(--ink3);text-align:center;line-height:1.5}
.auth .back{position:absolute;top:18px;left:0;font-size:13px;color:rgba(255,255,255,.8);display:inline-flex;align-items:center;gap:6px}

/* ---------- SHELL ---------- */
.ashell{display:grid;grid-template-columns:248px 1fr;grid-template-rows:auto 1fr;min-height:100vh;padding-top:30px}
.atop{grid-column:1/3;height:62px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 24px;
  background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(16px);border-bottom:.5px solid var(--rule);position:sticky;top:30px;z-index:50}
.atop .logo{display:flex;align-items:center;gap:10px}
.atop .logo-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(150deg,#13897b,#0a564d);display:flex;align-items:center;justify-content:center}
.atop .logo-mark svg{width:19px;height:19px;color:#fff}
.atop .logo b{font-size:15px;font-weight:600;letter-spacing:-.02em}
.atop .logo i{font-family:var(--mono);font-size:9.5px;font-weight:600;font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);display:block;margin-top:1px}
.atop-right{display:flex;align-items:center;gap:14px}
.uchip{display:flex;align-items:center;gap:10px;font-size:13.5px}
.uchip .av{width:34px;height:34px;border-radius:50%;background:var(--teal-soft);color:var(--teal-d);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
.uchip b{font-weight:600;letter-spacing:-.01em}
.uchip span{display:block;font-size:12px;color:var(--ink3)}

.aside{border-right:.5px solid var(--rule);background:var(--white);padding:20px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:92px;height:calc(100vh - 92px)}
.aside a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;font-size:14.5px;font-weight:500;color:var(--ink2);transition:background .15s,color .15s}
.aside a:hover{background:var(--bg-soft)}
.aside a.on{background:var(--teal-soft2);color:var(--teal-d)}
.aside a svg{width:18px;height:18px;flex-shrink:0}
.aside .sp{flex:1}
.aside .side-cta{margin:6px 6px 2px}

.amain{padding:30px 30px 80px;max-width:1100px}
@media(max-width:900px){
  .ashell{grid-template-columns:1fr}
  .aside{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;flex-direction:row;justify-content:space-around;border-right:none;border-top:.5px solid var(--rule);padding:8px 6px;z-index:60}
  .aside a{flex-direction:column;gap:4px;font-size:11px;padding:6px 8px}
  .aside a span.lbl{font-size:10.5px}
  .aside .side-cta{display:none}
  .amain{padding:20px 18px 90px}
  .atop{padding:0 16px}
}

.ahead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.ahead h1{font-size:clamp(24px,3.4vw,32px);font-weight:600;letter-spacing:-.024em}
.ahead p{font-size:14.5px;color:var(--ink3);margin-top:4px}

/* ---------- KPI ---------- */
.akpi{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:26px}
@media(min-width:760px){.akpi{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--white);border:.5px solid var(--rule);border-radius:var(--r2);padding:18px 20px}
.kpi b{display:block;font-size:28px;font-weight:600;letter-spacing:-.03em;color:var(--teal);font-variant-numeric:tabular-nums}
.kpi span{font-size:12.5px;color:var(--ink3);margin-top:2px;display:block}

/* ---------- Cards / list ---------- */
.cardrow{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cardrow h2{font-size:18px;font-weight:600;letter-spacing:-.02em}
.caselist{display:grid;grid-template-columns:1fr;gap:12px}
.caseitem{display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-items:center;background:var(--white);border:.5px solid var(--rule);border-radius:var(--r2);padding:16px 18px;transition:border-color .16s,transform .16s,box-shadow .16s;cursor:pointer}
.caseitem:hover{border-color:var(--teal-mid);transform:translateY(-2px);box-shadow:var(--shadow)}
.caseitem .thumb{width:64px;height:64px;border-radius:13px;background:linear-gradient(155deg,#0c5e55,#073b35);display:flex;align-items:center;justify-content:center;overflow:hidden}
.caseitem .thumb svg{width:40px;height:54px}
.caseitem .ci-main b{font-size:15.5px;font-weight:600;letter-spacing:-.014em}
.caseitem .ci-main span{display:block;font-size:13px;color:var(--ink3);margin-top:3px}
.caseitem .ci-main .meta{font-family:var(--mono);font-size:11px;color:var(--ink3);margin-top:6px;letter-spacing:.02em}
.caseitem .ci-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
@media(max-width:620px){.caseitem{grid-template-columns:52px 1fr;}.caseitem .ci-right{grid-column:1/3;flex-direction:row;align-items:center;justify-content:space-between}.caseitem .thumb{width:52px;height:52px}}

/* status pills */
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--r3);font-size:12.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.pill i{width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.s-bozza{background:#eef1f0;color:#6c7d78}
.pill.s-progettazione{background:#e8eef7;color:#3a6ea5}
.pill.s-validazione{background:#fff1e0;color:#b5731f}
.pill.s-approvazione{background:#f3ecff;color:#7a4fd0}
.pill.s-produzione{background:var(--teal-soft2);color:var(--teal-d)}
.pill.s-spedito{background:#e3f5ea;color:#2f9e57}

/* ---------- Wizard ---------- */
.wsteps{display:flex;align-items:center;gap:0;margin-bottom:30px;flex-wrap:wrap}
.wstep{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink3);font-weight:500}
.wstep .n{width:28px;height:28px;border-radius:50%;background:var(--bg-soft2);color:var(--ink3);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;font-weight:600;flex-shrink:0}
.wstep.on{color:var(--ink)}.wstep.on .n{background:var(--teal);color:#fff}
.wstep.done .n{background:var(--teal-soft);color:var(--teal-d)}
.wstep .bar{width:34px;height:2px;background:var(--rule);margin:0 12px}
@media(max-width:680px){.wstep .lbl{display:none}.wstep .bar{width:18px;margin:0 6px}}
.wpanel{background:var(--white);border:.5px solid var(--rule);border-radius:var(--r2);padding:30px 30px;max-width:760px}
.wpanel h2{font-size:21px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.wpanel .wsub{font-size:14px;color:var(--ink3);margin-bottom:24px;line-height:1.5}
.wgrid{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:560px){.wgrid.two{grid-template-columns:1fr 1fr;gap:0 18px}}
.wfoot{display:flex;justify-content:space-between;gap:12px;margin-top:28px}

/* dropzone (simulated upload) */
.dropzone{border:1.6px dashed var(--rule);border-radius:var(--r2);padding:30px 24px;text-align:center;background:var(--bg);transition:border-color .16s,background .16s;cursor:pointer}
.dropzone:hover{border-color:var(--teal-mid);background:var(--teal-soft2)}
.dropzone .dz-ic{width:52px;height:52px;border-radius:14px;background:var(--teal-soft);color:var(--teal-d);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.dropzone b{display:block;font-size:15px;font-weight:600}
.dropzone span{font-size:13px;color:var(--ink3)}
.dz-opts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.dz-opts .chip{cursor:pointer}
.uploaded{display:flex;align-items:center;gap:12px;background:var(--teal-soft2);border:.5px solid var(--teal-soft);border-radius:14px;padding:14px 16px;margin-top:14px}
.uploaded svg{width:22px;height:22px;color:var(--teal-d)}
.uploaded b{font-size:14px}
.uploaded span{font-size:12px;color:var(--ink3);font-family:var(--mono)}

/* choice cards (tipologia/materiale) */
.choices{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:560px){.choices{grid-template-columns:1fr 1fr}}
.choice{border:1.4px solid var(--rule);border-radius:16px;padding:18px 18px;cursor:pointer;transition:border-color .16s,background .16s}
.choice:hover{border-color:var(--teal-mid)}
.choice.sel{border-color:var(--teal);background:var(--teal-soft2)}
.choice b{font-size:15px;font-weight:600;display:block;margin-bottom:4px}
.choice span{font-size:13px;color:var(--ink3);line-height:1.45}
.choice .tag{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--teal-d);margin-top:8px;display:inline-block}

/* ---------- Case detail ---------- */
.caselayout{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:920px){.caselayout{grid-template-columns:1.15fr .85fr;align-items:start}}
.viewer3d{position:relative;border-radius:var(--r2);overflow:hidden;background:linear-gradient(155deg,#0c5e55,#073b35);aspect-ratio:4/3.3;border:.5px solid var(--rule);box-shadow:var(--shadow)}
.viewer3d canvas{display:block;width:100%!important;height:100%!important}
.viewer3d .v-tag{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:var(--r3);background:rgba(255,255,255,.92);font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--teal-deep);z-index:2}
.viewer3d .v-hint{position:absolute;right:14px;bottom:12px;font-family:var(--mono);font-size:10.5px;color:rgba(255,255,255,.7);z-index:2}
.viewer3d .v-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.viewer3d .v-fallback svg{width:46%;height:auto;opacity:.95}

.casebox{background:var(--white);border:.5px solid var(--rule);border-radius:var(--r2);padding:22px 22px;margin-bottom:16px}
.casebox h3{font-size:13px;font-family:var(--mono);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin-bottom:14px}
.paramrow{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:.5px solid var(--rule2);font-size:14px}
.paramrow:last-child{border-bottom:none}
.paramrow span{color:var(--ink3)}.paramrow b{font-weight:600;letter-spacing:-.01em}
.crit{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:.5px solid var(--rule2);font-size:14px;color:var(--ink2);line-height:1.5}
.crit:last-child{border-bottom:none}
.crit svg{flex-shrink:0;width:18px;height:18px;color:var(--sand);margin-top:1px}
.crit.ok svg{color:var(--green)}

/* timeline */
.timeline{display:grid;gap:0}
.tl{display:grid;grid-template-columns:24px 1fr;gap:14px;padding-bottom:18px;position:relative}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;left:11px;top:22px;bottom:-4px;width:2px;background:var(--rule)}
.tl:last-child::before{display:none}
.tl .dot{width:24px;height:24px;border-radius:50%;background:var(--bg-soft2);display:flex;align-items:center;justify-content:center;z-index:1}
.tl.done .dot{background:var(--teal);color:#fff}
.tl.done .dot svg{width:13px;height:13px}
.tl.cur .dot{background:var(--teal-soft);box-shadow:0 0 0 4px var(--teal-soft2)}
.tl .tl-b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.tl .tl-s{font-size:12.5px;color:var(--ink3);margin-top:1px}
.tl.todo{opacity:.5}

.caseactions{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}

/* ---------- Chat ---------- */
.chat{background:var(--white);border:.5px solid var(--rule);border-radius:var(--r2);overflow:hidden;display:flex;flex-direction:column;max-width:760px;height:560px}
.chat-head{padding:16px 20px;border-bottom:.5px solid var(--rule);display:flex;align-items:center;gap:12px}
.chat-head .av{width:38px;height:38px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
.chat-head b{font-size:14.5px;font-weight:600}.chat-head span{display:block;font-size:12px;color:var(--green)}
.chat-body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;background:var(--bg-soft)}
.bubble{max-width:78%;padding:12px 15px;border-radius:16px;font-size:14px;line-height:1.5}
.bubble.them{align-self:flex-start;background:var(--white);border:.5px solid var(--rule);border-bottom-left-radius:5px}
.bubble.me{align-self:flex-end;background:var(--teal);color:#fff;border-bottom-right-radius:5px}
.bubble .b-at{display:block;font-family:var(--mono);font-size:10px;opacity:.6;margin-top:5px}
.chat-foot{padding:14px 16px;border-top:.5px solid var(--rule);display:flex;gap:10px}
.chat-foot input{flex:1;padding:12px 15px;border-radius:12px;border:1.4px solid var(--rule);font-size:15px;background:var(--bg)}
.chat-foot input:focus{outline:none;border-color:var(--teal-mid);background:var(--white)}

/* misc */
.empty{text-align:center;padding:60px 20px;color:var(--ink3)}
.empty svg{width:54px;height:54px;color:var(--teal-mid);margin-bottom:16px}
.lnk-back{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink3);margin-bottom:16px;font-weight:500}
.lnk-back:hover{color:var(--teal)}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:13px 22px;border-radius:12px;font-size:14px;font-weight:500;z-index:400;opacity:0;transition:opacity .25s,transform .25s;box-shadow:var(--shadow-lg)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:900px){.toast{bottom:80px}}

/* ============================================================
   Economia & Profilo (dashboard finanziaria personalizzabile)
   ============================================================ */
.eckpis{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:20px}
@media(min-width:860px){.eckpis{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--white);border:.5px solid var(--rule);border-radius:var(--r2);padding:18px 20px;position:relative;overflow:hidden}
.stat .s-l{font-size:12.5px;color:var(--ink3);display:flex;align-items:center;gap:7px}
.stat .s-l svg{width:15px;height:15px;opacity:.8}
.stat .s-v{font-size:27px;font-weight:600;letter-spacing:-.03em;margin-top:9px;font-variant-numeric:tabular-nums;line-height:1}
.stat .s-t{font-family:var(--mono);font-size:11px;font-weight:600;margin-top:8px;display:inline-flex;align-items:center;gap:4px;letter-spacing:.01em}
.stat .s-t.up{color:var(--green)}.stat .s-t.down{color:#c0392b}
.stat.accent{background:linear-gradient(155deg,var(--teal) 0%,var(--teal-deep) 100%);color:#fff;border-color:transparent}
.stat.accent .s-l,.stat.accent .s-l svg{color:rgba(255,255,255,.82)}
.stat.accent .s-t{color:rgba(255,255,255,.9)}
.stat.accent::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(149,222,210,.35),transparent 70%);top:-50px;right:-30px}

.ecgrid{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:16px}
@media(min-width:980px){.ecgrid{grid-template-columns:1.6fr 1fr}}
.chartcard{background:var(--white);border:.5px solid var(--rule);border-radius:var(--r2);padding:22px 22px}
.chartcard .cc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.chartcard h3{font-size:15.5px;font-weight:600;letter-spacing:-.015em}
.chartcard .cc-sub{font-size:12.5px;color:var(--ink3);margin-top:2px}
.chartwrap{position:relative;height:268px}
.chartwrap.donut{height:200px}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.donut-center b{font-size:22px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.donut-center span{font-size:11.5px;color:var(--ink3);font-family:var(--mono)}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:12.5px;color:var(--ink2)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:11px;height:11px;border-radius:3px;flex-shrink:0}
.chart-missing{height:268px;display:flex;align-items:center;justify-content:center;color:var(--ink3);font-size:13px;text-align:center;background:var(--bg-soft);border-radius:14px}

/* breakdown table */
.bd{width:100%;border-collapse:collapse;font-size:13.5px}
.bd th{text-align:left;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);padding:0 12px 11px;border-bottom:.5px solid var(--rule)}
.bd td{padding:13px 12px;border-bottom:.5px solid var(--rule2);font-variant-numeric:tabular-nums}
.bd th:not(:first-child),.bd td:not(:first-child){text-align:right}
.bd tr.tot td{font-weight:600;border-bottom:none;border-top:1.4px solid var(--rule);padding-top:14px}
.bd .mat{display:inline-flex;align-items:center;gap:9px;font-weight:600}
.bd .mat i{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.bd .pos{color:var(--green);font-weight:600}

/* profilo / listino */
.profile-card{background:var(--white);border:.5px solid var(--rule);border-radius:var(--r2);padding:26px 26px;max-width:760px;margin-bottom:16px}
.profile-card h3{font-size:13px;font-family:var(--mono);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin-bottom:16px}
.listino-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:560px){.listino-grid{grid-template-columns:1fr 1fr}}
.lst{border:.5px solid var(--rule);border-radius:16px;padding:18px}
.lst h4{font-size:15px;font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:9px}
.lst h4 i{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.lst .lst-sub{font-size:12.5px;color:var(--ink3);margin-bottom:14px}
.lst .lst-marg{margin-top:12px;padding-top:12px;border-top:.5px solid var(--rule2);font-size:13px;color:var(--ink3);display:flex;justify-content:space-between}
.lst .lst-marg b{color:var(--teal-d);font-weight:600;font-variant-numeric:tabular-nums}
.inpeur{position:relative}
.inpeur .cur{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink3);font-size:15px;pointer-events:none}
.inpeur input{padding-left:30px}