@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lcdo7z9xd2.bundle.scp.css';

/* /Shared/InfoTable.razor.rz.scp.css */
/* Desktop/tablet look */
.datagrid thead th[b-uvaoojskiu] {
    font-weight: 700;
}

.datagrid th[b-uvaoojskiu], .datagrid td[b-uvaoojskiu] {
    white-space: nowrap;
    padding: .5rem .75rem;
}

.datagrid tbody tr:hover[b-uvaoojskiu] {
    background: #fafafa;
}

/* Mobile: turn the row into a vertical list using the headers as labels */
@media (max-width: 576px) { /* choose 576/768 as you like */
    .datagrid.stack-mobile thead[b-uvaoojskiu] {
        display: none;
    }

    .datagrid.stack-mobile tr[b-uvaoojskiu] {
        display: block;
        border-top: 1px solid #eee;
    }

    .datagrid.stack-mobile td[b-uvaoojskiu] {
        display: block;
        width: 100%;
        padding: .55rem 0;
        border: 0;
        white-space: normal; /* allow wrapping on small screens */
    }

        .datagrid.stack-mobile td[b-uvaoojskiu]::before {
            content: attr(data-label); /* <-- prints the header */
            display: block;
            font-weight: 600;
            margin-bottom: .15rem;
            color: #495057;
        }
        /* On mobile we usually don't want right/center alignment for stacked values */
        .datagrid.stack-mobile td.text-end[b-uvaoojskiu],
        .datagrid.stack-mobile td.text-center[b-uvaoojskiu] {
            text-align: left;
        }
}