/* ============================================
   IndexDataGrid — CSS dedicato
   ============================================ */

/* --- Layout fisso: header sticky, body scrollabile, footer ancorato --- */
.index-grid-wrapper {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--app-topbar-h, 50px) - var(--app-footer-h, 50px));
	overflow: hidden;
}

.index-grid-wrapper .mud-table {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: hidden;
}

.index-grid-wrapper .mud-table-container {
	flex: 1;
	overflow-y: auto;
}

/* --- Toolbar (titolo, search, aggiungi): sfondo bianco --- */
.index-grid-wrapper .mud-table-toolbar {
	flex-shrink: 0;
	background: white !important;
	border-bottom: 1px solid #d5d5d5;
	padding: 8px 16px !important;
}

.index-grid-wrapper .mud-table-head th {
	background-color: #ecedf0 !important;
	border-bottom: 1px solid #d5d5d5;
	font-weight: 600;
	position: sticky;
	top: 0;
	z-index: 3;
}

/* Riga filtri sotto i titoli */
.index-grid-wrapper .mud-table-head .mud-table-row:last-child th {
	background-color: #ecedf0 !important;
	border-bottom: 1px solid #d5d5d5;
	position: sticky;
	top: 33px;
	z-index: 2;
}

/* --- Footer: stesso stile dell'header, ancorato in fondo --- */
.index-grid-wrapper .mud-table-pagination {
	flex-shrink: 0;
	background: #ecedf0 !important;
	border-top: 1px solid #d5d5d5;
}

/* --- Righe alternate (zebra) --- */
.index-grid-wrapper .mud-table-body .mud-table-row:nth-child(odd) {
	background-color: #ffffff;
}

.index-grid-wrapper .mud-table-body .mud-table-row:nth-child(even) {
	background-color: #f7f7f8;
}

.index-grid-wrapper .mud-table-body .mud-table-row:hover {
	background-color: #eef0f4 !important;
}

/* --- Titoli colonne: maiuscolo + truncate --- */
/* `:not(.mud-checkbox)` esclude lo span wrapper del MudCheckBox (cella select-all) */
.index-grid-wrapper .mud-table-head .mud-table-cell .mud-table-cell-custom-group,
.index-grid-wrapper .mud-table-head .mud-table-cell .column-title,
.index-grid-wrapper .mud-table-head .mud-table-cell > span:not(.mud-checkbox) {
	text-transform: uppercase;
	font-size: var(--grc-fs-xs);
	letter-spacing: 0.04em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}

/* Sort button nel header: full-width, titolo flex con ellipsis, freccia sempre visibile */
.index-grid-wrapper .mud-table-head .mud-sort-button {
	padding: 4px 8px !important;
	min-height: unset;
	width: 100%;
	justify-content: flex-start;
}

.index-grid-wrapper .mud-table-head .mud-sort-button .mud-button-label {
	display: inline-flex;
	align-items: center;
	width: 100%;
	max-width: none;
	gap: 4px;
	text-transform: uppercase;
	font-size: var(--grc-fs-xs);
	letter-spacing: 0.04em;
}

/* Solo il testo del titolo riceve ellipsis; min-width: 0 permette lo shrink dentro flex */
.index-grid-wrapper .mud-table-head .mud-sort-button .mud-button-label > span {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Freccia ordinamento: dimensione fissa, mai compressa */
.index-grid-wrapper .mud-table-head .mud-sort-button .mud-icon-root {
	flex: 0 0 auto;
	font-size: var(--grc-fs-base) !important;
}

/* --- Filtri compatti --- */
.index-grid-wrapper .mud-table-head .mud-input {
	font-size: var(--grc-fs-grid-cell);
}

.index-grid-wrapper .mud-table-head .mud-stack {
	gap: 2px !important;
}

.index-grid-wrapper .mud-table-head .mud-menu button,
.index-grid-wrapper .mud-table-head .mud-icon-button {
	padding: 4px !important;
	min-width: unset;
}

.index-grid-wrapper .mud-table-head .mud-icon-root {
	font-size: var(--grc-fs-lg);
}

/* Cella select-all header: identificata via :has(.mud-checkbox).
   In MudBlazor 7.16 il th non ha classi specifiche, ma contiene un
   <label class="mud-checkbox"> come discendente. Sovrascriviamo le
   regole compact e di truncation che lo schiacciavano. */
.index-grid-wrapper .mud-table-head .mud-table-cell:has(.mud-checkbox) {
	padding: 0 8px !important;
	overflow: visible !important;
	text-align: center !important;
	vertical-align: middle !important;
	width: 48px !important;
	min-width: 48px !important;
}

.index-grid-wrapper .mud-table-head .mud-table-cell:has(.mud-checkbox) .column-header,
.index-grid-wrapper .mud-table-head .mud-table-cell:has(.mud-checkbox) .mud-input-control,
.index-grid-wrapper .mud-table-head .mud-table-cell:has(.mud-checkbox) .mud-input-control-input-container {
	display: inline-flex !important;
	justify-content: center;
	align-items: center;
	max-width: none !important;
	overflow: visible !important;
	white-space: normal !important;
	margin: 0;
	padding: 0;
}

.index-grid-wrapper .mud-table-head .mud-table-cell:has(.mud-checkbox) .mud-checkbox {
	margin: 0;
	padding: 0;
}

.index-grid-wrapper .mud-table-head .mud-table-cell:has(.mud-checkbox) .mud-icon-button {
	padding: 8px !important;
	min-width: unset;
}

.index-grid-wrapper .mud-table-head .mud-table-cell:has(.mud-checkbox) .mud-icon-root {
	font-size: 1.25rem !important;
}

/* --- Celle compatte --- */
.index-grid-wrapper .mud-table-cell {
	padding: 6px 12px !important;
	font-size: var(--grc-fs-grid-cell);
}

.index-grid-wrapper .mud-table-head .mud-table-cell {
	padding: 8px 12px !important;
}

/* Status badge compatto */
.index-grid-wrapper .mud-table-body .mud-element {
	font-size: var(--grc-fs-badge) !important;
}

/* --- Truncamento a 2 righe del testo nelle celle body, ellipsis su overflow ---
   Cap di larghezza sul td per forzare il wrap; line-clamp applicato al
   wrapper interno (MudText/MudLink) per preservare il layout di tabella. */
.index-grid-wrapper .mud-table-body .mud-table-cell {
	max-width: 420px;
	overflow: hidden;
	word-break: break-word;
	overflow-wrap: anywhere;
	vertical-align: top;
}

.index-grid-wrapper .mud-table-body .mud-table-cell .mud-typography,
.index-grid-wrapper .mud-table-body .mud-table-cell > a.mud-link {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
	margin: 0;
}
/* ============================================
   Tabella storico valutazioni (dialog) — stesso look delle griglie index:
   header grigio + bordi #d5d5d5, ma senza il layout full-page di .index-grid-wrapper
   ============================================ */
.snapshot-history-grid.mud-table {
	border: 1px solid #d5d5d5;
	border-radius: 4px;
	overflow: hidden; /* il border-radius taglia gli angoli dell'header grigio */
}

.snapshot-history-grid .mud-table-head th {
	background-color: #ecedf0 !important;
	border-bottom: 1px solid #d5d5d5;
}

.snapshot-history-grid .mud-table-cell {
	border-bottom: 1px solid #e0e0e0;
}

.snapshot-history-grid .mud-table-body .mud-table-row:last-child .mud-table-cell {
	border-bottom: none;
}

/* Zebra striping coerente con le griglie index (#f7f7f8 righe pari).
   La riga dello snapshot attivo resta evidenziata: il suo background è inline
   via RowStyleFunc, quindi vince su queste regole di classe. */
.snapshot-history-grid .mud-table-body .mud-table-row:nth-child(odd) {
	background-color: #ffffff;
}

.snapshot-history-grid .mud-table-body .mud-table-row:nth-child(even) {
	background-color: #f7f7f8;
}