.square-box {
  /* Imposta l'altezza in base alla larghezza */
  padding-top: 100%; /* Questo rende il box quadrato */
  position: relative; /* Necessario per posizionare il contenuto */
  background-color: #f0f0f0; /* Colore di sfondo per visualizzare il box */
  border: 1px solid #ddd; /* Bordo per maggiore visibilità */
}

/* Stili per il contenuto all'interno del box */
.square-box p {
  position: absolute; /* Posiziona il testo in modo assoluto */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centra il testo perfettamente */
  text-align: center;
  width: 90%; /* Assicura che il testo non fuoriesca */
}

/* CSS per Bordi e Allineamento */
table.dataTable th,
table.dataTable td {
    /* Separazione tra le colonne */
    border-right: 1px solid #ccc;
    
    /* Allineamento a destra (globale) */
    text-align: right;
}

/* Allineamento a sinistra per la prima colonna (tipicamente ID/Nome) */
table.dataTable th:first-child,
table.dataTable td:first-child {
    text-align: left;
}

/* Rimuovi il bordo sull'ultima colonna */
table.dataTable th:last-child,
table.dataTable td:last-child {
    border-right: none;
}


.input-form-label {
    font-weight: 700;
    color: #343a40;
    text-transform: uppercase;
    font-size: 0.75rem;
    margin-right: 5px;
}

.legenda-inline {
    background-color: #f1f3f5; /* Grigio neutro chiarissimo */
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #495057;
    display: flex;
    flex-wrap: wrap; /* Permette di andare a capo solo se lo schermo è molto stretto */
    gap: 15px;      /* Spazio tra le voci */
    align-items: center;
    border: 1px solid #e9ecef;
    margin-top: 5px;
}

/* Titolo compatto */
.legenda-inline-label {
    font-weight: 700;
    color: #343a40;
    text-transform: uppercase;
    font-size: 0.75rem;
    margin-right: 5px;
}

/* Elemento della legenda */
.legenda-item {
    display: flex;
    align-items: center;
}

/* Puntino colorato per richiamare lo stato (opzionale) */
.dot {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.dot-bozza { background-color: #adb5bd; }
.dot-revisione { background-color: #ffc107; }
.dot-approvato { background-color: #28a745; }


/* hr vari */

/* 1. FINE E DISCRETO (Il classico moderno) */
/* Ideale per dividere campi all'interno di un modulo senza appesantire */
.hr-fine {
    border: 0;
    border-top: 1px solid #e9ecef;
    margin: 1.5rem 0;
}

/* 2. SPESSO E MORBIDO (Soft Bold) */
/* Ideale per dividere macro-sezioni (es. tra "Dati Cliente" e "Dati Fattura") */
.hr-thick {
    border: 0;
    height: 3px;
    background-color: #b4bfcb;
    border-radius: 2px;
    margin: 2rem 0;
}

/* 3. TRATTEGGIATO (Dashed) */
/* Perfetto per indicare sezioni "staccabili" o dati opzionali */
.hr-dashed {
    border: 0;
    border-top: 2px dashed #dee2e6;
    margin: 1.5rem 0;
}

/* 4. SFUMATO (Gradients - Molto elegante) */
/* Sparisce verso i bordi. Ottimo per dashboard pulite */
.hr-gradient {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0));
    margin: 2rem 0;
}

/* 5. CON ICONA O TESTO AL CENTRO */
/* Molto utile nei gestionali per dare un titolo visivo alla divisione */
.hr-text {
    display: flex;
    align-items: center;
    text-align: center;
    color: #adb5bd;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hr-text::before, .hr-text::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e9ecef;
}

.hr-text:not(:empty)::before { margin-right: 1em; }
.hr-text:not(:empty)::after { margin-left: 1em; }