/* ==========================================================================
   Room � TV room screen
   Structure: Design tokens > Fonts > Base layout > Header > Doctor >
              Queue card > Cabinet footer > Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
    --room-background: #eee4da;
    --room-text: #38221d;
    --room-text-muted: #82736c;
    --room-card-border: #cbbdb1;
    --room-active-row-bg: #38221d;
    --room-active-row-text: #eee4da;
    --room-footer-bg: #38221d;
    --room-footer-text: #eee4da;
    --room-photo-border: #aa9989;
    --room-photo-background: #c8b6a1;
    --room-photo-placeholder: rgba(56, 34, 29, .45);
}

/* --------------------------------------------------------------------------
   Fonts
   -------------------------------------------------------------------------- */
/* @FONTWARNING[{"type": "restricted", "family": "Montserrat-SemiBold", "weight": "600", "style": "normal", "allowsCrossOrigin": false}] */
@font-face {
    font-family: "Montserrat-SemiBold";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/font/montserrat/Montserrat-SemiBold.woff2") format("woff2"), url("/font/montserrat/Montserrat-SemiBold.woff") format("woff"), url("/font/montserrat/Montserrat-SemiBold.ttf") format("truetype");
}

/* @FONTWARNING[{"type": "restricted", "family": "Montserrat-ExtraBold", "weight": "800", "style": "normal", "allowsCrossOrigin": false}] */
@font-face {
    font-family: "Montserrat-ExtraBold";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/font/montserrat/Montserrat-ExtraBold.woff2") format("woff2"), url("/font/montserrat/Montserrat-ExtraBold.woff") format("woff"), url("/font/montserrat/Montserrat-ExtraBold.ttf") format("truetype");
}

/* @FONTWARNING[{"type": "restricted", "family": "Montserrat-Black", "weight": "900", "style": "normal", "allowsCrossOrigin": false}] */
@font-face {
    font-family: "Montserrat-Black";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("/font/montserrat/Montserrat-Black.woff2") format("woff2"), url("/font/montserrat/Montserrat-Black.woff") format("woff"), url("/font/montserrat/Montserrat-Black.ttf") format("truetype");
}

/* @FONTWARNING[{"type": "restricted", "family": "Montserrat-Medium", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */
@font-face {
    font-family: "Montserrat-Medium";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/font/montserrat/Montserrat-Medium.woff2") format("woff2"), url("/font/montserrat/Montserrat-Medium.woff") format("woff"), url("/font/montserrat/Montserrat-Medium.ttf") format("truetype");
}

/* @FONTWARNING[{"type": "restricted", "family": "Montserrat-Bold", "weight": "700", "style": "normal", "allowsCrossOrigin": false}] */
@font-face {
    font-family: "Montserrat-Bold";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/font/montserrat/Montserrat-Bold.woff2") format("woff2"), url("/font/montserrat/Montserrat-Bold.woff") format("woff"), url("/font/montserrat/Montserrat-Bold.ttf") format("truetype");
}

/* --------------------------------------------------------------------------
   Base layout
   -------------------------------------------------------------------------- */
html,
body {
    min-height: 100%;
    margin: 0;
    background: var(--room-footer-bg);
}

    body.scheduler-display {
        display: flex;
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        overflow: hidden;
        flex-direction: column;
        color: var(--room-text);
    }

.display-page {
    flex: 1;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    padding: 20px 25px 0;
    background: var(--room-background);
}

#scheduler-content {
    min-height: 0;
}

.room-start-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: calc(100vh - 410px);
    padding: 40px;
    color: var(--room-text);
    font-family: Montserrat-ExtraBold, sans-serif;
    font-size: 70px;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.room-start-prompt:focus {
    outline: 4px solid var(--room-photo-border);
    outline-offset: -4px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.display-header {
    text-align: center;
}

.brand-mark img {
    height: 100px;
}

/* --------------------------------------------------------------------------
   Doctor section
   -------------------------------------------------------------------------- */
.doctor-section {
    margin-top: 10px;
    text-align: center;
}

.doctor-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 600px;
    height: 600px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--room-photo-border);
    border-radius: 16px;
    background: var(--room-photo-background);
}

    .doctor-photo img {
        height: 100%;
        object-fit: cover;
    }

.doctor-photo--placeholder {
    color: var(--room-photo-placeholder);
    font-size: 36px;
}

    .doctor-photo--placeholder span {
        padding: 18px 28px;
        border: 1px dashed var(--room-photo-placeholder);
    }

.doctor-last-name {
    margin-top: 20px;
    font-family: Montserrat-ExtraBold, sans-serif;
    font-size: 100px;
    font-weight: 900;
}

.doctor-type {
    font-family: Montserrat-SemiBold, sans-serif;
    margin: 10px 0 0;
    color: var(--room-text-muted);
    font-size: 55px;
    font-weight: 600;
    line-height: 1;
}

.doctor-name {
    line-height: 1;
    margin: 0;
    font-family: Montserrat-SemiBold, sans-serif;
    font-size: 75px;
    font-weight: 100;
}

/* --------------------------------------------------------------------------
   Queue card
   -------------------------------------------------------------------------- */
.queue-card {
    margin: 20px 0px;
    border: 1px solid var(--room-card-border);
    border-radius: 15px;
}

.queue-list {
    width: calc(100% - 40px);
    margin: 12px 20px 2px;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.queue-row {
    font-family: Montserrat-Medium, sans-serif;
    height: 95px;
    font-size: 90px;
}

    .queue-row td {
        box-sizing: border-box;
        padding: 0 10px;
        vertical-align: middle;
    }

.queue-status {
    font-size: 60px;
    width: 40%;
    text-align: left;
}

.queue-number {
    width: 30%;
    text-align: left;
    white-space: nowrap;
}

.queue-time {
    width: 30%;
    text-align: left;
    white-space: nowrap;
}

.queue-row--active td {
    background: var(--room-active-row-bg);
    color: var(--room-active-row-text);
}

    .queue-row--active td:first-child {
        border-radius: 8px 0 0 8px;
    }

    .queue-row--active td:last-child {
        border-radius: 0 8px 8px 0;
    }

/* --------------------------------------------------------------------------
   Cabinet footer
   -------------------------------------------------------------------------- */
.cabinet-footer {
    position: relative;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 270px;
    text-align: center;
    background: var(--room-footer-bg);
    color: var(--room-footer-text);
}

    .cabinet-footer .status-indicators {
        position: absolute;
        right: 25px;
        bottom: 25px;
        margin-left: 0;
    }

    .cabinet-footer > span {
        font-size: 70px;
        line-height: 1;
    }

    .cabinet-footer > strong {
        margin-top: 15px;
        font-size: 180px;
        line-height: 1;
        letter-spacing: -4px;
    }
/* --------------------------------------------------------------------------
   Content states (visitor number / minute silence)
   Injected into #scheduler-content; header and footer are shared.
   -------------------------------------------------------------------------- */
.visitor-body,
.silence-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    text-align: center;
}

.visitor-label {
    font-family: Montserrat-SemiBold, sans-serif;
    font-size: 130px;
    font-weight: 600;
}

.visitor-number {
    margin-top: 10px;
    font-family: Montserrat-ExtraBold, sans-serif;
    font-size: 270px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -4px;
}

.silence-title {
    font-family: Montserrat-ExtraBold, sans-serif;
    font-size: 116px;
    font-weight: 900;
    line-height: 1.05;
}

.silence-timer {
    margin-top: 20px;
    font-family: Montserrat-Black, sans-serif;
    font-size: 198px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -2px;
}
/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .display-page {
        padding: 25px 16px 0;
    }

    .doctor-name {
        font-size: 69px;
    }

    .queue-card {
        padding: 16px 12px;
    }

    .queue-row {
        padding: 0 10px;
        font-size: 36px;
    }
}