﻿/*-----GLOBAL---------GLOBAL START-------GLOBAL----------*/
/*TODO: Delete knap - rød*/
/*TODO: Confirm knap - Grøn */
/*TODO: Skal vi have en "info" farve?  -- > Mere/ mindre info skal der ske noget specifikt i den sammenhæng? */
.nemboligmodulindhold619--body {
    --baseMaxWidth: 1440px;
}
.btn-red {
    --buttonMoliri: red;
}
.btn-green {
    --buttonMoliri: green;
}
.visual-status-positive {
    --status-outcome-color: green;
}

.visual-status-negative {
    --status-outcome-color: red;
}
.visual-status-color {
    color: var(--status-outcome-color);
}
.visual-status-bg {
    background-color: var(--status-outcome-color);    
}
bui-web-button button[disabled],
bui-web-button button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.3);
    box-shadow: none;
}

bui-web-button button[disabled]:hover,
bui-web-button button[disabled]:focus,
bui-web-button button[disabled]:hover,
bui-web-button button[disabled]:focus
{
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.3);
    box-shadow: none;
}
/* -----GLOBAL---------GLOBAL END-------GLOBAL----------*/

/*--------------------TENANCY CARD START-----------------*/
/* TODO: list similar to offer collect it to one class? */
.tenancy-card__info {
    padding: 0;
    margin: 0.5em 0;
}

.tenancy-card__info-item {
    display: flex;
    gap: 0.75em;
    align-items: center;
}

.tenancy-modal__content .tenancy-card__info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .tenancy-modal__content .tenancy-card__info * {
        margin: 0;
    }

.tenancy-modal__content .tenancy-card__info-headline {
    font-weight: bold;
}

.tenancy-modal__content .tenancy-card__info-item {
    display: flex;
    gap: 0.75em;
    align-items: center;
}

.tenancy-modal__content .search-card__facilities-information {
    font-size: 0.875em;
}

.tenancy-card {
    --mdc-typography-headline6-font-size: 25px;
    --mdc-dialog-fullscreen-max-height: 95vh;
    --mdc-dialog-fullscreen-height: 100%;
}

    .tenancy-card h2.tenancy-card__header-title {
        color: var(--primaryColorWeb);
    } 

.tenancy-modal__content .tenancy-gallery .thumbnail-container img {
    block-size: inherit;
}

.tenancy-card bui-tablist {
    --primaryColor: var(--buttonMoliri);
    border-bottom: 2px solid var(--primaryColor);
    margin-bottom: 1em;
    overflow-y: auto;
    padding: .5em .1em 0;
}

    .tenancy-card bui-tablist button {
        padding: .5em 1em;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        border: 0;
        box-shadow: 0 -4px 6px rgba(0,0,0,.1),4px 0 6px rgba(0,0,0,.01),-4px 0 6px rgba(0,0,0,.01);
        width: 100%
    }

.tenancy-card .tenancy-card__media-item img, .tenancy-card .main-img-container {
    max-height: 60vh;
}
.tenancy-card > .tenancy-card__actions {
    display: flex;
    gap: 0.25em;
    flex-direction: column;
    align-items: stretch;
}
    .tenancy-card .tenancy-card__actions .tenancy-card__disabled {        
        padding: var(--buttonMoliriPadding,8px 16px);        
    }
    .tenancy-card > .tenancy-card__actions .tenancy-card__disabled {
        width: 100%;
        text-align: center;
        font-size: var(--webbuttonSmallFont,.9em);
    }

figure.tenancy-card__media-item {
    text-align: center;
}
/*
    .tenancy-card__media-item img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

.tenancy-card__media-caption {
    font-size: 0.875rem;
}*/
/*--------------------TENANCY CARD END-----------------*/
/*--------------------OFFERLIST START-----------------*/
/* current offers*/
.offerlist__h2 {
    font-weight: normal;
}

.offerlist-offer__heading {
    color: var(--primaryColorWeb);
    margin: .25em 0 .75em 0;
}

.offerlist-offer__info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.offerlist-offer__info-item {
    display: flex;
    gap: 0.75em;
    align-items: center;
}

.offerlist-offer__info-headline {
    font-weight: bold;
    margin: 0;
}

.offerlist-offer__price-reminder {
    color: var(--primaryColor);
    margin: 0;
}

/*processing & answered*/
.offerlist__card-badge {
    width: 100%;
    height: 100%;
}

    .offerlist__card-badge bui-icon {
        padding: 1em;
        border: 3px solid var(--status-outcome-color, black);
        border-radius: 50%;
    }

.offerlist__card-heading {
    color: var(--primaryColorWeb);
    margin: 0;
}

.offerlist__card-list {
    padding: 0;
    margin: 0.5em 0;
}

    .offerlist__card-list .offerlist__card-item {
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        font-size: 0.95rem;
    }

.offerlist__card-reminder {
    width: 100%;
    padding-top: 0.5em;
    border-top: 1px solid rgba(19, 32, 58, 0.08);
}
.offerlist__reminder-text {
    margin: 0;
    font-size: 0.9em;
}
/*--------------------OFFERLIST END-----------------*/
/*--------------------PERSONAL DOCS START-----------------*/
.personal-docs__table {
    --firstDataTableColumn: 2fr;
}
    .personal-docs__table .personal-docs__item {
        position: relative;
    }
        .personal-docs__table .personal-docs__item .personal-docs__link {
            position: absolute;
            inset: 0;
        }
    .personal-docs__table .personal-docs__item-meta {
        display: flex;
        align-items: center;
        gap: 0.75em;
    }
.personal-docs__table bui-table-row {
    align-items: center;
}

/*.personal-docs__table .personal-docs__group-header {
    position: sticky;
    top: var(--bui-header-height, var(--headerNavHeight, 0px));
    z-index: 1;
    background-color: var(--mainBgColor, #fff);
}
*/

.personal-docs__file-name {
    margin: 0;
    font-size: 1em;
}

.personal-docs__meta {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    font-size: 0.875em;
    margin-top: 0.25em;
}



.personal-docs__tooltip {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5em;
}

@media (min-width: 769px) {
    .personal-docs__meta {
        flex-direction: row;
        gap: 2em;
    }
    .personal-docs__note-column {
        text-align: right;
    }

}
/*--------------------PERSONAL DOCS END-----------------*/

/*--------------------RENT BALANCE START-----------------*/
.rent-base-wrapper {
    --accordionitem-body-padding: 0;
}
    .rent-base-wrapper .rent-balance__heading {
        background: white;
        border-radius: var(--borderRadiusContainer);
        width: 100%;
        padding: 1.5em 2em;
        font-weight: 500;
    }
        .rent-base-wrapper .rent-balance__heading .rent-balance__heading-saldo-amount {
            color: var(--status-outcome-color);
            font-size: 2.5em;
            font-weight: 600;
            line-height: 1.1;
        }

        .rent-base-wrapper .rent-balance__heading .rent-balance__heading-saldo-currency {
            font-size: 1.75em;
        }

.rent-baccount__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: var(--status-outcome-color) 3px solid;
    padding-left: .75em;
    padding-right: 1em;
}
.rent-baccount__item-saldo {
    border-top: 1px solid #b9b9b9;
    border-bottom: 1px solid #222;
    --status-outcome-color: transparent;
}
.rent-baccount__item-total {
    border-top: 1px solid #222;    
    --status-outcome-color: transparent;
}

/*--------------------RENT BALANCE END-----------------*/

/* --------------------CONSENT START-----------------*/
div.consent__panelSummary {
    display: flex;
    align-items: center;
    padding-left: var(--accordionitemHeaderMarginRight, 16px);
}

    div.consent__panelSummary h3 {
        margin: 0;
        width: 100%;
    }

    div.consent__panelSummary button {
        margin-left: 0;
        display: block;
        padding-top: 0.25em;
        padding-bottom: 0.25em;
    }

.consent__info {
    font-size: 0.875rem;
    font-weight: 400;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.consent__reply {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.consent__fieldset {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: none;
    margin: 0;
    padding: 0;
}

    .consent__fieldset bui-web-button {
        align-self: flex-start;
    }

.consent__list {
    list-style: none;
    margin: 1.5em 0 1em;
    padding: 0;
}
/* .consent__listItem {
        //     padding: 0.5em 0;
        // } */
.consent__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .consent__item * {
        margin: 0;
    }
/* Smaller toggle, WCAG 2.2 hit target ≥24×24 via label padding */
.consent__toggle {
    --w: 38px; /* visual track width */
    --h: 20px; /* visual track height */
    --knob: 16px;
    position: relative;
    display: inline-block;
    /* Hit target */
    padding: 2px; /* 20 + 2 + 2 = 24px high */
    line-height: 0; /* avoid extra height */
    cursor: pointer;
}

/* Hide native checkbox but keep it focusable */
.consent__toggle-input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
}

/* Track */
.consent__toggle-indicator {
    position: relative;
    display: inline-block;
    width: var(--w);
    height: var(--h);
    background-color: #c7c7c7;
    border-radius: calc(var(--h) / 2);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    vertical-align: middle;
}

    /* Knob */
    .consent__toggle-indicator::before {
        content: "";
        position: absolute;
        width: var(--knob);
        height: var(--knob);
        left: 2px;
        top: 2px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 1px 2px rgba(0,0,0,.2);
        transition: transform 0.2s ease;
    }

/* Checked */
.consent__toggle-input:checked + .consent__toggle-indicator {
    background-color: #4caf50;
}

    .consent__toggle-input:checked + .consent__toggle-indicator::before {
        transform: translateX(calc(var(--w) - var(--knob) - 4px));
    }

/* Focus-visible on the label (keyboard only) */
.consent__toggle-input:focus-visible + .consent__toggle-indicator {
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.45);
}

/* Optional: disabled */
.consent__toggle-input:disabled + .consent__toggle-indicator {
    opacity: .6;
    cursor: not-allowed;
}
/* --------------------CONSENT END-----------------*/
/*--------------------FUNCTION ROOM START-----------------*/

.function-room-page__btn .function-room-page__btn-search {
    padding: 8px 4.5em;
}
.function-room-page__card {
    font-size: 0.9em;
    height: 100%;
}
.function-room-page__card-body {
    margin-top: 1em;
}
.function-room-page__card-info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25em;
    margin: 0;
    padding: 0;
    list-style: none;
}
function-room-page__card-info-box {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    align-items: center;
}
.function-room-page__card-info-box--double {
    grid-column: span 2;
}

.function-room-page__card-info-title {
    font-weight: bold;
    margin: 0;
}



.function-room-page__table-wrapper {
    border-radius: 1.25rem;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
    overflow-x: auto;
}

.function-room-page__table {
    width: 100%;
    min-width: 640px;
    /*border-collapse: separate;*/
    border-collapse: collapse;
    border-spacing: 0;
    overflow: hidden;
}

    .function-room-page__table thead {
        background: white;
        color: #64748b;
/*        text-transform: uppercase;*/
/*        font-size: 0.75rem;*/
/*        letter-spacing: 0.06em;*/
    }

    .function-room-page__table th,
    .function-room-page__table td {
        padding: 1rem 1.5rem;
        text-align: left;
    }

    .function-room-page__table th {
        font-weight: 600;
        border-bottom: 1px solid #e4e9f2;
    }

    .function-room-page__table tbody tr {
        border-bottom: 1px solid #e5e7eb;
        /*transition: background-color 0.2s ease, transform 0.2s ease;*/
    }

        .function-room-page__table tbody tr:last-child {
            border-bottom: none;
        }

/*        .function-room-page__table tbody tr:hover {
            background: #f7f9fc;
            transform: translateY(-1px);
        }*/

    .function-room-page__table td {
        font-size: 0.95rem;
        color: #111827;
        vertical-align: middle;
    }

        .function-room-page__table td:first-child {
            font-weight: 600;
        }

.function-room-page__table-cell--center {
    text-align: center;
}

.function-room-page__table-cell--end {
    text-align: right;
}

.function-room-page__reason-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-start;
}

.function-room-page__reason {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
}

    .function-room-page__reason bui-icon {
        font-size: 1rem;
    }

.function-room-page__reason--type {
    background: #e8f1ff;
/*    color: #1d4ed8;*/
}

.function-room-page__reason--date {
    background: #ffe8e6;
/*    color: #b91c1c;*/
}

.function-room-page__reason--capacity {
    background: #fff4d6;
/*    color: #b45309;*/
}
span.locale__booking-day-controls {
    display: flex;
}

@media (max-width: 768px) {
    .function-room-page__table {
        min-width: 0;
    }
    table.mobile-view {
        display: block;
        border: 1px solid rgba(148, 163, 184, 0.35);
        border-radius: var(--borderRadiusContainer, 12px);
        overflow: hidden;
    }

        table.mobile-view thead {
            display: none;
        }

        table.mobile-view tbody {
            display: block;
            width: 100%;
        }
        table.mobile-view tr {
            display: block;
            border: none;
        }
            table.mobile-view tr.locale__booking-helptext-row {
                border-top: 1px solid rgba(148, 163, 184, 0.2);
                display: flex;
            }

        table.mobile-view tr.locale__booking-item td {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }

        table.mobile-view tr.locale__booking-item td {
            border-bottom: 1px solid rgba(148, 163, 184, 0.2);
        }

            table.mobile-view tr.locale__booking-item td:last-child {
                border-bottom: none;
            }

        table.mobile-view td::before {
            content: attr(data-label);
            font-weight: 600;
            margin-right: 1em;
            text-align: left;
        }

        table.mobile-view td:not([data-label])::before,
        table.mobile-view td[data-label=""]::before {
            content: none;
            margin-right: 0;
        }
            table.mobile-view .locale__booking-cta-btn bui-web-button,
            table.mobile-view .locale__booking-cta-btn button {
                width: 100%;
            }
}

/*Detail page*/
.body-function-room-detail .contentpage-heading {
    display:none;
}
.locale__description {
    background: white;
    border-radius: var(--borderRadiusContainer);
    padding: 1.5em 2em;
}
/*    .locale__description > *:first-child {
        margin-top: 0;
        margin-bottom: 0.25em;
        display: inline-block;
    }*/

    .locale__description bui-heading {
        --typographyH1FontSize: 25px;
        --typographyH2FontSize: 22px;
    }

.locale__meta-list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9em;
}
.locale__meta-label {
    font-weight: bold;
}
.locale__meta-list bui-input-wrapper {
    font-size: inherit;
}
.function-room-detail__results .function-room-page__table {
    font-size: 0.9em;
}
    .function-room-detail__results .function-room-page__table th,
    .function-room-detail__results .function-room-page__table  td {
        padding: 0.5em;
    }
    .function-room-detail__results  .function-room-page__table td:first-child {
        font-weight: normal;
    }

.locale__booking-helptext-row {
    background: #f5f5f5;
}
.locale__booking-helptext {
    display: flex;
    align-items: center;
    gap: 0.5em;
    justify-content: center;
}

:root {
    --duet-color-primary: #005fcc;
    --duet-color-text: #333;
    --duet-color-text-active: #fff;
    --duet-color-placeholder: #666;
    --duet-color-button: #f5f5f5;
    --duet-color-surface: #fff;
    --duet-color-overlay: rgba(0, 0, 0, 0.8);
    --duet-color-border: var(--primaryColorWeb);
    --duet-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --duet-font-normal: 400;
    --duet-font-bold: 600;
    --duet-radius: 4px;
    --duet-z-index: 600;
}

.locale__description-body {
    white-space: pre-line;
}

.locale__description-container {
    width: 100%;
}
    .locale__description-container .duet-date__input {
        border-radius: 4px 0 0 4px;
    }
    .locale__description-container .duet-date__toggle {
        border-radius: 0;
    }
    .locale__description-container bui-form-wrapper {
        display: block;
        width: 100%;
    }

.function-room-detail__submit-btn {
    height: 100%;
}

#validate-booking-btn {
    padding: var(--buttonMoliriPadding,8px 16px);
    background: var(--buttonMoliri);
    border-radius: 0 4px 4px 0;
    color: white;
}

/*--------------------FUNCTION ROOM END-----------------*/
