/* ============================================================
   Dashboard list pages - shared presentation
   ============================================================

   RfqList and ProposalList render the same list-page furniture: a page container,
   a header block, a search field, a table shell with sortable headers, and the
   loading and empty states. Both declared these rules identically in their own
   style blocks; this is the single copy.

   What deliberately stayed with each page, because the two differ there:
     .table-row     - the grid column layout is per page (RFQ columns vs proposal
                      columns); only its :hover and :last-child behaviour is shared
     .header-left   - ProposalList adds a min-width
     @media rules   - the responsive overrides are not identical between the two

   Load order. These rules used to live in Razor style blocks, which the framework
   injects into the document at render time - after every linked stylesheet,
   MudBlazor included. At least one depends on coming after MudBlazor: .search-field
   sets a 280px width on a MudTextField, competing with MudBlazor's own full-width
   rule at equal specificity. Now that MudBlazor.min.css is linked first (see
   Components/App.razor), every application stylesheet satisfies that.

   It must still come after the scoped bundle (*.styles.css), though.
   `.table-row:last-child { border-bottom: none }` below ties at (0,2,0) with each
   page's scoped `.table-row[b-...] { border-bottom: 1px solid ... }`, and wins only
   by coming later; linked any earlier, the last row of every RFQ and proposal list
   would get its border back. `.table-row:hover` ties the same way, though no page
   sets a competing background today.
   ============================================================ */
.procurement-os-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

.header-title {
    font-weight: 600;
    color: var(--ds-text-primary);
    margin-bottom: 4px;
}

.header-subtitle {
    color: var(--ds-text-secondary);
    font-size: var(--ds-text-14);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-field {
    width: 280px;
}

.table-container {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--ds-border);
    overflow: hidden;
}

.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: var(--ds-text-secondary);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.empty-icon {
    font-size: 64px;
    color: #cbd5e0;
    margin-bottom: 16px;
}

.empty-title {
    color: #2d3748;
    font-weight: 600;
    margin-bottom: 8px;
}

.empty-subtitle {
    color: var(--ds-text-secondary);
    max-width: 400px;
}

.th {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--ds-text-11);
    font-weight: 600;
    color: var(--ds-text-body);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s;
}

.th:hover {
    color: #2d3748;
}

.th-actions {
    cursor: default;
    justify-content: flex-end;
    text-align: right;
}

.th-actions:hover {
    color: var(--ds-text-body);
}

.table-body {
    min-height: 200px;
}

.table-row:hover {
    background: var(--ds-surface-alt);
}

.table-row:last-child {
    border-bottom: none;
}

.td {
    display: flex;
    align-items: center;
    font-size: var(--ds-text-14);
    color: #2d3748;
}

.td-activity {
    color: var(--ds-text-secondary);
    font-size: var(--ds-text-13);
}

.page-indicator {
    font-size: var(--ds-text-13);
    color: var(--ds-text-body);
    font-weight: 500;
}