/* ============================================================
   RIFINITURA GRAFICA — 2° passaggio (16/10)
   Cornice «a pannello»: la barra laterale scura fa da sfondo e l'area
   di lavoro e' un pannello chiaro arrotondato (sopra gli 820 px).
   Titoli in Plus Jakarta Sans, pulsanti, campi, tabelle, schede,
   finestre e avvisi rifiniti. Solo aspetto: nessun testo nuovo.
   ============================================================ */

:root {
  --titoli: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cornice: #0a1016;
}

/* ---------- Cornice ---------- */
@media (min-width: 821px) {
  #vista-app {
    background:
      radial-gradient(280px 220px at 6% 0%, rgba(31, 199, 192, .10), transparent 70%),
      var(--cornice);
  }
  .sidebar { background: transparent; border-right: 0; }
  .contenuto {
    margin: 10px 10px 10px 0;
    min-height: calc(100dvh - 20px);
    border-radius: 20px;
    background:
      radial-gradient(1000px 320px at 100% 0%, rgba(10, 126, 164, .05), transparent 70%),
      var(--n-50);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 20px 50px -20px rgba(0, 0, 0, .6);
  }
  /* le colonne della bacheca perdono i 20 px della cornice */
  .colonna { min-height: calc(100dvh - 255px); max-height: calc(100dvh - 255px); }
  .kanban[data-board] .colonna[data-fase] { max-height: calc(var(--kanban-h, calc(100dvh - 235px)) - 12px); }
}
@media (min-width: 821px) and (max-width: 1280px) {
  .contenuto { margin: 8px 8px 8px 0; border-radius: 18px; min-height: calc(100dvh - 16px); }
}

/* ---------- Titoli ---------- */
.pagina-testata h2,
.modal-head h3,
.stat-card .stat-valore,
.logo-testo {
  font-family: var(--titoli);
}
.pagina-testata h2 { font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
@media (max-width: 820px) { .pagina-testata h2 { font-size: 21px; } }
.logo-testo { font-weight: 800; letter-spacing: -.02em; }
/* anche la pagina di accesso */
.am-titolo, .login-titolo { font-family: var(--titoli); font-weight: 800; }

/* ---------- Pulsanti ---------- */
.btn { border-radius: 10px; }
.btn-primario,
.btn-primario:hover {
  background: linear-gradient(180deg, #0c80aa 0%, #0a6a8f 100%);
  color: #fff;
  border-color: transparent;
  box-shadow:
    0 1px 2px rgba(5, 60, 85, .35),
    0 4px 12px -4px rgba(10, 111, 149, .45),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn-primario:hover {
  background: linear-gradient(180deg, #0d8bb8 0%, #0a7199 100%);
  box-shadow:
    0 1px 2px rgba(5, 60, 85, .35),
    0 8px 18px -6px rgba(10, 111, 149, .55),
    inset 0 1px 0 rgba(255, 255, 255, .2);
}
.btn-secondario {
  background: var(--n-0);
  border-color: var(--n-200);
  color: var(--n-700);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.btn-secondario:hover { background: var(--n-25); border-color: var(--n-300); color: var(--n-900); }

/* ---------- Campi ---------- */
/* :where = peso minimo: i campi gia' disegnati a parte (ricerca, accesso…) restano come sono */
input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])),
select, textarea {
  border-color: var(--n-200);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
input:where(:not([type="checkbox"], [type="radio"], [type="range"])):hover,
select:hover, textarea:hover { border-color: var(--n-300); }
input:focus, select:focus, textarea:focus {
  border-color: var(--brand-600);
  box-shadow: 0 0 0 4px rgba(10, 111, 149, .12);
}

/* ---------- Filtri a pillola ---------- */
.pillola {
  border-color: var(--n-200);
  color: var(--n-700);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.pillola:hover { background: var(--n-25); border-color: var(--n-300); }
.pillola.attiva {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
  box-shadow: 0 4px 10px -4px rgba(0, 84, 120, .5);
}

/* ---------- Tabelle ---------- */
.tabella-wrap {
  border-color: var(--n-200);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px -10px rgba(16, 24, 40, .1);
}
.tabella th {
  background: var(--n-25);
  color: var(--n-500);
  font-size: 10.5px;
  letter-spacing: .09em;
  padding-top: 12px; padding-bottom: 12px;
}
.tabella td { border-bottom-color: var(--n-100); }
.tabella tbody tr:hover { background: color-mix(in srgb, var(--brand-50) 70%, var(--n-0)); }

/* ---------- Riquadri dei numeri (Dashboard) ---------- */
.stat-card {
  background: var(--n-0);
  border-color: var(--n-200);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px -10px rgba(16, 24, 40, .1);
}
.stat-card::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--acc, var(--brand-600)), transparent 75%);
  opacity: .55;
  pointer-events: none;
}
.stat-card:hover {
  border-color: var(--n-300);
  box-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 14px 30px -14px rgba(16, 24, 40, .22);
  transform: translateY(-2px);
}
.stat-card .stat-label::before { border-radius: 3px; filter: none; }
.stat-card .stat-valore { font-weight: 800; letter-spacing: -.035em; }

/* ---------- Schede della bacheca ---------- */
.card {
  border-color: var(--n-200);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 3px 8px -4px rgba(16, 24, 40, .06);
}
.card:hover {
  border-color: var(--n-300);
  box-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 12px 26px -12px rgba(16, 24, 40, .25);
  transform: translateY(-2px);
}

/* ---------- Finestre ---------- */
.modal-overlay {
  background: rgba(6, 12, 18, .55);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
}
.modal {
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .06), 0 30px 70px -20px rgba(6, 12, 18, .5);
}
.modal-head { padding: 18px 22px; border-bottom-color: var(--n-100); }
.modal-head h3 { font-size: 17px; font-weight: 750; letter-spacing: -.02em; }

/* ---------- Avvisi a comparsa ---------- */
.toast {
  background: rgba(13, 20, 28, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  box-shadow: 0 16px 40px -12px rgba(6, 12, 18, .55);
}
.toast-errore { background: rgba(180, 35, 24, .96); border-color: rgba(255, 255, 255, .12); }

/* ---------- Barre di scorrimento sottili ---------- */
.contenuto ::-webkit-scrollbar { width: 9px; height: 9px; }
.contenuto ::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, .28);
  border-radius: 99px;
  border: 2px solid transparent; background-clip: content-box;
}
.contenuto ::-webkit-scrollbar-thumb:hover { background-color: rgba(100, 116, 139, .45); }

/* ---------- Tema scuro ---------- */
[data-theme="dark"] { --cornice: #06090d; }
@media (min-width: 821px) {
  [data-theme="dark"] .contenuto {
    background: radial-gradient(1000px 320px at 100% 0%, rgba(79, 179, 217, .05), transparent 70%), var(--n-50);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 20px 50px -20px rgba(0, 0, 0, .8);
  }
}
[data-theme="dark"] .btn-secondario { background: var(--n-0); border-color: var(--n-200); color: var(--n-700); }
[data-theme="dark"] .btn-secondario:hover { background: var(--n-100); border-color: var(--n-300); color: var(--n-900); }
[data-theme="dark"] .pillola.attiva { background: var(--brand-pieno); border-color: var(--brand-pieno); }
[data-theme="dark"] .tabella th { background: var(--n-25); }
[data-theme="dark"] .tabella tbody tr:hover { background: var(--n-25); }
[data-theme="dark"] .stat-card,
[data-theme="dark"] .card { background: var(--n-0); border-color: var(--n-200); }
[data-theme="dark"] .modal { box-shadow: 0 0 0 1px var(--n-200), 0 30px 70px -20px rgba(0, 0, 0, .8); }