/* Osservatorio zootecnico — layout a tre colonne in stile terminale (token Pecus Chain da style.css) */
.dash{display:flex; height:calc(100dvh - var(--nav-h)); overflow:hidden; background:var(--bg);}
.dash [hidden]{display:none !important;}
.dash-loading{font-size:12.5px; color:var(--ink-muted); font-weight:600; padding:14px 12px;}
.dash-empty{font-size:12.5px; color:var(--ink-muted); padding:12px;}
.num{font-variant-numeric:tabular-nums lining-nums;}

/* ============ pannelli laterali richiudibili ============ */
.dpanel{background:var(--surface); display:flex; flex-direction:column; min-height:0; flex-shrink:0; transition:width .18s ease;}
.dleft{width:304px; border-right:1px solid var(--border);}
.dright{width:344px; border-left:1px solid var(--border);}
.dpanel-head{height:46px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 8px 0 14px; border-bottom:1px solid var(--line);}
.dpanel-title{font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-muted);}
.dpanel-body{flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden;}
.dpanel.collapsed{width:46px;}
.dpanel.collapsed .dpanel-head,.dpanel.collapsed .dpanel-body{display:none;}
.dpanel.collapsed .panel-rail{display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 0;}
.rail-label{writing-mode:vertical-rl; transform:rotate(180deg); font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-muted); margin-top:6px; cursor:default;}
.dscrim{display:none;}

/* ============ watchlist ============ */
.wl-controls{padding:10px 12px; display:flex; flex-direction:column; gap:8px; border-bottom:1px solid var(--line);}
.wl-controls input[type=search]{width:100%; border:1px solid var(--border); border-radius:9px; padding:7px 10px; font-size:12.5px; font-weight:600; background:var(--bg); outline:none;}
.wl-controls input[type=search]:focus{border-color:var(--brand-soft); background:var(--surface);}
.wl-dim{display:flex; align-items:center; gap:8px; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted);}
.wl-dim select{flex:1; min-width:0;}
.dash select{border:1px solid var(--border); background:var(--surface); border-radius:8px; padding:5px 8px; font-weight:700; font-size:12px; color:var(--ink); font-family:inherit;}
.wl-cols,.wl-row{display:grid; grid-template-columns:minmax(0,1fr) 74px 62px; align-items:center; gap:6px;}
.wl-cols{padding:6px 12px; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); border-bottom:1px solid var(--line);}
.wl-cols span:not(:first-child){text-align:right;}
.watchlist{flex:1; overflow-y:auto; outline:none; padding-bottom:8px;}
.wl-group-head{width:100%; display:flex; align-items:center; justify-content:space-between; gap:6px; padding:9px 12px 5px; position:sticky; top:0; z-index:1; background:var(--surface);
  font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); text-align:left;}
.wl-group-head:hover{color:var(--ink);}
.wl-group-head .chev{width:6px; height:6px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg); transition:transform .15s; margin-right:3px;}
.wl-group.closed .chev{transform:rotate(-45deg);}
.wl-group.closed .wl-rows{display:none;}
.wl-row{padding:6px 12px 6px 9px; border-left:3px solid transparent; cursor:pointer; min-height:38px;}
.wl-row:hover{background:var(--bg);}
.wl-row.active{background:var(--brand-wash); border-left-color:var(--brand);}
.wl-row .nm{min-width:0;}
.wl-row .nm b{display:block; font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.wl-row .nm small{display:block; font-size:10.5px; font-weight:600; color:var(--ink-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.wl-row .lv{text-align:right; font-size:12.5px; font-weight:800; font-variant-numeric:tabular-nums;}
.wl-row .ch{text-align:right; font-size:11px; font-weight:800; font-variant-numeric:tabular-nums;}
.wl-row.nodata .lv,.wl-row.nodata .ch{color:var(--ink-muted); font-weight:600;}
.good{color:var(--brand-soft);} .bad{color:var(--crit);} .flat{color:var(--ink-muted);}
.wl-foot{padding:8px 12px; border-top:1px solid var(--line); font-size:10.5px; font-weight:600; color:var(--ink-muted);}

/* ============ area centrale ============ */
.dcenter{flex:1; min-width:0; overflow-y:auto; padding:16px 22px 30px;}
.q-empty{display:flex; align-items:center; justify-content:center; min-height:40vh;}
.q-crumbs{display:flex; align-items:center; gap:7px; font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-muted);}
.q-crumbs .sep{opacity:.6;}
.q-freq{font-size:9.5px; letter-spacing:.05em; background:var(--line); border-radius:5px; padding:2px 6px;}
.q-open-list{display:none;}
.q-title{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:5px;}
.q-title h1{margin:0; font-size:22px; font-weight:800; line-height:1.2;}
.q-model{font-size:10.5px; font-weight:800; border-radius:6px; padding:3px 8px; background:var(--gold-wash); color:var(--gold); white-space:nowrap;}
.q-model.trained{background:var(--tech-wash); color:var(--tech);}
.q-model:empty{display:none;}
.q-price{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-top:6px;}
.q-last{font-size:36px; font-weight:800; letter-spacing:-.01em; line-height:1; font-variant-numeric:tabular-nums;}
.q-unit{font-size:13px; font-weight:600; color:var(--ink-muted);}
.q-chg{font-size:14px; font-weight:800; border-radius:7px; padding:3px 9px; background:var(--line); color:var(--ink-muted); font-variant-numeric:tabular-nums;}
.q-chg.good{background:var(--brand-wash); color:var(--brand);} .q-chg.bad{background:var(--crit-wash); color:var(--crit);}
.q-yoy{font-size:12px; font-weight:700; color:var(--ink-muted); font-variant-numeric:tabular-nums;}
.q-yoy b.good{color:var(--brand-soft);} .q-yoy b.bad{color:var(--crit);}
.q-period{font-size:12px; font-weight:600; color:var(--ink-muted);}
.q-desc{margin:7px 0 0; font-size:12.5px; color:var(--ink-muted); line-height:1.5; max-width:920px;}

/* toolbar */
.q-toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0 8px; padding:6px 8px; background:var(--surface); border:1px solid var(--border); border-radius:12px;}
.q-toolbar .spacer{flex:1;}
.seg{display:inline-flex; background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:2px; gap:2px;}
.seg button{border-radius:7px; padding:5px 10px; font-size:11.5px; font-weight:800; color:var(--ink-muted); letter-spacing:.02em;}
.seg button:hover{color:var(--ink);}
.seg button.active{background:var(--surface); color:var(--brand); box-shadow:var(--shadow-sm);}
.tgl{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--ink-muted); cursor:pointer; user-select:none;}
.tgl input{accent-color:var(--brand); width:14px; height:14px; margin:0;}
.tgl:hover{color:var(--ink);}
.q-compare{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--ink-muted);}
.q-compare select{max-width:220px;}
.tbtn{border:1px solid var(--border); background:var(--surface); border-radius:8px; padding:5px 10px; font-size:11.5px; font-weight:800; color:var(--ink-muted); letter-spacing:.03em;}
.tbtn:hover{color:var(--ink); border-color:var(--ink-muted);}

/* grafico */
.q-chart-wrap{position:relative; height:clamp(320px, 54vh, 600px); background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden;}
.q-chart{position:absolute; inset:0;}
.q-legend{position:absolute; top:10px; left:12px; z-index:3; pointer-events:none; display:flex; flex-direction:column; gap:2px;
  font-size:11.5px; font-weight:600; color:var(--ink-muted); background:rgba(255,255,255,.9); border:1px solid var(--line); border-radius:9px; padding:6px 10px; font-variant-numeric:tabular-nums;}
.q-legend:empty{display:none;}
.q-legend .lg-date{font-weight:800; color:var(--ink); font-size:11px; letter-spacing:.04em; text-transform:uppercase;}
.q-legend .lg-row{display:flex; align-items:center; gap:7px; white-space:nowrap;}
.q-legend .lg-row i{display:inline-block; width:12px; height:3px; border-radius:2px;}
.q-legend .lg-row i.dash{background:repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px) !important;}
.q-legend .lg-row b{color:var(--ink); font-weight:800;}
.q-bars{position:absolute; inset:0; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:6px; background:var(--surface);}
.q-bars[hidden]{display:none;}
.bar-row{display:grid; grid-template-columns:170px minmax(0,1fr) 84px; gap:10px; align-items:center; font-size:12px; font-weight:600;}
.bar-row .trk{height:12px; border-radius:4px; background:var(--bg); border:1px solid var(--line); overflow:hidden;}
.bar-row .trk i{display:block; height:100%; background:var(--brand-soft);}
.bar-row b{text-align:right; font-weight:800; font-variant-numeric:tabular-nums;}

/* statistiche */
.q-stats{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); margin-top:12px; background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden;}
.q-stat{padding:9px 13px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); min-width:0;}
.q-stat:nth-child(4n){border-right:0;}
.q-stat:nth-last-child(-n+4){border-bottom:0;}
.q-stat .lbl{font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);}
.q-stat .val{font-size:16px; font-weight:800; margin-top:2px; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.q-stat .sub{font-size:10.5px; font-weight:600; color:var(--ink-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* pannelli inferiori */
.q-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin-top:12px;}
.q-panel{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 14px; min-width:0; margin-top:12px;}
.q-grid .q-panel{margin-top:0;}
.q-panel-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px;}
.q-panel-head h3{margin:0; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
.q-panel-head .hint{font-size:10.5px; color:var(--ink-muted); font-weight:600;}
.q-horizon{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--ink-muted);}
.qt{width:100%; border-collapse:collapse; font-size:12px;}
.qt th{font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); text-align:right; padding:5px 8px; border-bottom:1px solid var(--line);}
.qt td{text-align:right; padding:5px 8px; border-bottom:1px solid var(--line); font-weight:600; font-variant-numeric:tabular-nums;}
.qt th:first-child,.qt td:first-child{text-align:left; padding-left:0;}
.qt tr:last-child td{border-bottom:0;}
.qt td b{font-weight:800;}
.qt.clickable tbody tr{cursor:pointer;}
.qt.clickable tbody tr:hover{background:var(--bg);}
.qt tr.sel td{background:var(--brand-wash);}
.qt .spark{width:70px; height:18px; display:block; margin-left:auto;}
.terr-scroll{max-height:300px; overflow-y:auto;}
.model-card{background:var(--tech-wash); border:1px solid #D3E0E8; border-radius:10px; padding:9px 12px; font-size:12px; display:flex; flex-direction:column; gap:4px; margin-bottom:10px;}
.model-card.baseline{background:var(--gold-wash); border-color:#EFD9BC;}
.model-card .mrow{display:flex; gap:12px; flex-wrap:wrap;}
.model-card .mrow span{font-weight:600; color:var(--ink-muted);}
.model-card .mrow b{font-weight:800; color:var(--ink);}
.q-notes{font-size:12px; color:var(--ink-muted); line-height:1.55;}
.q-notes b{color:var(--ink);}

/* ============ pannello destro: meteo e notizie ============ */
.rtabs{display:flex; gap:2px;}
.rtab{padding:6px 12px; border-radius:8px; font-size:12px; font-weight:800; color:var(--ink-muted);}
.rtab:hover{color:var(--ink);}
.rtab.active{background:var(--brand-wash); color:var(--brand);}
.rpane{flex:1; min-height:0; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px;}
.rpane[hidden]{display:none;}
.wx-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap;}
.wx-head b{font-size:13px; font-weight:800;}
.wx-alert{font-size:11px; font-weight:800; border-radius:999px; padding:2px 9px; white-space:nowrap;}
.wx-alert.on{background:var(--crit-wash); color:var(--crit);} .wx-alert.off{background:var(--brand-wash); color:var(--brand);}
.wx-list{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.wx-row{display:grid; grid-template-columns:62px minmax(0,1fr) 54px 56px; align-items:center; gap:6px; padding:7px 10px; border-bottom:1px solid var(--line); font-size:12px; font-weight:600;}
.wx-row:last-child{border-bottom:0;}
.wx-row .d{font-weight:800; text-transform:capitalize;}
.wx-row .t{color:var(--ink-muted); font-variant-numeric:tabular-nums;} .wx-row .t b{color:var(--ink); font-weight:800;}
.wx-row .r{text-align:right; color:var(--tech-soft); font-weight:700; font-variant-numeric:tabular-nums;}
.thi{display:inline-block; text-align:center; font-size:11px; font-weight:800; border-radius:6px; padding:2px 0; color:#fff; background:var(--ok); font-variant-numeric:tabular-nums;}
.thi.disagio{background:var(--warn);} .thi.stress{background:#D9742C;} .thi.severo{background:var(--crit);}
.wx-legend{font-size:10.5px; color:var(--ink-muted); font-weight:600; line-height:1.5;}
.wx-legend i{display:inline-block; width:8px; height:8px; border-radius:2px; margin:0 3px 0 6px; vertical-align:0;}
.wx-chart{position:relative; height:130px;}
.linkbtn{font-size:11.5px; font-weight:800; color:var(--tech); text-align:left;}
.linkbtn:hover{text-decoration:underline;}
.chips{display:flex; flex-wrap:wrap; gap:5px;}
.chip{border:1px solid var(--border); background:var(--surface); border-radius:999px; padding:3px 10px; font-size:11px; font-weight:700; color:var(--ink-muted);}
.chip:hover{color:var(--ink);} .chip.active{background:var(--brand-wash); border-color:var(--brand-tint); color:var(--brand);}
.news-list{display:flex; flex-direction:column;}
.news-item{padding:9px 0; border-top:1px solid var(--line);}
.news-item:first-child{border-top:0;}
.news-item .nmeta{display:flex; gap:8px; font-size:10.5px; font-weight:700; color:var(--ink-muted); margin-bottom:2px;}
.news-item .nmeta .nsrc{color:var(--tech);}
.news-item a{font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.35; display:block;}
.news-item a:hover{color:var(--tech);}
.news-item p{margin:3px 0 0; font-size:11.5px; color:var(--ink-muted); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.rpane .wl-foot{border-top:0; padding:0;}

/* ============ responsive ============ */
@media (max-width: 1100px){
  .q-stats{grid-template-columns:repeat(2, minmax(0,1fr));}
  .q-stat:nth-child(4n){border-right:1px solid var(--line);}
  .q-stat:nth-child(2n){border-right:0;}
  .q-stat:nth-last-child(-n+4){border-bottom:1px solid var(--line);}
  .q-stat:nth-last-child(-n+2){border-bottom:0;}
  .q-grid{grid-template-columns:1fr;}
}
@media (max-width: 900px){
  .dash{display:block; overflow-y:auto;}
  .dcenter{overflow:visible; padding:12px 12px 20px;}
  .q-open-list{display:inline-flex; width:28px; height:28px; margin-right:2px;}
  .q-last{font-size:30px;}
  .q-chart-wrap{height:340px;}
  /* indicatori: cassetto a scomparsa */
  .dleft{position:fixed; top:var(--nav-h); bottom:0; left:0; width:min(330px, 90vw); z-index:55; transform:translateX(-105%);
    transition:transform .2s ease; box-shadow:var(--shadow);}
  .dleft.open-mobile{transform:none;}
  .dleft.collapsed{width:min(330px, 90vw);}
  .dleft.collapsed .dpanel-head,.dleft.collapsed .dpanel-body{display:flex;}
  .dleft .panel-rail,.dleft.collapsed .panel-rail{display:none;}
  .dscrim{position:fixed; inset:var(--nav-h) 0 0 0; background:rgba(54,42,31,.35); z-index:54;}
  .dscrim:not([hidden]){display:block;}
  /* meteo e notizie: sotto il grafico, richiudibile */
  .dright{width:auto; border-left:0; border-top:1px solid var(--border);}
  .dright .dpanel-body{overflow:visible;}
  .dright .rpane{overflow:visible;}
  .dright.collapsed{width:auto;}
  .dright.collapsed .dpanel-head{display:flex;}
  .dright.collapsed .panel-rail{display:none;}
  .dright.collapsed .collapse-btn svg{transform:rotate(90deg);}
  .dright .collapse-btn svg{transform:rotate(-90deg);}
  .bar-row{grid-template-columns:110px minmax(0,1fr) 70px;}
}