/* =====================================================================
   Statistiche, bacheca, card dei lavori, badge, avvisi, modali
   Modulo estratto da components.css. L'ordine di caricamento conta (alcune
   regole devono stare dopo altre con la stessa specificità) ed è fissato in
   templates/_stylesheets.html: non riordinare i moduli.
   ===================================================================== */

/* ===== STATS ROW ===== */
.stats-row {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.stat-item {
  font-size: var(--text-sm);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.stat-value {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--green-700);
  min-width: 1.2em;
  text-align: center;
  animation: fadeInScale 0.4s ease both;
}

.stat-value:nth-child(1) { animation-delay: 0s; }
.stat-value:nth-child(2) { animation-delay: 0.08s; }
.stat-value:nth-child(3) { animation-delay: 0.16s; }

/* ===== PRIORITY DOT ===== */
/* Rimosso: .priority-dot — sostituita dalla pastiglia .priority-pill. */
/* Rimosso: .priority-dot.is-medium — sostituita dalla pastiglia .priority-pill. */
/* Rimosso: .priority-dot.is-high — sostituita dalla pastiglia .priority-pill. */
.priority-pill {
  position: absolute;
  top: 0.65rem;
  right: 2.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1;
}
.priority-pill.is-high {
  background: var(--rose-100);
  color: var(--rose-800);
}
.priority-pill.is-medium {
  background: var(--amber-100);
  color: var(--amber-700);
}



/* ===== SKELETON LOADING ===== */
.skeleton {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-50) 50%, var(--gray-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 0.375rem;
}

/* Rimosso: .skeleton-card — gli scheletri usano .skeleton e .skeleton-line. */
.skeleton-line {
  height: 12px;
  margin-bottom: 0.5rem;
}

.skeleton-line:last-child {
  width: 60%;
}



/* ===== LAYOUT ===== */
.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 1.5rem 2rem;
}
.container-readable { max-width: 84rem; }

/* ===== STATUS SECTIONS ===== */
.status-section {
  background: var(--surface);
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow);
}

.status-section-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
  position: sticky;
  top: 0;
  z-index: var(--z-raised-2);
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
}

.status-section-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1.25rem;
  right: 1.25rem;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--green-200), transparent);
}

.status-section-icon {
  font-size: var(--text-base);
  display: flex;
  color: var(--green-600);
}

.status-section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--green-800);
  letter-spacing: 0.2px;
}

.status-section-count {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--on-neutral);
  padding: 0 0.65rem;
  animation: fadeInScale 0.3s ease;
}

.status-section-count.is-new { background: var(--gray-400); }
.status-section-count.is-in-progress { background: var(--success-solid); color: var(--on-success); }
.status-section-count.is-pending { background: var(--warning-solid); color: var(--on-warning); }

.status-section-body {
  padding: 0.85rem 1.25rem 1.25rem;
}

/* La Bacheca e una lavagna: su schermi larghi le tre sezioni (Nuovo, In corso,
   In attesa) stanno affiancate come colonne. Ogni sezione impila le proprie
   card in verticale, cosi le card occupano tutta la larghezza della colonna. */
.status-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}

/* Dentro una colonna le card sono impilate; la colonna scorre da sola se il
   lavoro e lungo, tenendo le azioni di ogni card sempre raggiungibili. */
.status-board .status-section-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.65rem;
}

@media (max-width: 1100px) {
  .status-board { grid-template-columns: 1fr; }
  .status-board .status-section-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .status-board .status-section-body,
  .bacheca .status-section-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .bacheca .status-section-header {
    position: static;
  }
  .bacheca .job-card {
    width: 100%;
    min-width: 0;
  }
  .bacheca .job-card-client,
  .bacheca .job-card-desc,
  .bacheca .job-card-note {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .bacheca .job-card-actions .action-btn {
    min-height: 44px;
    justify-content: center;
  }
  /* Le azioni restano facili da premere, ma non richiedono una seconda riga.
     Le card con can_edit hanno il bottone Modifica; quelle con can_manage hanno anche Elimina. */
  .bacheca .job-card-actions { display: grid; }
  .bacheca .job-card-actions .btn-edit,
  .bacheca .job-card-actions .btn-delete { width: 44px; padding: 0; justify-content: center; }
  .bacheca .job-card-actions.has-edit { grid-template-columns: minmax(0, 1fr) 44px; }
  .bacheca .job-card.is-in-progress .job-card-actions.has-edit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; }
  .bacheca .job-card-actions.has-delete { grid-template-columns: minmax(0, 1fr) 44px 44px; }
  .bacheca .job-card.is-in-progress .job-card-actions.has-delete { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px 44px; }
  .bacheca .job-card.is-new .job-card-actions:not(.has-delete):not(.has-edit),
  .bacheca .job-card.is-pending .job-card-actions:not(.has-delete):not(.has-edit) { grid-template-columns: minmax(0, 1fr); }
}

/* ===== JOB CARDS ===== */
/* La card del lavoro non e' piu' una scatola dentro la colonna: e' una riga
   di elenco resa leggibile dalla barra di stato a sinistra e dai filtri
   presenti. Un solo contenitore, nessuna card annidata. */
.job-card {
  background: transparent;
  border: 0;
  border-left: 3px solid var(--gray-300);
  border-bottom: 1px solid var(--gray-200);
  border-radius: 0;
  padding: 0.7rem 0.35rem 0.7rem 0.75rem;
  margin-bottom: 0;
  transition: background var(--dur-fast) var(--ease-out);
  cursor: pointer;
  animation: fadeInUp 0.35s ease both;
  position: relative;
}

/* Bacheca: una card mostra i fatti essenziali, il dettaglio resta disponibile al clic. */
.bacheca .job-card {
  padding: 0.7rem 0.35rem 0.7rem 0.75rem;
  margin-bottom: 0;
}

.bacheca .job-card-actions {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
}

.bacheca .job-card-actions .action-btn {
  min-height: 2rem;
  padding: 0.25rem 0.55rem;
  font-size: var(--text-xs);
}

.bacheca .job-card-actions .btn-delete {
  width: 2rem;
  padding: 0;
  justify-content: center;
}

.job-card:hover {
  background: var(--gray-50);
  border-bottom-color: var(--gray-300);
}

.job-card:last-child { margin-bottom: 0; border-bottom: 0; }

.job-card.is-leaving {
  opacity: 0;
  transform: translateX(-20px);
  pointer-events: none;
}

.job-card.is-new { border-left-color: var(--gray-400); }
.job-card.is-in-progress { border-left-color: var(--green-500); }
.job-card.is-pending { border-left-color: var(--amber-500); }

.job-card-client {
  display: inline-block;
  background: var(--green-100);
  color: var(--green-800);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 0.25rem;
  padding-right: 1.8rem;
}

/* Shared client badge (history, wiki, etc.) */
.job-client {
  display: inline-block;
  background: var(--green-100);
  color: var(--green-800);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.job-card-desc {
  font-size: var(--text-sm);
  color: var(--gray-900);
  margin-bottom: 0.3rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
}

.job-card-meta {
  display: flex;
  gap: 0.35rem 0.6rem;
  font-size: var(--text-xs);
  color: var(--gray-600);
  flex-wrap: wrap;
}

.job-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.job-card-meta .job-due,
.job-card-note-indicator {
  margin-top: 0;
  font-size: var(--text-xs);
}

.job-card-note-indicator,
.job-card-ops-indicator {
  color: var(--green-800);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.job-card-actions {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--gray-200);
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.job-card-note {
  font-size: var(--text-xs);
  color: var(--gray-700);
  margin-top: 0.4rem;
  padding: 0.35rem 0.5rem;
  background: var(--green-50);
  border-radius: 0.25rem;
  border-left: 3px solid var(--green-200);
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Stato vuoto delle colonne della bacheca: prima le dimensioni dell'icona e
   i margini dei paragrafi erano stili inline dentro innerHTML, che la CSP
   (style-src-attr 'none') bloccava: le icone uscivano a 24px invece di 32px. */

/* ===== STATUS BADGE ===== */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 600;
}

.status-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-badge.is-new { background: var(--gray-100); color: var(--gray-600); }
.status-badge.is-new .status-badge-dot { background: var(--gray-400); }
.status-badge.is-in-progress { background: var(--green-100); color: var(--green-800); }
.status-badge.is-in-progress .status-badge-dot { background: var(--green-500); }
.status-badge.is-pending { background: var(--amber-100); color: var(--amber-700); }
.status-badge.is-pending .status-badge-dot { background: var(--amber-500); }
.status-badge.is-done { background: var(--green-100); color: var(--green-800); }
.status-badge.is-done .status-badge-dot { background: var(--green-600); }

/* ===== EXECUTION BADGE (report history) ===== */
.execution-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.execution-badge.execution-on_site { background: var(--green-100); color: var(--green-800); }
.execution-badge.execution-remoto { background: var(--blue-50); color: var(--blue-800); }
.execution-badge.execution-none { background: var(--gray-100); color: var(--gray-500); }

/* ===== HISTORY OPS BADGE (sintesi interventi) ===== */
.history-ops-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--green-50);
  border: 1px solid var(--green-200);
  color: var(--green-800);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.history-ops-summary {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* ===== HISTORY DETAIL MODAL — righe interventi e materiale ===== */
.history-intervention-row,
.history-material-row {
  display: grid;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.history-intervention-row {
  grid-template-columns: 90px 70px 90px 60px 1fr;
}
.history-material-row {
  grid-template-columns: 1fr auto auto auto;
}
.history-intervention-date { font-weight: 700; }
.history-intervention-op,
.history-material-qty { justify-self: start; }
.history-intervention-comment,
.history-material-model,
.history-material-serial {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}
@media (max-width: 600px) {
  .history-intervention-row {
    grid-template-columns: 1fr 1fr;
  }
  .history-intervention-comment {
    grid-column: 1 / -1;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .history-material-row {
    grid-template-columns: 1fr auto;
  }
  .history-material-model,
  .history-material-serial {
    grid-column: 1 / -1;
  }
}



/* ===== TOAST NOTIFICATIONS ===== */
#toast-container {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top, 0px));
  right: max(1rem, env(safe-area-inset-right, 0px));
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(400px, calc(100vw - 2rem));
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  font-size: var(--text-sm);
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  animation: toast-in 0.35s ease;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.toast-success {
  background: var(--success-bg);
  color: var(--success-fg);
  border: 1.5px solid var(--success-border);
}

.toast-error {
  background: var(--danger-bg);
  color: var(--danger-fg);
  border: 1.5px solid var(--danger-border);
}

.toast-close {
  margin-left: auto;
  background: none;
  border: none;
  font-size: var(--text-xl);
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  line-height: 1;
  padding: 0 0.25rem;
}

.toast-close:hover { opacity: 1; }

.toast-undo-btn {
  display:inline-block;margin-left:0.75rem;
  background:var(--success-solid);color:var(--on-success);
  border:none;border-radius:0.375rem;
  padding:0.15rem 0.6rem;
  font-size:var(--text-sm);font-weight:600;
  cursor:pointer;transition:background 0.15s;
  vertical-align:middle;
  line-height:1.5;
}
.toast-undo-btn:hover { background:var(--success-solid-hover); }



main {
  padding-bottom: 0;
}



/* ===== ACTION BUTTONS ===== */
.action-btn {
  padding: 0.4rem 0.85rem;
  border-radius: 0.375rem;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.action-btn:hover { transform: translateY(-1px); }
.action-btn:active { transform: translateY(0) scale(0.96); }

.btn-start {
  background: var(--green-100);
  color: var(--green-800);
}
.btn-start:hover { background: var(--green-200); }

.btn-pause {
  background: var(--warning-bg);
  color: var(--warning-fg);
}
.btn-pause:hover { background: var(--warning-border); }

.btn-complete {
  background: var(--danger-bg);
  color: var(--danger-fg);
}
.btn-complete:hover { background: var(--danger-border); }

.btn-delete {
  background: none;
  color: var(--gray-600);
  font-size: var(--text-sm);
  padding: 0.25rem 0.35rem;
  border: none;
}
.btn-delete:hover {
  background: var(--danger-bg);
  color: var(--danger-fg);
}

/* ===== FLOATING ACTION BUTTON ===== */
.fab {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  min-width: 56px;
  height: 56px;
  border-radius: 28px;
  background: var(--success-solid);
  color: var(--on-success);
  border: none;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-fab);
  gap: 0.5rem;
  padding: 0 1.5rem;
  animation: slideUp 0.4s ease 0.2s both, float 3s ease-in-out 1s infinite;
}

.fab-icon {
  display: flex;
  align-items: center;
  font-size: var(--text-xl);
  font-weight: 300;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fab-label {
  white-space: nowrap;
  font-size: var(--text-sm);
}

.fab:hover {
  background: var(--success-solid-hover);
  box-shadow: 0 6px 24px rgba(5, 150, 105, 0.6);
  transform: translateX(-50%) translateY(-3px) scale(1.02);
  animation: none;
}

.fab:hover .fab-icon {
  transform: rotate(90deg) scale(1.1);
}

.fab:active {
  transform: translateX(-50%) translateY(0) scale(0.97);
}

/* ===== MODAL ===== */
.modal {
  position: fixed;
  z-index: var(--z-modal);
  inset: 0;
  overflow-y: auto;
  background: var(--modal-overlay);
  animation: fadeIn 0.2s ease;
  backdrop-filter: blur(2px);
  overscroll-behavior: contain;
}

html.modal-open,
body.modal-open { overflow: hidden; overscroll-behavior: none; }

.modal-content {
  background: var(--surface);
  margin: 5% auto;
  padding: 2rem;
  border-radius: var(--radius);
  width: 90%;
  max-width: 520px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  animation: fadeInScale 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-lg {
  max-width: 720px;
}





.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.modal-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--green-800);
}

.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: var(--text-2xl);
  color: var(--gray-400);
  line-height: 1;
}

.modal-close:hover { color: var(--gray-600); }

.settings-manual { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.settings-manual .settings-desc { margin: 0; }
.manual-content { padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.manual-content > :first-child { margin-top: 0; }
.manual-content h2 { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); color: var(--green-800); }
.manual-content h3 { margin-top: 1.6rem; color: var(--text); }
.manual-content p, .manual-content li { line-height: 1.65; }
.manual-content img { display: block; width: 100%; margin: 1.25rem 0 2rem; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow); }
.manual-content table { width: 100%; margin: 1rem 0; border-collapse: collapse; }
.manual-content th, .manual-content td { padding: .65rem; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.manual-content th { background: var(--green-50); color: var(--green-800); }

.modal-body {
  margin-bottom: 1.5rem;
}