/*
 * Responsive layout for search result lists (Views/Shared/SearchResults/*.cshtml).
 *
 * One markup, two modes:
 *  - from the Bootstrap "lg" breakpoint (992px) up the <table class="hs-results"> renders as a classic table;
 *  - below it the same DOM is switched to a stack of "cards": thead is hidden, every <tr> becomes a two-column
 *    CSS grid and every <td> becomes a block prefixed with its data-label.
 *
 * Role classes on <th>/<td>:
 *  .hs-id     left part of the card header (ids, bookmark, status badge); nowrap on desktop
 *  .hs-id-wrap   modifier for .hs-id: ids without break points (GUIDs) wrap inside a 12rem column on desktop
 *  .hs-price  right part of the card header (amounts); right-aligned, bold, nowrap
 *  .hs-full   full-width line without label (contract subject, tender name, person description)
 *  .hs-title  modifier for .hs-full: on mobile rendered as the emphasised second line of the card
 *  .hs-meta   secondary data (dates, court); on mobile shown as a small muted line instead of being hidden
 *  .hs-list   cell with one <div> per item (debtors, creditors); on mobile the items flow on one line
 *  .hs-spacer empty filler cells; hidden on mobile
 *  .hs-ad     advertisement row cell; full width, no label
 * Any other <td> with data-label becomes a full-width "Label: value" line on mobile.
 */

/* ---------- Desktop (table mode) ---------- */
.hs-results th.hs-id,
.hs-results td.hs-id,
.hs-results th.hs-meta,
.hs-results td.hs-meta {
    white-space: nowrap;
    width: 1%;
}

/* Ids without natural break points (GUID tender ids): wrap inside a fixed-width column instead of widening the table.
   Scoped to table mode only: in card mode a shrink-wrapped grid item would no longer stretch to the column. */
@media (min-width: 992px) {
    .hs-results td.hs-id.hs-id-wrap {
        white-space: normal;
        overflow-wrap: anywhere;
        width: 12rem;
        min-width: 9rem;
    }
}

.hs-results th.hs-price,
.hs-results td.hs-price {
    text-align: right;
    white-space: nowrap;
}

.hs-results td.hs-price {
    font-weight: 600;
}

.hs-results th.hs-full {
    width: 30%;
}

/* Contracts: header row (tr.first) and subject row (tr.last) belong to one result */
.hs-results > tbody > tr.first > td {
    border-bottom: 0;
}

.hs-results > tbody > tr.last > td {
    padding-top: 0;
    font-size: 0.9375rem;
}

.hs-results ol,
.hs-results ul:not(.list-group) {
    padding-left: 1.1rem;
    margin-bottom: 0;
}

/* ---------- Mobile (card mode) ---------- */
@media (max-width: 991.98px) {
    .hs-results {
        display: block;
        width: 100%;
    }

    .hs-results > thead {
        display: none;
    }

    .hs-results > tbody {
        display: block;
    }

    .hs-results > tbody > tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 0.75rem;
        row-gap: 0.125rem;
        padding: 0.625rem 0;
        border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    }

    .hs-results > tbody > tr > td {
        display: block;
        min-width: 0;
        grid-column: 1 / -1;
        border: 0;
        padding: 0;
        background: none;
        overflow-wrap: anywhere;
    }

    /* Card header: id on the left, price on the right, always on the first line */
    .hs-results > tbody > tr > td.hs-id {
        grid-column: 1;
        grid-row: 1;
        white-space: normal;
        width: auto;
    }

    .hs-results > tbody > tr > td.hs-price {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
        align-self: start;
        white-space: normal;
    }

    /* Card title (tender name, project name, company name): second line, emphasised */
    .hs-results > tbody > tr > td.hs-title {
        grid-row: 2;
        font-weight: 600;
    }

    /* Labelled lines */
    .hs-results > tbody > tr > td[data-label]:not(.hs-id):not(.hs-price):not(.hs-full):not(.hs-ad)::before {
        content: attr(data-label) ": ";
        color: var(--bs-secondary-color, #6c757d);
        font-size: 0.85em;
    }

    .hs-results > tbody > tr > td.hs-meta {
        font-size: 0.85em;
        color: var(--bs-secondary-color, #6c757d);
        width: auto;
        white-space: normal;
    }

    /* Several .hs-meta cells of one row flow on one line */
    .hs-results > tbody > tr > td.hs-meta + td.hs-meta {
        margin-top: -0.125rem;
    }

    .hs-results > tbody > tr > td.hs-spacer {
        display: none;
    }

    .hs-results > tbody > tr > td.hs-ad {
        padding: 0;
    }

    /* Contracts: join the header row and the subject row into one card */
    .hs-results > tbody > tr.first {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .hs-results > tbody > tr.last {
        padding-top: 0;
    }

    .hs-results > tbody > tr.last > td.hs-full {
        padding-top: 0.125rem;
    }

    /* Lists inside cells (suppliers, debtors, relations) */
    .hs-results > tbody > tr > td > ol,
    .hs-results > tbody > tr > td > ul:not(.list-group) {
        padding-left: 1.1rem;
    }

    /* Cells with one <div> per item (debtors, creditors): items flow on one line separated by a middle dot */
    .hs-results > tbody > tr > td.hs-list > div {
        display: inline;
    }

    .hs-results > tbody > tr > td.hs-list > div + div::before {
        content: " \00b7 ";
        color: var(--bs-secondary-color, #6c757d);
    }
}

/* ---------- Pagination ---------- */
.hs-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.hs-pagination .pagination {
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .hs-pagination .pagination-lg .page-link {
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
    }
}