/* ============================================================
   Il grafico dell'anno su fondo navy. Serve materia e fotovoltaico.
   ============================================================ */

.dman{
  position:relative;overflow:hidden;border-radius:14px;background:#0b1a35;
  padding:22px 24px 20px;
  box-shadow:0 1px 2px rgba(11,26,53,.2), 0 20px 46px -18px rgba(11,26,53,.5);
}

/* ---------- intestazione ---------- */

.dman-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.dman-cap{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#7d93b5}
.dman-sub{margin-top:7px;font-size:16px;font-weight:700;letter-spacing:-.015em;color:#ffffff}
.dman-ctrl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dman-tabs{display:inline-flex;padding:3px;border-radius:9px;background:rgba(255,255,255,.07)}
.dman-tab{
  padding:7px 13px;border-radius:7px;font-size:12px;font-weight:700;
  color:#c3d3e8;text-decoration:none;transition:background .2s ease,color .2s ease;
}
.dman-tab:hover{color:#ffffff}
.dman-tab.on{background:#ffffff;color:#0f2244}
.dman-tog{
  padding:8px 13px;border-radius:9px;border:1px solid rgba(255,255,255,.2);
  font-size:12px;font-weight:700;color:#ffffff;text-decoration:none;
  transition:background .2s ease,border-color .2s ease;
}
.dman-tog:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}

/* ---------- grafico ---------- */

.dman-plot{position:relative;height:236px}
.dman-bars{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;align-items:end}
.dman-slot{position:relative;height:100%;display:flex;align-items:flex-end;min-width:0}
.dman-bar{
  display:block;width:100%;border-radius:4px 4px 0 0;min-height:2px;
  background:#2f6db8;transform-origin:bottom;
  transition:background .2s ease,height .4s cubic-bezier(.16,1,.3,1);
}
.dman-slot:hover .dman-bar{background:#5fa0e0}
.dman-slot.on .dman-bar{background:#c3ec2e}

/* v5.141.0 — Barra impilata (fotovoltaico in kWh): due porzioni sulla stessa
   colonna, la bassa sotto. Il colore lo detta il PHP perche' dice quale
   grandezza e', ed essendo inline batte le regole del foglio: hover e mese
   scelto schiariscono la colonna invece di ricolorarla, cosi' l'evidenza
   cambia e il significato no. */
.dman-stack{display:flex;flex-direction:column;justify-content:flex-end;width:100%;height:100%}
.dman-bar.top{border-radius:4px 4px 0 0}
.dman-bar.low{border-radius:0}
.dman-slot:hover .dman-stack,.dman-slot.on .dman-stack{filter:brightness(1.18)}
.dman-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}

/* Il fumetto: compare solo al passaggio, sopra la barra. */
.dman-tip{
  position:absolute;bottom:100%;left:50%;transform:translate(-50%,-8px);
  padding:9px 12px;border-radius:9px;background:#ffffff;color:#0f2244;
  font-size:11.5px;font-weight:600;line-height:1.4;white-space:nowrap;
  box-shadow:0 10px 26px -8px rgba(4,12,28,.55);
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:4;
}
.dman-tip b{display:block;margin-top:3px;font-size:15px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dman-tip em{display:block;margin-top:2px;font-style:normal;font-size:11px;font-weight:500;color:#66708a;font-variant-numeric:tabular-nums}
.dman-slot:hover .dman-tip{opacity:1;transform:translate(-50%,-4px)}

/* Etichette dei mesi: il mese scelto in bianco, gli altri smorzati. Sono
   colori chiari perche' il fondo e' navy — la versione su carta userebbe
   l'inchiostro scuro. */
.dman-labs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;margin-top:10px}
.dman-lab{text-align:center;font-size:10.5px;font-weight:600;color:#9fb4d4}
.dman-lab.on{font-weight:700;color:#ffffff}

.dman-legend{
  display:flex;align-items:center;gap:16px;margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:11.5px;font-weight:600;color:#9fb4d4;
}
.dman-legend span{display:inline-flex;align-items:center;gap:7px}
.dman-legend i.bar{width:10px;height:10px;border-radius:2px;background:#2f6db8}
.dman-legend i.line{width:14px;height:0;border-top:2px dashed #8fa8c9}
.dman-unit{margin-left:auto;color:#7d93b5}

/* ---------- tabella ----------
   Inchiostro invertito e zebra a velo chiaro: su navy le celle bianche del
   fondo chiaro apparirebbero come blocchi incollati. */

.dman-tbl{overflow-x:auto}
.dman-tr{
  display:grid;grid-template-columns:minmax(90px,1.4fr) repeat(4,minmax(80px,1fr));
  gap:10px;align-items:center;padding:10px 12px;border-radius:7px;min-width:520px;
}
.dman-tr>span{font-size:12.5px;font-weight:600;color:#ffffff;text-align:right;font-variant-numeric:tabular-nums}
.dman-tr>span:first-child{text-align:left;font-weight:600}
.dman-tr.head{padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.16);border-radius:0}
.dman-tr.head>span{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9fb4d4}
.dman-tr.alt{background:rgba(255,255,255,.04)}
.dman-tr.tot{margin-top:6px;background:rgba(255,255,255,.1)}
.dman-tr.tot>span{font-weight:700}
.dman-tr .d.up{color:#ff8f8f}
.dman-tr .d.down{color:#8fe3ab}

/* ---------- animazioni d'ingresso ---------- */

@keyframes dmanUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes dmanFade{from{opacity:0}to{opacity:1}}
@keyframes dmanRise{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---------- responsive ----------
   Sotto i 720px dodici etichette non stanno: si tengono i mesi dispari, cosi'
   la scala resta leggibile invece di diventare illeggibile per tutti. */

@media (max-width:720px){
  .dman{padding:18px 16px 16px}
  .dman-plot{height:186px}
  .dman-bars,.dman-labs{gap:3px}
  .dman-lab{font-size:9px}
  .dman-lab:nth-child(even){opacity:.35}
  .dman-tip{font-size:10.5px;padding:7px 9px}
}
@media print{
  .dman{box-shadow:none}
  .dman-tip{display:none}
}
@media (prefers-reduced-motion: reduce){.dman *{transition:none !important}}