/* Hoteliss UI system — loaded after hoteliss-reservations.css.
   One set of tokens (colour, type, space, radius, elevation, status), one application shell, and the shared
   component refinements every screen inherits. Screens should use the tokens, not their own hard-coded values. */

/* ============================================================ 1. TOKENS */
.hoteliss-reservations {
    /* brand: deep pine, a calm hospitality green. Warm neutrals; no gradients. */
    --hsl-primary: #135d55;
    --hsl-primary-dark: #0d4842;
    --hsl-primary-soft: #e7f1ef;
    --hsl-accent: #b0894f;                    /* warm brass, used very sparingly (brand mark, highlights) */

    --hsl-bg: #f6f4ef;
    --hsl-panel: #ffffff;
    --hsl-soft: #faf8f4;
    --hsl-ink: #1d1b16;
    --hsl-text: #3b3831;
    --hsl-muted: #74705f;
    --hsl-faint: #a19d90;
    --hsl-line: #e8e4da;
    --hsl-line-strong: #d6d1c4;

    /* semantic + operational status. The same concept uses the same tone on every screen. */
    --hsl-success: #16704a;  --hsl-success-bg: #e4f3ea;
    --hsl-warning: #96560a;  --hsl-warning-bg: #fbf0dc;
    --hsl-danger: #b0281f;   --hsl-danger-bg: #fbe8e5;
    --hsl-info: #1f5aa3;     --hsl-info-bg: #e6eefa;
    --hsl-violet: #5b4a8e;   --hsl-violet-bg: #eeeaf6;
    --hsl-neutral: #4a473f;  --hsl-neutral-bg: #eeebe3;

    /* type scale */
    --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-num: 32px;
    /* space scale (4px base) */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
    /* shape + elevation: borders and surface contrast first, shadow last */
    --hsl-radius: 12px; --hsl-radius-sm: 8px;
    --hsl-shadow: 0 1px 2px rgba(29, 27, 22, .04);
    --hsl-shadow-pop: 0 12px 32px rgba(29, 27, 22, .14), 0 2px 6px rgba(29, 27, 22, .06);
    --hsl-focus: 0 0 0 3px rgba(19, 93, 85, .22);
    /* layout */
    --hui-nav-w: 252px; --hui-rail-w: 72px; --hui-head-h: 60px; --hui-content-w: 1480px;

    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--fs-base);
    color: var(--hsl-text);
    background: var(--hsl-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.hoteliss-reservations h1, .hoteliss-reservations h2, .hoteliss-reservations h3, .hoteliss-reservations h4 { color: var(--hsl-ink); font-family: inherit; }
.hoteliss-reservations a { color: var(--hsl-primary); }
.hoteliss-reservations a:hover { color: var(--hsl-primary-dark); }
.hoteliss-reservations ::selection { background: #cfe5e1; }
.hoteliss-reservations :focus-visible { outline: 2px solid var(--hsl-primary); outline-offset: 2px; border-radius: 6px; }
.hoteliss-reservations input:focus-visible, .hoteliss-reservations select:focus-visible, .hoteliss-reservations textarea:focus-visible { outline: 0; }

/* ============================================================ 2. TYPOGRAPHY */
.reservation-eyebrow { color: var(--hsl-muted); font-size: 11.5px; letter-spacing: .1em; }
.reservation-title { font-size: var(--fs-2xl); font-weight: 650; letter-spacing: -.025em; }
.rv-header { align-items: center; margin-bottom: var(--sp-6); }
.rv-h { color: var(--hsl-ink); font-size: var(--fs-md); font-weight: 620; letter-spacing: -.01em; }
.rv-muted, .rv-cell-sub { color: var(--hsl-muted); }
.rv-metric-value, .fo-total strong, .reservation-price strong, .num, .rv-num { font-variant-numeric: tabular-nums; }
.rv-metric-label, .fo-total span { letter-spacing: .06em; text-transform: uppercase; font-size: 11.5px; color: var(--hsl-muted); font-weight: 600; }
.rv-metric-value { font-size: var(--fs-num); font-weight: 650; letter-spacing: -.03em; }

/* ============================================================ 3. SHELL */
.hoteliss-reservations .layout-wrapper, .hoteliss-reservations .content-wrapper { background: var(--hsl-bg); }
.hoteliss-reservations .content-wrapper { min-height: calc(100vh - var(--hui-head-h)); display: flex; flex-direction: column; }
.hoteliss-reservations .content-wrapper > .reservation-shell, .hoteliss-reservations .content-wrapper > div:first-child { flex: 1 0 auto; }

/* --- sidebar --- */
.hui-nav.layout-menu { width: var(--hui-nav-w) !important; background: #fdfcf9 !important; border-right: 1px solid var(--hsl-line); box-shadow: none !important; display: flex; flex-direction: column; overflow: hidden; z-index: 1091; transition: width .18s ease, transform .22s ease; }
.hui-nav .menu-inner-shadow { display: none; }
.hui-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: var(--hui-head-h); padding: 0 16px 0 18px; flex: none; border-bottom: 1px solid var(--hsl-line); }
.hui-brand-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; min-width: 0; }
.hui-brand-mark { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--hsl-primary); color: #fff; font-weight: 700; font-size: 16px; letter-spacing: -.02em; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); }
.hui-brand-text { color: var(--hsl-ink); font-size: 18px; font-weight: 680; letter-spacing: -.025em; }
.hui-rail-toggle, .hui-drawer-close { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--hsl-muted); font-size: 18px; cursor: pointer; transition: background .12s, color .12s; }
.hui-rail-toggle:hover, .hui-drawer-close:hover { background: var(--hsl-neutral-bg); color: var(--hsl-ink); }
.hui-nav-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 12px 10px 20px; scrollbar-width: thin; scrollbar-color: var(--hsl-line-strong) transparent; }
.hui-nav-group + .hui-nav-group { margin-top: 18px; }
.hui-nav-label { padding: 0 10px 6px; color: var(--hsl-faint); font-size: 11px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.hui-nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hui-nav-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 7px 10px; border-radius: 9px; color: var(--hsl-text) !important; font-size: 13.5px; font-weight: 520; text-decoration: none !important; white-space: nowrap; transition: background .12s, color .12s; }
.hui-nav-item i { flex: none; width: 20px; font-size: 19px; text-align: center; color: var(--hsl-faint); transition: color .12s; }
.hui-nav-item:hover { background: #f1eee6; color: var(--hsl-ink) !important; }
.hui-nav-item:hover i { color: var(--hsl-text); }
.hui-nav-item.active { background: var(--hsl-primary-soft); color: var(--hsl-primary-dark) !important; font-weight: 620; }
.hui-nav-item.active i { color: var(--hsl-primary); }
.hui-nav-item.active::before { content: ''; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--hsl-primary); }

/* --- desktop geometry (replaces the template's fixed-navbar arithmetic) --- */
@media (min-width: 1200px) {
    .hoteliss-reservations .layout-menu { position: fixed !important; top: 0; bottom: 0; left: 0; transform: none !important; }
    .hoteliss-reservations .layout-page { padding-left: var(--hui-nav-w) !important; transition: padding-left .18s ease; }
    html.hui-rail .hoteliss-reservations .layout-page { padding-left: var(--hui-rail-w) !important; }
    html.hui-rail .hui-nav.layout-menu { width: var(--hui-rail-w) !important; }
    html.hui-rail .hui-brand { padding: 0; justify-content: center; }
    html.hui-rail .hui-brand-text, html.hui-rail .hui-nav-item span { display: none; }
    html.hui-rail .hui-rail-toggle { position: absolute; left: calc(var(--hui-rail-w) - 16px); top: 15px; width: 26px; height: 26px; background: #fff; border: 1px solid var(--hsl-line); box-shadow: var(--hsl-shadow); font-size: 15px; }
    html.hui-rail .hui-rail-toggle i::before { content: '\ee1e'; }   /* expand icon */
    html.hui-rail .hui-nav-label { height: 1px; padding: 0; margin: 6px 12px; overflow: hidden; background: var(--hsl-line); font-size: 0; }
    html.hui-rail .hui-nav-item { justify-content: center; padding: 8px 0; }
    html.hui-rail .hui-nav-item.active::before { left: -10px; }
}
@media (max-width: 1199.98px) {
    .hui-nav.layout-menu { box-shadow: var(--hsl-shadow-pop) !important; }
    .hoteliss-reservations .layout-overlay { background: rgba(29, 27, 22, .4); backdrop-filter: none; z-index: 1090; }
}

/* --- header --- */
.hoteliss-reservations .layout-navbar.navbar-detached, .hoteliss-reservations .layout-navbar {
    position: sticky !important; top: 0; left: auto !important; right: auto !important; width: 100% !important; max-width: none !important; height: var(--hui-head-h); margin: 0 !important; padding: 0 var(--sp-8) !important;
    border-radius: 0 !important; background: rgba(253, 252, 249, .94) !important; border: 0 !important; border-bottom: 1px solid var(--hsl-line) !important; box-shadow: none !important; z-index: 1030; backdrop-filter: none;
}
.hoteliss-reservations .layout-navbar .navbar-nav-right { width: 100%; gap: 12px; }
@media (max-width: 767.98px) { .hoteliss-reservations .layout-navbar.navbar-detached, .hoteliss-reservations .layout-navbar { padding: 0 14px !important; } }
.hui-menu-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-right: 8px; border: 1px solid var(--hsl-line); border-radius: 9px; background: #fff; color: var(--hsl-ink); font-size: 20px; cursor: pointer; }
.hui-find { display: inline-flex; align-items: center; gap: 10px; min-width: 0; width: min(420px, 100%); height: 38px; padding: 0 10px 0 12px; border: 1px solid var(--hsl-line-strong); border-radius: 10px; background: #fff; color: var(--hsl-muted); font-size: 13.5px; cursor: pointer; text-align: left; transition: border-color .12s, box-shadow .12s; }
.hui-find:hover { border-color: var(--hsl-faint); }
.hui-find:focus-visible { box-shadow: var(--hsl-focus); outline: 0; }
.hui-find i { font-size: 18px; color: var(--hsl-faint); }
.hui-find span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hui-kbd { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border: 1px solid var(--hsl-line-strong); border-bottom-width: 2px; border-radius: 6px; background: var(--hsl-soft); color: var(--hsl-muted); font-size: 11.5px; font-weight: 600; font-family: inherit; }
@media (max-width: 767.98px) { .hui-find { width: 38px; padding: 0; justify-content: center; } .hui-find span, .hui-find .hui-kbd { display: none; } }
.rv-bell-btn { width: 38px; height: 38px; border: 1px solid var(--hsl-line); border-radius: 9px; background: #fff; color: var(--hsl-text); }
.rv-bell-btn:hover { background: var(--hsl-soft); }
.rv-user-toggle { padding: 3px 8px 3px 3px; border-radius: 999px; border: 1px solid transparent; }
.rv-user-toggle:hover { background: #fff; border-color: var(--hsl-line); }

/* --- page container + header --- */
.reservation-shell { max-width: var(--hui-content-w); padding: var(--sp-8) var(--sp-8) 56px; }
@media (max-width: 767.98px) { .reservation-shell { padding: 18px 14px 40px; } .reservation-title { font-size: 24px; } }
.content-footer { background: transparent !important; box-shadow: none !important; }
.content-footer .footer-container { padding: 18px 0 !important; justify-content: center !important; color: var(--hsl-faint); font-size: 12.5px; }
.content-footer a { color: var(--hsl-muted) !important; }

/* ============================================================ 4. BUTTONS */
.reservation-button { min-height: 38px; padding: 7px 15px; border-radius: 9px; font-size: 13.5px; font-weight: 570; letter-spacing: -.005em; box-shadow: none; }
.reservation-button:hover { box-shadow: none; }
.reservation-button:focus-visible { box-shadow: var(--hsl-focus); outline: 0; }
.reservation-button.secondary { border-color: var(--hsl-line-strong); background: #fff; }
.reservation-button.secondary:hover { background: var(--hsl-soft); border-color: var(--hsl-faint); }
.reservation-button.danger { border-color: #ecc3be; }
.reservation-button.ghost { color: var(--hsl-muted) !important; background: transparent; border-color: transparent; }
.reservation-button.ghost:hover { background: var(--hsl-neutral-bg); color: var(--hsl-ink) !important; }
.reservation-button.sm { min-height: 32px; padding: 4px 12px; font-size: 12.5px; border-radius: 8px; }
.reservation-button.lg { min-height: 46px; padding: 10px 22px; font-size: 15px; }
.reservation-button i { font-size: 1.15em; }
.reservation-button[wire\:loading], .reservation-button.is-loading { position: relative; pointer-events: none; }
.reservation-button[disabled] { opacity: .5; }
.reservation-button:active { transform: scale(.985); }
.rv-link { color: var(--hsl-primary); font-weight: 550; }

/* ============================================================ 5. BADGES (one tone vocabulary) */
.reservation-badge { padding: 2px 9px; font-size: 12px; font-weight: 580; letter-spacing: 0; }
.reservation-badge.success { color: var(--hsl-success); background: var(--hsl-success-bg); }
.reservation-badge.warning { color: var(--hsl-warning); background: var(--hsl-warning-bg); }
.reservation-badge.danger { color: var(--hsl-danger); background: var(--hsl-danger-bg); }
.reservation-badge.info { color: var(--hsl-info); background: var(--hsl-info-bg); }
.reservation-badge.violet { color: var(--hsl-violet); background: var(--hsl-violet-bg); }
.reservation-badge.neutral { color: var(--hsl-neutral); background: var(--hsl-neutral-bg); }

/* ============================================================ 6. CARDS + METRICS */
.rv-card, .reservation-panel, .reservation-table-card, .rv-metric { box-shadow: none; border-color: var(--hsl-line); }
.rv-card { padding: var(--sp-5) var(--sp-6); }
.rv-metrics { gap: var(--sp-4); }
.rv-metric { padding: 18px 20px; border-radius: var(--hsl-radius); }
.rv-metric:hover { border-color: var(--hsl-faint); box-shadow: 0 2px 8px rgba(29, 27, 22, .05); }
.rv-metric.attn .rv-metric-value { color: var(--hsl-warning); }
.rv-metric.bad .rv-metric-value { color: var(--hsl-danger); }
.rv-section-head { margin: var(--sp-6) 0 var(--sp-3); }
.rv-section-head h2 { font-size: var(--fs-md); font-weight: 620; }

/* ============================================================ 7. TABLES / ROW LISTS */
.reservation-table th, .rv-rows-head { background: transparent; color: var(--hsl-muted); font-size: 11.5px; letter-spacing: .07em; border-bottom: 1px solid var(--hsl-line-strong); }
.reservation-table td { padding: 15px 16px; border-bottom: 1px solid var(--hsl-line); }
.reservation-table tbody tr:hover { background: var(--hsl-soft); }
.reservation-table .num, .rv-num, td.num, th.num { text-align: right; }
.reservation-table-card { overflow-x: auto; }
.rv-rows > * { transition: background .1s; }

/* ============================================================ 8. FORMS */
.reservation-input, .reservation-select, .reservation-textarea { min-height: 40px; border-color: var(--hsl-line-strong); border-radius: 9px; background: #fff; color: var(--hsl-ink); font-size: var(--fs-base); }
.reservation-input:hover, .reservation-select:hover, .reservation-textarea:hover { border-color: var(--hsl-faint); }
.reservation-input:focus, .reservation-select:focus, .reservation-textarea:focus { border-color: var(--hsl-primary); box-shadow: var(--hsl-focus); }
.reservation-input::placeholder, .reservation-textarea::placeholder { color: var(--hsl-faint); }
.reservation-input.is-invalid, .reservation-select.is-invalid { border-color: #d98b84; background: #fffafa; }
.reservation-field label { color: var(--hsl-ink); font-size: 12.5px; font-weight: 580; }
.reservation-field .rv-hint { color: var(--hsl-muted); font-size: 12px; margin-top: 4px; }
.reservation-field .rv-error, .rv-error { color: var(--hsl-danger); font-size: 12.5px; margin-top: 4px; }
input[type=checkbox], input[type=radio] { accent-color: var(--hsl-primary); }

/* ============================================================ 9. DIALOGS / SHEETS */
.rv-modal-backdrop { background: rgba(29, 27, 22, .5); animation: hui-fade .14s ease-out; }
.rv-modal { border-radius: 16px; box-shadow: var(--hsl-shadow-pop); animation: hui-rise .18s ease-out; }
.rv-modal-head { padding: 20px 24px 14px; }
.rv-modal-head h3 { font-size: var(--fs-lg); font-weight: 650; letter-spacing: -.015em; }
.rv-modal-body { padding: 18px 24px; }
.rv-modal-foot { padding: 14px 24px 20px; background: var(--hsl-soft); border-radius: 0 0 16px 16px; }
@media (max-width: 575.98px) { .rv-modal { animation-name: hui-sheet; } .rv-modal-foot { position: sticky; bottom: 0; } .rv-modal-foot .reservation-button { flex: 1; } }
@keyframes hui-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hui-rise { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes hui-sheet { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
.dropdown-menu { border: 1px solid var(--hsl-line); border-radius: 12px; box-shadow: var(--hsl-shadow-pop); padding: 6px; }
.dropdown-menu .dropdown-item { border-radius: 8px; }
.rv-bell-panel { border: 1px solid var(--hsl-line); border-radius: 14px; box-shadow: var(--hsl-shadow-pop); }

/* ============================================================ 10. FEEDBACK */
#toast-container > div { border-radius: 12px; box-shadow: var(--hsl-shadow-pop); opacity: 1; font-family: inherit; }
#toast-container > .toast-success { background-color: #16704a; }
#toast-container > .toast-error { background-color: #b0281f; }
.hui-skeleton { position: relative; overflow: hidden; background: #eeebe3; border-radius: 8px; min-height: 14px; }
.hui-skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); animation: hui-shimmer 1.3s infinite; }
@keyframes hui-shimmer { to { transform: translateX(100%); } }
.reservation-empty { border-color: var(--hsl-line-strong); background: var(--hsl-soft); }
@media (prefers-reduced-motion: reduce) { .hoteliss-reservations *, .hoteliss-reservations *::before, .hoteliss-reservations *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ============================================================ 11. QUICK FIND (command palette) */
.hui-qf { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; background: rgba(29, 27, 22, .45); animation: hui-fade .12s ease-out; }
.hui-qf-box { width: 100%; max-width: 640px; max-height: 76vh; display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 16px; box-shadow: var(--hsl-shadow-pop); animation: hui-rise .16s ease-out; }
.hui-qf-input { display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--hsl-line); }
.hui-qf-input i { font-size: 20px; color: var(--hsl-faint); }
.hui-qf-input input { flex: 1; height: 56px; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--hsl-ink); }
.hui-qf-list { overflow-y: auto; padding: 8px; }
.hui-qf-group { padding: 10px 10px 4px; color: var(--hsl-faint); font-size: 11px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
.hui-qf-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--hsl-text); text-align: left; text-decoration: none !important; cursor: pointer; }
.hui-qf-item i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--hsl-primary-soft); color: var(--hsl-primary); font-size: 17px; }
.hui-qf-item strong { display: block; color: var(--hsl-ink); font-size: 14px; font-weight: 590; }
.hui-qf-item small { display: block; color: var(--hsl-muted); font-size: 12.5px; }
.hui-qf-item:hover, .hui-qf-item.sel { background: var(--hsl-soft); }
.hui-qf-item.sel { box-shadow: inset 0 0 0 1px var(--hsl-line-strong); }
.hui-qf-empty { padding: 28px 16px; text-align: center; color: var(--hsl-muted); }
.hui-qf-foot { display: flex; gap: 14px; padding: 9px 16px; border-top: 1px solid var(--hsl-line); background: var(--hsl-soft); color: var(--hsl-muted); font-size: 12px; }

/* ============================================================ 12. TODAY / OVERVIEW */
.hui-attn { display: grid; gap: 8px; }
.hui-attn-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--hsl-line); border-radius: 10px; background: #fff; color: var(--hsl-text) !important; text-decoration: none !important; transition: border-color .12s, background .12s; }
.hui-attn-row:hover { border-color: var(--hsl-faint); background: var(--hsl-soft); }
.hui-attn-row .hui-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; font-size: 19px; }
.hui-attn-row .hui-ico.warning { background: var(--hsl-warning-bg); color: var(--hsl-warning); }
.hui-attn-row .hui-ico.danger { background: var(--hsl-danger-bg); color: var(--hsl-danger); }
.hui-attn-row .hui-ico.info { background: var(--hsl-info-bg); color: var(--hsl-info); }
.hui-attn-row .hui-ico.violet { background: var(--hsl-violet-bg); color: var(--hsl-violet); }
.hui-attn-row strong { display: block; color: var(--hsl-ink); font-size: 14px; font-weight: 600; }
.hui-attn-row small { color: var(--hsl-muted); font-size: 12.5px; }
.hui-attn-row .hui-count { margin-left: auto; color: var(--hsl-ink); font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.hui-allclear { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 10px; background: var(--hsl-success-bg); color: var(--hsl-success); font-weight: 560; }
.hui-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.hui-quick a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--hsl-line); border-radius: 10px; background: #fff; color: var(--hsl-ink) !important; font-weight: 570; text-decoration: none !important; transition: border-color .12s, background .12s; }
.hui-quick a i { font-size: 20px; color: var(--hsl-primary); }
.hui-quick a:hover { border-color: var(--hsl-primary); background: var(--hsl-primary-soft); }
.hui-bar { display: flex; height: 8px; overflow: hidden; border-radius: 99px; background: var(--hsl-neutral-bg); }
.hui-bar > span { display: block; height: 100%; }
.hui-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; color: var(--hsl-muted); font-size: 12.5px; }
.hui-legend b { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; }
.hui-tone-success { background: #2e9c6d; } .hui-tone-warning { background: #d9922a; } .hui-tone-danger { background: #cf4a3f; } .hui-tone-info { background: #3b7bc6; } .hui-tone-violet { background: #7f6cb8; } .hui-tone-neutral { background: #b6b1a3; }

/* ============================================================ 13. PRINT: keep printed pages clean */
@media print { .hui-nav, .layout-navbar, .hui-qf, .content-footer, .layout-overlay { display: none !important; } .hoteliss-reservations .layout-page { padding-left: 0 !important; } }

/* the template reserves room for its own fixed navbar; the Hoteliss header is sticky, so none is needed */
.hoteliss-reservations .layout-page { padding-top: 0 !important; }
html.layout-navbar-fixed body.hoteliss-reservations:not(.modal-open) .layout-content-navbar .layout-page,
html body.hoteliss-reservations .layout-wrapper.layout-content-navbar .layout-container .layout-page { padding-top: 0 !important; }
.hui-ops { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 14px 10px; margin-top: 18px; }
.hui-ops strong { display: block; margin-top: 2px; color: var(--hsl-ink); font-size: 26px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hui-legend-dot { display: inline-flex; align-items: center; gap: 6px; color: var(--hsl-muted); font-size: 12.5px; font-weight: 550; }
.hui-legend-dot b { width: 8px; height: 8px; border-radius: 50%; }

/* ---- stay rows (Front Desk): two-line layout in half-width columns so nothing is squeezed ---- */
.rv-fd-grid .rv-stay { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 10px; padding: 14px 0; }
.rv-fd-grid .rv-stay-actions { grid-column: 1 / -1; justify-content: flex-start; }
.rv-stay { padding: 14px 0; }
.rv-snap a, .rv-snap-btn { border-radius: var(--hsl-radius); border-color: var(--hsl-line); transition: border-color .12s; }
.rv-snap a:hover, .rv-snap-btn:hover { border-color: var(--hsl-faint); }
.rv-snap span { letter-spacing: .07em; }
.rv-snap strong { font-size: 24px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ---- filters: one compact row, active filters shown as chips ---- */
.rv-toolbar { padding: 14px 16px !important; gap: 12px !important; align-items: end; }
.rv-toolbar .reservation-field label { margin-bottom: 4px; color: var(--hsl-muted); font-size: 11.5px; letter-spacing: .04em; }
.hui-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.hui-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 11px; border: 1px solid var(--hsl-line-strong); border-radius: 999px; background: #fff; color: var(--hsl-text); font-size: 12.5px; font-weight: 550; }
/* tabs as a quiet segmented row */
.rv-tab { border-color: var(--hsl-line-strong); background: #fff; color: var(--hsl-text); font-weight: 560; }
.rv-tab em { color: var(--hsl-muted); font-style: normal; font-weight: 600; }
.rv-tab.active { background: var(--hsl-ink); border-color: var(--hsl-ink); color: #fff; }
.rv-tab.active em { color: rgba(255, 255, 255, .7); }

/* ---- room board: occupancy is the primary signal (left accent + badge); housekeeping is secondary; ready is quiet ---- */
.rv-room { border-left-width: 3px; border-left-style: solid; border-left-color: transparent; }
.rv-room.state-available { border-left-color: #2e9c6d; }
.rv-room.state-booked { border-left-color: #3b7bc6; }
.rv-room.state-occupied { border-left-color: #b6b1a3; }
.rv-room.state-due_out { border-left-color: #d9922a; }
.rv-room.state-overdue { border-left-color: #cf4a3f; }
.rv-room.state-out_of_service { border-left-color: #7f6cb8; background: var(--hsl-soft); }
.rv-hk-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--hsl-success); font-size: 12px; font-weight: 580; }
.rv-hk-ok i { font-size: 14px; }
.rv-hk-line { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rv-type { border-color: var(--hsl-line); border-radius: var(--hsl-radius); }
.rv-type h3 { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }

/* ---- folio: the balance is the loudest thing on the page ---- */
.fo-totals { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr); }
@media (max-width: 767.98px) { .fo-totals { grid-template-columns: minmax(0, 1fr); } }
.fo-total { padding: 18px 22px; border-radius: var(--hsl-radius); border-color: var(--hsl-line); }
.fo-total strong { font-size: 30px; font-weight: 650; letter-spacing: -.03em; }
.fo-balance strong { font-size: 40px; font-weight: 700; }
.fo-balance.owing { border-color: #ecc3be; background: #fdf3f1; } .fo-balance.owing strong { color: var(--hsl-danger); }
.fo-balance.clear { border-color: #bfe0cd; background: #f0f8f3; } .fo-balance.clear strong { color: var(--hsl-success); }
.fo-balance.credit { border-color: #ecd6a6; background: #fdf7e8; } .fo-balance.credit strong { color: var(--hsl-warning); }

/* ---- small screens ---- */
@media (max-width: 1199.98px) {
    .hui-nav.layout-menu { box-shadow: none !important; }
    html.layout-menu-expanded .hui-nav.layout-menu { box-shadow: var(--hsl-shadow-pop) !important; }
}
.rv-bell-btn { position: relative; }
.rv-bell-count { position: absolute !important; top: -6px !important; right: -6px !important; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid #fdfcf9; border-radius: 999px; background: var(--hsl-danger); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center; }
@media (max-width: 575.98px) {
    .rv-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .rv-metric { padding: 14px 15px; }
    .rv-metric-value { font-size: 26px; }
    .rv-metric-sub { font-size: 11.5px; }
    .rv-header-actions { width: 100%; }
    .rv-header-actions .reservation-button { flex: 1; }
    .hui-ops { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fo-balance strong { font-size: 34px; }
}
.reservation-button.danger-solid { background: var(--hsl-danger); border-color: var(--hsl-danger); }
.reservation-button.danger-solid:hover { background: #8f1f18; border-color: #8f1f18; }

/* ---- collapsible secondary filters ---- */
.hui-more { display: contents; }
.hui-more[x-cloak] { display: none !important; }
.hui-filter-btns { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }

/* ---- sidebar foot: the desktop collapse control ---- */
.hui-nav-foot { flex: none; padding: 8px 10px 12px; border-top: 1px solid var(--hsl-line); }
.hui-nav-foot .hui-nav-item { width: 100%; border: 0; background: transparent; cursor: pointer; font-family: inherit; }
.hui-i-expand { display: none; }
html.hui-rail .hui-i-expand { display: inline-block; }
html.hui-rail .hui-i-collapse { display: none; }
html.hui-rail .hui-rail-toggle { display: none !important; }
html.hui-rail .hui-brand { padding: 0; justify-content: center; }
html.hui-rail .hui-brand-link { justify-content: center; }

/* ---- busy buttons ---- */
.reservation-button.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.reservation-button.is-busy > * { visibility: hidden; }
.reservation-button.is-busy::after { content: ''; position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: hui-spin .7s linear infinite; }
.reservation-button.secondary.is-busy::after, .reservation-button.danger.is-busy::after, .reservation-button.ghost.is-busy::after { border-color: var(--hsl-line-strong); border-top-color: var(--hsl-primary); }
@keyframes hui-spin { to { transform: rotate(360deg); } }

/* ================= FINAL POLISH PASS ================= */
.hui-balance { font-weight: 680; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hui-balance.owing { color: var(--hsl-danger); font-size: 15px; }
.hui-balance.clear { color: var(--hsl-success); }
.hui-balance.credit { color: var(--hsl-warning); }
.hui-folio-card { display: block; text-decoration: none !important; color: inherit !important; }
.hui-folio-card-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--hsl-line); }
.hui-folio-card-foot .hui-balance { font-size: 20px; }

/* ---- staff booking: running summary above the fold on small screens ---- */
@media (max-width: 1139.98px) {
    .rv-cartbar { border-top: 1px solid var(--hsl-line-strong); box-shadow: 0 -8px 24px rgba(29, 27, 22, .1); transition: transform .2s ease; gap: 10px; }
    .rv-cartbar.is-hidden { transform: translateY(110%); }
    .rv-cartbar-info { min-width: 0; flex: 1; }
    .rv-cartbar-info strong, .rv-cartbar-info span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rv-cartbar-info span { color: var(--hsl-muted); font-size: 12px; }
    .rv-cartbar-total { text-align: right; line-height: 1.15; }
    .rv-cartbar-total small { display: block; color: var(--hsl-muted); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; }
    .rv-cartbar-total b { color: var(--hsl-ink); font-size: 18px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
    .reservation-shell:has(.rv-cartbar) { padding-bottom: 96px; }
}

/* ---- notifications page + bell footer ---- */
.rv-bell-foot { display: block; padding: 11px 16px; border-top: 1px solid var(--hsl-line); color: var(--hsl-primary) !important; font-size: 13px; font-weight: 600; text-align: center; text-decoration: none !important; }
.rv-bell-foot:hover { background: var(--hsl-soft); }
.hui-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hui-note { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--hsl-line); }
.hui-note:last-child { border-bottom: 0; }
.hui-note.unread { background: #f4f9f8; }
.hui-note.read .hui-note-title { font-weight: 520; color: var(--hsl-text); }
.hui-note-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; font-size: 19px; }
.hui-note-ico.tone-info { background: var(--hsl-info-bg); color: var(--hsl-info); } .hui-note-ico.tone-success { background: var(--hsl-success-bg); color: var(--hsl-success); }
.hui-note-ico.tone-warning { background: var(--hsl-warning-bg); color: var(--hsl-warning); } .hui-note-ico.tone-danger { background: var(--hsl-danger-bg); color: var(--hsl-danger); }
.hui-note-main { flex: 1; min-width: 0; }
.hui-note-title { display: flex; align-items: center; gap: 8px; color: var(--hsl-ink); font-size: 14.5px; font-weight: 640; }
.hui-unread-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--hsl-primary); }
.hui-note-body { margin-top: 2px; color: var(--hsl-text); font-size: 13.5px; }
.hui-note-time { margin-top: 4px; color: var(--hsl-muted); font-size: 12px; }
.hui-note-actions { display: flex; gap: 6px; flex: none; }
@media (max-width: 575.98px) { .hui-note { flex-wrap: wrap; padding: 14px 16px; } .hui-note-actions { width: 100%; padding-left: 50px; } }

/* ---- compact row action menu (used by Staff & Access; dangerous items sit below a divider) ---- */
.hui-row-actions { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.hui-menu { position: relative; }
.hui-menu-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; min-width: 190px; padding: 6px; border: 1px solid var(--hsl-line); border-radius: 12px; background: #fff; box-shadow: var(--hsl-shadow-pop); }
.hui-menu-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--hsl-text); font-size: 13.5px; text-align: left; cursor: pointer; }
.hui-menu-pop button i { font-size: 17px; color: var(--hsl-muted); }
.hui-menu-pop button:hover { background: var(--hsl-soft); color: var(--hsl-ink); }
.hui-menu-pop button.danger, .hui-menu-pop button.danger i { color: var(--hsl-danger); }
.hui-menu-pop button.danger:hover { background: var(--hsl-danger-bg); }
.hui-menu-sep { height: 1px; margin: 5px 4px; background: var(--hsl-line); }
.rv-rows.rv-staff-rows { grid-template-columns: minmax(150px, 1.1fr) minmax(180px, 1.3fr) minmax(130px, .8fr) minmax(110px, .6fr) auto; }
@media (max-width: 1139.98px) { .rv-rows.rv-staff-rows { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .rv-staff-rows .hui-row-actions { grid-column: 1 / -1; justify-content: flex-start; } .hui-menu-pop { right: auto; left: 0; } }
.reservation-table-card:has(.hui-menu) { overflow: visible; }
.hui-fsec { margin: 4px 0 -2px; padding-top: 10px; border-top: 1px solid var(--hsl-line); color: var(--hsl-muted); font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.hui-fsec:first-child, form > .hui-fsec:first-of-type { border-top: 0; padding-top: 0; }

/* ---- management strips + rooms/room types rows ---- */
.hui-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.hui-strip > div { display: flex; align-items: baseline; gap: 8px; padding: 8px 14px; border: 1px solid var(--hsl-line); border-radius: 999px; background: #fff; }
.hui-strip strong { color: var(--hsl-ink); font-size: 17px; font-weight: 680; font-variant-numeric: tabular-nums; }
.hui-strip span { color: var(--hsl-muted); font-size: 12.5px; font-weight: 550; }
.hui-strip .warn strong { color: var(--hsl-warning); } .hui-strip .bad strong { color: var(--hsl-violet); }
.rv-rows.rv-room-rows { grid-template-columns: minmax(110px, .8fr) minmax(130px, 1fr) minmax(110px, .7fr) minmax(150px, 1fr) minmax(130px, .9fr) auto; }
@media (max-width: 1139.98px) { .rv-rows.rv-room-rows { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .rv-room-rows .hui-row-actions { grid-column: 1 / -1; justify-content: flex-start; } }

/* ---- housekeeping task cards: room number first, priority unmistakable, next action large ---- */
.rv-task { border-left-width: 6px; border-radius: var(--hsl-radius); padding: 18px; gap: 12px; }
.rv-task-head h3 { font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.rv-task.urgent { border-left-color: #cf4a3f; background: #fffafa; }
.rv-task.high { border-left-color: #d9922a; }
.rv-task-note { padding: 10px 12px; border-radius: 10px; background: var(--hsl-warning-bg); color: var(--hsl-ink); font-size: 14.5px; line-height: 1.45; }
.rv-task-actions .reservation-button { min-height: 52px; font-size: 16px; font-weight: 640; border-radius: 12px; }
.rv-task-actions { display: grid; gap: 10px; }

/* ---- kitchen / bar: three columns from tablet width; waiting time escalates by tone, no animation ---- */
@media (min-width: 700px) and (max-width: 1023.98px) { .kd-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .kd-card { padding: 14px; } .kd-head strong { font-size: 18px; } .kd-timer { font-size: 14px; } }
.kd-card { border-left-color: #3b7bc6; border-radius: var(--hsl-radius); border-color: var(--hsl-line); }
.kd-card.warn { border-left-color: #d9922a; } .kd-card.late { border-left-color: #cf4a3f; background: #fffafa; } .kd-card.go { border-left-color: #2e9c6d; }
.kd-timer { padding: 2px 10px; border-radius: 999px; background: var(--hsl-neutral-bg); color: var(--hsl-neutral); font-size: 13.5px; font-weight: 640; white-space: nowrap; }
.kd-card.warn .kd-timer { background: var(--hsl-warning-bg); color: var(--hsl-warning); }
.kd-card.late .kd-timer { background: var(--hsl-danger-bg); color: var(--hsl-danger); }
.kd-card.go .kd-timer { background: var(--hsl-success-bg); color: var(--hsl-success); }
.kd-col h2 { color: var(--hsl-ink); font-size: 12.5px; }
.kd-head { flex-wrap: wrap; row-gap: 6px; }
.kd-head strong { white-space: nowrap; }

/* header row and data rows must share identical column tracks: the action column is a fixed width, never `auto` */
@media (min-width: 1140px) {
    .rv-rows.rv-staff-rows { grid-template-columns: minmax(150px, 1.1fr) minmax(190px, 1.3fr) minmax(130px, .8fr) minmax(110px, .6fr) 132px; }
    .rv-rows.rv-room-rows { grid-template-columns: minmax(100px, .8fr) minmax(130px, 1fr) minmax(110px, .7fr) minmax(150px, 1fr) minmax(130px, .9fr) 132px; }
    .rv-rows.rv-coupon-rows { grid-template-columns: minmax(130px, 1.1fr) minmax(90px, .7fr) minmax(110px, .8fr) minmax(90px, .6fr) minmax(110px, .9fr) 110px 132px; }
    .rv-rows.rv-types-rows { grid-template-columns: minmax(200px, 1.6fr) minmax(90px, .6fr) minmax(130px, .8fr) minmax(160px, 1fr) 250px; }
}
.hui-row-actions { flex-wrap: nowrap !important; }

/* profile / settings: two columns on desktop, one on tablets and phones */
.hui-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 1139.98px) { .hui-detail { grid-template-columns: minmax(0, 1fr); } }
.hui-logout, .hui-logout i { color: var(--hsl-danger) !important; }
.hui-logout:hover { background: var(--hsl-danger-bg) !important; }

/* ---------- hotel branding (HotelIdentity): logo in the sidebar and sign-in, long names never overflow ---------- */
.hui-brand-link { overflow: hidden; }
.hui-brand-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hui-brand-logo { display: block; flex: none; width: auto; height: auto; object-fit: contain; }
.hui-brand-logo-sidebar { max-height: 40px; max-width: 190px; }
.hui-brand-logo-auth { max-height: 56px; max-width: 240px; }
html.hui-rail .hui-brand-logo-sidebar { max-width: 40px; object-fit: cover; object-position: left center; }
.auth-brand { min-width: 0; }
.auth-brand .hui-brand-text { font-size: 17px; }
.hui-brand-warning { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 10px 14px; border: 1px solid #f3d19e; border-radius: 10px; background: #fff8ec; color: #7a4b00; font-size: 13px; }
.hui-brand-warning a { color: inherit; font-weight: 600; text-decoration: underline; }