/**
 * Stili della sezione MID.
 *
 * FILE CONGELATO nella struttura: le classi qui sotto sono il vocabolario
 * condiviso. Un pannello che ha bisogno di qualcosa di suo lo mette in
 * public/mid/panels/<nome>.css e lo carica da se, cosi due sessioni non si
 * incontrano in questo file. Vedi docs/mid/OWNERSHIP.md.
 */

.mid-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line, #e2e5ea);
  margin-bottom: 20px;
}

.mid-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  font: inherit;
  color: var(--muted, #6b7280);
  cursor: pointer;
}

.mid-tab:hover { color: var(--ink, #111827); }

.mid-tab.active {
  color: var(--ink, #111827);
  border-bottom-color: var(--accent, #2563eb);
}

.mid-body { min-height: 200px; }

/* Stato di un passo di provisioning: stesso vocabolario ovunque, cosi la
   console si legge senza dover ricordare quale colore vuol dire cosa. */
.mid-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.6;
  white-space: nowrap;
}

.mid-status--done    { background: #dcfce7; color: #14532d; }
.mid-status--running { background: #dbeafe; color: #1e3a8a; }
.mid-status--pending { background: #f1f5f9; color: #475569; }
.mid-status--manual  { background: #fef3c7; color: #78350f; }
.mid-status--failed  { background: #fee2e2; color: #7f1d1d; }
.mid-status--skipped { background: #f1f5f9; color: #94a3b8; }

.mid-steps { display: grid; gap: 10px; }

.mid-step {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line, #e2e5ea);
  border-radius: 10px;
}

.mid-step__meta { font-size: 13px; color: var(--muted, #6b7280); }
.mid-step__blocked { color: #b45309; }

.mid-empty { color: var(--muted, #6b7280); padding: 24px 0; }

/* Elenco a sinistra, scheda a destra: la stessa forma del tab Applications,
   cosi chi passa da un tab all'altro non deve reimparare dove sono le cose. */
.mid-split {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 900px) {
  .mid-split { grid-template-columns: 1fr; }
}

.mid-rows { display: grid; gap: 6px; margin-top: 12px; }

.mid-row {
  display: grid;
  gap: 2px;
  text-align: left;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line, #e2e5ea);
  border-radius: 10px;
  background: none;
  font: inherit;
  cursor: pointer;
}

.mid-row:hover { border-color: var(--accent, #2563eb); }
.mid-row.active { border-color: var(--accent, #2563eb); background: rgba(37, 99, 235, 0.06); }

.mid-form { display: grid; gap: 12px; }
.mid-form h3 { margin: 12px 0 0; font-size: 14px; }

.mid-form__head {
  display: flex;
  gap: 10px;
  align-items: center;
}

.mid-form__foot {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-top: 8px;
}

.mid-card {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid var(--line, #e2e5ea);
  border-radius: 10px;
}

.mid-card h3 { margin: 0 0 10px; font-size: 14px; }

.mid-problems, .mid-missing {
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
}

.mid-problems li { color: #b91c1c; }
.mid-problems code { font-size: 12px; opacity: 0.75; }
.mid-missing li { color: var(--muted, #6b7280); }

.mid-transitions { display: flex; gap: 8px; flex-wrap: wrap; }
.mid-transitions .btn[disabled] { opacity: 0.45; cursor: not-allowed; }