/* ===== MODERN LAYER (2026) =====
   Ritocchi visivi sopra i fogli esistenti: niente classi rimosse o rinominate,
   niente !important. Tutte le animazioni rispettano prefers-reduced-motion. */

:root {
  /* Il sito ha un suo interruttore chiaro/scuro (html[data-theme="dark"]):
     i controlli nativi (select, input, checkbox, calendari) devono seguire
     il tema del sito e NON quello del sistema operativo, altrimenti con
     OS scuro e sito chiaro gli sfondi diventano scuri e illeggibili. */
  color-scheme: light;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
  --topbar-blur: blur(14px) saturate(1.3);
}

html[data-theme="dark"] {
  color-scheme: dark;
}

/* ----- Campi nativi sempre leggibili nel tema del sito -----
   Questi campi non hanno una classe di stile dedicata e prima
   ereditavano lo sfondo dal browser (scuro con OS in dark mode). */
.sigla-search input,
.monthly-nav select,
.monthly-nav input,
.monthly-table input,
.monthly-table select,
.monthly-details input,
.monthly-details select,
input.sigla-input,
select.sigla-input {
  background-color: var(--surface);
  color: var(--text);
}

/* ----- Topbar in vetro ----- */
.topbar {
  backdrop-filter: var(--topbar-blur);
  -webkit-backdrop-filter: var(--topbar-blur);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.topbar-logo {
  transition: transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-out);
}

.topbar-brand:hover .topbar-logo {
  transform: rotate(-6deg) scale(1.05);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
}

/* NB: l'indicatore della sezione attiva (.section-link::after) e definito in
   components.css, nel blocco "INTESTAZIONE A DUE PIANI": qui stanno solo gli
   effetti di superficie (transizioni), non la forma. */

/* ----- Pulsanti con profondità ----- */
.btn-primary {
  background: linear-gradient(180deg, var(--success-solid-hover), var(--success-solid));
  box-shadow: var(--shadow-green);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out),
    filter var(--dur-fast) var(--ease-out);
}

.btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md), var(--shadow-green);
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
}

.btn-secondary,
.btn-danger {
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

.btn-secondary:hover,
.btn-danger:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-secondary:active,
.btn-danger:active {
  transform: translateY(0) scale(0.98);
}

/* ----- Campi con anello di focus moderno ----- */
.input-standard,
.textarea-standard,
.topbar-search-button,
select.input-standard {
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.input-standard:focus-visible,
.textarea-standard:focus-visible,
.topbar-search-button:focus-visible,
select.input-standard:focus-visible {
  outline: 2px solid transparent; /* invisibile, ma visibile in alto contrasto */
  border-color: var(--green-500);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

/* Anello di focus per chi usa la tastiera: vale per tutti i controlli che non ne
   definiscono uno proprio (specificita' zero grazie a :where, cosi' le regole piu'
   specifiche dei singoli componenti continuano a vincere). */
:where(a, button, summary, [tabindex], input, select, textarea):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ----- Card lavori: elenco piatto, niente sollevamento (riga di elenco) ----- */
.job-card {
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.job-card:hover {
  transform: none;
  box-shadow: none;
}

/* ----- KPI con accento animato ----- */
.kpi-card {
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ----- Modali con entrata elastica e sfondo blur ----- */
.modal {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.modal-content {
  animation: modal-pop var(--dur-med) var(--ease-spring);
}

@keyframes modal-pop {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ----- Toast con scorrimento ----- */
.toast {
  animation: toast-in var(--dur-med) var(--ease-spring);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ----- Login: scena con gradiente e card flottante ----- */
.login-page {
  background:
    radial-gradient(60rem 30rem at 15% 10%, var(--green-100), transparent 60%),
    radial-gradient(50rem 26rem at 90% 90%, var(--green-200), transparent 55%),
    var(--bg);
}

.login-card {
  box-shadow: var(--shadow-lg);
  animation: modal-pop calc(var(--dur-med) * 1.2) var(--ease-spring);
}

.login-submit {
  font-size: var(--text-base);
  letter-spacing: 0.01em;
}

/* ----- Barre di scorrimento sottili ----- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

/* ----- Transizione tema morbida (solo contenitori, mai i componenti animati) ----- */
body,
.topbar,
.mobile-bottom-nav {
  transition: background-color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out),
    color var(--dur-med) var(--ease-out);
}

/* ----- Skip link accessibile (visibile solo al focus da tastiera) ----- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: var(--z-modal);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--success-solid);
  color: var(--on-success);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus-visible {
  top: 0.6rem;
  outline: 2px solid transparent; /* invisibile, ma visibile in alto contrasto */
  box-shadow: 0 0 0 4px var(--focus-ring);
}

/* ----- Variante solida scura del primario (es. azioni secondarie) ----- */
.btn-primary.btn-solid-dark {
  background: var(--green-800);
  border-color: var(--green-800);
  box-shadow: none;
}

/* In tema scuro --green-800 e chiaro: serve uno sfondo scuro per il contrasto. */
html[data-theme="dark"] .btn-primary.btn-solid-dark {
  background: var(--green-600);
  border-color: var(--green-600);
}

/* ----- Scorrimento morbido (disattivato con movimento ridotto) ----- */
html {
  scroll-behavior: smooth;
}

/* ----- Titoli bilanciati: niente parole orfane a capo ----- */
h1,
h2 {
  text-wrap: balance;
}

/* ----- Cifre tabulari in tabelle e KPI: i numeri non "saltano" ----- */
table,
.kpi-card strong,
.monthly-stat strong,
.cell-numeric {
  font-variant-numeric: tabular-nums;
}

/* ----- Selezione testo leggibile anche in tema scuro ----- */
html[data-theme="dark"] ::selection {
  background: var(--green-800);
  color: #fff;
}

/* ----- Un solo accento: verde IeO -----
   Nel piano 2 delle azioni solo "Invia report giornaliero" resta pieno di
   verde (è l'azione primaria). Test report e Obsidian diventano azioni
   secondarie: fondo bianco semitrasparente e bordo discreto, senza blu
   né viola che si contenderebbero l'attenzione con l'accento. */
.report-pill-self,
.report-pill-obsidian {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: none;
}
.report-pill-self:hover,
.report-pill-obsidian:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  box-shadow: none;
}
.report-pill-self:disabled:hover,
.report-pill-obsidian:disabled:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Il primario si distingue perché è l'unico pieno: niente bagliori sugli altri.
   Sta nel piano 1 dell'intestazione, accanto al profilo. */
.topbar-inner .report-pill-team {
  background: var(--success-solid);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: none;
}
.topbar-inner .report-pill-team:hover {
  background: var(--success-solid-hover);
  box-shadow: none;
}

/* ----- Movimento ridotto: tutto fermo ----- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    transition-duration: 0.01ms;
  }

  .job-card:hover,
  .kpi-card:hover,
  .btn-primary:hover {
    transform: none;
  }
}