/* Estilo base del grid del sistema (MichGrid). Hoja GLOBAL a propósito, no CSS aislado
   (.razor.css): SfGrid es un componente de otro ensamblado (Syncfusion.Blazor.Grid), así que su
   raíz renderizada nunca hereda el atributo de scope de MichGrid — el aislamiento de Blazor no
   puede alcanzarlo. Como además la idea es que MichGrid sea el único punto de entrada al grid en
   todo el sistema, tiene sentido que esto sea el default global en vez de un estilo por instancia. */

.e-grid .e-rowcell {
    color: #242424;
    vertical-align: middle;
}

.e-grid .e-altrow {
    background-color: var(--mich-surface);
}

.e-grid .e-row td {
    font-size: 11px;
    padding-top: 0;
    padding-bottom: 0;
}

.e-grid .e-headercell,
.e-grid .e-headercell .e-headertext {
    font-size: 11px;
}

.e-grid .e-headercell .e-headertext {
    font-weight: bold;
}

/* Syncfusion centra el texto del header con un truco: vertical-align:middle en el <th> sobre un
   div interno de altura CERO (.e-headercell-container/.e-headercelldiv) — el texto simplemente se
   dibuja hacia abajo desde ese punto cero, en vez de quedar centrado de verdad. Con RowHeight chico
   (24px) el corrimiento es de 1-2px y no se nota; con RowHeight más grande (33px, ver MichGrid
   RowHeight) se hace evidente y el texto queda pegado abajo. Se fuerza a que esos divs realmente
   ocupen el alto del header y centren con flexbox real, sin depender del truco de Syncfusion. */
.e-grid .e-headercell-container,
.e-grid .e-headercelldiv {
    height: 100%;
    display: flex;
    align-items: center;
}

.e-grid .e-row .e-input-group,
.e-grid .e-row .e-numerictextbox,
.e-grid .e-row .e-dropdownlist {
    width: 100%;
}

.e-grid .e-row .e-checkbox-wrapper {
    display: table;
    margin: 0 auto;
    transform: scale(0.9);
}

.e-grid .e-rowcell,
.e-grid .e-headercell {
    border-style: solid !important;
    border-color: #eef0f2 !important;
    border-width: 0 1px 1px 0 !important;
}

/* Solo para grids con Height en porcentaje (ver MichGrid.razor, FillHeightCssClass): .e-grid ya
   tiene su alto correcto resuelto por el flex del contenedor padre, pero por defecto Syncfusion no
   traslada ese alto al panel interno de filas (.e-gridcontent/.e-content) — se dibujan a su alto
   natural de contenido y, con más filas de las que entran, se desbordan en vez de scrollear.
   Convertir .e-grid en columna flex fuerza a .e-gridcontent a ocupar el espacio que le sobra
   después del header, y .e-content hereda ese alto para que su overflow:auto (ya puesto por
   Syncfusion) recorte y scrollee de verdad. Grids con Height="auto" no llevan esta clase y no se
   ven afectados. */
.e-grid.mich-grid-fill-height {
    display: flex;
    flex-direction: column;
}

/* .e-gridheader trae overflow:hidden propio de Syncfusion, y eso hace que flexbox le quite su piso
   mínimo automático (el "automatic minimum size" de un flex item pasa a ser 0 cuando su overflow no
   es visible) — sin esto, cuando el espacio no alcanza para header+filas, el header también se
   achica (33px -> 24px en las pruebas) en vez de quedarse fijo mientras el que cede es .e-gridcontent.
   flex-shrink:0 fuerza a que el header nunca ceda espacio, pase lo que pase. */
.e-grid.mich-grid-fill-height .e-gridheader {
    flex-shrink: 0;
}

.e-grid.mich-grid-fill-height .e-gridcontent {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.e-grid.mich-grid-fill-height .e-content {
    height: 100%;
}