/* ============================================================
   Prometheon's MudBlazor adaptations
   ============================================================

   What stayed here when the generic MudBlazor integration moved to
   Elioplus.DesignSystem: the rules anchored on Prometheon's own classes. Each
   reaches markup MudBlazor renders, which CSS isolation cannot touch, and each
   is anchored on a class that exists on exactly one screen, so living in a
   global stylesheet does not widen what they match.

   Linked after the system's integration stylesheet, so anything here wins a tie.
   ============================================================ */

/* Public company and tender listings render their cards through MudDataGrid and
   strip its table chrome. From Components/Pages/Public/{Companies,Tenders}.razor,
   which noted that ::deep is unreliable against MudDataGrid's rendered markup -
   the reason these are global rather than scoped. */
.company-data-grid.mud-table-container,
.tender-data-grid.mud-table-container {
    background: transparent;
    box-shadow: none;
}

.tender-data-grid .mud-table-cell {
    padding: 0;
    border: none;
}

.tender-data-grid .mud-table-row {
    background: transparent;
}

/* The companies grid lays MudDataGrid out as a card grid: three across from the tablet
   breakpoint up, one column below it. From Components/Pages/Public/Companies.razor.

   OWNERSHIP. Every selector here is (0,3,0) - a page class, the table root, then the
   MudBlazor part class. That is deliberate: three separate MudBlazor rules decide these
   same properties at (0,2,0), so anything weaker loses on specificity no matter what
   order the stylesheets are linked in. Being one class steeper means these win on their
   own merits rather than on link order, and nothing here needs !important.

   What each one is beating:

     tbody   .mud-table-root .mud-table-body   display: table-row-group
     tr      .mud-xs-table .mud-table-row      display: revert                  @<=600px
     td      .mud-xs-table .mud-table-cell     display: flex;
                                               justify-content: space-between   @<=600px

   The last two are MudBlazor's responsive table mode, which below 600px restacks a
   table into label/value rows. That is right for a data table and wrong for a card: it
   made every card a shrink-to-fit flex item pushed to the right of its cell - 196px
   wide inside a 364px cell on a 390px phone, with its text clipped at the viewport
   edge. Owning display on the row and the cell at every width, not only where the grid
   is three across, is what fixes that.

   Declared mobile-first: one column by default, three from 768px up, so 768px itself
   is already the three-column layout. */
.company-data-grid table {
    border-collapse: collapse;
}

/* The table stops behaving as a table, so it should take the width it is given rather
   than the width its content wants. Without this it grows past
   .mud-table-container, which scrolls - the other half of the clipping. */
.company-data-grid .mud-table-root {
    width: 100%;
}

.company-data-grid .mud-table-root .mud-table-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

@media (min-width: 768px) {
    .company-data-grid .mud-table-root .mud-table-body {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* The row disappears so that its cell becomes the grid item. */
.company-data-grid .mud-table-root .mud-table-row {
    display: contents;
}

.company-data-grid .mud-table-root .mud-table-cell {
    display: block;
    padding: 0;
    border: none;
}

/* The loading and no-records rows are not card rows. MudBlazor renders them as a bare
   tr with no .mud-table-row class, so the display: contents above does not reach them
   and they stay grid items - which parked the "No matching companies" panel in the
   first column, 221px wide on a tablet. They span the whole row instead. */
.company-data-grid .mud-table-root .mud-table-body > tr {
    grid-column: 1 / -1;
}

.company-data-grid .mud-table-root .mud-table-empty-row {
    display: block;
    width: 100%;
}

/* The admin RFQ vendor selector is a MudBlazor popover, rendered into the popover
   provider at body level and so outside every component's isolation scope.
   From Components/Shared/RfqDetailsDialog.razor. */
.rfq-admin-selector-popover {
    max-height: 360px;
    overflow-y: auto;
}

.rfq-admin-selector-popover .mud-list {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* MudBlazor's table pagination is a nowrap flex toolbar - "Rows per page", the range
   caption and the page buttons on one line. In a narrow content column those three add
   up to more than the column (533px inside 480px on an admin table at 768px), and
   because the toolbar neither wraps nor scrolls, the surplus pushed the whole page
   sideways.

   It wraps instead. The selector is (0,2,0) so it beats MudBlazor's own .mud-toolbar
   height at (0,1,0) on specificity rather than on which stylesheet is linked later, and
   the height has to give way too or a wrapped second line would be cut off by the
   toolbar's fixed height. Nothing changes where the three parts already fit. */
.mud-table-pagination .mud-table-pagination-toolbar {
    flex-wrap: wrap;
    height: auto;
    min-height: 3.25rem;
    row-gap: 4px;
}