/* Seven Tricho Lab · componenti grafici. Solo valori da stl-tokens.css. */

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{background:var(--bg-app)}
body{margin:0;background:var(--bg-app);color:var(--text);font-family:var(--font-body);font-size:var(--fs-base);line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;text-wrap:balance}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--stl-green-text)}
:focus-visible{outline:2px solid var(--stl-green-dark);outline-offset:2px}
details>summary{cursor:pointer}
.stl-num{font-variant-numeric:tabular-nums}
.stl-muted{color:var(--text-muted)}
.stl-err{color:var(--stl-error)}
.stl-empty{color:var(--text-muted);font-size:var(--fs-small);padding:var(--space-1) 0;margin:0}

/* ---------- Header ---------- */
.stl-header{position:sticky;top:0;z-index:10;height:var(--header-h);background:var(--bg-card);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:0 var(--space-6)}
.stl-brand{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.stl-brand-mark{width:38px;height:42px;flex:none;color:var(--stl-black)}
.stl-brand-name{display:block;font-family:var(--font-display);font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--stl-black);line-height:1.2;white-space:nowrap}
.stl-brand-app{display:block;font-size:var(--fs-small);color:var(--text-muted);margin-top:2px;white-space:nowrap}
.stl-header-info{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.stl-header-date{font-size:var(--fs-small);font-weight:600;color:var(--text)}
.stl-header-date::first-letter{text-transform:uppercase}
.stl-updated{font-size:var(--fs-xs);color:var(--text-muted)}

/* ---------- Layout ---------- */
.stl-app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:calc(100vh - var(--header-h))}
.stl-main{padding:var(--space-6) clamp(16px,3vw,40px) 60px;min-width:0}

/* ---------- Sidebar ---------- */
.stl-sidebar{background:var(--bg-card);border-right:1px solid var(--border);padding:var(--space-5) var(--space-3);display:flex;flex-direction:column;gap:var(--space-5);position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));overflow-y:auto}
.stl-nav{display:flex;flex-direction:column;gap:2px}
.stl-navgroup{display:flex;flex-direction:column}
.stl-nav button{background:none;border:0;color:var(--text);text-align:left;min-height:40px;padding:8px 10px;border-radius:var(--radius-button);display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);font-size:var(--fs-base);width:100%}
.stl-nav button:hover{background:var(--bg-app)}
.stl-nav button[aria-current="true"]{background:var(--stl-green-tint);color:var(--stl-green-text);font-weight:600}
.stl-nav .stl-navhead{font-weight:600}
.stl-navico{display:inline-flex;align-items:center;gap:10px}
.stl-navico svg{flex:none;color:var(--text-muted)}
.stl-nav button[aria-current="true"] .stl-navico svg{color:var(--stl-green-text)}
.stl-navgroup.stl-has-cur>.stl-navhead{color:var(--stl-green-text)}
.stl-navgroup.stl-has-cur>.stl-navhead .stl-navico svg{color:var(--stl-green-text)}
.stl-chev{flex:none;color:var(--text-muted)}
.stl-navhead[aria-expanded="true"] .stl-chev{transform:rotate(90deg)}
.stl-navsub{display:flex;flex-direction:column;gap:1px;margin:2px 0 6px 18px;padding-left:9px;border-left:1px solid var(--border)}
.stl-navsub[hidden]{display:none}
.stl-navsub button{font-size:var(--fs-small);min-height:36px;padding:6px 10px}
.stl-tag{white-space:nowrap;flex:none;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);background:var(--bg-app);border-radius:var(--radius-pill);padding:1px 7px}
.stl-sources{margin-top:auto;border-top:1px solid var(--border);padding:var(--space-4) var(--space-2) 0;display:flex;flex-direction:column;gap:7px;font-size:var(--fs-xs)}
.stl-source{display:flex;align-items:center;gap:var(--space-2);color:var(--text-muted)}
.stl-dot{width:8px;height:8px;border-radius:50%;flex:none}
.stl-dot.ok{background:var(--stl-green)}
.stl-dot.wait{background:var(--stl-warning)}
.stl-dot.off{background:var(--border-input)}
.stl-closebtn{background:var(--bg-card);border:1px solid var(--border-input);color:var(--text);border-radius:var(--radius-button);min-height:var(--h-button);padding:0 var(--space-3);font-size:var(--fs-small);display:flex;align-items:center;gap:var(--space-2)}
.stl-closebtn:hover{background:var(--bg-app)}
.stl-mobile-nav{display:none}

/* ---------- Riga titolo ---------- */
.stl-titlebar{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:space-between;align-items:flex-end;margin-bottom:var(--space-6)}
.stl-breadcrumb{display:block;font-size:var(--fs-label);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--stl-green-text);margin-bottom:6px}
.stl-breadcrumb:empty{display:none}
.stl-title{font-family:var(--font-display);font-weight:400;font-size:var(--fs-title);letter-spacing:var(--ls-title);text-transform:uppercase;line-height:1.25;color:var(--stl-black)}
.stl-subtitle{margin:6px 0 0;color:var(--text-muted)}
.stl-titlebar-actions{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}

/* ---------- Campi ---------- */
.stl-select,.stl-field input:not([type="checkbox"]),.stl-field select{height:var(--h-input);padding:0 var(--space-3);border-radius:var(--radius-input);border:1px solid var(--border-input);background:var(--bg-input);color:var(--text);font-size:var(--fs-base)}
.stl-select{min-width:180px}
.stl-select:focus,.stl-field input:focus,.stl-field select:focus,.stl-costi td input:focus,.stl-costi td select:focus,.stl-select-sm:focus{border-color:var(--stl-green-dark);box-shadow:var(--focus-ring);outline:none}
input[type="checkbox"]{accent-color:var(--stl-green-dark);width:16px;height:16px;margin:0}
.stl-form{display:flex;flex-direction:column;gap:var(--space-6)}
.stl-fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--space-5)}
.stl-field{display:flex;flex-direction:column;gap:6px}
.stl-field>span:first-child{font-size:var(--fs-label);font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--text-muted);display:flex;align-items:center;gap:var(--space-2)}
.stl-field input:disabled{opacity:.55}
.stl-field small{color:var(--text-muted);font-size:var(--fs-xs)}
.stl-days{display:flex;gap:var(--space-2);flex-wrap:wrap}
.stl-days label{display:inline-flex;gap:6px;align-items:center;font-size:var(--fs-small);border:1px solid var(--border-input);border-radius:var(--radius-pill);padding:6px 12px;background:var(--bg-input);cursor:pointer}
.stl-costi td input,.stl-costi td select{width:100%;height:36px;padding:0 var(--space-2);border-radius:var(--radius-input);border:1px solid var(--border-input);background:var(--bg-input);color:var(--text)}
.stl-costi table{min-width:980px}
.stl-select-sm{height:34px;padding:0 var(--space-2);border-radius:var(--radius-input);border:1px solid var(--border-input);background:var(--bg-input);color:var(--text);font-size:var(--fs-small)}

/* ---------- Pulsanti ---------- */
.stl-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--h-button);padding:0 var(--space-5);border-radius:var(--radius-button);border:1px solid var(--stl-green-dark);background:var(--stl-green-dark);color:var(--text-on-dark);font-weight:600;text-decoration:none;white-space:nowrap}
.stl-btn:hover{background:var(--stl-green-text);border-color:var(--stl-green-text)}
.stl-btn:disabled{opacity:.55;cursor:default}
.stl-btn.ghost{background:var(--bg-card);color:var(--text);border-color:var(--border-input)}
.stl-btn.ghost:hover{background:var(--bg-app)}
.stl-btn.small{min-height:var(--h-button-small);padding:0 var(--space-3);font-size:var(--fs-small)}
.stl-btn.export{background:var(--stl-black);border-color:var(--stl-black);color:var(--text-on-dark)}
.stl-btn.danger{background:var(--bg-card);color:var(--stl-error);border-color:var(--border-input)}
.stl-btn.danger:hover{border-color:var(--stl-error);background:var(--stl-error-tint)}
.stl-btn--icon{min-height:36px;width:36px;padding:0}
.stl-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}

/* ---------- Card ---------- */
.stl-view{display:flex;flex-direction:column;gap:var(--space-6)}
.stl-card,.stl-placeholder{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-6);min-width:0;display:flex;flex-direction:column;gap:var(--space-4)}
.stl-card h2,.stl-sourcecard h3{font-family:var(--font-display);font-weight:400;font-size:var(--fs-card-title);letter-spacing:var(--ls-card-title);text-transform:uppercase;color:var(--stl-black);line-height:1.4}
.stl-hint{color:var(--text-muted);font-size:var(--fs-small);margin:-8px 0 0}
.stl-grid2{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--space-6)}
.stl-note{font-size:var(--fs-small);color:var(--text-muted);border-left:3px solid var(--stl-rose);padding:2px 0 2px var(--space-3);margin:0}

/* Tre livelli della dashboard */
.stl-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.stl-level{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-5) var(--space-6);display:flex;flex-direction:column;gap:var(--space-2)}
.stl-eyebrow{font-size:var(--fs-label);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--stl-green-text)}
.stl-level p{margin:0}
.stl-level strong{font-weight:700}
.stl-level.act{background:var(--stl-green-tint);border-color:var(--stl-green-tint)}

/* ---------- KPI ---------- */
.stl-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--space-4)}
.stl-kpi{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-5);display:flex;flex-direction:column;gap:6px}
.stl-kpi-label{font-size:var(--fs-label);font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--text-muted)}
.stl-kpi-value{font-size:var(--fs-kpi);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--text)}
.stl-kpi-sub{font-size:var(--fs-xs);color:var(--text-muted)}
.stl-progress{height:6px;background:var(--bg-app);border-radius:var(--radius-pill);overflow:hidden;margin-top:4px}
.stl-progress i{display:block;height:100%;background:var(--data-1);border-radius:var(--radius-pill)}

/* ---------- Badge ---------- */
.stl-pill{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.03em;border-radius:var(--radius-pill);padding:2px 10px;width:max-content;max-width:100%;line-height:1.5;vertical-align:middle}
.stl-pill.ok{background:var(--stl-green-tint);color:var(--stl-green-text)}
.stl-pill.warn{background:var(--stl-rose-tint);color:var(--stl-rose-text)}
.stl-pill.bad{background:var(--stl-error-tint);color:var(--stl-error);border:1px solid var(--stl-error)}
.stl-pill.neu{background:var(--bg-app);color:var(--text-muted)}
.stl-pill.g{background:var(--stl-green-tint);color:var(--stl-green-text)}
.stl-pill.m{background:var(--stl-rose-tint);color:var(--stl-rose-text)}

/* ---------- Avvisi e messaggi di stato ---------- */
.stl-alerts{display:flex;flex-direction:column;gap:var(--space-2)}
.stl-alert{display:grid;grid-template-columns:4px minmax(0,1fr);gap:var(--space-3);background:var(--bg-app);border-radius:var(--radius-button);padding:10px var(--space-3) 10px 0;font-size:var(--fs-small)}
.stl-alert::before{content:"";border-radius:0 3px 3px 0;background:var(--data-4)}
.stl-alert.bad::before{background:var(--stl-error)}
.stl-alert.warn::before{background:var(--stl-rose)}
.stl-alert.ok::before{background:var(--stl-green)}
.stl-alert small{display:block;color:var(--text-muted);font-size:var(--fs-xs);margin-top:2px}
.stl-banner{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:space-between;background:var(--stl-rose-tint);border:1px solid var(--stl-rose);border-radius:var(--radius-card);padding:var(--space-3) var(--space-4);color:var(--text)}
.stl-banner p{margin:0}
.stl-toast{position:fixed;bottom:var(--space-6);right:var(--space-6);z-index:30;display:flex;align-items:center;gap:var(--space-2);max-width:min(420px,calc(100vw - 32px));background:var(--bg-card);color:var(--text);border:1px solid var(--border);border-left:4px solid var(--stl-green-dark);padding:var(--space-3) var(--space-4);border-radius:var(--radius-button);font-size:var(--fs-small);box-shadow:var(--shadow-float)}
.stl-spin{display:inline-block;width:10px;height:10px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:stl-sp 1s linear infinite;vertical-align:-1px}
@keyframes stl-sp{to{transform:rotate(360deg)}}

/* ---------- Elenchi con valori a destra ---------- */
.stl-rows{display:flex;flex-direction:column}
.stl-row{display:flex;justify-content:space-between;gap:var(--space-3);padding:9px 0;border-bottom:1px solid var(--border)}
.stl-row:last-child{border-bottom:0}
.stl-row>span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.stl-row span:first-child{color:var(--text-muted)}
.stl-row.total{font-weight:700;border-top:2px solid var(--stl-green);border-bottom:0;margin-top:4px}
.stl-row.total span:first-child{color:var(--text)}

/* ---------- Tabelle stile referto ---------- */
.stl-tablewrap{overflow-x:auto;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card)}
.stl-tablewrap table{border-collapse:collapse;width:100%;font-size:var(--fs-small);min-width:640px}
.stl-tablewrap th{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--stl-green-text);font-weight:700;text-align:left;padding:12px 14px;background:var(--bg-card);border-bottom:2px solid var(--stl-green);white-space:nowrap}
.stl-tablewrap td{padding:11px 14px;border-top:1px solid var(--border);background:var(--bg-card)}
.stl-tablewrap tbody tr:first-child td{border-top:0}
.stl-tablewrap tbody tr:nth-child(even) td{background:var(--bg-row-alt)}
.stl-tablewrap td.stl-right,.stl-tablewrap th.stl-right,.stl-runs td.stl-right{text-align:right;font-variant-numeric:tabular-nums}
.stl-card>.stl-tablewrap{border-radius:var(--radius-input)}
.stl-mbar{display:flex;align-items:center;gap:var(--space-2);justify-content:flex-end}
.stl-mbar i{display:block;height:8px;border-radius:2px;background:var(--data-1)}
.stl-chk td{vertical-align:top}
.stl-det{font-size:var(--fs-xs);color:var(--text-muted);margin-top:3px}
.stl-auto{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-left:6px;cursor:help}
.stl-runs{border-collapse:collapse;font-size:var(--fs-xs);min-width:0;width:100%;margin-top:var(--space-2)}
.stl-runs td{padding:6px 8px;border-top:1px solid var(--border)}

/* ---------- Filtri a pillola e selettore classe ---------- */
.stl-tabs{display:flex;gap:var(--space-2);flex-wrap:wrap}
.stl-tabs button{min-height:36px;border:1px solid var(--border-input);background:var(--bg-card);color:var(--text);border-radius:var(--radius-pill);padding:0 var(--space-4);font-size:var(--fs-small)}
.stl-tabs button:hover{background:var(--bg-app)}
.stl-tabs button[aria-pressed="true"]{background:var(--stl-green-tint);color:var(--stl-green-text);border-color:var(--stl-green);font-weight:600}
.stl-seg{display:inline-flex;border:1px solid var(--border-input);border-radius:var(--radius-input);overflow:hidden;background:var(--bg-card)}
.stl-seg button{border:0;background:none;padding:5px 10px;font-size:var(--fs-xs);color:var(--text-muted);border-right:1px solid var(--border-input)}
.stl-seg button:last-child{border-right:0}
.stl-seg button[aria-pressed="true"][data-c="fisso"]{background:var(--data-1);color:var(--text-on-dark)}
.stl-seg button[aria-pressed="true"][data-c="variabile"]{background:var(--data-2);color:var(--text)}
.stl-seg button[aria-pressed="true"][data-c="extra"]{background:var(--data-3);color:var(--text-on-dark)}

/* ---------- Grafici ---------- */
.stl-chart svg{width:100%;height:auto;display:block}
.stl-chart text{fill:var(--text-muted);font-size:11px;font-family:var(--font-body);font-variant-numeric:tabular-nums}
.stl-legend{display:flex;gap:var(--space-4);flex-wrap:wrap;font-size:var(--fs-xs);color:var(--text-muted)}
.stl-legend span{display:inline-flex;align-items:center;gap:6px}
.stl-legend i{width:16px;height:4px;border-radius:2px;display:inline-block}
.stl-legend i.dash,.stl-legend i.dot{height:0;border-radius:0;background:none;border-top:3px dashed currentColor}
.stl-legend i.dot{border-top-style:dotted}
.stl-legend i.hatch{width:14px;height:12px;border-radius:2px;background:none;border:2px dashed currentColor}

/* ---------- Fonti dati ---------- */
.stl-sourcecards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-4)}
.stl-sourcecard{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.stl-sourcecard header{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}
.stl-sourcecard ul{margin:0;padding-left:18px;color:var(--text-muted);font-size:var(--fs-small);display:flex;flex-direction:column;gap:3px}
.stl-meta{display:grid;grid-template-columns:auto 1fr;gap:5px var(--space-4);font-size:var(--fs-small);margin:0;background:var(--bg-app);border-radius:var(--radius-button);padding:var(--space-3) var(--space-4)}
.stl-meta dt{color:var(--text-muted)}
.stl-meta dd{margin:0;font-variant-numeric:tabular-nums}
.stl-sourcecard details summary{font-size:var(--fs-small)}
.stl-els{margin:var(--space-2) 0 0;padding-left:18px;font-size:var(--fs-small);color:var(--text-muted)}
.stl-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.stl-steps label{display:flex;gap:var(--space-2);align-items:flex-start;cursor:pointer}
.stl-steps input{margin-top:3px}
.stl-steps small{color:var(--text-muted);display:block}
.stl-stack{display:flex;flex-direction:column;gap:10px}

/* ---------- Moduli in arrivo ---------- */
.stl-placeholder dl{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr);gap:var(--space-2) var(--space-5);margin:0}
.stl-placeholder dt{font-size:var(--fs-label);font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--text-muted);padding-top:2px}
.stl-placeholder dd{margin:0}

/* ---------- Generatore contenuti ---------- */
.stl-genbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.stl-genbar p{margin:0;color:var(--text-muted);font-size:var(--fs-small)}
.stl-genframe{width:100%;height:calc(100vh - 260px);min-height:560px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-card);display:block}

/* ---------- Programma chiuso ---------- */
.stl-closed{position:fixed;inset:0;background:var(--bg-app);display:flex;align-items:center;justify-content:center;padding:var(--space-4);z-index:40}
.stl-closed div{max-width:440px;text-align:center;display:flex;flex-direction:column;gap:var(--space-3);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-8)}
.stl-closed h1{font-family:var(--font-display);font-weight:400;font-size:18px;letter-spacing:var(--ls-card-title);text-transform:uppercase}
.stl-closed p{margin:0;color:var(--text-muted)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .stl-levels,.stl-grid2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .stl-app{grid-template-columns:minmax(0,1fr)}
  .stl-sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--border);padding:var(--space-3) var(--space-4)}
  .stl-nav{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px var(--space-3)}
  .stl-sources{margin-top:0}
  .stl-closebtn{align-self:flex-start}
  .stl-header{padding:0 var(--space-4)}
  .stl-placeholder dl{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .stl-header-info{display:none}
  .stl-brand-app{white-space:normal}
  .stl-card,.stl-placeholder,.stl-sourcecard{padding:var(--space-4)}
  .stl-kpi-value{font-size:26px}
}
@media (prefers-reduced-motion:no-preference){
  .stl-progress i,.stl-mbar i{transition:width .5s ease}
  .stl-chev{transition:transform .15s ease}
}
@media print{
  .stl-sidebar,.stl-titlebar-actions,.stl-closebtn{display:none}
  .stl-app{grid-template-columns:minmax(0,1fr)}
  .stl-header{position:static}
}

/* an element marked hidden stays hidden even when a class gives it display:flex */
[hidden] { display: none !important; }