/*
 * Buchungen und Uebersicht (Agent A). Wird fuer das ganze Admin geladen - alle Regeln sind auf
 * .fw-bk-* (Buchungen) bzw. .fw-db-* (Uebersicht/Dashboard) beschraenkt.
 */

/* =====================================================================
 * Buchungsliste: Fortschritt als Symbolzeile, Zahlungsstand unter dem Preis
 * ===================================================================== */

.fw-bk-steps {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .15rem;
    margin-top: .25rem;
    line-height: 1;
}

.fw-bk-step {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: .3rem;
    cursor: default;
}

.fw-bk-step .fi-icon {
    width: .875rem;
    height: .875rem;
}

.fw-bk-step.is-done {
    color: var(--success-600);
    background: color-mix(in oklab, var(--success-500) 12%, transparent);
}

.fw-bk-step.is-open {
    color: var(--gray-400);
    background: color-mix(in oklab, var(--gray-400) 10%, transparent);
}

.dark .fw-bk-step.is-done {
    color: var(--success-400);
}

.dark .fw-bk-step.is-open {
    color: var(--gray-500);
}

.fw-bk-pay {
    white-space: nowrap;
    color: var(--gray-500);
}

.fw-bk-pay-success { color: var(--success-600); }
.fw-bk-pay-warning { color: var(--warning-600); }
.fw-bk-pay-danger { color: var(--danger-600); font-weight: 600; }
.fw-bk-pay-info { color: var(--info-600); }

.dark .fw-bk-pay-success { color: var(--success-400); }
.dark .fw-bk-pay-warning { color: var(--warning-400); }
.dark .fw-bk-pay-danger { color: var(--danger-400); }
.dark .fw-bk-pay-info { color: var(--info-400); }

/* Belegte Tage im Datepicker deutlicher als "nicht waehlbar" zeigen (gilt nur fuer gesperrte Tage) */
.fi-fo-date-time-picker-calendar-day.fi-disabled {
    text-decoration: line-through;
    text-decoration-color: color-mix(in oklab, var(--gray-400) 80%, transparent);
    cursor: not-allowed;
}

/* Gastportal-Link: Link umbrechen, Knoepfe daneben */
.fw-bk-portal-link a,
.fw-bk-portal-link .fi-in-text-item {
    word-break: break-all;
}

/* Zeitraum in der Liste nicht mitten im Datum umbrechen */
.fw-bk-period .fi-ta-text-item,
.fw-bk-period .fi-ta-text-description {
    white-space: nowrap;
}

.fw-bk-nowrap,
.fw-bk-nowrap .fi-in-text-item {
    white-space: nowrap;
}

/* =====================================================================
 * Uebersicht: "Braucht Aufmerksamkeit"
 * ===================================================================== */

.fw-db-allgood {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .625rem .875rem;
    border-radius: .75rem;
    border: 1px solid color-mix(in oklab, var(--success-500) 30%, transparent);
    background: color-mix(in oklab, var(--success-500) 8%, transparent);
    font-size: .875rem;
    color: var(--gray-700);
}

.dark .fw-db-allgood {
    color: var(--gray-200);
}

.fw-db-allgood-icon {
    display: inline-flex;
    color: var(--success-600);
}

.fw-db-allgood-icon .fi-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.fw-db-attn-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    margin-left: .35rem;
    padding: 0 .4rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--warning-700);
    background: color-mix(in oklab, var(--warning-500) 18%, transparent);
    vertical-align: middle;
}

.fw-db-attn-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .375rem;
}

.fw-db-attn-item {
    --fw-db-tone: var(--gray-500);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .625rem;
    border-radius: .625rem;
    border: 1px solid var(--gray-200);
    border-left: 4px solid var(--fw-db-tone);
    color: inherit;
    text-decoration: none;
    min-width: 0;
    transition: background-color .12s ease;
}

.dark .fw-db-attn-item {
    border-color: rgb(255 255 255 / .1);
    border-left-color: var(--fw-db-tone);
}

.fw-db-attn-item:hover,
.fw-db-attn-item:focus-visible {
    background: color-mix(in oklab, var(--fw-db-tone) 7%, transparent);
}

.fw-db-tone-danger { --fw-db-tone: var(--danger-500); }
.fw-db-tone-warning { --fw-db-tone: var(--warning-500); }
.fw-db-tone-info { --fw-db-tone: var(--info-500); }
.fw-db-tone-success { --fw-db-tone: var(--success-500); }

.fw-db-attn-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    color: var(--fw-db-tone);
    background: color-mix(in oklab, var(--fw-db-tone) 14%, transparent);
}

.fw-db-attn-icon .fi-icon {
    width: 1.1rem;
    height: 1.1rem;
}

.fw-db-attn-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.fw-db-attn-text strong {
    font-size: .875rem;
    font-weight: 600;
}

.fw-db-attn-text span {
    font-size: .8125rem;
    color: var(--gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fw-db-attn-action {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .125rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--primary-600);
    white-space: nowrap;
}

.dark .fw-db-attn-action {
    color: var(--primary-400);
}

.fw-db-attn-action .fi-icon {
    width: 1rem;
    height: 1rem;
}

@media (max-width: 39.98rem) {
    .fw-db-attn-item {
        display: grid;
        grid-template-columns: 2rem minmax(0, 1fr);
        align-items: start;
        column-gap: .625rem;
        row-gap: .25rem;
    }

    .fw-db-attn-text span {
        white-space: normal;
    }

    .fw-db-attn-action {
        grid-column: 2;
        justify-self: start;
    }
}

/* =====================================================================
 * Uebersicht: Belegungsstreifen (30 Tage x Wohnungen)
 * ===================================================================== */

.fw-db-occ {
    --fw-db-label: 11rem;
    --fw-db-row: 2.25rem;
    --fw-db-row-lane: 1.4rem;
    --fw-db-line: var(--gray-200);
    --fw-db-weekend: color-mix(in oklab, var(--gray-400) 9%, transparent);
    --fw-db-today: var(--primary-500);
    --fw-db-booked: var(--primary-600);
    --fw-db-request: var(--warning-400);
    --fw-db-own: var(--gray-400);
    --fw-db-block: var(--danger-500);
    --fw-db-hold: var(--warning-300);
    display: flex;
    flex-direction: column;
    gap: .375rem;
    min-width: 0;
}

.dark .fw-db-occ {
    --fw-db-line: rgb(255 255 255 / .1);
    --fw-db-own: var(--gray-500);
    --fw-db-booked: var(--primary-500);
}

.fw-db-occ-row {
    display: grid;
    grid-template-columns: var(--fw-db-label) minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.fw-db-occ-label {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.fw-db-occ-label strong {
    font-size: .8125rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.fw-db-occ-label span {
    font-size: .75rem;
    color: var(--gray-500);
}

.fw-db-occ-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--fw-db-days), minmax(0, 1fr));
    min-width: 0;
}

.fw-db-occ-month {
    padding: 0 .25rem .125rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--gray-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-left: 1px solid var(--fw-db-line);
}

.fw-db-occ-month:first-child {
    border-left: 0;
    padding-left: 0;
}

.dark .fw-db-occ-month {
    color: var(--gray-300);
}

.fw-db-occ-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: .125rem 0;
    font-size: .6875rem;
    line-height: 1.15;
    color: var(--gray-500);
    border-radius: .375rem .375rem 0 0;
}

.fw-db-occ-day.is-weekend {
    background: var(--fw-db-weekend);
}

.fw-db-occ-day.is-month-start,
.fw-db-occ-bg.is-month-start {
    box-shadow: inset 1px 0 0 var(--gray-300);
}

.fw-db-occ-num {
    font-weight: 600;
    color: var(--gray-700);
    font-variant-numeric: tabular-nums;
}

.dark .fw-db-occ-num {
    color: var(--gray-200);
}

.fw-db-occ-day.is-today {
    color: #fff;
    background: var(--fw-db-today);
}

.fw-db-occ-day.is-today .fw-db-occ-num {
    color: #fff;
}

.fw-db-occ-bg {
    border-top: 1px solid var(--fw-db-line);
    border-bottom: 1px solid var(--fw-db-line);
}

.fw-db-occ-bg.is-weekend {
    background: var(--fw-db-weekend);
}

.fw-db-occ-bg.is-today {
    background: color-mix(in oklab, var(--fw-db-today) 12%, transparent);
    box-shadow: inset 2px 0 0 var(--fw-db-today), inset -2px 0 0 var(--fw-db-today);
}

.fw-db-occ-free {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3px 1px;
    border-radius: .3rem;
    color: transparent;
    text-decoration: none;
    font-size: .875rem;
    font-weight: 600;
}

.fw-db-occ-free:hover,
.fw-db-occ-free:focus-visible {
    color: var(--primary-700);
    background: color-mix(in oklab, var(--primary-500) 16%, transparent);
    outline: 1px dashed var(--primary-500);
}

.fw-db-occ-bar {
    z-index: 2;
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 3px 2px;
    padding: 0 .375rem;
    border-radius: .4rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    background-color: var(--fw-db-booked);
    box-shadow: 0 1px 1px rgb(0 0 0 / .08);
}

.fw-db-occ-bar > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fw-db-occ-bar.is-short > span {
    display: none;
}

.fw-db-occ-bar:hover,
.fw-db-occ-bar:focus-visible {
    filter: brightness(.93);
    outline: 2px solid color-mix(in oklab, var(--gray-950) 35%, transparent);
    outline-offset: 1px;
}

.fw-db-occ-bar.cut-left {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: 0;
}

.fw-db-occ-bar.cut-right {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: 0;
}

.fw-db-occ-bar.is-request {
    background-color: var(--fw-db-request);
    color: var(--gray-950);
    background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / .35) 0 6px, transparent 6px 12px);
}

.fw-db-occ-bar.is-own {
    background-color: var(--fw-db-own);
}

.fw-db-occ-bar.is-block {
    background-color: var(--fw-db-block);
    background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / .25) 0 5px, transparent 5px 10px);
}

.fw-db-occ-bar.is-hold {
    background-color: var(--fw-db-hold);
    color: var(--gray-950);
    background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / .45) 0 5px, transparent 5px 10px);
}

.fw-db-occ-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    padding-top: .375rem;
    padding-left: calc(var(--fw-db-label) + .75rem);
    font-size: .75rem;
    color: var(--gray-500);
}

.fw-db-occ-key {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.fw-db-occ-swatch {
    flex: none;
    display: inline-block;
    width: .875rem;
    height: .875rem;
    border-radius: .2rem;
    background-color: var(--fw-db-booked);
}

.fw-db-occ-swatch.is-request { background-color: var(--fw-db-request); background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / .35) 0 3px, transparent 3px 6px); }
.fw-db-occ-swatch.is-own { background-color: var(--fw-db-own); }
.fw-db-occ-swatch.is-block { background-color: var(--fw-db-block); background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / .25) 0 3px, transparent 3px 6px); }
.fw-db-occ-swatch.is-hold { background-color: var(--fw-db-hold); background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / .45) 0 3px, transparent 3px 6px); }
.fw-db-occ-swatch.is-free { background-color: transparent; border: 1px dashed var(--gray-400); }

/* Tablet/Handy: Wohnung ueber dem Streifen, im Kopf nur Montage und heute */
@media (max-width: 47.98rem) {
    .fw-db-occ {
        --fw-db-row: 1.75rem;
        --fw-db-row-lane: 1.1rem;
    }

    .fw-db-occ-row {
        grid-template-columns: minmax(0, 1fr);
        gap: .25rem;
    }

    .fw-db-occ-head .fw-db-occ-label {
        display: none;
    }

    .fw-db-occ-label {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 .5rem;
        margin-top: .375rem;
    }

    .fw-db-occ-day .fw-db-occ-wd {
        display: none;
    }

    .fw-db-occ-day:not(.is-monday):not(.is-today) .fw-db-occ-num {
        visibility: hidden;
    }

    .fw-db-occ-day .fw-db-occ-num {
        font-size: .625rem;
    }

    .fw-db-occ-bar {
        margin: 3px 0;
        padding: 0;
        border-radius: .2rem;
    }

    .fw-db-occ-bar > span {
        display: none;
    }

    .fw-db-occ-free {
        margin: 2px 0;
    }

    .fw-db-occ-legend {
        padding-left: 0;
    }
}

/* Kennzahlen der Uebersicht: auf dem Handy zwei Kacheln je Zeile, kleinere Werte */
@media (max-width: 39.98rem) {
    .fw-db-stat {
        padding: .875rem !important;
    }

    .fw-db-stat .fi-wi-stats-overview-stat-value {
        font-size: 1.375rem;
        line-height: 1.75rem;
    }

    .fw-db-stat .fi-wi-stats-overview-stat-label {
        font-size: .8125rem;
    }

    .fw-db-occ-head .fw-db-occ-day.is-weekend {
        background: transparent;
    }
}

/* Buchungsliste und Aufenthalte der Uebersicht auf dem Handy: Beschriftung links, Wert rechts (halbe Kartenhoehe) */
@media (max-width: 39.98rem) {
    :is(.fw-bk-table, .fw-db-stays) .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell):not(:has(.fi-ta-actions)) {
        display: grid;
        grid-template-columns: 5.25rem minmax(0, 1fr);
        column-gap: .75rem;
        align-items: baseline;
        padding-block: .15rem;
    }

    :is(.fw-bk-table, .fw-db-stays) .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell) > .fi-ta-cell-label {
        margin: 0;
        font-size: .75rem;
    }

    :is(.fw-bk-table, .fw-db-stays) .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell-total-price .fi-ta-text {
        align-items: flex-start;
        text-align: start;
    }

    .fw-db-stays .fi-ta-text.fi-ta-text-has-descriptions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: .5rem;
    }
}