/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* MainLayout — replaces the template file. Colours and sizes come from wwwroot/css/theme.css. */

.page[b-88a4mh3cue] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--rms-bg);
}

main[b-88a4mh3cue] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sidebar[b-88a4mh3cue] {
    background: linear-gradient(180deg, var(--rms-navy) 0%, var(--rms-navy-dark) 100%);
}

.top-row[b-88a4mh3cue] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: var(--rms-topbar-h);
    background: var(--rms-surface);
    border-bottom: 1px solid var(--rms-border);
    box-shadow: var(--rms-shadow-sm);
}

    .top-row[b-88a4mh3cue]  a, .top-row[b-88a4mh3cue]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-88a4mh3cue]  a:hover, .top-row[b-88a4mh3cue]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-88a4mh3cue]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

article[b-88a4mh3cue] {
    flex: 1;
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-4);
}

@media (max-width: 640.98px) {
    .top-row[b-88a4mh3cue] {
        justify-content: space-between;
    }

        .top-row[b-88a4mh3cue]  a, .top-row[b-88a4mh3cue]  .btn-link {
            margin-left: 0;
        }

    .top-row[b-88a4mh3cue], article[b-88a4mh3cue] {
        padding-left: var(--sp-3) !important;
        padding-right: var(--sp-3) !important;
    }
}

@media (min-width: 641px) {
    .page[b-88a4mh3cue] {
        flex-direction: row;
    }

    .sidebar[b-88a4mh3cue] {
        width: var(--rms-sidebar-w);
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-88a4mh3cue] {
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .top-row[b-88a4mh3cue], article[b-88a4mh3cue] {
        padding-left: var(--sp-5) !important;
        padding-right: var(--sp-5) !important;
    }
}

#blazor-error-ui[b-88a4mh3cue] {
    color-scheme: light only;
    background: var(--rms-warning-soft);
    color: var(--rms-warning-text);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-88a4mh3cue] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-drhqcghnuy] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-drhqcghnuy] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-drhqcghnuy] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-drhqcghnuy] {
    font-size: 1.1rem;
}

.bi[b-drhqcghnuy] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-drhqcghnuy] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-drhqcghnuy] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-drhqcghnuy] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-drhqcghnuy] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-drhqcghnuy] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-drhqcghnuy] {
        padding-bottom: 1rem;
    }

    .nav-item[b-drhqcghnuy]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-drhqcghnuy]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-drhqcghnuy]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-drhqcghnuy] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-drhqcghnuy] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-drhqcghnuy] {
        display: none;
    }

    .nav-scrollable[b-drhqcghnuy] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
.brand-button[b-drhqcghnuy] {
    background: none;
    border: none;
    padding: 0;
    color: #ffffff;
    font-size: 1.1rem;
    cursor: pointer;
}

/* =====================================================================
   THEME — paste at the END of Components/Layout/NavMenu.razor.css
   (keeps your icons; changes only colours, sizes and the active item)
   ===================================================================== */

.top-row[b-drhqcghnuy] {
    min-height: var(--rms-topbar-h);
    height: var(--rms-topbar-h);
    background-color: rgba(0, 0, 0, .18);
}

.navbar-brand[b-drhqcghnuy],
.brand-button[b-drhqcghnuy] {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: .02em;
    color: #FFFFFF;
}

.nav-scrollable[b-drhqcghnuy] {
    height: calc(100vh - var(--rms-topbar-h));
}

.nav-item[b-drhqcghnuy] {
    font-size: var(--fs-base);
    padding-bottom: 2px;
}

    .nav-item:first-of-type[b-drhqcghnuy] {
        padding-top: var(--sp-3);
    }

    .nav-item[b-drhqcghnuy]  .nav-link,
    .nav-item .nav-link[b-drhqcghnuy] {
        display: flex;
        align-items: center;
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding: 0 var(--sp-3);
        border: 0;
        border-radius: var(--rms-r-md);
        background: transparent;
        color: rgba(255, 255, 255, .80);
        font-size: var(--fs-base);
        font-weight: var(--fw-medium);
        text-align: left;
    }

        .nav-item[b-drhqcghnuy]  .nav-link:hover,
        .nav-item .nav-link:hover[b-drhqcghnuy] {
            background: rgba(255, 255, 255, .08);
            color: #FFFFFF;
        }

        .nav-item[b-drhqcghnuy]  a.active,
        .nav-item .nav-link.active[b-drhqcghnuy] {
            background: rgba(255, 255, 255, .14);
            color: #FFFFFF;
            box-shadow: inset 3px 0 0 var(--rms-accent);
        }

.nav-user-name[b-drhqcghnuy] {
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
}

.nav-signout[b-drhqcghnuy] {
    height: var(--h-control-sm);
    font-size: var(--fs-s);
    border-radius: var(--rms-r-sm);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-sq8qp25sko],
.components-reconnect-repeated-attempt-visible[b-sq8qp25sko],
.components-reconnect-failed-visible[b-sq8qp25sko],
.components-pause-visible[b-sq8qp25sko],
.components-resume-failed-visible[b-sq8qp25sko],
.components-rejoining-animation[b-sq8qp25sko] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-sq8qp25sko],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-sq8qp25sko],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-sq8qp25sko],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-sq8qp25sko],
#components-reconnect-modal.components-reconnect-retrying[b-sq8qp25sko],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-sq8qp25sko],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-sq8qp25sko],
#components-reconnect-modal.components-reconnect-failed[b-sq8qp25sko],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-sq8qp25sko] {
    display: block;
}


#components-reconnect-modal[b-sq8qp25sko] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-sq8qp25sko 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-sq8qp25sko 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-sq8qp25sko 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-sq8qp25sko]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-sq8qp25sko 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-sq8qp25sko {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-sq8qp25sko {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-sq8qp25sko {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-sq8qp25sko] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-sq8qp25sko] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-sq8qp25sko] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-sq8qp25sko] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-sq8qp25sko] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-sq8qp25sko] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-sq8qp25sko] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-sq8qp25sko 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-sq8qp25sko] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-sq8qp25sko {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/ServerDateTime.razor.rz.scp.css */
/* SQL Server clock in the sidebar — colours/sizes from wwwroot/css/theme.css */
.sql-clock[b-kel1i2ezdc] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-3) var(--sp-3) var(--sp-1);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--rms-r-md);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .10);
    color: #FFFFFF;
    font-variant-numeric: tabular-nums;
}

.sql-clock-icon[b-kel1i2ezdc] {
    flex: 0 0 auto;
    color: var(--rms-accent);
}

.sql-clock-text[b-kel1i2ezdc] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.sql-clock-time[b-kel1i2ezdc] {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    letter-spacing: .02em;
}

.sql-clock-date[b-kel1i2ezdc] {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: rgba(255, 255, 255, .75);
}
/* /Components/Layout/ServerRestartBanner.razor.rz.scp.css */
/* red countdown bar over the top of every screen (sits over the top bar, never moves the page) */
.rb[b-j0euml9p0x] {
    position: fixed; top: 0; left: var(--rms-sidebar-w, 220px); right: 0; z-index: 2000;
    display: flex; align-items: center; gap: 12px; padding: 8px 16px; min-height: var(--rms-topbar-h, 52px); box-sizing: border-box;
    background: var(--rms-danger); color: #FFFFFF; font-size: var(--fs-base);
    box-shadow: 0 2px 10px rgba(16, 24, 40, .25);
}
.rb-n[b-j0euml9p0x] {
    min-width: 56px; padding: 0 6px; text-align: center; border-radius: var(--rms-r-sm);
    background: rgba(255, 255, 255, .18); font-size: 20px; font-variant-numeric: tabular-nums;
}
.rb-text[b-j0euml9p0x] { flex: 1 1 auto; min-width: 0; }
.rb-btn[b-j0euml9p0x] {
    height: var(--h-control-sm); padding: 0 14px; border: 0; border-radius: var(--rms-r-sm);
    background: #FFFFFF; color: var(--rms-danger-dark); font: inherit; font-weight: var(--fw-bold); cursor: pointer; white-space: nowrap;
}
.rb-btn:disabled[b-j0euml9p0x] { opacity: .7; cursor: default; }
.rb-msg[b-j0euml9p0x] {
    position: fixed; right: 18px; bottom: 18px; z-index: 2001; max-width: min(520px, calc(100vw - 36px));
    display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--rms-r-md);
    background: var(--rms-surface); border: 1px solid var(--rms-border-strong); box-shadow: var(--rms-shadow-md); font-size: var(--fs-s);
}
.rb-x[b-j0euml9p0x] { border: 0; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; color: var(--rms-text-muted); }

@media (max-width: 640.98px) {
    .rb[b-j0euml9p0x] { left: 0; font-size: var(--fs-s); flex-wrap: wrap; }
}
/* /Components/Layout/UserBar.razor.rz.scp.css */
/* full-width bar: hotel name left, user details right */
.ubar[b-n47jfs2h13] {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ub-hotel[b-n47jfs2h13] {
    min-width: 0;
    font-family: var(--rms-font);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    letter-spacing: .04em;
    color: var(--rms-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ub[b-n47jfs2h13] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    font-family: var(--rms-font);
    font-size: var(--fs-base);
    color: var(--rms-text);
    white-space: nowrap;
}

.ub-item[b-n47jfs2h13] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}
.ub-item svg[b-n47jfs2h13] { color: var(--rms-gray); flex: 0 0 auto; }
.ub-item strong[b-n47jfs2h13] { color: var(--rms-text); font-weight: var(--fw-bold); }

.ub-sep[b-n47jfs2h13] { width: 1px; height: 18px; background: var(--rms-border); }

.ub-signout[b-n47jfs2h13] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--h-control-sm);
    margin-left: 4px;
    padding: 0 12px;
    border: 1px solid var(--rms-border-strong);
    border-radius: var(--rms-r-md);
    background: var(--rms-surface);
    color: var(--rms-danger-dark);
    font: inherit;
    font-size: var(--fs-s);
    font-weight: var(--fw-medium);
    cursor: pointer;
}
.ub-signout:hover[b-n47jfs2h13] { background: var(--rms-danger-soft); border-color: var(--rms-danger-border); }
.ub-signout:focus-visible[b-n47jfs2h13] { outline: 2px solid var(--rms-primary-hover); outline-offset: 2px; }

/* Small laptop: smaller hotel name */
@media (max-width: 1200px) {
    .ub-hotel[b-n47jfs2h13] { font-size: var(--fs-base); letter-spacing: .02em; }
}

/* Tablet: drop the login time */
@media (max-width: 860px) {
    .ub-item:nth-of-type(3)[b-n47jfs2h13], .ub-sep:nth-of-type(2)[b-n47jfs2h13] { display: none; }
}

/* Phone: user name + icon-only sign out */
@media (max-width: 560px) {
    .ub[b-n47jfs2h13] { gap: 8px; }
    .ub-item:nth-of-type(2)[b-n47jfs2h13], .ub-sep[b-n47jfs2h13] { display: none; }
    .ub-signout span[b-n47jfs2h13] { display: none; }
    .ub-signout[b-n47jfs2h13] { padding: 0 9px; }
    .ub-hotel[b-n47jfs2h13] { font-size: var(--fs-s); }
}
/* /Components/Pages/Accounts/Login.razor.rz.scp.css */
.login[b-6okk4joue5] {
    min-height: 70vh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
}

.login-card[b-6okk4joue5] {
    box-sizing: border-box;                         /* padding inside the width — no overflow on phones */
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px 28px 24px;
    background: var(--rms-surface);
    border: 1px solid var(--rms-border);
    border-radius: var(--rms-r-lg);
    box-shadow: var(--rms-shadow-sm);
    font-family: var(--rms-font);
    color: var(--rms-text);
}

.login-title[b-6okk4joue5] { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.login-sub[b-6okk4joue5]   { margin: -4px 0 6px; font-size: var(--fs-s); color: var(--rms-text-2); }

.login-label[b-6okk4joue5] { margin-top: 4px; font-size: var(--fs-s); font-weight: var(--fw-medium); }

/* big, centred, spaced digits — easy to read and type on a front-desk keyboard */
.login-code[b-6okk4joue5] {
    box-sizing: border-box;
    width: 100%;
    height: 52px;
    padding: 0 12px;
    border: 1px solid var(--rms-border-strong);
    border-radius: var(--rms-r-md);
    background: var(--rms-surface-2);
    color: var(--rms-text);
    font: inherit;
    font-size: 26px;
    letter-spacing: .5em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.login-code:focus[b-6okk4joue5] {
    outline: none;
    background: var(--rms-surface);
    border-color: var(--rms-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .15);
}

.login-hint[b-6okk4joue5]  { margin: 0; font-size: var(--fs-sm); color: var(--rms-text-2); }

.login-warn[b-6okk4joue5] {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--rms-warning-border);
    border-radius: var(--rms-r-md);
    background: var(--rms-warning-soft);
    color: var(--rms-warning-text);
    font-size: var(--fs-s);
    line-height: 1.45;
}

.login-error[b-6okk4joue5] {
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--rms-danger-border);
    border-radius: var(--rms-r-md);
    background: var(--rms-danger-soft);
    color: var(--rms-danger-text);
    font-size: var(--fs-s);
}

.login-submit[b-6okk4joue5] {
    height: var(--h-control-lg);
    margin-top: 4px;
    border: 1px solid var(--rms-primary);
    border-radius: var(--rms-r-md);
    background: var(--rms-primary);
    color: #FFFFFF;
    font: inherit;
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    cursor: pointer;
}
.login-submit:hover:not(:disabled)[b-6okk4joue5] { background: var(--rms-primary-hover); border-color: var(--rms-primary-hover); }
.login-submit:disabled[b-6okk4joue5] { opacity: .6; cursor: not-allowed; }

.login-device[b-6okk4joue5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 24px;
    padding-top: 8px;
    border-top: 1px solid var(--rms-gray-200);
    font-size: var(--fs-s);
    color: var(--rms-text-2);
}
.login-device-missing[b-6okk4joue5] { color: var(--rms-danger-dark); font-weight: var(--fw-medium); }

.login-link[b-6okk4joue5] {
    border: 0;
    background: none;
    padding: 4px 0;
    color: var(--rms-primary-hover);
    font: inherit;
    font-size: var(--fs-s);
    font-weight: var(--fw-medium);
    cursor: pointer;
}
.login-link:hover[b-6okk4joue5] { text-decoration: underline; }

.login-dev[b-6okk4joue5] {
    height: var(--h-control);
    border: 1px dashed var(--rms-gray-400);
    border-radius: var(--rms-r-md);
    background: transparent;
    color: var(--rms-text-2);
    font: inherit;
    font-size: var(--fs-s);
    cursor: pointer;
}
.login-dev:hover[b-6okk4joue5] { background: var(--rms-surface-2); }

/* ---------- touch keypad ---------- */
.login-pad[b-6okk4joue5] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 2px;
    user-select: none;
    -webkit-user-select: none;
}
.pad-key[b-6okk4joue5] {
    height: 56px;                                   /* big enough for a thumb */
    border: 1px solid var(--rms-border);
    border-radius: var(--rms-r-md);
    background: var(--rms-surface);
    color: var(--rms-text);
    font: inherit;
    font-size: 24px;
    font-weight: var(--fw-medium);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    touch-action: manipulation;                     /* no double-tap zoom on tablets */
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 0 var(--rms-border);
    transition: background .08s, transform .08s;
}
.pad-key:hover:not(:disabled)[b-6okk4joue5] { background: var(--rms-surface-2); }
.pad-key:active:not(:disabled)[b-6okk4joue5] { background: var(--rms-primary-soft); border-color: var(--rms-primary-border); transform: scale(.97); }
.pad-key:disabled[b-6okk4joue5] { opacity: .45; cursor: default; }
.pad-fn[b-6okk4joue5] {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--rms-surface-2);
    color: var(--rms-text-2);
    font-size: 18px; font-weight: var(--fw-bold);
}

/* short screens (phone in landscape): smaller keys so Sign in stays on screen */
@media (max-height: 560px) {
    .pad-key[b-6okk4joue5] { height: 44px; font-size: 20px; }
    .login-card[b-6okk4joue5] { padding: 18px 20px 16px; gap: 8px; }
}

button:focus-visible[b-6okk4joue5] { outline: 2px solid var(--rms-primary-hover); outline-offset: 2px; }
/* /Components/Pages/Accounts/Settings.razor.rz.scp.css */
.set[b-z20o46u0s8] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 560px;
    font-family: var(--rms-font);
    color: var(--rms-text);
}

.set-title[b-z20o46u0s8] { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); }

.set-card[b-z20o46u0s8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 22px;
    background: var(--rms-surface);
    border: 1px solid var(--rms-border);
    border-radius: var(--rms-r-lg);
    box-shadow: var(--rms-shadow-sm);
}

.set-card-title[b-z20o46u0s8] { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-bold); }
.set-help[b-z20o46u0s8] { margin: 0; font-size: var(--fs-s); color: var(--rms-text-2); line-height: 1.5; }
.set-label[b-z20o46u0s8] { margin-top: 4px; font-size: var(--fs-s); font-weight: var(--fw-medium); }

.set-input[b-z20o46u0s8] {
    height: var(--h-control);
    padding: 0 12px;
    border: 1px solid var(--rms-border-strong);
    border-radius: var(--rms-r-md);
    background: var(--rms-surface-2);
    color: var(--rms-text);
    font: inherit;
    font-size: var(--fs-md);
}
.set-input:focus[b-z20o46u0s8] {
    outline: none;
    background: var(--rms-surface);
    border-color: var(--rms-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .15);
}

.set-ok[b-z20o46u0s8]    { margin: 0; font-size: var(--fs-s); color: var(--rms-success-dark); font-weight: var(--fw-medium); }
.set-error[b-z20o46u0s8] { margin: 0; font-size: var(--fs-s); color: var(--rms-danger-dark); font-weight: var(--fw-medium); }

.set-actions[b-z20o46u0s8] { display: flex; gap: 8px; margin-top: 4px; }

.set-save[b-z20o46u0s8],
.set-back[b-z20o46u0s8] {
    height: var(--h-control);
    padding: 0 18px;
    border-radius: var(--rms-r-md);
    font: inherit;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    cursor: pointer;
}
.set-save[b-z20o46u0s8] { border: 1px solid var(--rms-primary); background: var(--rms-primary); color: #FFFFFF; }
.set-save:hover:not(:disabled)[b-z20o46u0s8] { background: var(--rms-primary-hover); border-color: var(--rms-primary-hover); }
.set-save:disabled[b-z20o46u0s8] { opacity: .6; cursor: not-allowed; }
.set-back[b-z20o46u0s8] { border: 1px solid var(--rms-border-strong); background: var(--rms-surface); color: var(--rms-text); }
.set-back:hover[b-z20o46u0s8] { background: var(--rms-surface-2); }

button:focus-visible[b-z20o46u0s8] { outline: 2px solid var(--rms-primary-hover); outline-offset: 2px; }
/* /Components/Pages/Accounts/Setup.razor.rz.scp.css */
.su[b-0ddpnqobvl] {
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: var(--rms-font);
    color: var(--rms-text);
}

.su-head[b-0ddpnqobvl] { display: flex; flex-direction: column; gap: 4px; }
.su-title[b-0ddpnqobvl] { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.su-intro[b-0ddpnqobvl] { margin: 0; font-size: var(--fs-base); color: var(--rms-text-2); line-height: 1.5; }

.su-form[b-0ddpnqobvl] { display: flex; flex-direction: column; gap: 14px; }

.su-card[b-0ddpnqobvl] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
    background: var(--rms-surface);
    border: 1px solid var(--rms-border);
    border-radius: var(--rms-r-lg);
    box-shadow: var(--rms-shadow-sm);
}
.su-lock[b-0ddpnqobvl] { max-width: 380px; }

.su-card-title[b-0ddpnqobvl] { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-bold); }
.su-help[b-0ddpnqobvl] { margin: -4px 0 0; font-size: var(--fs-s); color: var(--rms-text-2); }

.su-grid[b-0ddpnqobvl] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

.su-field[b-0ddpnqobvl] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.su-label[b-0ddpnqobvl] { font-size: var(--fs-s); font-weight: var(--fw-medium); }
.su-hint[b-0ddpnqobvl]  { font-size: var(--fs-sm); color: var(--rms-gray); }
.su-short[b-0ddpnqobvl] { max-width: 240px; }

.su-test[b-0ddpnqobvl] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 2px; }
.su-test-ok[b-0ddpnqobvl]   { font-size: var(--fs-s); font-weight: var(--fw-medium); color: var(--rms-success-dark); }
.su-test-fail[b-0ddpnqobvl] { font-size: var(--fs-s); font-weight: var(--fw-medium); color: var(--rms-danger-dark); line-height: 1.4; }

.su-input[b-0ddpnqobvl] {
    height: var(--h-control);
    padding: 0 12px;
    border: 1px solid var(--rms-border-strong);
    border-radius: var(--rms-r-md);
    background: var(--rms-surface-2);
    color: var(--rms-text);
    font: inherit;
    font-size: var(--fs-base);
    min-width: 0;
}
.su-input[b-0ddpnqobvl]::placeholder { color: var(--rms-text-disabled); }
.su-input:focus[b-0ddpnqobvl] {
    outline: none;
    background: var(--rms-surface);
    border-color: var(--rms-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .15);
}

.su-error[b-0ddpnqobvl] {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--rms-danger-border);
    border-radius: var(--rms-r-md);
    background: var(--rms-danger-soft);
    color: var(--rms-danger-text);
    font-size: var(--fs-s);
    line-height: 1.45;
}
.su-ok[b-0ddpnqobvl] {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--rms-success-border);
    border-radius: var(--rms-r-md);
    background: var(--rms-success-soft);
    color: var(--rms-success-text);
    font-size: var(--fs-s);
    font-weight: var(--fw-medium);
}

.su-actions[b-0ddpnqobvl] { display: flex; flex-wrap: wrap; gap: 8px; }

.su-primary[b-0ddpnqobvl],
.su-secondary[b-0ddpnqobvl] {
    height: var(--h-control);
    padding: 0 18px;
    border-radius: var(--rms-r-md);
    font: inherit;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    cursor: pointer;
}
.su-primary[b-0ddpnqobvl] { border: 1px solid var(--rms-primary); background: var(--rms-primary); color: #FFFFFF; }
.su-primary:hover:not(:disabled)[b-0ddpnqobvl] { background: var(--rms-primary-hover); border-color: var(--rms-primary-hover); }
.su-secondary[b-0ddpnqobvl] { border: 1px solid var(--rms-border-strong); background: var(--rms-surface); color: var(--rms-text); }
.su-secondary:hover:not(:disabled)[b-0ddpnqobvl] { background: var(--rms-surface-2); }
.su-primary:disabled[b-0ddpnqobvl], .su-secondary:disabled[b-0ddpnqobvl] { opacity: .6; cursor: wait; }

button:focus-visible[b-0ddpnqobvl] { outline: 2px solid var(--rms-primary-hover); outline-offset: 2px; }

@media (max-width: 640px) {
    .su-grid[b-0ddpnqobvl] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/Guests/Check_IN.razor.rz.scp.css */
/* Check_IN — compact, fits one laptop screen (about 1366×768 and up) without scrolling.
   All colours / sizes come from wwwroot/css/theme.css.
   InputText / InputSelect / InputFile / ValidationMessage / EditForm render their own elements,
   so they are styled through  .ci ::deep …  */

.ci[b-jkfm383473] { color: var(--rms-text); font-size: var(--fs-base); }

.ci-page[b-jkfm383473] {
    max-width: 1320px; margin: 0 auto;
    container-type: inline-size;      /* layout follows the space the page really has (sidebar excluded) */
    container-name: ci;
}

.ci[b-jkfm383473]  .ci-form {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.6vh, 16px);            /* more air on taller screens, still one screen on 768px laptops */
}

.ci-sr[b-jkfm383473] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- card ---------- */
.ci-card[b-jkfm383473] {
    min-width: 0;
    padding: clamp(10px, 1.6vh, 16px) 16px;
    background: var(--rms-surface);
    border: 1px solid var(--rms-border);
    border-radius: var(--rms-r-lg);
    box-shadow: var(--rms-shadow-sm);
}

.ci-title[b-jkfm383473] {                                   /* same as dashboard section titles (READY, GUEST …) */
    margin: 0;
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-base); font-weight: var(--fw-bold);
    letter-spacing: .03em; text-transform: uppercase;
    color: var(--rms-text);
}
.ci-title-row[b-jkfm383473] { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.ci-num[b-jkfm383473] {
    width: 20px; height: 20px; border-radius: var(--rms-r-sm);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--rms-navy); color: #FFFFFF; font-size: var(--fs-xs); letter-spacing: 0;
}

/* ---------- header ---------- */
.ci-head[b-jkfm383473] { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.ci-back[b-jkfm383473] {
    flex: 0 0 auto; width: var(--h-control); height: var(--h-control);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--rms-border-strong); border-radius: var(--rms-r-md);
    background: var(--rms-surface); color: var(--rms-text); cursor: pointer;
}
.ci-back:hover[b-jkfm383473] { background: var(--rms-surface-2); }
.ci-roomtile[b-jkfm383473] {
    flex: 0 0 auto; width: 52px; height: 44px; border-radius: var(--rms-r-md);
    display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
    background: var(--rms-navy); color: #FFFFFF;
}
.ci-roomtile span[b-jkfm383473] { font-size: 9px; font-weight: var(--fw-bold); letter-spacing: .12em; opacity: .8; }
.ci-roomtile strong[b-jkfm383473] { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin-top: 2px; }
.ci-head-text[b-jkfm383473] { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ci-head-text h1[b-jkfm383473] { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); line-height: 1.2; white-space: nowrap; }  /* = dashboard title */
.ci-chips[b-jkfm383473] { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.ci-chip[b-jkfm383473] {
    padding: 1px 8px; border-radius: var(--rms-r-pill);
    background: var(--rms-gray-200); color: var(--rms-text-2);
    font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.ci-chip-ready[b-jkfm383473] { background: var(--rms-success-soft); color: var(--rms-success-text); }
.ci-hold[b-jkfm383473] {
    flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-2);
    height: var(--h-control); padding: 0 var(--sp-3); border-radius: var(--rms-r-pill);
    background: var(--rms-primary-soft); border: 1px solid var(--rms-primary-border);
    color: var(--rms-primary-text); font-size: var(--fs-s); white-space: nowrap;
}

/* ---------- fields ---------- */
.ci-field[b-jkfm383473] { display: flex; flex-direction: column; gap: clamp(4px, .7vh, 6px); min-width: 0; }
.ci-two[b-jkfm383473] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.ci-label[b-jkfm383473] { font-size: var(--fs-s); font-weight: var(--fw-medium); color: var(--rms-text-2); }
.ci-label-note[b-jkfm383473] { font-weight: var(--fw-normal); color: var(--rms-text-muted); }
.ci-hint[b-jkfm383473] { font-size: var(--fs-sm); color: var(--rms-text-muted); }

.ci[b-jkfm383473]  .ci-input {
    width: 100%; height: var(--h-control); box-sizing: border-box; min-width: 0;
    padding: 0 10px;
    border: 1px solid var(--rms-border-strong); border-radius: var(--rms-r-md);
    background: var(--rms-surface); color: var(--rms-text);
    font: inherit; font-size: var(--fs-base);
}
.ci[b-jkfm383473]  .ci-input:focus { outline: none; border-color: var(--rms-primary); box-shadow: var(--rms-focus); }
.ci[b-jkfm383473]  .ci-input:disabled { background: var(--rms-surface-2); color: var(--rms-text-disabled); cursor: not-allowed; }
.ci[b-jkfm383473]  .ci-input.invalid { border-color: var(--rms-danger); }
.ci[b-jkfm383473]  .ci-input-sm { height: var(--h-control-sm); font-size: var(--fs-s); padding: 0 6px; }

.ci[b-jkfm383473]  .ci-error,
.ci-error[b-jkfm383473] { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--rms-danger-dark); }

/* ---------- buttons ---------- */
.ci-btn[b-jkfm383473] {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: var(--h-control); padding: 0 var(--sp-4);
    border: 1px solid transparent; border-radius: var(--rms-r-md);
    font: inherit; font-size: var(--fs-base); font-weight: var(--fw-medium);
    white-space: nowrap; cursor: pointer;
}
.ci-btn:disabled[b-jkfm383473] { opacity: .65; cursor: default; }
.ci-btn-sm[b-jkfm383473] { height: var(--h-control-sm); padding: 0 var(--sp-3); font-size: var(--fs-s); }
.ci-btn-primary[b-jkfm383473] { background: var(--rms-primary); color: #FFFFFF; }
.ci-btn-primary:hover:not(:disabled)[b-jkfm383473] { background: var(--rms-primary-hover); }
.ci-btn-navy[b-jkfm383473] { background: var(--rms-navy); color: #FFFFFF; }
.ci-btn-navy:hover[b-jkfm383473] { background: var(--rms-navy-hover); }
.ci-btn-light[b-jkfm383473] { border-color: var(--rms-border-strong); background: var(--rms-surface); color: var(--rms-text); }
.ci-btn-light:hover:not(:disabled)[b-jkfm383473] { background: var(--rms-surface-2); }
.ci-link[b-jkfm383473] {
    align-self: flex-start; padding: 0; border: 0; background: none;
    color: var(--rms-primary-hover); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium);
    text-decoration: underline; cursor: pointer;
}

/* ---------- mobile row ---------- */
.ci-mobile[b-jkfm383473] { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.ci-mobile > .ci-label[b-jkfm383473] { flex: 0 0 auto; }
.ci-mobile-row[b-jkfm383473] { flex: 0 1 400px; display: flex; gap: var(--sp-2); min-width: 0; }
.ci-prefix[b-jkfm383473] {
    flex: 0 0 auto; height: var(--h-control); padding: 0 10px;
    display: flex; align-items: center;
    border: 1px solid var(--rms-border-strong); border-radius: var(--rms-r-md);
    background: var(--rms-surface-2); font-weight: var(--fw-medium); color: var(--rms-text-2);
}
.ci-optional[b-jkfm383473] { margin-left: 4px; font-size: var(--fs-xs); font-weight: var(--fw-normal); color: var(--rms-text-muted); }
.ci-check.is-optional:not(.is-done)[b-jkfm383473] { border-style: dotted; opacity: .8; }

.ci[b-jkfm383473]  .ci-input-mobile {
    flex: 1 1 auto;
    font-size: var(--fs-md); font-weight: var(--fw-bold); letter-spacing: .08em;
    border: 2px solid var(--rms-primary);
}
.ci[b-jkfm383473]  .ci-input-mobile.is-verified { border-color: var(--rms-success); background: var(--rms-success-bg); }

.ci-status[b-jkfm383473] { flex: 1 1 320px; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ci-banner[b-jkfm383473] {
    flex: 1 1 auto; min-width: 0;
    display: inline-flex; align-items: center; gap: var(--sp-2);
    min-height: var(--h-control-sm); padding: 4px var(--sp-3); border-radius: var(--rms-r-md);
    font-size: var(--fs-s);
}
.ci-banner-amber[b-jkfm383473] { background: var(--rms-warning-soft); border: 1px solid var(--rms-warning-border); color: var(--rms-warning-text); }
.ci-banner-green[b-jkfm383473] { background: var(--rms-success-bg);   border: 1px solid var(--rms-success-border); color: var(--rms-success-text); }
.ci-banner-blue[b-jkfm383473]  { background: var(--rms-primary-soft); border: 1px solid var(--rms-primary-border); color: var(--rms-primary-text); }
.ci-banner-red[b-jkfm383473]   { background: var(--rms-danger-soft);  border: 1px solid var(--rms-danger-border);  color: var(--rms-danger-text); }

/* ---------- three columns ---------- */
.ci-columns[b-jkfm383473] {
    margin: 0; padding: 0; border: 0; min-width: 0;
    display: grid;
    grid-template-columns: minmax(300px, 1.15fr) minmax(260px, 1fr) minmax(300px, 1.1fr);
    gap: var(--sp-3);
}
.ci-columns:disabled .ci-col[b-jkfm383473] { opacity: .5; }
.ci-col[b-jkfm383473] { display: flex; flex-direction: column; gap: clamp(8px, 1.9vh, 18px); }

/* segmented buttons: Indian/Foreigner, AC/Non AC */
.ci-seg[b-jkfm383473] {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px;
    height: var(--h-control); box-sizing: border-box; padding: 3px;
    border-radius: var(--rms-r-md); background: var(--rms-gray-200);
}
.ci-seg-btn[b-jkfm383473] {
    border: 0; border-radius: var(--rms-r-sm); background: transparent;
    font: inherit; font-size: var(--fs-s); font-weight: var(--fw-medium); color: var(--rms-text-2); cursor: pointer;
}
.ci-seg-btn.is-on[b-jkfm383473] { background: var(--rms-surface); color: var(--rms-navy); font-weight: var(--fw-bold); box-shadow: var(--rms-shadow-sm); }
.ci-seg-btn.is-disabled[b-jkfm383473],
.ci-seg-btn:disabled[b-jkfm383473] { color: var(--rms-text-disabled); text-decoration: line-through; cursor: not-allowed; }

/* pax / nights counters */
.ci-pax[b-jkfm383473] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.ci-counter[b-jkfm383473] { padding-block: clamp(6px, 1vh, 10px) !important; }
.ci-counter[b-jkfm383473] {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 6px 4px; border: 1px solid var(--rms-border); border-radius: var(--rms-r-md);
}
.ci-counter-label[b-jkfm383473] { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--rms-text-muted); }
.ci-counter-row[b-jkfm383473] { display: flex; align-items: center; justify-content: center; gap: 6px; }
.ci-counter-box[b-jkfm383473] {
    height: var(--h-control); box-sizing: border-box; padding: 0 3px;
    border: 1px solid var(--rms-border); border-radius: var(--rms-r-md); justify-content: space-between;
}
.ci-counter-value[b-jkfm383473] {
    min-width: 22px; text-align: center;
    font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--rms-navy);
    font-variant-numeric: tabular-nums;
}
.ci-step[b-jkfm383473] {
    width: 28px; height: 28px; padding: 0;
    border: 1px solid var(--rms-border-strong); border-radius: var(--rms-r-sm);
    background: var(--rms-surface-2); color: var(--rms-text);
    font: inherit; font-size: var(--fs-md); font-weight: var(--fw-medium); line-height: 1; cursor: pointer;
}
.ci-step:hover:not(:disabled)[b-jkfm383473] { background: var(--rms-gray-200); }

/* tariff */
.ci-tariff[b-jkfm383473] {
    display: flex; align-items: center; height: 44px; overflow: hidden;
    border: 2px solid var(--rms-navy); border-radius: var(--rms-r-md); background: var(--rms-surface);
}
.ci-tariff > span[b-jkfm383473] {
    height: 100%; padding: 0 var(--sp-3); display: flex; align-items: center;
    background: var(--rms-navy); color: #FFFFFF; font-size: var(--fs-lg); font-weight: var(--fw-bold);
}
.ci-tariff[b-jkfm383473]  input {
    flex: 1 1 auto; min-width: 0; height: 100%;
    border: 0; padding: 0 var(--sp-3); background: transparent;
    font: inherit; font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--rms-navy); text-align: right;
}
.ci-tariff[b-jkfm383473]  input:focus { outline: none; }
.ci-tariff[b-jkfm383473]  input::placeholder { font-size: var(--fs-base); font-weight: var(--fw-normal); color: var(--rms-text-disabled); }
.ci-tariff:focus-within[b-jkfm383473] { box-shadow: var(--rms-focus); }

/* ---------- camera ---------- */
.ci-camera-pick[b-jkfm383473] {
    max-width: 150px; height: var(--h-control-sm); padding: 0 6px;
    border: 1px solid var(--rms-border-strong); border-radius: var(--rms-r-sm);
    background: var(--rms-surface); font: inherit; font-size: var(--fs-sm);
}
.ci-cam[b-jkfm383473] {
    position: relative; height: clamp(140px, calc(48vh - 160px), 260px);
    border-radius: var(--rms-r-md); background: var(--rms-navy-dark); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.ci-cam.ci-hidden[b-jkfm383473] { display: none; }
.ci-video[b-jkfm383473] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ci-mirror[b-jkfm383473] { transform: scaleX(-1); }
.ci-face[b-jkfm383473] { position: relative; stroke: rgba(255, 255, 255, .6); stroke-width: 2; stroke-dasharray: 6 6; }
.ci-frame[b-jkfm383473] { position: relative; width: 70%; aspect-ratio: 1.586; border: 2px dashed rgba(255, 255, 255, .7); border-radius: var(--rms-r-md); }
.ci-cam-msg[b-jkfm383473] {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
    padding: var(--sp-3); text-align: center; color: #FFFFFF; font-size: var(--fs-s); line-height: 1.4;
}
.ci-live[b-jkfm383473] {
    position: absolute; top: 8px; left: 8px;
    display: flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--rms-r-pill);
    max-width: calc(100% - 16px); box-sizing: border-box;
    background: rgba(0, 0, 0, .5); color: #FFFFFF; font-size: var(--fs-sm); font-weight: var(--fw-medium);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ci-live-dot[b-jkfm383473] { flex: 0 0 auto; }
.ci-live-dot[b-jkfm383473] { width: 7px; height: 7px; border-radius: 50%; background: #FF4D4F; }
.ci-cam-actions[b-jkfm383473] { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: var(--sp-2); }
.ci-cam-btn[b-jkfm383473] {
    height: var(--h-control-sm); padding: 0 var(--sp-3);
    display: flex; align-items: center; gap: 6px;
    border: 0; border-radius: var(--rms-r-pill); background: var(--rms-surface); color: var(--rms-navy-dark);
    font: inherit; font-size: var(--fs-s); font-weight: var(--fw-bold); cursor: pointer;
}
.ci-cam-btn-ghost[b-jkfm383473] { background: rgba(0, 0, 0, .5); color: #FFFFFF; }

.ci-taken[b-jkfm383473] {
    display: flex; align-items: center; gap: var(--sp-3); padding: 6px;
    border: 1px solid var(--rms-success-border); border-radius: var(--rms-r-md); background: var(--rms-success-bg);
}
.ci-taken img[b-jkfm383473] { flex: 0 0 auto; width: 72px; height: 88px; object-fit: cover; border-radius: var(--rms-r-sm); }
.ci-taken-text[b-jkfm383473] { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ci-taken strong[b-jkfm383473] { display: flex; align-items: center; gap: 4px; font-size: var(--fs-s); color: var(--rms-success-text); }

/* ---------- ID documents ---------- */
.ci-ids[b-jkfm383473] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.ci-id[b-jkfm383473] {
    display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: var(--sp-2);
    border: 1px dashed var(--rms-gray-400); border-radius: var(--rms-r-md); background: var(--rms-surface-2);
}
.ci-id.is-done[b-jkfm383473] { border: 1px solid var(--rms-success-border); background: var(--rms-success-bg); }
.ci-id-head[b-jkfm383473] { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 28px; font-size: var(--fs-s); }
.ci-id-thumb[b-jkfm383473] { height: 28px; width: 44px; object-fit: cover; border-radius: 4px; border: 1px solid var(--rms-success-border); }
.ci-id-actions[b-jkfm383473] { display: flex; gap: 6px; }
.ci-id-btn[b-jkfm383473],
.ci-id-upload[b-jkfm383473] {
    flex: 1 1 0; min-width: 0; height: var(--h-control-sm);
    display: flex; align-items: center; justify-content: center; gap: 4px;
    border-radius: var(--rms-r-sm); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); cursor: pointer;
}
.ci-id-btn[b-jkfm383473] { border: 0; background: var(--rms-navy); color: #FFFFFF; }
.ci-id-btn:hover[b-jkfm383473] { background: var(--rms-navy-hover); }
.ci-id-upload[b-jkfm383473] { position: relative; border: 1px solid var(--rms-border-strong); background: var(--rms-surface); color: var(--rms-text); }
.ci-id-upload[b-jkfm383473]  input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ci-id-upload:focus-within[b-jkfm383473] { outline: 2px solid var(--rms-primary-hover); outline-offset: 2px; }

/* ---------- footer ---------- */
.ci-footer[b-jkfm383473] {
    position: sticky; bottom: var(--sp-2); z-index: 5;
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    box-shadow: var(--rms-shadow-md);
}
.ci-checks[b-jkfm383473] { flex: 1 1 300px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ci-check[b-jkfm383473] {
    display: inline-flex; align-items: center; gap: 4px;
    height: 26px; padding: 0 10px; border-radius: var(--rms-r-pill);
    border: 1px dashed var(--rms-border-strong); background: var(--rms-surface-2); color: var(--rms-text-muted);
    font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.ci-check.is-done[b-jkfm383473] { border: 1px solid var(--rms-success-border); background: var(--rms-success-soft); color: var(--rms-success-text); }
.ci-submit[b-jkfm383473] { height: var(--h-control-lg); padding: 0 var(--sp-5); background: var(--rms-gray); color: #FFFFFF; font-weight: var(--fw-bold); }
.ci-submit.is-ready[b-jkfm383473] { background: var(--rms-success); }
.ci-submit.is-ready:hover:not(:disabled)[b-jkfm383473] { background: var(--rms-success-dark); }
.ci-save-error[b-jkfm383473] {
    flex: 1 1 100%; padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--rms-danger-border); border-radius: var(--rms-r-md);
    background: var(--rms-danger-soft); color: var(--rms-danger-text);
    font-size: var(--fs-s); font-weight: var(--fw-medium);
}
.ci[b-jkfm383473]  .ci-summary { margin: 4px 0 0; padding-left: 18px; font-weight: var(--fw-normal); }

/* ---------- history dialog ---------- */
.ci-overlay[b-jkfm383473] {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
    background: rgba(16, 24, 40, .45);
}
.ci-dialog[b-jkfm383473] {
    width: 100%; max-width: 760px; max-height: 80vh; overflow: auto;
    display: flex; flex-direction: column; gap: var(--sp-3);
    padding: var(--sp-4); border-radius: var(--rms-r-lg);
    background: var(--rms-surface); box-shadow: var(--rms-shadow-md);
}
.ci-table-wrap[b-jkfm383473] { overflow-x: auto; border: 1px solid var(--rms-border); border-radius: var(--rms-r-md); }
.ci-table[b-jkfm383473] { width: 100%; border-collapse: collapse; }
.ci-table th[b-jkfm383473] {
    padding: var(--sp-2) var(--sp-3); text-align: left; white-space: nowrap;
    font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase;
    color: var(--rms-text-2); background: var(--rms-surface-2); border-bottom: 1px solid var(--rms-border);
}
.ci-table td[b-jkfm383473] { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-s); white-space: nowrap; border-bottom: 1px solid var(--rms-border); }
.ci-table tr:last-child td[b-jkfm383473] { border-bottom: 0; }
.ci-right[b-jkfm383473] { text-align: right !important; }

/* ---------- notices (busy / not ready / review) ---------- */
.ci-center[b-jkfm383473] {
    min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--sp-3); padding: var(--sp-6) var(--sp-4); color: var(--rms-text-2);
}
.ci-notice[b-jkfm383473] {
    width: 100%; max-width: 520px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
    padding: var(--sp-6); text-align: center;
    background: var(--rms-surface); border: 1px solid var(--rms-border); border-radius: var(--rms-r-lg);
    box-shadow: var(--rms-shadow-md);
}
.ci-notice h1[b-jkfm383473] { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); }
.ci-notice p[b-jkfm383473] { margin: 0; font-size: var(--fs-base); line-height: 1.55; color: var(--rms-text-2); }
.ci-notice p strong[b-jkfm383473] { color: var(--rms-text); }
.ci-notice-icon[b-jkfm383473] { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ci-amber[b-jkfm383473] { background: var(--rms-warning-soft); color: var(--rms-warning-text); }
.ci-red[b-jkfm383473]   { background: var(--rms-danger-soft);  color: var(--rms-danger-dark); }
.ci-green[b-jkfm383473] { background: var(--rms-success-soft); color: var(--rms-success); }
.ci-notice-actions[b-jkfm383473] { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-1); }
.ci-notice .ci-btn[b-jkfm383473] { height: var(--h-control-lg); }

.ci-review[b-jkfm383473] { max-width: 640px; }
.ci-review-error[b-jkfm383473] { width: 100%; box-sizing: border-box; justify-content: center; }
.ci-grn[b-jkfm383473] {
    padding: var(--sp-2) var(--sp-4); border-radius: var(--rms-r-md);
    background: var(--rms-success-bg); border: 1px solid var(--rms-success-border);
    font-size: var(--fs-md) !important; color: var(--rms-success-text) !important; letter-spacing: .04em;
}
.ci-review-list[b-jkfm383473] {
    width: 100%; margin: 0;
    display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--sp-4);
    text-align: left; font-size: var(--fs-s);
}
.ci-review-list dt[b-jkfm383473] { color: var(--rms-text-muted); font-weight: var(--fw-medium); }
.ci-review-list dd[b-jkfm383473] { margin: 0; font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.ci-review-thumbs[b-jkfm383473] { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.ci-review-thumbs img[b-jkfm383473] { height: 80px; border-radius: var(--rms-r-md); border: 1px solid var(--rms-border); object-fit: cover; }

/* ---------- spinner ---------- */
.ci-spinner[b-jkfm383473] {
    width: 26px; height: 26px; border-radius: 50%;
    border: 3px solid var(--rms-border-strong); border-top-color: var(--rms-navy);
    animation: ci-spin-b-jkfm383473 .8s linear infinite;
}
.ci-spinner-sm[b-jkfm383473] { width: 14px; height: 14px; border-width: 2px; border-color: rgba(255, 255, 255, .5); border-top-color: #FFFFFF; }
.ci-spinner-light[b-jkfm383473] { border-color: rgba(255, 255, 255, .3); border-top-color: #FFFFFF; }
@keyframes ci-spin-b-jkfm383473 { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ci-spinner[b-jkfm383473] { animation-duration: 2s; } }

/* ---------- narrower space (half-screen window, tablet): two columns, photo & ID full width ---------- */
@container ci (max-width: 1000px) {
    .ci-columns[b-jkfm383473] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ci-columns > .ci-col:last-child[b-jkfm383473] { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
    .ci-columns > .ci-col:last-child > .ci-title-row[b-jkfm383473] { grid-column: 1 / -1; }
}

/* ---------- small space: title smaller, mobile row wraps ---------- */
@container ci (max-width: 760px) {
    .ci-head-text h1[b-jkfm383473] { font-size: var(--fs-lg); }
    .ci-mobile-row[b-jkfm383473] { flex: 1 1 100%; }
    .ci-status[b-jkfm383473] { flex: 1 1 100%; }
    .ci-hold[b-jkfm383473] { flex: 1 1 100%; justify-content: center; }
}

/* ---------- one column (phone, or a window under ~640px of page space) ---------- */
@container ci (max-width: 640px) {
    .ci-columns[b-jkfm383473] { grid-template-columns: minmax(0, 1fr); }
    .ci-columns > .ci-col:last-child[b-jkfm383473] { display: flex; align-items: stretch; }
    .ci-cam[b-jkfm383473] { height: 220px; }
    .ci-footer[b-jkfm383473] { bottom: 0; }
    .ci-checks[b-jkfm383473] { order: 1; flex: 1 1 100%; }
    .ci-footer > .ci-btn-light[b-jkfm383473] { order: 2; flex: 0 0 auto; }     /* Cancel + Submit share one row */
    .ci-submit[b-jkfm383473] { order: 3; flex: 1 1 auto; }
}

/* ---------- very narrow: paired fields stack too ---------- */
@container ci (max-width: 400px) {
    .ci-two[b-jkfm383473] { grid-template-columns: minmax(0, 1fr); }
    .ci-mobile > .ci-label[b-jkfm383473] { flex: 1 1 100%; }
}
/* /Components/Pages/Guests/Check_OUT.razor.rz.scp.css */
/* Check_OUT — same standard as Check-In (claude/ui-standard.md). All values from wwwroot/css/theme.css.
   Fits one laptop screen (1366×768 and up); rows tighten on shorter screens; columns follow the page width. */

.co[b-ojhy8vhddg] {
    color: var(--rms-text); font-size: var(--fs-base);
    container-type: inline-size;      /* columns follow the page's own width (sidebar excluded) */
    container-name: co;
}

.co-page[b-ojhy8vhddg] {
    max-width: 1320px; margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-content: start;
}
.co-span2[b-ojhy8vhddg] { grid-column: span 2; }

/* ---------- card ---------- */
.co-card[b-ojhy8vhddg] {
    min-width: 0;
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px 16px;
    background: var(--rms-surface);
    border: 1px solid var(--rms-border);
    border-radius: var(--rms-r-lg);
    box-shadow: var(--rms-shadow-sm);
}
.co-center-y[b-ojhy8vhddg] { justify-content: center; }

.co-ttlrow[b-ojhy8vhddg] { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--rms-border); }
.co-ttlrow-plain[b-ojhy8vhddg] { border-bottom: 0; padding-bottom: 0; }
.co-ttl[b-ojhy8vhddg] {
    margin: 0; display: flex; align-items: center; gap: 8px;
    font-size: var(--fs-base); font-weight: var(--fw-bold); letter-spacing: .03em; text-transform: uppercase;
    color: var(--rms-text);
}
.co-num[b-ojhy8vhddg] {
    width: 20px; height: 20px; border-radius: var(--rms-r-sm);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--rms-navy); color: #FFFFFF; font-size: var(--fs-xs); letter-spacing: 0;
}
.co-muted[b-ojhy8vhddg] { color: var(--rms-text-muted); font-weight: var(--fw-normal); }
.co-small[b-ojhy8vhddg] { font-size: var(--fs-s); }

.co-chip[b-ojhy8vhddg] {
    padding: 1px 8px; border-radius: var(--rms-r-pill);
    background: var(--rms-gray-200); color: var(--rms-text-2);
    font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap;
}
.co-chip-guest[b-ojhy8vhddg] { background: var(--rms-primary-soft); color: var(--rms-primary-text); }
.co-chip-late[b-ojhy8vhddg]  { background: var(--rms-warning-soft); color: var(--rms-warning-text); border: 1px solid var(--rms-warning-border); }

/* ---------- header ---------- */
.co-head[b-ojhy8vhddg] { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.co-roomtile[b-ojhy8vhddg] {
    flex: 0 0 auto; width: 52px; height: 44px; border-radius: var(--rms-r-md);
    display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
    background: var(--st2); color: #FFFFFF;                       /* Guest colour */
}
.co-roomtile span[b-ojhy8vhddg] { font-size: 9px; font-weight: var(--fw-bold); letter-spacing: .12em; opacity: .85; }
.co-roomtile strong[b-ojhy8vhddg] { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin-top: 2px; }
.co-head-text[b-ojhy8vhddg] { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.co-head-text h1[b-ojhy8vhddg] { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); line-height: 1.2; }
.co-chips[b-ojhy8vhddg] { display: flex; flex-wrap: wrap; gap: 4px; }
.co-refreshed[b-ojhy8vhddg] { font-size: var(--fs-sm); color: var(--rms-text-muted); }
.co-refreshed strong[b-ojhy8vhddg] { color: var(--rms-text-2); font-variant-numeric: tabular-nums; }
.co-grn[b-ojhy8vhddg] {
    height: var(--h-control); display: inline-flex; align-items: center; padding: 0 14px;
    border-radius: var(--rms-r-md); background: var(--rms-danger); color: #FFFFFF;
    font-size: var(--fs-base); font-weight: var(--fw-bold); letter-spacing: .03em; font-variant-numeric: tabular-nums;
}

/* ---------- buttons ---------- */
.co-btn[b-ojhy8vhddg] {
    height: var(--h-control); padding: 0 16px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid var(--rms-border-strong); border-radius: var(--rms-r-md);
    background: var(--rms-surface); color: var(--rms-text);
    font: inherit; font-size: var(--fs-base); font-weight: var(--fw-medium); white-space: nowrap; cursor: pointer;
}
.co-btn:hover:not(:disabled)[b-ojhy8vhddg] { background: var(--rms-surface-2); }
.co-btn:disabled[b-ojhy8vhddg] { opacity: .55; cursor: default; }
.co-btn-navy[b-ojhy8vhddg] { border: 0; background: var(--rms-navy); color: #FFFFFF; font-weight: var(--fw-bold); }
.co-btn-navy:hover:not(:disabled)[b-ojhy8vhddg] { background: var(--rms-navy-hover); }
.co-btn-go[b-ojhy8vhddg] { border: 0; background: var(--rms-success); color: #FFFFFF; font-weight: var(--fw-bold); }
.co-btn-go:hover:not(:disabled)[b-ojhy8vhddg] { background: var(--rms-success-dark); }
.co-tool[b-ojhy8vhddg] {
    height: var(--h-control); min-width: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid var(--rms-primary-border); border-radius: var(--rms-r-md);
    background: var(--rms-primary-soft); color: var(--rms-primary-text);
    font: inherit; font-size: var(--fs-s); font-weight: var(--fw-bold); white-space: nowrap; cursor: pointer;
}
.co-tool:disabled[b-ojhy8vhddg] { opacity: .6; cursor: default; }
.co-link[b-ojhy8vhddg] { padding: 0; border: 0; background: none; color: var(--rms-primary-hover); font: inherit; font-size: var(--fs-s); font-weight: var(--fw-bold); cursor: pointer; text-decoration: underline; }
.co-link:disabled[b-ojhy8vhddg] { color: var(--rms-text-disabled); cursor: default; }
.co-spin[b-ojhy8vhddg] { animation: co-rot-b-ojhy8vhddg .8s linear infinite; }
@keyframes co-rot-b-ojhy8vhddg { to { transform: rotate(360deg); } }

/* ---------- guest / billing key-values ---------- */
.co-name[b-ojhy8vhddg] { font-size: var(--fs-md); line-height: 1.3; }
.co-kv[b-ojhy8vhddg] {
    margin: 0;
    display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px;
    font-size: var(--fs-s);
}
.co-kv dt[b-ojhy8vhddg] { color: var(--rms-text-muted); }
.co-kv dd[b-ojhy8vhddg] { margin: 0; font-weight: var(--fw-medium); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-kv-left dd[b-ojhy8vhddg] { text-align: left; }
.co-ontime[b-ojhy8vhddg] { color: var(--rms-success-dark); }
.co-late[b-ojhy8vhddg] { color: var(--rms-warning-text); }

/* ---------- photo & ID ---------- */
.co-docs[b-ojhy8vhddg] { flex: 1; display: flex; gap: 8px; }
.co-doc[b-ojhy8vhddg] {
    flex: 1 1 0; min-width: 0; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
    border: 0; background: none; font: inherit; cursor: zoom-in;
}
.co-doc:disabled[b-ojhy8vhddg] { cursor: default; }
.co-docimg[b-ojhy8vhddg] {
    position: relative; height: 74px; overflow: hidden;
    border-radius: var(--rms-r-md); border: 1px solid var(--rms-success-border); background: var(--rms-surface-2);
    display: flex; align-items: center; justify-content: center;
}
.co-docimg img[b-ojhy8vhddg] { width: 100%; height: 100%; object-fit: cover; }
.co-docimg-none[b-ojhy8vhddg] { border: 1px dashed var(--rms-gray-400); color: var(--rms-text-disabled); font-size: var(--fs-sm); }
.co-zoom[b-ojhy8vhddg] {
    position: absolute; right: 4px; bottom: 4px; width: 20px; height: 20px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(26, 43, 95, .85); color: #FFFFFF;
}
.co-badge[b-ojhy8vhddg] { height: 22px; border-radius: var(--rms-r-sm); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: #FFFFFF; }
.co-badge-yes[b-ojhy8vhddg] { background: var(--rms-success); }
.co-badge-no[b-ojhy8vhddg]  { background: var(--rms-gray); }

/* ---------- bill ---------- */
.co-table-wrap[b-ojhy8vhddg] { overflow-x: auto; border: 1px solid var(--rms-border); border-radius: var(--rms-r-md); }
.co-table[b-ojhy8vhddg] { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.co-table th[b-ojhy8vhddg] {
    padding: 7px 10px; text-align: left; white-space: nowrap;
    font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase;
    color: var(--rms-text-2); background: var(--rms-surface-2); border-bottom: 1px solid var(--rms-border);
}
.co-table td[b-ojhy8vhddg] { padding: 6px 10px; font-size: var(--fs-s); white-space: nowrap; border-bottom: 1px solid var(--rms-border); }
.co-table tfoot td[b-ojhy8vhddg] { font-weight: var(--fw-bold); background: var(--rms-surface-2); border-bottom: 0; }
.co-table .r[b-ojhy8vhddg] { text-align: right; }
.co-neg[b-ojhy8vhddg] { color: var(--rms-danger-dark); }
.co-pos[b-ojhy8vhddg] { color: var(--rms-success-dark); }

.co-sum[b-ojhy8vhddg] { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 3px 12px; font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.co-sum dt[b-ojhy8vhddg] { margin: 0; }
.co-sum dd[b-ojhy8vhddg] { margin: 0; text-align: right; font-weight: var(--fw-bold); }
.co-sum .co-sep[b-ojhy8vhddg] { border-top: 1px solid var(--rms-border); padding-top: 5px; margin-top: 3px; }
.co-sum .co-sub[b-ojhy8vhddg] { color: var(--rms-text-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.co-final-blocked[b-ojhy8vhddg] { background: var(--rms-surface-2); border-color: var(--rms-border-strong); }
.co-final-blocked strong[b-ojhy8vhddg] { color: var(--rms-text-disabled); }

.co-warn[b-ojhy8vhddg] {
    display: flex; align-items: center; gap: 8px; padding: 6px 10px;
    border: 1px solid var(--rms-danger-border); border-radius: var(--rms-r-md);
    background: var(--rms-danger-soft); color: var(--rms-danger-text); font-size: var(--fs-s);
}
.co-note[b-ojhy8vhddg] { border-color: var(--rms-border-strong); background: var(--rms-surface-2, #f4f6fa); color: var(--rms-text); }
.co-placeholder-err[b-ojhy8vhddg] { border-color: var(--rms-danger-border); color: var(--rms-danger-dark); background: var(--rms-danger-soft); }

.co-placeholder[b-ojhy8vhddg] {
    flex: 1; min-height: 120px;
    display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--sp-4);
    border: 1px dashed var(--rms-border-strong); border-radius: var(--rms-r-md);
    color: var(--rms-text-muted); font-size: var(--fs-s);
}
.co-tools[b-ojhy8vhddg] { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.co-final[b-ojhy8vhddg] {
    margin-top: auto;
    display: flex; align-items: center; justify-content: space-between; padding: 8px 14px;
    border-radius: var(--rms-r-md); background: var(--rms-success-bg); border: 1px solid var(--rms-success-border);
    font-weight: var(--fw-bold);
}
.co-final strong[b-ojhy8vhddg] { font-size: var(--fs-xl); color: var(--rms-success-dark); font-variant-numeric: tabular-nums; }
.co-empty[b-ojhy8vhddg] { margin: 0; font-size: var(--fs-s); font-style: italic; color: var(--rms-text-muted); }
.co-actions[b-ojhy8vhddg] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

/* ---------- image viewer ---------- */
.co-overlay[b-ojhy8vhddg] {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
    background: rgba(16, 24, 40, .6);
}
.co-viewer[b-ojhy8vhddg] {
    max-width: min(960px, 100%); max-height: 92vh;
    display: flex; flex-direction: column; gap: var(--sp-3);
    padding: var(--sp-4); border-radius: var(--rms-r-lg);
    background: var(--rms-surface); box-shadow: var(--rms-shadow-md);
}
.co-viewer img[b-ojhy8vhddg] { max-width: 100%; max-height: calc(92vh - 90px); object-fit: contain; border-radius: var(--rms-r-md); background: var(--rms-surface-2); }

/* ---------- notices ---------- */
.co-center[b-ojhy8vhddg] { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-6) var(--sp-4); color: var(--rms-text-2); }
.co-notice[b-ojhy8vhddg] {
    width: 100%; max-width: 520px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
    padding: var(--sp-6); text-align: center;
    background: var(--rms-surface); border: 1px solid var(--rms-border); border-radius: var(--rms-r-lg); box-shadow: var(--rms-shadow-md);
}
.co-notice h1[b-ojhy8vhddg] { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); }
.co-notice p[b-ojhy8vhddg] { margin: 0; line-height: 1.55; color: var(--rms-text-2); }
.co-notice p strong[b-ojhy8vhddg] { color: var(--rms-text); }
.co-notice-icon[b-ojhy8vhddg] { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.co-amber[b-ojhy8vhddg] { background: var(--rms-warning-soft); color: var(--rms-warning-text); }
.co-red[b-ojhy8vhddg]   { background: var(--rms-danger-soft); color: var(--rms-danger-dark); }
.co-notice-actions[b-ojhy8vhddg] { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-1); }
.co-notice .co-btn[b-ojhy8vhddg] { height: var(--h-control-lg); }
.co-spinner[b-ojhy8vhddg] { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--rms-border-strong); border-top-color: var(--rms-navy); animation: co-rot-b-ojhy8vhddg .8s linear infinite; }

/* ---------- shorter screens: tighten rows so the page still fits without a scroll bar ---------- */
@media (max-height: 740px) {
    .co-table td[b-ojhy8vhddg] { padding: 4px 10px; }
    .co-table th[b-ojhy8vhddg] { padding: 5px 10px; }
    .co-sum[b-ojhy8vhddg] { gap: 1px 12px; }
    .co-page[b-ojhy8vhddg] { gap: 8px; }
    .co-card[b-ojhy8vhddg] { padding: 8px 14px; gap: 6px; }
    .co-docimg[b-ojhy8vhddg] { height: 56px; }
    .co-kv[b-ojhy8vhddg] { gap: 2px 14px; }
    .co-tool[b-ojhy8vhddg], .co-btn[b-ojhy8vhddg] { height: 32px; }
}
@media (max-height: 680px) {
    .co-page[b-ojhy8vhddg] { gap: 7px; }
    .co-docimg[b-ojhy8vhddg] { height: 46px; }
    .co-head-text h1[b-ojhy8vhddg] { font-size: var(--fs-lg); }
    .co-roomtile[b-ojhy8vhddg] { height: 38px; }
}

@media (max-width: 1600px) { .co-table td[b-ojhy8vhddg], .co-table th[b-ojhy8vhddg] { padding-left: 7px; padding-right: 7px; } }

/* ---------- narrower page (half-screen window, tablet): two columns ---------- */
@container co (max-width: 1000px) {
    .co-page[b-ojhy8vhddg] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
    .co-span2[b-ojhy8vhddg] { grid-column: 1 / -1; }
    .co-tools[b-ojhy8vhddg] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- phone / very narrow: one column ---------- */
@container co (max-width: 640px) {
    .co-page[b-ojhy8vhddg] { grid-template-columns: minmax(0, 1fr); }
    .co-head-text h1[b-ojhy8vhddg] { font-size: var(--fs-lg); }
    .co-tools[b-ojhy8vhddg] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .co-docs[b-ojhy8vhddg] { min-height: 0; }
}
/* /Components/Pages/Guests/RoomAdvances.razor.rz.scp.css */
/* RoomAdvances — list of advances (left), new advance / cancel (right). Same standard as Check-Out and Bill Other
   (claude/ui-standard.md); all values from wwwroot/css/theme.css. Base "bx-" rules copied from RoomBillOther (scoped CSS). */

.bx[b-tss3zy2uxl] { color: var(--rms-text); font-size: var(--fs-base); container-type: inline-size; container-name: bx; }

.bx-page[b-tss3zy2uxl] {
    max-width: 1500px; margin: 0 auto;
    height: calc(100dvh - var(--bx-offset, 120px)); min-height: 540px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: auto minmax(0, 1.6fr) minmax(150px, 1fr);
    grid-template-areas: "head head" "chart edit" "log log";
    gap: 10px;
}
.bx-head[b-tss3zy2uxl]  { grid-area: head; }
.bx-chart[b-tss3zy2uxl] { grid-area: chart; }
.bx-edit[b-tss3zy2uxl]  { grid-area: edit; overflow: hidden; gap: 7px; }
/* pane 2 = title + type switch (fixed) / form (scrolls only if the screen is too short) / Submit (fixed footer) */
.bx-form[b-tss3zy2uxl] { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; padding: 1px 2px 2px 1px; }
.bx-log[b-tss3zy2uxl]   { grid-area: log; }

.bx-card[b-tss3zy2uxl] {
    min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px;
    padding: 10px 14px;
    background: var(--rms-surface); border: 1px solid var(--rms-border);
    border-radius: var(--rms-r-lg); box-shadow: var(--rms-shadow-sm);
}
.bx-chip[b-tss3zy2uxl] { padding: 1px 8px; border-radius: var(--rms-r-pill); background: var(--rms-gray-200); color: var(--rms-text-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; }
.bx-chip-guest[b-tss3zy2uxl] { background: var(--rms-primary-soft); color: var(--rms-primary-text); }
.bx-chip-net[b-tss3zy2uxl] { background: var(--rms-success-bg); color: var(--rms-success-dark); border: 1px solid var(--rms-success-border); font-variant-numeric: tabular-nums; }
.bx-muted[b-tss3zy2uxl] { color: var(--rms-text-muted); font-weight: var(--fw-normal); }

/* ---------- header (same as Check-Out / Bill Chart) ---------- */
.bx-head[b-tss3zy2uxl] { flex-direction: row; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.bx-roomtile[b-tss3zy2uxl] { flex: 0 0 auto; min-width: 52px; padding: 0 6px; box-sizing: border-box; height: 44px; border-radius: var(--rms-r-md); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; background: var(--st2); color: #FFFFFF; }
.bx-roomtile span[b-tss3zy2uxl] { font-size: 9px; font-weight: var(--fw-bold); letter-spacing: .12em; opacity: .85; }
.bx-roomtile strong[b-tss3zy2uxl] { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin-top: 2px; }
.bx-head-text[b-tss3zy2uxl] { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bx-head-text h1[b-tss3zy2uxl] { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-chips[b-tss3zy2uxl] { display: flex; flex-wrap: wrap; gap: 4px; }
.bx-grn[b-tss3zy2uxl] { height: var(--h-control); display: inline-flex; align-items: center; padding: 0 14px; border-radius: var(--rms-r-md); background: var(--rms-danger); color: #FFFFFF; font-weight: var(--fw-bold); letter-spacing: .03em; font-variant-numeric: tabular-nums; }

/* ---------- section titles ---------- */
.bx-ttlrow[b-tss3zy2uxl] { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--rms-border); }
.bx-ttl[b-tss3zy2uxl] { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--fs-base); font-weight: var(--fw-bold); letter-spacing: .03em; text-transform: uppercase; }
.bx-num[b-tss3zy2uxl] { width: 20px; height: 20px; border-radius: var(--rms-r-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--rms-navy); color: #FFFFFF; font-size: var(--fs-xs); }
.bx-sub[b-tss3zy2uxl] { font-size: var(--fs-sm); color: var(--rms-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- buttons & inputs ---------- */
.bx-btn[b-tss3zy2uxl] {
    height: var(--h-control); padding: 0 14px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid var(--rms-border-strong); border-radius: var(--rms-r-md);
    background: var(--rms-surface); color: var(--rms-text);
    font: inherit; font-size: var(--fs-base); font-weight: var(--fw-medium); white-space: nowrap; cursor: pointer;
}
.bx-btn:hover:not(:disabled)[b-tss3zy2uxl] { background: var(--rms-surface-2); }
.bx-btn:disabled[b-tss3zy2uxl] { opacity: .5; cursor: default; }
.bx-btn-navy[b-tss3zy2uxl] { border: 0; background: var(--rms-navy); color: #FFFFFF; font-weight: var(--fw-bold); }
.bx-btn-navy:hover:not(:disabled)[b-tss3zy2uxl] { background: var(--rms-navy-hover); }
.bx-btn-go[b-tss3zy2uxl] { border: 0; background: var(--rms-success); color: #FFFFFF; font-weight: var(--fw-bold); }
.bx-btn-go:hover:not(:disabled)[b-tss3zy2uxl] { background: var(--rms-success-dark); }

.bx-input[b-tss3zy2uxl], .bx-select[b-tss3zy2uxl] {
    width: 100%; box-sizing: border-box; height: var(--h-control); min-width: 0; padding: 0 10px;
    border: 1px solid var(--rms-border-strong); border-radius: var(--rms-r-md);
    background: var(--rms-surface); color: var(--rms-text); font: inherit; font-size: var(--fs-base);
}
.bx-input:focus[b-tss3zy2uxl], .bx-select:focus[b-tss3zy2uxl] { outline: none; border-color: var(--rms-primary); box-shadow: var(--rms-focus); }
.bx-input[readonly][b-tss3zy2uxl] { background: var(--rms-surface-2); color: var(--rms-text-2); }
.bx-input-num[b-tss3zy2uxl] { text-align: right; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.bx-input-bad[b-tss3zy2uxl] { border-color: var(--rms-danger); }

/* ---------- 1. bill chart (click a value to edit it) ---------- */
.bx-table-wrap[b-tss3zy2uxl] { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--rms-border); border-radius: var(--rms-r-md); }
.bx-table[b-tss3zy2uxl] { width: 100%; min-width: 640px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.bx-table th[b-tss3zy2uxl] {
    position: sticky; top: 0; z-index: 2; padding: 6px 8px; text-align: left; white-space: nowrap;
    font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase;
    color: var(--rms-text-2); background: var(--rms-surface-2); border-bottom: 1px solid var(--rms-border);
}
.bx-table td[b-tss3zy2uxl] { padding: 3px 8px; height: 30px; font-size: var(--fs-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--rms-border); }
.bx-table .r[b-tss3zy2uxl] { text-align: right; } .bx-table .c[b-tss3zy2uxl] { text-align: center; }
.bx-table tr.bx-row-sel td[b-tss3zy2uxl] { background: var(--rms-primary-soft); }
.bx-table tr.bx-row-extra td[b-tss3zy2uxl] { background: var(--rms-warning-soft); }
.w-sln[b-tss3zy2uxl] { width: 30px; } .w-date[b-tss3zy2uxl] { width: 128px; } .w-val[b-tss3zy2uxl] { width: 92px; }

/* the three editable values: look like buttons, keyboard reachable */
.bx-cellbtn[b-tss3zy2uxl] {
    width: 100%; height: 24px; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: flex-end;
    border: 1px solid var(--rms-border); border-radius: var(--rms-r-sm);
    background: var(--rms-surface); color: var(--rms-text);
    font: inherit; font-size: var(--fs-s); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; cursor: pointer;
}
.bx-cellbtn:hover[b-tss3zy2uxl] { border-color: var(--rms-primary-border); background: var(--rms-primary-soft); }
.bx-cellbtn:focus-visible[b-tss3zy2uxl] { outline: none; box-shadow: var(--rms-focus); }
.bx-cellbtn-start[b-tss3zy2uxl] { border-left: 3px solid var(--rms-primary); }               /* a change starts in this period */
.bx-cellbtn-sel[b-tss3zy2uxl] { border: 2px solid var(--rms-accent); background: #FFF8E6; font-weight: var(--fw-bold); }
.bx-legend[b-tss3zy2uxl] { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-sm); color: var(--rms-text-2); }
.bx-legend i[b-tss3zy2uxl] { display: inline-block; width: 12px; height: 12px; margin-right: 5px; vertical-align: -2px; border-radius: 3px; border: 1px solid var(--rms-border); }
.bx-legend .lg-start[b-tss3zy2uxl] { border-left: 3px solid var(--rms-primary); }
.bx-legend .lg-sel[b-tss3zy2uxl] { border: 2px solid var(--rms-accent); background: #FFF8E6; }

/* ---------- 2. add / edit ---------- */
.bx-edit .bx-ttlrow[b-tss3zy2uxl] { border-bottom: 0; padding-bottom: 0; }
.bx-types[b-tss3zy2uxl] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 3px; gap: 3px; border-radius: var(--rms-r-md); background: var(--rms-surface-2); border: 1px solid var(--rms-border); }
.bx-type[b-tss3zy2uxl] { height: 30px; border: 0; border-radius: var(--rms-r-sm); background: none; font: inherit; font-size: var(--fs-s); font-weight: var(--fw-medium); color: var(--rms-text-2); cursor: pointer; }
.bx-type-on[b-tss3zy2uxl] { background: var(--rms-navy); color: #FFFFFF; font-weight: var(--fw-bold); }
.bx-field[b-tss3zy2uxl] { display: flex; flex-direction: column; gap: 3px; }
.bx-field > span[b-tss3zy2uxl] { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--rms-text-2); }
.bx-field small[b-tss3zy2uxl] { font-size: var(--fs-xs); color: var(--rms-text-muted); }
.bx-row2[b-tss3zy2uxl] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.bx-impact[b-tss3zy2uxl] {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    padding: 6px 10px; border-radius: var(--rms-r-md); background: var(--rms-surface-2); border: 1px solid var(--rms-border);
    font-size: var(--fs-s); font-variant-numeric: tabular-nums;
}
.bx-impact strong[b-tss3zy2uxl] { font-size: var(--fs-md); }
.bx-up[b-tss3zy2uxl] { color: var(--rms-danger-dark); font-weight: var(--fw-bold); }
.bx-down[b-tss3zy2uxl] { color: var(--rms-success-dark); font-weight: var(--fw-bold); }
.bx-submit[b-tss3zy2uxl] { flex: 0 0 auto; width: 100%; height: var(--h-control-lg); }
.bx-msg[b-tss3zy2uxl] {
    margin: 0; padding: 4px 4px 4px 10px; flex: 0 0 auto;
    display: flex; align-items: center; gap: 6px;
    border-radius: var(--rms-r-sm); font-size: var(--fs-s); line-height: 1.3;
}
.bx-msg > span[b-tss3zy2uxl] { flex: 1 1 auto; min-width: 0; }
.bx-msg-x[b-tss3zy2uxl] { flex: 0 0 auto; width: 22px; height: 22px; border: 0; border-radius: 4px; background: none; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; opacity: .7; }
.bx-msg-x:hover[b-tss3zy2uxl] { opacity: 1; background: rgba(0,0,0,.06); }
.bx-msg-bad[b-tss3zy2uxl] { background: var(--rms-danger-soft); color: var(--rms-danger-text); border: 1px solid var(--rms-danger-border); }
.bx-msg-ok[b-tss3zy2uxl] { background: var(--rms-success-bg); color: var(--rms-success-text); border: 1px solid var(--rms-success-border); }

/* ---------- 3. edit log ---------- */
.bx-log-table[b-tss3zy2uxl] { min-width: 720px; }
.bx-log-table td[b-tss3zy2uxl] { height: auto; padding: 5px 8px; white-space: normal; overflow: visible; text-overflow: clip; vertical-align: top; line-height: 1.35; }
.bx-log-table td.nw[b-tss3zy2uxl] { white-space: nowrap; }
.bx-type-tag[b-tss3zy2uxl] { display: inline-block; padding: 1px 8px; border-radius: var(--rms-r-pill); font-size: var(--fs-sm); font-weight: var(--fw-bold); white-space: nowrap; }
.t-tariff[b-tss3zy2uxl] { background: var(--rms-primary-soft); color: var(--rms-primary-text); }
.t-bed[b-tss3zy2uxl]    { background: #EDE7FB; color: #3D2A7A; }
.t-disc[b-tss3zy2uxl]   { background: var(--rms-success-soft); color: var(--rms-success-text); }
.t-other[b-tss3zy2uxl]  { background: var(--rms-gray-200); color: var(--rms-text-2); }
.w-type[b-tss3zy2uxl] { width: 124px; } .w-time[b-tss3zy2uxl] { width: 104px; } .w-user[b-tss3zy2uxl] { width: 150px; } .w-shift[b-tss3zy2uxl] { width: 132px; }
.bx-log-table small[b-tss3zy2uxl] { display: block; font-size: var(--fs-xs); color: var(--rms-text-muted); }

/* ---------- shorter screens ---------- */
@media (max-height: 740px) {
    .bx-page[b-tss3zy2uxl] { gap: 7px; grid-template-rows: auto minmax(312px, 1.7fr) minmax(130px, 1fr); }
    .bx-card[b-tss3zy2uxl] { padding: 8px 12px; gap: 6px; }
    .bx-btn[b-tss3zy2uxl] { height: 32px; }
    .bx-input[b-tss3zy2uxl], .bx-select[b-tss3zy2uxl] { height: 32px; }
    .bx-submit[b-tss3zy2uxl] { height: 36px; }
    .bx-roomtile[b-tss3zy2uxl] { height: 38px; }
    .bx-table td[b-tss3zy2uxl] { height: 28px; }
    .bx-field small[b-tss3zy2uxl] { display: none; }
    .bx-types[b-tss3zy2uxl] { padding: 2px; } .bx-type[b-tss3zy2uxl] { height: 28px; }
}

/* ---------- narrower: editor under the chart, page scrolls ---------- */
@container bx (max-width: 980px) {
    .bx-page[b-tss3zy2uxl] { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "chart" "edit" "log"; }
    .bx-table-wrap[b-tss3zy2uxl] { max-height: 50vh; }
}
@container bx (max-width: 640px) {
    .bx-head-text h1[b-tss3zy2uxl] { font-size: var(--fs-lg); white-space: normal; }
}

/* ---------- empty states, messages ---------- */
.bx-placeholder[b-tss3zy2uxl] {
    flex: 1; min-height: 80px;
    display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--sp-3);
    border: 1px dashed var(--rms-border-strong); border-radius: var(--rms-r-md);
    color: var(--rms-text-muted); font-size: var(--fs-s);
}
.bx-placeholder-sm[b-tss3zy2uxl] { min-height: 60px; }
.bx-format[b-tss3zy2uxl] { margin-top: -3px; font-size: var(--fs-xs); line-height: 1.3; color: var(--rms-text-muted); }
@media (max-height: 900px) {                                    /* laptop: hints move into the boxes' tooltips */
    .bx-field small[b-tss3zy2uxl], .bx-format[b-tss3zy2uxl] { display: none; }
    .bx-edit .bx-field[b-tss3zy2uxl] { gap: 2px; }
}

/* ---------- notices (same as Check-Out) ---------- */
.bx-center[b-tss3zy2uxl] { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-6) var(--sp-4); color: var(--rms-text-2); }
.bx-notice[b-tss3zy2uxl] {
    width: 100%; max-width: 520px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
    padding: var(--sp-6); text-align: center;
    background: var(--rms-surface); border: 1px solid var(--rms-border); border-radius: var(--rms-r-lg); box-shadow: var(--rms-shadow-md);
}
.bx-notice h1[b-tss3zy2uxl] { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); }
.bx-notice p[b-tss3zy2uxl] { margin: 0; line-height: 1.55; color: var(--rms-text-2); }
.bx-notice-icon[b-tss3zy2uxl] { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.bx-amber[b-tss3zy2uxl] { background: var(--rms-warning-soft); color: var(--rms-warning-text); }
.bx-red[b-tss3zy2uxl]   { background: var(--rms-danger-soft); color: var(--rms-danger-dark); }
.bx-notice-actions[b-tss3zy2uxl] { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-1); }
.bx-notice .bx-btn[b-tss3zy2uxl] { height: var(--h-control-lg); }
.bx-spinner[b-tss3zy2uxl] { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--rms-border-strong); border-top-color: var(--rms-navy); animation: bx-rot-b-tss3zy2uxl .8s linear infinite; }
.bx-spinner-sm[b-tss3zy2uxl] { width: 16px; height: 16px; border-width: 2px; border-color: rgba(255,255,255,.5); border-top-color: #FFFFFF; }
@keyframes bx-rot-b-tss3zy2uxl { to { transform: rotate(360deg); } }

/* one-line error at the top of pane 2 (full text in the tooltip) */
.bx-msg-1 > span[b-tss3zy2uxl] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* "Saved · Net ₹ … → ₹ …" shown in the edit-log title, next to the new entry — takes no space in pane 2 */
.bx-logright[b-tss3zy2uxl] { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bx-saved[b-tss3zy2uxl] {
    display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 520px;
    padding: 1px 2px 1px 10px; border-radius: var(--rms-r-pill);
    background: var(--rms-success-bg); color: var(--rms-success-dark); border: 1px solid var(--rms-success-border);
    font-size: var(--fs-s); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    animation: bx-pop-b-tss3zy2uxl .25s ease-out;
}
.bx-saved .bx-msg-x[b-tss3zy2uxl] { width: 20px; height: 20px; font-size: 14px; }
@keyframes bx-pop-b-tss3zy2uxl { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }


/* ===================== Room Advances ===================== */
.bx-page.ra-page[b-tss3zy2uxl] {
    grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "head head" "kpis kpis" "chart edit";
}
.ra-kpis[b-tss3zy2uxl] { grid-area: kpis; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ra-kpi[b-tss3zy2uxl] { gap: 2px; padding: 8px 14px; }
.ra-kpi span[b-tss3zy2uxl] { font-size: var(--fs-sm); color: var(--rms-text-muted); }
.ra-kpi strong[b-tss3zy2uxl] { font-size: var(--fs-lg); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.ra-green[b-tss3zy2uxl] { color: var(--rms-success-dark); }
.ra-red[b-tss3zy2uxl] { color: var(--rms-danger-dark); }

/* 1. list */
.ra-list .bx-table[b-tss3zy2uxl] { min-width: 0; }                              /* fit the panel - no sideways scroll */
.ra-list .bx-table-wrap[b-tss3zy2uxl] { overflow-x: hidden; overflow-y: auto; }
.ra-list .bx-table th[b-tss3zy2uxl], .ra-list .bx-table td[b-tss3zy2uxl] { padding-left: 6px; padding-right: 6px; }
.ra-list .bx-table td[b-tss3zy2uxl] { height: 34px; }
.w-when[b-tss3zy2uxl] { width: 94px; } .w-vno[b-tss3zy2uxl] { width: 132px; } .w-amt[b-tss3zy2uxl] { width: 86px; } .w-usr[b-tss3zy2uxl] { width: 108px; } .w-st[b-tss3zy2uxl] { width: 164px; }
.ra-vno[b-tss3zy2uxl] { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.ra-when small[b-tss3zy2uxl], .ra-usr small[b-tss3zy2uxl] { display: block; font-size: var(--fs-xs); color: var(--rms-text-muted); }
.ra-ref[b-tss3zy2uxl] { color: var(--rms-text-2); }
.ra-amt[b-tss3zy2uxl] { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.ra-list tfoot td[b-tss3zy2uxl] {
    position: sticky; bottom: 0; z-index: 2; height: 32px; padding: 3px 8px;
    background: var(--rms-surface-2); border-top: 2px solid var(--rms-border); font-weight: var(--fw-bold);
}
.ra-total[b-tss3zy2uxl] { color: var(--rms-success-dark); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }

.ra-row-cancel td[b-tss3zy2uxl] { color: var(--rms-text-disabled); background: var(--rms-surface-2); }
.ra-row-cancel .ra-vno[b-tss3zy2uxl], .ra-row-cancel .ra-amt[b-tss3zy2uxl] { text-decoration: line-through; text-decoration-color: var(--rms-danger); }
.ra-row-sel td[b-tss3zy2uxl] { background: var(--rms-danger-soft); }
.ra-tag-cancel[b-tss3zy2uxl] { display: inline-block; padding: 1px 8px; border-radius: var(--rms-r-pill); font-size: var(--fs-xs); font-weight: var(--fw-bold); background: var(--rms-danger-soft); color: var(--rms-danger-dark); }
.ra-by[b-tss3zy2uxl] { display: block; font-size: var(--fs-xs); color: var(--rms-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ra-cancel-btn[b-tss3zy2uxl] {
    height: 26px; padding: 0 10px; display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid var(--rms-danger-border); border-radius: var(--rms-r-sm);
    background: var(--rms-surface); color: var(--rms-danger-dark); font: inherit; font-size: var(--fs-s); font-weight: var(--fw-medium); cursor: pointer;
}
.ra-cancel-btn:hover:not(:disabled)[b-tss3zy2uxl] { background: var(--rms-danger-soft); }
.ra-cancel-btn:disabled[b-tss3zy2uxl] { opacity: .5; cursor: default; }

/* 2. new advance */
.ra-grid[b-tss3zy2uxl] { display: grid; grid-template-columns: 96px minmax(0, 1fr) 100px; gap: 6px 8px; align-items: center; }
.ra-gh[b-tss3zy2uxl] { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--rms-text-2); }
.ra-gh.r[b-tss3zy2uxl] { text-align: right; }
.ra-mode[b-tss3zy2uxl] { font-weight: var(--fw-bold); font-size: var(--fs-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ra-entering[b-tss3zy2uxl] { flex: 0 0 auto; display: flex; align-items: baseline; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--rms-border); }
.ra-entering span[b-tss3zy2uxl] { font-size: var(--fs-s); color: var(--rms-text-2); }
.ra-entering strong[b-tss3zy2uxl] { font-size: var(--fs-xl, 22px); color: var(--rms-primary); font-variant-numeric: tabular-nums; }
.ra-actions[b-tss3zy2uxl] { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; flex: 0 0 auto; }
.ra-actions .bx-btn[b-tss3zy2uxl] { height: var(--h-control-lg); }
.bx-btn-red[b-tss3zy2uxl] { border: 0; background: var(--rms-danger); color: #FFFFFF; font-weight: var(--fw-bold); }
.bx-btn-red:hover:not(:disabled)[b-tss3zy2uxl] { background: var(--rms-danger-dark); }
.ra-void[b-tss3zy2uxl] { padding: 10px 12px; border-radius: var(--rms-r-md); border: 1px solid var(--rms-danger-border); background: var(--rms-danger-soft); color: var(--rms-danger-text); display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: var(--fs-s); }
.ra-void b[b-tss3zy2uxl] { font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.ra-warn[b-tss3zy2uxl] { background: var(--rms-warning-soft); color: var(--rms-warning-text); border: 1px solid var(--rms-warning-border); }

/* confirm dialog */
.ra-overlay[b-tss3zy2uxl] { position: fixed; inset: 0; z-index: 1000; background: rgba(15, 26, 51, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ra-dialog[b-tss3zy2uxl] {
    width: 100%; max-width: 440px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: 20px;
    background: var(--rms-surface); border-radius: var(--rms-r-lg); box-shadow: var(--rms-shadow-md);
}
.ra-dialog h2[b-tss3zy2uxl] { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); }
.ra-dlg-lines[b-tss3zy2uxl] { display: flex; flex-direction: column; gap: 6px; font-variant-numeric: tabular-nums; }
.ra-dlg-lines > div[b-tss3zy2uxl] { display: flex; justify-content: space-between; gap: 12px; }
.ra-dlg-lines small[b-tss3zy2uxl] { color: var(--rms-text-muted); }
.ra-dlg-total[b-tss3zy2uxl] { border-top: 1px solid var(--rms-border); padding-top: 6px; font-weight: var(--fw-bold); }
.ra-dlg-note[b-tss3zy2uxl] { margin: 0; font-size: var(--fs-sm); color: var(--rms-text-muted); line-height: 1.4; }
.ra-dlg-actions[b-tss3zy2uxl] { display: flex; justify-content: flex-end; gap: 8px; }
.ra-dlg-actions .bx-btn[b-tss3zy2uxl] { height: var(--h-control-lg); }

.ra-spin[b-tss3zy2uxl] { animation: bx-rot-b-tss3zy2uxl .8s linear infinite; }

/* narrower page: list above, new advance below (page scrolls) */
@container bx (max-width: 980px) {
    .bx-page.ra-page[b-tss3zy2uxl] { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "kpis" "chart" "edit"; }
    .ra-kpis[b-tss3zy2uxl] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* settlement split of one voucher: Cash 200 · Card 300 (slip) · GPay 500 (UTR) */
.ra-list .bx-table td.ra-split[b-tss3zy2uxl] { white-space: normal; overflow: visible; height: auto; padding-top: 4px; padding-bottom: 4px; }
.ra-part[b-tss3zy2uxl] {
    display: inline-flex; align-items: baseline; gap: 4px; margin: 1px 4px 1px 0; padding: 1px 8px;
    border-radius: var(--rms-r-pill); background: var(--rms-gray-200); color: var(--rms-text-2);
    font-size: var(--fs-sm); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ra-part b[b-tss3zy2uxl] { color: var(--rms-text); font-weight: var(--fw-bold); }
.ra-part small[b-tss3zy2uxl] { color: var(--rms-text-muted); font-size: var(--fs-xs); }
.ra-row-cancel .ra-part[b-tss3zy2uxl] { text-decoration: line-through; text-decoration-color: var(--rms-danger); }

/* print / PDF */
.ra-btn-print[b-tss3zy2uxl] { border-color: var(--rms-primary-border, #9EC5FE); color: var(--rms-primary-text, #0B4FB3); }
.ra-print-btn[b-tss3zy2uxl] {
    height: 26px; padding: 0 8px; margin-right: 4px; display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
    border: 1px solid var(--rms-primary-border, #9EC5FE); border-radius: var(--rms-r-sm);
    background: var(--rms-surface); color: var(--rms-primary-text, #0B4FB3); font: inherit; font-size: var(--fs-s); font-weight: var(--fw-medium); cursor: pointer;
}
.ra-print-btn:hover:not(:disabled)[b-tss3zy2uxl] { background: var(--rms-primary-soft); }
.ra-print-btn:disabled[b-tss3zy2uxl] { opacity: .5; cursor: default; }
.ra-row-cancel .ra-print-btn[b-tss3zy2uxl] { opacity: 1; }
.ra-list .bx-table td:last-child[b-tss3zy2uxl] { white-space: nowrap; overflow: visible; }
.ra-list .bx-table td:last-child .ra-tag-cancel[b-tss3zy2uxl] { vertical-align: middle; }
.ra-list .bx-table td:last-child .ra-by[b-tss3zy2uxl] { display: block; margin-top: 2px; }
.ra-after[b-tss3zy2uxl] { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; font-size: var(--fs-s); color: var(--rms-text-2); cursor: pointer; }
.ra-after input[b-tss3zy2uxl] { width: 16px; height: 16px; margin: 0; }
/* /Components/Pages/Guests/RoomBillCharges.razor.rz.scp.css */
/* RoomBillCharges — click a Tariff / Extra bed / Discount cell, change it from that period, see the edit log.
   Same standard as Check-Out and Bill Chart (claude/ui-standard.md); all values from wwwroot/css/theme.css. */

.bx[b-iuguqz5mhd] { color: var(--rms-text); font-size: var(--fs-base); container-type: inline-size; container-name: bx; }

.bx-page[b-iuguqz5mhd] {
    max-width: 1500px; margin: 0 auto;
    height: calc(100dvh - var(--bx-offset, 120px)); min-height: 540px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: auto minmax(0, 1.6fr) minmax(150px, 1fr);
    grid-template-areas: "head head" "chart edit" "log log";
    gap: 10px;
}
.bx-head[b-iuguqz5mhd]  { grid-area: head; }
.bx-chart[b-iuguqz5mhd] { grid-area: chart; }
.bx-edit[b-iuguqz5mhd]  { grid-area: edit; overflow: hidden; gap: 7px; }
/* pane 2 = title + type switch (fixed) / form (scrolls only if the screen is too short) / Submit (fixed footer) */
.bx-form[b-iuguqz5mhd] { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; padding: 1px 2px 2px 1px; }
.bx-log[b-iuguqz5mhd]   { grid-area: log; }

.bx-card[b-iuguqz5mhd] {
    min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px;
    padding: 10px 14px;
    background: var(--rms-surface); border: 1px solid var(--rms-border);
    border-radius: var(--rms-r-lg); box-shadow: var(--rms-shadow-sm);
}
.bx-chip[b-iuguqz5mhd] { padding: 1px 8px; border-radius: var(--rms-r-pill); background: var(--rms-gray-200); color: var(--rms-text-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; }
.bx-chip-guest[b-iuguqz5mhd] { background: var(--rms-primary-soft); color: var(--rms-primary-text); }
.bx-chip-net[b-iuguqz5mhd] { background: var(--rms-success-bg); color: var(--rms-success-dark); border: 1px solid var(--rms-success-border); font-variant-numeric: tabular-nums; }
.bx-muted[b-iuguqz5mhd] { color: var(--rms-text-muted); font-weight: var(--fw-normal); }

/* ---------- header (same as Check-Out / Bill Chart) ---------- */
.bx-head[b-iuguqz5mhd] { flex-direction: row; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.bx-roomtile[b-iuguqz5mhd] { flex: 0 0 auto; min-width: 52px; padding: 0 6px; box-sizing: border-box; height: 44px; border-radius: var(--rms-r-md); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; background: var(--st2); color: #FFFFFF; }
.bx-roomtile span[b-iuguqz5mhd] { font-size: 9px; font-weight: var(--fw-bold); letter-spacing: .12em; opacity: .85; }
.bx-roomtile strong[b-iuguqz5mhd] { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin-top: 2px; }
.bx-head-text[b-iuguqz5mhd] { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bx-head-text h1[b-iuguqz5mhd] { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-chips[b-iuguqz5mhd] { display: flex; flex-wrap: wrap; gap: 4px; }
.bx-grn[b-iuguqz5mhd] { height: var(--h-control); display: inline-flex; align-items: center; padding: 0 14px; border-radius: var(--rms-r-md); background: var(--rms-danger); color: #FFFFFF; font-weight: var(--fw-bold); letter-spacing: .03em; font-variant-numeric: tabular-nums; }

/* ---------- section titles ---------- */
.bx-ttlrow[b-iuguqz5mhd] { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--rms-border); }
.bx-ttl[b-iuguqz5mhd] { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--fs-base); font-weight: var(--fw-bold); letter-spacing: .03em; text-transform: uppercase; }
.bx-num[b-iuguqz5mhd] { width: 20px; height: 20px; border-radius: var(--rms-r-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--rms-navy); color: #FFFFFF; font-size: var(--fs-xs); }
.bx-sub[b-iuguqz5mhd] { font-size: var(--fs-sm); color: var(--rms-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- buttons & inputs ---------- */
.bx-btn[b-iuguqz5mhd] {
    height: var(--h-control); padding: 0 14px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid var(--rms-border-strong); border-radius: var(--rms-r-md);
    background: var(--rms-surface); color: var(--rms-text);
    font: inherit; font-size: var(--fs-base); font-weight: var(--fw-medium); white-space: nowrap; cursor: pointer;
}
.bx-btn:hover:not(:disabled)[b-iuguqz5mhd] { background: var(--rms-surface-2); }
.bx-btn:disabled[b-iuguqz5mhd] { opacity: .5; cursor: default; }
.bx-btn-navy[b-iuguqz5mhd] { border: 0; background: var(--rms-navy); color: #FFFFFF; font-weight: var(--fw-bold); }
.bx-btn-navy:hover:not(:disabled)[b-iuguqz5mhd] { background: var(--rms-navy-hover); }
.bx-btn-go[b-iuguqz5mhd] { border: 0; background: var(--rms-success); color: #FFFFFF; font-weight: var(--fw-bold); }
.bx-btn-go:hover:not(:disabled)[b-iuguqz5mhd] { background: var(--rms-success-dark); }

.bx-input[b-iuguqz5mhd], .bx-select[b-iuguqz5mhd] {
    width: 100%; box-sizing: border-box; height: var(--h-control); min-width: 0; padding: 0 10px;
    border: 1px solid var(--rms-border-strong); border-radius: var(--rms-r-md);
    background: var(--rms-surface); color: var(--rms-text); font: inherit; font-size: var(--fs-base);
}
.bx-input:focus[b-iuguqz5mhd], .bx-select:focus[b-iuguqz5mhd] { outline: none; border-color: var(--rms-primary); box-shadow: var(--rms-focus); }
.bx-input[readonly][b-iuguqz5mhd] { background: var(--rms-surface-2); color: var(--rms-text-2); }
.bx-input-num[b-iuguqz5mhd] { text-align: right; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.bx-input-bad[b-iuguqz5mhd] { border-color: var(--rms-danger); }

/* ---------- 1. bill chart (click a value to edit it) ---------- */
.bx-table-wrap[b-iuguqz5mhd] { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--rms-border); border-radius: var(--rms-r-md); }
.bx-table[b-iuguqz5mhd] { width: 100%; min-width: 640px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.bx-table th[b-iuguqz5mhd] {
    position: sticky; top: 0; z-index: 2; padding: 6px 8px; text-align: left; white-space: nowrap;
    font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase;
    color: var(--rms-text-2); background: var(--rms-surface-2); border-bottom: 1px solid var(--rms-border);
}
.bx-table td[b-iuguqz5mhd] { padding: 3px 8px; height: 30px; font-size: var(--fs-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--rms-border); }
.bx-table .r[b-iuguqz5mhd] { text-align: right; } .bx-table .c[b-iuguqz5mhd] { text-align: center; }
.bx-table tr.bx-row-sel td[b-iuguqz5mhd] { background: var(--rms-primary-soft); }
.bx-table tr.bx-row-extra td[b-iuguqz5mhd] { background: var(--rms-warning-soft); }
.w-sln[b-iuguqz5mhd] { width: 30px; } .w-date[b-iuguqz5mhd] { width: 128px; } .w-val[b-iuguqz5mhd] { width: 92px; }

/* the three editable values: look like buttons, keyboard reachable */
.bx-cellbtn[b-iuguqz5mhd] {
    width: 100%; height: 24px; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: flex-end;
    border: 1px solid var(--rms-border); border-radius: var(--rms-r-sm);
    background: var(--rms-surface); color: var(--rms-text);
    font: inherit; font-size: var(--fs-s); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; cursor: pointer;
}
.bx-cellbtn:hover[b-iuguqz5mhd] { border-color: var(--rms-primary-border); background: var(--rms-primary-soft); }
.bx-cellbtn:focus-visible[b-iuguqz5mhd] { outline: none; box-shadow: var(--rms-focus); }
.bx-cellbtn-start[b-iuguqz5mhd] { border-left: 3px solid var(--rms-primary); }               /* a change starts in this period */
.bx-cellbtn-sel[b-iuguqz5mhd] { border: 2px solid var(--rms-accent); background: #FFF8E6; font-weight: var(--fw-bold); }
.bx-legend[b-iuguqz5mhd] { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-sm); color: var(--rms-text-2); }
.bx-legend i[b-iuguqz5mhd] { display: inline-block; width: 12px; height: 12px; margin-right: 5px; vertical-align: -2px; border-radius: 3px; border: 1px solid var(--rms-border); }
.bx-legend .lg-start[b-iuguqz5mhd] { border-left: 3px solid var(--rms-primary); }
.bx-legend .lg-sel[b-iuguqz5mhd] { border: 2px solid var(--rms-accent); background: #FFF8E6; }

/* ---------- 2. add / edit ---------- */
.bx-edit .bx-ttlrow[b-iuguqz5mhd] { border-bottom: 0; padding-bottom: 0; }
.bx-types[b-iuguqz5mhd] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 3px; gap: 3px; border-radius: var(--rms-r-md); background: var(--rms-surface-2); border: 1px solid var(--rms-border); }
.bx-type[b-iuguqz5mhd] { height: 30px; border: 0; border-radius: var(--rms-r-sm); background: none; font: inherit; font-size: var(--fs-s); font-weight: var(--fw-medium); color: var(--rms-text-2); cursor: pointer; }
.bx-type-on[b-iuguqz5mhd] { background: var(--rms-navy); color: #FFFFFF; font-weight: var(--fw-bold); }
.bx-field[b-iuguqz5mhd] { display: flex; flex-direction: column; gap: 3px; }
.bx-field > span[b-iuguqz5mhd] { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--rms-text-2); }
.bx-field small[b-iuguqz5mhd] { font-size: var(--fs-xs); color: var(--rms-text-muted); }
.bx-row2[b-iuguqz5mhd] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.bx-impact[b-iuguqz5mhd] {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    padding: 6px 10px; border-radius: var(--rms-r-md); background: var(--rms-surface-2); border: 1px solid var(--rms-border);
    font-size: var(--fs-s); font-variant-numeric: tabular-nums;
}
.bx-impact strong[b-iuguqz5mhd] { font-size: var(--fs-md); }
.bx-up[b-iuguqz5mhd] { color: var(--rms-danger-dark); font-weight: var(--fw-bold); }
.bx-down[b-iuguqz5mhd] { color: var(--rms-success-dark); font-weight: var(--fw-bold); }
.bx-submit[b-iuguqz5mhd] { flex: 0 0 auto; width: 100%; height: var(--h-control-lg); }
.bx-msg[b-iuguqz5mhd] {
    margin: 0; padding: 4px 4px 4px 10px; flex: 0 0 auto;
    display: flex; align-items: center; gap: 6px;
    border-radius: var(--rms-r-sm); font-size: var(--fs-s); line-height: 1.3;
}
.bx-msg > span[b-iuguqz5mhd] { flex: 1 1 auto; min-width: 0; }
.bx-msg-x[b-iuguqz5mhd] { flex: 0 0 auto; width: 22px; height: 22px; border: 0; border-radius: 4px; background: none; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; opacity: .7; }
.bx-msg-x:hover[b-iuguqz5mhd] { opacity: 1; background: rgba(0,0,0,.06); }
.bx-msg-bad[b-iuguqz5mhd] { background: var(--rms-danger-soft); color: var(--rms-danger-text); border: 1px solid var(--rms-danger-border); }
.bx-msg-ok[b-iuguqz5mhd] { background: var(--rms-success-bg); color: var(--rms-success-text); border: 1px solid var(--rms-success-border); }

/* ---------- 3. edit log ---------- */
.bx-log-table[b-iuguqz5mhd] { min-width: 720px; }
.bx-log-table td[b-iuguqz5mhd] { height: auto; padding: 5px 8px; white-space: normal; overflow: visible; text-overflow: clip; vertical-align: top; line-height: 1.35; }
.bx-log-table td.nw[b-iuguqz5mhd] { white-space: nowrap; }
.bx-type-tag[b-iuguqz5mhd] { display: inline-block; padding: 1px 8px; border-radius: var(--rms-r-pill); font-size: var(--fs-sm); font-weight: var(--fw-bold); white-space: nowrap; }
.t-tariff[b-iuguqz5mhd] { background: var(--rms-primary-soft); color: var(--rms-primary-text); }
.t-bed[b-iuguqz5mhd]    { background: #EDE7FB; color: #3D2A7A; }
.t-disc[b-iuguqz5mhd]   { background: var(--rms-success-soft); color: var(--rms-success-text); }
.t-other[b-iuguqz5mhd]  { background: var(--rms-gray-200); color: var(--rms-text-2); }
.w-type[b-iuguqz5mhd] { width: 124px; } .w-time[b-iuguqz5mhd] { width: 104px; } .w-user[b-iuguqz5mhd] { width: 150px; } .w-shift[b-iuguqz5mhd] { width: 132px; }
.bx-log-table small[b-iuguqz5mhd] { display: block; font-size: var(--fs-xs); color: var(--rms-text-muted); }

/* ---------- shorter screens ---------- */
@media (max-height: 740px) {
    .bx-page[b-iuguqz5mhd] { gap: 7px; grid-template-rows: auto minmax(312px, 1.7fr) minmax(130px, 1fr); }
    .bx-card[b-iuguqz5mhd] { padding: 8px 12px; gap: 6px; }
    .bx-btn[b-iuguqz5mhd] { height: 32px; }
    .bx-input[b-iuguqz5mhd], .bx-select[b-iuguqz5mhd] { height: 32px; }
    .bx-submit[b-iuguqz5mhd] { height: 36px; }
    .bx-roomtile[b-iuguqz5mhd] { height: 38px; }
    .bx-table td[b-iuguqz5mhd] { height: 28px; }
    .bx-field small[b-iuguqz5mhd] { display: none; }
    .bx-types[b-iuguqz5mhd] { padding: 2px; } .bx-type[b-iuguqz5mhd] { height: 28px; }
}

/* ---------- narrower: editor under the chart, page scrolls ---------- */
@container bx (max-width: 980px) {
    .bx-page[b-iuguqz5mhd] { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "chart" "edit" "log"; }
    .bx-table-wrap[b-iuguqz5mhd] { max-height: 50vh; }
}
@container bx (max-width: 640px) {
    .bx-head-text h1[b-iuguqz5mhd] { font-size: var(--fs-lg); white-space: normal; }
}

/* ---------- empty states, messages ---------- */
.bx-placeholder[b-iuguqz5mhd] {
    flex: 1; min-height: 80px;
    display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--sp-3);
    border: 1px dashed var(--rms-border-strong); border-radius: var(--rms-r-md);
    color: var(--rms-text-muted); font-size: var(--fs-s);
}
.bx-placeholder-sm[b-iuguqz5mhd] { min-height: 60px; }
.bx-format[b-iuguqz5mhd] { margin-top: -3px; font-size: var(--fs-xs); line-height: 1.3; color: var(--rms-text-muted); }
@media (max-height: 900px) {                                    /* laptop: hints move into the boxes' tooltips */
    .bx-field small[b-iuguqz5mhd], .bx-format[b-iuguqz5mhd] { display: none; }
    .bx-edit .bx-field[b-iuguqz5mhd] { gap: 2px; }
}

/* ---------- notices (same as Check-Out) ---------- */
.bx-center[b-iuguqz5mhd] { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-6) var(--sp-4); color: var(--rms-text-2); }
.bx-notice[b-iuguqz5mhd] {
    width: 100%; max-width: 520px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
    padding: var(--sp-6); text-align: center;
    background: var(--rms-surface); border: 1px solid var(--rms-border); border-radius: var(--rms-r-lg); box-shadow: var(--rms-shadow-md);
}
.bx-notice h1[b-iuguqz5mhd] { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); }
.bx-notice p[b-iuguqz5mhd] { margin: 0; line-height: 1.55; color: var(--rms-text-2); }
.bx-notice-icon[b-iuguqz5mhd] { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.bx-amber[b-iuguqz5mhd] { background: var(--rms-warning-soft); color: var(--rms-warning-text); }
.bx-red[b-iuguqz5mhd]   { background: var(--rms-danger-soft); color: var(--rms-danger-dark); }
.bx-notice-actions[b-iuguqz5mhd] { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-1); }
.bx-notice .bx-btn[b-iuguqz5mhd] { height: var(--h-control-lg); }
.bx-spinner[b-iuguqz5mhd] { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--rms-border-strong); border-top-color: var(--rms-navy); animation: bx-rot-b-iuguqz5mhd .8s linear infinite; }
.bx-spinner-sm[b-iuguqz5mhd] { width: 16px; height: 16px; border-width: 2px; border-color: rgba(255,255,255,.5); border-top-color: #FFFFFF; }
@keyframes bx-rot-b-iuguqz5mhd { to { transform: rotate(360deg); } }

/* one-line error at the top of pane 2 (full text in the tooltip) */
.bx-msg-1 > span[b-iuguqz5mhd] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* "Saved · Net ₹ … → ₹ …" shown in the edit-log title, next to the new entry — takes no space in pane 2 */
.bx-logright[b-iuguqz5mhd] { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bx-saved[b-iuguqz5mhd] {
    display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 520px;
    padding: 1px 2px 1px 10px; border-radius: var(--rms-r-pill);
    background: var(--rms-success-bg); color: var(--rms-success-dark); border: 1px solid var(--rms-success-border);
    font-size: var(--fs-s); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    animation: bx-pop-b-iuguqz5mhd .25s ease-out;
}
.bx-saved .bx-msg-x[b-iuguqz5mhd] { width: 20px; height: 20px; font-size: 14px; }
@keyframes bx-pop-b-iuguqz5mhd { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
/* /Components/Pages/Guests/RoomBillChart.razor.rz.scp.css */
/* RoomBillChart — same standard as Check-In / Check-Out (claude/ui-standard.md). All values from wwwroot/css/theme.css.
   The page itself never scrolls on a laptop screen: the chart table scrolls inside its card with a sticky header and totals. */

.bc[b-cf1k66j2uj] {
    color: var(--rms-text); font-size: var(--fs-base);
    container-type: inline-size;
    container-name: bc;
}

.bc-page[b-cf1k66j2uj] {
    max-width: 1500px; margin: 0 auto;
    height: calc(100dvh - var(--bc-offset, 120px));          /* fills the content area under the top bar */
    min-height: 420px;
    display: flex; flex-direction: column; gap: 10px;
    outline: none;
}

/* ---------- card ---------- */
.bc-card[b-cf1k66j2uj] {
    min-width: 0;
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px 16px;
    background: var(--rms-surface);
    border: 1px solid var(--rms-border);
    border-radius: var(--rms-r-lg);
    box-shadow: var(--rms-shadow-sm);
}

.bc-chip[b-cf1k66j2uj] {
    padding: 1px 8px; border-radius: var(--rms-r-pill);
    background: var(--rms-gray-200); color: var(--rms-text-2);
    font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap;
}
.bc-chip-guest[b-cf1k66j2uj] { background: var(--rms-primary-soft); color: var(--rms-primary-text); }
.bc-muted[b-cf1k66j2uj] { color: var(--rms-text-muted); }

/* ---------- header (same as Check-Out) ---------- */
.bc-head[b-cf1k66j2uj] { flex-direction: row; align-items: center; gap: var(--sp-4); flex-wrap: wrap; flex: 0 0 auto; }
.bc-roomtile[b-cf1k66j2uj] {
    flex: 0 0 auto; width: 52px; height: 44px; border-radius: var(--rms-r-md);
    display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
    background: var(--st2); color: #FFFFFF;
}
.bc-roomtile span[b-cf1k66j2uj] { font-size: 9px; font-weight: var(--fw-bold); letter-spacing: .12em; opacity: .85; }
.bc-roomtile strong[b-cf1k66j2uj] { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin-top: 2px; }
.bc-head-text[b-cf1k66j2uj] { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bc-head-text h1[b-cf1k66j2uj] {
    margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bc-chips[b-cf1k66j2uj] { display: flex; flex-wrap: wrap; gap: 4px; }
.bc-refreshed[b-cf1k66j2uj] { font-size: var(--fs-sm); color: var(--rms-text-muted); padding: 1px 2px; white-space: nowrap; }
.bc-refreshed strong[b-cf1k66j2uj] { color: var(--rms-text-2); font-variant-numeric: tabular-nums; }
.bc-grn[b-cf1k66j2uj] {
    height: var(--h-control); display: inline-flex; align-items: center; padding: 0 14px;
    border-radius: var(--rms-r-md); background: var(--rms-danger); color: #FFFFFF;
    font-size: var(--fs-base); font-weight: var(--fw-bold); letter-spacing: .03em; font-variant-numeric: tabular-nums;
}

/* ---------- buttons ---------- */
.bc-btn[b-cf1k66j2uj] {
    position: relative;
    height: var(--h-control); padding: 0 16px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid var(--rms-border-strong); border-radius: var(--rms-r-md);
    background: var(--rms-surface); color: var(--rms-text);
    font: inherit; font-size: var(--fs-base); font-weight: var(--fw-medium); white-space: nowrap; cursor: pointer;
}
.bc-btn:hover:not(:disabled)[b-cf1k66j2uj] { background: var(--rms-surface-2); }
.bc-btn:disabled[b-cf1k66j2uj] { opacity: .55; cursor: default; }
.bc-btn-navy[b-cf1k66j2uj] { border: 0; background: var(--rms-navy); color: #FFFFFF; font-weight: var(--fw-bold); }
.bc-btn-navy:hover:not(:disabled)[b-cf1k66j2uj] { background: var(--rms-navy-hover); }
.bc-spin[b-cf1k66j2uj] { animation: bc-rot-b-cf1k66j2uj .8s linear infinite; }
@keyframes bc-rot-b-cf1k66j2uj { to { transform: rotate(360deg); } }

/* ---------- totals strip ---------- */
.bc-totals[b-cf1k66j2uj] { flex: 0 0 auto; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.bc-stat[b-cf1k66j2uj] {
    min-width: 0; display: flex; flex-direction: column; gap: 1px;
    padding: 8px 12px;
    background: var(--rms-surface); border: 1px solid var(--rms-border); border-radius: var(--rms-r-lg);
    box-shadow: var(--rms-shadow-sm);
}
.bc-stat span[b-cf1k66j2uj] { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase; color: var(--rms-text-muted); }
.bc-stat strong[b-cf1k66j2uj] { font-size: var(--fs-md); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-stat small[b-cf1k66j2uj] { font-size: var(--fs-xs); color: var(--rms-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-stat-neg strong[b-cf1k66j2uj] { color: var(--rms-danger-dark); }
.bc-stat-net[b-cf1k66j2uj] { background: var(--rms-success-bg); border-color: var(--rms-success-border); }
.bc-stat-net strong[b-cf1k66j2uj] { color: var(--rms-success-dark); }

/* ---------- banners ---------- */
.bc-warn[b-cf1k66j2uj] {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px; padding: 6px 10px;
    border: 1px solid var(--rms-danger-border); border-radius: var(--rms-r-md);
    background: var(--rms-danger-soft); color: var(--rms-danger-text); font-size: var(--fs-s);
}
.bc-note[b-cf1k66j2uj] { border-color: var(--rms-border-strong); background: var(--rms-surface-2); color: var(--rms-text); }

/* ---------- chart table ---------- */
.bc-grid-card[b-cf1k66j2uj] { flex: 1 1 auto; min-height: 0; padding: 8px; }
.bc-table-wrap[b-cf1k66j2uj] {
    flex: 1 1 auto; min-height: 0; overflow: auto;
    border: 1px solid var(--rms-border); border-radius: var(--rms-r-md);
}
.bc-table[b-cf1k66j2uj] {
    width: 100%; min-width: 1022px;                  /* below this the table scrolls sideways inside its card */
    table-layout: fixed;                             /* set column widths → headers, rows and totals line up exactly */
    border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums;
}
/* widths fit the largest normal values (e.g. 1,99,999.00) without cutting; extra space is shared in proportion */
.w-sln[b-cf1k66j2uj] { width: 28px; }    .w-period[b-cf1k66j2uj] { width: 124px; } .w-tariff[b-cf1k66j2uj] { width: 56px; }
.w-rent[b-cf1k66j2uj] { width: 74px; }   .w-bed[b-cf1k66j2uj] { width: 68px; }      .w-oth[b-cf1k66j2uj] { width: 62px; }
.w-gross[b-cf1k66j2uj] { width: 80px; }  .w-disc[b-cf1k66j2uj] { width: 72px; }     .w-tax[b-cf1k66j2uj] { width: 80px; }
.w-pct[b-cf1k66j2uj] { width: 40px; }    .w-gst[b-cf1k66j2uj] { width: 62px; }      .w-srv[b-cf1k66j2uj] { width: 64px; }
.w-net[b-cf1k66j2uj] { width: 88px; }                                  /* total 1,022px */
.bc-table th[b-cf1k66j2uj] {
    position: sticky; top: 0; z-index: 2;
    padding: 6px 6px; text-align: left; line-height: 1.15; vertical-align: bottom;   /* long labels wrap, never cut */
    font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase;
    color: var(--rms-text-2); background: var(--rms-surface-2); border-bottom: 1px solid var(--rms-border);
}
.bc-table td[b-cf1k66j2uj] { padding: 6px 6px; font-size: var(--fs-s); white-space: nowrap; overflow: hidden; border-bottom: 1px solid var(--rms-border); }
.bc-table tbody tr:hover td:not(.bc-col-net)[b-cf1k66j2uj] { background: var(--rms-primary-soft); }
.bc-table tfoot td[b-cf1k66j2uj] {
    position: sticky; bottom: 0; z-index: 2;
    font-weight: var(--fw-bold); background: var(--rms-surface-2);
    border-top: 2px solid var(--rms-border-strong); border-bottom: 0;
}
.bc-table .r[b-cf1k66j2uj] { text-align: right; }
.bc-table .c[b-cf1k66j2uj] { text-align: center; }

/* frozen columns: # and Period on the left, Net on the right — stay visible while the table scrolls sideways */
.bc-table .bc-fix1[b-cf1k66j2uj], .bc-table .bc-fix2[b-cf1k66j2uj], .bc-table .bc-col-net[b-cf1k66j2uj] { position: sticky; z-index: 1; background: var(--rms-surface); }
.bc-table .bc-fix1[b-cf1k66j2uj] { left: 0; }
.bc-table .bc-fix2[b-cf1k66j2uj] { left: 28px; box-shadow: 1px 0 0 var(--rms-border); }
.bc-table .bc-col-net[b-cf1k66j2uj] { right: 0; box-shadow: -1px 0 0 var(--rms-border); }
.bc-table th.bc-fix1[b-cf1k66j2uj], .bc-table th.bc-fix2[b-cf1k66j2uj], .bc-table th.bc-col-net[b-cf1k66j2uj] { z-index: 3; background: var(--rms-surface-2); }
.bc-table tfoot .bc-fix1[b-cf1k66j2uj], .bc-table tfoot .bc-fix2[b-cf1k66j2uj], .bc-table tfoot .bc-col-net[b-cf1k66j2uj] { z-index: 3; }
.bc-period[b-cf1k66j2uj] { line-height: 1.25; }
.bc-period span[b-cf1k66j2uj] { display: block; font-size: var(--fs-sm); }
.bc-period span + span[b-cf1k66j2uj] { color: var(--rms-text-muted); font-size: var(--fs-sm); }
.bc-sln[b-cf1k66j2uj] { color: var(--rms-text-muted); }
.bc-neg[b-cf1k66j2uj] { color: var(--rms-danger-dark); }
.bc-table .bc-col-key[b-cf1k66j2uj] { font-weight: var(--fw-semibold, 600); }
.bc-table td.bc-col-net[b-cf1k66j2uj] { font-weight: var(--fw-bold); color: var(--rms-success-dark); background: var(--rms-success-bg); }
.bc-table tfoot td.bc-fix1[b-cf1k66j2uj], .bc-table tfoot td.bc-fix2[b-cf1k66j2uj] { background: var(--rms-surface-2); }
.bc-table th.bc-col-net[b-cf1k66j2uj] { color: var(--rms-success-dark); }

.bc-row-early td:first-child[b-cf1k66j2uj] { box-shadow: inset 3px 0 0 var(--rms-primary); }
.bc-row-extra td:not(.bc-col-net)[b-cf1k66j2uj] { background: var(--rms-warning-soft); }
.bc-row-extra td:first-child[b-cf1k66j2uj] { box-shadow: inset 3px 0 0 var(--rms-warning-text); }

.bc-tariff[b-cf1k66j2uj] {
    display: inline-block; padding: 0 6px; border-radius: var(--rms-r-sm);
    border: 1px solid var(--rms-border-strong); background: var(--rms-surface);
    font-size: var(--fs-sm); font-weight: var(--fw-bold);
}
.bc-tariff-plus[b-cf1k66j2uj] { border-color: var(--rms-primary-border); background: var(--rms-primary-soft); color: var(--rms-primary-text); }

.bc-legend[b-cf1k66j2uj] {
    flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
    padding: 2px 4px 0; font-size: var(--fs-sm); color: var(--rms-text-2);
}
.bc-legend > span[b-cf1k66j2uj] { display: inline-flex; align-items: center; gap: 6px; }
.bc-sw[b-cf1k66j2uj] { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.bc-sw-early[b-cf1k66j2uj] { background: var(--rms-primary); }
.bc-sw-extra[b-cf1k66j2uj] { background: var(--rms-warning-soft); border: 1px solid var(--rms-warning-text); }

.bc-placeholder[b-cf1k66j2uj] {
    flex: 1; min-height: 160px;
    display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--sp-4);
    border: 1px dashed var(--rms-border-strong); border-radius: var(--rms-r-md);
    color: var(--rms-text-muted); font-size: var(--fs-s);
}

/* ---------- print copy: never shown on screen (RoomBillChart.razor.js prints it) ---------- */
.bc-print-src[b-cf1k66j2uj] { display: none; }

/* ---------- notices ---------- */
.bc-center[b-cf1k66j2uj] { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-6) var(--sp-4); color: var(--rms-text-2); }
.bc-notice[b-cf1k66j2uj] {
    width: 100%; max-width: 520px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
    padding: var(--sp-6); text-align: center;
    background: var(--rms-surface); border: 1px solid var(--rms-border); border-radius: var(--rms-r-lg); box-shadow: var(--rms-shadow-md);
}
.bc-notice h1[b-cf1k66j2uj] { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); }
.bc-notice p[b-cf1k66j2uj] { margin: 0; line-height: 1.55; color: var(--rms-text-2); }
.bc-notice-icon[b-cf1k66j2uj] { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.bc-amber[b-cf1k66j2uj] { background: var(--rms-warning-soft); color: var(--rms-warning-text); }
.bc-red[b-cf1k66j2uj]   { background: var(--rms-danger-soft); color: var(--rms-danger-dark); }
.bc-notice-actions[b-cf1k66j2uj] { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-1); }
.bc-notice .bc-btn[b-cf1k66j2uj] { height: var(--h-control-lg); }
.bc-spinner[b-cf1k66j2uj] { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--rms-border-strong); border-top-color: var(--rms-navy); animation: bc-rot-b-cf1k66j2uj .8s linear infinite; }

/* ---------- shorter screens ---------- */
@media (max-height: 740px) {
    .bc-page[b-cf1k66j2uj] { gap: 7px; }
    .bc-card[b-cf1k66j2uj] { padding: 8px 14px; }
    .bc-stat[b-cf1k66j2uj] { padding: 5px 10px; }
    .bc-stat small[b-cf1k66j2uj] { display: none; }
    .bc-table td[b-cf1k66j2uj] { padding: 4px 6px; }
    .bc-table th[b-cf1k66j2uj] { padding: 5px 6px; }
    .bc-btn[b-cf1k66j2uj] { height: 32px; }
    .bc-roomtile[b-cf1k66j2uj] { height: 38px; }
}

/* ---------- laptop width: Recalculate / Print become icon buttons so the header stays on one line ---------- */
@container bc (max-width: 1200px) {
    .bc-btn:has(.bc-btn-label)[b-cf1k66j2uj] { padding: 0 10px; }
    .bc-btn-label[b-cf1k66j2uj] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- narrower page: totals wrap, table scrolls sideways inside its card ---------- */
@container bc (max-width: 860px) {
    .bc-totals[b-cf1k66j2uj] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .bc-stat-net[b-cf1k66j2uj] { grid-column: span 2; }
}
@container bc (max-width: 640px) {
    .bc-page[b-cf1k66j2uj] { height: auto; }                                   /* phone: normal page scroll */
    .bc-table-wrap[b-cf1k66j2uj] { max-height: 70vh; }
    .bc-totals[b-cf1k66j2uj] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bc-head-text h1[b-cf1k66j2uj] { font-size: var(--fs-lg); white-space: normal; }
}
/* /Components/Pages/Guests/RoomBillOther.razor.rz.scp.css */
/* RoomBillCharges — click a Tariff / Extra bed / Discount cell, change it from that period, see the edit log.
   Same standard as Check-Out and Bill Chart (claude/ui-standard.md); all values from wwwroot/css/theme.css. */

.bx[b-qs620d30o8] { color: var(--rms-text); font-size: var(--fs-base); container-type: inline-size; container-name: bx; }

.bx-page[b-qs620d30o8] {
    max-width: 1500px; margin: 0 auto;
    height: calc(100dvh - var(--bx-offset, 120px)); min-height: 540px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: auto minmax(0, 1.6fr) minmax(150px, 1fr);
    grid-template-areas: "head head" "chart edit" "log log";
    gap: 10px;
}
.bx-head[b-qs620d30o8]  { grid-area: head; }
.bx-chart[b-qs620d30o8] { grid-area: chart; }
.bx-edit[b-qs620d30o8]  { grid-area: edit; overflow: hidden; gap: 7px; }
/* pane 2 = title + type switch (fixed) / form (scrolls only if the screen is too short) / Submit (fixed footer) */
.bx-form[b-qs620d30o8] { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; padding: 1px 2px 2px 1px; }
.bx-log[b-qs620d30o8]   { grid-area: log; }

.bx-card[b-qs620d30o8] {
    min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px;
    padding: 10px 14px;
    background: var(--rms-surface); border: 1px solid var(--rms-border);
    border-radius: var(--rms-r-lg); box-shadow: var(--rms-shadow-sm);
}
.bx-chip[b-qs620d30o8] { padding: 1px 8px; border-radius: var(--rms-r-pill); background: var(--rms-gray-200); color: var(--rms-text-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; }
.bx-chip-guest[b-qs620d30o8] { background: var(--rms-primary-soft); color: var(--rms-primary-text); }
.bx-chip-net[b-qs620d30o8] { background: var(--rms-success-bg); color: var(--rms-success-dark); border: 1px solid var(--rms-success-border); font-variant-numeric: tabular-nums; }
.bx-muted[b-qs620d30o8] { color: var(--rms-text-muted); font-weight: var(--fw-normal); }

/* ---------- header (same as Check-Out / Bill Chart) ---------- */
.bx-head[b-qs620d30o8] { flex-direction: row; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.bx-roomtile[b-qs620d30o8] { flex: 0 0 auto; min-width: 52px; padding: 0 6px; box-sizing: border-box; height: 44px; border-radius: var(--rms-r-md); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; background: var(--st2); color: #FFFFFF; }
.bx-roomtile span[b-qs620d30o8] { font-size: 9px; font-weight: var(--fw-bold); letter-spacing: .12em; opacity: .85; }
.bx-roomtile strong[b-qs620d30o8] { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin-top: 2px; }
.bx-head-text[b-qs620d30o8] { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bx-head-text h1[b-qs620d30o8] { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-chips[b-qs620d30o8] { display: flex; flex-wrap: wrap; gap: 4px; }
.bx-grn[b-qs620d30o8] { height: var(--h-control); display: inline-flex; align-items: center; padding: 0 14px; border-radius: var(--rms-r-md); background: var(--rms-danger); color: #FFFFFF; font-weight: var(--fw-bold); letter-spacing: .03em; font-variant-numeric: tabular-nums; }

/* ---------- section titles ---------- */
.bx-ttlrow[b-qs620d30o8] { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--rms-border); }
.bx-ttl[b-qs620d30o8] { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--fs-base); font-weight: var(--fw-bold); letter-spacing: .03em; text-transform: uppercase; }
.bx-num[b-qs620d30o8] { width: 20px; height: 20px; border-radius: var(--rms-r-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--rms-navy); color: #FFFFFF; font-size: var(--fs-xs); }
.bx-sub[b-qs620d30o8] { font-size: var(--fs-sm); color: var(--rms-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- buttons & inputs ---------- */
.bx-btn[b-qs620d30o8] {
    height: var(--h-control); padding: 0 14px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid var(--rms-border-strong); border-radius: var(--rms-r-md);
    background: var(--rms-surface); color: var(--rms-text);
    font: inherit; font-size: var(--fs-base); font-weight: var(--fw-medium); white-space: nowrap; cursor: pointer;
}
.bx-btn:hover:not(:disabled)[b-qs620d30o8] { background: var(--rms-surface-2); }
.bx-btn:disabled[b-qs620d30o8] { opacity: .5; cursor: default; }
.bx-btn-navy[b-qs620d30o8] { border: 0; background: var(--rms-navy); color: #FFFFFF; font-weight: var(--fw-bold); }
.bx-btn-navy:hover:not(:disabled)[b-qs620d30o8] { background: var(--rms-navy-hover); }
.bx-btn-go[b-qs620d30o8] { border: 0; background: var(--rms-success); color: #FFFFFF; font-weight: var(--fw-bold); }
.bx-btn-go:hover:not(:disabled)[b-qs620d30o8] { background: var(--rms-success-dark); }

.bx-input[b-qs620d30o8], .bx-select[b-qs620d30o8] {
    width: 100%; box-sizing: border-box; height: var(--h-control); min-width: 0; padding: 0 10px;
    border: 1px solid var(--rms-border-strong); border-radius: var(--rms-r-md);
    background: var(--rms-surface); color: var(--rms-text); font: inherit; font-size: var(--fs-base);
}
.bx-input:focus[b-qs620d30o8], .bx-select:focus[b-qs620d30o8] { outline: none; border-color: var(--rms-primary); box-shadow: var(--rms-focus); }
.bx-input[readonly][b-qs620d30o8] { background: var(--rms-surface-2); color: var(--rms-text-2); }
.bx-input-num[b-qs620d30o8] { text-align: right; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.bx-input-bad[b-qs620d30o8] { border-color: var(--rms-danger); }

/* ---------- 1. bill chart (click a value to edit it) ---------- */
.bx-table-wrap[b-qs620d30o8] { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--rms-border); border-radius: var(--rms-r-md); }
.bx-table[b-qs620d30o8] { width: 100%; min-width: 640px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.bx-table th[b-qs620d30o8] {
    position: sticky; top: 0; z-index: 2; padding: 6px 8px; text-align: left; white-space: nowrap;
    font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase;
    color: var(--rms-text-2); background: var(--rms-surface-2); border-bottom: 1px solid var(--rms-border);
}
.bx-table td[b-qs620d30o8] { padding: 3px 8px; height: 30px; font-size: var(--fs-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--rms-border); }
.bx-table .r[b-qs620d30o8] { text-align: right; } .bx-table .c[b-qs620d30o8] { text-align: center; }
.bx-table tr.bx-row-sel td[b-qs620d30o8] { background: var(--rms-primary-soft); }
.bx-table tr.bx-row-extra td[b-qs620d30o8] { background: var(--rms-warning-soft); }
.w-sln[b-qs620d30o8] { width: 30px; } .w-date[b-qs620d30o8] { width: 128px; } .w-val[b-qs620d30o8] { width: 92px; }

/* the three editable values: look like buttons, keyboard reachable */
.bx-cellbtn[b-qs620d30o8] {
    width: 100%; height: 24px; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: flex-end;
    border: 1px solid var(--rms-border); border-radius: var(--rms-r-sm);
    background: var(--rms-surface); color: var(--rms-text);
    font: inherit; font-size: var(--fs-s); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; cursor: pointer;
}
.bx-cellbtn:hover[b-qs620d30o8] { border-color: var(--rms-primary-border); background: var(--rms-primary-soft); }
.bx-cellbtn:focus-visible[b-qs620d30o8] { outline: none; box-shadow: var(--rms-focus); }
.bx-cellbtn-start[b-qs620d30o8] { border-left: 3px solid var(--rms-primary); }               /* a change starts in this period */
.bx-cellbtn-sel[b-qs620d30o8] { border: 2px solid var(--rms-accent); background: #FFF8E6; font-weight: var(--fw-bold); }
.bx-legend[b-qs620d30o8] { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-sm); color: var(--rms-text-2); }
.bx-legend i[b-qs620d30o8] { display: inline-block; width: 12px; height: 12px; margin-right: 5px; vertical-align: -2px; border-radius: 3px; border: 1px solid var(--rms-border); }
.bx-legend .lg-start[b-qs620d30o8] { border-left: 3px solid var(--rms-primary); }
.bx-legend .lg-sel[b-qs620d30o8] { border: 2px solid var(--rms-accent); background: #FFF8E6; }

/* ---------- 2. add / edit ---------- */
.bx-edit .bx-ttlrow[b-qs620d30o8] { border-bottom: 0; padding-bottom: 0; }
.bx-types[b-qs620d30o8] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 3px; gap: 3px; border-radius: var(--rms-r-md); background: var(--rms-surface-2); border: 1px solid var(--rms-border); }
.bx-type[b-qs620d30o8] { height: 30px; border: 0; border-radius: var(--rms-r-sm); background: none; font: inherit; font-size: var(--fs-s); font-weight: var(--fw-medium); color: var(--rms-text-2); cursor: pointer; }
.bx-type-on[b-qs620d30o8] { background: var(--rms-navy); color: #FFFFFF; font-weight: var(--fw-bold); }
.bx-field[b-qs620d30o8] { display: flex; flex-direction: column; gap: 3px; }
.bx-field > span[b-qs620d30o8] { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--rms-text-2); }
.bx-field small[b-qs620d30o8] { font-size: var(--fs-xs); color: var(--rms-text-muted); }
.bx-row2[b-qs620d30o8] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.bx-impact[b-qs620d30o8] {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    padding: 6px 10px; border-radius: var(--rms-r-md); background: var(--rms-surface-2); border: 1px solid var(--rms-border);
    font-size: var(--fs-s); font-variant-numeric: tabular-nums;
}
.bx-impact strong[b-qs620d30o8] { font-size: var(--fs-md); }
.bx-up[b-qs620d30o8] { color: var(--rms-danger-dark); font-weight: var(--fw-bold); }
.bx-down[b-qs620d30o8] { color: var(--rms-success-dark); font-weight: var(--fw-bold); }
.bx-submit[b-qs620d30o8] { flex: 0 0 auto; width: 100%; height: var(--h-control-lg); }
.bx-msg[b-qs620d30o8] {
    margin: 0; padding: 4px 4px 4px 10px; flex: 0 0 auto;
    display: flex; align-items: center; gap: 6px;
    border-radius: var(--rms-r-sm); font-size: var(--fs-s); line-height: 1.3;
}
.bx-msg > span[b-qs620d30o8] { flex: 1 1 auto; min-width: 0; }
.bx-msg-x[b-qs620d30o8] { flex: 0 0 auto; width: 22px; height: 22px; border: 0; border-radius: 4px; background: none; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; opacity: .7; }
.bx-msg-x:hover[b-qs620d30o8] { opacity: 1; background: rgba(0,0,0,.06); }
.bx-msg-bad[b-qs620d30o8] { background: var(--rms-danger-soft); color: var(--rms-danger-text); border: 1px solid var(--rms-danger-border); }
.bx-msg-ok[b-qs620d30o8] { background: var(--rms-success-bg); color: var(--rms-success-text); border: 1px solid var(--rms-success-border); }

/* ---------- 3. edit log ---------- */
.bx-log-table[b-qs620d30o8] { min-width: 720px; }
.bx-log-table td[b-qs620d30o8] { height: auto; padding: 5px 8px; white-space: normal; overflow: visible; text-overflow: clip; vertical-align: top; line-height: 1.35; }
.bx-log-table td.nw[b-qs620d30o8] { white-space: nowrap; }
.bx-type-tag[b-qs620d30o8] { display: inline-block; padding: 1px 8px; border-radius: var(--rms-r-pill); font-size: var(--fs-sm); font-weight: var(--fw-bold); white-space: nowrap; }
.t-tariff[b-qs620d30o8] { background: var(--rms-primary-soft); color: var(--rms-primary-text); }
.t-bed[b-qs620d30o8]    { background: #EDE7FB; color: #3D2A7A; }
.t-disc[b-qs620d30o8]   { background: var(--rms-success-soft); color: var(--rms-success-text); }
.t-other[b-qs620d30o8]  { background: var(--rms-gray-200); color: var(--rms-text-2); }
.w-type[b-qs620d30o8] { width: 124px; } .w-time[b-qs620d30o8] { width: 104px; } .w-user[b-qs620d30o8] { width: 150px; } .w-shift[b-qs620d30o8] { width: 132px; }
.bx-log-table small[b-qs620d30o8] { display: block; font-size: var(--fs-xs); color: var(--rms-text-muted); }

/* ---------- shorter screens ---------- */
@media (max-height: 740px) {
    .bx-page[b-qs620d30o8] { gap: 7px; grid-template-rows: auto minmax(312px, 1.7fr) minmax(130px, 1fr); }
    .bx-card[b-qs620d30o8] { padding: 8px 12px; gap: 6px; }
    .bx-btn[b-qs620d30o8] { height: 32px; }
    .bx-input[b-qs620d30o8], .bx-select[b-qs620d30o8] { height: 32px; }
    .bx-submit[b-qs620d30o8] { height: 36px; }
    .bx-roomtile[b-qs620d30o8] { height: 38px; }
    .bx-table td[b-qs620d30o8] { height: 28px; }
    .bx-field small[b-qs620d30o8] { display: none; }
    .bx-types[b-qs620d30o8] { padding: 2px; } .bx-type[b-qs620d30o8] { height: 28px; }
}

/* ---------- narrower: editor under the chart, page scrolls ---------- */
@container bx (max-width: 980px) {
    .bx-page[b-qs620d30o8] { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "chart" "edit" "log"; }
    .bx-table-wrap[b-qs620d30o8] { max-height: 50vh; }
}
@container bx (max-width: 640px) {
    .bx-head-text h1[b-qs620d30o8] { font-size: var(--fs-lg); white-space: normal; }
}

/* ---------- empty states, messages ---------- */
.bx-placeholder[b-qs620d30o8] {
    flex: 1; min-height: 80px;
    display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--sp-3);
    border: 1px dashed var(--rms-border-strong); border-radius: var(--rms-r-md);
    color: var(--rms-text-muted); font-size: var(--fs-s);
}
.bx-placeholder-sm[b-qs620d30o8] { min-height: 60px; }
.bx-format[b-qs620d30o8] { margin-top: -3px; font-size: var(--fs-xs); line-height: 1.3; color: var(--rms-text-muted); }
@media (max-height: 900px) {                                    /* laptop: hints move into the boxes' tooltips */
    .bx-field small[b-qs620d30o8], .bx-format[b-qs620d30o8] { display: none; }
    .bx-edit .bx-field[b-qs620d30o8] { gap: 2px; }
}

/* ---------- notices (same as Check-Out) ---------- */
.bx-center[b-qs620d30o8] { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-6) var(--sp-4); color: var(--rms-text-2); }
.bx-notice[b-qs620d30o8] {
    width: 100%; max-width: 520px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
    padding: var(--sp-6); text-align: center;
    background: var(--rms-surface); border: 1px solid var(--rms-border); border-radius: var(--rms-r-lg); box-shadow: var(--rms-shadow-md);
}
.bx-notice h1[b-qs620d30o8] { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); }
.bx-notice p[b-qs620d30o8] { margin: 0; line-height: 1.55; color: var(--rms-text-2); }
.bx-notice-icon[b-qs620d30o8] { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.bx-amber[b-qs620d30o8] { background: var(--rms-warning-soft); color: var(--rms-warning-text); }
.bx-red[b-qs620d30o8]   { background: var(--rms-danger-soft); color: var(--rms-danger-dark); }
.bx-notice-actions[b-qs620d30o8] { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-1); }
.bx-notice .bx-btn[b-qs620d30o8] { height: var(--h-control-lg); }
.bx-spinner[b-qs620d30o8] { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--rms-border-strong); border-top-color: var(--rms-navy); animation: bx-rot-b-qs620d30o8 .8s linear infinite; }
.bx-spinner-sm[b-qs620d30o8] { width: 16px; height: 16px; border-width: 2px; border-color: rgba(255,255,255,.5); border-top-color: #FFFFFF; }
@keyframes bx-rot-b-qs620d30o8 { to { transform: rotate(360deg); } }

/* one-line error at the top of pane 2 (full text in the tooltip) */
.bx-msg-1 > span[b-qs620d30o8] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* "Saved · Net ₹ … → ₹ …" shown in the edit-log title, next to the new entry — takes no space in pane 2 */
.bx-logright[b-qs620d30o8] { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bx-saved[b-qs620d30o8] {
    display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 520px;
    padding: 1px 2px 1px 10px; border-radius: var(--rms-r-pill);
    background: var(--rms-success-bg); color: var(--rms-success-dark); border: 1px solid var(--rms-success-border);
    font-size: var(--fs-s); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    animation: bx-pop-b-qs620d30o8 .25s ease-out;
}
.bx-saved .bx-msg-x[b-qs620d30o8] { width: 20px; height: 20px; font-size: 14px; }
@keyframes bx-pop-b-qs620d30o8 { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }

/* ===================== Bill Other (other charges) ===================== */
.bx-page.bo-page[b-qs620d30o8] { grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "head head" "chart edit"; }
.bo-list .bx-table[b-qs620d30o8] { min-width: 720px; }
.bo-list .bx-table td[b-qs620d30o8] { height: 34px; }
.w-vno[b-qs620d30o8] { width: 162px; } .w-when[b-qs620d30o8] { width: 116px; } .w-amt[b-qs620d30o8] { width: 96px; } .w-usr[b-qs620d30o8] { width: 132px; } .w-st[b-qs620d30o8] { width: 118px; }

.bo-vno[b-qs620d30o8] { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.bo-when small[b-qs620d30o8], .bo-usr small[b-qs620d30o8] { display: block; font-size: var(--fs-xs); color: var(--rms-text-muted); }
.bo-amt[b-qs620d30o8] { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.bo-kind[b-qs620d30o8] { margin-left: 4px; padding: 0 5px; border-radius: var(--rms-r-sm); font-size: 10px; font-weight: var(--fw-bold); vertical-align: 1px; }
.bo-kind-plus[b-qs620d30o8] { background: var(--rms-primary-soft); color: var(--rms-primary-text); }
.bo-kind-incl[b-qs620d30o8] { background: var(--rms-gray-200); color: var(--rms-text-2); }

.bo-row-cancel td[b-qs620d30o8] { color: var(--rms-text-disabled); background: var(--rms-surface-2); }
.bo-row-cancel .bo-vno[b-qs620d30o8], .bo-row-cancel .bo-amt[b-qs620d30o8], .bo-row-cancel .bo-narr[b-qs620d30o8] { text-decoration: line-through; text-decoration-color: var(--rms-danger); }
.bo-row-sel td[b-qs620d30o8] { background: var(--rms-danger-soft); }
.bo-tag-cancel[b-qs620d30o8] { display: inline-block; padding: 1px 8px; border-radius: var(--rms-r-pill); font-size: var(--fs-xs); font-weight: var(--fw-bold); background: var(--rms-danger-soft); color: var(--rms-danger-dark); }
.bo-cancel-btn[b-qs620d30o8] {
    height: 26px; padding: 0 10px; display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid var(--rms-danger-border); border-radius: var(--rms-r-sm);
    background: var(--rms-surface); color: var(--rms-danger-dark); font: inherit; font-size: var(--fs-s); font-weight: var(--fw-medium); cursor: pointer;
}
.bo-cancel-btn:hover[b-qs620d30o8] { background: var(--rms-danger-soft); }

.bo-foot[b-qs620d30o8] { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 2px 4px 0; font-size: var(--fs-s); color: var(--rms-text-2); font-variant-numeric: tabular-nums; }
.bo-foot strong[b-qs620d30o8] { color: var(--rms-text); font-size: var(--fs-md); }
.bo-foot .bo-total[b-qs620d30o8] { margin-left: auto; }
.bo-foot .bo-total strong[b-qs620d30o8] { color: var(--rms-success-dark); font-size: var(--fs-lg); }

/* pane 2: add / cancel modes */
.bo-mode[b-qs620d30o8] { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; gap: 3px; border-radius: var(--rms-r-md); background: var(--rms-surface-2); border: 1px solid var(--rms-border); }
.bo-quick[b-qs620d30o8] { display: flex; flex-wrap: wrap; gap: 4px; }
.bo-quick button[b-qs620d30o8] { height: 26px; padding: 0 10px; border: 1px solid var(--rms-border); border-radius: var(--rms-r-pill); background: var(--rms-surface); font: inherit; font-size: var(--fs-sm); color: var(--rms-text-2); cursor: pointer; }
.bo-quick button:hover[b-qs620d30o8] { border-color: var(--rms-primary-border); background: var(--rms-primary-soft); color: var(--rms-primary-text); }
.bo-calc[b-qs620d30o8] { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 10px; border-radius: var(--rms-r-md); background: var(--rms-surface-2); border: 1px solid var(--rms-border); font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.bo-calc span:nth-child(even)[b-qs620d30o8] { text-align: right; font-weight: var(--fw-medium); }
.bo-calc .bo-calc-total[b-qs620d30o8] { font-weight: var(--fw-bold); border-top: 1px solid var(--rms-border); padding-top: 3px; }
.bo-void[b-qs620d30o8] { padding: 10px 12px; border-radius: var(--rms-r-md); border: 1px solid var(--rms-danger-border); background: var(--rms-danger-soft); color: var(--rms-danger-text); display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: var(--fs-s); }
.bo-void b[b-qs620d30o8] { font-weight: var(--fw-bold); }
.bx-btn-red[b-qs620d30o8] { border: 0; background: var(--rms-danger); color: #FFFFFF; font-weight: var(--fw-bold); }
.bx-btn-red:hover:not(:disabled)[b-qs620d30o8] { background: var(--rms-danger-dark); }
.bo-actions[b-qs620d30o8] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 0 0 auto; }
.bo-actions .bx-btn[b-qs620d30o8] { height: var(--h-control-lg); }
.bo-by[b-qs620d30o8] { display: block; font-size: var(--fs-xs); color: var(--rms-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bo-warn[b-qs620d30o8] { background: var(--rms-warning-soft); color: var(--rms-warning-text); border: 1px solid var(--rms-warning-border); }
.bo-list .bx-table td[b-qs620d30o8] { white-space: nowrap; }

/* narrower page: list above, add/cancel below (page scrolls) */
@container bx (max-width: 980px) {
    .bx-page.bo-page[b-qs620d30o8] { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "chart" "edit"; }
}
/* /Components/Pages/Home.razor.rz.scp.css */
.home-checking[b-kc3h7siuez] {
    margin: 24px 0;
    color: var(--rms-text-2);
    font-size: var(--fs-base);
}

.home-alert[b-kc3h7siuez] {
    max-width: 560px;
    margin: 24px 0;
    padding: 14px 16px;
    border: 1px solid var(--rms-danger-border);
    border-radius: var(--rms-r-lg);
    background: var(--rms-danger-soft);
    color: var(--rms-danger-text);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--fs-base);
}

.home-alert p[b-kc3h7siuez] { margin: 0; line-height: 1.5; }

.home-alert button[b-kc3h7siuez] {
    height: var(--h-control);
    padding: 0 16px;
    border: 1px solid var(--rms-danger-dark);
    border-radius: var(--rms-r-md);
    background: var(--rms-surface);
    color: var(--rms-danger-dark);
    font: inherit;
    font-weight: var(--fw-medium);
    cursor: pointer;
}

.home-alert button:hover[b-kc3h7siuez] { background: var(--rms-danger-soft); }
/* /Components/Pages/Maintenance/DatabaseBackup.razor.rz.scp.css */
/* DatabaseBackup — Maintenance / IT: disks, backup status, databases, backup folder, backup log.
   Same standard as Check-Out and Bill Chart (claude/ui-standard.md); all values from wwwroot/css/theme.css. */

.mt[b-qxzi6rsazw] { color: var(--rms-text); font-size: var(--fs-base); container-type: inline-size; container-name: mt; }

.mt-page[b-qxzi6rsazw] {
    max-width: 1500px; margin: 0 auto;
    height: calc(100dvh - var(--mt-offset, 120px)); min-height: 520px;
    display: grid; gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "head head head" "disk stat db" "fold fold log";
    outline: none;
}
.mt-head[b-qxzi6rsazw] { grid-area: head; } .mt-disk[b-qxzi6rsazw] { grid-area: disk; } .mt-stat[b-qxzi6rsazw] { grid-area: stat; }
.mt-db[b-qxzi6rsazw] { grid-area: db; } .mt-fold[b-qxzi6rsazw] { grid-area: fold; } .mt-log[b-qxzi6rsazw] { grid-area: log; }

.mt-card[b-qxzi6rsazw] {
    min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow: hidden;
    padding: 10px 14px;
    background: var(--rms-surface); border: 1px solid var(--rms-border);
    border-radius: var(--rms-r-lg); box-shadow: var(--rms-shadow-sm);
}

/* ---------- header ---------- */
.mt-head[b-qxzi6rsazw] { flex-direction: row; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.mt-tile[b-qxzi6rsazw] { flex: 0 0 auto; width: 52px; height: 44px; border-radius: var(--rms-r-md); background: var(--rms-navy); color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.mt-tile svg[b-qxzi6rsazw] { width: 24px; height: 24px; }
.mt-htext[b-qxzi6rsazw] { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mt-htext h1[b-qxzi6rsazw] { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-chips[b-qxzi6rsazw] { display: flex; flex-wrap: wrap; gap: 4px; }
.mt-chip[b-qxzi6rsazw] { padding: 1px 8px; border-radius: var(--rms-r-pill); background: var(--rms-gray-200); color: var(--rms-text-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; }
.mt-chip.ok[b-qxzi6rsazw] { background: var(--rms-success-bg); color: var(--rms-success-dark); border: 1px solid var(--rms-success-border); }
.mt-chip.warn[b-qxzi6rsazw] { background: var(--rms-warning-soft); color: var(--rms-warning-text); border: 1px solid var(--rms-warning-border); }
.mt-chip.bad[b-qxzi6rsazw] { background: var(--rms-danger-soft); color: var(--rms-danger-text); border: 1px solid var(--rms-danger-border); }
.mt-live[b-qxzi6rsazw] { font-size: var(--fs-sm); color: var(--rms-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mt-live i[b-qxzi6rsazw] { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rms-success); margin-right: 5px; }
.mt-live i.off[b-qxzi6rsazw] { background: var(--rms-warning); }

/* ---------- buttons ---------- */
.mt-btn[b-qxzi6rsazw] {
    height: var(--h-control); padding: 0 14px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid var(--rms-border-strong); border-radius: var(--rms-r-md);
    background: var(--rms-surface); color: var(--rms-text);
    font: inherit; font-size: var(--fs-base); font-weight: var(--fw-medium); white-space: nowrap; cursor: pointer;
}
.mt-btn:hover:not(:disabled)[b-qxzi6rsazw] { background: var(--rms-surface-2); }
.mt-btn:disabled[b-qxzi6rsazw] { opacity: .55; cursor: default; }
.mt-btn-navy[b-qxzi6rsazw] { border: 0; background: var(--rms-navy); color: #FFFFFF; font-weight: var(--fw-bold); }
.mt-btn-navy:hover:not(:disabled)[b-qxzi6rsazw] { background: var(--rms-navy-hover); }
.mt-btn-go[b-qxzi6rsazw] { border: 0; height: var(--h-control-lg); padding: 0 18px; background: var(--rms-success); color: #FFFFFF; font-weight: var(--fw-bold); }
.mt-btn-go:hover:not(:disabled)[b-qxzi6rsazw] { background: var(--rms-success-dark); }
.mt-btn-go:disabled[b-qxzi6rsazw] { background: var(--rms-gray-400); opacity: 1; }
.mt-btn-sm[b-qxzi6rsazw] { height: var(--h-control-sm); padding: 0 10px; font-size: var(--fs-s); }
.mt-btn-tool[b-qxzi6rsazw] { background: var(--rms-primary-soft); border-color: var(--rms-primary-border); color: var(--rms-primary-text); }
.mt-btn-tool:hover:not(:disabled)[b-qxzi6rsazw] { background: #DCEAFF; }

/* ---------- message (bottom right, never moves the layout) ---------- */
.mt-msg[b-qxzi6rsazw] {
    position: fixed; right: 18px; bottom: 18px; z-index: 50; max-width: min(560px, calc(100vw - 36px));
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
    border-radius: var(--rms-r-md); box-shadow: var(--rms-shadow-md); font-size: var(--fs-s); font-weight: var(--fw-medium);
}
.mt-msg.ok[b-qxzi6rsazw] { background: var(--rms-success-bg); color: var(--rms-success-text); border: 1px solid var(--rms-success-border); }
.mt-msg.bad[b-qxzi6rsazw] { background: var(--rms-danger-soft); color: var(--rms-danger-text); border: 1px solid var(--rms-danger-border); }
.mt-msg-x[b-qxzi6rsazw] { border: 0; background: transparent; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }

/* ---------- section titles ---------- */
.mt-ttlrow[b-qxzi6rsazw] { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--rms-border); }
.mt-ttl[b-qxzi6rsazw] { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--fs-base); font-weight: var(--fw-bold); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.mt-num[b-qxzi6rsazw] { width: 20px; height: 20px; border-radius: var(--rms-r-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--rms-navy); color: #FFFFFF; font-size: var(--fs-xs); }
.mt-sub[b-qxzi6rsazw] { font-size: var(--fs-sm); color: var(--rms-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--fw-normal); }
.mt-ttlright[b-qxzi6rsazw] { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mt-scroll[b-qxzi6rsazw] { flex: 1 1 auto; min-height: 0; overflow: auto; }
.mt-hint[b-qxzi6rsazw] { margin: 0; flex: 0 0 auto; padding: 6px 10px; border-radius: var(--rms-r-md); background: var(--rms-warning-soft); border: 1px solid var(--rms-warning-border); color: var(--rms-warning-text); font-size: var(--fs-sm); }
.mt-empty[b-qxzi6rsazw] { color: var(--rms-text-muted); font-size: var(--fs-s); text-align: center; padding: 14px 0; }
.mt-off[b-qxzi6rsazw] { color: var(--rms-text-muted); font-weight: var(--fw-normal); }

/* ---------- 1. disks ---------- */
.mt-drive[b-qxzi6rsazw] { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 3px 10px; padding: 5px 0; border-bottom: 1px dashed var(--rms-border); }
.mt-drive:last-child[b-qxzi6rsazw] { border-bottom: 0; }
.mt-letter[b-qxzi6rsazw] { grid-row: 1 / span 3; width: 40px; height: 40px; border-radius: var(--rms-r-md); background: var(--rms-surface-2); border: 1px solid var(--rms-border); display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: var(--fw-bold); font-size: var(--fs-md); line-height: 1; }
.mt-letter small[b-qxzi6rsazw] { font-size: 9px; color: var(--rms-text-muted); font-weight: var(--fw-medium); margin-top: 3px; letter-spacing: .04em; }
.mt-dline[b-qxzi6rsazw] { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: var(--fs-s); min-width: 0; }
.mt-dline > span:last-child[b-qxzi6rsazw] { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mt-tags[b-qxzi6rsazw] { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
.mt-tag[b-qxzi6rsazw] { font-size: var(--fs-xs); padding: 0 6px; border-radius: 4px; background: var(--rms-primary-soft); color: var(--rms-primary-text); font-weight: var(--fw-medium); white-space: nowrap; }
.mt-tag-plain[b-qxzi6rsazw] { background: var(--rms-gray-200); color: var(--rms-text-2); }
.mt-bar[b-qxzi6rsazw] { height: 10px; border-radius: var(--rms-r-pill); background: var(--rms-gray-200); overflow: hidden; display: flex; }
.mt-bar span[b-qxzi6rsazw] { display: block; height: 100%; background: var(--rms-primary); }
.mt-bar span.bk[b-qxzi6rsazw] { background: var(--rms-navy); }
.mt-bar.warn span:first-child[b-qxzi6rsazw] { background: var(--rms-warning); }
.mt-bar.bad span:first-child[b-qxzi6rsazw] { background: var(--rms-danger); }
.mt-dfoot[b-qxzi6rsazw] { font-size: var(--fs-sm); color: var(--rms-text-muted); font-variant-numeric: tabular-nums; }
.mt-dfoot b[b-qxzi6rsazw] { color: var(--rms-text); }
.mt-dfoot .w[b-qxzi6rsazw] { font-weight: var(--fw-bold); color: var(--rms-warning-text); }
.mt-dfoot .w.bad[b-qxzi6rsazw] { color: var(--rms-danger-dark); }

/* ---------- 2. status ---------- */
.mt-last[b-qxzi6rsazw] { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 5px 10px; border-radius: var(--rms-r-md); background: var(--rms-success-bg); border: 1px solid var(--rms-success-border); min-width: 0; }
.mt-last > div:last-child[b-qxzi6rsazw] { min-width: 0; }
.mt-last .ic[b-qxzi6rsazw] { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--rms-success); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); }
.mt-last strong[b-qxzi6rsazw] { display: block; font-size: var(--fs-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-last span[b-qxzi6rsazw] { display: block; font-size: var(--fs-sm); color: var(--rms-success-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-last.bad[b-qxzi6rsazw] { background: var(--rms-danger-soft); border-color: var(--rms-danger-border); }
.mt-last.bad .ic[b-qxzi6rsazw] { background: var(--rms-danger); }
.mt-last.bad span[b-qxzi6rsazw] { color: var(--rms-danger-text); white-space: normal; }
.mt-last.warn[b-qxzi6rsazw] { background: var(--rms-warning-soft); border-color: var(--rms-warning-border); }
.mt-last.warn .ic[b-qxzi6rsazw] { background: var(--rms-warning); color: var(--rms-warning-text); }
.mt-last.warn span[b-qxzi6rsazw] { color: var(--rms-warning-text); }
.mt-last.run[b-qxzi6rsazw] { background: var(--rms-primary-soft); border-color: var(--rms-primary-border); }
.mt-last.run .ic[b-qxzi6rsazw] { background: var(--rms-primary); animation: mt-spin-b-qxzi6rsazw 1.2s linear infinite; }
.mt-last.run span[b-qxzi6rsazw] { color: var(--rms-primary-text); }

.mt-kv[b-qxzi6rsazw] { margin: 0; flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-content: start; font-size: var(--fs-s); }
.mt-kv dt[b-qxzi6rsazw] { color: var(--rms-text-muted); white-space: nowrap; }
.mt-kv dd[b-qxzi6rsazw] { margin: 0; font-weight: var(--fw-bold); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-kv dd.ok[b-qxzi6rsazw] { color: var(--rms-success-dark); }
.mt-kv dd.bad[b-qxzi6rsazw] { color: var(--rms-danger-dark); }
.mt-slots[b-qxzi6rsazw] { display: inline-flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.mt-slot[b-qxzi6rsazw] { font-size: var(--fs-sm); padding: 0 7px; border-radius: var(--rms-r-pill); border: 1px solid var(--rms-border-strong); font-weight: var(--fw-medium); }
.mt-slot.next[b-qxzi6rsazw] { background: var(--rms-primary-soft); border-color: var(--rms-primary-border); color: var(--rms-primary-text); }
.mt-path[b-qxzi6rsazw] { font-family: Consolas, 'Cascadia Mono', monospace; font-size: var(--fs-sm); }

/* ---------- tables (3 + 4) ---------- */
.mt-wrap[b-qxzi6rsazw] { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--rms-border); border-radius: var(--rms-r-md); }
.mt-table[b-qxzi6rsazw] { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.mt-table th[b-qxzi6rsazw] {
    position: sticky; top: 0; z-index: 1; padding: 5px 8px; text-align: left; white-space: nowrap;
    font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase;
    color: var(--rms-text-2); background: var(--rms-surface-2); border-bottom: 1px solid var(--rms-border);
}
.mt-table td[b-qxzi6rsazw] { padding: 4px 8px; height: 28px; font-size: var(--fs-s); border-bottom: 1px solid var(--rms-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-table .r[b-qxzi6rsazw] { text-align: right; }
.mt-table tfoot td[b-qxzi6rsazw] { position: sticky; bottom: 0; background: var(--rms-surface-2); font-weight: var(--fw-bold); border-top: 1px solid var(--rms-border); border-bottom: 0; }
.mt-table tr.dim td[b-qxzi6rsazw] { color: var(--rms-text-disabled); }
.mt-table tr.sel td[b-qxzi6rsazw] { background: var(--rms-primary-soft); }
.mt-table tr.sub td[b-qxzi6rsazw] { background: #FBFCFD; color: var(--rms-text-2); }
.mt-table tr.sub td:first-child[b-qxzi6rsazw] { padding-left: 28px; }
.mt-dayrow[b-qxzi6rsazw] { cursor: pointer; }
.mt-dayrow:hover td[b-qxzi6rsazw] { background: var(--rms-surface-2); }
.mt-dayrow.sel:hover td[b-qxzi6rsazw] { background: var(--rms-primary-soft); }
.mt-daybtn[b-qxzi6rsazw] { border: 0; background: transparent; padding: 0; font: inherit; font-weight: var(--fw-bold); color: var(--rms-text); cursor: pointer; white-space: nowrap; }
.mt-caret[b-qxzi6rsazw] { display: inline-block; width: 16px; color: var(--rms-text-muted); }
.w-size[b-qxzi6rsazw] { width: 64px; } .w-last[b-qxzi6rsazw] { width: 72px; }
.w-day[b-qxzi6rsazw] { width: 220px; } .w-files[b-qxzi6rsazw] { width: 60px; } .w-daysize[b-qxzi6rsazw] { width: 160px; } .w-ver[b-qxzi6rsazw] { width: 96px; }

.mt-st[b-qxzi6rsazw] { display: inline-flex; align-items: center; gap: 5px; font-weight: var(--fw-medium); font-size: var(--fs-sm); color: var(--rms-text-muted); }
.mt-st i[b-qxzi6rsazw] { width: 8px; height: 8px; border-radius: 50%; background: var(--rms-gray-400); flex: 0 0 auto; }
.mt-st.ok[b-qxzi6rsazw] { color: var(--rms-success-dark); } .mt-st.ok i[b-qxzi6rsazw] { background: var(--rms-success); }
.mt-st.warn[b-qxzi6rsazw] { color: var(--rms-warning-text); } .mt-st.warn i[b-qxzi6rsazw] { background: var(--rms-warning); }
.mt-st.bad[b-qxzi6rsazw] { color: var(--rms-danger-dark); } .mt-st.bad i[b-qxzi6rsazw] { background: var(--rms-danger); }
.mt-mini[b-qxzi6rsazw] { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--rms-gray-200); vertical-align: middle; margin-right: 6px; overflow: hidden; }
.mt-mini span[b-qxzi6rsazw] { display: block; height: 100%; background: var(--rms-navy); }

/* ---------- 5. activity ---------- */
.mt-note[b-qxzi6rsazw] { flex: 0 0 auto; font-size: var(--fs-sm); color: var(--rms-text-muted); }
.mt-progress[b-qxzi6rsazw] { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; font-size: var(--fs-s); white-space: nowrap; }
.mt-progress .mt-bar[b-qxzi6rsazw] { flex: 1 1 auto; height: 8px; }
.mt-progress .mt-bar span[b-qxzi6rsazw] { transition: width .6s ease; }
.mt-logbox[b-qxzi6rsazw] {
    flex: 1 1 auto; min-height: 0; overflow: auto;
    padding: 8px 10px; border-radius: var(--rms-r-md); background: #0F1A33; color: #D7DEEA;
    font-family: Consolas, 'Cascadia Mono', monospace; font-size: 12px; line-height: 1.55;
}
.mt-logbox > div[b-qxzi6rsazw] { white-space: pre-wrap; word-break: break-word; }
.mt-logbox .t[b-qxzi6rsazw] { color: #8090B0; }
.mt-logbox .g[b-qxzi6rsazw] { color: #6FD69B; }
.mt-logbox .y[b-qxzi6rsazw] { color: #FFD666; }
.mt-logbox .rd[b-qxzi6rsazw] { color: #FF8A95; }

/* ---------- confirm dialog ---------- */
.mt-dim[b-qxzi6rsazw] { position: fixed; inset: 0; z-index: 100; background: rgba(16, 24, 40, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.mt-dlg[b-qxzi6rsazw] { width: 460px; max-width: 100%; background: var(--rms-surface); border-radius: var(--rms-r-lg); box-shadow: var(--rms-shadow-md); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.mt-dlg h2[b-qxzi6rsazw] { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.mt-dlg ul[b-qxzi6rsazw] { margin: 0; padding-left: 18px; font-size: var(--fs-s); color: var(--rms-text-2); line-height: 1.6; word-break: break-word; }
.mt-dlg li.bad[b-qxzi6rsazw] { color: var(--rms-danger-dark); font-weight: var(--fw-bold); }
.mt-dlg-row[b-qxzi6rsazw] { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- loading / notices ---------- */
.mt-center[b-qxzi6rsazw] { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--rms-text-muted); }
.mt-spinner[b-qxzi6rsazw] { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--rms-gray-200); border-top-color: var(--rms-primary); animation: mt-spin-b-qxzi6rsazw .9s linear infinite; }
.mt-notice[b-qxzi6rsazw] { max-width: 460px; padding: 22px 24px; text-align: center; background: var(--rms-surface); border: 1px solid var(--rms-border); border-radius: var(--rms-r-lg); box-shadow: var(--rms-shadow-sm); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mt-notice h1[b-qxzi6rsazw] { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--rms-text); }
.mt-notice p[b-qxzi6rsazw] { margin: 0; color: var(--rms-text-2); }
.mt-notice-icon[b-qxzi6rsazw] { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.mt-notice-icon.warn[b-qxzi6rsazw] { background: var(--rms-warning-soft); color: var(--rms-warning-text); }
.mt-notice-icon.bad[b-qxzi6rsazw] { background: var(--rms-danger-soft); color: var(--rms-danger); }
.mt-notice-actions[b-qxzi6rsazw] { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

@keyframes mt-spin-b-qxzi6rsazw { to { transform: rotate(360deg); } }

/* ---------- narrower windows: 2 columns, then 1; page scrolls instead of squeezing ---------- */
@container mt (max-width: 1000px) {
    .mt-page[b-qxzi6rsazw] {
        height: auto; grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        grid-template-areas: "head head" "disk stat" "db db" "fold fold" "log log";
    }
    .mt-disk[b-qxzi6rsazw], .mt-stat[b-qxzi6rsazw], .mt-db[b-qxzi6rsazw] { max-height: 320px; }
    .mt-fold[b-qxzi6rsazw], .mt-log[b-qxzi6rsazw] { height: 360px; }
}
@container mt (max-width: 640px) {
    .mt-page[b-qxzi6rsazw] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "disk" "stat" "db" "fold" "log"; }
    .mt-htext h1[b-qxzi6rsazw] { font-size: var(--fs-lg); }
    .w-day[b-qxzi6rsazw] { width: 170px; } .w-daysize[b-qxzi6rsazw] { width: 110px; }
    .mt-mini[b-qxzi6rsazw] { display: none; }
}
@media (max-height: 720px) {
    .mt-head[b-qxzi6rsazw] { padding: 8px 14px; }
    .mt-card[b-qxzi6rsazw] { padding: 8px 12px; gap: 6px; }
}

/* Host Manager missing / not readable: how to fix */
.mt-fix[b-qxzi6rsazw] { flex: 1 1 auto; min-height: 0; overflow: auto; font-size: var(--fs-s); color: var(--rms-text-2); line-height: 1.5; }
.mt-fix b[b-qxzi6rsazw] { color: var(--rms-text); }
.mt-fix p[b-qxzi6rsazw] { margin: 4px 0; }
.mt-fix ul[b-qxzi6rsazw] { margin: 0; padding-left: 18px; }

/* ---------- ⏻ Server dialog ---------- */
.mt-btn-red[b-qxzi6rsazw] { border: 0; background: var(--rms-danger); color: #FFFFFF; font-weight: var(--fw-bold); }
.mt-btn-red:hover:not(:disabled)[b-qxzi6rsazw] { background: var(--rms-danger-dark); }
.mt-btn-red:disabled[b-qxzi6rsazw] { background: #E9A3AA; opacity: 1; }
.rs-dlg[b-qxzi6rsazw] { width: 580px; max-height: calc(100dvh - 32px); overflow: auto; }
.rs-red[b-qxzi6rsazw] { color: var(--rms-danger-dark); }
.rs-kv[b-qxzi6rsazw] { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; padding: 8px 10px; border-radius: var(--rms-r-md); background: var(--rms-surface-2); font-size: var(--fs-s); }
.rs-kv dt[b-qxzi6rsazw] { color: var(--rms-text-muted); }
.rs-kv dd[b-qxzi6rsazw] { margin: 0; font-weight: var(--fw-bold); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-kv dd.w[b-qxzi6rsazw] { color: var(--rms-warning-text); }
.rs-users[b-qxzi6rsazw] { max-height: 130px; overflow: auto; border: 1px solid var(--rms-border); border-radius: var(--rms-r-md); font-size: var(--fs-sm); color: var(--rms-text-2); }
.rs-users > div[b-qxzi6rsazw] { display: flex; justify-content: space-between; gap: 10px; padding: 4px 10px; border-bottom: 1px solid var(--rms-border); }
.rs-users > div:last-child[b-qxzi6rsazw] { border-bottom: 0; }
.rs-users b[b-qxzi6rsazw] { color: var(--rms-text); }
.rs-grid[b-qxzi6rsazw] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rs-act[b-qxzi6rsazw] { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--rms-border); border-radius: var(--rms-r-lg); }
.rs-act h3[b-qxzi6rsazw] { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-bold); }
.rs-act p[b-qxzi6rsazw] { margin: 0; flex: 1 1 auto; font-size: var(--fs-sm); color: var(--rms-text-2); line-height: 1.5; }
.rs-act.danger[b-qxzi6rsazw] { border-color: var(--rms-danger-border); background: #FFF8F8; }
.rs-foot[b-qxzi6rsazw] { justify-content: space-between; align-items: center; }
.rs-type[b-qxzi6rsazw] { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-s); }
.rs-type input[b-qxzi6rsazw] {
    height: var(--h-control); padding: 0 10px; border: 1px solid var(--rms-danger); border-radius: var(--rms-r-md);
    font: inherit; font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase;
}
.rs-type input:focus[b-qxzi6rsazw] { outline: none; box-shadow: 0 0 0 3px rgba(220, 53, 69, .15); }
@media (max-width: 640.98px) { .rs-grid[b-qxzi6rsazw] { grid-template-columns: 1fr; } }
/* /Components/Pages/Rooms/Occupancy_Status.razor.rz.scp.css */
/* =====================================================================
   Occupancy_Status — styles for this page only (Blazor scoped CSS)
   Status colours keyed to RmStatusID:
     .st-1 Ready (green)    .st-2 Guest (blue)    .st-3 Housekeeping (red)
     .st-4 Blocked (yellow) .st-5 Maintenance (grey)   .st-0 any other ID
   ===================================================================== */

.occ[b-pck2w57z6j] {
    /* colours: head = tile header / badge, body = tile background, line = tile border, text = header text */
    --st1-head: var(--rms-success); --st1-body: var(--rms-success-soft); --st1-line: var(--rms-success-border); --st1-text: #FFFFFF;
    --st2-head: var(--rms-primary); --st2-body: var(--rms-primary-soft); --st2-line: var(--rms-primary-border); --st2-text: #FFFFFF;
    --st3-head: var(--rms-danger); --st3-body: var(--rms-danger-soft); --st3-line: var(--rms-danger-border); --st3-text: #FFFFFF;
    --st4-head: var(--rms-warning); --st4-body: var(--rms-warning-soft); --st4-line: var(--rms-warning-border); --st4-text: var(--rms-text);
    --st5-head: var(--rms-gray); --st5-body: #E2E3E5; --st5-line: #C4C8CB; --st5-text: #FFFFFF;
    --st0-head: var(--rms-gray-400); --st0-body: var(--rms-surface-2); --st0-line: var(--rms-border); --st0-text: var(--rms-text);

    --occ-card: var(--rms-surface);
    --occ-ink: var(--rms-text);
    --occ-muted: var(--rms-text-2);
    --occ-line: var(--rms-border);
    --occ-input-line: var(--rms-border-strong);
    --occ-link: var(--rms-primary-hover);

    --occ-tile-min: 74px;
    --occ-tile-gap: 6px;

    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--occ-ink);
    font-family: var(--rms-font);
    font-size: var(--fs-base);
}

/* status class → the four variables every coloured element uses */
.st-0[b-pck2w57z6j] { --h: var(--st0-head); --b: var(--st0-body); --l: var(--st0-line); --t: var(--st0-text); }
.st-1[b-pck2w57z6j] { --h: var(--st1-head); --b: var(--st1-body); --l: var(--st1-line); --t: var(--st1-text); }
.st-2[b-pck2w57z6j] { --h: var(--st2-head); --b: var(--st2-body); --l: var(--st2-line); --t: var(--st2-text); }
.st-3[b-pck2w57z6j] { --h: var(--st3-head); --b: var(--st3-body); --l: var(--st3-line); --t: var(--st3-text); }
.st-4[b-pck2w57z6j] { --h: var(--st4-head); --b: var(--st4-body); --l: var(--st4-line); --t: var(--st4-text); }
.st-5[b-pck2w57z6j] { --h: var(--st5-head); --b: var(--st5-body); --l: var(--st5-line); --t: var(--st5-text); }

.occ-hidden[b-pck2w57z6j] {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap;
}

button:focus-visible[b-pck2w57z6j], input:focus-visible[b-pck2w57z6j] { outline: 2px solid var(--occ-link); outline-offset: 2px; }

/* ---------- header bar ---------- */
.occ-head[b-pck2w57z6j] {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 16px;
    padding: 12px 16px;
    background: var(--occ-card);
    border: 1px solid var(--occ-line);
    border-radius: var(--rms-r-lg);
    box-shadow: var(--rms-shadow-sm);
}

.occ-head-title[b-pck2w57z6j] { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; }
.occ-title[b-pck2w57z6j] { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); line-height: 1.2; white-space: nowrap; }
/* ---------- live status line ---------- */
.occ-live[b-pck2w57z6j] {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--fs-sm); color: var(--occ-muted);
    white-space: nowrap;
}
.occ-live-dot[b-pck2w57z6j] {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--rms-success);
    box-shadow: 0 0 0 0 rgba(25, 135, 84, .5);
    animation: occ-pulse-b-pck2w57z6j 2s ease-out infinite;
}
.occ-live-dot.is-offline[b-pck2w57z6j] { background: var(--rms-danger); animation: none; }
.occ-live-text[b-pck2w57z6j] { font-weight: var(--fw-medium); color: var(--rms-success-dark); }
.occ-live-dot.is-offline + .occ-live-text[b-pck2w57z6j] { color: var(--rms-danger-dark); }
.occ-live-sep[b-pck2w57z6j] { color: var(--rms-gray-400); }
.occ-updated[b-pck2w57z6j] { font-variant-numeric: tabular-nums; }

@keyframes occ-pulse-b-pck2w57z6j {
    0%   { box-shadow: 0 0 0 0 rgba(25, 135, 84, .5); }
    70%  { box-shadow: 0 0 0 6px rgba(25, 135, 84, 0); }
    100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

/* round refresh button with countdown ring to the next auto-refresh */
.occ-refresh-btn[b-pck2w57z6j] {
    position: relative;
    width: 32px; height: 32px; margin-left: 2px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: transparent; color: var(--rms-primary);
    cursor: pointer;
}
.occ-refresh-btn:hover:not(:disabled)[b-pck2w57z6j] { background: var(--rms-primary-soft); }
.occ-refresh-btn:disabled[b-pck2w57z6j] { cursor: wait; }

.occ-ring[b-pck2w57z6j] { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.occ-ring circle[b-pck2w57z6j] { fill: none; stroke-width: 2.5; }
.occ-ring-track[b-pck2w57z6j] { stroke: var(--rms-border); }
.occ-ring-progress[b-pck2w57z6j] {
    stroke: var(--rms-primary);
    stroke-linecap: round;
    stroke-dasharray: 81.7;          /* 2 × π × r(13) */
    stroke-dashoffset: 0;
    animation-name: occ-countdown-b-pck2w57z6j;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes occ-countdown-b-pck2w57z6j { to { stroke-dashoffset: 81.7; } }

.occ-refresh-icon[b-pck2w57z6j] { position: relative; }

.occ-tools[b-pck2w57z6j] { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }

/* search with icon — the one item that shrinks so the bar fits on one line */
.occ-search-wrap[b-pck2w57z6j] {
    position: relative;
    flex: 1 1 220px; display: flex; min-width: 160px; max-width: 320px;
}
.occ-search-icon[b-pck2w57z6j] {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--rms-gray); pointer-events: none;
}
.occ-search[b-pck2w57z6j] {
    width: 100%; height: var(--h-control); padding: 0 12px 0 34px;
    border: 1px solid var(--occ-input-line); border-radius: var(--rms-r-md);
    background: var(--rms-surface-2); color: var(--occ-ink);
    font: inherit; font-size: var(--fs-base);
}
.occ-search:focus[b-pck2w57z6j] { background: var(--occ-card); border-color: var(--rms-primary); outline: none; box-shadow: 0 0 0 3px rgba(13, 110, 253, .15); }

.occ-spin[b-pck2w57z6j] { animation: occ-spin-b-pck2w57z6j .8s linear infinite; }
@keyframes occ-spin-b-pck2w57z6j { to { transform: rotate(360deg); } }

/* ---------- summary chips (also filters) ----------
   Dark text on a light status tint = sharp and readable.
   Selected chip turns solid in its status colour. */
.st-total[b-pck2w57z6j] { --h: var(--rms-text-2); --b: var(--rms-surface-2); --l: var(--rms-border-strong); --t: #FFFFFF; }

.occ-badges[b-pck2w57z6j] { flex: 0 0 auto; display: flex; flex-wrap: nowrap; gap: 6px; margin-left: auto; }
.occ-badge[b-pck2w57z6j] {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 6px;
    height: var(--h-control-lg); padding: 0 10px;
    border: 1px solid var(--l); border-radius: var(--rms-r-md);
    background: var(--b); color: var(--rms-text);
    font: inherit; font-size: var(--fs-s); font-weight: var(--fw-medium);
    white-space: nowrap; cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.occ-badge:hover[b-pck2w57z6j] { border-color: var(--h); }

.occ-badge-dot[b-pck2w57z6j] { width: 10px; height: 10px; border-radius: 50%; background: var(--h); flex: 0 0 auto; }
/* count on top, % underneath — keeps chips narrow */
.occ-badge-num[b-pck2w57z6j] {
    display: flex; flex-direction: column; align-items: flex-end;
    margin-left: 4px; line-height: 1.1;
}
.occ-badge-count[b-pck2w57z6j] {
    min-width: 18px; text-align: right;
    font-size: var(--fs-md); font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
}
.occ-badge-pct[b-pck2w57z6j] {
    font-size: var(--fs-xs); font-weight: var(--fw-medium);
    color: var(--rms-text-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.occ-badge[aria-pressed="true"] .occ-badge-pct[b-pck2w57z6j] { color: inherit; opacity: .9; }

.occ-badge[aria-pressed="true"][b-pck2w57z6j] { background: var(--h); border-color: var(--h); color: var(--t); }
.occ-badge[aria-pressed="true"] .occ-badge-dot[b-pck2w57z6j] { background: var(--t); }

/* ---------- messages ---------- */
.occ-error[b-pck2w57z6j] {
    margin: 0; padding: 10px 14px;
    border: 1px solid var(--rms-danger-border); border-radius: var(--rms-r-md);
    background: var(--rms-danger-soft); color: var(--rms-danger-text);
}
.occ-empty[b-pck2w57z6j] {
    margin: 0; padding: 28px;
    text-align: center; color: var(--occ-muted);
    background: var(--occ-card);
    border: 1px dashed var(--occ-input-line); border-radius: var(--rms-r-md);
}

/* ---------- status sections ---------- */
.occ-sec-title[b-pck2w57z6j] {
    margin: 0 0 8px;
    display: flex; align-items: center; gap: 8px;
    font-size: var(--fs-base); font-weight: var(--fw-bold); letter-spacing: .03em;
}
.occ-dot[b-pck2w57z6j] { width: 10px; height: 10px; border-radius: 50%; background: var(--h); }
.occ-count[b-pck2w57z6j] {
    padding: 1px 8px; border-radius: var(--rms-r-lg);
    background: var(--rms-gray-200); color: var(--rms-text);
    font-size: var(--fs-xs); font-weight: var(--fw-medium);
}

.occ-grid[b-pck2w57z6j] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--occ-tile-min), 1fr));
    gap: var(--occ-tile-gap);
}

/* ---------- room tile ---------- */
.occ-tile[b-pck2w57z6j] {
    display: flex; flex-direction: column;
    min-height: 44px; min-width: 0; padding: 0;
    text-align: left; font: inherit;
    border: 1px solid var(--l); border-radius: var(--rms-r-sm);
    background: var(--b);
    overflow: hidden; cursor: pointer;
    /* no transform here: moving/scaled layers make small text look blurry */
    transition: box-shadow .12s ease, border-color .12s ease;
}
.occ-tile:hover[b-pck2w57z6j] { box-shadow: 0 0 0 2px var(--h); }

.occ-tile-head[b-pck2w57z6j] {
    display: flex; align-items: center; justify-content: space-between; gap: 2px;
    padding: 3px 5px;
    background: var(--h); color: var(--t);
}
.occ-tile-no[b-pck2w57z6j] {
    font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.occ-ac[b-pck2w57z6j] {
    flex: 0 0 auto;
    padding: 2px 4px; border-radius: 3px;
    font-size: 10px; font-weight: var(--fw-bold); line-height: 1;
    color: #FFFFFF;
}
.occ-ac.is-ac[b-pck2w57z6j] { background: var(--rms-danger); }
.occ-ac.is-nonac[b-pck2w57z6j] { background: var(--rms-text); }

.occ-tile-body[b-pck2w57z6j] {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 3px 4px 4px;
    color: var(--occ-ink);
}
.occ-tile-floor[b-pck2w57z6j],
.occ-tile-status[b-pck2w57z6j] {
    max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 11px is the smallest size Windows renders crisply */
.occ-tile-floor[b-pck2w57z6j] { font-size: var(--fs-xs); line-height: 1.3; color: var(--rms-text); }
.occ-tile-status[b-pck2w57z6j] { font-size: var(--fs-xs); line-height: 1.3; font-weight: var(--fw-bold); color: var(--rms-text); }

/* =====================================================================
   Responsive
   ===================================================================== */

/* Smaller laptops / tablets: not enough width for one line → badges move to a second row */
@media (max-width: 1300px) {
    .occ-head[b-pck2w57z6j] { flex-wrap: wrap; }

    /* search + refresh fill the rest of the title row */
    .occ-tools[b-pck2w57z6j] { flex: 1 1 320px; }
    .occ-search-wrap[b-pck2w57z6j] { max-width: none; }

    /* chips become an even grid: 6 equal columns in one row */
    .occ-badges[b-pck2w57z6j] {
        margin-left: 0; flex: 1 1 100%;
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 8px;
    }
    .occ-badge[b-pck2w57z6j] { width: 100%; }
    .occ-badge-num[b-pck2w57z6j] { margin-left: auto; }   /* label left, numbers right */
}

/* Narrow window / tablet: 2 even rows of 3 chips */
@media (max-width: 1000px) {
    .occ-badges[b-pck2w57z6j] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Phone: full-width search, scrolling badges, smaller tiles */
@media (max-width: 560px) {
    .occ[b-pck2w57z6j] { --occ-tile-min: 66px; --occ-tile-gap: 5px; }
    .occ-title[b-pck2w57z6j] { font-size: var(--fs-lg); }
    .occ-tools[b-pck2w57z6j] { flex: 1 1 100%; }
    .occ-badges[b-pck2w57z6j] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .occ-badge[b-pck2w57z6j] { padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .occ-tile[b-pck2w57z6j], .occ-badge[b-pck2w57z6j] { transition: none; }
    .occ-spin[b-pck2w57z6j], .occ-live-dot[b-pck2w57z6j] { animation: none; }
}