/* ROLL CRM NET — interfaccia in stile Lightning */
:root{
  --brand:#0176d3; --brand-dark:#014486; --brand-light:#d8e6fe; --brand-xlight:#eef4ff;
  --bg:#f3f3f3; --bg-head:#b0c4df; --card:#fff; --border:#dddbda; --border-strong:#c9c7c5;
  --text:#181818; --text-2:#444; --text-3:#706e6b; --link:#0b5cab;
  --ok:#2e844a; --ok-bg:#cdefc4; --warn:#a96404; --warn-bg:#fef1cd; --err:#ba0517; --err-bg:#fddde3;
  --ic-contact:#a094ed; --ic-account:#5867e8; --ic-tag:#3ba755; --ic-import:#fe9339; --ic-report:#2dc3b2; --ic-setup:#7f8ced; --ic-home:#1b96ff;
  --radius:.25rem; --shadow:0 2px 2px 0 rgba(0,0,0,.1); --shadow-pop:0 2px 8px rgba(0,0,0,.16);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);font-size:13px;color:var(--text);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto 0;height:220px;background:linear-gradient(180deg,var(--bg-head) 0%,var(--bg) 100%);z-index:-1}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
.nascosto{display:none!important}

/* ---------- header globale ---------- */
.gh{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 1px 0 var(--border)}
.gh-top{display:flex;align-items:center;gap:12px;height:50px;padding:0 12px}
.gh-logo{display:flex;align-items:center;gap:8px;min-width:0;cursor:pointer}
.gh-logo img{max-height:32px;max-width:120px;object-fit:contain}
.gh-logo .iniziali{width:32px;height:32px;border-radius:6px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}
.gh-search{flex:1;display:flex;justify-content:center}
.gh-search .campo{position:relative;width:100%;max-width:560px}
.gh-search input{width:100%;height:32px;border:1px solid var(--border-strong);border-radius:var(--radius);padding:0 10px 0 32px;background:#fff}
.gh-search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 3px var(--brand)}
.gh-search svg{position:absolute;left:9px;top:8px;width:16px;height:16px;fill:var(--text-3)}
.gh-azioni{display:flex;align-items:center;gap:6px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--brand-dark);color:#fff;display:grid;place-items:center;font-weight:600;font-size:12px;border:0;cursor:pointer}
.menu-utente{position:absolute;right:10px;top:46px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-pop);min-width:240px;padding:8px 0;z-index:60}
.menu-utente .testa{padding:6px 14px 10px;border-bottom:1px solid var(--border);margin-bottom:6px}
.menu-utente .testa b{display:block}
.menu-utente button{display:block;width:100%;text-align:left;background:none;border:0;padding:8px 14px;cursor:pointer}
.menu-utente button:hover{background:var(--bg)}
.gh-nav{display:flex;align-items:stretch;height:40px;padding:0 12px;border-top:1px solid var(--border);background:#fff;overflow-x:auto;scrollbar-width:none}
.gh-nav::-webkit-scrollbar{display:none}
.gh-app{display:flex;align-items:center;gap:10px;padding-right:18px;margin-right:6px;font-size:18px;font-weight:400;white-space:nowrap;color:var(--text)}
.gh-app .waffle{display:grid;grid-template-columns:repeat(3,4px);gap:2px}
.gh-app .waffle i{width:4px;height:4px;border-radius:50%;background:var(--text-3)}
.gh-nav a{display:flex;align-items:center;padding:0 12px;color:var(--text);white-space:nowrap;border-bottom:3px solid transparent;border-top:3px solid transparent}
.gh-nav a:hover{text-decoration:none;background:var(--bg)}
.gh-nav a.attiva{border-bottom-color:var(--brand);font-weight:600;background:var(--brand-xlight)}

/* ---------- pagina ---------- */
.pagina{padding:12px;max-width:1500px;margin:0 auto}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card + .card{margin-top:12px}
.card-testa{display:flex;align-items:center;gap:10px;padding:12px 16px}
.card-testa h2{font-size:14px;font-weight:700;margin:0;flex:1}
.card-corpo{padding:0 16px 16px}
.icona{width:32px;height:32px;border-radius:4px;display:grid;place-items:center;flex:none}
.icona svg{width:20px;height:20px;fill:#fff}
.icona.piccola{width:24px;height:24px}.icona.piccola svg{width:15px;height:15px}
.icona.grande{width:48px;height:48px}.icona.grande svg{width:30px;height:30px}
.ic-contatto{background:var(--ic-contact)}.ic-azienda{background:var(--ic-account)}.ic-tag{background:var(--ic-tag)}.ic-import{background:var(--ic-import)}.ic-report{background:var(--ic-report)}.ic-setup{background:var(--ic-setup)}.ic-home{background:var(--ic-home)}

/* testata pagina oggetto */
.ph{padding:14px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.ph-titolo{flex:1;min-width:200px}
.ph-titolo small{display:block;font-size:12px;color:var(--text-2);line-height:1.2}
.ph-titolo h1{margin:0;font-size:18px;font-weight:700;line-height:1.3;display:flex;align-items:center;gap:6px}
.ph-meta{flex-basis:100%;font-size:12px;color:var(--text-3);margin-top:-4px}
.ph-highlight{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px 32px;padding-top:12px;margin-top:4px;border-top:1px solid var(--border)}
.ph-highlight div small{display:block;color:var(--text-3);font-size:12px}
.ph-highlight div span{font-size:13px}

/* bottoni */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 16px;border:1px solid var(--border-strong);background:#fff;color:var(--link);border-radius:var(--radius);cursor:pointer;white-space:nowrap;font-weight:400}
.btn:hover{background:#f3f3f3;text-decoration:none}
.btn:focus-visible{outline:none;box-shadow:0 0 3px var(--brand)}
.btn.primario{background:var(--brand);border-color:var(--brand);color:#fff}.btn.primario:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn.pericolo{color:var(--err)}.btn.pericolo.pieno{background:var(--err);border-color:var(--err);color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.icona-sola{width:32px;padding:0}
.btn svg{width:14px;height:14px;fill:currentColor}
.gruppo-btn{display:inline-flex}.gruppo-btn .btn{border-radius:0;margin-left:-1px}.gruppo-btn .btn:first-child{border-radius:var(--radius) 0 0 var(--radius);margin-left:0}.gruppo-btn .btn:last-child{border-radius:0 var(--radius) var(--radius) 0}

/* list view */
.lv-testa{padding:12px 16px 8px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.lv-titolo{flex:1;min-width:220px}
.lv-titolo small{display:block;font-size:12px;color:var(--text-2)}
.lv-titolo h1{margin:0;font-size:18px;font-weight:700;display:flex;align-items:center;gap:4px}
.lv-info{padding:0 16px 8px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--text-3)}
.lv-info .spazio{flex:1}
.lv-cerca{position:relative}.lv-cerca input{height:32px;width:240px;border:1px solid var(--border-strong);border-radius:var(--radius);padding:0 10px 0 30px}
.lv-cerca svg{position:absolute;left:9px;top:9px;width:14px;height:14px;fill:var(--text-3)}
.lv-cerca input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 3px var(--brand)}
.lv-corpo{display:flex;border-top:1px solid var(--border)}
.lv-tabella{flex:1;overflow:auto;min-width:0}
table.dt{width:100%;border-collapse:collapse;font-size:13px}
table.dt th{background:#fafaf9;text-align:left;font-weight:700;color:var(--text-2);font-size:12px;padding:6px 8px;border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0;z-index:1}
table.dt th.ordinabile{cursor:pointer}table.dt th.ordinabile:hover{background:#f3f3f3}
table.dt th .freccia{display:inline-block;margin-left:4px;color:var(--text-3);font-size:10px}
table.dt td{padding:6px 8px;border-bottom:1px solid #ebebeb;vertical-align:middle;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.dt tbody tr:hover td{background:#f3f6fb}
table.dt td.num{color:var(--text-3);width:36px;text-align:right}
table.dt .vuoto{color:var(--text-3)}
.lv-filtri{width:300px;border-left:1px solid var(--border);padding:12px 16px;background:#fff;flex:none}
.lv-filtri h3{font-size:14px;margin:0 0 10px;display:flex;justify-content:space-between;align-items:center}
.lv-piede{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 16px;border-top:1px solid var(--border);font-size:12px;color:var(--text-3)}

/* badge / pillole */
.pill{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:10px;background:#ecebea;color:var(--text);font-size:11px;font-weight:600;white-space:nowrap;margin:1px 2px 1px 0;border:1px solid transparent}
.pill.azienda{background:var(--brand-light);color:var(--brand-dark)}
.pill.lotto{background:#ffe6cf;color:#7a3d00}
.pill.fiera{background:#e3dafe;color:#401f8f}
.pill.origine{background:#d1f4e6;color:#0c5133}
.pill button{border:0;background:none;padding:0;margin-left:2px;cursor:pointer;color:inherit;font-size:13px;line-height:1}
.stato{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600}
.stato::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
.stato.corretta::before{background:#1b96ff}.stato.sospetta::before{background:var(--warn)}.stato.no::before{background:var(--err)}
.blacklist{display:inline-flex;align-items:center;gap:4px;padding:0 6px;height:20px;border-radius:3px;background:var(--err-bg);color:var(--err);font-size:11px;font-weight:700;letter-spacing:.02em}

/* record page */
.rp{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px;margin-top:12px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);padding:0 16px}
.tabs button{background:none;border:0;padding:10px 12px;cursor:pointer;border-bottom:3px solid transparent;color:var(--text-2);font-weight:400}
.tabs button.attiva{border-bottom-color:var(--brand);color:var(--text);font-weight:700}
.sezione{margin:14px 16px 0}
.sezione h3{margin:0 0 8px;font-size:14px;font-weight:400;background:#f3f3f3;padding:6px 10px;border-radius:var(--radius)}
.campi{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;padding:0 10px 10px}
.campo-v{border-bottom:1px solid var(--border);padding:6px 0 4px;min-height:48px;position:relative}
.campo-v small{display:block;color:var(--text-3);font-size:12px}
.campo-v span{display:block;word-break:break-word}
.campo-v .matita{position:absolute;right:0;top:18px;opacity:0;border:0;background:none;cursor:pointer;color:var(--text-3)}
.campo-v:hover .matita{opacity:1}
.lista-rel{list-style:none;margin:0;padding:0}
.lista-rel li{padding:8px 16px;border-top:1px solid #ebebeb}
.lista-rel li small{display:block;color:var(--text-3)}
.timeline{list-style:none;margin:0;padding:0 16px 12px}
.timeline li{position:relative;padding:6px 0 6px 20px;border-left:2px solid var(--border);margin-left:6px}
.timeline li::before{content:"";position:absolute;left:-6px;top:10px;width:10px;height:10px;border-radius:50%;background:var(--ic-setup)}
.timeline small{color:var(--text-3);display:block}

/* form */
.form-griglia{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
.form-griglia .pieno{grid-column:1/-1}
.fc label{display:block;font-size:12px;color:var(--text-2);margin-bottom:2px}
.fc label .obb{color:var(--err);margin-right:2px}
.fc input,.fc select,.fc textarea{width:100%;height:32px;border:1px solid var(--border-strong);border-radius:var(--radius);padding:0 10px;background:#fff}
.fc textarea{height:80px;padding:6px 10px;resize:vertical}
.fc input:focus,.fc select:focus,.fc textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 3px var(--brand)}
.fc .aiuto{font-size:12px;color:var(--text-3);margin-top:2px}
.fc.errore input,.fc.errore select{border-color:var(--err);box-shadow:inset 0 0 0 1px var(--err)}
.fc.errore .aiuto{color:var(--err)}
.fc .check{display:flex;align-items:center;gap:8px;height:32px}
.fc .check input{width:16px;height:16px}
.sottotitolo-form{grid-column:1/-1;font-size:14px;background:#f3f3f3;padding:5px 10px;border-radius:var(--radius);margin-top:4px}
.ac{position:relative}
.ac-lista{position:absolute;left:0;right:0;top:34px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-pop);border-radius:var(--radius);z-index:20;max-height:240px;overflow:auto}
.ac-lista div{padding:7px 10px;cursor:pointer}.ac-lista div:hover,.ac-lista div.sel{background:var(--brand-xlight)}
.ac-lista small{color:var(--text-3);margin-left:6px}

/* modale */
.velo{position:fixed;inset:0;background:rgba(8,7,7,.6);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:48px 16px;overflow:auto}
.modale{background:#fff;border-radius:var(--radius);width:100%;max-width:820px;box-shadow:0 2px 3px rgba(0,0,0,.16)}
.modale.stretta{max-width:480px}
.modale header{padding:16px;border-bottom:2px solid var(--border);text-align:center;position:relative}
.modale header h2{margin:0;font-size:20px;font-weight:400}
.modale header .chiudi{position:absolute;right:-12px;top:-40px;width:32px;height:32px;border-radius:50%;border:0;background:transparent;color:#fff;font-size:26px;cursor:pointer}
.modale .corpo{padding:16px 24px;max-height:65vh;overflow:auto}
.modale footer{padding:12px 16px;border-top:1px solid var(--border);background:#f3f3f3;display:flex;justify-content:flex-end;gap:8px;border-radius:0 0 var(--radius) var(--radius)}

/* toast */
.toasts{position:fixed;top:96px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;width:min(620px,92vw)}
.toast{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:var(--radius);color:#fff;background:#706e6b;box-shadow:var(--shadow-pop);font-size:14px}
.toast.ok{background:var(--ok)}.toast.err{background:var(--err)}.toast.warn{background:#fe9339;color:#181818}
.toast .x{margin-left:auto;background:none;border:0;color:inherit;font-size:18px;cursor:pointer;line-height:1}

/* home */
.kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi .card{padding:14px 16px;margin-top:0!important}
.griglia2 .card{margin-top:0!important}
.kpi small{color:var(--text-3);font-size:12px;display:block}
.kpi b{font-size:28px;font-weight:300;line-height:1.2;display:block}
.griglia2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.barre{padding:0 16px 14px}
.barra{display:grid;grid-template-columns:140px 1fr 56px;gap:10px;align-items:center;padding:3px 0;font-size:12px}
.barra .bg{height:14px;background:#f3f3f3;border-radius:2px;overflow:hidden}
.barra .bg i{display:block;height:100%;background:var(--brand);border-radius:2px}
.barra span:last-child{text-align:right;color:var(--text-2);font-variant-numeric:tabular-nums}
.barra span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* import */
.percorso{display:flex;margin:0 16px 16px;counter-reset:p}
.percorso div{flex:1;text-align:center;font-size:12px;color:var(--text-3);position:relative;padding-top:28px}
.percorso div::before{counter-increment:p;content:counter(p);position:absolute;top:0;left:50%;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--border-strong);display:grid;place-items:center;font-weight:700;color:var(--text-3);font-size:11px}
.percorso div::after{content:"";position:absolute;top:11px;left:calc(50% + 14px);right:calc(-50% + 14px);height:2px;background:var(--border)}
.percorso div:last-child::after{display:none}
.percorso div.fatto::before{background:var(--brand);border-color:var(--brand);color:#fff;content:"✓"}
.percorso div.ora{color:var(--text);font-weight:700}.percorso div.ora::before{border-color:var(--brand);color:var(--brand)}
.zona-file{border:2px dashed var(--border-strong);border-radius:var(--radius);padding:30px;text-align:center;color:var(--text-2);background:#fafaf9;cursor:pointer}
.zona-file svg{width:36px;height:36px;fill:var(--brand)}
.zona-file.sopra{border-color:var(--brand);background:var(--brand-xlight)}
.mappa-col{display:grid;grid-template-columns:1fr 1fr 2fr;gap:6px 14px;align-items:center}
.mappa-col .es{color:var(--text-3);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.riquadro{border-radius:var(--radius);padding:10px 14px;margin:0 0 12px}
.riquadro.info{background:var(--brand-xlight);border:1px solid var(--brand-light)}
.riquadro.warn{background:var(--warn-bg);border:1px solid #f9e3b6}
.riquadro.err{background:var(--err-bg);border:1px solid #f9b9c4}
.riquadro.ok{background:#ebf7e6;border:1px solid var(--ok-bg)}
.avanzamento{height:8px;background:#ecebea;border-radius:4px;overflow:hidden;margin:8px 0}
.avanzamento i{display:block;height:100%;background:var(--brand);transition:width .2s}
.contatori{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:12px}
.contatori div{border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px}
.contatori b{display:block;font-size:20px;font-weight:300}
.contatori small{color:var(--text-3)}

/* login */
.login-sfondo{min-height:100vh;display:grid;place-items:center;padding:16px;background:linear-gradient(160deg,#032d60 0%,#0176d3 60%,#1b96ff 100%)}
.login-box{background:#fff;border-radius:6px;width:100%;max-width:400px;padding:28px 28px 22px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.login-box h1{font-size:22px;font-weight:400;margin:0 0 4px;text-align:center}
.login-box p.sub{margin:0 0 20px;text-align:center;color:var(--text-3)}
.login-box .fc{margin-bottom:14px}
.login-box .btn{width:100%;height:40px;font-size:14px}
.login-marchio{display:flex;justify-content:center;margin-bottom:12px}
.login-marchio .iniziali{width:48px;height:48px;border-radius:10px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:18px}
.login-piede{text-align:center;color:#fff;opacity:.8;font-size:12px;margin-top:14px}

.vuoto-stato{text-align:center;padding:40px 16px;color:var(--text-3)}
.vuoto-stato b{display:block;color:var(--text);font-size:16px;font-weight:400;margin-bottom:4px}
.caricamento{display:flex;justify-content:center;padding:40px}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--brand-light);border-top-color:var(--brand);animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
.tag-sel{display:flex;flex-wrap:wrap;gap:4px;border:1px solid var(--border-strong);border-radius:var(--radius);padding:4px;min-height:32px;background:#fff}
.tag-sel input{border:0!important;box-shadow:none!important;flex:1;min-width:120px;height:22px!important;padding:0 4px!important}

/* stampa report */
.solo-stampa{display:none}
@media print{
  body::before,.gh,.no-stampa{display:none!important}
  body{background:#fff}.pagina{padding:0}.card{box-shadow:none;border:0}
  .solo-stampa{display:block}
}

/* mobile */
@media (max-width:900px){
  .lv-filtri{position:fixed;right:0;top:0;bottom:0;z-index:90;box-shadow:var(--shadow-pop);overflow:auto;width:min(320px,90vw)}
  .rp{grid-template-columns:1fr}
  .griglia2{grid-template-columns:1fr}
  .kpi{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .gh-top{gap:8px;padding:0 10px}
  .gh-logo .nome-org{display:none}
  .gh-app span{display:none}
  .pagina{padding:8px}
  .campi,.form-griglia{grid-template-columns:1fr}
  .lv-cerca input{width:100%}.lv-cerca{flex:1}
  table.dt.mobile-card thead{display:none}
  table.dt.mobile-card,table.dt.mobile-card tbody,table.dt.mobile-card tr,table.dt.mobile-card td{display:block;width:100%;max-width:none}
  table.dt.mobile-card tr{border-bottom:1px solid var(--border);padding:8px 12px}
  table.dt.mobile-card td{border:0;padding:1px 0;white-space:normal}
  table.dt.mobile-card td.num{display:none}
  table.dt.mobile-card td[data-l]::before{content:attr(data-l) ": ";color:var(--text-3);font-size:12px}
  table.dt.mobile-card td.primo{font-size:15px}
  table.dt.mobile-card td[data-l]:empty{display:none}
  .modale .corpo{padding:12px}
  .velo{padding:40px 8px}
  .ph-highlight{gap:8px 20px}
  .mappa-col{grid-template-columns:1fr}
  .mappa-col .es{margin-bottom:8px}
  .barra{grid-template-columns:100px 1fr 44px}
}