:root{
  --cri-red:#e30613;
  --cri-red-dark:#b10410;
  --cri-red-soft:#fdecec;
  --ink:#1c2024;
  --ink-soft:#5a6570;
  --line:#e4e8ec;
  --bg:#f4f6f8;
  --card:#ffffff;
  --ok:#1a8f3c;
  --ok-soft:#e7f6ec;
  --warn:#c98a00;
  --warn-soft:#fff6e0;
  --danger:#d32029;
  --danger-soft:#fdecec;
  --radius:14px;
  --shadow:0 1px 3px rgba(20,30,40,.08),0 6px 18px rgba(20,30,40,.05);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.45}
.boot{display:grid;place-items:center;height:100vh;color:var(--ink-soft)}
button{font-family:inherit}
a{color:var(--cri-red);text-decoration:none}

/* ---------- Layout ---------- */
.layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.sidebar{background:#fff;border-right:1px solid var(--line);padding:18px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 16px}
.brand .logo{width:38px;height:38px;background:var(--cri-red);border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:20px;flex:none}
.brand b{font-size:15px;display:block;line-height:1.1}
.brand span{font-size:11.5px;color:var(--ink-soft)}
.nav{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:var(--ink);font-weight:500;font-size:14.5px;cursor:pointer}
.nav a .ic{width:20px;text-align:center;opacity:.8}
.nav a:hover{background:var(--bg)}
.nav a.active{background:var(--cri-red-soft);color:var(--cri-red-dark);font-weight:600}
.sidebar .foot{margin-top:auto;font-size:12px;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:12px}
.sidebar .foot .who{font-weight:600;color:var(--ink)}
.sidebar .foot button{margin-top:8px;width:100%;border:1px solid var(--line);background:#fff;padding:7px;border-radius:9px;cursor:pointer;color:var(--ink-soft)}
.sidebar .foot button:hover{background:var(--bg)}

.main{padding:26px 30px 60px;max-width:1180px}

/* ---------- Header ---------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.page-head h1{font-size:24px;margin:0}
.page-head p{margin:4px 0 0;color:var(--ink-soft);font-size:14px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;color:var(--ink);padding:9px 15px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:.12s}
.btn:hover{background:var(--bg)}
.btn.primary{background:var(--cri-red);border-color:var(--cri-red);color:#fff}
.btn.primary:hover{background:var(--cri-red-dark)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--ink-soft)}
.btn.sm{padding:6px 11px;font-size:13px}
.btn.danger{color:var(--danger);border-color:var(--danger)}
.btn.danger:hover{background:var(--danger-soft)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Cards / grid ---------- */
.grid{display:grid;gap:16px}
.stats{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 16px;box-shadow:var(--shadow)}
.stat .k{font-size:12.5px;color:var(--ink-soft);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.stat .v{font-size:30px;font-weight:800;margin-top:6px;letter-spacing:-.02em}
.stat .s{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.stat.accent{border-left:4px solid var(--cri-red)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card .card-h{padding:15px 18px;border-bottom:1px solid var(--line);font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:10px}
.card .card-b{padding:18px}

/* ---------- Card collassabile (<details>/<summary>) ---------- */
.card.collapsible{padding:0;overflow:hidden}
.card.collapsible > summary.card-h{cursor:pointer;list-style:none;user-select:none;border-bottom:none}
.card.collapsible > summary.card-h::-webkit-details-marker{display:none}
.card.collapsible > summary.card-h .chev{margin-left:auto;color:var(--ink-soft);transition:transform .15s;font-size:13px}
.card.collapsible[open] > summary.card-h{border-bottom:1px solid var(--line)}
.card.collapsible[open] > summary.card-h .chev{transform:rotate(180deg)}
.card.collapsible > summary.card-h:hover{background:var(--bg)}

.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--bg);color:var(--ink-soft);border:1px solid var(--line)}
.chip.red{background:var(--cri-red-soft);color:var(--cri-red-dark);border-color:transparent}
.chip.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.chip.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.chip.danger{background:var(--danger-soft);color:var(--danger);border-color:transparent}

/* ---------- Toolbar ---------- */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;align-items:center}
/* Icona e input affiancati nel flusso normale (flex), non sovrapposti con
   position:absolute: su alcuni dispositivi/font l'emoji 🔍 viene sostituita
   da un glifo di riserva più largo del previsto, che finiva per invadere il
   testo. Affiancandoli, qualunque sia la sua larghezza reale spinge solo il
   campo di testo più a destra, senza poterci mai finire sopra. */
.search{flex:1;min-width:220px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 12px}
.search-icon{flex:none;opacity:.5;font-size:14px;line-height:1}
.search input{flex:1;min-width:0;width:auto;padding:10px 0;border:none;border-radius:0;background:transparent}
.search input:focus{box-shadow:none}
.search:focus-within{border-color:var(--cri-red);box-shadow:0 0 0 3px var(--cri-red-soft)}
select,input[type=text],input[type=date],input[type=number],textarea{font-family:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
select{cursor:pointer}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cri-red);box-shadow:0 0 0 3px var(--cri-red-soft)}

/* ---------- Table ---------- */
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);padding:10px 12px;border-bottom:1px solid var(--line)}
table.tbl td{padding:11px 12px;border-bottom:1px solid var(--line)}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tbody tr:hover td{background:#fafbfc;cursor:pointer}
.tbl-wrap{overflow-x:auto}
.fuel-country{white-space:nowrap}
input.fuel-price{width:110px;padding:6px 8px}
.money{font-variant-numeric:tabular-nums;font-weight:600}

/* ---------- Banner ---------- */
.banner{border-radius:var(--radius);padding:15px 18px;display:flex;gap:12px;align-items:flex-start;margin-bottom:18px}
.banner.danger{background:var(--danger-soft);border:1px solid #f3c0c3}
.banner.warn{background:var(--warn-soft);border:1px solid #f0dca0}
.banner.ok{background:var(--ok-soft);border:1px solid #b8e2c4}
.banner.info{background:#eaf2fb;border:1px solid #c2dbf3}
.banner .bi{font-size:20px;line-height:1}
.banner b{display:block}
.banner .small{font-size:13px;color:var(--ink-soft)}

/* ---------- Forms / modal ---------- */
.modal-back{position:fixed;inset:0;background:rgba(15,20,25,.45);display:grid;place-items:center;padding:20px;z-index:50}
.modal{background:#fff;border-radius:16px;width:100%;max-width:640px;max-height:90vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal .m-h{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:#fff;z-index:2}
.modal .m-h h3{margin:0;font-size:18px}
.modal .m-b{padding:22px}
.modal .m-f{padding:16px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;position:sticky;bottom:0;background:#fff}
.field{margin-bottom:15px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:5px;color:var(--ink)}
.field input,.field select,.field textarea{width:100%}
.field .hint{font-size:12px;color:var(--ink-soft);margin-top:4px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row.three{grid-template-columns:1fr 1fr 1fr}

/* ---------- Login ---------- */
.login-wrap{display:grid;place-items:center;min-height:100vh;padding:20px;background:linear-gradient(160deg,#fff, var(--cri-red-soft))}
.login{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);width:100%;max-width:380px;padding:32px 28px}
.login .brand{justify-content:center;flex-direction:column;text-align:center;gap:8px;padding-bottom:22px}
.login .brand .logo{width:52px;height:52px;font-size:26px}

/* ---------- Editor preventivo ---------- */
.editor{display:grid;grid-template-columns:1fr 380px;gap:22px;align-items:start}
.editor .col-main{display:flex;flex-direction:column;gap:18px}
.section-t{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);margin:0 0 12px}

/* Itinerario / tappe */
.tappe{display:flex;flex-direction:column;gap:8px}
.tappa{display:flex;gap:10px;align-items:flex-start;position:relative}
.tappa .marker{width:26px;height:26px;border-radius:50%;background:var(--cri-red-soft);color:var(--cri-red-dark);display:grid;place-items:center;font-weight:800;font-size:12px;flex:none;margin-top:7px}
.tappa.fissa .marker{background:var(--ink);color:#fff}
.tappa .body{flex:1;position:relative}
.tappa .body input{width:100%}
.tappa .rm{border:none;background:none;color:var(--ink-soft);cursor:pointer;font-size:18px;padding:6px 4px;margin-top:3px}
.tappa .rm:hover{color:var(--danger)}
.tappa .locked{width:100%;padding:10px 12px;border:1px dashed var(--line);border-radius:10px;background:var(--bg);color:var(--ink-soft);font-size:14px}
.ac{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);z-index:20;margin-top:4px;max-height:240px;overflow:auto}
.ac .item{padding:9px 12px;cursor:pointer;font-size:13.5px;border-bottom:1px solid var(--line)}
.ac .item:last-child{border-bottom:none}
.ac .item:hover,.ac .item.sel{background:var(--cri-red-soft)}
.ac .item .flag{margin-right:6px}
.ac .empty{padding:10px 12px;color:var(--ink-soft);font-size:13px}

/* Riepilogo (colonna destra) */
.summary{position:sticky;top:20px;display:flex;flex-direction:column;gap:14px}
.tot-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.tot-box .row{display:flex;justify-content:space-between;align-items:baseline;padding:14px 18px;border-bottom:1px solid var(--line)}
.tot-box .row:last-child{border-bottom:none}
.tot-box .row .k{color:var(--ink-soft);font-size:13px}
.tot-box .row .v{font-weight:800;font-size:22px;font-variant-numeric:tabular-nums}
.tot-box .row.addebito{background:var(--ink);padding:18px}
.tot-box .row.addebito .k{color:rgba(255,255,255,.75);font-size:13.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.tot-box .row.addebito .mini{color:rgba(255,255,255,.55)}
.tot-box .row.addebito .v{color:#fff;font-size:28px}
.tot-box .row.margine .v{font-size:18px}
.pos{color:var(--ok)} .neg{color:var(--danger)}
.breakdown{font-size:13px}
.breakdown .b-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line)}
.breakdown .b-row:last-child{border-bottom:none}
.breakdown .b-row .lbl{color:var(--ink-soft)}
.breakdown .b-row.strong{font-weight:700;color:var(--ink)}

.inline{display:flex;gap:8px;align-items:center}
.inline > *{margin:0}
.mini{font-size:12px;color:var(--ink-soft)}
.pill-toggle{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.pill-toggle button{border:none;background:#fff;padding:9px 14px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--ink-soft)}
.pill-toggle button.active{background:var(--cri-red);color:#fff}
.matrow{display:grid;grid-template-columns:1fr 120px 34px;gap:8px;margin-bottom:8px}
.mezzo-row{padding:14px 0;border-bottom:1px dashed var(--line);display:flex;flex-direction:column;gap:8px}
.mezzo-row:last-child{border-bottom:none;padding-bottom:0}
.mezzo-row .form-row{margin-bottom:0}
.mezzo-row .field{margin-bottom:0}
.mezzo-row .rm{align-self:flex-start}
.chk{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:6px 0}
.chk input{width:auto}

/* ---------- Interruttori sezioni facoltative (Pasti/Pernottamento/Medico) ---------- */
.switch-row{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink);user-select:none}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .slider{position:relative;width:38px;height:22px;flex:none;background:var(--line);border-radius:999px;transition:background .15s}
.switch .slider::before{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;background:#fff;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.switch input:checked + .slider{background:var(--ok)}
.switch input:checked + .slider::before{transform:translateX(16px)}
.switch input:focus-visible + .slider{outline:2px solid var(--cri-red-dark);outline-offset:2px}
.badge-auto{font-size:11px;background:var(--ok-soft);color:var(--ok);padding:2px 8px;border-radius:999px;font-weight:700}

/* ---------- misc ---------- */
.muted{color:var(--ink-soft)}
.empty-state{text-align:center;padding:50px 20px;color:var(--ink-soft)}
.empty-state .big{font-size:44px;opacity:.4}
.spinner{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--cri-red);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto}
.spinner.sm{width:18px;height:18px;border-width:2px;display:inline-block;margin:0;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:10px;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.3);z-index:100;animation:up .25s}
.toast.ok{background:var(--ok)} .toast.err{background:var(--danger)}
@keyframes up{from{opacity:0;transform:translate(-50%,10px)}}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .editor{grid-template-columns:1fr}
  .summary{position:static}
}
@media(max-width:820px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:fixed;bottom:0;top:auto;left:0;right:0;height:auto;flex-direction:row;border-right:none;border-top:1px solid var(--line);padding:6px;z-index:40;gap:0;justify-content:space-around}
  .sidebar .brand,.sidebar .foot{display:none}
  .nav{flex-direction:row;width:100%;justify-content:space-around;margin:0}
  .nav a{flex-direction:column;gap:2px;font-size:10.5px;padding:6px 4px;flex:1;text-align:center}
  .nav a .ic{font-size:19px}
  .nav a .txt{font-size:10.5px}
  .main{padding:18px 16px 90px}
  .form-row,.form-row.three{grid-template-columns:1fr}
  input.fuel-price{width:84px;padding:6px}
  table.tbl th,table.tbl td{padding:8px}
}