/* ========================================================================
   CONSORTIUM LABEL QUEUE — GRAFICA
   Light Grey / Aqua / Glass Design System
   75% Apple/macOS light · 15% Aqua · 10% glass
   ======================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family: "Geist", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  background: #f5f5f7;
  color: #1a1a1d;
  overflow-x: hidden;
}

.app-container {
  min-height: 100vh;
  position: relative;
  background: #f5f5f7;
}

/* ── Background ───────────────────────────────────────────────────────────── */

.aqua-bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 800px at 30% -20%, rgba(0, 201, 255, 0.04) 0%, transparent 60%),
    radial-gradient(1000px 700px at 70% 110%, rgba(0, 229, 212, 0.03) 0%, transparent 60%),
    radial-gradient(900px 600px at 50% 50%, rgba(123, 70, 255, 0.03) 0%, transparent 50%),
    #f5f5f7;
  overflow: hidden;
  z-index: 0;
}

.gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

.orb-1 {
  width: 520px; height: 520px;
  top: -100px; left: -120px;
  background: radial-gradient(circle, rgba(0, 201, 255, 0.08) 0%, transparent 60%);
  animation: pulse 22s infinite ease-in-out;
  animation-delay: -3s;
}

.orb-2 {
  width: 640px; height: 640px;
  bottom: -140px; right: -160px;
  background: radial-gradient(circle, rgba(123, 70, 255, 0.05) 0%, transparent 60%);
  animation: pulse 26s infinite ease-in-out;
  animation-delay: -5s;
}

.orb-3 {
  width: 400px; height: 400px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 229, 212, 0.06) 0%, transparent 60%);
  animation: pulse 20s infinite ease-in-out;
  animation-delay: -7s;
}

@keyframes pulse {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.25; }
  25% { transform: scale(1.05) translate(-2%, 2%); opacity: 0.3; }
  50% { transform: scale(1.1) translate(1%, -1%); opacity: 0.28; }
  75% { transform: scale(1.05) translate(-1%, 1%); opacity: 0.3; }
}

/* ── Glass Panels ─────────────────────────────────────────────────────────── */

.glass-panel {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.3);
  border-radius: 16px;
}

.glass-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 20px;
  overflow: hidden;
}

.glass-input {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.45);
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.aqua-header {
  position: relative;
  z-index: 2;
  margin: 24px auto 16px;
  max-width: 1400px;
  padding: 16px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-block {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo-bubble {
  width: 36px;
  height: 36px;
  border-radius: 50% 14px 50% 14px;
  background: linear-gradient(135deg, #00c9ff, #00e5d4);
  box-shadow: 0 4px 20px rgba(0, 201, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.6);
  position: relative;
  overflow: hidden;
}

.logo-bubble::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.5) 50%);
  transform: rotate(45deg);
}

/* COLAB icon logo - replaces decorative .logo-bubble */
.logo-icon {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  object-fit: contain;
  box-shadow: 0 6px 24px rgba(0, 201, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
  background: #fff;
  padding: 4px;
}

.header-title {
  font-size: 1.5rem;
  font-weight: 600;
  font-feature-settings: "kern" 1;
  background: linear-gradient(90deg, #00c9ff, #0099cc, #00e5d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
}

.header-subarea {
  font-size: 0.75rem;
  color: #8b8b9a;
  font-weight: 500;
  margin-top: 2px;
  display: block;
}

.header-stats {
  display: flex;
  /* I chip per stato sono tanti quanti i filtri: su CUSTOMER SERVICE coprono
     l'intera catena delle azioni. Senza wrap sfondavano la larghezza
     dell'header su una sola riga. */
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding: 6px 12px;
}

.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-width: 0;
}

.asana-auth-widget {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 5px 8px 5px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #4a4a5a;
}

.asana-auth-user {
  min-width: 0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 600;
}

.asana-auth-widget[data-auth="in"] .asana-auth-user {
  color: #007f73;
}

.asana-auth-widget[data-auth="out"] .asana-auth-user {
  color: #b3261e;
}

.asana-auth-btn {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 14px;
  border: 1px solid rgba(0, 153, 204, 0.22);
  background: rgba(0, 201, 255, 0.10);
  color: #007da8;
  font-family: inherit;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.asana-auth-logout {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.48);
  color: #4a4a5a;
}

.auth-disabled {
  opacity: 0.44 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.3);
}

.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  color: #4a4a5a;
}

.stat-chip .stat-num {
  font-size: 1.05rem;
  font-weight: 600;
}

.stat-top    { color: #b8860b; border-color: rgba(184, 134, 11, 0.3); box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.12); }
.stat-dng    { color: #cc6b6b; border-color: rgba(204, 107, 107, 0.3); box-shadow: 0 0 0 2px rgba(204, 107, 107, 0.12); }
.stat-pl     { color: #0099cc; border-color: rgba(0, 153, 204, 0.3); box-shadow: 0 0 0 2px rgba(0, 153, 204, 0.12); }
.stat-cs     { color: #7b46ff; border-color: rgba(123, 70, 255, 0.3); box-shadow: 0 0 0 2px rgba(123, 70, 255, 0.12); }

/* ── Filter Bar ───────────────────────────────────────────────────────────── */

.filter-bar {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto 20px;
  padding: 14px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-row-state {
  gap: 6px;
}

.filter-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(139, 139, 150, 0.7);
  flex-shrink: 0;
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.search-container {
  margin-left: auto;
  width: 280px;
}

.filter-btn {
  padding: 7px 18px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.4);
  color: #4a4a5a;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.filter-btn:hover {
  background: rgba(255, 255, 255, 0.6);
  color: #1a1a1d;
  border-color: rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.filter-btn.active {
  background: linear-gradient(135deg, rgba(0, 201, 255, 0.12), rgba(123, 70, 255, 0.08));
  color: #0099cc;
  border-color: rgba(0, 201, 255, 0.3);
  box-shadow: 0 0 0 2px rgba(0, 201, 255, 0.12);
}

/* SPEC §15.3 — filtro senza task corrispondenti.
   Resta VISIBILE (l'operatore deve vedere tutte le combinazioni possibili)
   ma non è cliccabile e mostra il conteggio (0) accanto alla label. */
.filter-btn.filter-btn-empty,
.filter-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

.filter-btn.filter-btn-empty:hover,
.filter-btn:disabled:hover {
  background: rgba(255, 255, 255, 0.4);
  color: #4a4a5a;
  border-color: rgba(0, 0, 0, 0.08);
  transform: none;
  box-shadow: none;
}

.search-container {
  position: relative;
  width: 280px;
}

/* Riga inferiore della barra filtri: azioni della pagina a sinistra, ricerca
   a destra. Le azioni prendono lo spazio che avanza, la ricerca resta della
   sua larghezza fissa. */
.filter-bar-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.filter-bar-actions:empty {
  display: none;
}

/* Legenda stati (pagina STAMPA): testo di servizio sotto la barra filtri.
   Chiusa di default (`details`): una sola riga cliccabile invece di un muro
   di paragrafo fra header e lista. Stesso vetro degli altri pannelli.
   Nascosta per ora: togliere il `display: none` per farla ricomparire. */
.filter-explain {
  display: none;
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 12px auto 0;
  padding: 0 20px;
  font-size: 0.8rem;
  color: rgba(60, 60, 70, 0.75);
}

.filter-explain-summary {
  display: inline-block;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(120, 140, 160, 0.25);
  font-weight: 600;
}

.filter-explain-body {
  margin-top: 8px;
  line-height: 1.5;
}

/* CARICA NUOVI CODICI: azione che crea task, quindi volutamente forte. Rosso,
   con bordo pieno: non deve confondersi con un filtro né con un'azione
   distruttiva, che in questa pagina non esistono. */
.btn-npd-import {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 14px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(180deg, #d64545 0%, #b93232 100%);
  border: 1px solid #a32b2b;
  box-shadow: 0 2px 8px rgba(180, 45, 45, 0.28);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn-npd-import:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: 0 4px 14px rgba(180, 45, 45, 0.36);
  transform: translateY(-1px);
}

.btn-npd-import:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(180, 45, 45, 0.3);
}

.btn-npd-import:focus-visible {
  outline: 2px solid #d64545;
  outline-offset: 2px;
}

.btn-npd-import:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.search-field {
  width: 100%;
  padding: 9px 14px 9px 38px;
  border-radius: 14px;
  color: #1a1a1d;
  font-size: 0.85rem;
  outline: none;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.2s;
}

.search-field::placeholder {
  color: rgba(139, 139, 150, 0.5);
}

.search-field:focus {
  border-color: rgba(0, 201, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(0, 201, 255, 0.12);
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(139, 139, 150, 0.5);
  font-size: 0.95rem;
  pointer-events: none;
}

/* ── Task Grid ────────────────────────────────────────────────────────────── */

.task-grid {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 0 20px;
}

.loading-skeleton {
  width: 100%;
  padding: 40px;
  text-align: center;
}

.loading-text {
  font-size: 0.9rem;
  color: rgba(139, 139, 150, 0.6);
}

.empty-state {
  text-align: center;
  padding: 40px;
  color: rgba(139, 139, 150, 0.6);
  font-size: 0.9rem;
}

.error-msg {
  color: #cc6b6b;
  font-size: 0.9rem;
  text-align: center;
  padding: 40px;
}

/* ── Task Card ────────────────────────────────────────────────────────────── */

.task-card {
  display: flex;
  gap: 0;
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.task-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(0, 201, 255, 0.08) 0%,
    rgba(123, 70, 255, 0.05) 50%,
    rgba(0, 229, 212, 0.05) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

.task-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

/* ── Card Preview (60-65% ET/PDF) ─────────────────────────────────────────── */

.card-preview {
  flex: 0 0 63%;
  max-width: 63%;
  position: relative;
  z-index: 1;
  background: #f0f0f3;
  border-right: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.preview-frame {
  width: 100%;
  height: 100%;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  position: relative;
}

.preview-thumbnail {
  max-width: 100%;
  max-height: 340px;
  width: auto;
  height: auto;
  border-radius: 8px;
  object-fit: contain;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.3s;
  background: #ffffff;
}

.preview-thumbnail:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgba(0, 201, 255, 0.15);
}

.preview-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.04));
  padding: 8px 12px;
  opacity: 0;
  transition: opacity 0.2s;
}

.preview-frame:hover .preview-overlay {
  opacity: 1;
}

.preview-hint {
  font-size: 0.7rem;
  color: #8b8b9a;
}

.preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #8b8b9a;
}

.placeholder-icon {
  font-size: 2.5rem;
  opacity: 0.5;
}

.placeholder-text {
  font-size: 0.8rem;
}

/* ── PDF Preview (interactive, read-only) ───────────────────────────────────── */

.pdf-preview-container {
  width: 100%;
  height: 100%;
  min-height: 280px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: #f9f9fb;
}

.pdf-preview-toolbar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.pdf-preview-btn {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.4);
  color: #2a2a32;
  font-size: 11px;
  font-weight: 600;
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pdf-preview-btn:hover {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 201, 255, 0.3);
  color: #0099cc;
  transform: translateY(-1px);
}

.pdf-preview-zoom-label {
  font-size: 10px;
  font-weight: 700;
  font-family: "Geist Mono", monospace;
  color: #2a2a32;
  min-width: 36px;
  text-align: center;
  padding: 0 2px;
}

.pdf-fs-trigger {
  margin-left: 2px;
  color: #0099cc;
  font-size: 12px;
}

.pdf-preview-viewport {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  padding: 8px;
}

.pdf-preview-canvas-wrapper {
  display: none;
  position: relative;
  overflow: visible;
}

.pdf-preview-canvas {
  display: block;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  cursor: grab;
  max-width: 100%;
}

.pdf-preview-canvas-wrapper:active .pdf-preview-canvas,
.pdf-preview-canvas-wrapper.dragging .pdf-preview-canvas {
  cursor: grabbing;
}

.pdf-preview-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #8b8b9a;
  font-weight: 500;
}

.pdf-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0, 201, 255, 0.3);
  border-top-color: #0099cc;
  border-radius: 50%;
  animation: pdfSpin 0.8s linear infinite;
}

@keyframes pdfSpin {
  to { transform: rotate(360deg); }
}

.pdf-preview-error {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #cc6b6b;
  font-weight: 500;
  background: rgba(204, 107, 107, 0.04);
  border-radius: 8px;
  border: 1px solid rgba(204, 107, 107, 0.12);
}

.pdf-preview-error .pdf-error-msg {
  font-size: 0.8rem;
  color: #cc6b6b;
}

.pdf-open-link {
  margin-top: 6px;
  padding: 5px 14px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #0099cc;
  border: 1px solid rgba(0, 201, 255, 0.3);
  border-radius: 6px;
  background: rgba(0, 201, 255, 0.06);
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: all 0.15s;
}

.pdf-open-link:hover {
  background: rgba(0, 201, 255, 0.12);
  border-color: rgba(0, 201, 255, 0.5);
  box-shadow: 0 2px 8px rgba(0, 201, 255, 0.12);
}

/* ── PDF Fullscreen Overlay ──────────────────────────────────────────────────── */

.pdf-fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  flex-direction: column;
  background: #f5f5f7;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
}

.pdf-fullscreen-overlay[hidden] {
  display: none;
}

.pdf-fullscreen-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10003;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.5);
  color: #2a2a32;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.2s;
}

.pdf-fullscreen-close:hover {
  background: rgba(255, 255, 255, 0.7);
  color: #1a1a1d;
  border-color: rgba(0, 0, 0, 0.14);
  transform: scale(1.05);
}

.pdf-fullscreen-toolbar {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10003;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.pdf-fs-zoom-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.4);
  color: #2a2a32;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.15s;
}

.pdf-fs-zoom-btn:hover {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 201, 255, 0.3);
  color: #0099cc;
  transform: translateY(-1px);
}

.pdf-fs-zoom-label {
  font-size: 11px;
  font-weight: 700;
  font-family: "Geist Mono", monospace;
  color: #2a2a32;
  min-width: 44px;
  text-align: center;
  padding: 0 4px;
}

/* Pulsante download nel toolbar dell'overlay fullscreen */
.pdf-fs-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: 4px;
  border: 1px solid rgba(0, 201, 255, 0.35);
  border-radius: 8px;
  background: rgba(0, 201, 255, 0.12);
  color: #0099cc;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.pdf-fs-download-btn:hover {
  background: rgba(0, 201, 255, 0.22);
  border-color: rgba(0, 201, 255, 0.6);
  box-shadow: 0 4px 12px rgba(0, 201, 255, 0.18);
}

.pdf-fs-download-btn:active {
  transform: translateY(1px);
}

/* Stesso bottone nella toolbar della card (anteprima piccola) */
.pdf-preview-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(0, 201, 255, 0.35);
  border-radius: 6px;
  background: rgba(0, 201, 255, 0.12);
  color: #0099cc;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.pdf-preview-download-btn:hover {
  background: rgba(0, 201, 255, 0.22);
  border-color: rgba(0, 201, 255, 0.6);
}

.pdf-fullscreen-viewport {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  padding: 16px;
}

.pdf-fullscreen-canvas-wrapper {
  display: none;
  position: relative;
  overflow: visible;
  cursor: grab;
}

.pdf-fullscreen-canvas-wrapper.dragging {
  cursor: grabbing;
}

.pdf-fullscreen-canvas {
  display: block;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  /* NOTA: qui NON deve esserci `max-width: 100%`.
     In overlay il pan avviene via `transform` sul wrapper, quindi il canvas
     deve poter superare la larghezza del viewport: con max-width veniva
     ricondotto alla larghezza disponibile e lo zoom non produceva alcun
     cambiamento visivo (il label si aggiornava, l'immagine no).
     Il clamp morbido è assicurato dal pan/orizzontale del viewport. */
}

.pdf-fullscreen-loading {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: #8b8b9a;
  font-weight: 500;
}

.pdf-fullscreen-error {
  position: absolute;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: #cc6b6b;
}

.pdf-fs-open-link {
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #0099cc;
  border: 1px solid rgba(0, 201, 255, 0.3);
  border-radius: 6px;
  background: rgba(0, 201, 255, 0.06);
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.pdf-fs-open-link:hover {
  background: rgba(0, 201, 255, 0.12);
}

.card-info {
  flex: 1;
  min-width: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 1;
}

.card-header-row {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.priorita-top        { background: rgba(255, 215, 0, 0.15); color: #b8860b; border-color: rgba(255, 215, 0, 0.4); }
.priorita-medium     { background: rgba(255, 165, 0, 0.15); color: #cc7a00; border-color: rgba(255, 165, 0, 0.4); }
.priorita-low        { background: rgba(100, 149, 237, 0.12); color: #6495ed; border-color: rgba(100, 149, 237, 0.4); }
.priorita-in-ritardo { background: rgba(204, 107, 107, 0.15); color: #cc6b6b; border-color: rgba(204, 107, 107, 0.4); }

.type-badge {
  background: rgba(0, 229, 212, 0.1);
  color: #007a8a;
  border-color: rgba(0, 229, 212, 0.35);
  font-weight: 600;
}

/* Unified badge font: all badge-like elements use the same font family
   (Geist sans-serif) to avoid mixing with Geist Mono */
.badge,
.type-badge,
.source-badge,
.cons-stat-badge,
.cs-badge,
.quality-mode-badge,
.stat-chip,
.stat-chip .stat-num,
.filter-btn,
.filter-label,
.meta-label,
.meta-value,
.action-note,
.verifica-label,
.verifica-status,
.placeholder-text,
.btn,
.btn-primary,
.btn-secondary,
.modal-confirm-btn,
.modal-cancel-btn,
.modal-close {
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.card-meta {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meta-label {
  font-size: 0.65rem;
  color: rgba(139, 139, 150, 0.7);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.meta-value {
  font-family: "Geist Mono", monospace;
  font-size: 0.85rem;
  color: #2a2a32;
  font-weight: 400;
  word-break: break-word;
}

.art-value {
  font-family: "Geist Mono", monospace;
  font-weight: 600;
  color: #0099cc;
}

.card-meta .meta-item:nth-child(1) .meta-value {
  font-family: "Geist Mono", monospace;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.card-meta .meta-item:nth-child(4) .meta-value,
.card-meta .meta-item:nth-child(5) .meta-value,
.card-meta .meta-item:nth-child(6) .meta-value {
  font-family: "Geist Mono", monospace;
}
.card-meta .meta-item:nth-child(4) .meta-value,
.card-meta .meta-item:nth-child(5) .meta-value {
  font-weight: 500;
}
.card-meta .meta-item:nth-child(6) .meta-value {
  font-weight: 600;
}
.card-meta .meta-item:nth-child(7) .meta-value,
.card-meta .meta-item:nth-child(8) .meta-value {
  font-family: "Geist Mono", monospace;
}
.card-meta .meta-item:nth-child(7) .meta-value {
  font-weight: 600;
  color: #2a2a32;
}
.card-meta .meta-item:nth-child(8) .meta-value {
  font-weight: 500;
  color: #8b8b9a;
}

.card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* CS / CONSORZIO / STAMPA: le coppie di pulsanti (BOZZA APPROVATA +
   BOZZA RESPINTA, CLIENTE APPROVA + CLIENTE RESPIGI) erano troppo attaccate
   con il gap base da 8px, mentre le righe della lista sopra ne hanno ~29px.
   Portati a 12px: stacco leggibile senza allungare troppo la card. */
.cs-card .card-actions,
.consorzio-card .card-actions,
.stampa-card .card-actions {
  gap: 12px;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  color: #2a2a32;
}

.action-btn:hover {
  transform: translateY(-1px);
}

.action-btn:disabled,
.action-btn[aria-busy="true"] {
  opacity: 0.5;
  cursor: wait;
  transform: none;
  box-shadow: none;
}

.action-icon {
  font-size: 0.9rem;
}

.action-upload {
  border-color: rgba(255, 165, 0, 0.3);
  background: rgba(255, 165, 0, 0.1);
  color: #cc7a00;
}

.action-upload:hover {
  background: rgba(255, 165, 0, 0.15);
  border-color: rgba(255, 165, 0, 0.5);
  box-shadow: 0 4px 16px rgba(255, 165, 0, 0.12);
}

.action-annotate {
  border-color: rgba(255, 165, 0, 0.3);
  background: rgba(255, 165, 0, 0.1);
  color: #cc7a00;
}

.action-annotate:hover {
  background: rgba(255, 165, 0, 0.15);
  border-color: rgba(255, 165, 0, 0.5);
  box-shadow: 0 4px 16px rgba(255, 165, 0, 0.12);
}

/* CARICA APPROVAZIONE (CONSORZIO) — stesso aspetto delle altre azioni di
   caricamento file: l'icona ⬆ è il segnale condiviso. */
.action-approvazione {
  border-color: rgba(255, 165, 0, 0.3);
  background: rgba(255, 165, 0, 0.1);
  color: #cc7a00;
}

.action-approvazione:hover:not(:disabled) {
  background: rgba(255, 165, 0, 0.15);
  border-color: rgba(255, 165, 0, 0.5);
  box-shadow: 0 4px 16px rgba(255, 165, 0, 0.12);
}

/* Verdetto CONSORZIO in card: bottone d'azione in cima a `.card-actions`
   (colonna di destra, sopra i pulsanti), mai sul viewer. Il colore segue il
   VERDETTO su classi dedicate: `verdetto-ok` (verde, approvata),
   `verdetto-ko` (rosso, bocciata), `verdetto-attesa` (neutro, esito caricato
   ma verdetto non ancora dato). Riusare `action-approvata` / `action-respinta`
   legava il download alle azioni mutative della pagina CONSORZIO e il click
   apriva il popup di conferma invece di scaricare.
   Il click scarica e basta: nessuna azione sulla task. */
.consorzio-approvazione-btn {
  width: 100%;
  justify-content: center;
}

.unsupported-type-msg {
  font-size: 0.75rem;
  color: #cc6b6b;
  font-weight: 600;
  padding: 8px 12px;
  background: rgba(204, 107, 107, 0.08);
  border-radius: 8px;
  border: 1px solid rgba(204, 107, 107, 0.2);
}

/* ── Verifica Iniziale block ──────────────────────────────────────────────── */

.verifica-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.verifica-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.verifica-label {
  font-size: 0.65rem;
  color: rgba(139, 139, 150, 0.7);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.verifica-status {
  font-size: 0.9rem;
  font-weight: 600;
  color: #0099cc;
}

.verifica-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* CONFORME è un'approvazione: il verde (bordo, sfondo, testo) arriva dal gruppo
   `.action-approvata`, qui resta solo la larghezza. Prima la regola dichiarava
   bordo e sfondo verdi ma non `color:`, quindi il pulsante sembrava verde da
   spento e aveva il testo neutro di `.action-btn`: il colore che l'operatore
   legge era proprio quello che mancava. */
.action-conforme {
  flex: 1;
}

.action-da-modificare {
  flex: 1;
  border-color: rgba(255, 165, 0, 0.3);
  background: rgba(255, 165, 0, 0.1);
  /* Anche il testo: senza `color:` il bottone era ambra solo nel bordo e aveva
     il testo neutro di `.action-btn`. */
  color: #cc7a00;
}

.action-da-modificare:hover:not(:disabled) {
  background: rgba(255, 165, 0, 0.15);
  border-color: rgba(255, 165, 0, 0.5);
  box-shadow: 0 4px 16px rgba(255, 165, 0, 0.12);
}

/* ── Esterno actions ──────────────────────────────────────────────────────── */

.esterno-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.action-seconda-verifica-approve {
  border-color: rgba(46, 204, 113, 0.3);
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.1), rgba(46, 204, 113, 0.05));
  color: #2e7d32;
}

.action-seconda-verifica-approve:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.15), rgba(46, 204, 113, 0.1));
  border-color: rgba(46, 204, 113, 0.5);
  box-shadow: 0 4px 16px rgba(46, 204, 113, 0.12);
}

.action-seconda-verifica-revisione {
  border-color: rgba(255, 165, 0, 0.3);
  background: rgba(255, 165, 0, 0.1);
  color: #cc7a00;
}

.action-seconda-verifica-revisione:hover:not(:disabled) {
  background: rgba(255, 165, 0, 0.15);
  border-color: rgba(255, 165, 0, 0.5);
  box-shadow: 0 4px 16px rgba(255, 165, 0, 0.12);
}

.action-invia {
  border-color: rgba(255, 165, 0, 0.3);
  background: rgba(255, 165, 0, 0.1);
  color: #cc7a00;
}

.action-invia:hover:not(:disabled) {
  background: rgba(255, 165, 0, 0.15);
  border-color: rgba(255, 165, 0, 0.5);
  box-shadow: 0 4px 16px rgba(255, 165, 0, 0.12);
}

/* VERDE = APPROVA. Un solo gruppo per tutte le azioni che danno l'ok, così il
   colore non può dipendere dal workspace: ogni pulsante che approva è verde, in
   tutte le pagine. `action-all-ok` (GRAFICA, chiusura VERIFICA FINALE) e
   `action-stampa-approva` (CS, PROVA COLORE APPROVATA) erano i due che non
   avevano regola: senza ereditavano il neutro di `.action-btn`, quindi gli unici
   due pulsanti che chiudono davvero un ciclo erano gli unici non verdi.
   Aggiungerli qui e non in una regola propria è il punto: una regola dedicata
   può essere dimenticata, il gruppo no. */
/* ── Palette dei pulsanti d'azione: TRE colori, per TIPO ──────────────────────
 *
 *   VERDE  = approvo  (approvazione, conformità, ALL OK, verdetto positivo)
 *   ROSSO  = respingo (respinta, bocciatura, verdetto negativo)
 *   AMBRA  = tutto il resto (spedisco, carico, chiedo, invio, nuovo giro)
 *
 * La regola è sul *tipo* di azione, non sull'area: un bottone che chiede il
 * cromalin al tipografo è ambra anche se sta sulla stessa card di una che aspetta
 * l'approvazione, perché non approva niente. Non esistono altri colori: ciano e
 * viola distinguevano "invio" e "flusso speciale", ma all'operatore non dicevano
 * niente di diverso dall'ambra — dividevano solo in tre le azioni non
 * approvative e indebolivano il verde, che è l'unico colore che deve dire "ok".
 *
 * I membri di ogni gruppo sono elencati per nome: una classe nuova non entra in
 * nessun gruppo finché non viene aggiunta, e `test_action_button_css.py` lo
 * segnala. Le azioni di chiusura di ciclo (ALL OK, CONFORME, PROVA COLORE
 * APPROVATA) stanno nel gruppo e non in regole dedicate: una regola propria si
 * dimentica, il gruppo no. */

.action-approvata,
.action-all-ok,
.action-conforme,
.action-stampa-approva,
.action-stampa-cromalin-approva,
.action-stampa-ok,
.action-approva-cliente,
.action-seconda-verifica-approve,
.verdetto-ok {
  border-color: rgba(46, 204, 113, 0.3);
  background: rgba(46, 204, 113, 0.1);
  color: #2e7d32;
}

.action-approvata:hover:not(:disabled),
.action-all-ok:hover:not(:disabled),
.action-conforme:hover:not(:disabled),
.action-stampa-approva:hover:not(:disabled),
.action-stampa-cromalin-approva:hover:not(:disabled),
.action-stampa-ok:hover:not(:disabled),
.action-approva-cliente:hover:not(:disabled),
.action-seconda-verifica-approve:hover:not(:disabled),
.verdetto-ok:hover:not(:disabled) {
  background: rgba(46, 204, 113, 0.15);
  border-color: rgba(46, 204, 113, 0.5);
  box-shadow: 0 4px 16px rgba(46, 204, 113, 0.12);
}

.action-respinta,
.action-rifiuta-cliente,
.action-stampa-rifiuta,
.verdetto-ko {
  border-color: rgba(204, 107, 107, 0.3);
  background: rgba(204, 107, 107, 0.1);
  color: #cc6b6b;
}

.action-respinta:hover:not(:disabled),
.action-rifiuta-cliente:hover:not(:disabled),
.action-stampa-rifiuta:hover:not(:disabled),
.verdetto-ko:hover:not(:disabled) {
  background: rgba(204, 107, 107, 0.2);
  border-color: rgba(204, 107, 107, 0.5);
  box-shadow: 0 4px 16px rgba(204, 107, 107, 0.12);
}

/* ESITO CONSORZIO caricato ma verdetto non ancora dato: né approvazione né
   respinta, quindi ambra. */
.verdetto-attesa {
  border-color: rgba(255, 165, 0, 0.3);
  background: rgba(255, 165, 0, 0.1);
  color: #cc7a00;
}

.verdetto-attesa:hover:not(:disabled) {
  background: rgba(255, 165, 0, 0.15);
  border-color: rgba(255, 165, 0, 0.5);
  box-shadow: 0 4px 16px rgba(255, 165, 0, 0.12);
}

.action-flusso-gia-presente {
  border-color: rgba(255, 165, 0, 0.3);
  background: rgba(255, 165, 0, 0.1);
  color: #cc7a00;
}

.action-flusso-gia-presente:hover:not(:disabled) {
  background: rgba(255, 165, 0, 0.15);
  border-color: rgba(255, 165, 0, 0.5);
  box-shadow: 0 4px 16px rgba(255, 165, 0, 0.12);
}

/* AGGIORNA CODICE — rosso acceso (#e53935): azione di richiesta di correzione
   assegnata a Gennaro Russo. USCITO dalla trinità verde/rosso/ambra perché
   l'utente ha esplicitamente richiesto "rosso aceso". Il pulsante è una
   richiesta operativa, non una respinta, ma deve attirare l'attenzione. */

.action-aggiungi-codice {
  flex: 1;
  border-color: rgba(229, 57, 53, 0.3);
  background: rgba(229, 57, 53, 0.1);
  color: #e53935;
}

.action-aggiungi-codice:hover:not(:disabled) {
  background: rgba(229, 57, 53, 0.15);
  border-color: rgba(229, 57, 53, 0.5);
  box-shadow: 0 4px 16px rgba(229, 57, 53, 0.12);
}

/* ── CS / CONSORZIO / STAMPA actions ────────────────────────────────────────────
   Stessa palette a tre colori di GRAFICA e QUALITÀ: verde = approvo,
   rosso = respingo, ambra = tutto il resto. Qui le azioni di CS, CONSORZIO e
   STAMPA che non approvano e non respingono. */

.action-manda-consorzio {
  border-color: rgba(255, 165, 0, 0.3);
  background: rgba(255, 165, 0, 0.1);
  color: #cc7a00;
}

.action-manda-consorzio:hover:not(:disabled) {
  background: rgba(255, 165, 0, 0.15);
  border-color: rgba(255, 165, 0, 0.5);
  box-shadow: 0 4px 16px rgba(255, 165, 0, 0.12);
}

.action-invia-cliente {
  border-color: rgba(255, 165, 0, 0.3);
  background: rgba(255, 165, 0, 0.1);
  color: #cc7a00;
}

.action-invia-cliente:hover:not(:disabled) {
  background: rgba(255, 165, 0, 0.15);
  border-color: rgba(255, 165, 0, 0.5);
  box-shadow: 0 4px 16px rgba(255, 165, 0, 0.12);
}

.action-stampa {
  border-color: rgba(255, 165, 0, 0.3);
  background: rgba(255, 165, 0, 0.1);
  color: #cc7a00;
}

.action-stampa:hover:not(:disabled) {
  background: rgba(255, 165, 0, 0.15);
  border-color: rgba(255, 165, 0, 0.5);
  box-shadow: 0 4px 16px rgba(255, 165, 0, 0.12);
}

/* RICHIEDI CROMALIN, RICHIEDI NUOVI CROMALIN, SPEDISCI CROMALIN: sono richieste
   al tipografo o al Cliente, non approvazioni. Stanno sulla stessa card di
   CROMALIN APPROVATI ma non approvano niente, quindi ambra. Il verdetto ha la
   sua classe (`action-stampa-cromalin-approva`, verde) — una sola classe per
   tutte e quattro faceva diventare verdi anche le tre richieste. */
.action-stampa-cromalin {
  border-color: rgba(255, 165, 0, 0.3);
  background: rgba(255, 165, 0, 0.1);
  color: #cc7a00;
}

.action-stampa-cromalin:hover:not(:disabled) {
  background: rgba(255, 165, 0, 0.15);
  border-color: rgba(255, 165, 0, 0.5);
  box-shadow: 0 4px 16px rgba(255, 165, 0, 0.12);
}

.action-stampa-invio {
  border-color: rgba(255, 165, 0, 0.3);
  background: rgba(255, 165, 0, 0.1);
  color: #cc7a00;
}

.action-stampa-invio:hover:not(:disabled) {
  background: rgba(255, 165, 0, 0.15);
  border-color: rgba(255, 165, 0, 0.5);
  box-shadow: 0 4px 16px rgba(255, 165, 0, 0.12);
}

/* CARICA SEPARAZIONE COLORE e SCARICA ED INVIA PROVA COLORE AL CLIENTE: il
   passaggio della prova, ambra come ogni altra azione non approvativa. */
.action-stampa-sep {
  border-color: rgba(255, 165, 0, 0.3);
  background: rgba(255, 165, 0, 0.1);
  color: #cc7a00;
}

.action-stampa-sep:hover:not(:disabled) {
  background: rgba(255, 165, 0, 0.15);
  border-color: rgba(255, 165, 0, 0.5);
  box-shadow: 0 4px 16px rgba(255, 165, 0, 0.12);
}

/* ── CS Card (same glass style as grafica, with row layout) ──────────────────── */

.cs-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  padding: 16px 20px;
}

/* ── CS Badge ────────────────────────────────────────────────────────────────── */

.cs-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cs-badge-new-proof {
  background: rgba(245, 158, 66, 0.2);
  color: #f59e0b;
  border-color: rgba(245, 158, 66, 0.3);
}

/* PRONTO STAMPA — in attesa di INVIA IN STAMPA. */
.cs-badge-stampa {
  background: rgba(46, 204, 113, 0.15);
  color: #2e7d32;
  border-color: rgba(46, 204, 113, 0.3);
}

/* IN ATTESA CLIENTE — il Cliente deve decidere. */
.cs-badge-cliente {
  background: rgba(245, 158, 1, 0.18);
  color: #b45309;
  border-color: rgba(245, 158, 1, 0.35);
}

/* APPROVATA CLIENTE — il Consorzio deve valutare. */
.cs-badge-approvata {
  background: rgba(0, 153, 204, 0.12);
  color: #0099cc;
  border-color: rgba(0, 153, 204, 0.3);
}

/* SPEC §9.1 — stato esecutivi di stampa (solo ESTERNO) */
.cs-badge-esecutivi-ok {
  background: rgba(34, 197, 94, 0.18);
  color: #16a34a;
  border-color: rgba(34, 197, 94, 0.3);
}

.cs-badge-esecutivi-attesa {
  background: rgba(245, 158, 11, 0.18);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.3);
}

/* GESTIONE BOZZE — la bozza non è ancora partita verso il Cliente. */
.cs-badge-bozze {
  background: rgba(56, 189, 248, 0.2);
  color: #0ea5e9;
  border-color: rgba(56, 189, 248, 0.35);
}

/* IN ATTESA CROMALIN — il lavoro è altrove (il tipografo), non c'è azione. */
.cs-badge-attesa {
  background: rgba(139, 139, 150, 0.16);
  color: #8b8b96;
  border-color: rgba(139, 139, 150, 0.3);
}

/* IN MONITORAGGIO — nessuna azione possibile in CUSTOMER SERVICE. */
.cs-badge-monitoraggio {
  background: rgba(139, 139, 150, 0.12);
  color: #9ca3af;
  border-color: rgba(139, 139, 150, 0.22);
}

/* ── STATO della card CS: sempre a sinistra del dettaglio ────────────────────
   Lo stato è la colonna vertebrale della pagina: dice DOVE si trova la task
   nel ciclo e i pulsanti sotto la card dicono cosa fare da lì. Sta in una
   colonna a sé, non tra i badge dell'intestazione, perché è l'informazione
   primary e non va in fila con priorità e tipo. */

.cs-state-rail {
  flex: 0 0 172px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 20px 14px;
  margin-right: 16px;
  border-right: 1px solid rgba(139, 139, 150, 0.18);
}

.cs-state-caption {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(139, 139, 150, 0.7);
}

.cs-state-value {
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
}

.cs-state-group {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(139, 139, 150, 0.75);
}

/* Dettaglio tecnico sotto lo stato (es. esecutivi, RICHIESTE STAMPA): dice
   perché la card è in monitoraggio, così non serve aprire Asana. */
.cs-state-note {
  display: block;
  font-size: 0.64rem;
  line-height: 1.4;
  color: rgba(139, 139, 150, 0.85);
  overflow-wrap: anywhere;
  text-align: left;
  padding-left: 4px;
  border-left: 2px solid rgba(0, 201, 255, 0.2);
  margin-left: -4px;
}

/* Cronologia revisioni: nomi reali dei PDF-bozza, corrente evidenziata.
   Solo colonna STATO; ogni voce scarica il suo file (delega in app.js). */
.cs-history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
}

.cs-history-entry {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cs-history-notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 4px;
}
.cs-history-notes[hidden] {
  display: none;
}

/* Toggle note in stile aqua-glass: pill ciano, maiuscolo spaziato. */
.cs-history-toggle,
.cs-history-toggle-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 201, 255, 0.35);
  background: rgba(0, 201, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #0b6e7f;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.cs-history-toggle-all {
  width: 100%;
  margin-top: 6px;
  font-size: 0.68rem;
  padding: 7px 12px;
}

.cs-history-toggle:hover,
.cs-history-toggle-all:hover {
  transform: translateY(-1px);
  background: rgba(0, 201, 255, 0.15);
  border-color: rgba(0, 201, 255, 0.55);
  box-shadow: 0 4px 16px rgba(0, 201, 255, 0.18);
}

.cs-history-toggle[aria-expanded="true"],
.cs-history-toggle-all[aria-expanded="true"] {
  background: rgba(0, 201, 255, 0.18);
  border-color: rgba(0, 201, 255, 0.6);
  color: #084f5c;
}

.cs-history-item {
  display: block;
  width: 100%;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  color: rgba(60, 60, 70, 0.9);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(139, 139, 150, 0.25);
  border-radius: 8px;
  padding: 4px 8px;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.cs-history-item:hover {
  border-color: rgba(0, 201, 255, 0.5);
}

.cs-history-item.is-current {
  font-weight: 700;
  color: #0b6e7f;
  border-color: rgba(0, 201, 255, 0.45);
  background: rgba(0, 201, 255, 0.08);
}

/* Su schermi stretti la card va a capo: lo stato diventa una riga orizzontale
   sopra il dettaglio invece di una colonna che non ci sta. */
@media (max-width: 1100px) {
  .cs-state-rail {
    flex: 0 0 150px;
  }
}

@media (max-width: 768px) {
  .cs-card { flex-direction: column; }
  .cs-state-rail {
    flex: 1 0 auto;
    width: 100%;
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-right: none;
    border-bottom: 1px solid rgba(139, 139, 150, 0.18);
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* Radio + nota dentro il modale ESECUTIVI */
.cs-esec-field { margin: 10px 0; }
.cs-esec-radio-row { padding: 4px 0; font-size: 0.85rem; }
.cs-esec-nota-input {
  width: 100%;
  margin-top: 6px;
  padding: 7px 9px;
  font-size: 0.82rem;
  font-family: "Geist Mono", monospace;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.7);
}
.cs-esec-nota-input:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.6);
}

.cs-context {
  font-size: 0.75rem;
  color: rgba(148, 163, 184, 0.7);
  margin-top: 4px;
}

.cs-info-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.cs-info-row:last-child { border-bottom: none; }
.cs-info-row strong { color: #2a2a32; font-family: "Geist Mono", monospace; font-weight: 600; }

.cs-filename-predict {
  font-size: 0.75rem;
  color: rgba(148, 163, 184, 0.7);
  font-family: "Geist Mono", monospace;
}

/* ── CS Upload Zone ──────────────────────────────────────────────────────────── */

.cs-upload-zone {
  border: 2px dashed rgba(148, 163, 184, 0.4);
  border-radius: 6px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
}

.cs-upload-zone:hover {
  border-color: rgba(56, 189, 248, 0.6);
  background: rgba(255, 255, 255, 0.4);
}

.cs-upload-zone.dragover {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.05);
}

.cs-upload-icon {
  font-size: 2.5rem;
  opacity: 0.5;
  margin-bottom: 10px;
  color: #8b8b9a;
}

/* ── Modals ───────────────────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

/* Overlay dei modali costruiti da JS: CUSTOMER SERVICE (RICHIESTE STAMPA e
   ESECUTIVI DI STAMPA) e STAMPA (ALL OK). Stesse regole di `.modal-overlay`:
   senza `position: fixed` il dialog finiva in fondo alla pagina invece che
   sopra le card, e i suoi controlli restavano irraggiungibili. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

/* STAMPA dichiara il modale chiuso con l'attributo `hidden`. La regola sopra
   è di autore e quindi vince il `[hidden] { display: none }` del browser:
   senza questo ripristino il dialog sarebbe già aperto al caricamento.
   Lo stile inline che il JS imposta per aprire/chiudere vince comunque. */
.modal-backdrop[hidden] { display: none; }

/* Contenitore del dialog. `position: relative` + z-index per stare sopra
   l'overlay, che è il padre posizionato. */
.modal-shell {
  position: relative;
  z-index: 101;
  width: 90vw;
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  color: #2a2a32;
}

/* Superficie in vetro del dialog. Serve a NEW PROOF (`.modal glass-modal`),
   che senza questa classe aveva il layout ma nessuno sfondo. */
.glass-modal {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  color: #2a2a32;
}

/* I dialog costruiti da JS usano `h2` (NEW PROOF usa `h3`, già stilato). */
.modal-header h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0099cc;
  margin: 0;
}

.modal-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0099cc;
  margin: 0;
}

.modal {
  max-width: 600px;
  width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 20px;
}

.modal-header {
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.modal-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0099cc;
}

.modal-close {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.4);
  color: #8b8b9a;
  font-size: 0.9rem;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.2s;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.6);
  color: #1a1a1d;
  border-color: rgba(0, 0, 0, 0.14);
}

.modal-body {
  padding: 20px;
}

/* Testi dei modali di flusso (es. hint CARICA SEPARAZIONE COLORE in STAMPA):
   stesso font di sistema dei dialog (`.dialog-body`, Geist Mono): senza questa
   regola i `<p>` ereditavano il Geist sans del body e uscivano dal Design System. */
.modal-body p {
  font-family: "Geist Mono", monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #2a2a32;
}

/* Riepiloghi secondari dentro i modali (`.cs-context`): restano piccoli e grigi,
   cambia solo la famiglia — stesso Geist Mono di tutti i messaggi. */
.modal-body .cs-context {
  font-family: "Geist Mono", monospace;
}

.modal-footer {
  padding: 14px 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btn {
  padding: 8px 20px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #2a2a32;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.6);
  color: #1a1a1d;
}

.btn-primary {
  background: linear-gradient(135deg, #00c9ff, #0099cc);
  color: #ffffff;
  border-color: rgba(0, 201, 255, 0.4);
}

.btn-primary:hover:not(:disabled) {
  box-shadow: 0 4px 16px rgba(0, 201, 255, 0.2);
  transform: translateY(-1px);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: wait;
  transform: none;
  box-shadow: none;
}

/* Pulsanti dei dialog costruiti da JS (RICHIESTE STAMPA, ESECUTIVI, ALL OK).
   Stessa grammatica di `.btn-primary` / `.btn-secondary`, con il gradiente
   aqua dell'azione confermante. */
.modal-confirm-btn {
  padding: 9px 20px;
  border-radius: 12px;
  border: 1px solid rgba(0, 201, 255, 0.4);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: all 0.2s;
  color: #ffffff;
  background: linear-gradient(135deg, #00c9ff, #0099cc);
}

.modal-confirm-btn:hover:not(:disabled) {
  box-shadow: 0 4px 16px rgba(0, 201, 255, 0.2);
  transform: translateY(-1px);
}

.modal-confirm-btn:disabled {
  opacity: 0.5;
  cursor: wait;
  transform: none;
  box-shadow: none;
}

.modal-cancel-btn {
  padding: 9px 20px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: all 0.2s;
  color: #2a2a32;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-cancel-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.6);
}

/* I radio dei dialog (RICHIESTE STAMPA, ESECUTIVI) vanno tenuti separati e
   leggibili: dentro il flex del dialog finivano attaccati al testo. */
.modal-body label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.88rem;
  color: #2a2a32;
  cursor: pointer;
}

.modal-body input[type="text"] {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.85rem;
  font-family: "Geist Mono", monospace;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.7);
}

.modal-body input[type="text"]:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.6);
}

.modal-body input[type="file"] {
  display: block;
  width: 100%;
  margin-top: 6px;
  font-size: 0.82rem;
}

.modal-body form {
  margin-top: 4px;
}

.modal-body .modal-confirm-btn,
.modal-body .modal-cancel-btn {
  margin-top: 12px;
  margin-right: 8px;
}

/* ── Drop Zone ────────────────────────────────────────────────────────────── */

.drop-zone {
  border: 2px dashed rgba(0, 0, 0, 0.12);
  border-radius: 16px;
  padding: 36px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
}

.drop-zone.dragover {
  border-color: rgba(0, 201, 255, 0.4);
  background: rgba(0, 201, 255, 0.05);
  box-shadow: 0 0 30px rgba(0, 201, 255, 0.1);
}

.drop-icon {
  font-size: 2.5rem;
  opacity: 0.5;
  margin-bottom: 10px;
  color: #8b8b9a;
}

.drop-text {
  font-size: 0.85rem;
  color: #8b8b9a;
}

/* Bottone esplicito di scelta manuale sotto ogni zona di upload
   (drag-and-drop + SCEGLI FILE ovunque): fratello della zona, centrato. */
.drop-choose-btn {
  display: block;
  margin: 12px auto 0;
}

/* Nome del file scelto, mostrato sotto la zona nei modal senza anteprima
   dedicata (ALL OK, separazione STAMPA, respinta/esecutivi CS). */
.drop-selected {
  margin: 10px 0 0;
  font-family: "Geist Mono", monospace;
  font-size: 0.8rem;
  font-weight: 600;
  color: #2a2a32;
  text-align: center;
  word-break: break-word;
}

.drop-selected[hidden] {
  display: none;
}

/* ── Upload Preview ───────────────────────────────────────────────────────── */

.upload-preview {
  margin-top: 16px;
}

.upload-preview-meta {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 10px;
  margin-bottom: 12px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.preview-file-name { font-size: 0.8rem; color: #2a2a32; font-family: "Geist Mono", monospace; font-weight: 500; }
.preview-file-size { font-size: 0.75rem; color: #8b8b9a; font-family: "Geist Mono", monospace; }

.confirm-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.confirm-row:last-child { border-bottom: none; }
.confirm-row strong { color: #2a2a32; font-family: "Geist Mono", monospace; font-weight: 600; }

/* ── Document Viewer ──────────────────────────────────────────────────────── */

.document-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  background: rgba(245, 245, 247, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.document-viewer-overlay[hidden] {
  display: none;
}

.document-viewer-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10001;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.4);
  color: #2a2a32;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.2s;
}

.document-viewer-close:hover {
  background: rgba(255, 255, 255, 0.6);
  color: #1a1a1d;
  border-color: rgba(0, 0, 0, 0.14);
  transform: scale(1.05);
}

.document-viewer-title {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10001;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #2a2a32;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.document-viewer-frame {
  flex: 1;
  width: 100%;
  border: none;
}

/* ── Toast ────────────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  transform: translateX(400px);
  transition: transform 0.3s;
}

.toast-success {
  background: rgba(46, 204, 113, 0.15);
  color: #2e7d32;
  border-color: rgba(46, 204, 113, 0.3);
}

.toast.show {
  transform: translateX(0);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .task-card { flex-direction: column; }
  .card-preview { max-width: 100%; flex: none; min-height: 200px; }
  .aqua-header { flex-direction: column; gap: 16px; }
  .header-right { width: 100%; align-items: stretch; }
  .asana-auth-widget { justify-content: space-between; }
  .asana-auth-user { max-width: none; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar-bottom { flex-direction: column; align-items: stretch; gap: 10px; }
  .filter-bar-actions { width: 100%; }
  .btn-npd-import { width: 100%; justify-content: center; }
  .search-container { width: 100%; }
  .task-grid { grid-template-columns: 1fr; }
}

/* ── Quality Workspace ──────────────────────────────────────────────────────── */

/* Badge di stato del task. Classe unica condivisa da tutte le workspace
   (GRAFICA, QUALITÀ, CONSORZIO, CS, STAMPA, GESTIONE NPD): ogni card mostra
   priorità + tipo + stato, quindi la riga di intestazione è identica ovunque.
   Il colore arriva dalla classe modificatore `.stat-*`. */
.state-badge,
.quality-mode-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.state-badge.stat-top    { background: rgba(255, 215, 0, 0.15); color: #b8860b; border-color: rgba(255, 215, 0, 0.4); }
.state-badge.stat-dng    { background: rgba(204, 107, 107, 0.15); color: #cc6b6b; border-color: rgba(204, 107, 107, 0.4); }
.state-badge.stat-pl     { background: rgba(0, 153, 204, 0.12); color: #0099cc; border-color: rgba(0, 153, 204, 0.4); }
.state-badge.stat-cs     { background: rgba(100, 149, 237, 0.12); color: #6495ed; border-color: rgba(100, 149, 237, 0.4); }
.state-badge.stat-blocca { background: rgba(204, 107, 107, 0.15); color: #cc6b6b; border-color: rgba(204, 107, 107, 0.4); }
.state-badge.stat-grey   { background: rgba(139, 139, 150, 0.12); color: #5a5a6a; border-color: rgba(139, 139, 150, 0.3); }

.quality-mode-badge.stat-top    { background: rgba(255, 215, 0, 0.15); color: #b8860b; border-color: rgba(255, 215, 0, 0.4); }
.quality-mode-badge.stat-dng    { background: rgba(204, 107, 107, 0.15); color: #cc6b6b; border-color: rgba(204, 107, 107, 0.4); }
.quality-mode-badge.stat-pl     { background: rgba(0, 153, 204, 0.12); color: #0099cc; border-color: rgba(0, 153, 204, 0.4); }
.quality-mode-badge.stat-cs     { background: rgba(100, 149, 237, 0.12); color: #6495ed; border-color: rgba(100, 149, 237, 0.4); }
.quality-mode-badge.stat-blocca { background: rgba(204, 107, 107, 0.15); color: #cc6b6b; border-color: rgba(204, 107, 107, 0.4); }

.quality-mode-badge.stat-grey   { background: rgba(139, 139, 150, 0.12); color: #5a5a6a; border-color: rgba(139, 139, 150, 0.3); }

.quality-filename-predict {
  font-size: 0.78rem;
  font-family: "Geist Mono", monospace;
  font-weight: 500;
  color: #8b8b9a;
  margin-bottom: 8px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  overflow: hidden;
  text-overflow: ellipsis;
  white_space: nowrap;
}

.action-note {
  font-size: 0.78rem;
  color: #8b8b9a;
  font-style: italic;
  text-align: center;
  padding: 8px;
}

.action-note {
  text-align: center;
}

.qa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.qa-btn:hover {
  transform: translateY(-1px);
}

.qa-conforme { border-color: rgba(46, 204, 113, 0.3); background: rgba(46, 204, 113, 0.1); color: #2e7d32; }
.qa-conforme:hover { background: rgba(46, 204, 113, 0.15); border-color: rgba(46, 204, 113, 0.5); box-shadow: 0 4px 16px rgba(46, 204, 113, 0.12); }

.qa-approve  { border-color: rgba(0, 201, 255, 0.3); background: rgba(0, 201, 255, 0.08); color: #0099cc; }
.qa-approve:hover { background: rgba(0, 201, 255, 0.12); border-color: rgba(0, 201, 255, 0.5); box-shadow: 0 4px 16px rgba(0, 201, 255, 0.12); }

.qa-revisione { border-color: rgba(123, 70, 255, 0.3); background: rgba(123, 70, 255, 0.08); color: #7b46ff; }
.qa-revisione:hover { background: rgba(123, 70, 255, 0.12); border-color: rgba(123, 70, 255, 0.5); box-shadow: 0 4px 16px rgba(123, 70, 255, 0.1); }

.qa-preview { border-color: rgba(255, 165, 0, 0.3); background: rgba(255, 165, 0, 0.1); color: #cc7a00; }
.qa-preview:hover { background: rgba(255, 165, 0, 0.15); border-color: rgba(255, 165, 0, 0.5); box-shadow: 0 4px 16px rgba(255, 165, 0, 0.12); }

/* ── Quality Workspace ──────────────────────────────────────────────────────── */

.quality-task-grid {
  grid-template-columns: 1fr;
  gap: 20px;
}

.quality-task-grid .task-card {
  flex-direction: row;
  align-items: flex-start;
}

.quality-task-grid .card-preview {
  flex: 0 0 63%;
  max-width: 63%;
}

.task-card.blocked {
  border-color: rgba(204, 107, 107, 0.4);
}

.task-card.blocked .card-actions .action-note {
  color: #cc6b6b;
  font-weight: 600;
}

.pdf-unavailable-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  opacity: 0.5;
}

.pdf-unavailable-placeholder .placeholder-icon {
  font-size: 3rem;
  opacity: 0.3;
}

.pdf-unavailable-placeholder .placeholder-text {
  font-size: 0.9rem;
  color: #8b8b9a;
  font-weight: 500;
}

.quality-filename-predict-wrap {
  margin-top: auto;
}

.quality-filename-predict {
  font-size: 0.72rem;
  font-family: "Geist Mono", monospace;
  font-weight: 500;
  color: #8b8b9a;
  margin-bottom: 10px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-task-grid .action-seconda-verifica-revisione {
  border-color: rgba(204, 107, 107, 0.3);
  background: rgba(204, 107, 107, 0.1);
  color: #cc6b6b;
}

.quality-task-grid .action-seconda-verifica-revisione:hover:not(:disabled) {
  background: rgba(204, 107, 107, 0.15);
  border-color: rgba(204, 107, 107, 0.5);
  box-shadow: 0 4px 16px rgba(204, 107, 107, 0.12);
}

.quality-task-grid .action-annotate {
  border-color: rgba(204, 107, 107, 0.3);
  background: rgba(204, 107, 107, 0.1);
  color: #cc6b6b;
}

.quality-task-grid .action-annotate:hover {
  background: rgba(204, 107, 107, 0.15);
  border-color: rgba(204, 107, 107, 0.5);
  box-shadow: 0 4px 16px rgba(204, 107, 107, 0.12);
}

.quality-card .card-meta .meta-item:nth-child(7) .meta-value {
  font-weight: 600;
  color: #2a2a32;
}

.quality-card .card-meta .meta-item:nth-child(8) .meta-value {
  font-weight: 500;
  color: #8b8b9a;
}
/* I `<button>` non ereditano `font-family` dal body: senza questa riga i
   pulsanti dei dialog (e quelli dei modali di flusso) cadevano su Arial. */
.dialog-footer .modal-confirm-btn,
.dialog-footer .modal-cancel-btn {
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Dialog (alert / confirm) ────────────────────────────────────────────────────
   Sostituisce le finestre native del browser: `window.alert` e `window.confirm`
   sono disegnate dal sistema e ignorano ogni CSS, quindi i messaggi comparivano
   con il font di macOS e non con quello del sito. Qui il testo del dialogo
   riprende `.meta-value` / `.cs-info-row strong` (Geist Mono), la stessa coppia
   usata dalla colonna info della card.

   `z-index` sopra `.modal-backdrop` (100): un dialog può arrivare mentre un
   modale di flusso è aperto (es. ALL OK, ESECUTIVI) e deve starsi davanti. */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 20px;
}

.dialog-shell {
  position: relative;
  z-index: 301;
  width: 90vw;
  max-width: 480px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  color: #2a2a32;
  overflow: hidden;
}

.dialog-header {
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Pastiglia col nome dell'azione, stessa grammatica di `.badge type-badge`. */
.dialog-kind {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 8px;
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid transparent;
}

.dialog-kind-alert {
  background: rgba(255, 165, 0, 0.15);
  color: #cc7a00;
  border-color: rgba(255, 165, 0, 0.4);
}

.dialog-kind-confirm {
  background: rgba(0, 201, 255, 0.1);
  color: #007a8a;
  border-color: rgba(0, 229, 212, 0.35);
}

.dialog-body {
  padding: 18px 24px;
  font-family: "Geist Mono", monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #2a2a32;
  white-space: pre-wrap;
  word-break: break-word;
}

.dialog-footer {
  padding: 12px 24px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* L'azione che chiude il dialog è quella con il gradiente aqua, come nei modali
   di flusso: `.modal-confirm-btn`. ANNULLA resta la secondaria neutra. */

/* ── Operazione in corso (feedback UX globale) ───────────────────────────────
   UNICO overlay condiviso da tutte le pagine operative (GRAFICA, QUALITA,
   CUSTOMER SERVICE, CONSORZIO, STAMPA, GESTIONE NPD). Markup iniettato da
   `operation.js`, logica begin/end nello stesso file: qui solo lo stile.

   Elegante e leggermente trasparente, in stile Aqua Glass: non modifica il
   layout sottostante. z-index 250: sopra i modali di flusso (100) cosi'
   blocca ogni azione operativa, sotto i dialog (300) e i toast (200 e' sotto
   ma i toast compaiono a operazione conclusa, quindi a overlay rimosso).

   La barra e' INDETERMINATA (il segmento scorre in continuo): nessuna
   percentuale simulata, comunica solo che COLAB sta lavorando. */

/* L'attributo `hidden` deve vincere sul `display: flex` dell'overlay:
   senza questo l'overlay sarebbe visibile al caricamento della pagina. */
.colab-operation-overlay[hidden] {
  display: none;
}

.colab-operation-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 245, 247, 0.55);
  backdrop-filter: blur(6px) saturate(160%);
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  cursor: wait;
}

.colab-operation-box {
  padding: 26px 42px 30px;
  border-radius: 20px;
  text-align: center;
}

.colab-operation-label {
  /* Sobria come il CODICE INTERNO in card (Geist Mono, scura): niente
     maiuscoletto azzurro spaziato, solo che COLAB sta lavorando. */
  font-family: "Geist Mono", monospace;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #2a2a32;
  white-space: nowrap;
}

.colab-operation-bar {
  position: relative;
  width: 250px;
  height: 8px;
  margin: 16px auto 0;
  border-radius: 99px;
  overflow: hidden;
  background: rgba(0, 153, 204, 0.15);
  border: 1px solid rgba(0, 201, 255, 0.25);
}

.colab-operation-bar span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 40%;
  border-radius: 99px;
  background: linear-gradient(90deg, #00c9ff, #00e5d4);
  animation: colab-operation-slide 1.1s ease-in-out infinite;
}

@keyframes colab-operation-slide {
  0% { left: -40%; }
  100% { left: 100%; }
}