/* =====================================================
   WMS Mengazzoli — Design System
   Mobile-first, ottimizzato per operatori in magazzino
   ===================================================== */

/* ── Variabili ── */
:root{
  --primary:#1B4F72;--primary-light:#2E86C1;
  --accent:#E74C3C;--green:#27AE60;--orange:#F39C12;
  --dark:#2C3E50;--gray:#7F8C8D;
  --light:#ECF0F1;--lighter:#F8F9FA;--white:#FFF;
  --border:#DEE2E6;--shadow:0 2px 8px rgba(0,0,0,.08);
  --radius:8px;--sidebar-w:240px;
}

/* ── Reset ── */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--lighter);color:var(--dark);
  font-size:14px;overflow-x:hidden;
  /* evita che qualsiasi elemento sfori il viewport */
  max-width:100vw;
}
a{color:var(--primary-light);text-decoration:none}

/* ── Layout ── */
.layout{display:flex;min-height:100vh}

/* ── Sidebar ── */
.sidebar{
  position:fixed;left:0;top:0;bottom:0;
  width:var(--sidebar-w);background:var(--primary);
  color:#fff;z-index:200;overflow-y:auto;
  transition:transform .3s ease;
}
.sidebar-brand{
  padding:20px 16px;
  border-bottom:1px solid rgba(255,255,255,.15);
  display:flex;align-items:center;gap:12px;
}
.brand-icon{font-size:32px}
.brand-text{font-size:16px;font-weight:700;line-height:1.2}
.brand-text small{font-size:11px;opacity:.7;font-weight:400}

.sidebar-nav{padding:8px 0}
.sidebar-nav a{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;color:rgba(255,255,255,.8);
  font-size:13px;transition:all .2s;
  border-left:3px solid transparent;
  -webkit-tap-highlight-color:transparent;
}
.sidebar-nav a:hover,.sidebar-nav a:active{background:rgba(255,255,255,.1);color:#fff}
.sidebar-nav a.active{
  background:rgba(255,255,255,.15);color:#fff;
  border-left-color:var(--orange);font-weight:600;
}
.nav-section{
  font-size:10px;text-transform:uppercase;letter-spacing:1px;
  padding:16px 16px 6px;color:rgba(255,255,255,.4);font-weight:600;
}

/* Sidebar user info */
.sidebar-user{margin-top:12px;padding:12px 16px;border-top:1px solid rgba(255,255,255,.15)}
.user-name{font-size:13px;font-weight:600}
.user-role{font-size:10px;opacity:.6;text-transform:uppercase;letter-spacing:.5px}
.user-logout{
  display:inline-block;margin-top:6px;font-size:11px;
  color:rgba(255,255,255,.7);cursor:pointer;
}
.user-logout:hover{color:#fff}

/* ── Hamburger ── */
.hamburger{
  display:none;position:fixed;top:10px;left:10px;z-index:300;
  background:var(--primary);color:#fff;border:none;
  border-radius:10px;width:44px;height:44px;
  font-size:22px;cursor:pointer;
  box-shadow:0 2px 12px rgba(0,0,0,.35);
  -webkit-tap-highlight-color:transparent;
  align-items:center;justify-content:center;
}
.sidebar-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.5);z-index:150;
}

/* ── Contenuto principale ── */
.main-content{
  margin-left:var(--sidebar-w);
  padding:20px 24px;
  min-height:100vh;flex:1;
  /* contieni tutto entro la larghezza disponibile */
  min-width:0;overflow-x:hidden;
}

/* ── Topbar ── */
.topbar{
  display:flex;align-items:center;
  justify-content:space-between;
  margin-bottom:20px;padding-bottom:16px;
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;gap:10px;
}
.topbar h1{font-size:22px;color:var(--primary);min-width:0;flex:1}
.topbar-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ── Cards KPI ── */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:16px;margin-bottom:24px;
}
.card{background:#fff;border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.card-label{font-size:11px;color:var(--gray);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.card-value{font-size:28px;font-weight:700;color:var(--primary)}
.card-value.green{color:var(--green)}
.card-value.orange{color:var(--orange)}
.card-value.red{color:var(--accent)}
.card-sub{font-size:12px;color:var(--gray);margin-top:2px}
.card.clickable{cursor:pointer;transition:all .2s;border:2px solid transparent}
.card.clickable:hover{border-color:var(--primary-light);transform:translateY(-1px)}
.card.clickable.active{border-color:var(--primary-light);background:var(--lighter)}

/* ── Panels ── */
.panel{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:20px}
.panel-header{
  padding:14px 18px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:8px;
}
.panel-header h3{font-size:15px;font-weight:600}
.panel-body{padding:16px 18px}

/* ── Tabelle ── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
table{width:100%;border-collapse:collapse;font-size:13px}
th{
  background:var(--light);color:var(--dark);font-weight:600;
  text-align:left;padding:10px 12px;
  border-bottom:2px solid var(--border);white-space:nowrap;
}
td{padding:8px 12px;border-bottom:1px solid var(--border);max-width:200px}
tr:hover td{background:var(--lighter)}
.text-right{text-align:right}.text-center{text-align:center}
.font-bold{font-weight:700}.text-green{color:var(--green)}.text-red{color:var(--accent)}

/* ── Badge ── */
.badge{display:inline-block;padding:3px 8px;border-radius:12px;font-size:11px;font-weight:600;white-space:nowrap}
.badge-prod{background:#FFF3CD;color:#856404}
.badge-trasf{background:#D1ECF1;color:#0C5460}
.badge-stock{background:#D4EDDA;color:#155724}
.badge-stock_tecnico{background:#FFE0B2;color:#E65100}
.badge-assegnato{background:#E2D5F1;color:#4A235A}
.badge-spedito{background:#D5D8DC;color:#555}
.badge-aperta{background:#D1ECF1;color:#0C5460}
.badge-in_viaggio{background:#FFF3CD;color:#856404}
.badge-arrivata{background:#F8D7DA;color:#721C24;animation:pulse 2s infinite}
.badge-scaricata{background:#D4EDDA;color:#155724}
.badge-chiusa{background:#D5D8DC;color:#555}
.badge-cliente{background:#D4EDDA;color:#155724}
.badge-sito_mengazzoli{background:#D1ECF1;color:#0C5460}
.badge-da_completare{background:#F8D7DA;color:#C62828;animation:pulse 2s infinite}
.badge-da_preparare{background:#E3F2FD;color:#1565C0}
.badge-in_preparazione{background:#FFF3CD;color:#856404}
.badge-pronto{background:#C8E6C9;color:#1B5E20;animation:pulse 2s infinite}
.badge-in_carico{background:#BBDEFB;color:#0D47A1}
.badge-spedito,.badge-trasferito{background:#D5D8DC;color:#555}
.badge-annullato{background:#FFCDD2;color:#B71C1C}
.badge-pallet{background:#E8EAF6;color:#283593}
.badge-picking{background:#F3E5F5;color:#6A1B9A}
.badge-misto{background:#E0F2F1;color:#00695C}
.badge-impegnato{background:#FFCCBC;color:#BF360C}

/* ── Bottoni ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 16px;border:none;border-radius:6px;
  font-size:13px;font-weight:500;cursor:pointer;
  transition:all .2s;-webkit-tap-highlight-color:transparent;
  white-space:nowrap;min-height:40px;
}
.btn-primary{background:var(--primary-light);color:#fff}.btn-primary:hover{background:var(--primary)}
.btn-success{background:var(--green);color:#fff}
.btn-danger{background:var(--accent);color:#fff}
.btn-warning{background:var(--orange);color:#fff}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--dark)}.btn-outline:hover{background:var(--light)}
.btn-sm{padding:5px 10px;font-size:12px;min-height:32px}
.btn-group{display:flex;gap:6px;flex-wrap:wrap}

/* ── Form ── */
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:12px;font-weight:600;color:var(--dark);margin-bottom:4px}
.form-control{
  width:100%;padding:10px 12px;
  border:1px solid var(--border);border-radius:6px;
  font-size:14px;font-family:inherit;background:#fff;
  /* previene zoom automatico su iOS (font >= 16px) */
  font-size:max(16px,14px);
}
.form-control:focus{outline:none;border-color:var(--primary-light);box-shadow:0 0 0 3px rgba(46,134,193,.15)}
select.form-control{appearance:auto}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.form-control-static{padding:6px 0;font-size:14px}

/* Gruppo input + bottone scan affiancati */
.input-scan-group{display:flex;gap:6px;align-items:stretch}
.input-scan-group .form-control{flex:1;min-width:0}
.btn-scan-cam{
  background:var(--primary);color:#fff;border:none;
  border-radius:var(--radius);padding:0 14px;
  font-size:20px;cursor:pointer;flex-shrink:0;
  min-height:44px;min-width:44px;
  display:inline-flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;transition:background .15s;
}
.btn-scan-cam:hover,.btn-scan-cam:active{background:var(--primary-light)}

/* Filters */
.filters{
  display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;
  margin-bottom:16px;padding:12px 16px;
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
}
.filters .form-group{margin-bottom:0;min-width:140px}
.filters label{font-size:11px}
.filters .form-control{font-size:13px;padding:6px 8px}

/* ── Modal ── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.4);
  z-index:300;display:flex;align-items:center;justify-content:center;
  padding:16px;
}
.modal{
  background:#fff;border-radius:var(--radius);
  width:100%;max-width:650px;max-height:85vh;
  overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.2);
}
.modal-header{
  padding:16px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;background:#fff;z-index:5;
}
.modal-header h3{font-size:16px}
.modal-body{padding:20px}
.modal-footer{
  padding:14px 20px;border-top:1px solid var(--border);
  display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;
  position:sticky;bottom:0;background:#fff;z-index:5;
}
.modal-close{
  background:none;border:none;font-size:24px;cursor:pointer;
  color:var(--gray);padding:4px;
  min-width:44px;min-height:44px;
  display:flex;align-items:center;justify-content:center;
}

/* ── Pulsante azione grande (mobile) ── */
.pz-action-btn{
  width:100%;padding:16px;font-size:16px;
  margin-top:8px;border-radius:var(--radius);
}
.pz-input-big{font-size:16px!important;padding:12px!important}
.pz-selected-box{
  background:var(--lighter);border:1px solid var(--border);
  border-radius:var(--radius);padding:10px 12px;
  margin-bottom:10px;font-size:13px;
}
.pz-last-box{
  background:#E8F5E9;border:1px solid #C8E6C9;
  border-radius:var(--radius);padding:10px 12px;
  margin-top:10px;font-size:13px;
}
.pz-container{max-width:600px}

/* ── Dashboard grid ── */
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ── Navette ── */
.navetta-card{
  border:2px solid var(--border);border-radius:var(--radius);
  padding:14px;margin-bottom:12px;
}
.navetta-card.in-viaggio{border-color:var(--orange);background:#FFF8E1}
.navetta-card.arrivata{border-color:var(--accent);background:#FFEBEE;animation:pulse 2s infinite}

/* ── Saturazione ── */
.sat-bar{height:8px;background:var(--light);border-radius:4px;overflow:hidden}
.sat-bar-fill{height:100%;border-radius:4px;transition:width .3s}
.sat-bar-fill.low{background:var(--green)}
.sat-bar-fill.mid{background:var(--orange)}
.sat-bar-fill.high{background:var(--accent)}

/* ── Report ── */
.report-total{
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  color:#fff;border-radius:var(--radius);
  padding:24px;text-align:center;margin-bottom:20px;
}
.report-total .big{font-size:42px;font-weight:800}
.report-total .label{font-size:14px;opacity:.9;margin-top:4px}

/* ── Toast ── */
.toast{
  position:fixed;bottom:20px;right:20px;
  padding:12px 20px;border-radius:var(--radius);
  color:#fff;font-size:14px;z-index:999;
  animation:slideIn .3s;max-width:calc(100vw - 40px);
  box-shadow:0 4px 16px rgba(0,0,0,.2);
}
.toast.success{background:var(--green)}
.toast.error{background:var(--accent)}
.toast.info{background:var(--primary-light)}

/* ── Dropdown ricerca articoli ── */
.search-dropdown{
  position:absolute;top:100%;left:0;right:0;
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.12);
  z-index:100;max-height:280px;overflow-y:auto;
}
.search-dropdown-item{
  padding:10px 14px;cursor:pointer;font-size:13px;
  border-bottom:1px solid var(--lighter);
}
.search-dropdown-item:hover,.search-dropdown-item:active{background:var(--lighter)}
.search-dropdown-item:last-child{border-bottom:none}

/* ── Mappa magazzino ── */
.wh-area-panel{margin-bottom:24px}
.wh-area-grid{display:flex;flex-wrap:wrap;gap:2px;align-items:flex-start}
.wh-stiva{display:flex;flex-direction:column;align-items:center;min-width:28px}
.wh-stiva-label{font-size:9px;color:var(--gray);font-weight:700;padding:0 0 2px;text-align:center}
.wh-stiva-cells{display:flex;flex-direction:column;gap:1px}
.wh-cell{
  width:26px;height:20px;border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  font-size:8px;font-weight:600;cursor:default;
  transition:all .15s;border:1px solid transparent;
}
.wh-cell.free{background:#E8F5E9;color:#4CAF50;border-color:#C8E6C9}
.wh-cell.occupied{background:#FFCDD2;color:#C62828;border-color:#EF9A9A;cursor:pointer}
.wh-cell.occupied:hover{background:#EF9A9A;transform:scale(1.15);z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.wh-legend{
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  padding:8px 16px;margin-bottom:16px;
  background:#fff;border-radius:var(--radius);
  box-shadow:var(--shadow);font-size:12px;color:var(--gray);
}
.legend-item{display:flex;align-items:center;gap:4px}
.legend-tip{margin-left:auto;font-style:italic;font-size:11px}

/* ── Timeline ── */
.tl-day{margin-bottom:20px}
.tl-day-header{font-size:14px;font-weight:700;color:var(--primary);padding:8px 0;border-bottom:2px solid var(--primary-light);margin-bottom:8px}
.tl-event{
  display:flex;align-items:flex-start;gap:10px;
  padding:8px 12px;border-left:3px solid var(--border);
  margin-left:24px;margin-bottom:2px;
  transition:background .15s;border-radius:0 6px 6px 0;
}
.tl-event:hover{background:var(--lighter)}
.tl-event.tl-error{border-left-color:var(--accent);background:#FFF5F5}
.tl-event.tl-auth{border-left-color:var(--primary-light)}
.tl-event.tl-bolla{border-left-color:var(--green)}
.tl-event.tl-pallet{border-left-color:var(--orange)}
.tl-time{font-size:12px;font-weight:600;color:var(--gray);min-width:42px;padding-top:2px}
.tl-icon{font-size:16px;min-width:22px;text-align:center}
.tl-body{flex:1;font-size:13px;line-height:1.4;min-width:0}
.tl-action{color:var(--primary-light);font-weight:600;font-size:12px}
.tl-detail{color:var(--gray);font-size:12px;margin-top:2px;word-break:break-word}
.tl-ref{color:var(--gray);font-size:10px;background:var(--light);padding:1px 6px;border-radius:3px}
.tl-ip{font-size:10px;color:var(--gray);min-width:100px;text-align:right}

/* ── Picking / Preparazione ── */
.prep-riga{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:10px 0;border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.riga-ordine{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;
  padding:10px 0;border-bottom:1px solid var(--border);
  font-size:13px;
}

/* ── Stato empty / loading ── */
.empty-state{text-align:center;padding:40px;color:var(--gray)}
.empty-state .icon{font-size:48px;margin-bottom:12px}
.loading{text-align:center;padding:20px;color:var(--gray)}
.spinner{
  display:inline-block;width:24px;height:24px;
  border:3px solid var(--border);border-top-color:var(--primary-light);
  border-radius:50%;animation:spin .8s linear infinite;
}

/* ── Nav highlight ── */
.nav-highlight{background:rgba(243,156,18,.15)!important}

/* ── Animazioni ── */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes slideIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ═══════════════════════════════════
   MOBILE ≤ 768px
   ═══════════════════════════════════ */
@media(max-width:768px){

  /* Sidebar: nascosta di default, scorre da sinistra */
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0);box-shadow:4px 0 24px rgba(0,0,0,.3)}
  .sidebar-overlay.open{display:block}
  .hamburger{display:flex}

  /* Contenuto: occupa tutto lo schermo */
  .main-content{
    margin-left:0!important;
    padding:8px 12px 24px;
    padding-top:60px; /* spazio per hamburger fisso */
    width:100%;max-width:100vw;
  }

  /* Topbar sticky con spazio per hamburger */
  .topbar{
    position:sticky;top:0;background:var(--lighter);z-index:50;
    margin:-60px -12px 16px;
    padding:10px 12px 10px 60px;
    border-bottom:2px solid var(--border);
    flex-wrap:wrap;gap:6px;
  }
  .topbar h1{font-size:17px;line-height:1.2}
  .topbar-right{width:100%;display:flex;gap:6px;flex-wrap:wrap}
  .topbar-right .btn{flex:1;min-width:0;justify-content:center;font-size:13px;padding:8px 10px}

  /* Cards: 2 colonne */
  .cards{grid-template-columns:1fr 1fr;gap:10px}
  .card{padding:12px}
  .card-value{font-size:22px}
  .card-label{font-size:10px}

  /* Dashboard grid: 1 colonna */
  .dash-grid{grid-template-columns:1fr}

  /* Panel */
  .panel-header{padding:10px 12px}
  .panel-body{padding:10px 12px}

  /* Form: sempre 1 colonna */
  .form-row,.form-row-3{grid-template-columns:1fr!important}
  .riga-ordine{grid-template-columns:1fr 1fr}
  .filters{flex-direction:column;gap:8px}
  .filters .form-group{width:100%;min-width:auto}

  /* Bottoni più grandi per touch */
  .btn{padding:10px 14px;font-size:14px;min-height:44px}
  .btn-sm{min-height:38px;padding:8px 12px;font-size:12px}
  .pz-action-btn{padding:18px;font-size:17px}
  .sidebar-nav a{padding:14px 16px;font-size:14px;min-height:48px}

  /* Modal: quasi full-screen */
  .modal-overlay{padding:8px;align-items:flex-end}
  .modal{
    max-width:100%!important;width:100%;
    max-height:92vh;border-radius:16px 16px 0 0;
  }
  .modal-header{padding:14px 16px}
  .modal-body{padding:14px 16px}
  .modal-footer{padding:12px 16px}

  /* Tabelle: scroll orizzontale */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -12px;padding:0 12px}
  table{font-size:12px;min-width:400px}
  th,td{padding:8px 8px;white-space:nowrap}
  /* Nascondi colonne non essenziali */
  .col-hide-mobile{display:none}

  /* Report */
  .report-total .big{font-size:32px}

  /* Mappa magazzino */
  .wh-cell{width:18px;height:14px;font-size:6px}
  .wh-stiva{min-width:20px}
  .wh-legend{padding:8px 10px;gap:10px;font-size:11px}

  /* Timeline */
  .tl-event{margin-left:8px;gap:6px;padding:6px 8px}
  .tl-ip{display:none}
  .tl-time{min-width:36px;font-size:11px}

  /* Toast: in basso centrato */
  .toast{
    left:12px;right:12px;bottom:12px;
    text-align:center;font-size:14px;
  }

  /* Scanner input group */
  .input-scan-group .form-control{font-size:16px!important}
  .btn-scan-cam{min-width:50px;font-size:22px}
}

/* ═══════════════════════════════════
   MOBILE PICCOLO ≤ 400px
   ═══════════════════════════════════ */
@media(max-width:400px){
  .cards{grid-template-columns:1fr}
  .report-total .big{font-size:26px}
  .topbar h1{font-size:15px}
  .btn{font-size:13px;padding:10px 10px}
  table{font-size:11px}
  th,td{padding:6px 6px}
}