:root{
  --blu-900:#0b2545;
  --blu-700:#13315c;
  --blu-500:#1d4e89;
  --blu-300:#3a6ea5;
  --grigio-100:#f4f6f9;
  --grigio-200:#e6e9ee;
  --grigio-400:#c2c8d2;
  --grigio-600:#8a93a3;
  --grigio-800:#3d4452;
  --rosso:#c0392b;
  --rosso-bg:#fdecea;
  --giallo:#b8860b;
  --giallo-bg:#fdf3da;
  --verde:#2e7d32;
  --verde-bg:#eaf6ea;
  --bianco:#ffffff;
  --radius:10px;
  --shadow:0 1px 3px rgba(11,37,69,0.08), 0 1px 2px rgba(11,37,69,0.06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:var(--font);
  background:var(--grigio-100);
  color:var(--grigio-800);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}

/* ---------- LOGIN ---------- */
#login-screen{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--blu-900),var(--blu-500));
  z-index:1000;
}
.login-box{
  background:var(--bianco);
  border-radius:var(--radius);
  padding:36px 32px;
  width:100%;
  max-width:360px;
  box-shadow:0 20px 60px rgba(0,0,0,0.25);
}
.login-box h1{
  font-size:18px;margin:0 0 4px;color:var(--blu-900);
}
.login-box p.sub{
  margin:0 0 24px;color:var(--grigio-600);font-size:13px;
}
.field{margin-bottom:14px;}
.field label{
  display:block;font-size:12px;font-weight:600;
  color:var(--grigio-800);margin-bottom:5px;
}
.field input{
  width:100%;padding:10px 12px;
  border:1px solid var(--grigio-400);
  border-radius:8px;font-size:14px;
}
.field input:focus{outline:none;border-color:var(--blu-500);}
.btn{
  width:100%;padding:11px;border:none;border-radius:8px;
  background:var(--blu-500);color:#fff;font-size:14px;font-weight:600;
  margin-top:6px;transition:background .15s;
}
.btn:hover{background:var(--blu-700);}
.btn:disabled{opacity:.6;cursor:default;}
.btn-secondary{
  background:transparent;color:var(--blu-500);border:1px solid var(--grigio-400);
}
.btn-secondary:hover{background:var(--grigio-100);}
.login-error{
  background:var(--rosso-bg);color:var(--rosso);
  padding:9px 12px;border-radius:8px;font-size:13px;margin-bottom:14px;
}
.login-msg-ok{
  background:var(--verde-bg);color:var(--verde);
  padding:9px 12px;border-radius:8px;font-size:13px;margin-bottom:14px;
}
.login-switch{
  text-align:center;margin-top:16px;font-size:13px;color:var(--grigio-600);
}
.login-switch span{color:var(--blu-500);font-weight:600;cursor:pointer;}

/* ---------- LAYOUT ---------- */
#app-shell{display:none;min-height:100vh;}
#app-shell.visible{display:flex;}

#sidebar{
  width:230px;flex-shrink:0;
  background:var(--blu-900);
  color:#cdd9ea;
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;
  z-index:100;
  transition:transform .2s ease;
}
.sidebar-header{
  padding:18px 18px 16px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.sidebar-header .org{font-size:10.5px;letter-spacing:.4px;color:#8aa3c7;text-transform:uppercase;}
.sidebar-header .title{font-size:14px;font-weight:700;color:#fff;line-height:1.3;}
.sidebar-role{font-size:10.5px;color:#8aa3c7;font-weight:500;margin-top:1px;}

.nav-list{flex:1;padding:12px 10px;overflow-y:auto;}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:8px;
  font-size:13.5px;font-weight:500;
  color:#cdd9ea;margin-bottom:2px;
  cursor:pointer;
  transition:background .15s;
}
.nav-item:hover{background:rgba(255,255,255,0.06);color:#fff;}
.nav-item.active{background:var(--blu-500);color:#fff;}
.nav-item .ic{width:18px;text-align:center;font-size:15px;flex-shrink:0;}
.nav-badge{
  margin-left:auto;background:var(--rosso);color:#fff;
  font-size:10px;font-weight:700;border-radius:999px;
  padding:1px 6px;min-width:16px;text-align:center;
}

.sidebar-footer{
  padding:12px 14px;border-top:1px solid rgba(255,255,255,0.08);
}
.sidebar-user{font-size:12.5px;color:#fff;font-weight:600;}
.sidebar-logout{
  display:flex;align-items:center;gap:8px;
  margin-top:8px;padding:8px 10px;border-radius:8px;
  font-size:12.5px;color:#e09b96;cursor:pointer;font-weight:600;
  transition:background .15s;
}
.sidebar-logout:hover{background:rgba(255,255,255,0.06);color:#ff8a80;}
.sidebar-logout .ic{font-size:15px;}

#sidebar-toggle{
  display:none;
  position:fixed;top:14px;left:14px;z-index:200;
  background:var(--blu-900);color:#fff;border:none;
  width:38px;height:38px;border-radius:8px;font-size:16px;
  box-shadow:var(--shadow);
}

#main-area{
  margin-left:230px;
  flex:1;
  min-width:0;
  display:flex;flex-direction:column;
}
#topbar{
  background:var(--bianco);
  border-bottom:1px solid var(--grigio-200);
  padding:14px 28px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:50;
}
#topbar h2{margin:0;font-size:17px;color:var(--blu-900);}
#topbar .topbar-sub{font-size:12px;color:var(--grigio-600);margin-top:2px;}

#page-content{padding:24px 28px 60px;flex:1;}

/* ---------- COMPONENTI COMUNI ---------- */
.alert-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;margin-bottom:26px;
}
.stat-card{
  background:#fff;border-radius:var(--radius);padding:16px 18px;
  box-shadow:var(--shadow);
}
.stat-card .num{font-size:26px;font-weight:700;color:var(--blu-900);}
.stat-card .lbl{font-size:12px;color:var(--grigio-600);margin-top:2px;}

.section-title{
  font-size:14px;font-weight:700;color:var(--blu-900);
  margin:28px 0 12px;text-transform:uppercase;letter-spacing:.3px;
}
.section-title:first-child{margin-top:0;}

.alert-list{display:flex;flex-direction:column;gap:8px;}
.alert-row{
  display:flex;align-items:center;gap:12px;
  background:#fff;border-radius:8px;padding:12px 14px;
  box-shadow:var(--shadow);cursor:pointer;
  border-left:4px solid var(--grigio-400);
  transition:transform .1s;
}
.alert-row:hover{transform:translateX(2px);}
.alert-row.scaduto{border-left-color:var(--rosso);}
.alert-row.avvicinamento{border-left-color:var(--giallo);}
.alert-row .dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
}
.alert-row.scaduto .dot{background:var(--rosso);}
.alert-row.avvicinamento .dot{background:var(--giallo);}
.alert-row .desc{flex:1;font-size:13.5px;font-weight:500;}
.alert-row .data{font-size:12px;color:var(--grigio-600);white-space:nowrap;}
.alert-row .tag{
  font-size:10.5px;font-weight:700;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;white-space:nowrap;
}
.alert-row.scaduto .tag{background:var(--rosso-bg);color:var(--rosso);}
.alert-row.avvicinamento .tag{background:var(--giallo-bg);color:var(--giallo);}

.empty-state{
  text-align:center;padding:36px 20px;color:var(--grigio-600);font-size:13.5px;
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
}
.empty-state .ic{font-size:28px;margin-bottom:8px;}

.collapse-block{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  margin-bottom:16px;overflow:hidden;
}
.collapse-head{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:16px 18px;background:none;border:none;cursor:pointer;
  font-size:14.5px;font-weight:700;color:var(--blu-900);text-align:left;
}
.collapse-head:hover{background:var(--grigio-100);}
.collapse-badge{
  background:var(--rosso);color:#fff;font-size:11px;font-weight:700;
  border-radius:999px;padding:2px 8px;display:none;
}
.collapse-arrow{margin-left:auto;color:var(--grigio-600);font-size:14px;}
.collapse-body{display:none;padding:0 18px 18px;}

.placeholder-page{
  background:#fff;border-radius:var(--radius);padding:40px;text-align:center;
  box-shadow:var(--shadow);color:var(--grigio-600);
}
.placeholder-page h3{color:var(--blu-900);margin-top:0;}

.loading-spin{
  text-align:center;padding:40px;color:var(--grigio-600);font-size:13px;
}

/* ---------- TOOLBAR FILTRI ---------- */
.toolbar{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin-bottom:18px;
}
.toolbar input[type="search"]{
  flex:1;min-width:160px;padding:9px 12px;
  border:1px solid var(--grigio-400);border-radius:8px;font-size:13.5px;
}
.toolbar select{
  padding:9px 10px;border:1px solid var(--grigio-400);border-radius:8px;
  font-size:13px;background:#fff;color:var(--grigio-800);
}
.toolbar .btn-add{
  background:var(--blu-500);color:#fff;border:none;border-radius:8px;
  padding:9px 16px;font-size:13.5px;font-weight:600;white-space:nowrap;
}
.toolbar .btn-add:hover{background:var(--blu-700);}
.results-count{font-size:12px;color:var(--grigio-600);margin-bottom:12px;}

/* ---------- GRIGLIA CARD MEZZI ---------- */
.card-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;
}
.tlc-lista-verticale{
  display:flex;flex-direction:column;gap:8px;
}
.tlc-lista-verticale .veicolo-card.tlc-card{
  display:flex;align-items:center;gap:14px;
  padding:10px 14px;
}
.tlc-lista-verticale .tlc-card-head{
  flex-direction:column;align-items:flex-start;gap:4px;
  padding:0;flex-shrink:0;
}
.tlc-lista-verticale .veicolo-card .info{
  padding:0;flex:1;min-width:0;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.tlc-lista-verticale .veicolo-card .targa{flex-shrink:0;}
.tlc-lista-verticale .veicolo-card .modello{flex-shrink:0;}
.tlc-lista-verticale .veicolo-card .meta{margin-top:0;}
.veicolo-card{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);cursor:pointer;
  transition:transform .12s, box-shadow .12s;
}
.veicolo-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(11,37,69,0.12);}
.veicolo-card .foto-wrap{
  width:100%;aspect-ratio:4/3;background:var(--grigio-200);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
}
.veicolo-card .foto-wrap img{width:100%;height:100%;object-fit:cover;}
.veicolo-card .foto-wrap .ph{font-size:34px;color:var(--grigio-400);}
.veicolo-card .badge-cat{
  position:absolute;top:8px;left:8px;
  background:rgba(11,37,69,0.85);color:#fff;
  font-size:10px;font-weight:700;text-transform:uppercase;
  padding:3px 8px;border-radius:6px;letter-spacing:.3px;
}
.badge-stato-mezzo{
  display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.3px;padding:3px 9px;border-radius:6px;margin-bottom:6px;
}
.badge-stato-mezzo.operativo{background:var(--verde-bg);color:var(--verde);}
.badge-stato-mezzo.revisionare{background:var(--rosso-bg);color:var(--rosso);}
.badge-stato-mezzo.in_manutenzione{background:var(--giallo-bg);color:var(--giallo);}
.badge-stato-mezzo.dismesso{background:var(--grigio-200);color:var(--grigio-600);}
.veicolo-card .info{padding:12px 14px;}
.veicolo-card .targa{
  font-size:14.5px;font-weight:700;color:var(--blu-900);
  font-family:monospace;letter-spacing:.5px;
}
.veicolo-card .modello{font-size:12.5px;color:var(--grigio-800);margin-top:2px;}
.veicolo-card .meta{font-size:11.5px;color:var(--grigio-600);margin-top:6px;display:flex;gap:8px;flex-wrap:wrap;}
.veicolo-card .meta span{background:var(--grigio-100);padding:2px 7px;border-radius:5px;}

.tlc-card-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 14px 0;
}
.tlc-ic{font-size:28px;}

/* ---------- MODAL ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(11,37,69,0.5);
  display:flex;align-items:center;justify-content:center;
  z-index:500;padding:20px;
}
.modal-box{
  background:#fff;border-radius:var(--radius);
  width:100%;max-width:760px;max-height:90vh;
  display:flex;flex-direction:column;
  box-shadow:0 24px 60px rgba(0,0,0,0.3);
}
.modal-head{
  padding:18px 22px;border-bottom:1px solid var(--grigio-200);
  display:flex;align-items:center;justify-content:space-between;
}
.modal-head h3{margin:0;font-size:16px;color:var(--blu-900);font-family:monospace;}
.modal-close{
  background:none;border:none;font-size:20px;color:var(--grigio-600);
  width:30px;height:30px;border-radius:6px;
}
.modal-close:hover{background:var(--grigio-100);}
.modal-tabs{
  display:flex;gap:4px;padding:0 22px;border-bottom:1px solid var(--grigio-200);
  overflow-x:auto;
}
.modal-tab{
  padding:11px 14px;font-size:13px;font-weight:600;color:var(--grigio-600);
  border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;
}
.modal-tab.active{color:var(--blu-500);border-bottom-color:var(--blu-500);}
.modal-body{padding:20px 22px;overflow-y:auto;flex:1;}

/* ---------- FOTO 4 LATI ---------- */
.foto-grid4{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px;
}
.foto-slot{
  position:relative;aspect-ratio:4/3;border-radius:8px;
  background:var(--grigio-200);overflow:hidden;
  border:1.5px dashed var(--grigio-400);
}
.foto-slot img{width:100%;height:100%;object-fit:cover;}
.foto-slot .lbl{
  position:absolute;bottom:0;left:0;right:0;
  background:rgba(11,37,69,0.75);color:#fff;font-size:11px;font-weight:600;
  padding:4px 8px;text-align:center;
}
.foto-slot .ph{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;color:var(--grigio-600);font-size:11px;gap:4px;
}
.foto-slot .ph .ic{font-size:22px;}
.foto-slot input[type="file"]{
  position:absolute;inset:0;opacity:0;cursor:pointer;
}
.foto-slot.uploading::after{
  content:"Caricamento…";position:absolute;inset:0;
  background:rgba(255,255,255,0.85);display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--blu-700);
}

/* ---------- FORM GENERICO ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.form-grid .full{grid-column:1 / -1;}
.form-field label{
  display:block;font-size:11.5px;font-weight:600;color:var(--grigio-800);margin-bottom:4px;
}
.form-field input, .form-field select, .form-field textarea{
  width:100%;padding:8px 10px;border:1px solid var(--grigio-400);
  border-radius:7px;font-size:13px;
}
.form-field textarea{resize:vertical;min-height:60px;}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none;border-color:var(--blu-500);
}
.form-checkbox{display:flex;align-items:center;gap:8px;margin-top:6px;}
.form-checkbox input{width:auto;}
.form-actions{
  display:flex;justify-content:flex-end;gap:8px;margin-top:18px;
  padding-top:14px;border-top:1px solid var(--grigio-200);
}
.btn-save{
  background:var(--blu-500);color:#fff;border:none;border-radius:8px;
  padding:9px 18px;font-size:13.5px;font-weight:600;
}
.btn-save:hover{background:var(--blu-700);}
.btn-cancel{
  background:none;border:1px solid var(--grigio-400);border-radius:8px;
  padding:9px 18px;font-size:13.5px;font-weight:600;color:var(--grigio-800);
}
.btn-danger{
  background:var(--rosso-bg);color:var(--rosso);border:none;border-radius:8px;
  padding:9px 14px;font-size:12.5px;font-weight:600;
}
.btn-danger:hover{background:#f8d7d3;}

/* ---------- STORICO (manutenzioni / movimenti) ---------- */
.storico-toolbar{display:flex;justify-content:flex-end;margin-bottom:10px;}
.btn-add-mini{
  background:var(--blu-500);color:#fff;border:none;border-radius:7px;
  padding:7px 13px;font-size:12.5px;font-weight:600;
}
.btn-add-mini:hover{background:var(--blu-700);}
.storico-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.storico-table th{
  text-align:left;font-size:11px;text-transform:uppercase;color:var(--grigio-600);
  border-bottom:1px solid var(--grigio-200);padding:6px 8px;font-weight:700;
}
.storico-table td{padding:8px 8px;border-bottom:1px solid var(--grigio-100);}
.storico-table tr:last-child td{border-bottom:none;}
.storico-empty{
  text-align:center;padding:22px;color:var(--grigio-600);font-size:12.5px;
}
.mini-form{
  background:var(--grigio-100);border-radius:8px;padding:14px;margin-bottom:14px;
}
.row-del{
  background:none;border:none;color:var(--rosso);font-size:11px;font-weight:600;cursor:pointer;
}
.row-del:hover{text-decoration:underline;}

.firma-canvas-wrap{
  border:1.5px dashed var(--grigio-400);border-radius:8px;
  background:#fff;touch-action:none;
}
.firma-canvas-wrap canvas{display:block;width:100%;height:160px;cursor:crosshair;}
.firma-actions{display:flex;justify-content:space-between;margin-top:8px;}
.firma-clear{background:none;border:none;color:var(--grigio-600);font-size:12px;font-weight:600;}
.firma-clear:hover{color:var(--rosso);}
.radio-group{display:flex;gap:16px;}
.radio-group label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;}

/* ---------- FIRMA DOCUMENTI ---------- */
.firma-layout{display:flex;gap:20px;align-items:flex-start;}
.firma-sidebar{width:240px;flex-shrink:0;display:flex;flex-direction:column;gap:14px;}
.firma-lib-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.firma-lib-item{
  border:2px solid var(--grigio-400);border-radius:8px;padding:6px;
  cursor:pointer;background:#fff;text-align:center;position:relative;
}
.firma-lib-item.selezionata{border-color:var(--blu-500);background:var(--blu-500);background:#eef4fb;}
.firma-lib-item img{max-width:100%;height:50px;object-fit:contain;}
.firma-lib-item .nome{font-size:10.5px;color:var(--grigio-600);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.firma-lib-item .del{
  position:absolute;top:-6px;right:-6px;background:var(--rosso);color:#fff;
  width:18px;height:18px;border-radius:50%;font-size:11px;line-height:18px;text-align:center;
}

.firma-pdf-viewer{
  flex:1;background:var(--grigio-200);border-radius:var(--radius);
  overflow:auto;max-height:75vh;display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px;
}
.firma-page-wrap{position:relative;box-shadow:var(--shadow);background:#fff;}
.firma-page-wrap canvas{display:block;}
.firma-overlay-sign{
  position:absolute;cursor:move;border:1.5px dashed var(--blu-500);
  touch-action:none;
}
.firma-overlay-sign img{width:100%;height:100%;object-fit:contain;pointer-events:none;}
.firma-resize-handle{
  position:absolute;bottom:-6px;right:-6px;width:14px;height:14px;
  background:var(--blu-500);border:2px solid #fff;border-radius:50%;cursor:nwse-resize;
}
.firma-page-num{font-size:11px;color:var(--grigio-600);font-weight:600;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:880px){
  #sidebar{transform:translateX(-100%);width:260px;}
  #sidebar.open{transform:translateX(0);}
  #main-area{margin-left:0;}
  #sidebar-toggle{display:flex;align-items:center;justify-content:center;}
  #page-content{padding:16px 12px 50px;}
  #topbar{padding:14px 18px 14px 60px;}
  .form-grid{grid-template-columns:1fr;}
  .foto-grid4{grid-template-columns:1fr 1fr;}
  .storico-table{display:block;overflow-x:auto;white-space:nowrap;}

  /* Modal: usa quasi tutta la larghezza/altezza dello schermo su mobile */
  .modal-overlay{padding:0;align-items:flex-end;}
  .modal-box{
    max-width:100%;width:100%;max-height:96vh;
    border-radius:16px 16px 0 0;
  }
  .modal-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .modal-tab{flex-shrink:0;}

  /* Radio "Tipo firma" in colonna su mobile, niente testo tagliato */
  .radio-group{flex-direction:column;gap:10px;align-items:flex-start;}
  .radio-group label{white-space:normal;}

  /* Toolbar filtri: impilata invece che su una riga che esce dallo schermo */
  .toolbar{flex-wrap:wrap;}
  .toolbar input[type="search"],
  .toolbar select,
  .toolbar .btn-add{
    width:100%;
  }

  /* Card grid: una colonna su mobile per leggibilità */
  .card-grid{grid-template-columns:1fr;}

  /* Sidebar header: titolo non tagliato */
  .sidebar-header{padding:18px 16px 14px;}
  .sidebar-header .title{font-size:14px;}

  /* Firma canvas: altezza adattata */
  .firma-canvas-wrap canvas{height:140px;}

  .firma-layout{flex-direction:column;}
  .firma-sidebar{width:100%;}
}

@media (max-width:480px){
  .login-box{padding:28px 22px;max-width:100%;}
  .stat-card .num{font-size:22px;}
}

/* Report formazione */
.modal-box-lg{ max-width:880px; width:95%; }
.report-stat-box{ background:var(--grigio-100,#f3f4f6); border-radius:8px; padding:14px; text-align:center; }
.report-stat-num{ font-size:26px; font-weight:700; color:var(--blu-900); }
.report-stat-lbl{ font-size:11.5px; color:var(--grigio-600); margin-top:2px; }