/* realitymonitor.sk - listing page styles (filter panel, chips, table, select2 skin, pagination) */

/* EDIT THIS FILE DIRECTLY. It is not compiled from anything.
   resources/frontend/auctions.scss is an orphan and is excluded from the build; running the
   sass build over it would replace everything below. See docs/frontend-assets.md. */

/* ---- Page head ---- */
/* .rm-page-head / .rm-count moved to the layout: the hubs and the home page use them too,
   and this stylesheet is only loaded on the listing. */

/* ---- Filter panel ---- */
.rm-filter-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16,42,51,.05);
    margin-bottom: 20px;
}
.rm-filter-body { padding: 18px 20px 16px; }
.rm-filter-row { display: grid; gap: 14px; }
.rm-filter-row-selects { grid-template-columns: 1fr 1fr 1.3fr; margin-bottom: 14px; }
.rm-filter-row-dates { grid-template-columns: 1.2fr 1.2fr 0.8fr auto auto; align-items: end; }
@media (max-width: 991px) {
    .rm-filter-row-selects, .rm-filter-row-dates { grid-template-columns: 1fr; }
}
.rm-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.rm-input {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--input-border);
    border-radius: 7px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    background: var(--input-bg);
}
.rm-input:focus {
    border-color: var(--primary-color);
    outline: 2px solid rgba(14,124,140,.15);
}
.rm-select { cursor: pointer; appearance: auto; }
.rm-date-range { display: flex; align-items: center; gap: 8px; }
.rm-date-range .rm-input { flex: 1; min-width: 0; }
.rm-dash { color: #9aa8ae; font-size: 13px; }
.rm-btn-search {
    height: 40px;
    padding: 0 28px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 14.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}
.rm-btn-search:hover { background: var(--primary-dark); }

/* Sits on the baseline with the inputs beside it, not with their labels. */
.rm-upcoming { height: 40px; display: flex; align-items: center; }
.rm-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
}
.rm-check input { width: 16px; height: 16px; accent-color: var(--primary-color); cursor: pointer; }

/* ---- Active filter chips ---- */
.rm-chips-bar {
    border-top: 1px solid #e8edef;
    background: #f7fafa;
    padding: 10px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    border-radius: 0 0 10px 10px;
}
.rm-chips-title { font-size: 12.5px; font-weight: 600; color: var(--ink-faint); }
.rm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    background: var(--primary-tint);
    border: 1px solid var(--primary-tint-border);
    border-radius: 6px;
    font-size: 13px;
    color: var(--primary-dark);
}
.rm-chip-kind { font-weight: 400; color: #55868f; }
.rm-chip-label { font-weight: 600; }
.rm-chip-x {
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: var(--primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.rm-chip-x:hover { background: #cde6ea; }
.rm-chips-clear {
    margin-left: auto;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-faint);
    cursor: pointer;
    font-family: inherit;
    text-decoration: underline;
    padding: 4px 6px;
}
.rm-chips-clear:hover { color: var(--ink); }

/* ---- Table card ---- */
.rm-table-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16,42,51,.05);
    overflow: hidden;
}
.rm-table { font-size: 13.5px; }
.rm-table thead th {
    padding: 11px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--line);
    background: #f7fafa;
}
.rm-table thead th:first-child, .rm-table tbody td:first-child { padding-left: 20px; }
.rm-table thead th:last-child, .rm-table tbody td:last-child { padding-right: 20px; }
.rm-table tbody td { padding: 12px 10px; border-bottom: 1px solid var(--bg-light); vertical-align: middle; }
.rm-table tbody tr:hover { background: #f7fafa; }
.rm-th-cena, .rm-td-cena { text-align: right; }
.rm-td-cena { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.rm-td-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rm-td-muted { color: var(--ink-soft); }
/* Row links: the anchor fills its cell, padding included, so the clickable area is the whole
   cell and not just the text. Negative margins pull it out over the cell padding, which is
   then reapplied on the link itself. */
.rm-cell-link {
    display: block;
    margin: -12px -10px;
    padding: 12px 10px;
    color: inherit;
    text-decoration: none;
}
.rm-cell-link:hover,
.rm-cell-link:focus {
    color: inherit;
    text-decoration: none;
}
.rm-table tbody td:first-child .rm-cell-link {
    margin-left: -20px;
    padding-left: 20px;
}
.rm-cell-link:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
    border-radius: 4px;
}
.rm-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.rm-badge-sold { background: #e9f6ec; border: 1px solid #bfe3c8; color: #1e7a35; }
.rm-badge-open { background: #fdf3e4; border: 1px solid #f2ddb8; color: #9a6a12; }
.rm-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--line);
    background: #f7fafa;
}
.rm-table-footer nav { margin: 0; }
/* With the "Showing ... results" line gone, the pager no longer needs to be pushed apart
   from anything - it just sits at the right end of the footer. */
.rm-pagination .pagination { margin: 0; }
.rm-pagination .page-link {
    color: var(--ink-soft);
    border-color: var(--line);
    padding: 5px 11px;
    font-size: 14px;
}
.rm-pagination .page-link:hover {
    background: var(--primary-tint);
    border-color: var(--primary-tint-border);
    color: var(--primary-dark);
}
.rm-pagination .page-item.active .page-link {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
.rm-pagination .page-item.disabled .page-link {
    color: var(--ink-faint);
    background: transparent;
    border-color: var(--line);
}

/* ---- Select2 (default theme) skinned to match ---- */
.select2-container--default .select2-selection--multiple {
    min-height: 40px;
    border: 1px solid var(--input-border);
    border-radius: 7px;
    background: var(--input-bg);
    padding: 2px 28px 2px 6px;
    position: relative;
    /* The chip list and the inline search box are siblings here, and the container is not a
       flex parent by default, so they stacked and the field grew to two rows as soon as one
       chip was picked. Laying them out in one wrapping row keeps the height consistent with
       the plain inputs next to it. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
/* Select2 draws no arrow for multi-selects, so the chevron is drawn on the container.
   pointer-events off, otherwise it would swallow clicks meant for the field. */
.select2-container--default .select2-selection--multiple::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -6px;
    border-right: 1.6px solid var(--ink-faint);
    border-bottom: 1.6px solid var(--ink-faint);
    transform: rotate(45deg);
    pointer-events: none;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--primary-color);
    outline: 2px solid rgba(14,124,140,.15);
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}
/* Select2 puts the remove button before the label in the DOM. The design wants it after the
   text, so the choice becomes a flex row and the button is ordered last; the label is an
   anonymous flex item (or __display span, depending on the build) and keeps order 0. */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--primary-tint);
    border: 1px solid var(--primary-tint-border);
    border-radius: 5px;
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    margin: 2px 0;
    padding: 2px 7px 2px 9px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding: 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    /* Select2 pins this absolutely to the left of the chip, which takes it out of the flex
       flow and makes `order` a no-op. Back to static so it lays out like a normal item. */
    position: static;
    order: 2;
    color: var(--primary-dark);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    border: none;
    border-right: none;
    background: transparent;
    margin: 0;
    padding: 0 1px;
    width: auto;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #063d45;
    background: #cde6ea;
    border-radius: 3px;
}
.select2-container--default .select2-selection--multiple .select2-search--inline {
    flex: 1 1 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    float: none;
}
.select2-container--default .select2-search--inline .select2-search__field {
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    margin-top: 0;
    height: 26px;
}
.select2-dropdown {
    border: 1px solid var(--input-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(16,42,51,.14);
    overflow: hidden;
}
.select2-container--default .select2-results__option {
    font-size: 14px;
    padding: 8px 12px;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--primary-tint);
    color: var(--primary-dark);
}
.select2-container--default .select2-results__option--selected {
    background: #f0f7f8;
    color: var(--primary-dark);
    font-weight: 600;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--input-border);
    border-radius: 6px;
    font-family: inherit;
}

/* ---- Pagination (Bootstrap 5 default view) ---- */
.pagination { margin: 0; }
.pagination .page-link {
    border-color: var(--line);
    color: #33454d;
    font-size: 13px;
    border-radius: 6px;
    margin: 0 2px;
}
.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    font-weight: 600;
}
.pagination .page-link:hover { background-color: #fff; border-color: var(--primary-color); color: var(--primary-color); }
.pagination .page-item.disabled .page-link { background-color: #fff; border-color: var(--line); color: #9aa8ae; pointer-events: none; }

/* ---- Period segments (Nadchadzajuce / Ukoncene / Vsetky) ---- */
/* The question most visitors arrive with - "which of these can I still attend" - used to be
   a checkbox inside the filter panel. Here it is one click, above the panel. */
.rm-segments {
    display: inline-flex;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 14px;
}
.rm-segment {
    /* Also worn by <button> - the view toggle and the save-search action - which brings a
       2px system border and a grey face of its own. Without this reset those pills sit
       wider than the anchors beside them and carry a black outline under the active one. */
    appearance: none;
    border: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;

    padding: 6px 16px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
    white-space: nowrap;
}

/* The period segments on the left, the actions on the right. Everything in here is a
   .rm-segments shell, so the row aligns on its own rather than by matched margins. */
.rm-segments-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.rm-view-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }

/* Carries the bell, which no other segment has, so it needs the gap the emoji does not
   bring itself. */
.rm-segment-action { display: inline-flex; align-items: center; gap: 6px; }
.rm-segment:hover { background: #f0f3f5; color: var(--ink); text-decoration: none; }
.rm-segment.is-active {
    background: var(--primary-color);
    color: #fff;
}
.rm-segment.is-active:hover { background: var(--primary-dark); color: #fff; }

/* ---- Search field and type picker row ---- */
.rm-filter-row-search { grid-template-columns: 2fr 1fr; margin-bottom: 14px; }
.rm-search-field .rm-input { width: 100%; }
@media (max-width: 991px) {
    .rm-filter-row-search { grid-template-columns: 1fr; }
}

/* Days-until badge in the Termin column. Same shape as the one on the home page and the
   detail box, so the three read as one thing. */
.rm-days-badge {
    display: inline-block;
    background: var(--primary-tint);
    border: 1px solid var(--primary-tint-border);
    color: var(--primary-dark);
    border-radius: 20px;
    padding: 0 7px;
    font-size: 11px;
    font-weight: 600;
    line-height: 17px;
    margin-left: 4px;
}

/* The active sort column states its direction; the rest only offer. */
.rm-table thead th.is-sorted { color: var(--primary-color); }

/* Type hub links, laid out as a row of chips rather than the dense columns the okres and
   obec blocks use - there are only four of them. */
.rm-type-links { display: flex; flex-wrap: wrap; gap: 8px; columns: auto !important; }
.rm-type-links li { padding: 0 !important; }
.rm-type-links a {
    display: inline-block;
    background: var(--primary-tint);
    border: 1px solid var(--primary-tint-border);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 13.5px;
    font-weight: 600;
}
.rm-type-links a:hover { background: #fff; text-decoration: none; }

/* ---- Narrow screens: the table becomes one card per auction ---- */
/* Nine columns cannot be read through a horizontal scrollbar on a phone. The markup stays a
   table - one source of truth, and the semantics survive - while each cell names itself from
   the data-label the view writes. */
@media (max-width: 767px) {
    .rm-table-card .table-responsive { overflow-x: visible; }
    .rm-table thead { display: none; }
    .rm-table, .rm-table tbody, .rm-table td { display: block; width: 100%; }
    /* A flex column so Predmet can be lifted to the top of the card without the markup
       having to differ from the table's column order. */
    .rm-table tbody tr {
        display: flex;
        flex-direction: column;
        width: 100%;
        border-bottom: 1px solid var(--line);
        padding: 10px 4px 12px;
    }
    .rm-table tbody tr:last-child { border-bottom: 0; }
    .rm-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 16px;
        padding: 3px 16px !important;
        border-bottom: 0;
        text-align: left;
    }
    .rm-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--ink-faint);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .3px;
    }
    /* Predmet leads the card: it is the line that says what is being sold. */
    .rm-table tbody td.predmet-cell {
        display: block;
        order: -1;
        max-width: none;
        font-size: 15px;
        font-weight: 600;
        padding-bottom: 6px !important;
    }
    .rm-table tbody td.predmet-cell::before { display: none; }
    .rm-table tbody td .rm-cell-link { display: inline; padding: 0; text-align: right; }
    .rm-td-cena { text-align: right; }
}