body { font-family: Arial, sans-serif; margin: 0; background: #f4f4f4; }
.topbar { background: #222; color: #fff; padding: 22px 30px; }
.topbar-sticky { position: sticky; top: 0; z-index: 100; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; max-width: 1100px; margin: 0 auto; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  line-height: 1;
}
.brand:hover { opacity: 0.94; }
.brand-mark {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 10px;
  flex-shrink: 0;
  image-rendering: auto;
}
.brand-word {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand-h { color: #2ecc5a; }
.brand-r { color: #e53935; }
.brand-pilot { color: #f0f0f0; font-weight: 700; }
.nav a { color: #fff; margin-left: 14px; text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.main { max-width: 1100px; margin: 0 auto; padding: 16px; background: #fff; min-height: 80vh; }
.main:has(.page-statistics) { max-width: 1320px; }
.main:has(.employee-dossier) { max-width: 1280px; }

h1 { margin-top: 0; }

table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { border: 1px solid #ddd; padding: 8px; }
th { background: #f0f0f0; text-align: left; }

.row { display: flex; gap: 12px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.row label { min-width: 220px; font-weight: 600; }
input, select { padding: 6px; min-width: 180px; }

/* Campi più compatti nella scheda dipendente */
#employee-edit-form input,
#employee-edit-form select{
  width: 220px;
  max-width: 260px;
  box-sizing: border-box;
}

/* Anagrafica: layout a 2 colonne per tipologia dato */
.anagrafica-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 28px;
  align-items: start;
}
.anagrafica-col { min-width: 0; }
.anagrafica-section-title {
  margin: 14px 0 6px;
  font-size: 14px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 3px;
}
.anagrafica-col > .anagrafica-section-title:first-child { margin-top: 0; }
.plates-list .plate-row { align-items: center; }
.plates-list .btn-plate-add,
.plates-list .btn-plate-remove {
  min-width: 32px;
  padding: 5px 8px;
  font-weight: 700;
}
.apparel-dpi-block {
  margin: 12px 0 4px;
}
.apparel-dpi-block > .anagrafica-section-title {
  margin-top: 0;
}
.apparel-table-wrap {
  overflow-x: auto;
  margin: 8px 0 14px;
}
.apparel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #fff;
}
.apparel-table th,
.apparel-table td {
  border: 1px solid #e0e0e0;
  padding: 5px 6px;
  vertical-align: middle;
  text-align: left;
}
.apparel-table th {
  background: #f0f2f5;
  font-size: 12px;
  white-space: nowrap;
}
.apparel-table .apparel-view {
  display: inline;
}
.apparel-table .apparel-view[hidden],
.apparel-table .apparel-edit[hidden],
.apparel-table .btn-apparel-edit[hidden],
.apparel-table .btn-apparel-save[hidden],
.apparel-table .btn-apparel-del[hidden] {
  display: none !important;
}
.apparel-table .apparel-row.is-editing .apparel-view {
  display: none !important;
}
.apparel-table .apparel-edit {
  width: 100%;
  max-width: 110px;
  min-width: 0;
  box-sizing: border-box;
  font-size: 12px;
  padding: 4px 5px;
}
.apparel-table .apparel-dpi-tipo { max-width: 118px; }
.apparel-table .apparel-dpi-taglia,
.apparel-table .apparel-dpi-colore { max-width: 56px; }
.apparel-table .apparel-dpi-logo { max-width: 100px; }
.apparel-table .apparel-dpi-obb { max-width: 52px; }
.apparel-table .apparel-dpi-durata { max-width: 58px; }
.apparel-table .apparel-dpi-fornito,
.apparel-table .apparel-dpi-scadenza { max-width: 118px; }
.apparel-table .apparel-actions {
  white-space: nowrap;
  width: 1%;
}
.apparel-table .apparel-actions .btn-light,
.apparel-table .apparel-actions .btn-ok,
.apparel-table .apparel-actions .btn-danger {
  margin: 0 2px;
  padding: 4px 8px;
  font-size: 12px;
}
.apparel-table .apparel-empty-row td {
  background: #fafafa;
  border: none;
  padding: 16px 8px;
}
.apparel-dpi-composer-form {
  margin-top: 4px;
}
.apparel-dpi-composer {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 6px 8px;
  padding: 8px 10px;
  background: #eef3f8;
  border: 1px solid #cfd8e3;
  border-radius: 6px;
  overflow-x: auto;
}
.apparel-dpi-composer .apparel-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
  min-width: 0;
}
.apparel-dpi-composer .apparel-field > label {
  font-size: 10.5px;
  font-weight: 600;
  color: #555;
  line-height: 1.15;
  white-space: nowrap;
  margin: 0;
  min-width: 0 !important;
  width: auto !important;
}
.employee-dossier .apparel-dpi-composer .apparel-field > input,
.employee-dossier .apparel-dpi-composer .apparel-field > select,
.apparel-dpi-composer .apparel-field > input,
.apparel-dpi-composer .apparel-field > select {
  width: auto;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
  margin: 0;
  font-size: 12px;
  padding: 4px 5px;
  height: 28px;
}
.apparel-dpi-composer .apparel-field-tipo > select {
  width: 118px;
  min-width: 118px;
}
.apparel-dpi-composer .apparel-field-sm > input {
  width: 52px;
}
.apparel-dpi-composer .apparel-field-logo > input,
.apparel-dpi-composer #apparelComposerLogo {
  width: 96px;
}
.apparel-dpi-composer .apparel-field-obb > select {
  width: 52px;
  min-width: 52px;
}
.apparel-dpi-composer .apparel-field-xs > input {
  width: 54px;
  -moz-appearance: textfield;
}
.apparel-dpi-composer .apparel-field-xs > input::-webkit-outer-spin-button,
.apparel-dpi-composer .apparel-field-xs > input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.apparel-dpi-composer .apparel-field-date > input {
  width: 118px;
}
.apparel-dpi-composer .apparel-field-obb {
  align-items: stretch;
  justify-content: flex-end;
}
.apparel-dpi-composer .apparel-field-add > button {
  min-width: 32px;
  height: 28px;
  padding: 2px 8px;
  font-weight: 700;
  font-size: 15px;
}
.apparel-dpi-composer #apparelComposerScadenza {
  background: #f5f5f5;
  color: #555;
}
.btn-apparel-add {
  min-width: 32px;
  padding: 5px 8px;
  font-weight: 700;
}

/* Dossier dipendente — navigazione laterale stile rubrica */
.employee-dossier .sticky-topbar .page-header-row h1 {
  font-size: 1.25rem;
}
.employee-dossier .top-controls {
  padding: 8px 12px;
}
.employee-dossier .top-controls .row {
  margin: 0;
}
.employee-dossier .dossier-layout {
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: 6px;
}
.employee-dossier .dossier-nav {
  position: sticky;
  top: 110px;
  background: #f6f6f6;
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  padding: 6px 0 8px;
  display: flex;
  flex-direction: column;
}
.employee-dossier .dossier-nav-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  padding: 2px 6px 6px 10px;
}
.employee-dossier .dossier-nav-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #888;
  padding: 4px 0 0;
  line-height: 1.3;
}
.employee-dossier .dossier-burger {
  position: relative;
  flex: 0 0 auto;
}
.employee-dossier .dossier-burger-btn {
  width: 28px;
  height: 26px;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 3px;
  background: #fff;
  color: #333;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.employee-dossier .dossier-burger-btn:hover {
  background: #eee;
}
.employee-dossier .dossier-burger-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 40;
  min-width: 160px;
  margin-top: 4px;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.employee-dossier .dossier-burger-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 8px 12px;
  font-size: 13px;
  color: #222;
  cursor: pointer;
}
.employee-dossier .dossier-burger-item:hover {
  background: #f3f3f3;
}
.employee-dossier .dossier-burger-empty {
  display: block;
  padding: 8px 12px;
  margin: 0;
  font-size: 12px;
}
.employee-dossier .dossier-reorder-banner {
  margin: 0 8px 6px;
  padding: 4px 6px;
  font-size: 10px;
  color: #555;
  background: #efefef;
  border-radius: 3px;
}
.employee-dossier .dossier-nav-row {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.employee-dossier .dossier-nav-item {
  display: block;
  flex: 1;
  min-width: 0;
  padding: 7px 8px 7px 10px;
  color: #333;
  text-decoration: none;
  font-size: 12.5px;
  line-height: 1.25;
  border-left: 3px solid transparent;
}
.employee-dossier .dossier-nav-item:hover {
  background: #ececec;
  text-decoration: none;
}
.employee-dossier .dossier-nav-item.is-active {
  background: #fff;
  border-left-color: #222;
  font-weight: 600;
}
.employee-dossier .dossier-nav-sort {
  display: none;
  flex-direction: column;
  justify-content: center;
  padding-right: 4px;
  gap: 0;
}
.employee-dossier .dossier-nav.is-reorder .dossier-nav-sort {
  display: flex;
}
.employee-dossier .dossier-export-wrap {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #ddd;
}
.employee-dossier .dossier-export-btn {
  display: block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 10px;
  text-decoration: none;
}
.employee-dossier .dossier-sort-form {
  margin: 0;
  display: block;
}
.employee-dossier .dossier-sort-btn {
  display: block;
  width: 18px;
  height: 14px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: #888;
  font-size: 9px;
  line-height: 14px;
  cursor: pointer;
}
.employee-dossier .dossier-sort-btn:hover:not(:disabled) {
  color: #111;
  background: #e0e0e0;
}
.employee-dossier .dossier-sort-btn:disabled {
  opacity: 0.25;
  cursor: default;
}
.employee-dossier .dossier-main {
  min-width: 0;
}
.employee-dossier .dossier-panel {
  max-width: none;
  margin: 0;
  padding: 14px 16px;
}
.employee-dossier .dossier-panel-title {
  margin: 0 0 10px;
  font-size: 1.1rem;
}
.employee-dossier .dossier-placeholder {
  min-height: 200px;
}
.employee-dossier .dossier-empty {
  margin: 20px 0 6px;
  color: #555;
  font-size: 14px;
}
.employee-dossier .dossier-empty-hint {
  margin: 0;
  max-width: 42em;
}
.employee-dossier .dossier-docs-privacy {
  margin: 0 0 12px;
  font-size: 12px;
  color: #666;
  max-width: 48em;
}
.employee-dossier .dossier-docs-flash {
  margin: 0 0 10px;
  padding: 8px 10px;
  background: #e8f5e9;
  border-radius: 4px;
  color: #1b5e20;
  font-size: 13px;
}
.employee-dossier .dossier-docs-error {
  margin: 0 0 10px;
  padding: 8px 10px;
  background: #ffebee;
  border-radius: 4px;
  color: #b71c1c;
  font-size: 13px;
}
.employee-dossier .dossier-docs-upload {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e0e0e0;
}
.employee-dossier .dossier-docs-capture-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.employee-dossier .dossier-docs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.employee-dossier .dossier-docs-item {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: #f7f8fa;
  border: 1px solid #e4e6eb;
  border-radius: 6px;
}
.employee-dossier .dossier-docs-meta {
  flex: 1 1 220px;
  min-width: 0;
}
.employee-dossier .dossier-docs-name {
  font-weight: 600;
  font-size: 14px;
  word-break: break-word;
}
.employee-dossier .dossier-docs-fields {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  font-size: 12.5px;
  color: #444;
}
.employee-dossier .dossier-docs-update {
  flex: 0 0 auto;
}
.employee-dossier .dossier-docs-update > summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
}
.employee-dossier .dossier-docs-update > summary::-webkit-details-marker {
  display: none;
}
.employee-dossier .dossier-docs-update-form {
  margin-top: 8px;
  padding: 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-width: min(100%, 320px);
}
.employee-dossier .dossier-docs-clear-exp {
  font-weight: 400;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.employee-dossier .dossier-docs-delete-form {
  display: inline;
  margin: 0;
}
.employee-dossier .field-hint {
  margin: 2px 0 8px;
  font-size: 11px;
  color: #888;
  line-height: 1.3;
}

/* Campi anagrafica: etichette e input allineati, proporzioni più regolari */
.employee-dossier #employee-edit-form .row {
  gap: 8px 10px;
  margin: 5px 0;
  align-items: center;
  flex-wrap: nowrap;
}
.employee-dossier #employee-edit-form .row > label {
  min-width: 132px;
  width: 132px;
  flex: 0 0 132px;
  font-size: 12.5px;
  font-weight: 600;
}
.employee-dossier #employee-edit-form .row > input,
.employee-dossier #employee-edit-form .row > select {
  width: auto;
  max-width: none;
  min-width: 0;
  flex: 1 1 auto;
  box-sizing: border-box;
}
.employee-dossier #employee-edit-form .plates-list .row > input {
  flex: 1 1 auto;
}
.employee-dossier #employee-edit-form .hint {
  font-size: 11px;
  color: #888;
}
.employee-dossier .monte-saldo-row {
  margin-top: 8px;
}
.employee-dossier .monte-saldo-row h3 {
  font-size: 13px;
  margin: 0 0 6px;
}
.employee-dossier .monte-saldo-row .row {
  margin: 4px 0;
}
@media (max-width: 960px) {
  .employee-dossier #employee-edit-form .row {
    flex-wrap: wrap;
  }
  .employee-dossier #employee-edit-form .row > label {
    flex-basis: 100%;
    width: auto;
  }
}
@media (max-width: 900px) {
  .employee-dossier .dossier-layout {
    grid-template-columns: 1fr;
  }
  .employee-dossier .dossier-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
    padding: 4px;
  }
  .employee-dossier .dossier-nav-head {
    width: 100%;
    padding: 4px 8px;
  }
  .employee-dossier .dossier-nav-title {
    width: auto;
    padding: 4px 0 0;
  }
  .employee-dossier .dossier-nav-row {
    flex: 0 0 auto;
  }
  .employee-dossier .dossier-nav-item {
    border-left: 0;
    border-bottom: 2px solid transparent;
    padding: 7px 9px;
    font-size: 12px;
  }
  .employee-dossier .dossier-nav-item.is-active {
    border-bottom-color: #222;
  }
  .employee-dossier .dossier-nav.is-reorder .dossier-nav-sort {
    flex-direction: row;
    padding-right: 2px;
  }
}

.import-anagrafica-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .anagrafica-grid,
  .import-anagrafica-grid { grid-template-columns: 1fr; }
}

/* Pagina import anagrafiche / dati aggiuntivi */
.import-anagrafica-page .import-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  max-width: none;
}
.import-anagrafica-page .import-card-body {
  padding: 16px 18px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.import-anagrafica-page .import-card-title {
  margin: 0;
  font-size: 1.15rem;
}
.import-anagrafica-page .import-lead {
  margin: 0;
  color: #444;
  font-size: 14px;
  line-height: 1.45;
}
.import-anagrafica-page .import-bullets {
  margin: 0;
  padding-left: 1.15em;
  color: #555;
  font-size: 13px;
  line-height: 1.5;
}
.import-anagrafica-page .import-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.import-anagrafica-page .import-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}
.import-anagrafica-page .import-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.import-anagrafica-page .import-field label {
  font-weight: 600;
  font-size: 13px;
  min-width: 0;
}
.import-anagrafica-page .import-override {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.import-anagrafica-page .import-override legend {
  font-weight: 600;
  font-size: 13px;
  padding: 0;
  margin: 0 4px 0 0;
}
.import-anagrafica-page .import-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  min-width: 0;
  cursor: pointer;
}
.import-anagrafica-page .import-radio-hint {
  color: #777;
  font-size: 12px;
}
.import-anagrafica-page .import-form .btn-primary,
.import-anagrafica-page .import-form button[type="submit"] {
  align-self: flex-start;
}
.import-anagrafica-page .import-legend {
  margin: 0;
  border-top: 1px solid #e6e6e6;
  background: #f3f3f3;
  padding: 8px 14px 10px;
}
.import-anagrafica-page .import-legend summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  list-style: none;
  user-select: none;
}
.import-anagrafica-page .import-legend summary::-webkit-details-marker { display: none; }
.import-anagrafica-page .import-legend summary::before {
  content: "▸ ";
  color: #888;
  font-size: 11px;
}
.import-anagrafica-page .import-legend[open] summary::before { content: "▾ "; }
.import-anagrafica-page .import-legend-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.35;
}
.import-anagrafica-page .import-legend-table th,
.import-anagrafica-page .import-legend-table td {
  padding: 3px 0;
  vertical-align: top;
  border: 0;
  background: transparent;
}
.import-anagrafica-page .import-legend-table th {
  text-align: left;
  font-weight: 500;
  width: 42%;
  padding-right: 10px;
  color: #333;
}
.import-anagrafica-page .import-legend-table td {
  color: #666;
}
.import-anagrafica-page .import-legend-table code {
  font-size: 11px;
  background: #ebebeb;
  padding: 1px 4px;
  border-radius: 3px;
}
.import-anagrafica-page .import-legend-note {
  margin: 6px 0 0;
  font-size: 11px;
  color: #888;
}

/* Monte/Saldo: 3 sezioni affiancate */
.monte-saldo-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  column-gap: 1px;
  align-items: start;
  margin-bottom: 8px;
}
.monte-saldo-row .monte-saldo-col { min-width: 0; }
.monte-saldo-row .saldo-hhmm-section {
  min-width: 120px;
}
.monte-saldo-row .monte-saldo-col h3 {
  margin: 0 0 8px 0;
  font-size: 1em;
  font-weight: 600;
}
.monte-saldo-row .hhmm-col-title {
  font-weight: 500;
  font-size: 0.95em;
  color: #555;
}
.monte-saldo-row .monte-saldo-readonly {
  background: #fafafa;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #eee;
}
.monte-saldo-row .monte-saldo-field {
  margin: 4px 0;
  display: grid;
  grid-template-columns: 1fr auto; /* label a sinistra, valore a destra */
  gap: 10px;
  align-items: center;
}
.monte-saldo-row .monte-saldo-field label {
  font-weight: 600;
  font-size: 0.95em;
  min-width: 0;
}
/* Caselle di testo più strette, allineate */
.monte-saldo-row .monte-section .monte-saldo-field input,
.monte-saldo-row .saldo-section .monte-saldo-field input {
  padding: 4px 8px;
  width: 88px;
  min-width: 88px;
  max-width: 100px;
  box-sizing: border-box;
  justify-self: end; /* allinea a destra nella sezione */
}
.monte-saldo-row .monte-section .monte-saldo-field input[name="balance_ref_date"],
.monte-saldo-row .saldo-section .monte-saldo-field input.input-readonly:first-of-type {
  width: 88px;
  min-width: 88px;
}
.monte-saldo-row .input-readonly {
  background: #f5f5f5 !important;
  color: #555;
}
/* Terza colonna: Convertiti in: (hh:mm) + caselle ore */
.monte-saldo-row .saldo-hhmm-section .monte-saldo-field label {
  min-width: 0;
  color: #666;
  font-weight: 500;
}
.monte-saldo-row .hhmm-cell {
  width: 60px;
  min-width: 60px;
  padding: 4px 4px;
  background: #f0f0f0;
  color: #333;
  font-size: 0.95em;
  box-sizing: border-box;
  display: inline-block;
  justify-self: end; /* allinea a destra nella sezione */
}
.monte-saldo-row .saldo-hhmm-section input.hhmm-cell {
  border: 1px solid #ddd;
  text-align: end;
}
.monte-saldo-row .saldo-hhmm-section .monte-saldo-field:first-of-type .hhmm-cell {
  background: transparent;
  border: none;
}

button { padding: 8px 12px; background: #222; color: #fff; border: 0; cursor: pointer; }
button:hover { opacity: 0.9; }

.card { border: 1px solid #ddd; padding: 12px; background: #fafafa; max-width: 760px; }
.hint { color: #555; font-size: 13px; margin-top: 10px; }
.error-msg { color: #b00020; font-weight: 600; margin: 10px 0; }


/* ---- Employees UI ---- */
.page-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.filters{
  background:#f6f6f6;
  border:1px solid #e5e5e5;
  padding:12px;
  border-radius:10px;
  margin-bottom:14px;
}

.filters-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-end;
}
.filters-row-1{ margin-bottom:10px; }
.filters-row-2{ margin-top:0; }
.filters-count-wrap{ margin-left:auto; }

.filter-field-14{ flex:0 0 25%; max-width:25%; min-width:90px; }
.filter-field-14 .input{ min-width:0; }
.filter-field-12{ flex:0 0 50%; max-width:50%; min-width:140px; }
.filter-field-12 .input{ min-width:0; }
.filter-field-16{ flex:0 0 16.666%; max-width:16.666%; min-width:100px; }
.filter-field-16 .input{ min-width:0; }

.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-weight:600; }

.field .input{
  min-width:240px;
  padding:8px 10px;
  border:1px solid #cfcfcf;
  border-radius:6px;
}

.month-nav{
  display:flex;
  gap:8px;
  align-items:center;
}
.month-nav .input{ width:90px; min-width:0; }

.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ border:1px solid #e4e4e4; padding:10px; vertical-align:middle; }
.table th{ background:#f1f1f1; text-align:left; }

.actions{ white-space:nowrap; }
.inline{ display:inline; margin-left:8px; }
.link{ margin-right:10px; }

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.pill{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
  border:1px solid #ddd;
}
.pill-ok{ background:#e7f7ea; }
.pill-off{ background:#f7e7e7; }

.row-inactive{ opacity:0.70; }

/* Pulsanti azioni: stessa forma (padding 8px 14px, border-radius 8px), colori diversi */
.btn-primary,
.btn-8h,
.btn-light,
.btn-ok,
.btn-warn,
.btn-danger,
.btn-dark,
.btn-link {
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.15s;
}
a.btn-primary, a.btn-8h, a.btn-light, a.btn-ok, a.btn-warn, a.btn-danger, a.btn-dark, a.btn-link {
  text-align: center;
}

.btn-primary {
  background: #222;
  color: #fff;
  border: 1px solid #111;
}
.btn-primary:hover { opacity: 0.92; }

.btn-8h {
  background: #1565c0;
  color: #fff;
  border: 1px solid #0d47a1;
}
.btn-8h:hover { opacity: 0.92; }

.btn-light {
  background: #e9e9e9;
  color: #111;
  border: 1px solid #ccc;
}
.btn-light:hover { opacity: 0.95; }

.btn-ok {
  background: #1f7a1f;
  color: #fff;
  border: 1px solid #166216;
}
.btn-ok:hover { opacity: 0.92; }

.btn-warn {
  background: #b07b00;
  color: #fff;
  border: 1px solid #8f6400;
}
.btn-warn:hover { opacity: 0.92; }

.btn-danger {
  background: #b00020;
  color: #fff;
  border: 1px solid #8d0019;
}
.btn-danger:hover { opacity: 0.92; }

.btn-dark {
  background: #222;
  color: #fff;
  border: 1px solid #111;
}
.btn-dark:hover { opacity: 0.92; }

.btn-link {
  background: #444;
  color: #fff;
  border: 1px solid #333;
}
.btn-link:hover { opacity: 0.9; }

/* --- Employee month UI --- */
.emp-nav{ display:flex; gap:8px; align-items:center; }

.punch-list{ display:flex; flex-direction:column; gap:6px; }
.punch-item{ display:flex; gap:8px; flex-wrap:wrap; }

.day-weekend td{ background:#efefef; }
.day-holiday td{ background:#ffd6d6; }
/* Festivo vince su APPR. CHECK (viola) */
.day-holiday.row-appr-check td{ background:#ffd6d6; color:inherit; }
.day-alert td{ background:#fff3b0; }
.day-punch-anomaly td{ background:#ff6b00; }
.row-appr-check td{ background:#f3e5f5; color:#7b1fa2; }  /* APPR. CHECK? (alternati con straord. da approvare) */
.status-red{ color:#b00020; font-weight:600; }
.status-orange{ color:#e65100; font-weight:600; }
.status-yellow{ color:#f9a825; font-weight:600; }
.status-pink{ color:#e91e8c; font-weight:600; }   /* Congedo / Congedo Matrim. */
.status-blue{ color:#1565c0; font-weight:600; }
.status-purple{ color:#7b1fa2; font-weight:600; }   /* ROL/Permessi, APPR. CHECK? */
.status-teal{ color:#00838f; font-weight:600; }    /* Ex.Festività */
.status-rip{ color:#616161; font-weight:600; }     /* Rip-part-time */

/* ---- Modal ---- */
.modal-overlay{
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.5);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  padding:20px;
}
.modal-box{
  background:#fff;
  border-radius:10px;
  box-shadow:0 4px 20px rgba(0,0,0,0.2);
  max-width:480px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
}
.modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 20px;
  border-bottom:1px solid #e0e0e0;
}
.modal-close{
  background:none;
  border:none;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  color:#666;
  padding:0;
  width:32px;
  height:32px;
}
.modal-close:hover{ color:#222; }
.modal-body{ padding:20px; }
.modal-footer{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:16px 20px;
  border-top:1px solid #e0e0e0;
}
.required{ color:#b00020; }

/* Pulsanti azioni lista dipendenti (stesso layout degli altri) */
.btn-emp {
  display: inline-block;
  padding: 8px 12px;
  margin-right: 8px;
  border: 0;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  font-size: inherit;
}
.btn-emp:hover { opacity: 0.92; }
.btn-timbr { background: #0077b6; color: #fff; }
.btn-anagr { background: #7b1fa2; color: #fff; }
.filters-count { font-size: 0.95em; }
.anomalie-label { color: #b00020; font-weight: 700; }

.riepilogo-mese span{ margin-right:6px; }
.riepilogo-mese span:last-child{ margin-right:0; }

.page-header-row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px; }
.saldo-ferie-permessi-box { background:#1a73e8; color:#fff; padding:12px 16px; border-radius:8px; margin-top:12px; }
.saldo-ferie-permessi-box label { color:#fff; font-weight:600; display:block; margin-bottom:6px; }
.saldo-ferie-permessi-box .riepilogo-mese { color:#fff; }
.saldo-ferie-permessi-box .riepilogo-mese b { color:#fff; }
.bilancio-mese-box { background:#2e7d32 !important; }

/* Header compatto: colonna sinistra (nome, selettori, pulsanti) | colonna destra (Riepilogo, Resoconto, Maturati) */
.card.top-controls { padding: 8px 12px; }
.top-controls-inner {
  display: flex;
  align-items: stretch;
  gap: 20px;
  flex-wrap: wrap;
}
.top-controls-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 280px;
}
.top-controls-left .page-header-row { margin: 0 0 2px 0; }
.top-controls-selectors {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.top-controls-selectors .field { gap: 4px; margin: 0; }
.top-controls-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: auto;
}
.top-controls-right {
  flex: 1;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.top-controls-right .field-riepilogo { gap: 2px; margin: 0; }
.top-controls-right .field-riepilogo label { margin-bottom: 0; }
.riepilogo-compact { font-size: 0.85em; }
.saldo-compact { padding: 6px 10px; margin-top: 6px; }
.saldo-compact label { margin-bottom: 2px; font-size: 0.95em; }
.field-riepilogo .riepilogo-mese { margin-top: 2px; }

.just-form{ display:flex; gap:8px; align-items:center; }

/* =========================
   EMPLOYEE MONTH - sticky + table aligned
   ========================= */

.page-shell{
  height: calc(100vh - 60px);
  display:flex;
  flex-direction:column;
}

.sticky-topbar{
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  padding-bottom: 4px;
}

/* header tabella sticky */
.sticky-tablehead{
  position: sticky;
  top: 138px;       /* se cambi altezza topbar, regola questo */
  z-index: 15;
  background:#fff;
  border-bottom:1px solid #e5e5e5;
}

/* IMPORTANT: stessa struttura colgroup + table-layout fixed */
.table.head-only,
.table.body-table{
  table-layout: fixed;
  width: 100%;
}

/* compenso scrollbar: aggiungo padding-right all’header wrapper */
.table-scroll{
  overflow: auto;
  flex: 1;
  border-top:1px solid #eee;
  padding: 0 0 16px 0;
}
.commento-mese-card{
  margin-top: 14px;
  max-width: 1100px;
}

/* celle: evita che input / box allarghino colonne */
.table th, .table td{
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.cell-date .date-top{ font-weight: 700; }
.cell-date .date-sub{ font-size: 12px; color:#666; margin-top:4px; }

/* Turno select “auto” (larga quanto contenuto) */
.shift-select{
  width: auto;
  min-width: 0;
  display: inline-block;
  padding-right: 28px; /* spazio freccia */
}
/* Turno Nott (notturno, * nelle timbrature) in rosso */
.shift-select.shift-nott{
  color: #c00;
  font-weight: 700;
}

/* Timbrature stringa */
.punch-inline{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space: nowrap;
}

/* Box timbrature override (edit) */
.punch-box{
  border:1px solid #e1e1e1;
  background:#fff;
  padding:8px;
  border-radius:8px;
  min-width: 280px;
}
.punch-title{ font-weight:800; margin-bottom:4px; font-size:0.9em; }
.punch-same-minute-warn{
  margin: 4px 0 8px 0;
  padding: 6px 10px;
  font-size: 12px;
  background: #fff8e1;
  border: 1px solid #ffc107;
  border-radius: 6px;
  color: #7d5a00;
}
.punch-inputs{ display:flex; gap:8px; flex-wrap:wrap; }
.punch-input-row{
  display:flex;
  gap:6px;
  align-items:flex-start;
}
.punch-input-row .punch-textarea{ flex:1; min-width:0; }
.punch-hint-icon{
  width:18px;
  height:18px;
  min-width:18px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#ddd;
  color:#555;
  border-radius:50%;
  font-size:12px;
  font-weight:700;
  cursor:help;
  flex-shrink:0;
}
.punch-hint-icon:hover{ background:#bbb; color:#333; }
.punch-time{
  width:92px;
  padding:6px 8px;
  border:1px solid #cfcfcf;
  border-radius:6px;
}
.punch-textarea{
  width:100%;
  min-width:200px;
  min-height:28px;
  padding:4px 8px;
  line-height:1.35;
  border:1px solid #cfcfcf;
  border-radius:6px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:13px;
  resize:vertical;
}
.punch-textarea:disabled{
  background:#f7f7f7;
  color:#333;
  cursor:default;
}
.punch-orig-display{
  padding:6px 8px;
  background:#f5f5f5;
  border-radius:6px;
  font-size:12px;
  min-height:1.4em;
}
.punch-ro{ background:#f7f7f7; }
.punch-actions{
  margin-top:6px;
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
}
.btn-punch-sm{
  padding:4px 10px;
  font-size:12px;
}

/* evidenziazioni */
.day-weekend{ background:#efefef; }
.day-holiday{ background:#ffd6d6; } /* festività: rosso */
.day-holiday.row-appr-check{ background:#ffd6d6; color:inherit; }
.day-alert{ background:#fff3b0; }

/* pill */
.pill{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:800; }
.pill-ok{ background:#e7f6ea; border:1px solid #9ad0a5; }
.pill-off{ background:#fff3cd; border:1px solid #d9b200; }

/* bottoni aggiuntivi (estendono .btn) */
.btn-dark { background: #222; color: #fff; border: 1px solid #111; }
.btn-ok { background: #1b7f2a; color: #fff; border: 1px solid #166216; }
.btn-warn { background: #b07a00; color: #fff; border: 1px solid #8f6400; }


/* =========================================================
   FIX LAYOUT: pagina non stretta + select non enormi
   Incolla in fondo al CSS
   ========================================================= */

/* --- Report: barra anteprima PDF compatta --- */
.report-preview-bar{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  flex-wrap:nowrap;
  overflow-x:auto;
  margin-top:8px;
}
.report-preview-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  min-width: 0;
}
.select-compact{
  min-width: 150px !important;
  max-width: 150px;
  width: 150px;
}
.month-nav-compact{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.month-label-compact{
  display:inline-block;
  min-width:72px;
  text-align:center;
  font-weight:700;
}
.input-hhmm-small{
  width:60px !important;
  min-width:60px !important;
  max-width:70px !important;
  padding:4px 6px;
  text-align:left;
}
.btn-compact{
  padding: 5px 10px !important;
  border-radius: 8px;
  font-size: 13px;
}

/* 1) Topbar full-width (contenuto più largo, non 1100px) */
.topbar-inner{
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 24px;
}

/* 2) Main full-width (o quasi) */
.main{
  max-width: none;     /* rimuove il “tutto stretto al centro” */
  width: 100%;
  margin: 0;
  padding: 16px 24px;
}

/* Se vuoi comunque un limite "alto" e centrato */
@media (min-width: 1400px){
  .main{
    max-width: 1800px;
    margin: 0 auto;
    padding: 18px 32px;
  }
  .topbar-inner{
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 32px;
  }
}

/* 3) NON dare min-width globale a input/select (causa select troppo larghe) */
input, select{
  min-width: 0;        /* override del tuo min-width:260px */
}

/* 4) Regole sane per i campi nei form a righe */
.row input{
  width: 360px;
  max-width: 100%;
}
.row select{
  width: auto;         /* select “compatta” */
  max-width: 360px;
}

/* 5) Campi della sezione filtri (classi già presenti) */
.filters .field .input{
  min-width: 0;
  width: 320px;
  max-width: 100%;
}

/* 6) Tabella: evita che input/select allarghino colonne */
.table td input,
.table td select,
table td input,
table td select{
  width: auto;
  max-width: 100%;
}

/* 7) Card: nella pagina mese dipendente non limitarla a 760px */
.card{
  max-width: none;
}

/* 8) (Opzionale ma utile) wrapper tabella scrollabile e stabile */
.table-scroll{
  width: 100%;
}

/* Build overlay: cornice colorata per Tipo Build != Production */
.build-overlay {
  --build-accent: 180, 0, 0;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  border: 16px solid rgba(var(--build-accent), 0.58);
  box-sizing: border-box;
  background: rgba(var(--build-accent), 0.07);
}
.build-overlay--beta { --build-accent: 230, 126, 14; }       /* ambra */
.build-overlay--collaudo { --build-accent: 0, 150, 136; }    /* teal */
.build-overlay--developer { --build-accent: 63, 81, 181; }   /* indaco */
.build-overlay--final { --build-accent: 25, 118, 210; }      /* blu */
.build-overlay--test { --build-accent: 124, 179, 66; }       /* lime */
.build-overlay-text {
  position: absolute;
  top: -1mm;
  left: calc(50% - 70mm);
  transform: translateX(-50%);
  text-align: center;
  color: rgba(var(--build-accent), 0.95);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.build-overlay-line {
  margin: 2px 0;
}
.build-overlay-type {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}

/* Pagina Statistiche (grafici Chart.js) */
.stats-chart-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 12px;
}
@media (min-width: 900px) {
  .stats-chart-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.stats-chart-grid--balances {
  grid-template-columns: 1fr;
}
@media (min-width: 1000px) {
  .stats-chart-grid--balances {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.stats-chart-card {
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px 14px;
}
.stats-chart-card h3 {
  margin: 0 0 8px 0;
  font-size: 15px;
  color: #333;
}
.stats-chart-canvas-wrap {
  position: relative;
  height: 420px;
  width: 100%;
}
.stats-chart-canvas-wrap--short {
  height: 320px;
}

.stats-filters-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
  margin-top: 8px;
  align-items: stretch;
}
.stats-filters-grid--consumi,
.stats-filters-grid--saldi {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stats-common-section {
  margin-top: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.stats-common-title {
  margin: 0 0 4px 0;
  font-size: 1.15rem;
}
.stats-common-scope {
  font-weight: 600;
  font-size: 0.82em;
  color: #1565c0;
  background: #e8f1fc;
  border-radius: 4px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
}
.stats-common-hint {
  margin: 0 0 10px 0;
  font-size: 13px;
  line-height: 1.35;
}
.stats-common-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: flex-start;
}
.stats-common-field {
  flex: 1 1 240px;
  max-width: 320px;
  min-width: 0;
}
.stats-common-field > label {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
}
.stats-common-field-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.stats-common-field-row .stats-common-select {
  flex: 1 1 auto;
  min-width: 0;
}
.stats-common-field-hint {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.25;
}
.stats-filter-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.stats-filter-cell--inline {
  max-width: 320px;
}
.stats-filter-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  min-height: 3.1em;
}
.stats-filter-head label {
  margin: 0;
  line-height: 1.25;
  flex: 1 1 auto;
  min-width: 0;
}
.stats-filter-head .btn-compact,
.stats-filter-actions {
  flex: 0 0 auto;
}
.stats-filter-head .btn-compact {
  white-space: nowrap;
}
.stats-filter-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
select.stats-filter-select {
  min-width: 0 !important;
  width: 100%;
  height: 10.5rem;
  box-sizing: border-box;
}
.stats-filter-control {
  min-height: 10.5rem;
}
.stats-common-select,
.stats-filter-date {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.stats-filter-date {
  height: 2.4rem;
}
@media (max-width: 1100px) {
  .stats-filters-grid,
  .stats-filters-grid--consumi,
  .stats-filters-grid--saldi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .stats-filters-grid,
  .stats-filters-grid--consumi,
  .stats-filters-grid--saldi {
    grid-template-columns: 1fr;
  }
  .stats-common-filters {
    flex-direction: column;
  }
  .stats-common-field {
    max-width: none;
  }
  .stats-filter-cell--inline {
    max-width: none;
  }
}
select.stats-multi {
  min-width: 240px;
  width: 100%;
  max-width: 100%;
  font-size: 13px;
  line-height: 1.35;
}
.stats-results-block {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid #e8e8e8;
}
.stats-results-title {
  margin: 0 0 12px 0;
  font-size: 17px;
}
.stats-charts-column {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.stats-chart-card--wide {
  max-width: none;
}
.stats-chart-canvas-wrap--dynamic {
  position: relative;
  width: 100%;
  min-height: 420px;
}

/* Presenze oggi (statistiche) */
.presence-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}
.presence-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
@keyframes presence-live-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.55);
    background-color: #cce5ff;
  }
  50% {
    box-shadow: 0 0 0 7px rgba(0, 123, 255, 0);
    background-color: #b3d7ff;
  }
}
.presence-badge--presente {
  color: #004085;
  animation: presence-live-pulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .presence-badge--presente {
    animation: none;
    background-color: #cce5ff;
    box-shadow: none;
  }
}
.presence-badge--lavorato { background: #d4edda; color: #155724; }
.presence-badge--fuori_sede { background: #e8f4fd; color: #0c5460; }
.presence-badge--permesso { background: #fff3cd; color: #856404; }
.presence-badge--uscito { background: #e2e3e5; color: #383d41; }
.presence-badge--assente { background: #f8d7da; color: #721c24; }
.presence-badge--atteso { background: #f5f5f5; color: #555; border: 1px solid #ccc; }
.presence-badge--anomalia { background: #f5c6cb; color: #721c24; }
.presence-badge--non_previsto { background: #e9ecef; color: #6c757d; }
.presence-table-wrap {
  overflow-x: auto;
  max-height: 520px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 6px;
}
.presence-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.presence-table th,
.presence-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}
.presence-table th {
  position: sticky;
  top: 0;
  background: #f8f9fa;
  z-index: 1;
  font-weight: 600;
}
.presence-table tbody tr:hover {
  background: #fafafa;
}
.presence-date-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0 4px;
}
.presence-date-label {
  margin-right: 4px;
}
.presence-date-input {
  min-width: 150px;
}
.presence-date-btn {
  min-width: 36px;
  font-size: 18px;
  line-height: 1;
  padding: 4px 10px;
}
.presence-time-sep {
  color: #aaa;
  margin: 0 4px;
}
.presence-time-input {
  min-width: 110px;
}
.presence-end-day-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  white-space: nowrap;
}
.presence-filters-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 16px;
  margin: 16px 0 8px;
  align-items: start;
}
.presence-filter-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.presence-filter-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  /* Titolo + hint: stessa altezza così i <select> partono allineati */
  min-height: 3.75em;
}
.presence-filter-head label {
  margin: 0;
  line-height: 1.25;
  flex: 1 1 auto;
  min-width: 0;
}
.presence-filter-cell .stats-filter-select {
  margin-top: 0;
}
@media (max-width: 1100px) {
  .presence-filters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .presence-filters-grid {
    grid-template-columns: 1fr;
  }
}
.presence-row-clickable {
  cursor: pointer;
}
.presence-row-clickable:hover {
  background: #f0f7ff !important;
}
.presence-row-link {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.presence-row-link:hover {
  text-decoration: underline;
}

/* Backup scheduler: giorni settimana compatti (checkbox sopra, sigla sotto) */
.backup-weekdays-row {
  align-items: flex-start;
}
.backup-weekdays-title {
  min-width: 220px;
  font-weight: 600;
  flex-shrink: 0;
  padding-top: 2px;
}
.backup-weekdays {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 6px;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}
.backup-weekday-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-width: 0 !important;
  width: 2.25rem;
  font-weight: 500;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.backup-weekday-item input[type="checkbox"] {
  width: auto;
  margin: 0;
}
.backup-weekday-name {
  line-height: 1;
  text-align: center;
  font-weight: 600;
}
.backup-weekdays-hint {
  margin: 4px 0 0 220px;
  padding: 0;
}
@media (max-width: 720px) {
  .backup-weekdays-hint {
    margin-left: 0;
  }
  .backup-weekdays {
    flex-wrap: wrap;
  }
}

/* Import: righe schedulazione automatica */
.import-schedule-row {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: #fafafa;
}
.import-schedule-row-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
}
.import-schedule-time-wrap label,
.import-schedule-days-label {
  display: block;
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 4px;
}
.import-schedule-time-wrap .input {
  width: 6.5em;
  min-width: 0;
}
.import-schedule-days-wrap {
  flex: 0 0 auto;
}
.import-schedule-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 90px;
}
.import-schedule-status-on { color: #2e7d32; }
.import-schedule-status-off { color: #b00020; }
.import-schedule-enable {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  margin: 0 0 2px 0;
  align-self: center;
}
.import-schedule-enable input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.import-schedule-enable-ui {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #c5c5c5;
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s ease;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.import-schedule-enable-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 0.15s ease;
}
.import-schedule-enable input:checked + .import-schedule-enable-ui {
  background: #2e7d32;
}
.import-schedule-enable input:checked + .import-schedule-enable-ui::after {
  transform: translateX(18px);
}
.import-schedule-enable-label {
  font-size: 13px;
  font-weight: 600;
}
.btn-remove-import-schedule {
  min-width: 2rem;
  padding: 4px 10px;
  line-height: 1.2;
}

/* ---- Landing / branding HR-Pilot ---- */
.landing-body {
  margin: 0;
  min-height: 100vh;
  background: #050505;
  color: #f2f2f2;
  font-family: "Sora", "Segoe UI", sans-serif;
  overflow-x: hidden;
}
.landing-atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 22% 35%, rgba(34, 160, 72, 0.28), transparent 58%),
    radial-gradient(ellipse 60% 50% at 78% 42%, rgba(210, 40, 40, 0.22), transparent 55%),
    radial-gradient(ellipse 90% 70% at 50% 110%, rgba(20, 40, 30, 0.55), transparent 60%),
    #050505;
  animation: landing-glow 12s ease-in-out infinite alternate;
}
@keyframes landing-glow {
  from { filter: saturate(1) brightness(1); transform: scale(1); }
  to { filter: saturate(1.15) brightness(1.08); transform: scale(1.03); }
}
.landing-hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(24px, 5vw, 48px);
  gap: 0.35rem;
}
.landing-brand {
  margin-bottom: 1.25rem;
  text-decoration: none;
  /* spazio verticale per lo scale-up senza spingere il testo */
  min-height: clamp(280px, 48vh, 520px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.landing-logo {
  display: block;
  width: min(260px, 48vw);
  height: auto;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55));
}
.landing-brand:hover .landing-logo,
.landing-brand:focus-visible .landing-logo {
  transform: scale(1.65);
  filter: drop-shadow(0 28px 56px rgba(34, 160, 72, 0.32));
}
.landing-title {
  margin: 0.4rem 0 0;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  animation: landing-rise 0.8s ease both;
}
.landing-lead {
  margin: 0.65rem 0 0;
  max-width: 28rem;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  font-weight: 400;
  color: rgba(242, 242, 242, 0.72);
  line-height: 1.45;
  animation: landing-rise 0.9s ease 0.08s both;
}
.landing-cta {
  margin-top: 1.6rem;
  animation: landing-rise 1s ease 0.16s both;
}
.landing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  color: #06140a;
  background: linear-gradient(135deg, #3dce5f 0%, #1f9a3d 55%, #c62828 140%);
  box-shadow: 0 10px 28px rgba(34, 160, 72, 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.landing-btn:hover,
.landing-btn:focus-visible {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 34px rgba(198, 40, 40, 0.28);
  filter: brightness(1.05);
}
@keyframes landing-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.main:has(.login-page),
.main:has(.presence-home) {
  background: #0b0b0b;
  max-width: none;
  min-height: calc(100vh - 84px);
  padding: 0;
}

/* ---- Home presenti (balloon) ---- */
.presence-home {
  min-height: inherit;
  display: flex;
  flex-direction: column;
  color: #eef3f8;
  background:
    radial-gradient(ellipse 55% 40% at 15% 20%, rgba(33, 150, 243, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 35% at 85% 25%, rgba(34, 160, 72, 0.12), transparent 55%),
    linear-gradient(180deg, #0a121c 0%, #0b0b0b 55%, #101820 100%);
}
.presence-home-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 18px 22px 10px;
}
.presence-home-title {
  margin: 0;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  letter-spacing: -0.02em;
}
.presence-home-meta {
  margin: 4px 0 0;
  color: rgba(238, 243, 248, 0.65);
  font-size: 0.9rem;
}
.presence-home-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.presence-home-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  transition: opacity 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.presence-home-chip:hover {
  filter: brightness(1.08);
}
.presence-home-chip:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}
.presence-home-chip.is-off {
  opacity: 0.38;
  filter: grayscale(0.55);
  box-shadow: none;
  text-decoration: line-through;
}
.presence-home-chip--presente {
  background: rgba(33, 150, 243, 0.22);
  border: 1px solid rgba(100, 181, 246, 0.45);
  color: #bbdefb;
}
.presence-home-chip--long {
  background: rgba(255, 152, 0, 0.2);
  border: 1px solid rgba(255, 183, 77, 0.5);
  color: #ffe0b2;
}
.presence-home-chip--lavorato {
  background: rgba(46, 125, 50, 0.22);
  border: 1px solid rgba(129, 199, 132, 0.45);
  color: #c8e6c9;
}
.presence-sky {
  position: relative;
  flex: 1;
  min-height: 62vh;
  margin: 0 10px 16px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(circle at 50% 120%, rgba(33, 150, 243, 0.1), transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(46, 125, 50, 0.08), transparent 40%),
    rgba(255, 255, 255, 0.02);
}
.presence-home-empty {
  text-align: center;
  color: rgba(238, 243, 248, 0.55);
  padding: 40px 16px;
}
.presence-balloon {
  --x: 50%;
  --y: 50%;
  --dur: 8s;
  --delay: 0s;
  --hue: 200;
  --hue2: 218;
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 7.5rem;
  max-width: 11rem;
  padding: 0.85rem 1rem 1rem;
  border-radius: 999px 999px 999px 999px / 1.15em 1.15em 1.35em 1.35em;
  text-decoration: none;
  color: #f5fbff;
  text-align: center;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.45), transparent 42%),
    linear-gradient(160deg, hsla(var(--hue), 85%, 62%, 0.95), hsla(var(--hue2), 70%, 38%, 0.92));
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.28),
    inset 0 -10px 18px rgba(0, 0, 0, 0.12),
    inset 0 8px 14px rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.28);
  animation: presence-float var(--dur) ease-in-out var(--delay) infinite;
  transition: filter 0.2s ease, box-shadow 0.2s ease;
  z-index: 1;
}
.presence-balloon--fresh {
  --hue: 198;
  --hue2: 215;
}
.presence-balloon--long {
  /* celeste → arancione */
  --hue: 32;
  --hue2: 18;
  color: #fff8f0;
}
.presence-balloon--lavorato {
  --hue: 138;
  --hue2: 152;
  color: #f3fff5;
}
.presence-balloon::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 2px;
  height: 12px;
  background: rgba(255, 255, 255, 0.35);
  transform: translateX(-50%);
}
.presence-balloon:hover,
.presence-balloon:focus-visible {
  filter: brightness(1.08);
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.35),
    inset 0 -10px 18px rgba(0, 0, 0, 0.12),
    inset 0 8px 14px rgba(255, 255, 255, 0.28);
  z-index: 2;
}
.presence-balloon-name {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.presence-balloon-time {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.presence-balloon-first {
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.85;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
@keyframes presence-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(-2deg); }
  50% { transform: translate(-50%, -50%) translateY(-14px) rotate(2deg); }
}

.login-page {
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background:
    radial-gradient(ellipse 50% 40% at 20% 20%, rgba(34, 160, 72, 0.16), transparent 60%),
    radial-gradient(ellipse 45% 35% at 85% 30%, rgba(198, 40, 40, 0.12), transparent 55%),
    #0b0b0b;
}
.login-panel {
  width: min(420px, 100%);
  padding: 28px 28px 24px;
  border-radius: 18px;
  background: rgba(22, 22, 22, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  color: #eee;
}
.login-brand {
  text-align: center;
  margin-bottom: 18px;
}
.login-mark {
  display: block;
  margin: 0 auto 12px;
  border-radius: 16px;
}
.login-heading {
  margin: 0;
  font-size: 1.5rem;
}
.login-sub {
  margin: 6px 0 0;
  color: rgba(238, 238, 238, 0.65);
  font-size: 0.95rem;
}
.login-form .row label {
  color: rgba(238, 238, 238, 0.85);
  min-width: 90px;
}
.login-form .input {
  flex: 1;
  min-width: 0;
  background: #121212;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
}
.login-actions {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.login-back {
  color: rgba(238, 238, 238, 0.7);
  text-decoration: none;
  font-size: 0.9rem;
}
.login-back:hover { color: #fff; text-decoration: underline; }
.login-panel .error-msg {
  background: rgba(198, 40, 40, 0.15);
  border: 1px solid rgba(198, 40, 40, 0.35);
  color: #ffb4b4;
  padding: 8px 10px;
  border-radius: 8px;
}