/* ============================================================
   ArtI — ponte fra il vecchio vocabolario e il nuovo design

   Le aree private (cruscotti, moduli, agenda) sono scritte con le
   classi del foglio di stile precedente: .btn-primary, .card-body,
   .text-muted, .dashboard-layout, e le variabili --green, --gray-*.

   Riscrivere ventotto viste a mano sarebbe stato lungo e avrebbe
   introdotto errori. Qui invece si traduce il vecchio vocabolario nel
   nuovo: le pagine cambiano aspetto senza essere toccate.

   Va caricato DOPO arti.css e arti-app.css.
   ============================================================ */

/* ---------- Variabili del vecchio impianto ----------
   Molte viste le usano negli stili inline: mappandole ai colori nuovi
   si aggiornano anche quelli, senza aprire i file. */
:root {
  --green:        var(--verde);
  --green-dark:   #0A1F19;
  --green-light:  #E7EFE9;
  --ocra:         var(--giallo);
  --ocra-dark:    #D9A32A;
  --ocra-light:   #FCF2DC;

  --gray-50:      #FAF7F0;
  --gray-100:     var(--crema);
  --gray-200:     var(--linea);
  --gray-400:     #8A857A;
  --gray-500:     #6F6A60;
  --gray-600:     var(--ink-70);
  --gray-700:     #3A362F;
  --gray-800:     var(--ink);

  --danger:       var(--rosso);
  --danger-light: #F7E4DE;
  --success:      #2F6B4F;
  --success-light:#E3F0E7;

  --radius:       var(--r-m);
  --radius-lg:    var(--r-l);
  --shadow-sm:    var(--ombra);
  --shadow:       var(--ombra);
  --shadow-lg:    var(--ombra-alta);
  --transition:   .18s ease;
}

/* ---------- Pulsanti ----------
   Il nuovo design usa i suffissi BEM (--), il vecchio classi separate. */
.btn-primary { background: var(--arancio); color: var(--crema); }
.btn-primary:hover { background: #94371A; }

.btn-ocra { background: var(--giallo); color: var(--ink); }
.btn-ocra:hover { background: #E0AC2E; }

.btn-outline {
  background: none; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--linea-forte);
}
.btn-outline:hover { background: rgba(20,18,14,.05); }

.btn-outline-white {
  background: none; color: var(--crema);
  box-shadow: inset 0 0 0 1.5px var(--linea-chiara);
}

.btn-danger { background: var(--rosso); color: var(--crema); }

.btn-sm { min-height: 38px; padding: 0 var(--s3); font-size: var(--fs-s); }
.btn-lg { min-height: 54px; padding: 0 var(--s6); font-size: var(--fs-l); }

/* ---------- Riquadri ---------- */
.card-header {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--linea);
  font: 600 var(--fs-m)/1.3 var(--font-testo);
  color: var(--ink);
}
.card-body   { padding: var(--s4); }
.card-footer { padding: var(--s3) var(--s4); border-top: 1px solid var(--linea); }

/* ---------- Etichette ---------- */
.badge-green  { background: var(--verde-2); color: var(--crema); }
.badge-ocra   { background: var(--giallo); color: var(--ink); }
.badge-gray   { background: rgba(20,18,14,.07); color: var(--ink-70); }
.badge-danger { background: var(--rosso); color: var(--crema); }

/* ---------- Avvisi ---------- */
.alert-success { background: #E3F0E7; color: #1E4A36; }
.alert-danger  { background: #F7E4DE; color: #7A2110; }
.alert-info    { background: rgba(14,42,34,.06); color: var(--ink); }
.alert-warning { background: var(--ocra-light); color: #6B4E0E; }

/* ---------- Moduli ---------- */
.form-group { margin-bottom: var(--s4); }
.form-label {
  display: block; margin-bottom: 6px;
  font: 600 var(--fs-s)/1.2 var(--font-testo); color: var(--ink);
}
.form-hint  { margin-top: 4px; font-size: var(--fs-xs); color: var(--ink-70); }
.form-error { margin-top: 4px; font-size: var(--fs-xs); color: var(--rosso); font-weight: 600; }
textarea.form-control { min-height: 130px; padding: var(--s3); line-height: 1.5; }
select.form-control   { cursor: pointer; }
input[type="file"].form-control { padding: var(--s3); min-height: auto; }

/* ---------- Intestazione di pagina ----------
   Diventa la fascia verde del portale, così le aree private hanno la
   stessa apertura delle pagine pubbliche. */
.page-header {
  background: var(--verde);
  color: var(--crema);
  padding: var(--s6) 0;
}
.page-header h1 {
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: -.035em; line-height: 1.05;
  font-size: var(--fs-h1); margin: 0;
}
.page-header p { color: var(--crema-75); margin: var(--s2) 0 0; font-size: var(--fs-m); }
.page-header a { color: var(--giallo); }

/* ---------- Impianto a due colonne ---------- */
.dashboard-layout { display: grid; grid-template-columns: 1fr; gap: var(--s5); }
@media (min-width: 900px) {
  .dashboard-layout { grid-template-columns: 250px 1fr; align-items: start; }
}

.sidebar {
  background: var(--bianco);
  border-radius: var(--r-l);
  padding: var(--s4);
  box-shadow: var(--ombra);
}
.sidebar-title {
  font: 700 10.5px/1 var(--font-testo);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-50); margin-bottom: var(--s3);
}
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav a {
  display: flex; align-items: center; min-height: 42px;
  padding: 0 var(--s3); border-radius: var(--r-s);
  color: var(--ink-70); font-size: var(--fs-m); font-weight: 500;
}
.sidebar-nav a:hover { background: rgba(20,18,14,.05); text-decoration: none; color: var(--ink); }
.sidebar-nav a.active { background: var(--verde); color: var(--crema); font-weight: 600; }

/* ---------- Utilità ---------- */
.text-muted  { color: var(--ink-70); }
.text-small  { font-size: var(--fs-s); line-height: 1.5; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-green  { color: var(--verde-2); }
.text-ocra   { color: var(--arancio-scuro); }
.text-danger { color: var(--rosso); }
.fw-bold     { font-weight: 700; }

.container-sm { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 var(--s4); }
@media (min-width: 720px) { .container-sm { padding: 0 var(--s6); } }

.section-sm { padding: var(--s5) 0; }
.divider { border: none; border-top: 1px solid var(--linea); margin: var(--s5) 0; }

.d-flex { display: flex; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--s1); } .gap-2 { gap: var(--s2); } .gap-3 { gap: var(--s3); }
.mb-1 { margin-bottom: var(--s1); } .mb-2 { margin-bottom: var(--s2); }
.mb-3 { margin-bottom: var(--s3); } .mb-4 { margin-bottom: var(--s4); }
.mb-5 { margin-bottom: var(--s6); }
.mt-1 { margin-top: var(--s1); } .mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s6); }

.table-responsive { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--s3); text-align: left; border-bottom: 1px solid var(--linea); }
th { font: 600 var(--fs-s)/1.2 var(--font-testo); color: var(--ink-70); }