/* ---- Personale, pianificazione orari guidata dal carico (sotto-task 1: carico e indice) ----
   Le tabelle del carico e dell'indice e il grafico dell'anno in SVG. La barra di scorrimento delle
   tabelle e' quella delle tabelle dei saldi (personale_saldi.css, .hr-orari-scroll). File a parte:
   personale.css lo tocca anche la sotto-task delle anomalie. */

.hr-orari-date {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
}

.hr-tabella-orari td,
.hr-tabella-orari th {
  white-space: nowrap;
}

.hr-tabella-indice td {
  min-width: 9rem;
  vertical-align: top;
}

.hr-orari-indice {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
}

.hr-orari-sottotitolo {
  margin: 16px 0 4px;
  font-size: 15px;
}

.hr-orari-giorni {
  margin-top: 10px;
}

/* Ore giorno per giorno (sotto-task 1b): i reparti vanno a capo su un telefono stretto, come nelle
   ferie (a 360 px i tre pulsanti uscivano dallo schermo); il totale chiude ogni settimana. */
.hr-orari .hr-filtri {
  flex-wrap: wrap;
}

.hr-orari-totale td {
  border-top: 1px solid var(--border-soft);
  font-weight: 700;
  color: var(--navy);
}

.hr-orari-giorni summary {
  cursor: pointer;
  color: var(--navy);
  font-weight: 600;
}

.hr-orari-grafico {
  margin-top: 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-small);
  padding: 8px;
  background: var(--surface);
}

.hr-orari-grafico svg {
  display: block;
  width: 100%;
  height: 140px;
}

/* I mesi sotto le barre: una casella per settimana, larga quanto il passo di una barra. */
.hr-orari-mesi {
  display: flex;
  margin-top: 4px;
}

.hr-orari-mesi span {
  flex: 1 1 0;
  min-width: 0;
  overflow: visible;
  white-space: nowrap;
  font-size: 11px;
  color: var(--gray-text);
}

.hr-orari-barra-fresco {
  fill: var(--navy);
}

.hr-orari-barra-gelo {
  fill: var(--azure);
}

.hr-orari-barra.is-incompleta rect {
  fill-opacity: 0.45;
}

/* Le previste: tenui e col bordo tratteggiato (lo spessore non si deforma con la scala del grafico). */
.hr-orari-barra.is-prevista rect {
  fill-opacity: 0.3;
  stroke: var(--navy-bright);
  stroke-width: 1px;
  stroke-dasharray: 3 2;
  vector-effect: non-scaling-stroke;
}

/* Una settimana senza nessun giorno contato (tutti esclusi o senza righe) non e' zero: non si sa.
   Solo il contorno punteggiato, alto quanto il grafico. */
.hr-orari-barra-ignota {
  fill: none;
  stroke: var(--gray-text);
  stroke-width: 1px;
  stroke-dasharray: 1 2;
  vector-effect: non-scaling-stroke;
}

.hr-orari-legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--gray-text);
}

.hr-orari-segno {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: -8px;
  border-radius: 3px;
}

.hr-orari-segno.is-fresco {
  background: var(--navy);
}

.hr-orari-segno.is-gelo {
  background: var(--azure);
}

.hr-orari-segno.is-incompleta {
  background: var(--navy);
  opacity: 0.45;
}

.hr-orari-segno.is-prevista {
  background: var(--azure-soft);
  border: 1px dashed var(--navy-bright);
}

.hr-orari-segno.is-ignota {
  background: transparent;
  border: 1px dotted var(--gray-text);
}

/* ---- Il carico nel calendario delle ferie (sotto-task 2) ----
   Sotto i reparti pianificati, dopo i presenti: le ore che servono giorno per giorno, in verde tenue
   le settimane basse (buone per le ferie), in arancio quelle di picco. Le celle stanno nella griglia
   del calendario (personale.css, .hr-cella); qui solo il colore e il peso. */
.hr-riga-carico th,
.hr-riga-carico td {
  background: var(--surface);
  font-variant-numeric: tabular-nums;
  color: var(--gray-text);
}

.hr-cella-carico {
  padding: 6px 4px !important;
  text-align: center;
}

.hr-cella-carico.is-bassa,
.hr-legenda-campione.hr-cella-carico.is-bassa {
  background: color-mix(in srgb, var(--semaforo-verde) 14%, var(--surface));
  color: var(--semaforo-verde);
  font-weight: 600;
}

.hr-cella-carico.is-picco,
.hr-legenda-campione.hr-cella-carico.is-picco {
  background: color-mix(in srgb, var(--semaforo-arancio) 16%, var(--surface));
  color: #9a4a00;
  font-weight: 600;
}

/* Le ferie ancora da pianificare: sotto il nome nella colonna fissa, e in fondo al titolo del reparto. */
.hr-ferie-residue {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--gray-text);
}

.hr-ferie-residue.is-negativo {
  color: var(--danger);
  font-weight: 600;
}

.hr-ferie-residue-reparto {
  margin-left: 12px;
  font-weight: 600;
  color: var(--navy);
}