/* 看房預約共用列表：管理端與房客端共用同一套資訊層級與響應式規格。 */
.viewingAppointments{
    color: #4f4a43;
}

.viewingAppointments__typeTabs{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(520px, 100%);
    margin-bottom: 22px;
    overflow: hidden;
    border: 1px solid #ddd4c8;
    border-radius: 10px;
}

.viewingAppointments__typeTabs button{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    min-height: 52px;
    padding: 10px 22px;
    color: #4f4a43;
    background: rgba(255, 255, 255, 0.7);
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    text-align: left;
}

.viewingAppointments__typeTabs .material-symbols-outlined{
    flex: 0 0 auto;
    color: #aa8d55;
    font-size: 22px;
}

.viewingAppointments__typeTabs button + button{
    border-left: 1px solid #ddd4c8;
}

.viewingAppointments__typeTabs button[aria-selected="true"]{
    color: #fff;
    background: #aa8d55;
}

.viewingAppointments__typeTabs button[aria-selected="true"] .material-symbols-outlined{
    color: #fff;
}

.viewingAppointments__typeTabs button:focus-visible,
.viewingAppointments__statusFilters button:focus-visible,
.viewingAppointmentRow__action:focus-visible{
    outline: 3px solid rgba(170, 141, 85, 0.28);
    outline-offset: 2px;
}

.viewingAppointments__statusFilters{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.viewingAppointments__statusFilters[hidden]{
    display: none;
}

.viewingAppointments__statusFilters button{
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 112px;
    min-height: 42px;
    padding: 8px 18px;
    color: #4f4a43;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid #ded7ce;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    text-align: left;
}

.viewingAppointments__statusFilters button.is-active{
    font-weight: 700;
    box-shadow: inset 0 0 0 2px currentColor;
}

.viewingAppointments__statusFilters button strong{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    color: inherit;
    background: rgba(255, 255, 255, 0.62);
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
}

.viewingAppointments__statusFilter--all{
    color: #755d2e !important;
    background: #f4efe5 !important;
    border-color: #e5d9c1 !important;
}

.viewingAppointments__statusFilter--pending{
    color: #536d87 !important;
    background: #e7f0fa !important;
    border-color: #cddff1 !important;
}

.viewingAppointments__statusFilter--approved{
    color: #377650 !important;
    background: #e2f3e8 !important;
    border-color: #c9e5d2 !important;
}

.viewingAppointments__statusFilter--rejected{
    color: #ad4d4b !important;
    background: #fae6e5 !important;
    border-color: #efcecc !important;
}

.viewingAppointments__list{
    overflow: hidden;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #ded7ce;
    border-radius: 10px;
}

.viewingAppointments__listHead{
    display: grid;
    grid-template-columns: 112px minmax(180px, 1.4fr) minmax(132px, 0.75fr) minmax(145px, 0.9fr) 116px;
    align-items: center;
    gap: 18px;
    min-height: 48px;
    padding: 10px 16px;
    color: #81786e;
    background: rgba(244, 239, 229, 0.72);
    border-bottom: 1px solid #ded7ce;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.viewingAppointments__listHead span:first-child{
    grid-column: 1 / 3;
}

.viewingAppointments__listHead span:nth-child(2){
    grid-column: 3;
}

.viewingAppointments__listHead span:nth-child(3){
    grid-column: 4;
}

.viewingAppointments__listHead span:nth-child(4){
    grid-column: 5;
}

.viewingAppointmentRow{
    display: grid;
    grid-template-columns: 112px minmax(180px, 1.4fr) minmax(132px, 0.75fr) minmax(145px, 0.9fr) 116px;
    align-items: center;
    gap: 18px;
    min-height: 126px;
    padding: 14px 16px;
    border-bottom: 1px solid #e4ddd5;
}

.viewingAppointmentRow--guided{
    grid-template-columns: 112px minmax(180px, 1.25fr) minmax(132px, 0.7fr) minmax(260px, 1.3fr);
}

.viewingAppointmentRow[data-viewing-static-action]{
    cursor: pointer;
    transition: background-color 160ms ease, box-shadow 160ms ease;
}

.viewingAppointmentRow[data-viewing-static-action]:hover{
    background: rgba(244, 239, 229, 0.6);
}

.viewingAppointmentRow[data-viewing-static-action]:focus-visible{
    position: relative;
    z-index: 1;
    outline: 3px solid rgba(170, 141, 85, 0.32);
    outline-offset: -3px;
}

.viewingAppointmentRow[hidden]{
    display: none;
}

.viewingAppointmentRow:last-of-type{
    border-bottom: 0;
}

.viewingAppointmentRow__photo{
    width: 112px;
    height: 84px;
    object-fit: cover;
    border-radius: 7px;
}

.viewingAppointmentRow__photo--avatar{
    width: 76px;
    height: 76px;
    justify-self: center;
    border: 4px solid #ead9b9;
    border-radius: 50%;
    background: #f4efe7;
}

.viewingAppointmentRow__avatarFallback{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9b8250;
}

.viewingAppointmentRow__avatarFallback .material-symbols-outlined{
    font-size: 38px;
}

.viewingAppointmentRow__applicant small{
    display: block;
    margin-top: 7px;
    overflow: hidden;
    color: #9a9187;
    font-size: 11px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.viewingAppointmentRow__verifications{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.viewingAppointmentRow__verifications > span{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 31px;
    padding: 5px 7px;
    border: 1px solid #ded9d1;
    border-radius: 999px;
    color: #938d85;
    background: #f3f1ee;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}

.viewingAppointmentRow__verifications .material-symbols-outlined{
    font-size: 16px;
}

.viewingAppointmentRow__verifications strong{
    font-size: 10px;
    font-weight: 700;
}

.viewingAppointmentRow__verifications .is-passed{
    color: #3f7b58;
    background: #e7f3ea;
    border-color: #cce3d3;
}

.viewingAppointmentRow__verifications .is-pending{
    color: #9b7428;
    background: #f8f0dc;
    border-color: #ead9aa;
}

.viewingAppointmentRow__verifications .is-empty{
    color: #99938d;
    background: #f2f0ed;
}

.viewingAppointmentRow__property{
    min-width: 0;
}

.viewingAppointmentRow__property h3{
    overflow: hidden;
    margin: 0 0 8px;
    color: #34312d;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.viewingAppointmentRow__property p{
    display: flex;
    align-items: flex-start;
    gap: 3px;
    margin: 0;
    color: #81786e;
    font-size: 13px;
    line-height: 1.5;
}

.viewingAppointmentRow__property .material-symbols-outlined{
    flex: 0 0 auto;
    margin-top: 1px;
    color: #aa8d55;
    font-size: 17px;
}

.viewingAppointmentRow__schedule{
    display: grid;
    gap: 2px;
    padding-left: 18px;
    border-left: 1px solid #e4ddd5;
    font-size: 14px;
    line-height: 1.4;
}

.viewingAppointmentRow__schedule span,
.viewingAppointmentRow__labelTitle{
    color: #8b8278;
    font-size: 12px;
}

.viewingAppointmentRow__schedule strong{
    color: #4f4a43;
    font-weight: 500;
}

.viewingAppointmentRow__schedule time{
    color: #4f4a43;
}

.viewingAppointments--tenant .viewingAppointmentRow__schedule{
    text-align: center;
}

.viewingAppointments--tenant .viewingAppointmentRow__schedule strong,
.viewingAppointments--tenant .viewingAppointmentRow__schedule time{
    white-space: nowrap;
}

.viewingAppointmentRow__labels{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.viewingAppointmentRow__labelTitle{
    flex: 0 0 100%;
}

.viewingAppointmentRow__type,
.viewingAppointmentRow__status{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.viewingAppointmentRow__type{
    color: #755d2e;
    background: #f4efe5;
}

.viewingAppointmentRow__status{
    color: #66615b;
    background: #f0efed;
}

.viewingAppointmentRow__status--pending{
    color: #536d87;
    background: #e7f0fa;
}

.viewingAppointmentRow__status--approved{
    color: #377650;
    background: #e2f3e8;
}

.viewingAppointmentRow__status--rejected{
    color: #ad4d4b;
    background: #fae6e5;
}

.viewingAppointmentRow__labels small{
    display: flex;
    flex: 0 0 100%;
    align-items: center;
    gap: 3px;
    color: #887246;
    font-size: 11px;
    line-height: 1.35;
}

.viewingAppointmentRow__labels small .material-symbols-outlined{
    font-size: 15px;
}

.viewingAppointmentRow__action{
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    min-height: 40px;
    padding: 6px 0 6px 14px;
    color: #96783e;
    background: transparent;
    border: 0;
    border-left: 1px solid #e4ddd5;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}

.viewingAppointmentRow__action:hover{
    color: #6f572a;
}

.viewingAppointmentRow__action .material-symbols-outlined{
    font-size: 20px;
}

.viewingAppointments__empty{
    margin: 0;
    padding: 50px 20px;
    color: #81786e;
    text-align: center;
}

@media (max-width: 1120px){
    .viewingAppointments__listHead{
        display: none;
    }

    .viewingAppointmentRow{
        grid-template-columns: 96px minmax(150px, 1fr) minmax(120px, 0.7fr) minmax(130px, 0.8fr);
    }

    .viewingAppointmentRow--guided{
        grid-template-columns: 96px minmax(150px, 1fr) minmax(120px, 0.7fr) minmax(230px, 1.2fr);
    }

    .viewingAppointmentRow__photo{
        width: 96px;
        height: 72px;
    }

    .viewingAppointmentRow__photo--avatar{
        width: 72px;
        height: 72px;
    }

    .viewingAppointmentRow__action{
        grid-column: 2 / -1;
        justify-content: flex-end;
        min-height: 32px;
        padding: 4px 0;
        border-top: 1px solid #eee8e0;
        border-left: 0;
    }
}

@media (max-width: 700px){
    .viewingAppointments__typeTabs{
        margin-bottom: 14px;
    }

    .viewingAppointments__typeTabs button{
        min-height: 46px;
        padding: 8px 12px;
        font-size: 15px;
    }

    .viewingAppointments__statusFilters{
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        margin-bottom: 16px;
    }

    .viewingAppointments__statusFilters button{
        min-width: 0;
        min-height: 38px;
        gap: 4px;
        padding: 6px 8px;
        font-size: 13px;
    }

    .viewingAppointments__statusFilters button strong{
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        font-size: 11px;
    }

    .viewingAppointmentRow{
        grid-template-columns: 86px minmax(0, 1fr);
        gap: 10px 12px;
        padding: 13px;
    }

    .viewingAppointmentRow--guided{
        grid-template-columns: 86px minmax(0, 1fr);
    }

    .viewingAppointmentRow__photo{
        align-self: start;
        width: 86px;
        height: 68px;
    }

    .viewingAppointmentRow__photo--avatar{
        width: 68px;
        height: 68px;
    }

    .viewingAppointmentRow__verifications{
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding-top: 2px;
    }

    .viewingAppointmentRow__property h3{
        font-size: 15px;
        white-space: normal;
    }

    .viewingAppointmentRow__property p{
        font-size: 12px;
    }

    .viewingAppointmentRow__schedule,
    .viewingAppointmentRow__labels,
    .viewingAppointmentRow__action{
        grid-column: 1 / -1;
    }

    .viewingAppointmentRow__schedule{
        grid-template-columns: auto 1fr;
        gap: 2px 10px;
        padding: 9px 0 0;
        border-top: 1px solid #eee8e0;
        border-left: 0;
    }

    .viewingAppointments--tenant .viewingAppointmentRow__schedule{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .viewingAppointmentRow__schedule span{
        grid-row: 1 / 3;
        align-self: center;
    }

    .viewingAppointmentRow__labels{
        padding-top: 2px;
    }

    .viewingAppointmentRow__labelTitle{
        flex: 0 0 auto;
        margin-right: 2px;
    }

    .viewingAppointmentRow__action{
        justify-content: center;
        min-height: 38px;
        padding: 7px 0 0;
    }
}