/* IL MODULO PERSONALE (prefisso hr-): elenco e scheda delle persone, reparti, letture da Centro Paghe. */

.hr-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  max-width: 1200px;
}

.hr-testa h2 {
  margin: 4px 0;
}

.hr-lead {
  color: var(--gray-text);
}

.hr-filtri {
  margin: 0;
}

.hr-cerca input {
  width: 100%;
  max-width: 420px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 16px;
}

.hr-conteggio {
  margin: 0;
  color: var(--gray-text);
  font-size: 14px;
}

.hr-tabella {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.hr-tabella th,
.hr-tabella td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  vertical-align: top;
}

/* Le tabelle del modulo restano tabelle anche sul telefono. listino.css, caricato su ogni
   pagina, sotto i 720px trasforma ogni tabella in blocchi a griglia pensati per le righe del
   listino: qui le colonne finivano una sopra l'altra senza intestazioni e la griglia del mese
   diventava una colonna di celle senza giorni. Stesso rimedio di client_account.css: il display
   da tabella dichiarato sul componente. Le tabelle larghe scorrono nel loro contenitore. */
.hr-tabella,
.hr-griglia {
  display: table;
}

.hr-tabella thead,
.hr-griglia thead {
  display: table-header-group;
}

.hr-tabella tbody,
.hr-griglia tbody {
  display: table-row-group;
}

.hr-tabella tr,
.hr-griglia tr {
  display: table-row;
}

.hr-tabella th,
.hr-tabella td,
.hr-griglia th,
.hr-griglia td {
  display: table-cell;
}

.hr-riga.is-cessato td {
  color: var(--gray-text);
}

.hr-riga.is-somministrato td:first-child {
  border-left: 3px solid var(--semaforo-arancio);
}

.hr-riga.is-fallito td:first-child {
  border-left: 3px solid var(--danger);
}

.hr-riga.is-spento td {
  color: var(--gray-text);
}

.hr-mancante {
  color: var(--gray-text);
  font-style: italic;
}

.hr-errore {
  color: var(--danger);
}

.hr-badge-cessato {
  background: var(--border-soft);
  color: var(--gray-text);
}

.hr-tessere {
  margin: 0;
}

.hr-tessere .hub-stat.is-fallito {
  border-left: 3px solid var(--danger);
}

.hr-colonne {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 16px;
}

.hr-card {
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
}

.hr-card-titolo {
  margin: 0 0 8px;
  font-size: 16px;
}

.hr-aiuto {
  margin: 4px 0 12px;
  color: var(--gray-text);
  font-size: 13px;
}

.hr-dati {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 2fr;
  gap: 6px 12px;
  margin: 0;
  font-size: 14px;
}

.hr-dati dt {
  color: var(--gray-text);
}

.hr-dati dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.hr-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hr-form-riga {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
}

.hr-form-nascosto {
  display: none;
}

.hr-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
}

.hr-campo > span {
  color: var(--gray-text);
  font-size: 13px;
}

.hr-campo input,
.hr-campo select,
.hr-campo textarea,
.hr-tabella-reparti input[type="text"],
.hr-tabella-reparti select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}

.hr-campo-spunta {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.hr-campi-riga {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hr-campi-riga .hr-campo {
  flex: 1 1 120px;
}

.hr-input-breve {
  max-width: 140px;
}

.hr-azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.hr-elenco {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
}

.hr-avvisi {
  margin: 0;
  padding-left: 16px;
  font-size: 13px;
}

@media (max-width: 720px) {
  .hr-dati {
    grid-template-columns: 1fr;
  }
}

/* ---- Presenze (sotto-task 2): la griglia del mese, le celle, la giornata ---- */

.hr-mese {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 8px 0 12px;
}

.hr-mese-titolo {
  margin: 0;
  font-size: 18px;
  min-width: 170px;
  text-align: center;
}

.hr-mese-freccia {
  padding: 4px 12px;
  font-size: 18px;
  line-height: 1;
}

.hr-mese-oggi {
  font-size: 13px;
}

.hr-badge-anomalie {
  background: #fde8e8;
  color: #9b1c1c;
  border: 1px solid #f5b5b5;
}

.hr-griglia-scroll {
  border: 1px solid var(--border, #e3e7ec);
  border-radius: 10px;
}

.hr-griglia {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  width: max-content;
  min-width: 100%;
}

.hr-griglia th,
.hr-griglia td {
  padding: 0;
  text-align: center;
  border-bottom: 1px solid var(--border, #e3e7ec);
  border-right: 1px solid #eef1f4;
  white-space: nowrap;
}

.hr-griglia thead th {
  position: sticky;
  top: 0;
  background: var(--surface, #fff);
  z-index: 2;
  padding: 6px 4px;
  font-weight: 600;
}

.hr-griglia-sett {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted, #6b7280);
}

.hr-griglia .hr-griglia-persona {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--surface, #fff);
  text-align: left;
  padding: 6px 10px;
  min-width: 190px;
  font-weight: 500;
}

.hr-griglia .hr-griglia-persona small {
  display: block;
  font-size: 11px;
}

.hr-griglia-totale {
  padding: 6px 10px !important;
  background: #f8fafc;
}

.hr-cella {
  min-width: 44px;
}

.hr-cella-link {
  display: block;
  padding: 7px 4px;
  color: inherit;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.hr-cella-link:hover {
  background: #eef4ff;
}

.hr-cella.is-weekend,
.hr-griglia-giorno.is-weekend {
  background: #f6f7f9;
}

.hr-cella.is-festivo,
.hr-griglia-giorno.is-festivo,
.hr-legenda-campione.is-festivo {
  background: #fff4d6;
}

.hr-cella.is-futuro,
.hr-griglia-giorno.is-futuro,
.hr-legenda-campione.is-futuro {
  background: repeating-linear-gradient(135deg, #f3f4f6 0 4px, #fff 4px 8px);
  color: var(--text-muted, #6b7280);
}

.hr-cella.is-vuota .hr-cella-link {
  color: var(--text-muted, #9ca3af);
}

.hr-cella.is-cavallo .hr-cella-link,
.hr-legenda-campione.is-cavallo {
  font-style: italic;
}

.hr-cella.is-anomalia,
.hr-legenda-campione.is-anomalia {
  box-shadow: inset 0 0 0 2px #e0564b;
}

.hr-cella.is-anomalia .hr-cella-link {
  color: #9b1c1c;
  font-weight: 600;
}

.hr-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}

.hr-legenda-campione {
  display: inline-block;
  min-width: 32px;
  padding: 2px 6px;
  margin-right: 4px;
  border: 1px solid var(--border, #e3e7ec);
  border-radius: 4px;
  text-align: center;
  color: var(--text, #111827);
  background: #fff;
}

.hr-ore-grandi {
  font-size: 24px;
  font-weight: 600;
}

.hr-anomalie li {
  margin-bottom: 6px;
}

.hr-anomalie .hr-aiuto {
  display: block;
}

.hr-strisciate .is-scartata td {
  color: #9b1c1c;
  text-decoration: line-through;
}

.hr-strisciate .is-notte td {
  color: var(--text-muted, #6b7280);
  font-style: italic;
}

.hr-periodo {
  margin: 12px 0;
}

.hr-anomalie-persona {
  margin-bottom: 12px;
}

/* La griglia delle presenze usa tutta la larghezza della pagina (richiesta dell'utente 19/10); se il
   mese non ci sta, la barra di scorrimento orizzontale e' sempre disegnata, non solo al passaggio. */
.hr-page.hr-presenze {
  max-width: none;
  width: 100%;
}

.hr-griglia-scroll {
  overflow-x: scroll;
  overflow-y: hidden;
  max-width: 100%;
  scrollbar-width: auto;
  scrollbar-color: #9aa3ae #eef1f4;
}

.hr-griglia-scroll::-webkit-scrollbar {
  height: 14px;
}

.hr-griglia-scroll::-webkit-scrollbar-track {
  background: #eef1f4;
  border-radius: 0 0 10px 10px;
}

.hr-griglia-scroll::-webkit-scrollbar-thumb {
  background: #9aa3ae;
  border-radius: 7px;
  border: 3px solid #eef1f4;
}

/* ---- Ferie e assenze (sotto-task 3a): il calendario del reparto, le richieste, cosa ricopiare ---- */

/* Il calendario delle ferie vuole il mese intero sotto gli occhi: esce dal limite di .app-main
   (760px), come la bacheca. */
.app-main:has(.hr-ferie) {
  max-width: none;
}

/* Le tabelle larghe del modulo (i reparti con i loro campi da compilare, le richieste di ferie)
   escono dal limite di 760px come il hub: dentro, le ultime colonne e il tasto Salva finivano
   fuori dalla tabella e si raggiungevano solo scorrendo (screenshot dell'utente del 22/10). */
.app-main:has(.hr-reparti),
.app-main:has(.hr-ferie-elenco) {
  max-width: 1280px;
}

.hr-page.hr-reparti,
.hr-page.hr-ferie-elenco {
  max-width: none;
}

.hr-tabella-reparti input[type="text"] {
  width: 100%;
  min-width: 8rem;
}

.hr-tabella-reparti .hr-input-breve {
  max-width: 11rem;
}

.hr-tabella-reparti select {
  max-width: 14rem;
}

/* Campi, numero delle persone, spunta e Salva sulla stessa linea della riga. */
.hr-tabella-reparti td {
  vertical-align: middle;
}

/* Su schermo largo il Salva di ogni riga e' compatto, come nella tabella degli agenti: alto
   quanto i campi. Sul telefono resta il bottone pieno, comodo da toccare. */
@media (min-width: 48rem) {
  .hr-tabella-reparti .btn-secondary {
    min-height: 0;
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
  }
}

/* Nuovo reparto su una riga. Rails mette ai campi size = maxlength (40 e 80 caratteri): senza
   una base comune il codice era largo 380px, il nome 700 e la struttura andava a capo. */
.hr-reparti .hr-form-riga .hr-campo {
  flex: 1 1 11rem;
  min-width: 0;
}

.hr-reparti .hr-form-riga .hr-campo-largo {
  flex-grow: 2;
}

.hr-reparti .hr-form-riga .hr-campo input {
  width: 100%;
}

.hr-schede-ferie .hr-nuova-assenza {
  border-style: dashed;
}

/* Il fieldset disabilitato blocca anche la tastiera finche' l'anteprima non e' aggiornata. */
.hr-ferie-nuova fieldset.hr-azioni {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}

.hr-ferie-nuova fieldset.hr-azioni:disabled {
  opacity: 0.5;
}

/* Le schede, i filtri di stato e i reparti vanno a capo: su un telefono la fila intera non
   ci sta, e la pagina taglia cio' che esce dal bordo. */
.hr-schede-ferie,
.hr-ferie .hr-filtri,
.hr-ferie-elenco .hr-filtri {
  flex-wrap: wrap;
}

.hr-tessere .hub-stat.is-attenzione {
  border-left: 3px solid var(--semaforo-arancio);
}

.hr-blocco {
  display: block;
  margin: 2px 0 0;
}

.hr-card-testa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hr-input-numero {
  width: 5.5rem;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}

.hr-griglia-giorno.is-oggi {
  color: var(--navy);
  border-bottom: 2px solid var(--navy);
}

.hr-griglia .hr-gruppo-titolo th,
.hr-griglia .hr-gruppo-titolo td {
  background: var(--azure-soft);
  padding: 6px 10px;
  text-align: left;
  font-weight: 600;
}

.hr-griglia .hr-gruppo-titolo-giorni {
  color: var(--gray-text);
  font-size: 11px;
  font-weight: 400;
}

.hr-griglia .hr-gruppo-titolo .hr-griglia-persona {
  background: var(--azure-soft);
}

.hr-cella-ferie .hr-cella-link {
  min-height: 30px;
  font-weight: 600;
}

.hr-cella-nuova {
  color: transparent;
}

.hr-cella-nuova:hover,
.hr-cella-nuova:focus-visible {
  color: var(--navy);
}

.hr-cella.is-riposo,
.hr-legenda-campione.is-riposo {
  background: repeating-linear-gradient(45deg, #f1f3f6 0 3px, #fff 3px 7px);
}

.hr-cella-assenza.is-approvata,
.hr-legenda-campione.hr-cella-assenza.is-approvata {
  background: var(--navy);
  color: #fff;
}

.hr-cella-assenza.is-approvata .hr-cella-link {
  color: #fff;
}

.hr-cella-assenza.is-approvata .hr-cella-link:hover {
  background: var(--navy-bright);
}

.hr-cella-assenza.is-richiesta,
.hr-legenda-campione.hr-cella-assenza.is-richiesta {
  background: var(--azure-soft);
  outline: 2px dashed var(--navy);
  outline-offset: -3px;
  color: var(--navy);
}

/* La parte di giornata: fondo chiaro con una fascia navy in basso, la lettera sempre su chiaro. */
.hr-cella-assenza.is-parziale,
.hr-legenda-campione.hr-cella-assenza.is-parziale {
  background: linear-gradient(to top, var(--navy) 0 5px, var(--azure-soft) 5px);
  color: var(--navy);
}

.hr-cella-assenza.is-parziale .hr-cella-link {
  color: var(--navy);
}

.hr-cella-assenza.is-parziale .hr-cella-link:hover {
  background: var(--azure);
}

.hr-cella-assenza.is-cp,
.hr-legenda-campione.hr-cella-assenza.is-cp {
  background: #e7e9ee;
  color: var(--gray-text);
}

.hr-riga-copertura th,
.hr-riga-copertura td {
  background: #f8fafc;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hr-cella-copertura {
  padding: 6px 4px !important;
}

.hr-cella-copertura.is-sotto-minimo,
.hr-legenda-campione.is-sotto-minimo {
  background: var(--corallo-soft);
  color: var(--danger);
  outline: 2px solid var(--danger);
  outline-offset: -3px;
}

.hr-cella-copertura.is-sotto-minimo-se-approvi,
.hr-legenda-campione.is-sotto-minimo-se-approvi {
  outline: 2px dashed var(--semaforo-arancio);
  outline-offset: -3px;
  color: #9a4a00;
}

.hr-stato-assenza.is-richiesta {
  background: var(--surface);
  border-style: dashed;
  border-color: var(--navy);
  color: var(--navy);
}

.hr-stato-assenza.is-approvata {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.hr-stato-assenza.is-rifiutata,
.hr-stato-assenza.is-annullata {
  background: var(--border-soft);
  border-color: var(--border);
  color: var(--gray-text);
}

.hr-impatto.is-sotto,
.hr-avviso-ferie.is-sotto {
  color: var(--danger);
  font-weight: 600;
}

.hr-avviso-ferie {
  margin: 6px 0;
  padding: 8px 12px;
  border-left: 3px solid var(--semaforo-arancio);
  background: #fff8ef;
  font-size: 14px;
}

.hr-avviso-ferie.is-sotto {
  border-left-color: var(--danger);
  background: var(--corallo-soft);
}

.hr-scelte {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  border: 0;
}

.hr-scelte legend,
.hr-campo legend {
  margin-bottom: 4px;
  color: var(--gray-text);
  font-size: 13px;
}

.hr-campo fieldset,
fieldset.hr-campo {
  margin: 0;
  padding: 0;
  border: 0;
}

.hr-dettaglio-giorni summary {
  cursor: pointer;
  color: var(--navy);
  font-size: 14px;
}

.hr-esito-cp.is-in_cp {
  color: var(--semaforo-verde);
}

.hr-esito-cp.is-mancante,
.hr-esito-cp.is-orario_non_noto {
  color: var(--semaforo-arancio);
  font-weight: 600;
}

.hr-esito-cp.is-altro_codice,
.hr-esito-cp.is-ore_diverse {
  color: var(--danger);
  font-weight: 600;
}

.hr-riscontro.is-completa {
  background: #e8f5ec;
  border-color: var(--semaforo-verde);
  color: var(--semaforo-verde);
}

.hr-riscontro.is-da_ricopiare,
.hr-riscontro.is-da_verificare {
  background: #fff4e6;
  border-color: var(--semaforo-arancio);
  color: #9a4a00;
}

.hr-riscontro.is-in_attesa_lettura {
  background: var(--border-soft);
  border-color: var(--border);
  color: var(--gray-text);
}

.hr-card-attenzione {
  border-left: 3px solid var(--semaforo-arancio);
}

.hr-voci-cp {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hr-voce-cp {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}

.hr-voce-cp:last-child {
  border-bottom: 0;
}

.hr-voce-cp-testa {
  font-weight: 600;
}

.hr-voce-cp-codice {
  margin: 4px 0;
  font-size: 13px;
  color: var(--navy);
}

.hr-storia li {
  margin-bottom: 4px;
}

.hr-decisioni .hr-form {
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}