:root {
  --bg:#f0f2f5; --bg-card:#ffffff; --bg-panel:#e8ecf1; --bg-entry:#e8ecf1;
  --or:#E67E22; --or-hv:#D35400; --gr:#3fb950; --rd:#e05050;
  --bl:#1a4a6a; --bl-hv:#0f3050; --pri:#1a1a2e; --sec:#4a4a6a;
  --olive:#5a4a00; --olive-hv:#7a6200;
}
.customs-wrap { color: var(--pri); }
/* ── Hub ── */
.hub { display:flex; justify-content:center; align-items:center; gap:40px; padding:80px 20px; }
.hub-card { background:#1a4a8a; color:#fff; border-radius:20px; width:220px; height:220px;
            display:flex; flex-direction:column; align-items:center; justify-content:center;
            font-size:28px; font-weight:700; cursor:pointer; text-decoration:none;
            transition:background .15s; }
.hub-card:hover { background:#0f3070; }
.hub-card.clearance { background:#7a2010; }
.hub-card.clearance:hover { background:#5e1808; }
.hub-card span { font-size:48px; margin-bottom:16px; }
/* ── Toolbar: una sola riga compatta (scroll se non entra) ── */
.toolbar {
  background:var(--bg-panel); border-radius:6px; padding:4px 8px;
  display:flex; flex-wrap:nowrap; gap:4px; align-items:center;
  margin:8px 12px 0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.toolbar > .btn, .toolbar > a.btn, .toolbar > span, .toolbar > a {
  flex:0 0 auto; white-space:nowrap;
}
.toolbar > div { display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; margin-left:auto; }
/* ── Buttons ── */
.btn { border:none; border-radius:4px; padding:3px 8px; cursor:pointer; font-size:11px; font-weight:600; line-height:1.25; white-space:nowrap; }
.btn-blue   { background:var(--bl);    color:#fff; } .btn-blue:hover   { background:var(--bl-hv); }
.btn-green  { background:#2d4a2d;      color:#fff; } .btn-green:hover  { background:#1e3a1e; }
.btn-olive  { background:var(--olive); color:#fff; } .btn-olive:hover  { background:var(--olive-hv); }
.btn-sync   { background:#4a3a00;      color:#fff; } .btn-sync:hover   { background:#6a5200; }
.btn-red    { background:#4a1010;      color:#fff; } .btn-red:hover    { background:#6a1818; }
.btn-save   { background:var(--bl);    color:#fff; } .btn-save:hover   { background:var(--bl-hv); }
.btn-mail   { background:#3a5a8a;      color:#fff; } .btn-mail:hover   { background:#2a4a7a; }
.btn-invia  { background:var(--gr);    color:#000; } .btn-invia:hover  { background:#2a8a40; }
.btn-orange { background:var(--or);    color:#000; } .btn-orange:hover { background:var(--or-hv); }
.btn-purple { background:#6a1a6a;      color:#fff; } .btn-purple:hover { background:#8a2a8a; }
.btn-dk-gr  { background:#1a4a1a;      color:#fff; } .btn-dk-gr:hover  { background:#2a6a2a; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
/* ── Table ── */
.thead { background:#d0d5dd; display:flex; font-size:10px; font-weight:700;
         text-transform:uppercase; color:var(--pri); padding:4px 8px; margin:8px 16px 0; border-radius:4px 4px 0 0; }
.thead span { flex:1; }
.trow { display:flex; align-items:center; gap:4px; padding:6px 8px;
        border-bottom:1px solid #e0e4ea; background:#e8ecf1; }
.trow:nth-child(even) { background:#fff; }
.trow input[type=text] { background:var(--bg-entry); border:1px solid #c5cad3; border-radius:4px;
                         padding:3px 6px; font-size:11px; color:var(--pri); }
.badge { border-radius:10px; font-size:10px; font-weight:700; color:#fff;
         padding:2px 10px; text-align:center; }
.badge-wc  { background:#27ae60; } .badge-man { background:#6f42c1; }
.badge-gr  { background:#155724; } .badge-or  { background:var(--or); }
.badge-rd  { background:#4a1010; }
.badge-wait { background:#5a6270; color:#fff; }
#righe-container.righe-verifica { opacity:0.92; pointer-events:none; }
.cb-flag   { display:flex; flex-direction:column; gap:2px; font-size:11px; }
.cb-flag label { display:flex; align-items:center; gap:4px; cursor:pointer; }
/* ── Footer bar ── */
.footbar { background:var(--bg-panel); padding:6px 16px; font-size:11px; color:var(--sec);
           margin:0 16px; border-radius:0 0 6px 6px; }
/* ── Status labels ── */
.status { font-size:12px; padding:0 8px; }
/* ── OP Tracker ── */
.op-tracker { background:#f0f2f5; border-radius:6px; margin:6px 12px;
              padding:4px 8px; }
.op-tracker .ops-row { display:flex; gap:4px; flex-wrap:nowrap; margin-top:2px;
                       overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.op-card { background:#dce1e8; border-radius:4px; width:auto; min-width:120px; min-height:36px;
           display:inline-flex; align-items:center; gap:5px; padding:4px 8px; flex:0 0 auto; }
.op-card.in-progress { background:#1a4a8a; color:#fff; }
.op-card.completed   { background:#2d5a2d; color:#4ade80; }
.op-card.error       { background:#5a1a1a; color:#f87171; }
.op-card .op-idx { font-size:13px; font-weight:700; }
.op-card .op-name { font-size:10px; white-space:nowrap; }
/* ── Clearance ── */
.search-bar {
  background:var(--bg-panel); border-radius:6px; padding:4px 8px;
  display:flex; align-items:center; gap:4px; flex-wrap:nowrap;
  margin:8px 12px 0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.search-bar > * { flex:0 0 auto; white-space:nowrap; }
.search-bar label { font-weight:700; font-size:11px; color:var(--sec); }
.search-bar input, .search-bar select {
  background:var(--bg-entry); border:1px solid #c5cad3; border-radius:4px;
  padding:2px 6px; font-size:11px; color:var(--pri); height:24px;
}
.email-box { background:var(--bg-panel); border:1px solid #c5cad3; border-radius:6px;
             padding:12px; font-family:monospace; font-size:12px; line-height:1.5;
             margin:8px 16px; min-height:300px; white-space:pre-wrap; color:var(--pri); }
textarea.email-box { resize:vertical; width:calc(100% - 32px); }
/* ── Modal ── */
.modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:100; }
.modal-bg.open { display:flex; align-items:center; justify-content:center; }
.modal { background:#fff; border-radius:12px; padding:24px; min-width:340px; max-width:90vw;
         max-height:90vh; overflow-y:auto; }
.modal h3 { font-size:15px; font-weight:700; margin-bottom:12px; }
.radio-row { display:flex; flex-direction:column; gap:8px; }
.radio-row label { display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; }
/* ── Progress bar ── */
.progress-bar-wrap { background:#e0e4ea; border-radius:4px; height:8px; margin:4px 0; overflow:hidden; }
.progress-bar { background:var(--or); height:8px; border-radius:4px; transition:width .4s ease; min-width:2%; }
.progress-bar-wrap.progress-active .progress-bar {
  background: linear-gradient(90deg, #d35400 0%, #f39c12 45%, #e67e22 55%, #d35400 100%);
  background-size: 220% 100%;
  animation: progress-pulse 1.4s ease-in-out infinite;
}
@keyframes progress-pulse {
  0% { background-position: 0% 50%; opacity: 0.85; }
  50% { background-position: 100% 50%; opacity: 1; }
  100% { background-position: 0% 50%; opacity: 0.85; }
}
/* ── Toast ── */
.toast { position:fixed; bottom:24px; right:24px; background:#1a1a2e; color:#fff;
         padding:10px 18px; border-radius:8px; font-size:13px; z-index:999;
         display:none; max-width:320px; }
.toast.show { display:block; }
/* ── Sync report ── */
.sync-log { background:var(--bg-panel); border-radius:6px; padding:10px 14px;
            font-family:monospace; font-size:11px; max-height:300px; overflow-y:auto; }
/* ── Clearance product editor ── */
.editor-group { background:var(--bg-panel); border-radius:8px; margin-bottom:12px; overflow:hidden; }
.editor-group-hdr { background:#1a3a6a; color:#fff; padding:8px 14px; display:flex; align-items:center; gap:8px; }
.editor-group-hdr input { background:#0f2a50; border:1px solid #4a7abf; color:#fff;
                           border-radius:4px; padding:3px 8px; font-size:12px; font-weight:700; width:150px; }
.editor-row { display:flex; gap:6px; padding:6px 12px; align-items:center; }
.editor-row input { background:var(--bg-entry); border:1px solid #c5cad3; border-radius:4px;
                    padding:3px 6px; font-size:11px; }
/* Hub: stile originale — non ereditare effetti friendly_ux su .hub-card */
.hub .hub-card { transition: background 0.15s; transform: none; box-shadow: none; }
.hub .hub-card:hover { transform: none; box-shadow: none; }

/* Mobile / iPad — desktop ≥901px invariato */
@media (max-width:900px), (max-width:1100px) and (pointer:coarse) {
  .hub {
    flex-direction: column; gap: 16px; padding: 24px 16px; align-items: stretch;
  }
  .hub-card {
    width: 100%; height: auto; min-height: 100px; flex-direction: row;
    justify-content: flex-start; gap: 16px; padding: 16px 20px; font-size: 18px;
  }
  .hub-card span { font-size: 32px; margin-bottom: 0; }
  .toolbar, .search-bar {
    margin: 10px 10px 0; gap: 8px; flex-wrap: wrap; overflow-x: visible;
  }
  .toolbar > div { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .btn { min-height: 44px; padding: 10px 14px; font-size: 13px; }
  .op-tracker .ops-row { flex-wrap: wrap; overflow-x: visible; }
  .op-card { width: 100%; min-height: 56px; }
  .search-bar input, .trow input[type=text] {
    min-height: 40px; font-size: 16px; width: 100% !important; max-width: 100%;
  }
  .thead { display: none; }
  .trow {
    flex-direction: column; align-items: stretch; gap: 8px;
    margin: 0 10px 8px; padding: 12px; border-radius: 10px;
    border: 1px solid #e0e4ea; border-bottom: 1px solid #e0e4ea;
  }
  .trow > span {
    flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important;
  }
  .trow .btn { min-height: 40px; }
  .cb-flag { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .cb-flag input { width: 20px; height: 20px; }
  .email-box, textarea.email-box {
    width: calc(100% - 20px); margin: 8px 10px; font-size: 14px;
  }
  .modal { min-width: 0; width: calc(100vw - 24px); }
}
.doc-prev-btn{background:#5b2c6f!important;color:#fff!important;border:0;padding:3px 8px;border-radius:5px;cursor:pointer;font-size:13px;line-height:1.2}
.doc-prev-btn:hover{filter:brightness(1.08)}