/* Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f3ef; color: #333; line-height: 1.6; -webkit-text-size-adjust: 100%; font-weight: 400; }
a { color: #c94846; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Navbar */
/* Navbar responsive: flex con wrap. Con la griglia a 3 colonne il blocco dei
   link, più largo della sua colonna, finiva sopra al titolo centrale; qui
   invece il titolo si accorcia e i link vanno a capo, senza mai sovrapporsi. */
.navbar { background: #000; color: #fff; padding: 6px 32px; min-height: 84px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; column-gap: 16px; row-gap: 6px; border-bottom: 1px solid rgba(255,255,255,0.06); font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; }
.navbar-portal { background: #000; }
/* Alcune pagine mettono il titolo dentro il brand: deve poter rimpicciolire. */
.navbar-brand { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; }
.navbar-logo { height: 70px; max-height: 70px; width: auto; display: block; }
/* Titolo: prende lo spazio che avanza e si tronca invece di spingere i link. */
.navbar-center { flex: 1 1 auto; min-width: 0; text-align: center; }
.navbar h1 { font-size: 15px; font-weight: 300; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; color: #deac1c; overflow: hidden; text-overflow: ellipsis; }
.navbar-right { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 14px; flex: 0 1 auto; min-width: 0; }
.nav-link { color: #fff; font-size: 13px; white-space: nowrap; transition: color 0.2s; font-weight: 600; letter-spacing: 0.05em; }
.nav-link:hover { color: #deac1c; text-decoration: none; }
.nav-user { font-size: 13px; color: #e2e2e0; white-space: nowrap; font-weight: 500; letter-spacing: 0.02em; }
.nav-notifications { color: #fff; position: relative; font-size: 13px; white-space: nowrap; font-weight: 600; letter-spacing: 0.04em; transition: color 0.2s; }
.nav-notifications:hover { color: #deac1c; text-decoration: none; }
/* Logout ("Esci") sits on the dark navbar: the default .btn-outline text (#374151)
   is invisible there, so force a light, clearly-visible variant inside the navbar. */
.navbar .btn-outline { color: #fff; border-color: rgba(255,255,255,0.55); background: transparent; font-weight: 600; }
.navbar .btn-outline:hover { color: #fff; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.85); }
.btn-logout { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #fff; font-weight: 400; letter-spacing: 0.06em; padding: 6px 14px; font-size: 12px; }
.btn-logout:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); color: #fff; }
.lang-selector { display: flex; align-items: center; gap: 2px; margin-left: 4px; }
.lang-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: #888; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; cursor: pointer; padding: 4px 7px; border-radius: 4px; transition: color 0.2s, background 0.2s; font-family: inherit; }
.lang-btn:hover { color: #deac1c; background: rgba(255,255,255,0.06); }
.lang-btn.active { color: #deac1c; }
.lang-sep { color: #444; font-size: 11px; user-select: none; }

/* Language flags: crisp on every OS (no reliance on emoji flag support) */
.flag { display: inline-block; width: 18px; height: 12px; border-radius: 2px; background-size: cover; background-position: center; box-shadow: 0 0 0 1px rgba(0,0,0,0.12); flex: 0 0 auto; }
.flag-it { background-image: linear-gradient(to right, #009246 0 33.33%, #fff 33.33% 66.66%, #ce2b37 66.66% 100%); }
.flag-en { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z'/%3E%3C/clipPath%3E%3Cpath d='M0,0 v30 h60 v-30 z' fill='%23012169'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E"); }
.login-box .lang-btn { color: #94a3b8; }
.login-box .lang-btn:hover { color: #b8922a; background: rgba(0,0,0,0.04); }
.login-box .lang-btn.active { color: #b8922a; }
.login-box .lang-sep { color: #cbd5e1; }
.login-box .lang-selector { margin-left: 0; }
.badge { background: #c94846; color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 10px; margin-left: 4px; animation: pulse 2s infinite; }

/* Order Type Tabs */
.order-type-tabs { display: grid !important; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }
button.order-type-tab { background: #fff; border: 2px solid #d8d2c4; border-radius: 14px; padding: 28px 30px; cursor: pointer; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px; transition: all 0.2s ease; text-align: left; font-family: 'Manrope', inherit; position: relative; min-height: 150px; width: 100%; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
button.order-type-tab i { font-size: 28px; color: #8b8578; margin-bottom: 12px; transition: color 0.2s ease; display: block; }
button.order-type-tab .tab-title { font-size: 18px; font-weight: 600; color: #1a1a1a; letter-spacing: 0.01em; display: block; margin-bottom: 2px; }
button.order-type-tab .tab-sub { font-size: 13px; color: #6b6b6b; font-weight: 400; line-height: 1.5; display: block; }
button.order-type-tab:hover { border-color: #deac1c; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.06); background: #fff; }
button.order-type-tab.active { border-color: #1a1a1a; background: #1a1a1a; color: #fff; box-shadow: 0 10px 24px rgba(0,0,0,0.15); }
button.order-type-tab.active i { color: #deac1c; }
button.order-type-tab.active .tab-title { color: #fff; }
button.order-type-tab.active .tab-sub { color: #c7c0ac; }
@media (max-width: 640px) { .order-type-tabs { grid-template-columns: 1fr; gap: 14px; } button.order-type-tab { min-height: 120px; padding: 22px 24px; } }

/* Upload actions (camera + file) */
.upload-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.upload-btn { display: inline-flex !important; align-items: center; gap: 8px; cursor: pointer; }
.upload-btn i { font-size: 14px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.upload-preview { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.upload-preview-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #4a4a4a; padding: 6px 10px; background: #fafaf7; border: 1px solid #ece7dd; border-radius: 6px; }
.upload-preview-item i { color: #deac1c; }

/* Main Content */
.main-content-full { padding: 20px; max-width: 1100px; margin: 0 auto; }

/* Modal overlay */
.modal-overlay { position: fixed; inset: 0; background: rgba(20,20,20,0.62); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: modalFadeIn 0.18s ease-out; }
.modal-card { background: #fff; border-radius: 14px; padding: 28px 30px; max-width: 480px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.3); animation: modalPopIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); }
.modal-card h3 { font-size: 20px; margin-bottom: 10px; color: #1a1a1a; font-weight: 500; }
.modal-card p { font-size: 15px; color: #4a4a4a; margin-bottom: 22px; }
.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPopIn { from { opacity: 0; transform: scale(0.92) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* Catalog reference banner in misura flow */
.catalog-ref-banner { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #fdf8e8, #faf0d0); border: 1px solid #deac1c; color: #7a5a00; padding: 12px 16px; border-radius: 10px; margin-bottom: 20px; font-size: 14px; }
.catalog-ref-banner i { color: #deac1c; }

/* Parlanti watermark — the single page background, contained + transparent */
body::before {
  content: '';
  position: fixed;
  /* Center within the content area below the 84px navbar, pinned to the viewport */
  top: 84px;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('/images/bg-parlanti.jpg') center center / 55vmin no-repeat;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 640px) {
  body::before { top: 68px; background-size: 70vmin; }
}
body > * { position: relative; z-index: 1; }

/* Disable the previous Emmegi watermark — Parlanti is the single bg now */
.dashboard-with-logo { position: relative; min-height: calc(100vh - 84px); }
.dashboard-bg-logo { display: none !important; }
.dashboard-with-logo > *:not(.dashboard-bg-logo) { position: relative; z-index: 1; }
/* Apply the same faded background to the order form page */
.page-with-bg-logo { position: relative; }
.page-with-bg-logo > *:not(.dashboard-bg-logo):not(.modal-overlay) { position: relative; z-index: 1; }

/* Reference diagram thumbnails inside form fields */
.diagram-ref { display: block; margin: 8px 0 14px; padding: 12px; background: linear-gradient(135deg, #fdfcf8, #faf6ec); border: 1px solid #ece1c2; border-radius: 10px; text-align: center; position: relative; }
.diagram-ref img { max-width: 100%; max-height: 320px; height: auto; }
.diagram-ref-clickable { cursor: zoom-in; text-decoration: none; transition: all 0.2s; }
.diagram-ref-clickable:hover { border-color: #deac1c; box-shadow: 0 4px 14px rgba(0,0,0,0.06); text-decoration: none; }
.diagram-ref-clickable:hover .diagram-ref-zoom { background: #deac1c; color: #1a1a1a; }
.diagram-ref-zoom { position: absolute; bottom: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: #7a5a00; background: rgba(255,255,255,0.95); padding: 5px 10px; border-radius: 999px; border: 1px solid #e8d88a; transition: all 0.2s; }

/* Notification filter chips */
.notification-filters { display: flex; gap: 8px; margin: 12px 0 18px; flex-wrap: wrap; }
.chip-filter { display: inline-flex; align-items: center; padding: 6px 14px; border: 1px solid #d8d2c4; border-radius: 999px; font-size: 13px; color: #4a4a4a; background: #fff; text-decoration: none; transition: all 0.2s; }
.chip-filter:hover { border-color: #deac1c; color: #7a5a00; background: #fdf8e8; text-decoration: none; }
.chip-filter.is-active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }

/* Mini production pipeline strip on order cards */
.mini-pipeline { margin-top: 12px; }
.mini-pipeline-track { position: relative; height: 8px; background: #f1ede5; border-radius: 999px; overflow: hidden; border: 1px solid #ece1c2; }
.mini-pipeline-fill { height: 100%; background: linear-gradient(90deg, #deac1c 0%, #e8bc3a 100%); border-radius: inherit; transition: width 0.4s ease; }
.mini-pipeline-label { margin-top: 6px; font-size: 12px; color: #6b6b6b; letter-spacing: 0.02em; }
/* Fase di lavorazione in corso (solo se attivata dal laboratorio) */
.mini-pipeline-stage { margin-top: 4px; font-size: 12px; color: #7a5a00; letter-spacing: 0.02em; }
.mini-pipeline-stage i { margin-right: 4px; opacity: 0.7; }

/* Stage-by-stage pipeline visual on admin dashboard */
.pipeline-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 14px; }
.pipeline-board-stage { background: #fff; border: 1px solid #ece7dd; border-radius: 12px; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; position: relative; transition: all 0.2s; }
.pipeline-board-stage:hover { border-color: #deac1c; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
.pipeline-board-stage .stage-name { font-size: 12px; color: #4a4a4a; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.pipeline-board-stage .stage-count { font-size: 28px; color: #1a1a1a; font-weight: 700; line-height: 1; }
.pipeline-board-stage .stage-bar { height: 6px; background: #f1ede5; border-radius: 999px; overflow: hidden; }
.pipeline-board-stage .stage-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #deac1c, #e8bc3a); border-radius: inherit; }
.stage-badge { position: absolute; top: 8px; right: 8px; min-width: 22px; height: 22px; padding: 0 8px; border-radius: 999px; background: #c0392b; color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; box-shadow: 0 2px 6px rgba(192,57,43,0.35); }
.pipeline-board-stage.is-empty .stage-count { color: #b8b3a4; }
.pipeline-board-stage.is-empty .stage-bar > span { background: #ddd; }

/* Trial & shipping phase — grouped separately from core production */
.trial-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 14px; }
.trial-board-group { background: #faf7f0; border: 1px solid #ece7dd; border-radius: 14px; padding: 14px 16px; }
.trial-board-group > h4 { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: #6b6453; letter-spacing: 0.03em; text-transform: uppercase; }
.trial-board-group .pipeline-board { margin-top: 10px; }

/* Admin inbox: new doctor orders awaiting dispatch */
.incoming-orders-section { background: linear-gradient(180deg, #fffaf0, #fff); border: 1px solid #f0d98a; border-radius: 12px; padding: 18px 20px; margin-top: 18px; }
.incoming-orders-section h3 { color: #7a5a00; margin-top: 0; }
.incoming-order { border-left: 4px solid #deac1c; }
.warning-banner { background: #fff5e0; border: 1px solid #e8d88a; color: #7a5a00; padding: 10px 14px; border-radius: 8px; margin: 10px 0; font-size: 13px; }
.warning-banner a { color: #7a5a00; font-weight: 600; }
.next-assignee { font-size: 13px; color: #4a4a4a; margin-top: 6px; padding-top: 8px; border-top: 1px dashed #e8e3d8; }
.text-warning { color: #b54708; font-weight: 600; }

/* Quote summary section */
.quote-summary { background: linear-gradient(180deg, #fff, #fdf8e8); border-color: #deac1c; }
.quote-lines { margin: 14px 0; }
.quote-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px dashed #ece1c2; font-size: 14px; color: #2a2a2a; }
.quote-row:last-child { border-bottom: none; }
.quote-row.quote-info { color: #7a6a3a; font-style: italic; border-bottom: none; padding-bottom: 0; }
/* Preventivo in scheda ordine: stesse righe del form, cornice della card. */
.quote-card { border: 1px solid #deac1c; background: linear-gradient(180deg, #fff, #fdf8e8); }

/* ── Prezzo in cima alla scheda ordine (portale) ── */
.price-card { border: 1px solid #deac1c; background: linear-gradient(180deg, #fffdf6, #fff); }
.price-headline { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.price-label { display: block; font-size: 13px; color: #7a6a3a; text-transform: uppercase; letter-spacing: 0.06em; }
.price-amount { font-size: 32px; font-weight: 700; color: #7a5a00; }
.price-breakdown { font-size: 13px; color: #6b7280; }
.price-changes { margin-top: 18px; padding-top: 14px; border-top: 1px dashed #ece1c2; }
.price-changes h4 { margin: 0 0 10px; font-size: 15px; color: #7a5a00; }
.price-change { padding: 10px 12px; border-left: 3px solid #deac1c; background: #fffaf0; border-radius: 0 8px 8px 0; margin-bottom: 10px; }
.price-change-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.price-change-amount { font-weight: 700; color: #7a5a00; white-space: nowrap; }
.price-change-reason { margin: 4px 0 0; font-size: 14px; color: #4a4a4a; }
.price-change-note { margin: 6px 0 0; font-size: 14px; color: #3a3a3a; background: #fff; border: 1px solid #ece1c2; border-radius: 6px; padding: 8px 10px; }
.price-change .form-hint { margin: 6px 0 0; }
.price-detail-toggle { margin-top: 14px; }
.price-detail-toggle summary { cursor: pointer; font-size: 14px; color: #7a5a00; font-weight: 600; }
.quote-totals { margin-top: 14px; padding-top: 14px; border-top: 2px solid #deac1c; }
.quote-totals .quote-row { font-size: 15px; }
.quote-totals .quote-total { font-size: 18px; color: #1a1a1a; padding-top: 10px; }
.quote-totals .quote-total strong { color: #7a5a00; font-size: 22px; }

/* Home Page */
.home-page { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; }
.home-hero { text-align: center; color: #fff; padding: 40px; }
.home-hero-logo { width: 320px; max-width: 80vw; margin-bottom: 24px; }
.home-hero h1 { font-size: 42px; margin-bottom: 16px; color: #deac1c; font-weight: 200; letter-spacing: 0.02em; }
.home-hero p { font-size: 17px; color: #b8b8b7; margin-bottom: 36px; font-weight: 200; letter-spacing: 0.01em; line-height: 1.6; }
.home-links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.home-links .btn { font-family: 'Manrope', sans-serif; font-weight: 300; letter-spacing: 0.04em; }

/* Auth - Split Screen */
.auth-container { display: flex; min-height: 100vh; flex-direction: row; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; }
.auth-left { flex: 1; background: #000; display: flex; justify-content: center; align-items: center; padding: 40px; }
.auth-left img { max-width: 380px; width: 80%; }
.auth-right { flex: 1; display: flex; justify-content: center; align-items: center; padding: 40px; background: #fff; overflow-y: auto; }
.portal-auth .auth-left { background: #000; }
.login-box { width: 420px; max-width: 100%; }
.register-box { width: 100%; max-width: 560px; }
.login-box h2 { margin-bottom: 10px; color: #1a1a1a; font-size: 28px; font-weight: 300; letter-spacing: 0.01em; }
.login-subtitle { color: #64748b; margin-bottom: 28px; font-size: 14px; font-weight: 300; letter-spacing: 0.02em; }
.auth-right .form-group label { font-weight: 400; letter-spacing: 0.03em; }
.auth-right .btn { font-family: 'Manrope', sans-serif; font-weight: 400; letter-spacing: 0.04em; }
.auth-link { text-align: center; margin-top: 16px; font-size: 14px; font-weight: 300; }
.auth-link a { color: #c94846; font-weight: 500; }

/* Home page: force bold typography on landing screen */
.home-page,
.home-page h1,
.home-page p,
.home-page a,
.home-page .btn,
.home-hero,
.home-hero h1,
.home-hero p,
.home-links .btn { font-weight: 700 !important; letter-spacing: 0.02em; }

/* Auth pages: force bold typography across login and registration */
.auth-container,
.auth-container h1,
.auth-container h2,
.auth-container h3,
.auth-container p,
.auth-container label,
.auth-container input,
.auth-container select,
.auth-container textarea,
.auth-container button,
.auth-container a,
.auth-container span,
.auth-container .btn,
.auth-container .form-group label,
.auth-container .login-subtitle,
.auth-container .auth-link { font-weight: 700 !important; letter-spacing: 0.02em; }

/* Buttons */
.btn { display: inline-block; padding: 10px 18px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; cursor: pointer; background: #fff; color: #374151; transition: all 0.2s; text-decoration: none; touch-action: manipulation; font-weight: 500; }
.btn:hover { background: #f3f4f6; text-decoration: none; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.btn:active { transform: translateY(0); }
.btn-primary { background: linear-gradient(135deg, #c94846 0%, #d45a58 100%); color: #fff; border-color: #c94846; }
.btn-primary:hover { background: linear-gradient(135deg, #b03d3b 0%, #c94846 100%); box-shadow: 0 4px 12px rgba(201, 72, 70, 0.4); }
.btn-success { background: linear-gradient(135deg, #deac1c 0%, #e8bc3a 100%); color: #1a1a1a; border-color: #deac1c; font-weight: 600; }
.btn-success:hover { background: linear-gradient(135deg, #c99b15 0%, #deac1c 100%); box-shadow: 0 4px 12px rgba(222, 172, 28, 0.4); }
.btn-danger { background: linear-gradient(135deg, #c94846 0%, #d45a58 100%); color: #fff; border-color: #c94846; }
.btn-danger:hover { background: linear-gradient(135deg, #b03d3b 0%, #c94846 100%); box-shadow: 0 4px 12px rgba(201, 72, 70, 0.4); }
.btn-outline { background: transparent; border-color: #d1d5db; }
.btn-outline-light { background: transparent; border-color: #deac1c; color: #deac1c; }
.btn-outline-light:hover { background: rgba(222, 172, 28, 0.1); color: #deac1c; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-xs { padding: 3px 9px; font-size: 11px; }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-block { width: 100%; text-align: center; }

/* Generic helpers */
.text-muted { color: #94a3b8; font-weight: 400; }
.req-note { font-size: 12px; font-weight: 600; color: #c94846; }

/* Staff access codes */
.access-code {
  display: inline-block;
  font-family: 'SFMono-Regular', ui-monospace, Menlo, monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #1a1a1a;
  background: #fffbe8;
  border: 1px solid #e8d9a8;
  border-radius: 6px;
  padding: 3px 9px;
}
.access-code-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.actions-cell { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Staff login: access-code field + admin toggle */
.code-input {
  text-transform: uppercase;
  letter-spacing: 4px;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
}
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  color: #94a3b8;
  font-size: 13px;
}
.login-divider::before,
.login-divider::after { content: ''; flex: 1; height: 1px; background: #e5e5e5; }
.admin-login { margin-top: 4px; }
.admin-login > summary {
  cursor: pointer;
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
  list-style: none;
  padding: 6px 0;
}
.admin-login > summary::-webkit-details-marker { display: none; }
.admin-login > summary::before { content: '\25B8'; margin-right: 8px; color: #9a9382; }
.admin-login[open] > summary::before { content: '\25BE'; }
.btn-highlight { border-color: #deac1c; color: #deac1c; animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

/* Forms */
.form-group { margin-bottom: 14px; }
/* Required-field marker + invalid highlight (order form validation) */
.req-star { color: #c94846; font-weight: 700; }
/* Guida: animazione "traccia piede" (contorno che si disegna + mano che lo segue) */
.guide-trace-anim { margin-top: 12px; display: flex; justify-content: center; }
.guide-trace-anim svg { max-width: 130px; height: auto; filter: drop-shadow(0 2px 6px rgba(222,172,28,0.18)); }
.field-invalid { border-color: #c94846 !important; box-shadow: 0 0 0 3px rgba(201,72,70,0.15) !important; background: #fef5f5; }
/* Radio/checkbox groups have no border of their own: mark them with a ring + padding. */
#orderForm .radio-group.field-invalid, #orderForm .checkbox-group.field-invalid { background: transparent !important; box-shadow: 0 0 0 2px rgba(201,72,70,0.6) !important; border-radius: 10px; padding: 6px; }
.form-group label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 14px; color: #374151; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px;
  font-size: 15px; transition: all 0.2s; -webkit-appearance: none; background: #fff;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #deac1c; box-shadow: 0 0 0 3px rgba(222, 172, 28, 0.15); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.form-card { background: #fff; padding: 28px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.04); }
.form-actions { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; padding-top: 20px; border-top: 2px solid #e2e8f0; }
.form-hint { font-size: 13px; color: #64748b; margin-bottom: 12px; font-style: italic; }

/* Inline field help (?) badge + its hover/focus tooltip */
.field-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; margin-left: 5px; border-radius: 50%;
  background: #e2e8f0; color: #475569; font-size: 11px; font-weight: 700;
  font-style: normal; line-height: 1; cursor: help; vertical-align: middle;
  user-select: none; transition: background 0.15s, color 0.15s, transform 0.15s;
  letter-spacing: normal; text-transform: none;
}
.field-help:hover, .field-help:focus { background: #deac1c; color: #fff; outline: none; transform: scale(1.1); }
.field-help:focus-visible { box-shadow: 0 0 0 3px rgba(222,172,28,0.35); }

.field-help-tip {
  position: fixed; top: 0; left: 0; z-index: 2000; width: 260px; max-width: calc(100vw - 16px);
  background: #1f2937; color: #f8fafc; padding: 10px 12px; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28); font-size: 12.5px; line-height: 1.45; font-style: normal;
  opacity: 0; visibility: hidden; transition: opacity 0.12s ease; pointer-events: none;
}
.field-help-tip.visible { opacity: 1; visibility: visible; }
.field-help-tip .fht-what { display: block; }
.field-help-tip .fht-ex { display: block; margin-top: 5px; color: #ffd97a; }
.field-help-tip::after {
  content: ''; position: absolute; top: 100%; left: var(--fht-arrow, 50%); transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #1f2937;
}
.field-help-tip.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #1f2937; }

/* Dashboard intro guide: header trigger + welcome popup */
.section-header-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.intro-guide-trigger {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border: 1px solid #e2c86a; border-radius: 999px; background: #fdf8e8; color: #a07a00;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.18s;
}
.intro-guide-trigger:hover { background: #deac1c; border-color: #deac1c; color: #fff; transform: translateY(-1px); }

/* Guided tour: spotlight strips + highlight ring + mini popover */
/* Il contenitore del tour è figlio diretto di <body>, quindi lo prenderebbe la
   regola generica `body > * { position: relative; z-index: 1 }`: quel z-index
   crea un contesto di impilamento che intrappola strisce, anello e popover
   sotto la navbar (z-index 100). Risultato: la navbar restava illuminata e il
   riquadro sembrava scollegato dalla voce che stava spiegando. Restando
   statico, i figli (tutti position:fixed) competono davvero con la navbar. */
.tour-root { position: static; z-index: auto; }
.tour-strip { position: fixed; background: rgba(20,20,20,0.60); z-index: 9000; }
.tour-ring {
  position: fixed; z-index: 9001; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 3px #deac1c, 0 0 0 9999px rgba(0,0,0,0.001);
  transition: all 0.2s ease;
}
.tour-pop {
  position: fixed; z-index: 9002; width: 300px; max-width: calc(100vw - 16px);
  background: #fff; border-radius: 12px; padding: 16px 18px 14px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.28); animation: modalPopIn 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.tour-pop-arrow { position: absolute; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); }
.tour-pop.pop-below .tour-pop-arrow { top: -7px; box-shadow: -2px -2px 4px rgba(0,0,0,0.04); }
.tour-pop.pop-above .tour-pop-arrow { bottom: -7px; box-shadow: 2px 2px 4px rgba(0,0,0,0.04); }
.tour-pop-title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 6px; }
.tour-pop-body { font-size: 13.5px; color: #4a4a4a; line-height: 1.5; margin: 0 0 14px; }
.tour-again { display: none; align-items: center; gap: 8px; margin: 0 0 12px; padding-top: 10px; border-top: 1px solid #f0eee9; font-size: 13px; color: #4a4a4a; cursor: pointer; }
.tour-again input { width: 15px; height: 15px; accent-color: #b03a34; cursor: pointer; }
.tour-pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tour-nav { display: flex; align-items: center; gap: 10px; }
.tour-count { font-size: 12px; color: #9a958b; font-weight: 600; }
.tour-skip { border: none; background: transparent; color: #9a958b; font-size: 13px; cursor: pointer; padding: 6px 4px; }
.tour-skip:hover { color: #1a1a1a; text-decoration: underline; }
.tour-back { border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 12px; border-radius: 8px; }
.tour-back:hover { border-color: #deac1c; color: #a07a00; }
.tour-next { cursor: pointer; }

/* Esempio mostrato durante la visita guidata su una dashboard ancora vuota
   (public/js/portal-tour-demo.js): il pacco in arrivo e la card ordine sono
   finti. Restano identici a quelli veri — è il loro scopo, farli riconoscere —
   quindi l'unico segno è l'etichetta «esempio» sul bordo, e nulla è cliccabile
   perché dietro quei numeri non c'è ancora niente. */
.tour-demo { position: relative; }
.tour-demo::after {
  content: 'esempio'; position: absolute; top: -9px; right: 12px; padding: 1px 8px;
  background: #fff; border: 1px dashed #cbd5e1; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8;
}
.tour-demo .btn, .tour-demo .pipeline-board-stage { pointer-events: none; }

/* Form Sections with colored borders */
.form-section { border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; margin-bottom: 20px; background: #fff; position: relative; overflow: hidden; scroll-margin-top: 100px; }
html { scroll-behavior: smooth; }
.form-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.form-section legend { font-size: 17px; font-weight: 700; padding: 0 12px; display: flex; align-items: center; gap: 8px; }

/* Section colors - brand palette accents */
.form-section:nth-of-type(1)::before { background: linear-gradient(90deg, #deac1c, #e8bc3a); }
.form-section:nth-of-type(1) legend { color: #a07a00; }
.form-section:nth-of-type(2)::before { background: linear-gradient(90deg, #c94846, #d45a58); }
.form-section:nth-of-type(2) legend { color: #9a3533; }
.form-section:nth-of-type(3)::before { background: linear-gradient(90deg, #cf7336, #db8a52); }
.form-section:nth-of-type(3) legend { color: #a05a28; }
.form-section:nth-of-type(4)::before { background: linear-gradient(90deg, #c16398, #cd7ba8); }
.form-section:nth-of-type(4) legend { color: #964a76; }
.form-section:nth-of-type(5)::before { background: linear-gradient(90deg, #1a1a1a, #3a3a3a); }
.form-section:nth-of-type(5) legend { color: #1a1a1a; }
.form-section:nth-of-type(6)::before { background: linear-gradient(90deg, #deac1c, #cf7336); }
.form-section:nth-of-type(6) legend { color: #a07a00; }

/* Radio & Checkbox Groups */
.radio-group, .checkbox-group { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-label, .checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; padding: 8px 14px; border: 2px solid #e2e8f0; border-radius: 8px; transition: all 0.2s; background: #fff; font-weight: 500; }
.radio-label:hover, .checkbox-label:hover { border-color: #e8bc3a; background: #fdf8e8; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(222,172,28,0.1); }
.radio-label:has(input:checked), .checkbox-label:has(input:checked) { border-color: #deac1c; background: linear-gradient(135deg, #fdf8e8, #faf0d0); color: #7a5a00; box-shadow: 0 2px 8px rgba(222,172,28,0.15); }
.radio-label input[type="radio"], .radio-label input[type="checkbox"],
.checkbox-label input[type="radio"], .checkbox-label input[type="checkbox"] { display: none; }
/* Order form: keep every option box a consistent, full-line width so selections
   line up uniformly, instead of mixing narrow chips with wide full-width boxes.
   Applies to inline groups only; .option-stack already renders full-width rows. */
#orderForm .radio-group:not(.option-stack) > .radio-label,
#orderForm .radio-group:not(.option-stack) > .checkbox-label,
#orderForm .checkbox-group:not(.option-stack) > .radio-label,
#orderForm .checkbox-group:not(.option-stack) > .checkbox-label { flex: 1 1 150px; justify-content: center; text-align: center; }
.sub-options-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sub-label { font-size: 13px; font-weight: 600; color: #475569; margin-right: 8px; }

/* Conditional Fields */
.conditional-field { padding: 14px 18px; background: linear-gradient(135deg, #fdfcf8, #f8f5ef); border-radius: 8px; border: 1px solid #e8e2d4; margin-top: 8px; }
.conditional-inline { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 0 28px; }
.section-disabled { opacity: 0.35; pointer-events: none; filter: grayscale(0.5); }

/* Application Options */
.app-option, .finitura-option { margin-bottom: 10px; padding: 8px; background: #fafaf8; border-radius: 8px; }

/* Stacked option group: full-width cards, one option per line (Applicazioni style) */
.option-stack { flex-direction: column; align-items: stretch; gap: 10px; }
.option-stack > .radio-label,
.option-stack > .checkbox-label { width: 100%; padding: 12px 16px; background: #fafaf8; }

/* Stacked finitura options: each option (card + its conditional fields) full-width per line */
.finitura-stack { flex-direction: column; align-items: stretch; gap: 10px; }
.finitura-stack > .finitura-option { margin-bottom: 0; }
.finitura-stack > .finitura-option > .checkbox-label { width: 100%; }

/* Nested finitura sub-options (Fondo Carrarmato / Tacco Foderato under Fondo preparato) */
.finitura-subgroup { flex-basis: 100%; width: 100%; margin-top: 10px; padding: 8px 0 2px 14px; border-left: 3px solid #e8d9a8; }
.finitura-subgroup > .sub-label { display: block; margin-bottom: 6px; }
.finitura-subgroup .finitura-option { background: #fff; }

/* Dual Foot Grid */
.dual-foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.foot-column { background: linear-gradient(180deg, #fdfcf8, #fff); padding: 18px; border-radius: 10px; border: 2px solid #e8e2d4; }
.foot-column h4 { margin-bottom: 14px; font-size: 14px; color: #1a1a1a; text-align: center; padding: 6px 12px; background: #f8f5ef; border-radius: 6px; }
.foot-column .checkbox-label { font-size: 13px; padding: 5px 10px; margin-bottom: 4px; }

/* Measurements Input Table */
.measurements-input-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.measurements-input-table td { padding: 6px 8px; border-bottom: 1px solid #f5f3ef; }
.measurements-input-table td:first-child { font-weight: 500; color: #475569; font-size: 13px; white-space: nowrap; }
.measurements-input-table input { width: 100%; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; transition: all 0.2s; }
.measurements-input-table input:focus { border-color: #deac1c; box-shadow: 0 0 0 2px rgba(222,172,28,0.15); outline: none; }
.measurements-input-table thead th { padding: 10px 8px; font-size: 12px; text-transform: uppercase; color: #64748b; font-weight: 600; background: #f8f5ef; border-bottom: 2px solid #e8e2d4; }
.measurements-input-table.compact td { padding: 4px 6px; }
.measurements-input-table.compact input { padding: 6px 8px; font-size: 13px; }

/* File Input */
.file-input { padding: 16px; border: 2px dashed #d4c9b0; border-radius: 10px; background: linear-gradient(135deg, #fdfcf8, #f8f5ef); cursor: pointer; transition: all 0.2s; font-size: 14px; }
.file-input:hover { border-color: #deac1c; background: #fdf8e8; }

/* Tables */
.table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.table th, .table td { padding: 10px 12px; text-align: left; font-size: 14px; border-bottom: 1px solid #e5e7eb; }
.table th { background: linear-gradient(180deg, #f8f5ef, #f1ede5); font-weight: 600; color: #475569; font-size: 12px; text-transform: uppercase; }
.table tr:hover { background: #fdfcf8; }
.measurements-table td { font-size: 13px; }
.inactive-row { opacity: 0.5; }

/* Cards */
/* Full-width "line" layout: sections stacked, each row reads left → right. */
.detail-card { background: #fff; padding: 18px 22px; border-radius: 12px; box-shadow: none; margin-bottom: 12px; border: 1px solid #ece7dd; min-width: 0; }
.detail-card h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; letter-spacing: 0.01em; color: #1a1a1a; padding-bottom: 10px; border-bottom: 1px solid #f0ece2; display: flex; align-items: center; gap: 10px; }
.detail-card h3::before { content: ''; width: 4px; height: 17px; border-radius: 999px; background: linear-gradient(180deg, #deac1c, #e8bc3a); flex-shrink: 0; }
.detail-card h3 i { color: #deac1c; font-size: 14px; }
.detail-card h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: #8a8172; font-weight: 700; margin: 12px 0 6px; }
.detail-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 9px 0; border-bottom: 1px solid #f6f2ea; font-size: 14px; line-height: 1.5; color: #2a2a2a; }
.detail-row:last-child { border-bottom: none; }
.detail-row strong { color: #6b6355; font-weight: 600; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }

/* Order detail two-column layout: main content + storico on the right.
   Grid with minmax(0,1fr) hard-constrains the main column so wide content
   (pipeline, tables) scrolls inside it instead of overlapping the sidebar. */
.order-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
/* Scheda senza colonna destra (staff: niente Storico Stato). */
.order-layout-full { grid-template-columns: minmax(0, 1fr); }
.order-main { min-width: 0; }
.order-side { min-width: 0; position: sticky; top: 16px; }
.order-side .section { margin: 0; max-height: calc(100vh - 40px); overflow-y: auto; }
@media (max-width: 992px) {
  .order-layout { grid-template-columns: 1fr; }
  .order-side { position: static; }
  .order-side .section { max-height: none; }
}
.arrival-confirm { margin-top: 14px; padding: 14px 16px; border: 1px solid #cdeed8; background: #f3fbf6; border-radius: 12px; }
.arrival-confirm h4 { margin: 0 0 4px; font-size: 14px; color: #157a3a; display: flex; align-items: center; gap: 8px; }
.detail-list { list-style: none; padding-left: 2px; margin: 6px 0; width: 100%; }
.detail-list li { font-size: 14px; margin: 4px 0; padding-left: 18px; position: relative; }
.detail-list li::before { content: '\2022'; color: #deac1c; position: absolute; left: 2px; font-weight: bold; }

/* Ricerca ordini (board staff) */
.board-search { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; }
.board-search-field { position: relative; flex: 1; min-width: 0; display: flex; }
.board-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9a958b; font-size: 14px; pointer-events: none; }
.board-search-input { width: 100%; padding: 12px 40px 12px 38px; font-size: 14px; color: #1a1a1a; background: #fff; border: 1px solid #ece7dd; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); transition: border-color 0.15s, box-shadow 0.15s; }
.board-search-input:focus { outline: none; border-color: #deac1c; box-shadow: 0 0 0 3px rgba(222,172,28,0.15); }
.board-search-input::-webkit-search-cancel-button { display: none; }
.board-search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: transparent; color: #9a958b; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.board-search-clear:hover { color: #1a1a1a; }
.board-search-count { flex: 0 0 auto; font-size: 13px; color: #9a958b; font-weight: 600; white-space: nowrap; }

/* Interruttori delle impostazioni globali (dashboard admin), sopra le stats */
.settings-switch-bar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.settings-switch { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid #ece7dd; border-radius: 12px; padding: 12px 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); max-width: 100%; }
.settings-switch-text { display: flex; flex-direction: column; gap: 2px; }
.settings-switch-label { font-size: 12px; font-weight: 600; color: #1a1a1a; text-transform: uppercase; letter-spacing: 0.08em; }
.settings-switch-hint { font-size: 12px; color: #8b8578; }
.switch-toggle { flex: 0 0 auto; width: 48px; height: 26px; border-radius: 999px; border: 1px solid #e0dacd; background: #f1ede5; padding: 0; cursor: pointer; position: relative; transition: background 0.2s ease, border-color 0.2s ease; }
.switch-toggle .switch-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.2s ease; }
.switch-toggle.is-on { background: linear-gradient(90deg, #deac1c 0%, #e8bc3a 100%); border-color: #deac1c; }
.switch-toggle.is-on .switch-knob { transform: translateX(22px); }
.switch-toggle:focus-visible { outline: 2px solid #deac1c; outline-offset: 2px; }

/* Stats */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 32px; }
.stat-card { background: #fff; padding: 28px 20px; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); text-align: center; border: 1px solid #ece7dd; transition: all 0.25s ease; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); border-color: #deac1c; }
.stat-card-alert { border-left: 3px solid #deac1c; background: linear-gradient(135deg, #fdf8e8, #fff); }
.stat-number { font-size: 36px; font-weight: 300; color: #1a1a1a; letter-spacing: -0.02em; line-height: 1; }
.stat-label { font-size: 11px; color: #8b8578; margin-top: 10px; text-transform: uppercase; font-weight: 500; letter-spacing: 0.12em; }

/* Order Cards */
.order-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.order-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); overflow: hidden; border: 1px solid #ece7dd; transition: all 0.25s ease; }
.order-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.06); transform: translateY(-2px); border-color: #deac1c; }
.order-card-header { padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f1ede5; background: #fafaf7; }
.order-card-header strong { font-weight: 500; letter-spacing: 0.02em; }
.order-card-body { padding: 16px 18px; }
.order-card-body p { font-size: 14px; margin-bottom: 6px; font-weight: 400; }
.order-card-body p strong { font-weight: 500; color: #4a4a4a; }
.order-card-actions { padding: 14px 18px; border-top: 1px solid #f1ede5; display: flex; gap: 8px; flex-wrap: wrap; background: #fafaf7; }
.order-card-completed { opacity: 0.7; }

/* ── Staff queue hero ── */
.queue-hero { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(135deg, #fff, #fafaf7); border: 1px solid #ece7dd; border-radius: 14px;
  padding: 20px 24px; margin-bottom: 22px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.queue-hero-eyebrow { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #9a8f78; font-weight: 600; }
.queue-hero-title { margin: 2px 0 0; font-size: 26px; font-weight: 600; color: #1a1a1a; }
.queue-hero-stats { display: flex; gap: 12px; }
.queue-stat { min-width: 78px; text-align: center; padding: 10px 14px; border-radius: 10px; background: #f6f3ec; border: 1px solid #ece7dd; }
.queue-stat-num { display: block; font-size: 24px; font-weight: 700; line-height: 1; color: #4a4a4a; }
.queue-stat-lbl { display: block; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: #9a8f78; margin-top: 5px; }
.queue-stat.is-urgent { background: #fdf8e8; border-color: #e8d88a; }
.queue-stat.is-urgent .queue-stat-num { color: #cf7336; }
.queue-stat.is-overdue { background: #fdecec; border-color: #f1a9a7; }
.queue-stat.is-overdue .queue-stat-num { color: #c94846; }

/* ── Coda di postazione: un ordine per riga ──
   Le card affiancate diventavano strette e altissime appena le specifiche di
   lavorazione erano lunghe. In riga l'ordine occupa tutta la larghezza:
   a sinistra chi/cosa, a destra le specifiche su più colonne. */
.work-list { display: flex; flex-direction: column; gap: 12px; }
.work-list .work-card { width: 100%; }
.work-list .order-card-body { display: grid; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); gap: 0 26px; align-items: start; }
.work-list .card-top,
.work-list .card-meta-grid,
.work-list .card-flags { grid-column: 1; }
.work-list .work-specs,
.work-list .card-note,
.work-list .modification-alert,
.work-list .next-assignee { grid-column: 2; }
.work-list .card-meta-grid { border-top: 1px solid #f1ede5; }
.work-list .order-card-actions { justify-content: flex-end; }
/* Card minimale: solo il numero d'ordine e i pulsanti, su una riga sola. */
.work-list .work-card-min { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 16px; padding: 12px 16px; }
.work-card-min .order-card-header { border-bottom: none; padding: 0; margin: 0;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.work-card-min .order-card-header strong { font-size: 16px; font-weight: 700; letter-spacing: 0.01em; }
/* Nome dell'assistito accanto al numero: si legge, ma senza rubare la scena al codice. */
.work-card-patient { font-size: 14px; font-weight: 600; color: #6b6459; }
.work-card-min .order-card-actions { border-top: none; padding: 0; margin: 0; }
/* Sezioni delle specifiche affiancate: la riga resta bassa e leggibile. */
.spec-columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 26px; align-items: start; }
@media (max-width: 900px) {
  .work-list .order-card-body { grid-template-columns: 1fr; }
  .work-list .work-specs,
  .work-list .card-note,
  .work-list .modification-alert,
  .work-list .next-assignee { grid-column: 1; }
}

/* ── Richer work card ── */
.oc-head-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Il numero d'ordine non va spezzato su tre righe: resta intero e, se serve,
   il badge di fase va a capo sotto. */
.work-card .order-card-header { align-items: flex-start; flex-wrap: wrap; row-gap: 6px; }
.work-card .oc-head-left strong { white-space: nowrap; font-size: 15px; font-weight: 700; color: #1a1a1a; }
.work-card .order-card-header .status-badge { flex: 0 0 auto; }
.card-since { font-size: 11px; color: #9a8f78; font-weight: 400; }
.card-top { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.card-thumb { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 1px solid #ece7dd; background: #f6f3ec; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-patient { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.patient-name { font-size: 16px; font-weight: 600; color: #1a1a1a; }
/* Ortopedia sulla card: leggibile anche a colpo d'occhio dentro il gruppo. */
.patient-doc { font-size: 13px; font-weight: 600; color: #7a6a45; }
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tag { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.tag-type { background: #eef2ff; color: #3730a3; }
.tag-prio { background: #fdf8e8; }
.tag-prio.priority-urgent { background: #fecaca; color: #991b1b; }
.tag-prio.priority-high { background: #fdf8e8; color: #cf7336; }
/* Ritiro già accettato (presa visione verso l'ortopedia). */
.tag-ok { background: #dcfce7; color: #166534; }
.due-pill { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; background: #f1f5f9; color: #475569; white-space: nowrap; }
.due-pill.due-soon { background: #fef3c7; color: #92400e; }
.due-pill.due-overdue { background: #fecaca; color: #991b1b; }
.card-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; padding: 12px 0; border-top: 1px solid #f1ede5; }
.meta-item { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.meta-label { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: #9a8f78; font-weight: 600; }
.meta-value { font-size: 14px; color: #2a2a2a; font-weight: 500; word-break: break-word; }
.card-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.flag-chip { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; background: #f0ede6; color: #6b5d3e; border: 1px solid #e3dcc9; }
.card-note { font-size: 13px; color: #555; margin-top: 8px; line-height: 1.45; }
.card-note strong { color: #4a4a4a; }

/* ── Per-stage work specifications ── */
.work-specs { margin-top: 10px; border-top: 1px solid #f1ede5; padding-top: 8px; }
.work-specs > summary { cursor: pointer; list-style: none; font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: #9a8f78; padding: 4px 0; user-select: none; }
.work-specs > summary::-webkit-details-marker { display: none; }
.work-specs > summary::before { content: '▸ '; color: #c4b896; }
.work-specs[open] > summary::before { content: '▾ '; }
/* Quante voci ci sono dietro alle specifiche chiuse: la card in home resta
   corta e si vede comunque che c'è qualcosa da aprire. */
.work-specs > summary .spec-count { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 8px;
  background: #f1ede5; color: #8a8170; font-size: 11px; font-weight: 700; letter-spacing: 0; }
.spec-section { margin-top: 8px; }
.spec-section h5 { font-size: 12px; font-weight: 700; color: #6b5d3e; margin: 0 0 4px; }
.spec-rows { display: flex; flex-direction: column; gap: 3px; }
.spec-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 1.35;
  padding: 3px 0; border-bottom: 1px dashed #f1ede5; }
.spec-row:last-child { border-bottom: none; }
.spec-label { color: #8a8170; flex: 0 0 auto; }
.spec-value { color: #2a2a2a; font-weight: 500; text-align: right; word-break: break-word; }
a.spec-value { color: #b8860b; text-decoration: underline; }

@media (max-width: 480px) {
  .queue-hero { flex-direction: column; align-items: stretch; }
  .queue-hero-stats { justify-content: space-between; }
  .card-meta-grid { grid-template-columns: 1fr; }
}

.feedback-card { border: 2px solid #deac1c !important; background: linear-gradient(135deg, #fdf8e8, #fff); }
.priority-border-high { border-left: 4px solid #deac1c; }
.priority-border-urgent { border-left: 4px solid #c94846; }
.priority-border-normal { border-left: 4px solid transparent; }
.modification-alert { background: linear-gradient(135deg, #fdf8e8, #faf0d0); padding: 12px; border-radius: 8px; margin-top: 8px; font-size: 13px; color: #7a5a00; border: 1px solid #e8d88a; }

/* Percorso modifiche: le fasi che l'admin sceglie in "Modifiche Richieste",
   nell'ordine in cui devono lavorare la calzatura. Una riga per fase. */
.mod-route-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mod-route-row select { flex: 1 1 auto; min-width: 0; }
.mod-route-num { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: #deac1c; color: #1a1a1a; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.mod-route-del { flex: 0 0 auto; padding: 6px 10px; line-height: 1; }
#mod-route-preview { margin-top: 6px; }
/* Avanzamento del percorso: fatte / in corso / ancora da fare */
.mod-route-path { line-height: 2; }
.mod-route-step { padding: 2px 8px; border-radius: 999px; border: 1px solid #e5e7eb; background: #f8fafc; color: #475569; white-space: nowrap; }
.mod-route-step.is-done { text-decoration: line-through; opacity: .6; }
.mod-route-step.is-current { background: #deac1c; border-color: #c99a12; color: #1a1a1a; font-weight: 700; }
.mod-route-next { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; opacity: .85; }

/* Shipment tracking */
.receipt-card { border: 2px solid #2563eb !important; background: linear-gradient(135deg, #eff4ff, #fff); }
.receipt-card input { text-transform: uppercase; letter-spacing: 1px; }
/* Conferma ricezione: una riga per pacco in arrivo (data + campo codice) */
.table-wrap { overflow-x: auto; }
.bulk-receipt-table { min-width: 320px; }
.bulk-receipt-table input { width: 100%; max-width: 220px; letter-spacing: 1px; }
.bulk-receipt-banner { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 24px; }
.tracking-list { display: flex; flex-direction: column; gap: 10px; }
.tracking-item, .shipment-block { border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 14px; }
.shipment-block + .shipment-block { margin-top: 10px; }
.tracking-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tracking-meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: #475569; }
.shipment-block code, .detail-card code { background: #f1f5f9; padding: 2px 8px; border-radius: 6px; font-size: 14px; letter-spacing: 1px; }

/* Order guide */
.guide-steps { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 24px; }
.guide-step { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid #e8e2d4; border-radius: 10px; padding: 16px 18px; }
.guide-step-num { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: #deac1c; color: #1a1a1a; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.guide-step-body h3 { margin: 2px 0 4px; font-size: 16px; }
.guide-step-body p { margin: 0; font-size: 14px; color: #475569; line-height: 1.5; }
.guide-after { margin: 8px 0 0; padding-left: 20px; }
.guide-after li { font-size: 14px; color: #475569; line-height: 1.6; margin-bottom: 6px; }

/* Esempio guidato con un ordine finto: le schermate vere, ferme, numerate.
   `.guide-mock` neutralizza i controlli così l'esempio non sembra cliccabile. */
.guide-demo-steps { list-style: none; counter-reset: gdemo; margin: 12px 0 0; padding: 0; }
.guide-demo-steps > li { position: relative; counter-increment: gdemo; padding-left: 46px; margin-bottom: 26px; }
.guide-demo-steps > li::before {
  content: counter(gdemo); position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 50%; background: #deac1c; color: #1a1a1a;
  font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center;
}
.guide-demo-steps > li h4 { margin: 4px 0 4px; font-size: 15px; }
.guide-demo-steps > li > p { margin: 0 0 10px; font-size: 14px; color: #475569; line-height: 1.6; }
.guide-mock { position: relative; border: 1px dashed #cbd5e1; border-radius: 12px; padding: 14px 16px 16px; background: #f8fafc; }
.guide-mock::after {
  content: 'esempio'; position: absolute; top: -9px; right: 12px; padding: 1px 8px;
  background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8;
}
.guide-mock-title { margin: 0 0 2px; font-size: 16px; border-bottom: none; padding-bottom: 0; }
.guide-mock .detail-card { margin-top: 12px; }
.guide-mock .btn, .guide-mock input { pointer-events: none; }
.guide-mock .pipeline-board-stage { cursor: default; }

/* Status Badges */
.status-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.status-lg { font-size: 16px; padding: 8px 20px; }
.status-ricevuto { background: linear-gradient(135deg, #fdf8e8, #faf0d0); color: #7a5a00; }
.status-presa_misure { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #3730a3; }
.status-modellazione { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.status-assemblaggio { background: linear-gradient(135deg, #fed7aa, #fdba74); color: #9a3412; }
.status-rifinitura { background: linear-gradient(135deg, #fce7f3, #fbcfe8); color: #964a76; }
.status-controllo_qualita { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #3730a3; }
.status-pronto { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; }
.status-spedito { background: linear-gradient(135deg, #cffafe, #a5f3fc); color: #155e75; }
.status-in_prova { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.status-prima_prova { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.status-seconda_prova { background: linear-gradient(135deg, #fed7aa, #fdba74); color: #9a3412; }
.status-finitura_finale { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; }
.status-modifica_richiesta { background: linear-gradient(135deg, #fecaca, #fca5a5); color: #991b1b; }
.status-approvato { background: linear-gradient(135deg, #bbf7d0, #86efac); color: #14532d; }
.status-consegnato { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; }
.status-annullato { background: #f1f5f9; color: #475569; }
/* Badge del portale ortopedico: 3 sole fasi, nessun nome di fase interna. */
.status-doctor-effettuato { background: #f1f5f9; color: #475569; }
.status-doctor-lavorazione { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.status-doctor-consegna { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; }
.status-doctor-annullato { background: #f1f5f9; color: #475569; }

/* New 14-stage production pipeline */
.status-in_sospeso { background: #f1f5f9; color: #475569; }
.status-realizzazione_modello { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.status-controllo_forme { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #3730a3; }
.status-personalizzazione_forme { background: linear-gradient(135deg, #ede9fe, #ddd6fe); color: #5b21b6; }
.status-personalizzate { background: linear-gradient(135deg, #e9d5ff, #d8b4fe); color: #6b21a8; }
.status-taglio { background: linear-gradient(135deg, #fed7aa, #fdba74); color: #9a3412; }
.status-orlatura { background: linear-gradient(135deg, #fde68a, #fcd34d); color: #854d0e; }
.status-montaggio { background: linear-gradient(135deg, #fbcfe8, #f9a8d4); color: #9d174d; }
.status-rientro { background: linear-gradient(135deg, #fecaca, #fca5a5); color: #991b1b; }
.status-finitura { background: linear-gradient(135deg, #ccfbf1, #99f6e4); color: #115e59; }

/* Priority */
.priority-normal { color: #deac1c; }
.priority-high { color: #cf7336; font-weight: 600; }
.priority-urgent { color: #c94846; font-weight: 700; }
.priority-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.priority-tag.priority-high { background: #fdf8e8; }
.priority-tag.priority-urgent { background: #fecaca; }

/* Pipeline */
.pipeline-overview { display: flex; gap: 12px; flex-wrap: wrap; }
.pipeline-stage { display: flex; align-items: center; gap: 6px; }
.pipeline-count { font-weight: 700; font-size: 18px; }
.pipeline-visual { display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 16px 0; flex-wrap: nowrap; }
.pipeline-step { display: flex; flex-direction: column; align-items: center; min-width: 70px; opacity: 0.4; transition: opacity 0.3s; }
.pipeline-step.active { opacity: 1; }
.pipeline-step.done { opacity: 0.7; }
.step-dot { width: 18px; height: 18px; border-radius: 50%; background: #d4c9b0; margin-bottom: 4px; transition: all 0.3s; }
.pipeline-step.active .step-dot { background: linear-gradient(135deg, #deac1c, #e8bc3a); box-shadow: 0 0 0 4px rgba(222, 172, 28, 0.2); }
.pipeline-step.done .step-dot { background: linear-gradient(135deg, #16a34a, #22c55e); }
.step-label { font-size: 10px; text-align: center; color: #64748b; }
.pipeline-step.active .step-label { color: #1a1a1a; font-weight: 600; }

/* Doctor-facing 3-stage flow: bigger icon dots joined by a rounded track */
.pipeline-visual-3 { position: relative; justify-content: space-between; gap: 8px; max-width: 620px; margin: 8px auto; overflow: visible; }
.pipeline-visual-3::before { content: ''; position: absolute; top: 25px; left: 16%; right: 16%; height: 4px; background: #eadfc7; border-radius: 999px; z-index: 0; }
.pipeline-visual-3 .pipeline-step { flex: 1; min-width: 0; position: relative; z-index: 1; opacity: 1; }
.pipeline-visual-3 .step-dot { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; background: #d4c9b0; margin-bottom: 8px; box-shadow: 0 0 0 5px #fff; }
.pipeline-visual-3 .pipeline-step:not(.active):not(.done) .step-dot { color: #fbf7ee; }
.pipeline-visual-3 .step-label { font-size: 13px; line-height: 1.3; color: #64748b; }
.pipeline-visual-3 .pipeline-step.active .step-label { color: #1a1a1a; }
.pipeline-visual-3 .pipeline-step.done .step-label { color: #157a3a; }

/* Timeline */
.timeline { position: relative; padding-left: 24px; }
.timeline-item { position: relative; padding-bottom: 20px; padding-left: 20px; border-left: 2px solid #e8e2d4; }
.timeline-item:last-child { border-left: none; }
.timeline-dot { position: absolute; left: -9px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #d4c9b0; }
.timeline-content { font-size: 14px; }
.timeline-content p { color: #64748b; margin: 2px 0; }
.timeline-content small { color: #94a3b8; }
.timeline-user { color: #64748b; font-size: 13px; margin-left: 8px; }

/* Feedback Section */
.feedback-section { background: linear-gradient(135deg, #fdf8e8, #faf0d0); border: 2px solid #deac1c; border-radius: 12px; padding: 28px; margin-bottom: 24px; }
.feedback-section h3 { color: #7a5a00; margin-bottom: 16px; font-size: 18px; }
.feedback-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.feedback-card { background: #fff; padding: 22px; border-radius: 10px; }
.feedback-card h4 { margin-bottom: 8px; font-size: 16px; }
.feedback-card p { font-size: 13px; color: #64748b; margin-bottom: 12px; }
.approve-card { border: 2px solid #22c55e; }
.modify-card { border: 2px solid #c94846; }

/* Stage complete form */
.stage-complete-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid #e2e8f0; }
.admin-status-override { margin-top: 16px; padding-top: 16px; border-top: 1px solid #e2e8f0; }
.admin-status-override h4 { font-size: 13px; color: #64748b; margin-bottom: 8px; }

/* Search & Filter */
.search-bar, .filter-bar { display: flex; gap: 8px; margin-bottom: 20px; align-items: center; flex-wrap: wrap; }
.search-bar input, .filter-bar input, .filter-bar select { padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; }
.search-bar input, .filter-bar input { flex: 1; min-width: 180px; }

/* Section */
.section { margin-top: 36px; }
.section h3 { font-size: 15px; color: #1a1a1a; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid #ece7dd; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.section-header h2 { font-size: 28px; color: #1a1a1a; font-weight: 300; letter-spacing: -0.01em; }
.status-summary { display: flex; gap: 8px; flex-wrap: wrap; }

/* Alerts */
.alert { padding: 14px 18px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; font-weight: 500; }
.alert-success { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; border: 1px solid #6ee7b7; }
.alert-error { background: linear-gradient(135deg, #fecaca, #fca5a5); color: #991b1b; border: 1px solid #f87171; }

/* Inline Form */
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-form select, .inline-form input { padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; }
.inline { display: inline; }

/* Notifications */
.notification-list { display: flex; flex-direction: column; gap: 8px; }
.notification-item { background: #fff; padding: 16px; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.notification-item.unread { border-left: 3px solid #deac1c; }
.notification-item.read { opacity: 0.7; }
.notification-content p { font-size: 14px; color: #475569; margin: 4px 0; }
.notification-content small { color: #94a3b8; }
.notification-type { font-size: 11px; text-transform: uppercase; font-weight: 600; padding: 2px 6px; border-radius: 4px; margin-right: 6px; }
.type-stage_complete { background: #fdf8e8; color: #7a5a00; }
.type-shipping { background: #cffafe; color: #155e75; }
.type-feedback { background: #fef3c7; color: #92400e; }
.type-modification { background: #fecaca; color: #991b1b; }
.type-approved { background: #d1fae5; color: #065f46; }
.type-internal { background: #e0e7ff; color: #3730a3; }

/* Quote Preview */
.quote-preview { background: #fff; padding: 32px; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.quote-header { text-align: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid #1a1a1a; }
.quote-header h3 { font-size: 24px; }
.quote-customer { margin-bottom: 16px; }
.quote-customer h4 { margin-bottom: 6px; }
.quote-items { margin-bottom: 20px; }
.quote-items h4 { margin-bottom: 10px; }
.quote-totals { text-align: right; padding-top: 16px; border-top: 1px solid #e5e7eb; }
.total-row { padding: 4px 0; font-size: 14px; display: flex; justify-content: flex-end; gap: 24px; }
.total-final { font-size: 18px; font-weight: 700; border-top: 2px solid #1a1a1a; padding-top: 8px; margin-top: 8px; }

/* Role badges */
.role-badge { padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.role-admin { background: #fecaca; color: #991b1b; }
.role-staff { background: #fdf8e8; color: #7a5a00; }

/* Empty state */
.empty-state { text-align: center; padding: 40px 20px; color: #64748b; }

/* Order progress */
.order-progress { background: #fff; padding: 22px; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); margin-bottom: 20px; border: 1px solid #f1ede5; }
.current-status { text-align: center; margin-bottom: 8px; }
/* Fase di lavorazione in corso sotto le 3 fasi (interruttore admin) */
.current-stage-detail { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #ece1c2; text-align: center; font-size: 14px; color: #6b6b6b; }
.current-stage-detail i { margin-right: 6px; color: #deac1c; }
.current-stage-detail strong { color: #1a1a1a; }
.current-stage-label { letter-spacing: 0.02em; }

/* Anteprima immagine a schermo intero (click su foto modello / grafico piede) */
.img-zoom { display: inline-block; cursor: zoom-in; }
.img-lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(15,15,15,0.86); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); cursor: zoom-out; }
.img-lightbox[hidden] { display: none; }
.img-lightbox img { max-width: min(1100px, 94vw); max-height: 82vh; width: auto; height: auto; border-radius: 10px; background: #fff; box-shadow: 0 24px 70px rgba(0,0,0,0.45); cursor: default; }
.img-lightbox-close { position: absolute; top: 16px; right: 20px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35); background: rgba(0,0,0,0.35); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; transition: background 0.15s ease; }
.img-lightbox-close:hover { background: rgba(255,255,255,0.16); }
.img-lightbox-open { color: #fff; font-size: 13px; letter-spacing: 0.04em; text-decoration: underline; cursor: pointer; }
.img-lightbox-open:hover { color: #deac1c; }
/* Allegato non più su disco: al posto dell'icona di immagine rotta (vedi
   js/img-lightbox.js). Deve leggersi come uno stato, non come un errore. */
.img-missing { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px dashed #ddd5c4;
  border-radius: 8px; background: #faf8f3; color: #8a8172; font-size: 13px; font-style: italic; }
.img-missing::before { content: '\f03e'; font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free'; font-weight: 900; font-style: normal; color: #c4bba6; }

/* Tracciato Images */
.tracciato-images { display: flex; gap: 12px; flex-wrap: wrap; }
.tracciato-thumb { width: 150px; height: 150px; object-fit: cover; border-radius: 10px; border: 2px solid #e8e2d4; cursor: pointer; transition: all 0.2s; }
.tracciato-thumb:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

/* PWA Install Banner */
.pwa-install-banner { background: linear-gradient(135deg, #1a1a1a, #2d2d2d); color: #fff; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pwa-install-banner p { font-size: 14px; display: flex; align-items: center; gap: 10px; }
.pwa-install-banner p img { width: 28px; height: 28px; border-radius: 6px; flex: 0 0 auto; }
.pwa-install-banner .btn { border-color: #deac1c; color: #deac1c; }
.pwa-install-banner .btn:hover { background: rgba(222,172,28,0.1); }

/* PWA Install Gate (shown before the login) */
.pwa-gate { position: fixed; inset: 0; z-index: 2000; background: rgba(10,10,10,0.82); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; animation: pwaGateIn 0.25s ease; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; }
.pwa-gate-card { background: #fff; border-radius: 18px; padding: 36px 32px 28px; width: 100%; max-width: 440px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,0.35); margin: auto; }
.pwa-gate-logo { width: 96px; height: 96px; border-radius: 22px; margin: 0 auto 18px; display: block; box-shadow: 0 8px 20px rgba(0,0,0,0.18); }
.pwa-gate-card h2 { font-size: 26px; font-weight: 300; letter-spacing: 0.01em; color: #1a1a1a; margin-bottom: 10px; }
.pwa-gate-text { font-size: 14px; color: #6b6b6b; line-height: 1.6; margin-bottom: 20px; }
.pwa-gate-benefits { list-style: none; text-align: left; margin: 0 auto 24px; display: grid; gap: 10px; max-width: 320px; }
.pwa-gate-benefits li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #333; }
.pwa-gate-benefits i { color: #deac1c; width: 18px; text-align: center; flex: 0 0 auto; }
.pwa-gate-steps { text-align: left; margin: 0 auto 24px; padding-left: 20px; display: grid; gap: 10px; max-width: 320px; font-size: 14px; color: #333; }
.pwa-gate-steps strong { font-weight: 600; }
.pwa-gate-steps i { color: #deac1c; }
.pwa-gate .btn-primary { font-family: inherit; letter-spacing: 0.04em; }
.pwa-gate-skip { background: none; border: none; color: #8b8578; font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.03em; cursor: pointer; padding: 14px 8px 4px; text-decoration: underline; }
.pwa-gate-skip:hover { color: #1a1a1a; }
body.pwa-gate-open { overflow: hidden; }
@keyframes pwaGateIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 480px) {
  .pwa-gate { padding: 16px; }
  .pwa-gate-card { padding: 28px 22px 22px; }
  .pwa-gate-card h2 { font-size: 22px; }
  .pwa-gate-logo { width: 80px; height: 80px; }
}

/* Offline indicator */
.offline-indicator { background: #fdf8e8; color: #7a5a00; padding: 8px 16px; text-align: center; font-size: 13px; font-weight: 600; display: none; }
.offline-indicator.show { display: block; }

/* Print */
@media print {
  .navbar, .no-print, .section-header .btn, .form-actions { display: none !important; }
  .main-content-full { padding: 0; max-width: none; }
  body { background: #fff; }
}

/* Tablet (primary target: 768px - 1024px) */
@media (max-width: 1024px) {
  .main-content-full { padding: 16px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .order-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .detail-grid { grid-template-columns: 1fr; }
  .navbar h1 { font-size: 15px; }
  .pipeline-visual { overflow-x: auto; }
  /* Navbar: si stringe prima di mandare i link a capo. */
  .navbar { padding: 6px 18px; column-gap: 10px; }
  .navbar-right { gap: 10px; }
  .navbar-logo { height: 58px; }
  .dual-foot-grid { grid-template-columns: 1fr; }
  .auth-container { flex-direction: column; }
  .auth-left { min-height: 200px; padding: 30px; flex: none; }
  .auth-left img { max-width: 240px; }
  .auth-right { flex: 1; min-height: auto; }
}

/* Mobile */
@media (max-width: 640px) {
  .navbar { padding: 6px 16px; min-height: 68px; column-gap: 8px; }
  .navbar h1 { font-size: 12px; letter-spacing: 0.12em; }
  .navbar-logo { height: 48px; }
  /* Sotto i 640px il titolo decorativo lascia il posto ai link. */
  .navbar-center { display: none; }
  .navbar-right { gap: 8px; row-gap: 6px; }
  .nav-user { display: none; }
  .main-content-full { padding: 12px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .order-cards { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .table { font-size: 12px; }
  .table th, .table td { padding: 8px; }
  .section-header { flex-direction: column; align-items: flex-start; }
  .feedback-actions { grid-template-columns: 1fr; }
  .login-box { padding: 24px; }
  .btn-lg { padding: 12px 20px; font-size: 15px; }
  .home-hero h1 { font-size: 28px; }
  .home-hero p { font-size: 15px; }
  .radio-group, .checkbox-group { gap: 6px; }
  .radio-label, .checkbox-label { padding: 6px 10px; font-size: 13px; }
  .auth-left { padding: 20px; min-height: 160px; }
  .auth-left img { max-width: 180px; }
  .auth-right { padding: 24px; }
  .catalog-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .catalog-card img { height: 140px; }
  .catalog-categories { gap: 6px; }
  .catalog-cat-btn { padding: 8px 12px; font-size: 13px; }
}

/* ─── Catalogo Modelli ─── */
/* I cataloghi PDF si aprono SOLO dalla finestra del pulsante "Catalogo" in
   cima al nuovo ordine: la fila di pulsanti dentro la sezione B è stata tolta. */
.catalog-doc-ext { opacity: 0.6; }
/* Finestra «Catalogo» (pulsante in alto sul nuovo ordine): elenco completo. */
.catalog-docs-card { max-width: 560px; }
.catalog-docs-list { list-style: none; margin: 0 0 22px; padding: 0; max-height: 50vh; overflow-y: auto; }
.catalog-docs-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #f1ede5; }
.catalog-docs-item:last-child { border-bottom: 0; }
.catalog-docs-open { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: #1a1a1a; transition: background 0.15s ease; }
.catalog-docs-open:hover { background: #fdf8e8; }
.catalog-docs-open i { color: #deac1c; flex: 0 0 auto; }
.catalog-docs-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.catalog-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.catalog-cat-btn {
  background: #fff;
  color: #1a1a1a;
  border: 2px solid #e5e5e5;
  border-radius: 8px;
  padding: 10px 18px;
  font-family: inherit;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.catalog-cat-btn:hover {
  border-color: #1a1a1a;
}
.catalog-cat-btn.active {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}
.catalog-selected-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: #f5f5ef;
  border: 2px solid #c9a227;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
}
.catalog-selected-bar strong {
  color: #1a1a1a;
  font-weight: 600;
}
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  column-gap: 14px;
  row-gap: 28px;
}
.catalog-card {
  background: #fff;
  border: 2px solid #e5e5e5;
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  transition: all 0.15s ease;
  position: relative;
}
.catalog-card:hover {
  border-color: #1a1a1a;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.catalog-card.selected {
  border-color: #c9a227;
  background: #fffbe8;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.2);
}
.catalog-card img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  background: #fafafa;
  display: block;
}
.catalog-card-image-wrap { position: relative; }
.catalog-card-hover-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(20,20,20,0.0) 0%, rgba(20,20,20,0.55) 60%, rgba(20,20,20,0.75) 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.catalog-card-hover-btn span {
  background: #deac1c;
  color: #1a1a1a;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 10px 22px;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.catalog-card:hover .catalog-card-hover-btn,
.catalog-card:focus-visible .catalog-card-hover-btn { opacity: 1; }
@media (hover: none) {
  .catalog-card-hover-btn { opacity: 1; background: linear-gradient(180deg, rgba(20,20,20,0.0) 40%, rgba(20,20,20,0.6) 100%); }
  .catalog-card-hover-btn span { font-size: 12px; padding: 6px 14px; }
}
.catalog-card-body {
  padding: 10px 12px;
  border-top: 1px solid #f0f0f0;
}
.catalog-card-code {
  font-weight: 700;
  font-size: 16px;
  color: #1a1a1a;
}
.catalog-card-cat {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
}
.catalog-card-note {
  font-size: 11px;
  color: #c9a227;
  margin-top: 4px;
  font-weight: 500;
}
.section-disabled {
  opacity: 0.5;
  pointer-events: none;
  position: relative;
}
.section-disabled::after {
  content: "Disattivato — modello dal catalogo selezionato";
  position: absolute;
  top: 12px;
  right: 16px;
  background: #c9a227;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  pointer-events: none;
}

/* ── Contrafforte cards (D. Struttura) ───────────────────────── */
.tracciato-tool { display:flex; flex-wrap:wrap; gap:20px; align-items:flex-start; }
.tracciato-canvas-wrap { position:relative; flex:0 0 auto; width:340px; max-width:100%; border:1px solid #e5e5e5; border-radius:8px; overflow:hidden; background:#fff; }
/* Hand hint over the draggable measure lines: "grabs" a line and drags it up/down
   once, so the user sees the lines are movable. It then rests at the starting
   position as a static affordance. Removed on first drag (JS). */
.tracciato-hand-hint { position:absolute; right:16%; top:34%; font-size:32px; line-height:1; pointer-events:none; z-index:3; animation: tracciatoHandDrag 3.6s ease-in-out 1 both; }
.tracciato-hand-hint .tracciato-hand-emoji { display:inline-block; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35)); animation: tracciatoHandGrab 3.6s ease-in-out 1 both; }
.tracciato-hand-hint.is-hidden { opacity:0; transition: opacity 0.25s ease; }
/* Vertical travel maps to the line band (~35%→70% of the tall canvas). */
@keyframes tracciatoHandDrag {
  0%,8%   { top:34%; }
  20%     { top:34%; }
  55%     { top:68%; }
  67%     { top:68%; }
  100%    { top:34%; }
}
/* Squeeze/press to suggest grabbing the line before dragging. */
@keyframes tracciatoHandGrab {
  0%,14%  { transform:scale(1); }
  20%,64% { transform:scale(0.82); }
  72%,100%{ transform:scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .tracciato-hand-hint, .tracciato-hand-hint .tracciato-hand-emoji { animation: none; top:40%; }
}
.tracciato-canvas-wrap canvas { width:100%; height:auto; touch-action:none; cursor:grab; display:block; }
.tracciato-lines-inputs { flex:1 1 280px; min-width:260px; }
.tracciato-lines-inputs .line-dot { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:middle; }

/* Legend card under the table — fills the space beside the tall foot diagram */
.tracciato-legend { margin-top:18px; padding:16px 18px; background:linear-gradient(135deg,#fdfcf8,#f6f2ea); border:1px solid #e8e2d4; border-radius:12px; }
.tracciato-legend h4 { margin:0 0 12px; font-size:13px; font-weight:700; color:#6b6453; letter-spacing:.04em; text-transform:uppercase; }
.tracciato-legend h4 i { margin-right:7px; color:#c9a227; }
.tracciato-legend-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.tracciato-legend-list li { display:flex; gap:11px; align-items:flex-start; }
.tracciato-legend-list .line-dot { width:13px; height:13px; border-radius:3px; margin:3px 0 0; flex:0 0 auto; }
.tracciato-legend-list strong { display:block; font-size:13px; color:#2a2a2a; margin-bottom:1px; }
.tracciato-legend-list li span:last-child { font-size:12px; color:#6b6453; line-height:1.45; }
.tracciato-legend-tip { margin:14px 0 0; padding-top:12px; border-top:1px dashed #e0d8c6; font-size:12px; color:#8a8270; line-height:1.45; }
.tracciato-legend-tip i { margin-right:6px; color:#c9a227; }

.altezza-tomaia-field { margin-bottom: 14px; }

.contrafforte-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
/* Reference gallery on top of the whole table — image + name for every type */
.contrafforte-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 12px;
  margin: 4px 0 18px;
  padding: 16px;
  background: linear-gradient(135deg, #fdfcf8, #f6f2ea);
  border: 1px solid #e8e2d4;
  border-radius: 12px;
}
.contrafforte-gallery-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}
.contrafforte-gallery-item img,
.contrafforte-gallery-item .contrafforte-card-noimg {
  width: 100%;
  height: 62px;
  border-radius: 8px;
}
.contrafforte-gallery-item img {
  object-fit: contain;
  object-position: center;
  background: #fff;
  border: 1px solid #ece7dd;
  padding: 6px;
}
.contrafforte-gallery-item figcaption {
  font-size: 12px;
  font-weight: 600;
  color: #2a2a2a;
  line-height: 1.25;
}
/* Scheda di laboratorio: i contrafforti SCELTI, una colonna per piede come nel
   modulo d'ordine (sezione D). Al banco si monta la forma che si vede, quindi
   lo schema sta sopra il nome. Il riquadro è già quello della .foot-column: la
   galleria dentro resta nuda, altrimenti sarebbe una cornice dentro l'altra. */
.contrafforte-feet { margin-top: 10px; }
.contrafforte-feet .foot-column { padding: 14px; }
.contrafforte-feet .foot-column h4 { margin-top: 0; }
.contrafforte-feet .detail-row { padding: 0 0 10px; border-bottom: none; }
.contrafforte-feet .contrafforte-gallery {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}
.contrafforte-card-noimg {
  background: linear-gradient(135deg, #f8f5ef, #f0ebdf);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a39d8b;
}
.contrafforte-card-noimg::after {
  content: '\f54b';
  font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 24px;
}
/* The selectable card: checkbox + text only (no image inside) */
.contrafforte-card {
  width: 100%;
  border: 2px solid #e5e5e5;
  border-radius: 10px;
  padding: 10px 12px 10px 40px;
  background: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  position: relative;
  min-height: 0;
}
.contrafforte-card:hover { border-color: #1a1a1a; transform: translateY(-1px); }
/* Hide the raw checkbox; the card itself is the click target */
.contrafforte-card input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
/* Custom check indicator (left, vertically centred) */
.contrafforte-card::after {
  content: '';
  position: absolute;
  top: 50%; left: 12px;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 2px solid #d8d2c4;
  background: #fff;
  transition: all 0.15s ease;
}
.contrafforte-card:has(input:checked) { border-color: #c9a227; background: #fffbe8; box-shadow: 0 0 0 3px rgba(201,162,39,0.15); }
.contrafforte-card:has(input:checked)::after {
  background: #deac1c;
  border-color: #deac1c;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #deac1c;
}
/* Text block: name + detail */
.contrafforte-card-text { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.contrafforte-card-label { font-size: 13px; color: #1a1a1a; font-weight: 600; line-height: 1.3; }
.contrafforte-card-detail { font-size: 11.5px; color: #6b6453; line-height: 1.4; }

/* ── Print styles for preventivo ─────────────────────────────── */
@media print {
  .navbar, .form-actions, .order-type-tabs, .upload-actions, #loadSavedBtn, .btn { display: none !important; }
  body::before { display: none; }
  .dashboard-bg-logo { display: none; }
  .form-card { box-shadow: none; padding: 0; }
  .form-section { page-break-inside: avoid; border: 1px solid #ccc !important; }
  .quote-summary { page-break-before: avoid; }
  input, select, textarea { border: 1px solid #ccc !important; background: #fff !important; }
  a[href]:after { content: ' (' attr(href) ')'; font-size: 10px; color: #555; }
}

/* ── Price-list manager ── */
.pl-grid { display: grid; grid-template-columns: 2fr 1fr 0.8fr 1.5fr auto; gap: 12px; align-items: end; }
.pl-grid .form-group { margin: 0; }
.pl-grid .pl-action { display: flex; align-items: flex-end; }
.pl-table { width: 100%; }
.pl-table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: #9a8f78; }
.pl-table td { vertical-align: middle; padding: 6px 8px; }
.pl-table input[type="text"], .pl-table input[type="number"] { width: 100%; padding: 6px 8px; border: 1px solid #e3dcc9; border-radius: 6px; font-size: 13px; }
.pl-table tr.pl-inactive { opacity: 0.5; }
.pl-move { white-space: nowrap; }
.pl-move .btn { padding: 1px 6px; line-height: 1.2; }
.pl-actions { display: flex; gap: 6px; white-space: nowrap; }
@media (max-width: 700px) {
  .pl-grid { grid-template-columns: 1fr 1fr; }
  .pl-grid .pl-desc, .pl-grid .pl-notes, .pl-grid .pl-action { grid-column: 1 / -1; }
}

.tracciato-misure-title { margin: 16px 0 6px; font-size: 14px; font-weight: 600; }
/* Specifiche di fase: stessa resa delle card del portale ordine (card bianca,
   accento dorato, titoletti di sezione come .detail-card h4). */
.stage-specs-card { background: #fff; }
.stage-spec-section { margin-top: 10px; }
.stage-spec-section + .stage-spec-section { border-top: 1px solid #f0ece2; padding-top: 8px; }
.stage-spec-section h4 { margin: 12px 0 6px; font-size: 12px; font-weight: 700; color: #8a8172; text-transform: uppercase; letter-spacing: 0.04em; }
.line-dot { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:middle; }

/* ── Support / Assistenza messaging ── */
.sospeso-card { border-left: 4px solid #c94846; background: #fdf6f6; }
.sospeso-card h3 { margin-top: 0; }
.sospeso-card p { margin: 8px 0 0; }

.chat { max-width: 760px; margin: 16px auto 0; }
.chat-thread {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 56vh; overflow-y: auto; padding: 16px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
}
.chat-bubble { max-width: 78%; padding: 10px 14px; border-radius: 14px; line-height: 1.4; }
.chat-bubble.mine { align-self: flex-end; background: linear-gradient(135deg, #c94846 0%, #d45a58 100%); color: #fff; border-bottom-right-radius: 4px; }
.chat-bubble.theirs { align-self: flex-start; background: #fff; color: #1a1a1a; border: 1px solid #e2e8f0; border-bottom-left-radius: 4px; }
.chat-meta { font-size: 11px; font-weight: 600; opacity: 0.75; margin-bottom: 3px; }
.chat-body { white-space: pre-wrap; word-break: break-word; }
.chat-time { font-size: 10px; opacity: 0.6; margin-top: 4px; text-align: right; }
.chat-form { display: flex; gap: 10px; align-items: flex-end; margin-top: 12px; }
.chat-form textarea { flex: 1; resize: vertical; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; }

.conversation-list { display: flex; flex-direction: column; gap: 8px; }
.conversation-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  text-decoration: none; color: inherit; transition: box-shadow .15s, border-color .15s;
}
.conversation-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.06); border-color: #cbd5e1; }
.conversation-item.unread { border-color: #c94846; background: #fdf6f6; }
.conversation-main { min-width: 0; }
.conversation-clinic { display: block; font-size: 12px; color: #64748b; }
.conversation-preview { margin: 4px 0 0; color: #475569; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }
.conversation-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.conversation-side small { color: #94a3b8; font-size: 11px; }

/* ── Work-ticket code entry box (campo dashboard) ── */
.code-open-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid #ece7dd; border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
.code-open-box label { font-weight: 600; font-size: 14px; color: #4a4a4a; margin: 0; }
.code-open-box input { flex: 1 1 160px; max-width: 220px; padding: 8px 12px; border: 1px solid #d9d3c6; border-radius: 8px; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 16px; letter-spacing: 0.12em; }
.code-open-box input:focus { outline: none; border-color: #deac1c; box-shadow: 0 0 0 3px rgba(222,172,28,0.15); }

/* ── Admin compact order list (only order number, click to open) ── */
.order-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.order-row { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #ece7dd; border-left-width: 4px; border-radius: 10px; padding: 12px 16px; transition: all 0.15s; }
.order-row:hover { border-color: #deac1c; box-shadow: 0 3px 12px rgba(0,0,0,0.06); transform: translateY(-1px); }
.order-row-main { display: flex; align-items: center; gap: 12px; flex: 1; text-decoration: none; color: inherit; min-width: 0; }
.order-row-num { font-weight: 700; font-size: 16px; letter-spacing: 0.02em; }
.order-row-ortho { font-size: 13px; color: #6b6355; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-row-print { color: #7a5c00; background: #fdf3d0; border-radius: 8px; padding: 6px 10px; text-decoration: none; font-size: 14px; }
.order-row-print:hover { background: #f8e7a8; }

/* ── Work-code chip on the order detail page ── */
.work-code-chip { display: inline-block; margin-left: 10px; font-size: 13px; color: #4a4a4a; }
.work-code-chip code { font-family: "SF Mono", Menlo, Consolas, monospace; font-weight: 700; letter-spacing: 0.1em; background: #f4efe2; padding: 2px 8px; border-radius: 6px; }
/* Codice pacco: distinto dal codice lavorazione, è quello da scrivere sulla spedizione. */
.tracking-code-chip { display: inline-block; margin-left: 10px; font-size: 13px; color: #4a4a4a; }
.tracking-code-chip code { font-family: "SF Mono", Menlo, Consolas, monospace; font-weight: 700; letter-spacing: 0.1em; background: #dbeafe; color: #1e3a8a; padding: 2px 8px; border-radius: 6px; }

/* Quantità: un ordine di più paia non deve passare inosservato in laboratorio. */
.qty-chip { display: inline-block; margin-left: 10px; vertical-align: middle; font-size: 13px; font-weight: 700; color: #7c2d12; background: #fde9c8; border: 1px solid #f0c98a; padding: 2px 10px; border-radius: 999px; }
.detail-row.quantity-highlight { font-weight: 700; }

/* ── Active modification card highlight ── */
.mod-card-active { border: 1px solid #e8d88a; }

/* ── Clickable admin summary stat cards ── */
.stat-card-link { position: relative; text-decoration: none; color: inherit; display: block; transition: transform 0.15s, box-shadow 0.15s; }
.stat-card-link:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.08); }

/* ── Explicit per-stage screen (orders grouped by ortopedico) ── */
.stage-head { margin: 8px 0 20px; }
.stage-head-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.stage-head-title { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; font-size: 24px; }
.stage-head-count { background: #1a1a1a; color: #fff; font-size: 14px; font-weight: 700; border-radius: 999px; padding: 2px 12px; }

.ortho-group { background: #fff; border: 1px solid #ece7dd; border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; }
.ortho-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #f0ece2; }
.ortho-group-name { font-weight: 700; font-size: 16px; color: #1a1a1a; display: flex; align-items: center; gap: 8px; }
.ortho-group-count { font-size: 13px; font-weight: 600; color: #6b6355; white-space: nowrap; }
/* Coda di postazione raggruppata per ortopedia (dashboard staff): stessa card
   bianca delle schermate di fase, con l'accento dorato del resto del sistema. */
.ortho-group-name i { color: #deac1c; font-size: 15px; }
.ortho-group-sub { font-size: 13px; font-weight: 400; color: #8a8172; }
.ortho-group-counts { display: flex; gap: 8px; flex-wrap: wrap; }
.ortho-chip { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  padding: 4px 11px; border-radius: 999px; background: #f6f3ec; border: 1px solid #ece7dd; color: #6b6355; }
/* Urgenti: stessa coppia colore delle priorità alte (.tag-prio.priority-high). */
.ortho-chip.is-urgent { background: #fdf8e8; border-color: #f0c98a; color: #cf7336; }

/* Spedizione: green line around each ortho group */
.ortho-group-ship { border: 2px solid #1f9d4d; box-shadow: 0 2px 12px rgba(31,157,77,0.12); }
.ortho-group-ship .ortho-group-head { border-bottom-color: #cdeed8; }
.ortho-group-ship .ortho-group-name { color: #157a3a; }

.ortho-group-orders { display: flex; flex-direction: column; gap: 8px; }
/* Conferma arrivo del singolo ordine, dentro la riga della fase Rientro. */
.stage-order-confirm { flex: 0 0 auto; white-space: nowrap; }
.stage-order { display: flex; align-items: center; gap: 10px; background: #fbfaf7; border: 1px solid #ece7dd; border-left-width: 4px; border-radius: 10px; padding: 10px 14px; transition: all 0.15s; }
.stage-order:hover { border-color: #deac1c; box-shadow: 0 3px 12px rgba(0,0,0,0.06); }
.stage-order-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-decoration: none; color: inherit; flex-wrap: wrap; }
.stage-order-num { font-weight: 700; font-size: 15px; letter-spacing: 0.02em; }
.stage-order-patient { font-size: 13px; color: #6b6355; }
.stage-order-code { margin-left: auto; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: #4a4a4a; background: #f4efe2; padding: 2px 10px; border-radius: 6px; }
.stage-order-print { color: #7a5c00; background: #fdf3d0; border-radius: 8px; padding: 8px 12px; text-decoration: none; font-size: 15px; flex-shrink: 0; }
.stage-order-print:hover { background: #f8e7a8; }

/* Avviso "ci sono aggiornamenti" per le schermate con moduli aperti, dove il
   refresh automatico farebbe perdere quanto si sta scrivendo. */
.auto-refresh-banner { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 900;
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 999px;
  background: #1f2937; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.25); font-size: 14px; }
.auto-refresh-banner .btn { padding: 4px 12px; }
/* Variante "notifiche in arrivo": stessa barra, accento dorato e campanella. */
.auto-refresh-banner.is-notif { background: #111827; border: 1px solid #deac1c; bottom: 84px; }
.auto-refresh-banner.is-notif i { color: #deac1c; }
.auto-refresh-banner.is-notif .btn { text-decoration: none; }
.auto-refresh-close { background: none; border: none; color: #cbd5e1; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
.auto-refresh-close:hover { color: #fff; }
@media print { .auto-refresh-banner { display: none; } }
/* Indirizzo mancante: il laboratorio deve accorgersene prima di spedire. */
.address-missing { color: #b45309; font-weight: 600; }

/* ── Spedizioni: codici pacco copiabili ── */
.shipment-group { margin-top: 18px; }
.shipment-group h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; color: #7a5a00; }
.shipment-group-count { font-size: 12px; font-weight: 600; color: #6b7280; background: #f3f4f6; border-radius: 999px; padding: 2px 10px; }
.code-copy { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #dbeafe; background: #eff6ff; color: #1e3a8a;
  border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 14px; transition: background .15s, border-color .15s; }
.code-copy:hover { background: #dbeafe; }
.code-copy code { font-family: "SF Mono", Menlo, Consolas, monospace; font-weight: 700; letter-spacing: 0.12em; }
.code-copy.is-copied { background: #d1fae5; border-color: #a7f3d0; color: #065f46; }

/* ── Pacco unico (spedizione in blocco) ──
   Un solo codice per più ordini: le righe della stessa scatola vanno lette come
   un blocco, e il chip lo dichiara a colpo d'occhio. */
.batch-chip { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; vertical-align: middle;
  font-size: 12px; font-weight: 700; color: #1e3a8a; background: #e0e7ff; border: 1px solid #c7d2fe;
  padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.qty-chip-batch { color: #1e3a8a; background: #e0e7ff; border-color: #c7d2fe; }
.batch-row { background: #f8faff; }
.batch-row-first { border-top: 2px solid #c7d2fe; }
.batch-note { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 14px; padding: 12px 14px;
  border-radius: 8px; background: #e0e7ff; border: 1px solid #c7d2fe; color: #1e3a8a; font-size: 14px; }
.batch-meta { display: flex; gap: 24px; flex-wrap: wrap; margin: 4px 0 16px; font-size: 14px; color: #334155; }
.batch-code-lg { font-family: "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.14em; }
.batch-code-link { text-decoration: none; }
.batch-code-link:hover code { background: #dbeafe; color: #1e3a8a; }

/* Selezione degli ordini da mettere nello stesso pacco. */
.bulk-ship-form .col-pick { width: 42px; text-align: center; }
.bulk-ship-form input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; flex: 0 0 auto; }
.bulk-ship-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.bulk-ship-actions .form-hint { margin: 0; }

/* Codice del pacco in testa alla card dell'ortopedia: uno solo per tutta la
   card, copiabile e stampabile come etichetta. */
.ship-card-code { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ship-card-code .form-hint { margin: 0; }
/* Una riga per pacco: la card di un'ortopedia può contenerne più d'uno. */
.ship-card-pkg { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: 1 1 100%; }
.ship-card-pkg + .ship-card-pkg { padding-top: 10px; border-top: 1px dashed #e5e7eb; }
.ship-card-code-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; }
.ship-state { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; font-weight: 700;
  color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.ship-state.is-sent { color: #065f46; background: #d1fae5; border-color: #a7f3d0; }
/* Richiesta di ritiro accettata: la riga resta in elenco, in verde, così si
   vede subito l'esito dell'accettazione (l'ordine è già in Rientro Calzatura). */
.table tr.row-accepted > td { background: #f0fdf4; }
.label-link { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: 6px;
  border: 1px solid #dbeafe; background: #eff6ff; color: #1e3a8a; border-radius: 8px; text-decoration: none; }
.label-link:hover { background: #dbeafe; }

/* Chiusura ordine: azione conclusiva, distinta dai pulsanti di fase. */
.btn-close-order { background: linear-gradient(135deg, #059669, #047857); color: #fff; border: none; }
.btn-close-order:hover { background: linear-gradient(135deg, #047857, #065f46); color: #fff; }
.order-closed-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px;
  background: #d1fae5; color: #065f46; font-weight: 600; font-size: 14px; }