/*
 * Hotels by CrewByte.
 *
 * Owns the `cb-ht-` namespace and nothing else. Loaded after app.css, which is
 * ~29,000 lines and carries a real duplicate-selector risk — keeping this
 * separate means nothing here can be silently overridden from a thousand lines
 * away, and the whole extension can be reverted by deleting one file.
 *
 * Palette is CrewByte's own, so Core, Inventory, Compliance and Hotels read as
 * one product rather than four.
 *
 * Three rules run through the whole file:
 *
 *   1. **Tap targets are at least 44px.** A housekeeper is standing in a
 *      corridor holding a phone in one hand and a stack of towels in the other.
 *      A control that needs a careful finger is a control that does not get
 *      used.
 *
 *   2. **Status is never colour alone.** Every room state carries a word as
 *      well as a tint — for colour-blind users, and for anybody reading a phone
 *      in a bright window-lit corridor where pale amber and pale green are
 *      indistinguishable.
 *
 *   3. **Mobile is the default, not the fallback.** Every layout starts as one
 *      column and widens. Most of the people who open this product will never
 *      see it on a desktop.
 */

.cb-ht-body {
    --ht-navy: #0C2A5E;
    --ht-navy-deep: #071D42;
    --ht-blue: #2C8FE5;
    --ht-blue-strong: #1474C5;
    --ht-blue-soft: #EAF5FF;

    --ht-ink: #0B1D3A;
    --ht-muted: #55708C;
    --ht-faint: #8698AE;
    --ht-line: #DCE7F2;
    --ht-canvas: #F4F8FC;
    --ht-surface: #FFFFFF;

    --ht-good: #0C7F4F;
    --ht-good-soft: #E8F6EF;
    --ht-warn: #B57408;
    --ht-warn-soft: #FDF4E3;
    --ht-bad: #C4384A;
    --ht-bad-soft: #FCEDEF;
    --ht-review: #6B4FBB;
    --ht-review-soft: #F0ECFB;

    --ht-radius: 12px;
    --ht-radius-lg: 18px;

    margin: 0;
    background: var(--ht-canvas);
    color: var(--ht-ink);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

.cb-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ==================================================== frame and sidebar ==== */

.cb-ht-frame { display: flex; min-height: 100vh; }
.cb-ht-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/*
 * The sidebar is hidden on small screens and replaced by the bottom tab bar.
 * Mobile-first, so it is display:none by default and switched on at 1000px.
 */
.cb-ht-side { display: none; }

.cb-ht-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 600;
}

.cb-ht-brand img { height: 22px; width: auto; display: block; }

.cb-ht-brand em {
    font-style: normal;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .75;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, .25);
}

/* ============================================================ top bar ==== */

.cb-ht-bar {
    background: var(--ht-navy);
    color: #FFFFFF;
    position: sticky;
    top: 0;
    z-index: 20;
}

.cb-ht-bar-inner {
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 58px;
}

.cb-ht-account {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

/*
 * The workspace switcher sits on the navy bar, so it opts OUT of the base
 * control styling rather than inheriting a white box onto a dark background.
 */
.cb-ht-body .cb-ht-account select {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #FFFFFF;
    border-radius: 8px;
    padding: 7px 32px 7px 10px;
    font-size: 13px;
    max-width: 190px;
    min-height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.cb-ht-account select option { color: var(--ht-ink); }

.cb-ht-workspace,
.cb-ht-whoami { font-size: 13px; color: rgba(255, 255, 255, .8); }

.cb-ht-signout button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    min-width: 40px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: transparent;
    color: rgba(255, 255, 255, .85);
    cursor: pointer;
}

.cb-ht-signout button:hover { background: rgba(255, 255, 255, .12); color: #FFFFFF; }
.cb-ht-signout svg { width: 16px; height: 16px; }

@media (max-width: 560px) {
    .cb-ht-whoami { display: none; }
}

/* ======================================================= bottom tab bar ==== */

.cb-ht-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    background: var(--ht-surface);
    border-top: 1px solid var(--ht-line);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.cb-ht-tabbar a {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* Comfortably over the 44px rule — this is the control used most often,
       on the smallest screen, by someone holding something in the other hand. */
    min-height: 56px;
    padding: 6px 4px;
    color: var(--ht-muted);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
}

.cb-ht-tabbar a span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-ht-tabbar svg { width: 20px; height: 20px; }
.cb-ht-tabbar a.is-active { color: var(--ht-blue-strong); }

/* ============================================================ shell ==== */

.cb-ht-main { padding: 20px 0 84px; }

.cb-ht-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px;
    width: 100%;
    box-sizing: border-box;
}

/* ====================================================== desktop sidebar ==== */

@media (min-width: 1000px) {
    .cb-ht-tabbar { display: none; }
    .cb-ht-main { padding-bottom: 40px; }

    .cb-ht-side {
        display: flex;
        flex-direction: column;
        flex: 0 0 250px;
        width: 250px;
        background: var(--ht-navy);
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
        padding: 18px 12px;
        box-sizing: border-box;
    }

    .cb-ht-side .cb-ht-brand { padding: 0 10px 16px; }

    .cb-ht-side-nav { display: flex; flex-direction: column; gap: 18px; flex: 1 1 auto; }
    .cb-ht-side-group { display: flex; flex-direction: column; gap: 2px; }

    .cb-ht-side-label {
        margin: 0 0 4px;
        padding: 0 10px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .45);
    }

    .cb-ht-side-link {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 42px;
        padding: 0 10px;
        border-radius: 9px;
        color: rgba(255, 255, 255, .78);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
    }

    .cb-ht-side-link:hover { background: rgba(255, 255, 255, .1); color: #FFFFFF; }

    .cb-ht-side-link.is-active {
        background: #FFFFFF;
        color: var(--ht-navy);
        font-weight: 600;
    }

    .cb-ht-side-link svg { width: 17px; height: 17px; flex: 0 0 17px; }

    .cb-ht-side-foot {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, .14);
    }

    .cb-ht-side-link.is-quiet { color: rgba(255, 255, 255, .55); font-size: 13px; }

    /* The brand already sits in the sidebar; repeating it in the bar is noise. */
    .cb-ht-brand-compact { display: none; }
}

.cb-ht-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.cb-ht-page-head h1 {
    margin: 0;
    font-size: 26px;
    letter-spacing: -.02em;
}

.cb-ht-page-head p {
    margin: 4px 0 0;
    color: var(--ht-muted);
    font-size: 14px;
}

.cb-ht-inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ============================================================ cards ==== */

.cb-ht-card {
    background: var(--ht-surface);
    border: 1px solid var(--ht-line);
    border-radius: var(--ht-radius-lg);
    padding: 18px;
    margin-bottom: 16px;
}

.cb-ht-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.cb-ht-card-head h2 {
    margin: 0;
    font-size: 17px;
    letter-spacing: -.01em;
}

.cb-ht-card-head p {
    margin: 3px 0 0;
    font-size: 13px;
    color: var(--ht-muted);
}

/* ============================================================ stats ==== */

.cb-ht-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.cb-ht-stat {
    background: var(--ht-surface);
    border: 1px solid var(--ht-line);
    border-radius: var(--ht-radius);
    padding: 14px;
}

.cb-ht-stat strong {
    display: block;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.cb-ht-stat span {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ht-muted);
    margin-top: 5px;
}

.cb-ht-stat small { display: block; font-size: 12px; color: var(--ht-faint); margin-top: 3px; }

.cb-ht-stat.is-good strong { color: var(--ht-good); }
.cb-ht-stat.is-warn strong { color: var(--ht-warn); }
.cb-ht-stat.is-bad strong { color: var(--ht-bad); }

/* ============================================================ rooms ==== */

.cb-ht-rooms {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 10px;
}

.cb-ht-room {
    display: block;
    border: 1px solid var(--ht-line);
    border-left: 4px solid var(--ht-faint);
    border-radius: var(--ht-radius);
    background: var(--ht-surface);
    padding: 12px;
    text-decoration: none;
    color: inherit;
    min-height: 92px;
}

.cb-ht-room:hover { border-color: var(--ht-blue); }

.cb-ht-room b {
    display: block;
    font-size: 19px;
    letter-spacing: -.01em;
}

.cb-ht-room span {
    display: block;
    font-size: 12px;
    color: var(--ht-muted);
    margin-top: 2px;
}

.cb-ht-room em {
    display: inline-block;
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 8px;
}

/* Tone is carried by the left border AND the state word, never colour alone. */
.cb-ht-room.is-ready { border-left-color: var(--ht-good); }
.cb-ht-room.is-ready em { color: var(--ht-good); }
.cb-ht-room.is-dirty { border-left-color: var(--ht-warn); background: var(--ht-warn-soft); }
.cb-ht-room.is-dirty em { color: var(--ht-warn); }
.cb-ht-room.is-busy { border-left-color: var(--ht-blue); background: var(--ht-blue-soft); }
.cb-ht-room.is-busy em { color: var(--ht-blue-strong); }
.cb-ht-room.is-review { border-left-color: var(--ht-review); background: var(--ht-review-soft); }
.cb-ht-room.is-review em { color: var(--ht-review); }
.cb-ht-room.is-blocked { border-left-color: var(--ht-bad); background: var(--ht-bad-soft); }
.cb-ht-room.is-blocked em { color: var(--ht-bad); }

/* ============================================================= list ==== */

.cb-ht-list { display: flex; flex-direction: column; gap: 8px; }

.cb-ht-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--ht-line);
    border-radius: var(--ht-radius);
    background: var(--ht-surface);
    text-decoration: none;
    color: inherit;
    min-height: 56px;
}

.cb-ht-row:hover { border-color: var(--ht-blue); }
.cb-ht-row-main { flex: 1 1 auto; min-width: 0; }
.cb-ht-row-main b { display: block; font-size: 15px; }
.cb-ht-row-main span { display: block; font-size: 13px; color: var(--ht-muted); margin-top: 2px; }
.cb-ht-row-side { flex: 0 0 auto; text-align: right; font-size: 13px; color: var(--ht-muted); }

.cb-ht-row.is-urgent { border-left: 4px solid var(--ht-bad); }
.cb-ht-row.is-high { border-left: 4px solid var(--ht-warn); }
.cb-ht-row.is-done { opacity: .62; }

/* =========================================================== badges ==== */

.cb-ht-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

.cb-ht-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    background: var(--ht-blue-soft);
    color: var(--ht-blue-strong);
    white-space: nowrap;
}

.cb-ht-badge.is-good { background: var(--ht-good-soft); color: var(--ht-good); }
.cb-ht-badge.is-warn { background: var(--ht-warn-soft); color: var(--ht-warn); }
.cb-ht-badge.is-bad { background: var(--ht-bad-soft); color: var(--ht-bad); }
.cb-ht-badge.is-review { background: var(--ht-review-soft); color: var(--ht-review); }
.cb-ht-badge.is-quiet { background: #EEF3F8; color: var(--ht-muted); }

/* ========================================================= progress ==== */

.cb-ht-progress {
    height: 8px;
    border-radius: 999px;
    background: #E6EDF5;
    overflow: hidden;
    margin-top: 8px;
}

.cb-ht-progress i { display: block; height: 100%; background: var(--ht-good); border-radius: 999px; }
.cb-ht-progress.is-low i { background: var(--ht-warn); }

/* ========================================================== buttons ==== */

.cb-ht-primary,
.cb-ht-quiet,
.cb-ht-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
}

.cb-ht-primary { background: var(--ht-navy); color: #FFFFFF; }
.cb-ht-primary:hover { background: var(--ht-navy-deep); }
.cb-ht-quiet { background: var(--ht-surface); color: var(--ht-ink); border-color: var(--ht-line); }
.cb-ht-quiet:hover { border-color: var(--ht-blue); color: var(--ht-blue-strong); }
.cb-ht-danger { background: var(--ht-bad-soft); color: var(--ht-bad); border-color: #F3D2D7; }
.cb-ht-danger:hover { background: #F8DDE1; }

.cb-ht-primary svg, .cb-ht-quiet svg, .cb-ht-danger svg { width: 17px; height: 17px; }

.cb-ht-block { width: 100%; }

.cb-ht-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* =========================================================== forms ===== */

/*
 * CONTROLS ARE STYLED BY ELEMENT, SCOPED TO THIS PRODUCT — not by wrapper.
 *
 * The first version of this file styled controls only as
 * `.cb-ht-field select { … }`. That covered the tidy stacked forms and missed
 * every control that lives anywhere else: the property picker in each page
 * header, the filter selects on the maintenance and rooms toolbars, the
 * assignee dropdown on each housekeeping row, the date box. Those all fell
 * back to the browser default — a 24px unstyled select with square corners
 * sitting next to 44px rounded ones.
 *
 * They were then patched one at a time with inline `style="…"` attributes,
 * which is how one missing rule turned into forty-eight of them on a single
 * screen and still left holes.
 *
 * Scoping to `.cb-ht-body` is what makes an element selector safe here: it is
 * on this product's <body> and nothing else, so this cannot reach app.css's
 * markup even though both stylesheets are loaded on the same page.
 */
.cb-ht-body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.cb-ht-body select,
.cb-ht-body textarea {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--ht-line);
    border-radius: 10px;
    background: var(--ht-surface);
    font-size: 15px;
    font-family: inherit;
    color: var(--ht-ink);
    box-sizing: border-box;
    max-width: 100%;
}

.cb-ht-body select {
    /* Native arrow is inconsistent across platforms at this height. */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2355708C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.cb-ht-body textarea { min-height: 88px; resize: vertical; }

.cb-ht-body input:focus,
.cb-ht-body select:focus,
.cb-ht-body textarea:focus {
    outline: 2px solid var(--ht-blue);
    outline-offset: 1px;
    border-color: var(--ht-blue);
}

/* `.cb-ht-field` now owns LAYOUT ONLY — the label, the spacing, the hint. */
.cb-ht-field { margin-bottom: 13px; }

.cb-ht-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--ht-ink);
}

.cb-ht-field small { display: block; font-size: 12px; color: var(--ht-muted); margin-top: 4px; }

.cb-ht-field input,
.cb-ht-field select,
.cb-ht-field textarea { width: 100%; }

.cb-ht-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0 14px;
}

.cb-ht-checks { display: flex; flex-wrap: wrap; gap: 8px; }

.cb-ht-checks label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    border: 1px solid var(--ht-line);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    min-height: 40px;
    background: var(--ht-surface);
}

.cb-ht-checks input { width: 18px; height: 18px; }

/* ====================================================== checklist ====== */

.cb-ht-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--ht-line);
    border-radius: var(--ht-radius);
    background: var(--ht-surface);
    margin-bottom: 8px;
}

.cb-ht-check-body { flex: 1 1 auto; min-width: 0; }
.cb-ht-check-body b { display: block; font-size: 15px; font-weight: 600; }
.cb-ht-check-body small { display: block; font-size: 13px; color: var(--ht-muted); margin-top: 3px; }
.cb-ht-check-body p { margin: 6px 0 0; font-size: 13px; color: var(--ht-warn); }

.cb-ht-check.is-done { background: var(--ht-good-soft); border-color: #CFE9DD; }
.cb-ht-check.is-done .cb-ht-check-body b { text-decoration: line-through; color: var(--ht-muted); }
.cb-ht-check.is-issue { background: var(--ht-warn-soft); border-color: #F0DFBB; }
.cb-ht-check.is-skipped { opacity: .68; }

.cb-ht-check-actions { display: flex; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; }

.cb-ht-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--ht-line);
    background: var(--ht-surface);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--ht-muted);
}

.cb-ht-tick:hover { border-color: var(--ht-blue); color: var(--ht-blue-strong); }
.cb-ht-tick.is-on { background: var(--ht-good); border-color: var(--ht-good); color: #FFFFFF; }
.cb-ht-tick.is-flag.is-on { background: var(--ht-warn); border-color: var(--ht-warn); }
.cb-ht-tick svg { width: 18px; height: 18px; }

/* ========================================================= priorities == */

.cb-ht-priorities { display: flex; flex-direction: column; gap: 8px; }

.cb-ht-priority {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 13px 14px;
    border-radius: var(--ht-radius);
    border: 1px solid var(--ht-line);
    border-left: 4px solid var(--ht-warn);
    background: var(--ht-warn-soft);
    text-decoration: none;
    color: inherit;
}

.cb-ht-priority.is-urgent { border-left-color: var(--ht-bad); background: var(--ht-bad-soft); }
.cb-ht-priority b { display: block; font-size: 15px; }
.cb-ht-priority span { display: block; font-size: 13px; color: var(--ht-muted); margin-top: 2px; }

/* ========================================================= timeline ==== */

.cb-ht-timeline { display: flex; flex-direction: column; gap: 0; }

.cb-ht-event {
    display: flex;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ht-line);
    font-size: 14px;
}

.cb-ht-event:last-child { border-bottom: 0; }
.cb-ht-event time { flex: 0 0 132px; font-size: 12px; color: var(--ht-faint); }
.cb-ht-event div { flex: 1 1 auto; min-width: 0; }
.cb-ht-event b { font-weight: 600; }
.cb-ht-event p { margin: 3px 0 0; color: var(--ht-muted); font-size: 13px; white-space: pre-wrap; }

/* =========================================================== tables ==== */

.cb-ht-table-wrap { overflow-x: auto; }

.cb-ht-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cb-ht-table th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ht-muted);
    padding: 9px 10px;
    border-bottom: 1px solid var(--ht-line);
    white-space: nowrap;
}
.cb-ht-table td { padding: 11px 10px; border-bottom: 1px solid var(--ht-line); vertical-align: top; }
.cb-ht-table tr:last-child td { border-bottom: 0; }
.cb-ht-table .is-number { text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================ notes ==== */

.cb-ht-note {
    border: 1px solid var(--ht-line);
    border-left: 4px solid var(--ht-blue);
    border-radius: var(--ht-radius);
    background: var(--ht-surface);
    padding: 14px;
    margin-bottom: 10px;
}

.cb-ht-note.is-urgent { border-left-color: var(--ht-bad); }
.cb-ht-note.is-high { border-left-color: var(--ht-warn); }
.cb-ht-note.is-carried { background: var(--ht-warn-soft); }

.cb-ht-note h3 { margin: 0; font-size: 15px; }
.cb-ht-note p { margin: 6px 0 0; font-size: 14px; color: var(--ht-ink); white-space: pre-wrap; }
.cb-ht-note footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 11px;
    font-size: 12px;
    color: var(--ht-faint);
}

/* ============================================================ misc ===== */

.cb-ht-empty {
    text-align: center;
    padding: 34px 18px;
    color: var(--ht-muted);
}

.cb-ht-empty svg { width: 30px; height: 30px; color: var(--ht-faint); margin-bottom: 8px; }
.cb-ht-empty p { margin: 0; font-size: 14px; }
.cb-ht-empty strong { display: block; font-size: 16px; color: var(--ht-ink); margin-bottom: 5px; }

.cb-ht-notice {
    border: 1px solid #F0DFBB;
    background: var(--ht-warn-soft);
    color: #7A5206;
    border-radius: var(--ht-radius);
    padding: 13px 15px;
    font-size: 14px;
    margin-bottom: 16px;
}

.cb-ht-notice.is-info { border-color: #C9E1F7; background: var(--ht-blue-soft); color: #14477E; }

.cb-ht-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

/*
 * The two-column split kicks in at 1200px rather than 900px now that a 250px
 * sidebar is eating the left edge. At 900px total width there is roughly 650px
 * left for content, and splitting that into 1.55fr / 1fr gives a 250px right
 * column — too narrow for the forms that live there.
 */
@media (min-width: 1200px) {
    .cb-ht-split { grid-template-columns: 1.55fr 1fr; align-items: start; }
}

@media (min-width: 900px) {
    .cb-ht-main { padding-top: 26px; }
}

.cb-ht-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 13px;
    color: var(--ht-muted);
    margin: 0 0 14px;
}

.cb-ht-meta b { color: var(--ht-ink); font-weight: 600; }

details.cb-ht-more { margin-top: 12px; }
details.cb-ht-more > summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--ht-blue-strong);
    min-height: 44px;
    display: flex;
    align-items: center;
}
details.cb-ht-more[open] > summary { margin-bottom: 10px; }

/* ========================================================== dialog ===== */

.cb-ht-confirm {
    border: 0;
    border-radius: var(--ht-radius-lg);
    padding: 0;
    max-width: 400px;
    width: calc(100% - 32px);
    box-shadow: 0 24px 60px rgba(7, 29, 66, .28);
}

.cb-ht-confirm::backdrop { background: rgba(7, 29, 66, .5); }
.cb-ht-confirm-inner { padding: 22px; text-align: center; }
.cb-ht-confirm-inner h2 { margin: 10px 0 6px; font-size: 18px; }
.cb-ht-confirm-inner p { margin: 0; color: var(--ht-muted); font-size: 14px; }
.cb-ht-confirm-icon svg { width: 32px; height: 32px; color: var(--ht-warn); }
.cb-ht-confirm-actions { display: flex; gap: 8px; margin-top: 18px; }
.cb-ht-confirm-actions button { flex: 1 1 0; }

/* =========================================================== auth ====== */

.cb-ht-auth-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: linear-gradient(160deg, #071D42 0%, #0C2A5E 55%, #14477E 100%);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #0B1D3A;
    box-sizing: border-box;
}

.cb-ht-auth-card {
    width: 100%;
    max-width: 400px;
    background: #FFFFFF;
    border-radius: 20px;
    padding: 30px 26px;
    box-shadow: 0 26px 70px rgba(4, 16, 38, .38);
    box-sizing: border-box;
}

.cb-ht-auth-card img { height: 26px; display: block; margin: 0 auto 18px; }
.cb-ht-auth-card h1 { margin: 0 0 6px; font-size: 21px; text-align: center; }
.cb-ht-auth-card > p { margin: 0 0 20px; text-align: center; color: #55708C; font-size: 14px; }
.cb-ht-auth-card .cb-ht-primary { width: 100%; margin-top: 6px; }

.cb-ht-auth-foot {
    margin-top: 18px;
    text-align: center;
    font-size: 13px;
    color: #55708C;
}

.cb-ht-auth-foot a { color: #1474C5; }

@media print {
    .cb-ht-bar, .cb-ht-actions, .cb-ht-confirm, form { display: none !important; }
    .cb-ht-body { background: #FFFFFF; }
    .cb-ht-card { border-color: #CCCCCC; break-inside: avoid; }
}

/* A short numeric control, e.g. the sort-order box on a checklist line. */
.cb-ht-narrow { width: 90px !important; flex: 0 0 90px; }

/* ======================================================= front desk stay ==== */

/*
 * One booking, with its actions on it.
 *
 * A card rather than a table row: at a desk this is read at a glance and
 * touched repeatedly, and the actions need room to be full-size tap targets
 * rather than icons crammed into a final column.
 */
.cb-ht-stay {
    border: 1px solid var(--ht-line);
    border-left: 4px solid var(--ht-line);
    border-radius: var(--ht-radius);
    background: var(--ht-surface);
    padding: 14px;
    margin-bottom: 10px;
}

/* The room is not ready and somebody is arriving into it. */
.cb-ht-stay.is-attention { border-left-color: var(--ht-warn); background: var(--ht-warn-soft); }
.cb-ht-stay.is-noshow { opacity: .6; }

.cb-ht-stay-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.cb-ht-stay-who b { display: block; font-size: 17px; letter-spacing: -.01em; }
.cb-ht-stay-who span { display: block; font-size: 14px; color: var(--ht-muted); margin-top: 1px; }

.cb-ht-stay-chips { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }

.cb-ht-stay-meta {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--ht-muted);
}

.cb-ht-stay-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 12px;
}

.cb-ht-stay-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cb-ht-stay-form select { min-width: 150px; }

/*
 * The payment control is tinted by its own value, so a night manager scanning
 * the board sees the unpaid rooms without reading every one. Still carries the
 * word — tint alone is never the signal in this product.
 */
.cb-ht-body select.cb-ht-pay { min-width: 140px; font-weight: 600; }
.cb-ht-body select.cb-ht-pay.is-unpaid { border-color: #E9C4CB; background-color: var(--ht-bad-soft); color: var(--ht-bad); }
.cb-ht-body select.cb-ht-pay.is-deposit { border-color: #F0DFBB; background-color: var(--ht-warn-soft); color: var(--ht-warn); }
.cb-ht-body select.cb-ht-pay.is-paid { border-color: #CFE9DD; background-color: var(--ht-good-soft); color: var(--ht-good); }
.cb-ht-body select.cb-ht-pay.is-invoiced { border-color: #C9E1F7; background-color: var(--ht-blue-soft); color: var(--ht-blue-strong); }

.cb-ht-stay-request {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0 12px;
    align-items: end;
    padding: 12px;
    border: 1px solid var(--ht-line);
    border-radius: var(--ht-radius);
    background: var(--ht-canvas);
}

.cb-ht-stay-request button { grid-column: 1 / -1; justify-self: start; }

@media (max-width: 560px) {
    .cb-ht-stay-chips { justify-content: flex-start; }
    .cb-ht-stay-actions > form,
    .cb-ht-stay-actions .cb-ht-stay-form { flex: 1 1 100%; }
    .cb-ht-stay-actions button { width: 100%; }
    .cb-ht-stay-form select { width: 100%; min-width: 0; }
}