/* =====================================================================
   Caricamento, azioni di gruppo, sostituti degli stili inline
   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.
   ===================================================================== */

/* ===== LOADING SPINNER ===== */
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(2px);
}

/* ===== BULK ACTIONS ===== */
.bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--green-100);
  border: 1.5px solid var(--green-200);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: var(--text-sm);
}
.bulk-bar-info,
.bulk-bar-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.bulk-bar[hidden] { display: none; }
.history-col-check { width: 2.25rem; text-align: center; }
.bulk-bar-count { font-weight: 700; color: var(--green-800); }
.bulk-bar-link { background: none; border: none; cursor: pointer; color: var(--green-700); }
.bulk-bar-select { padding: 0.4rem 0.5rem; border: 1.5px solid var(--green-300); border-radius: var(--radius-sm); }
.bulk-bar-divider { width: 1px; height: 1.5rem; background: var(--green-300); }
.page-header-actions .btn-secondary.is-active { background: var(--green-600); color: white; border-color: var(--green-600); }
.bulk-checkbox { display: none; }
.is-selecting .bulk-checkbox { display: block; }

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--gray-200);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
/* Workflow: filtri, scadenze, cronologia e notifiche condivisi tra desktop e mobile. */
.dashboard-views { display: inline-flex; gap: 0.25rem; padding: 0.25rem; margin-bottom: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.dashboard-view { padding: 0.5rem 0.9rem; color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.875rem; }
.dashboard-view.active { color: var(--on-success); background: var(--success-solid); }
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .dashboard-view.active,
[data-theme="dark"] .fab { background: var(--success-solid); }
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .fab:hover { background: var(--success-solid-hover); }
[data-theme="dark"] .job-card-client,
[data-theme="dark"] .btn-start { color: var(--green-900); }
.inline-notice { margin: 0 0 1rem; padding: 0.75rem 1rem; border-left: 3px solid var(--amber-500); background: var(--amber-100); color: var(--text-primary); }

/* Il progresso dell'import distingue attesa in coda, conversione e salvataggio. */
.wiki-import-progress { max-width: 42rem; margin: 0 0 1.25rem; padding: 1rem 1.1rem; border: 1px solid var(--amber-300); border-radius: var(--radius-md); background: var(--amber-100); color: var(--text-primary); }
.wiki-import-progress-heading { display: flex; align-items: center; gap: 0.5rem; }
.wiki-import-progress-heading strong { flex: 1; font-size: var(--text-sm); }
.wiki-import-progress-heading span { font-variant-numeric: tabular-nums; font-size: var(--text-sm); font-weight: 700; }
.wiki-import-progress-track { height: 0.5rem; margin-top: 0.8rem; overflow: hidden; border-radius: 1rem; background: rgba(146, 64, 14, 0.16); }
.wiki-import-progress-value { display: block; height: 100%; min-width: 0.4rem; border-radius: inherit; background: linear-gradient(90deg, var(--amber-500), var(--amber-700)); transition: width 0.4s ease; }
.wiki-import-progress-meta { margin: 0.55rem 0 0; color: var(--text-secondary); font-size: var(--text-xs); }
.job-due { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.65rem; font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); }
.job-due svg { width: 14px; height: 14px; }
.job-due.is-today { color: var(--amber-700); }
.job-due.is-overdue { color: var(--rose-800); }
.activity-panel { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.activity-panel h3 { margin: 0 0 0.75rem; font-size: 0.95rem; }
.activity-list { display: grid; gap: 0.7rem; color: var(--text-secondary); font-size: 0.82rem; }
.activity-item { display: grid; grid-template-columns: 0.65rem 1fr; gap: 0.55rem; }
.activity-item strong, .activity-item span { display: block; }
.activity-marker { width: 0.55rem; height: 0.55rem; margin-top: 0.3rem; border-radius: 50%; background: var(--green-500); }
.activity-skeleton-row { display: grid; grid-template-columns: 0.65rem 1fr; gap: 0.55rem; margin-bottom: 0.7rem; }
.activity-skeleton-row .skeleton-line { margin-bottom: 0.3rem; }
.activity-skeleton-row .skeleton-line:last-child { width: 55%; margin-bottom: 0; }
.job-material-panel { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.job-material-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.job-material-heading h3 { margin: 0; font-size: var(--text-base); }
.material-status { display: inline-flex; margin-left: .35rem; padding: .15rem .45rem; border-radius: var(--radius-full); background: var(--amber-100); color: var(--amber-700); font-size: var(--text-xs); vertical-align: middle; }
.material-status.is-delivered { background: var(--green-100); color: var(--green-800); }
.job-material-heading p { margin: .25rem 0 0; color: var(--text-secondary); font-size: var(--text-xs); }
.job-material-list { display: grid; gap: .6rem; margin-top: .85rem; }
.job-material-table { width: 100%; border-collapse: collapse; }
.job-material-table th, .job-material-table td { padding: .5rem .6rem; text-align: left; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.job-material-table th { font-weight: 600; color: var(--text-secondary); text-transform: uppercase; font-size: var(--text-xs); }
.job-material-table td:first-child { font-weight: 600; }
.job-material-table td:last-child .btn-icon-danger { opacity: .6; }
.job-material-table td:last-child .btn-icon-danger:hover { opacity: 1; }
.history-material-table { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.history-material-table th, .history-material-table td { padding: .4rem .5rem; text-align: left; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.history-material-table th { font-weight: 600; color: var(--text-secondary); text-transform: uppercase; font-size: var(--text-xs); }
.history-material-table td:first-child { font-weight: 600; }
.job-material-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-alt); }
.job-material-details { display: grid; gap: .2rem; min-width: 0; }
.job-material-details strong { color: var(--text-primary); font-size: var(--text-sm); }
.job-material-details span { color: var(--text-secondary); font-size: var(--text-xs); overflow-wrap: anywhere; }
.material-type-choice { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: end; }
.material-type-choice input, .material-type-choice select { min-width: 0; }
.job-material-create-fields { display: grid; gap: .75rem; margin-top: .85rem; padding: .85rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); }
/* Righe multiple di materiale in creazione: spazio tra una scheda e l'altra. */
.job-material-create-fields + .job-material-create-fields { margin-top: .6rem; }
.job-material-empty { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }

/* ─── Interventi del lavoro (operatore, data, ore H:MM, commento) ─── */
.job-interventions-panel { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.job-intervention-list { display: grid; gap: .6rem; margin-top: .85rem; }
.job-intervention-row { display: grid; gap: .6rem; padding: .75rem .8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-alt); }
.job-intervention-row.is-new { border-style: dashed; border-color: var(--green-300); }
.job-intervention-fields { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto minmax(0, 1.6fr); gap: .5rem; align-items: center; }
.job-intervention-fields .intervention-operator { min-width: 0; }
.job-intervention-fields .intervention-date { min-width: 0; }
.job-intervention-fields .detail-duration-stepper .intervention-duration { min-width: 4.5rem; width: 4.5rem; text-align: center; }
.job-intervention-fields .intervention-comment {
  /* Descrizione del lavoro eseguito: occupa tutta la riga sotto gli altri campi
     e cresce con il testo (l'altezza esatta la imposta il JS autoGrowComment). */
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  min-height: 3.4rem;
  max-height: 12rem;
  padding: 0.6rem 0.75rem;
  border: 1.5px solid var(--gray-300);
  border-radius: 0.5rem;
  background: var(--surface, #fff);
  color: inherit;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.4;
  resize: vertical;
  overflow-y: auto;
}
.job-intervention-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.job-intervention-empty { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }
/* Selettore "altri operatori" dell'intervento: resta compatto (un riquadro
   che si apre) per non appesantire la riga; le ore restano al principale. */
.intervention-participants {
  grid-column: 1 / -1;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: .35rem .5rem;
  background: var(--surface);
}
.intervention-participants-summary {
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  list-style: none;
}
.intervention-participants-summary::-webkit-details-marker { display: none; }
.intervention-participants-summary::before { content: '+ '; font-weight: 700; }
.intervention-participants[open] .intervention-participants-summary::before { content: '− '; }
.intervention-participants-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  margin-top: .4rem;
}
.intervention-participant-option {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: var(--text-sm);
}
input.is-readonly { background: var(--surface-alt); color: var(--text-secondary); cursor: not-allowed; }
@media (max-width: 900px) {
  .job-intervention-fields { grid-template-columns: 1fr 1fr; }
}
/* Nel dettaglio lavoro scorrono solo i campi e le attivita: le azioni restano sempre disponibili. */
.dashboard-detail-modal { display: flex; flex-direction: column; max-height: min(90dvh, 52rem); }
.dashboard-detail-form { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; }
.dashboard-detail-form .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 0.35rem; }
.dashboard-detail-modal > .modal-footer { flex: 0 0 auto; margin-top: 1rem; }

/* ─── Scheda lavoro: sezioni raggruppate (bacheca + storico) ─── */
.detail-header { gap: 0.6rem; }
.detail-header .modal-title { margin-right: auto; }
.status-pill { display: inline-flex; align-items: center; padding: 0.2rem 0.7rem; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.status-pill.is-new { background: var(--info-bg); color: var(--info-fg); }
.status-pill.is-progress { background: var(--warning-bg); color: var(--warning-fg); }
.status-pill.is-pending { background: var(--gray-200); color: var(--gray-800); }
.status-pill.is-done { background: var(--success-bg); color: var(--success-fg); }
.detail-section { margin: 0 0 1rem; padding: 0.95rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.detail-section:last-child { margin-bottom: 0; }
.detail-section-title { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.8rem; color: var(--green-700); font-size: var(--text-sm); }
.detail-section .responsive-two-column { margin: 0; }
.detail-section .form-group { margin-bottom: 0; }
.detail-section .responsive-two-column { gap: 0.75rem; }
/* ─── Note di lavoro firmate ─── */
.job-notes-list { display: grid; gap: 0.6rem; margin-top: 0.85rem; }
.job-notes-list:empty { margin-top: 0; }
.job-note-card { position: relative; padding: 0.7rem 2.2rem 0.7rem 0.85rem; border: 1px solid var(--border); border-left: 4px solid var(--green-500); border-radius: var(--radius-sm); background: var(--surface-alt); }
.job-note-meta { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 0.3rem; color: var(--gray-600); font-size: var(--text-xs); }
.job-note-meta strong { color: var(--green-800); font-size: var(--text-xs); }
.job-note-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-sm); }
.job-note-card .btn-icon-danger { position: absolute; top: 0.45rem; right: 0.45rem; }
.job-notes-empty { margin: 0.85rem 0 0; color: var(--text-secondary); font-size: var(--text-sm); }
.job-note-form { display: grid; gap: 0.6rem; margin-top: 0.85rem; }
.job-note-form[hidden] { display: none; }
.job-note-form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.note-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; padding: 0.1rem 0.5rem; border-radius: var(--radius-full); background: var(--green-100); color: var(--green-800); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
/* Dettaglio job più orizzontale su desktop — distribuisce i campi su più colonne */
@media (min-width: 1024px) {
  .dashboard-detail-modal,
  #historyDetailModal .modal-content {
    max-width: 78rem;
    width: 96vw;
  }
  .dashboard-detail-modal .responsive-two-column,
  #historyDetailModal .responsive-two-column {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
  }
  .dashboard-detail-modal .modal-body,
  #historyDetailModal .modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.5rem;
    align-items: start;
  }
  .dashboard-detail-modal .modal-body > .detail-section,
  #historyDetailModal .modal-body > .detail-section,
  .dashboard-detail-modal .modal-body > .detail-meta,
  #historyDetailModal .modal-body > .detail-meta,
  .dashboard-detail-modal .modal-body > .activity-panel,
  #historyDetailModal .modal-body > .activity-panel,
  .dashboard-detail-modal .modal-body > .meta-info,
  #historyDetailModal .modal-body > .meta-info {
    grid-column: 1 / -1;
  }
  .dashboard-detail-modal .job-interventions-panel,
  .dashboard-detail-modal .job-material-panel,
  #historyDetailModal .job-interventions-panel,
  #historyDetailModal .job-material-panel {
    grid-column: 1 / -1;
  }
}

/* Pulsante "Personale" (promemoria privato): verde chiaro spento, verde scuro acceso */
.btn-personal {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--green-500);
  border-radius: var(--radius-sm);
  background: var(--green-100);
  color: var(--green-900);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-personal:hover { background: var(--green-500); color: #fff; }
.btn-personal.is-active {
  background: var(--green-800);
  color: #fff;
  border-color: var(--green-800);
}
.job-personal-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--green-800);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ─── Anteprima report giornaliero (modale globale) ─── */
.report-preview-content,
.test-report-content {
  width: 96vw;
  max-width: 84rem;
}
/* Selettore giorno in testata: sempre visibile sopra l'anteprima. */
.report-preview-day {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  margin-right: 0.75rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}
.report-preview-day input[type="date"] {
  width: auto;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
}

/* ─── Combobox cliente: sfoglia tutto o digita per filtrare ─── */
.client-combobox {
  position: relative;
}
.client-combobox input[type="text"] {
  width: 100%;
  padding-right: 2.25rem;
}
.client-combobox-toggle {
  position: absolute;
  top: 50%;
  right: 0.3rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.client-combobox-toggle:hover {
  background: var(--surface-alt);
  color: var(--text);
}
.client-combobox-toggle:active {
  transform: translateY(-50%) scale(0.94);
}
.client-combobox-toggle:focus-visible,
.client-combobox input[type="text"]:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 1px;
}
.client-combobox-toggle.is-open {
  transform: translateY(-50%) rotate(180deg);
}
.client-combobox-panel {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  right: 0;
  z-index: var(--z-popover);
  max-height: 16rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.client-combobox-list {
  list-style: none;
  margin: 0;
  padding: 0.3rem;
}
.client-combobox-list [role="option"] {
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.client-combobox-list [role="option"]:hover,
.client-combobox-list [role="option"].is-active {
  background: var(--green-50);
  color: var(--green-800);
}
.client-combobox-count {
  margin: 0;
  padding: 0.35rem 0.65rem;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.report-preview-scroll,
#test-report-preview-body {
  max-height: 72vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 1rem;
}
/* Tabella report in anteprima: più ariosa e leggibile — override inline max-width email */
#report-preview-body table,
#test-report-preview-body table { font-size: 0.95rem; max-width: none !important; width: 100% !important; border-collapse: collapse !important; border: 2px solid #065f46 !important; }
#report-preview-body th,
#test-report-preview-body th { padding: 12px 14px !important; font-size: 0.78rem !important; border: 1px solid #065f46 !important; }
#report-preview-body td,
#test-report-preview-body td { border: 1px solid #9ca3af !important; }
#report-preview-body .operation-table,
#test-report-preview-body .operation-table { border: 1px solid #9ca3af !important; }
#report-preview-body td,
#test-report-preview-body td { padding: 12px 14px !important; line-height: 1.5; }
#report-preview-body > table,
#test-report-preview-body > table { max-width: none !important; }
#report-preview-body .report-preview-scroll,
#test-report-preview-body .report-preview-scroll { border: 0; padding: 0; }
@media (max-width: 900px) {
  .report-preview-content { width: 96vw; }
  .report-preview-scroll { max-height: 62vh; padding: 0.6rem; }
}
.report-preview-loading { color: var(--text-secondary); font-size: var(--text-sm); padding: 1rem 0; }
.report-preview-notes { margin-top: 0.9rem; }
/* Il pallino rosso si ancora al pulsante, non al contenitore: sul telefono
   .notification-center torna `static` (il pannello e' ancorato allo schermo),
   e senza questa ancora il pallino finirebbe in fondo alla riga, staccato dal
   campanello. Il pulsante esiste sempre, quindi l'ancora e' sempre valida. */
#notification-toggle { position: relative; }
.notification-center { position: relative; }
.notification-badge { position: absolute; top: -0.25rem; right: -0.35rem; min-width: 1.05rem; height: 1.05rem; padding: 0 0.2rem; border-radius: 999px; background: var(--danger-solid); color: var(--on-danger); font-size: 0.65rem; line-height: 1.05rem; text-align: center; }
.notification-panel { position: absolute; z-index: var(--z-notification); top: calc(100% + 0.65rem); right: 0; width: min(24rem, calc(100dvw - 2rem)); max-height: min(28rem, calc(78dvh - env(safe-area-inset-bottom, 0px) - 1rem)); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; color: var(--text-primary); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
/* Quando il pannello è aperto deve stare sopra la bottom-nav (180) ma sotto i modali (200) */
.topbar:has(#notification-panel:not([hidden])), .topbar.has-notifications-open { z-index: var(--z-sticky-actions); }
@media (max-width: 768px) {
  .notification-center { position: static; }
  #notification-panel.notification-panel {
    position: fixed;
    top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + 0.35rem);
    right: max(0.75rem, env(safe-area-inset-right, 0px));
    left: max(0.75rem, env(safe-area-inset-left, 0px));
    width: auto;
    max-width: none;
    max-height: min(28rem, calc(78dvh - env(safe-area-inset-bottom, 0px) - 1rem));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}
.notification-panel-header { display: flex; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem; border-bottom: 1px solid var(--border); }
.notification-panel-header button { border: 0; background: none; color: var(--green-700); cursor: pointer; font-weight: 700; }
.notification-list { min-height: 4rem; }
.notification-item { display: grid; gap: 0.2rem; padding: 0.8rem 1rem; color: inherit; text-decoration: none; border-bottom: 1px solid var(--border); }
.notification-item.is-unread { background: var(--green-50); box-shadow: inset 3px 0 var(--green-500); }
.notification-item span, .notification-item small { color: var(--text-secondary); }
.notification-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
.notification-row .notification-item { flex: 1; min-width: 0; border-bottom: 0; }
.notification-delete { flex: 0 0 2.75rem; border: 0; border-left: 1px solid var(--border); background: transparent; color: var(--text-tertiary); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.notification-delete:hover, .notification-delete:focus-visible { color: var(--danger-solid); background: var(--danger-bg); }
.notification-skeleton { display: grid; gap: 0.3rem; padding: 0.8rem 1rem; }
.notification-skeleton .skeleton-line { margin-bottom: 0.3rem; }
.notification-skeleton .skeleton-line:last-child { width: 70%; margin-bottom: 0; }

/* Dashboard operativa: filtri persistenti e indicatori leggibili senza grafici dipendenti dal colore. */
.dashboard-filter-panel { display: grid; gap: 0.7rem; margin: -0.35rem 0 1.25rem; }
.dashboard-filter-form, .save-filter-form { display: flex; align-items: end; gap: 0.6rem; flex-wrap: wrap; }
.dashboard-filter-form label { display: grid; gap: 0.25rem; min-width: 9rem; color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; }
.dashboard-filter-form select, .save-filter-form input { min-height: 2.45rem; padding: 0.45rem 0.65rem; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); background: var(--surface); font: inherit; }
.filter-reset { align-self: center; color: var(--text-secondary); font-size: var(--text-sm); }
.saved-filter-list { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.saved-filter-chip { display: inline-flex; align-items: center; overflow: hidden; border: 1px solid var(--green-200); border-radius: var(--radius-full); background: var(--green-50); }
.saved-filter-chip a { padding: 0.35rem 0.2rem 0.35rem 0.7rem; color: var(--green-800); text-decoration: none; font-size: var(--text-xs); font-weight: 800; }
.saved-filter-chip form { display: inline-flex; }
.saved-filter-chip button { width: 1.8rem; height: 1.8rem; border: 0; color: var(--green-700); background: transparent; cursor: pointer; }
.dashboard-overview-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(25rem, 0.9fr); align-items: start; gap: 1.5rem; margin-bottom: 1.4rem; }
.dashboard-controls { min-width: 0; }
.dashboard-overview-layout .dashboard-insights { max-width: none; margin-bottom: 0; }
.dashboard-insights { width: 100%; max-width: none; margin-bottom: 1.4rem; padding: 1.15rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--surface), var(--green-50)); box-shadow: var(--shadow); }
.insights-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 0.9rem; }
.insights-heading h2 { margin: 0.1rem 0 0; font-family: var(--font-display); font-size: var(--text-xl); }
.eyebrow { color: var(--green-700); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.insights-caption { color: var(--text-secondary); font-size: var(--text-xs); }
.dashboard-insights-body { display: grid; grid-template-columns: repeat(5, minmax(6.4rem, 1fr)) minmax(11rem, 1.3fr) minmax(11rem, 1.3fr); gap: 0.65rem; align-items: stretch; overflow-x: auto; padding-bottom: 0.2rem; }
.kpi-card { display: grid; gap: 0.15rem; min-height: 6.4rem; padding: 0.85rem; border: 1px solid var(--gray-200); border-top: 3px solid var(--green-500); border-radius: var(--radius-sm); background: var(--surface); }
.kpi-card > span, .kpi-card small { color: var(--text-secondary); font-size: var(--text-xs); }
.kpi-card strong { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.1; }
.kpi-card.is-danger { border-top-color: var(--rose-600); }
.kpi-card.is-warning { border-top-color: var(--amber-500); }
.kpi-card.is-positive { border-top-color: var(--green-600); }
.kpi-card.is-today { border-top-color: var(--blue-600); }
.insight-breakdown-panel { min-width: 11rem; padding: 0.8rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface) 88%, transparent); }
.insight-breakdown-panel h3 { margin: 0 0 0.55rem; font-size: var(--text-sm); }
.metric-bars { display: grid; gap: 0.35rem; }
.metric-bars > div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.3rem; border-bottom: 1px dashed var(--border); font-size: var(--text-xs); }

/* ===== INLINE-STYLE REPLACEMENTS ===== */

/* Icone Lucide — toglie vertical-align:middle ripetuto */
i[data-lucide] { vertical-align: middle; }
.icon-xs { width: 12px; height: 12px; }
.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 16px; height: 16px; }
.icon-lg { width: 18px; height: 18px; }
.icon-xl { width: 20px; height: 20px; }
.icon-xxl { width: 22px; height: 22px; }
.icon-xxxl { width: 24px; height: 24px; }
.icon-xxxxl { width: 48px; height: 48px; }

/* Intestazioni sezione */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 3px solid var(--green-200);
}

/* Pulsanti bulk bar */
.bulk-btn { font-size: 0.8rem; }

/* Textarea e input standard */
.textarea-standard {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1.5px solid var(--gray-300);
  border-radius: 0.5rem;
  font-family: inherit;
  font-size: 0.875rem;
  resize: vertical;
}

/* Layout flex ausiliari */
.flex-row { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-end { align-items: end; }
.gap-xs { gap: 0.25rem; }
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 0.75rem; }
.gap-lg { gap: 1rem; }
/* Rimosso: .gap-xl — nessun template la usa. */
.flex-1 { flex: 1; }

/* Input compatto (tabelle admin) */
.input-compact { width: 130px; padding: 0.3rem 0.4rem; border: 1px solid var(--gray-300); border-radius: 0.3rem; font-size: 0.8rem; font-family: inherit; background: var(--surface); color: var(--text); }
.input-compact-w { width: 180px; padding: 0.3rem 0.4rem; border: 1px solid var(--gray-300); border-radius: 0.3rem; font-size: 0.8rem; font-family: inherit; background: var(--surface); color: var(--text); }
.input-settings { padding: 0.3rem 0.5rem; border: 1.5px solid var(--gray-300); border-radius: 0.4rem; font-family: inherit; font-size: 0.85rem; background: var(--surface); color: var(--text); width: 260px; }
.select-settings { flex: 1; padding: 0.6rem 0.75rem; border: 1.5px solid var(--gray-300); border-radius: 0.5rem; font-family: inherit; font-size: 0.85rem; background: var(--surface); color: var(--text); }

/* Form inline (admin table) */
.form-inline { margin: 0; display: flex; gap: 0.25rem; align-items: center; }
.form-inline-gap { margin: 0; display: flex; gap: 0.35rem; align-items: center; }

/* Form group */
.mb-0 { margin-bottom: 0; }
.min-w-160 { min-width: 160px; }

/* Spaziatura */
.m-0 { margin: 0; }
.mt-sm { margin-top: 0.5rem; }
.mt-md { margin-top: 0.75rem; }
.mt-lg { margin-top: 1rem; }
.mt-xl { margin-top: 1.5rem; }
/* Rimosso: .mb-sm — nessun template la usa. */
/* Rimosso: .ml-sm — nessun template la usa. */
/* ===== UTILITY PER ELIMINARE GLI STILI INLINE DAI TEMPLATE ===== */
/* Allineamenti e testo */
.inline-flex-center { display: inline-flex; align-items: center; }
.flex-nowrap { flex-wrap: nowrap; }
.no-underline { text-decoration: none; }
.text-upper { text-transform: uppercase; }
.text-nowrap { white-space: nowrap; }
.text-center { text-align: center; }
.text-sm { font-size: var(--text-sm); }
/* Rimosso: .text-muted — nessun template la usa; esiste --text-secondary. */
.bg-muted { background: var(--gray-100); }
.bg-green-solid { background: var(--green-700); }
.align-end { align-self: end; }

/* Larghezze: la classe e' ripetuta due volte (.w-80.w-80) per superare la
   specificita' di `.form-group input { width: 100% }` senza usare !important. */
.w-auto.w-auto { width: auto; }
.w-full.w-full { width: 100%; }

/* Larghezze fisse (px) per controlli dentro le tabelle */
/* Rimosso: .w-32.w-32 — nessun template la usa. */
.w-40.w-40 { width: 40px; }
.w-45.w-45 { width: 45px; }
.w-56.w-56 { width: 56px; }
.w-64.w-64 { width: 64px; }
.w-72.w-72 { width: 72px; }
.w-80.w-80 { width: 80px; }
.w-90.w-90 { width: 90px; }
.w-100.w-100 { width: 100px; }
.w-120.w-120 { width: 120px; }
.w-130.w-130 { width: 130px; }
.min-w-100.min-w-100 { min-width: 100px; }
.min-w-120.min-w-120 { min-width: 120px; }

/* =====================================================================
   MESSAGGI DI ESITO DENTRO LE PAGINE (classe `.flash`)

   Perche' sta qui: `.flash` non era definita in nessun foglio di stile
   dell'app. Chi scriveva un messaggio — `showAlert` negli orari, la striscia
   dell'invio settimanale, il salvataggio degli orari mensili — otteneva solo
   il punto in cui comparire: il messaggio finiva in pagina senza bordo ne'
   colore, come testo nudo, e chi lo leggeva non capiva cosa fosse appena
   successo (o non successo). Peggio: il messaggio della pagina degli orari
   mensili spariva anche da solo dopo 5 secondi.

   Il colore viene dal tipo: `.flash-error`, `.flash-success`, `.flash-warning`.
   Il testo e' sempre piu' scuro del suo sfondo (contrasto verificato) perche'
   questi messaggi devono restare leggibili: sono la spiegazione di quello che
   l'app ha appena fatto.
   ===================================================================== */
.flash {
  padding: 0.75rem 0.9rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-control);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.flash-error { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-border); }
.flash-success { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-border); }
.flash-warning { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-border); }
.flash .icon-sm { vertical-align: -0.15em; margin-right: 0.35rem; }

/* Nasconde un elemento finché JavaScript non lo mostra via stile inline */
.hidden-initial { display: none; }

/* ===== COMPONENTI ESTRATTI DAGLI STILI INLINE ===== */
.topbar-search-icon {
  width: 14px;
  height: 14px;
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.5);
  pointer-events: none;
}

/* Pulsante esci della topbar: trasparente su desktop; la variante mobile
   (pillola con fondo chiaro) è definita nelle media query di utilities.css. */
/* Esci: pulsante dell'area profilo. Ha uno stile suo (prima riusava la classe
   delle sezioni di navigazione e ne ereditava bordi e sottolineatura). */
.topbar-logout {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 32px;
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-control);
  background: transparent;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.topbar-logout:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }

.undo-banner-actions .toast-close { position: static; margin-left: 0.5rem; }

.btn-compact { min-width: 44px; min-height: 44px; padding: 0.35rem 0.65rem; font-size: 0.75rem; }

/* Pulsante piccolo per le azioni di servizio dentro righe di form e modali
   ("Aggiungi materiale", "Aggiungi intervento", "Aggiungi nota").
   La classe era gia' usata in 5 template senza che esistesse la regola:
   questi pulsanti venivano grandi come tutti gli altri e non si capiva quale
   fosse l'azione principale. Su telefono resta un'area comoda da toccare
   (vedi la regola dei 44px in utilities.css). */
.btn-sm { padding: 0.3rem 0.6rem; min-height: 32px; font-size: var(--text-xs); border-radius: var(--radius-sm); }

/* Rimosso: .link-green — i link verdi usano .btn-link-green. */
/* La cella "nessun risultato" delle tabelle usa ora il componente unico con la
   forma --cell: stessa identica, un nome solo. */

.modal-textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1.5px solid var(--gray-300);
  border-radius: 0.5rem;
  font-family: inherit;
  font-size: 0.875rem;
  resize: vertical;
}

.detail-meta { font-size: 0.8rem; color: var(--gray-500); display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: space-between; padding: 0.75rem 1rem; background: var(--gray-50); border: 1px solid var(--border); border-radius: 0.5rem; margin-top: 1rem; }

/* Etichetta di checkbox/controlli dentro le tabelle di amministrazione.
   Classe raddoppiata per prevalere su `.form-group label` senza !important. */
.checkbox-label.checkbox-label { cursor: pointer; font-size: var(--text-sm); font-weight: 500; color: var(--gray-600); }

.client-notes-section .note-card { margin-bottom: 0.5rem; cursor: pointer; }

.py-compact { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.mt-2xs { margin-top: 0.25rem; }

/* Badge categoria (riquadro info) */
.info-box {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--green-50);
  border-radius: 0.5rem;
  font-size: 0.9rem;
}

/* Empty state icona */
.icon-empty {
  width: 32px;
  height: 32px;
  margin-bottom: 0.5rem;
  opacity: 0.3;
}

/* Bottoni azione action-btn senza bordo */
/* NB: .action-btn-no-border e' stata rimossa. .action-btn ha gia' border:none
   e cursor:pointer, quindi la classe non aggiungeva nulla. */

/* Info meta (storico/tempo) — sotto le note, distribuzione orizzontale */
.meta-info {
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  margin-top: 1rem;
}

/* ─── Stato vuoto ────────────────────────────────────────────────────────
   Un tempo cinque nomi diversi per la stessa idea, sparsi in tre fogli, e uno
   (.empty-state-compact) senza nessuno stile: compariva come testo normale.
   Qui c'e' un componente solo, con quattro forme secondo dove viene usato. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: var(--gray-600);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.empty-state__icon { width: 32px; height: 32px; margin-bottom: 0.5rem; opacity: 0.3; }
.empty-state__title { margin: 0; font-weight: 600; }
/* Il suggerimento usa un colore pieno, non il grigio con l'opacita' ridotta:
   sul grigio chiaro il risultato non arrivava al contrasto richiesto e la
   pagina sigla lo segnalava come errore grave. Un colore esplicito funziona
   sia sul grigio chiaro sia in tema scuro. */
.empty-state__text { margin: 0.25rem 0 0; font-size: var(--text-xs); color: var(--text-secondary); }
.empty-state__action { margin-top: 0.85rem; }

/* Dentro una cella di tabella (table-cell: col flex perdeva il colspan). */
.empty-state--cell { display: table-cell; padding: 2.75rem 1rem; color: var(--text-secondary); text-align: center; }
.empty-state--cell > * { display: block; }
.empty-state--cell > .empty-state__icon { margin-inline: auto; }

/* Dentro un pannello che ha gia' un bordo: niente padding, niente icona. */
.empty-state--inline { padding: 0; margin-bottom: 1rem; }

/* Solo la riga di testo, grande: com'era lo stato vuoto delle pagine.
   La dimensione del testo torna a quella della pagina (16px ereditati invece
   dei 13.6px del componente), cosi' anche un testo messo direttamente dentro
   resta com'era. */
.empty-state--plain {
  display: block;
  padding: 3rem 1rem;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: normal;
}

.empty-state--plain p { margin: 1rem 0; font-size: 1.1rem; }

/* Avviso dentro una finestra: grigio, piccolo, centrato. */
.empty-state--note {
  display: block;
  padding: 0;
  margin: 0.5rem 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  text-align: center;
}
/* Pagina con dati dove si puo' anche creare qualcosa: un po' piu' di aria. */
.empty-state--actionable { padding: 3rem 1rem; }

/* Il kanban e' stretto: le colonne hanno poco spazio e lo stato vuoto deve
   stare dentro, non occupare la colonna. */
.kanban-column .empty-state { padding: 0.9rem 0.7rem; }
.kanban-column .empty-state p { margin: 0; }