/* SCROLLBAR STABILITY — prevents page-width shift when content height changes */
html:has(.dd-bolig-shop) {
    scrollbar-gutter: stable;
}
html:has(.dd-bolig-shop.dd-map-active) {
    scrollbar-gutter: auto;
}


/* LIST ACTIONS BAR */
.dd-bse-list-actions {
    position: sticky;
    top: calc(var(--dd-sticky-offset) + var(--dd-list-controlbar-height));
    z-index: 2;
    background: var(--dd-color-background);
    transition: top var(--dd-animation-time) var(--dd-animation-easing);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--dd-font-small);
    padding: calc(var(--dd-margin-narrow) - 0.5em);
    padding-top: calc(var(--dd-margin-narrow) / 2);
    padding-bottom: calc(var(--dd-margin-narrow) / 2);
}

.dd-bse-list-sort-actions {
    display: flex;
    align-items: center;
}

.dd-bse-list-actions button {
    background: transparent;
    color: black;
    border: none;
}

.dd-bse-list-actions button.dd-button {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}


/* TABLE VIEW */
.dd-bse-list-table-wrapper {
    padding: var(--dd-margin-narrow);
}

.dd-bse-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--dd-font-small);
    color: var(--dd-color-text);
}


/* THEAD */
.dd-bse-list-table thead {
    position: sticky;
    top: calc(var(--dd-sticky-offset) + var(--dd-list-controlbar-height) + var(--dd-list-actions-height));
    z-index: 1;
    background: var(--dd-color-background);
    transition: top var(--dd-animation-time) var(--dd-animation-easing);
}

.dd-bse-list-table th {
    text-align: left;
    padding: 0.6em 0.8em;
    border-bottom: 2px solid var(--dd-color-viewport);
    white-space: nowrap;
    cursor: default;
    user-select: none;
    font-weight: 700;
}

.dd-bse-list-table th[data-sortkey] {
    cursor: pointer;
}

@media screen AND (hover:hover) {
    .not-touch-device .dd-bse-list-table th[data-sortkey]:hover {
        text-decoration: underline;
    }
}


/* SORT INDICATOR */
.dd-bse-list-table th[data-sortkey]::after {
    content: "\2193";
    margin-left: 0.3em;
    opacity: 0;
    display: inline-block;
    transition: opacity 0.15s ease, transform 0.2s ease;
}

.dd-bse-list-table th.dd-table-sorted::after {
    opacity: 1;
}

.dd-bse-list-table th.dd-table-sorted.dd-sort-asc::after {
    transform: rotate(180deg);
}


/* TBODY */
.dd-bse-list-table td {
    padding: 0.6em 0.8em;
    border-bottom: 1px solid var(--dd-color-viewport);
    white-space: nowrap;
}

.dd-bse-list-table tbody tr {
    cursor: pointer;
    transition: background 0.1s ease;
}

.dd-bse-list-table tbody tr:focus-visible {
    outline: 2px solid var(--dd-color-text);
    outline-offset: -2px;
}

.dd-bse-list-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

@media screen AND (hover:hover) {
    .dd-bse-list-table tbody tr:hover {
        background: rgba(0, 0, 0, 0.04);
    }
}


/* LOADING STATE — subtle dim while fetching replacement content */
.dd-loading-dim {
    opacity: 0.3;
    pointer-events: none;
    transition: opacity 0.15s ease;
}


/* TRUNCATION — truncates from the start (keeps end of string, e.g. floor/room in addresses) */
.dd-table-truncate-start {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: rtl;
    text-align: left;
}

.dd-table-truncate-start::after {
    content: '\200E';
}

/* STATUS BULB COLUMN */
.dd-bse-list-table .dd-table-col-status-bulb {
    width: 2em;
    text-align: center;
}


/* VIEW TOGGLE */
.dd-view-toggle {
    position: relative;
    background: var(--dd-color-background);
    border-radius: var(--dd-button-border-radius);
    height: var(--dd-button-height-small);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    gap: 0.4em;
    overflow: hidden;
    border: 1px solid #00000040;
}

.dd-view-toggle-choice {
    position: relative;
    z-index: 1;
    padding: 0 0.4em;
    margin: 0;
    background: none;
    border: none;
    border-radius: calc( var(--dd-button-border-radius) - 3px );
    cursor: pointer;
    color: var(--dd-color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--dd-animation-time) var(--dd-animation-easing);
}

.dd-view-toggle-choice.dd-selected {
    color: var(--dd-color-background);
}

.dd-view-toggle:focus-within {
    outline: 2px solid var(--dd-color-text);
    outline-offset: 3px;
}

.dd-view-toggle-choice:focus {
    outline: none;
}

.dd-view-toggle-choice svg {
    display: block;
}

.dd-view-toggle-selector {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    border-radius: calc( var(--dd-button-border-radius) - 3px );
    margin: 3px 0;
    pointer-events: none;
    background: var(--dd-color-text);
}