/* ============================================================
   Componenti riutilizzabili
   ============================================================ */

/* ── Badge stato ── */
.pm-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: var(--pm-radius-sm);
  font-size: 11px; font-weight: 500;
  white-space: nowrap;
}
.pm-badge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.pm-badge-ok   { background: var(--pm-ok-bg);   color: var(--pm-ok-text); }
.pm-badge-warn { background: var(--pm-warn-bg); color: var(--pm-warn-text); }
.pm-badge-err  { background: var(--pm-err-bg);  color: var(--pm-err-text); }
.pm-badge-run  { background: var(--pm-run-bg);  color: var(--pm-run-text); }
.pm-badge-exec { background: var(--pm-exec-bg); color: var(--pm-exec-text); }
.pm-badge-sosp { background: var(--pm-sosp-bg); color: var(--pm-sosp-text); }
.pm-badge-idle { background: var(--pm-idle-bg); color: var(--pm-idle-text); }
.pm-badge-off  { background: var(--pm-slate-100); color: var(--pm-slate-400); }

/* Badge interattivo (button reset + badge look + cursore pointer) */
.pm-badge-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: var(--pm-radius-sm);
  font-size: 11px; font-weight: 500; white-space: nowrap;
  border: none; cursor: pointer;
  transition: opacity .15s;
}
.pm-badge-btn:hover { opacity: .8; }

.pm-role-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--pm-radius-sm);
  font-size: 11px; font-weight: 500;
}
.pm-role-badge-admin    { background: var(--pm-blue-50);   color: var(--pm-blue-700); }
.pm-role-badge-gus      { background: var(--pm-teal-50);   color: var(--pm-teal-700); }
.pm-role-badge-customer { background: var(--pm-slate-100); color: var(--pm-slate-600); }

/* ── KPI Card ── */
.pm-kpi-card {
  background: var(--pm-bg-card);
  border: 0.5px solid var(--pm-border);
  border-radius: var(--pm-radius-lg);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  height: 100%;
}
.pm-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  border-radius: var(--pm-radius-lg) 0 0 var(--pm-radius-lg);
  background: var(--pm-kpi-accent, var(--pm-blue-500));
}
.pm-kpi-label {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--pm-slate-400);
  margin-bottom: 8px;
}
.pm-kpi-value {
  font-size: 26px; font-weight: 500;
  line-height: 1;
  color: var(--pm-slate-900);
}
.pm-kpi-sub {
  font-size: 11px; color: var(--pm-slate-600);
  margin-top: 5px;
}
.pm-trend-up { color: var(--pm-ok-dot); font-weight: 500; }
.pm-trend-dn { color: var(--pm-err-dot); font-weight: 500; }

/* ── Tabella densa ── */
.pm-table-card {
  background: var(--pm-bg-card);
  border: 0.5px solid var(--pm-border);
  border-radius: var(--pm-radius-lg);
  overflow: hidden;
}
.pm-table-header {
  padding: 10px 16px;
  border-bottom: 0.5px solid var(--pm-border-sub);
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}
.pm-table-header-title { font-size: 13px; font-weight: 500; color: var(--pm-slate-900); }

.pm-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px;
  margin: 0;
}
.pm-table thead th {
  padding: 7px 12px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--pm-slate-400);
  background: #FAFBFC;
  border-bottom: 0.5px solid var(--pm-border-sub);
  text-align: left;
  white-space: nowrap;
}
.pm-table thead th[data-sort-type] { cursor: pointer; user-select: none; }
.pm-table thead th[data-sort-type]:hover { color: var(--pm-slate-800); }
.pm-table thead th[data-sort-type]::after { content: ''; display: inline-block; width: 10px; }
.pm-table thead th.pm-sort-asc::after  { content: '▲'; font-size: 8px; margin-left: 4px; color: var(--pm-blue-500); }
.pm-table thead th.pm-sort-desc::after { content: '▼'; font-size: 8px; margin-left: 4px; color: var(--pm-blue-500); }
.pm-table tbody td {
  padding: 7px 12px;
  color: var(--pm-slate-800);
  border-bottom: 0.5px solid var(--pm-border-row);
  vertical-align: middle;
}
.pm-table tbody tr:last-child td { border-bottom: none; }
.pm-table tbody tr:nth-child(even) td { background: var(--pm-bg-row-alt); }
.pm-table tbody tr:hover td { background: var(--pm-slate-50); }
.pm-table .text-end { text-align: right; }
.pm-table .text-center { text-align: center; }

/* Progress inline */
.pm-job-cell { display: flex; flex-direction: column; gap: 3px; min-width: 70px; }
.pm-job-nums { font-size: 12px; font-weight: 500; color: var(--pm-slate-900); }
.pm-progress-bar {
  height: 4px; border-radius: 2px;
  background: var(--pm-slate-100);
  overflow: hidden;
}
.pm-progress-fill { height: 100%; border-radius: 2px; }

/* Azioni inline tabella — icona + tooltip (title), niente più frasi-link */
.pm-table-action {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none;
  color: var(--pm-blue-500);
  font-size: 15px; cursor: pointer;
  padding: 3px; text-decoration: none;
  white-space: nowrap;
  border-radius: var(--pm-radius-sm);
  transition: background 0.1s, color 0.1s;
}
.pm-table-action:hover { color: var(--pm-blue-700); background: var(--pm-blue-50); text-decoration: none; }
.pm-table-action.danger { color: var(--pm-err-text); }
.pm-table-action.danger:hover { color: var(--pm-err-dot); background: var(--pm-err-bg); }
.pm-table-action[disabled],
span.pm-table-action { cursor: default; }

/* Colonna "Scheduler per ambiente" — una riga per ambiente (badge · coda · comandi).
   Il chevron sull'header aggiunge .pm-sched-nascosti alla tabella: restano i soli badge,
   affiancati. */
.pm-sched-list { display: flex; flex-direction: column; gap: 2px; }
.pm-sched-row { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.pm-sched-dett { display: inline-flex; align-items: center; gap: 2px; }
.pm-sched-coda {
  max-width: 160px; overflow: hidden; text-overflow: ellipsis;
  margin-right: 2px;
}
.pm-sched-nascosti .pm-sched-dett { display: none; }
.pm-sched-nascosti .pm-sched-list { flex-direction: row; flex-wrap: wrap; gap: 4px; }
.pm-sched-toggle {
  background: none; border: none; padding: 0 2px; margin-left: 2px;
  color: var(--pm-slate-400); cursor: pointer; font-size: 13px;
  vertical-align: middle; border-radius: var(--pm-radius-sm);
}
.pm-sched-toggle:hover { color: var(--pm-blue-700); background: var(--pm-blue-50); }
/* Lettura della pianificazione in corso: resta visibile anche con i dettagli nascosti. */
.pm-sched-lettura { color: var(--pm-blue-500); cursor: default; }
.pm-sched-lettura-ko { color: var(--pm-warn-dot); cursor: pointer; background: none; border: none; padding: 0; }
/* Icona "i" che apre una spiegazione (es. perché una lettura non è avvenuta). */
.pm-info-btn {
  background: none; border: none; padding: 0 2px; cursor: pointer;
  color: var(--pm-blue-500); font-size: 14px; vertical-align: middle;
  border-radius: var(--pm-radius-sm);
}
.pm-info-btn:hover { color: var(--pm-blue-700); background: var(--pm-blue-50); }
.pm-spin { display: inline-block; animation: pm-spin 1.2s linear infinite; }
@media (prefers-reduced-motion: reduce) { .pm-spin { animation-duration: 4s; } }

/* ── Filter pill ── */
.pm-filter-btn {
  padding: 3px 10px; border-radius: var(--pm-radius-sm);
  font-size: 11px; font-weight: 500;
  border: 0.5px solid var(--pm-border);
  background: var(--pm-bg-app); color: var(--pm-slate-600);
  cursor: pointer; transition: background 0.1s, color 0.1s;
}
.pm-filter-btn:hover { background: var(--pm-slate-100); }
.pm-filter-btn.active {
  background: var(--pm-blue-500);
  border-color: var(--pm-blue-500);
  color: #fff;
}

/* ── Card generica ── */
.pm-card {
  background: var(--pm-bg-card);
  border: 0.5px solid var(--pm-border);
  border-radius: var(--pm-radius-lg);
  padding: 16px 18px;
}
.pm-card-title {
  font-size: 13px; font-weight: 500;
  color: var(--pm-slate-900);
  margin-bottom: 12px;
}

/* ── Form controls ── */
.pm-form-group { margin-bottom: 16px; }
.pm-label-text {
  font-size: 12px; font-weight: 500;
  color: var(--pm-slate-600);
  display: block; margin-bottom: 6px;
}
.pm-input,
.pm-select,
textarea.pm-input {
  display: block; width: 100%;
  padding: 7px 10px;
  font-size: 13px; font-family: var(--pm-font-sans);
  color: var(--pm-slate-900);
  background: var(--pm-bg-card);
  border: 0.5px solid var(--pm-border);
  border-radius: var(--pm-radius-md);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  box-sizing: border-box;
}
.pm-input:hover, .pm-select:hover { border-color: var(--pm-slate-400); }
.pm-input:focus, .pm-select:focus {
  border-color: var(--pm-blue-500);
  box-shadow: 0 0 0 3px var(--pm-blue-100);
}
.pm-input[readonly] { background: var(--pm-bg-app); color: var(--pm-slate-600); }
.pm-input:disabled, .pm-select:disabled {
  background: var(--pm-slate-50);
  color: var(--pm-slate-500);
  border-color: var(--pm-border-sub);
  border-style: dashed;
  cursor: not-allowed;
  opacity: 1;
}
.pm-input:disabled:hover, .pm-select:disabled:hover { border-color: var(--pm-border-sub); }
.pm-input.error, .input-validation-error {
  border-color: var(--pm-err-dot);
  box-shadow: 0 0 0 3px var(--pm-err-bg);
}
.pm-input-hint { font-size: 11px; color: var(--pm-slate-400); margin-top: 4px; }
.pm-input-error,
.field-validation-error,
.text-danger {
  font-size: 11px; color: var(--pm-err-text);
  margin-top: 4px; display: block;
}

.pm-checkbox-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--pm-slate-600); cursor: pointer;
}
.pm-checkbox-label input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: var(--pm-blue-500);
}

/* ── Bottoni ── */
.pm-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--pm-radius-md);
  font-size: 13px; font-weight: 500;
  cursor: pointer; border: 0.5px solid transparent;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.2;
}
.pm-btn:hover { text-decoration: none; }
.pm-btn-primary {
  background: var(--pm-blue-500);
  border-color: var(--pm-blue-500);
  color: #fff;
}
.pm-btn-primary:hover { background: var(--pm-blue-700); border-color: var(--pm-blue-700); color: #fff; }

.pm-btn-secondary {
  background: var(--pm-bg-card);
  border-color: var(--pm-border);
  color: var(--pm-slate-800);
}
.pm-btn-secondary:hover { background: var(--pm-slate-100); color: var(--pm-slate-900); }

.pm-btn-danger {
  background: var(--pm-err-bg);
  border-color: var(--pm-err-dot);
  color: var(--pm-err-text);
}
.pm-btn-danger:hover { background: var(--pm-err-dot); color: #fff; }

.pm-btn-warning {
  background: var(--pm-warn-bg);
  border-color: var(--pm-warn-dot);
  color: var(--pm-warn-text);
}
.pm-btn-warning:hover { background: var(--pm-warn-dot); color: #fff; }

.pm-btn-sm   { padding: 4px 10px; font-size: 12px; }
.pm-btn-icon { padding: 7px; }
.pm-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ── Alert ── */
.pm-alert {
  padding: 10px 14px;
  border-radius: var(--pm-radius-md);
  font-size: 12px;
  margin-bottom: 16px;
  border: 0.5px solid transparent;
}
.pm-alert-error   { background: var(--pm-err-bg);  border-color: var(--pm-err-dot);  color: var(--pm-err-text); }
.pm-alert-warn    { background: var(--pm-warn-bg); border-color: var(--pm-warn-dot); color: var(--pm-warn-text); }
.pm-alert-info    { background: var(--pm-blue-50); border-color: var(--pm-blue-300); color: var(--pm-blue-700); }
.pm-alert-ok      { background: var(--pm-ok-bg);   border-color: var(--pm-ok-dot);   color: var(--pm-ok-text); }

/* ── Code block ── */
.pm-code {
  display: block; font-family: var(--pm-font-mono); font-size: 12px;
  background: var(--pm-slate-950); color: var(--pm-slate-100);
  padding: 12px 14px; border-radius: var(--pm-radius-md);
  white-space: pre-wrap; word-break: break-all; overflow-x: auto;
}

/* ── Tabs ── */
.pm-tabs { display: flex; gap: 4px; border-bottom: 0.5px solid var(--pm-border); }
.pm-tab {
  padding: 8px 14px; font-size: 13px; font-weight: 500;
  color: var(--pm-slate-600); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.1s, border-color 0.1s;
}
.pm-tab:hover { color: var(--pm-slate-900); text-decoration: none; }
.pm-tab.active { color: var(--pm-blue-500); border-color: var(--pm-blue-500); }

/* ── Tree-table (log gerarchico) ── */
.pm-tree-row { position: relative; }
.pm-tree-row.level-2 > td:first-child { padding-left: 28px; }
.pm-tree-row.level-2 > td:first-child::before {
  content: '';
  position: absolute;
  left: 16px; top: 0; bottom: 0;
  width: 1px;
  background: var(--pm-border-sub);
}
.pm-tree-row.level-3 > td:first-child { padding-left: 48px; }
.pm-tree-row.level-3 > td:first-child::before {
  content: '';
  position: absolute;
  left: 36px; top: 0; bottom: 0;
  width: 1px;
  background: var(--pm-border-sub);
}

.pm-expand-btn {
  background: none; border: 0.5px solid var(--pm-border);
  border-radius: 4px; width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--pm-slate-400);
  font-size: 11px; flex-shrink: 0;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  padding: 0;
}
.pm-expand-btn:hover { background: var(--pm-slate-100); color: var(--pm-slate-800); }
.pm-expand-btn.open  {
  background: var(--pm-blue-50);
  border-color: var(--pm-blue-300);
  color: var(--pm-blue-500);
}

.pm-tree-child { display: none; }
.pm-tree-child.open { display: table-row; }

/* ── Empty / Loading state ── */
.pm-empty-state {
  display: flex; flex-direction: column; align-items: center;
  padding: 48px 24px; text-align: center;
}
.pm-empty-icon   { font-size: 32px; color: var(--pm-slate-200); margin-bottom: 12px; }
.pm-empty-title  { font-size: 15px; font-weight: 500; color: var(--pm-slate-800); margin-bottom: 6px; }
.pm-empty-desc   { font-size: 13px; color: var(--pm-slate-400); margin-bottom: 16px; max-width: 360px; }

.pm-loading-state {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 40px;
}
.pm-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--pm-slate-200);
  border-top-color: var(--pm-blue-500);
  animation: pm-spin 0.7s linear infinite;
}
@keyframes pm-spin { to { transform: rotate(360deg); } }
.pm-loading-text { font-size: 13px; color: var(--pm-slate-400); }

/* ── Modal (dialog nativo, niente JS oltre a showModal()/close()) ── */
dialog.pm-modal {
  border: 0.5px solid var(--pm-border);
  border-radius: var(--pm-radius-lg);
  padding: 0;
  width: 420px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
}
dialog.pm-modal::backdrop { background: rgba(15, 23, 42, .4); }
.pm-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; border-bottom: 0.5px solid var(--pm-border-sub);
}
.pm-modal-title { font-size: 14px; font-weight: 500; color: var(--pm-slate-900); }
.pm-modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--pm-slate-400); font-size: 20px; padding: 0; line-height: 1;
}
.pm-modal-close:hover { color: var(--pm-slate-800); }
.pm-modal-actions { display: flex; gap: 8px; padding: 12px 16px 0; }
.pm-modal-body { padding: 14px 16px; }
.pm-modal-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 6px 0; font-size: 12px;
  border-bottom: 0.5px solid var(--pm-border-sub);
}
.pm-modal-row:last-child { border-bottom: none; }
.pm-modal-row > span:first-child { color: var(--pm-slate-400); }
.pm-modal-row > span:last-child { color: var(--pm-slate-900); font-weight: 500; text-align: right; }
.pm-modal-footer { padding: 12px 16px 16px; border-top: 0.5px solid var(--pm-border-sub); margin: 0; }

/* Utility */
.pm-flex { display: flex; }
.pm-flex-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pm-gap-1 { gap: 4px; }
.pm-gap-2 { gap: 8px; }
.pm-mt-2 { margin-top: 8px; }
.pm-mt-3 { margin-top: 12px; }
.pm-mt-4 { margin-top: 16px; }
.pm-mb-3 { margin-bottom: 12px; }
.pm-mb-4 { margin-bottom: 16px; }
.pm-mb-6 { margin-bottom: 24px; }

/* ── Modifica pianificazione (pm-pianificazione-modifica.js) ── */
dialog.pm-modal.pm-modal-wide { width: 680px; }
.pm-modal-wide .pm-modal-body.pm-modal-scroll { max-height: 64vh; overflow-y: auto; }
.pm-attiv {
  border: 0.5px solid var(--pm-border);
  border-radius: var(--pm-radius-md);
  padding: 10px 12px; margin-bottom: 10px;
  font-size: 12px; color: var(--pm-slate-600);
}
.pm-attiv-testa { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.pm-attiv-titolo { font-size: 13px; font-weight: 500; color: var(--pm-slate-900); }
.pm-attiv-riga { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; }
.pm-attiv-etichetta { flex: 0 0 96px; color: var(--pm-slate-500); padding-top: 5px; }
.pm-attiv-campi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; flex: 1; }
.pm-attiv-avanzate { border-top: 0.5px solid var(--pm-border-sub); margin-top: 6px; padding-top: 8px; }
.pm-attiv-avanzate > .pm-attiv-etichetta { display: block; padding: 0 0 6px; }
.pm-attiv-sep { flex-basis: 100%; height: 0; }
.pm-input.pm-input-auto, .pm-select.pm-input-auto { display: inline-block; width: auto; padding: 4px 8px; }
.pm-input.pm-input-num { display: inline-block; width: 70px; padding: 4px 8px; }
.pm-scelta { position: relative; display: inline-flex; cursor: pointer; }
.pm-scelta input { position: absolute; opacity: 0; pointer-events: none; }
.pm-scelta span {
  min-width: 34px; padding: 3px 7px; text-align: center;
  border: 0.5px solid var(--pm-border); border-radius: var(--pm-radius-md);
  background: var(--pm-bg-card); color: var(--pm-slate-600); user-select: none;
}
.pm-scelta input:checked + span { background: var(--pm-blue-500); border-color: var(--pm-blue-500); color: #fff; }
.pm-scelta input:focus-visible + span { box-shadow: 0 0 0 3px var(--pm-blue-100); }
.pm-scelta input:disabled + span { opacity: .45; cursor: not-allowed; }