/* ============================================================
   ConnectBooker Extranet — Design System v2
   Brand: Deep Indigo #1E1466  ·  Amber #F9B233
   ============================================================ */
:root {
  --cb-navy: #1E1466;
  --cb-navy-600: #2A2180;
  --cb-navy-700: #241B73;
  --cb-navy-050: #F0EFFA;
  --cb-amber: #F9B233;
  --cb-amber-600: #E39A17;
  --cb-amber-050: #FFF6E5;

  --cb-ink: #1C2333;
  --cb-muted: #667085;
  --cb-line: #E7EAF0;
  --cb-bg: #F6F7FB;
  --cb-white: #FFFFFF;

  --cb-success: #12B76A;
  --cb-success-050: #E7F8F0;
  --cb-warning: #F79009;
  --cb-warning-050: #FEF4E6;
  --cb-danger: #F04438;
  --cb-danger-050: #FEECEB;
  --cb-info: #2E90FA;
  --cb-info-050: #EAF3FE;

  --cb-radius: 14px;
  --cb-radius-sm: 10px;
  --cb-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 16px rgba(16, 24, 40, .06);
  --cb-shadow-lg: 0 12px 40px rgba(16, 24, 40, .14);
  --cb-sidebar-w: 264px;
  --cb-rail-w: 72px;
  --cb-topbar-h: 64px;
  --cb-bottomnav-h: 62px;
  --cb-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- base ---------- */
* { -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: var(--cb-font);
  background: var(--cb-bg);
  color: var(--cb-ink);
  font-size: .925rem;
  overflow-x: hidden;
}
a { text-decoration: none; }
::selection { background: var(--cb-amber); color: var(--cb-navy); }

/* ---------- layout ---------- */
.cb-layout { min-height: 100vh; display: flex; }

.cb-sidebar {
  width: var(--cb-sidebar-w);
  background: var(--cb-white);
  border-right: 1px solid var(--cb-line);
  position: fixed; inset: 0 auto 0 0;
  display: flex; flex-direction: column;
  z-index: 1045;
  transition: margin-left .25s ease, width .2s ease;
}
.cb-brand {
  height: var(--cb-topbar-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px; border-bottom: 1px solid var(--cb-line);
  flex-shrink: 0;
}
.cb-brand-mark {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--cb-amber) 0%, var(--cb-amber-600) 100%);
  display: grid; place-items: center;
  color: var(--cb-navy); font-weight: 800; font-size: 1.05rem;
}
.cb-brand-text { font-weight: 800; font-size: 1.02rem; color: var(--cb-navy); line-height: 1.1; }
.cb-brand-text small { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cb-muted); }

.cb-side-scroll { flex: 1; overflow-y: auto; padding: 14px 12px 24px; scrollbar-width: thin; }

.cb-nav-section {
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cb-muted); padding: 18px 12px 8px;
}
.cb-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin: 2px 0;
  border-radius: var(--cb-radius-sm);
  color: #3A4258; font-weight: 600; font-size: .9rem;
  position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .15s, color .15s;
}
.cb-nav-item i { font-size: 1.12rem; color: var(--cb-muted); flex-shrink: 0; transition: color .15s; }
.cb-nav-item:hover { background: var(--cb-navy-050); color: var(--cb-navy); }
.cb-nav-item:hover i { color: var(--cb-navy); }
.cb-nav-item.active {
  background: var(--cb-navy); color: #fff;
  box-shadow: 0 4px 12px rgba(30, 20, 102, .28);
}
.cb-nav-item.active i { color: var(--cb-amber); }
.cb-nav-item .badge-count {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--cb-danger); color: #fff;
  font-size: .68rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.cb-nav-item.active .badge-count { background: var(--cb-amber); color: var(--cb-navy); }
.cb-nav-item .badge-new {
  margin-left: 8px; padding: 2px 8px;
  border-radius: 6px; background: var(--cb-amber); color: var(--cb-navy);
  font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.cb-nav-item.active .badge-new { background: #fff; }

/* nav submenu (Growth Plan group) — whole parent row toggles; chevron mirrors, group animates open */
.cb-nav-item .sub-caret {
  margin-left: auto; flex-shrink: 0;
  font-size: .8rem; color: var(--cb-muted);
  transition: transform .2s ease, color .15s;
}
.cb-nav-item:hover .sub-caret { color: var(--cb-navy); }
.cb-nav-item.has-open .sub-caret { color: var(--cb-navy); }
.cb-nav-item .sub-caret.rot { transform: rotate(180deg); }
.cb-nav-item.has-open { color: var(--cb-navy); font-weight: 700; }
.cb-nav-item.has-open i:not(.sub-caret) { color: var(--cb-navy); }
.cb-nav-sub {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .22s ease;
  margin: 2px 0 6px;
}
.cb-nav-sub.open { grid-template-rows: 1fr; }
.cb-nav-sub-list { overflow: hidden; min-height: 0; }
.cb-nav-subitem {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 46px; margin: 1px 0;
  border-radius: var(--cb-radius-sm);
  font-size: .83rem; font-weight: 600; color: #5A6278; position: relative;
  transition: background .15s, color .15s;
}
.cb-nav-subitem::before {
  content: ""; position: absolute; left: 28px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: #C4C8D0;
}
.cb-nav-subitem:hover { background: var(--cb-navy-050); color: var(--cb-navy); }
.cb-nav-subitem.active { background: var(--cb-navy-050); color: var(--cb-navy); font-weight: 800; }
.cb-nav-subitem.active::before { background: var(--cb-amber); }

.cb-side-foot { border-top: 1px solid var(--cb-line); padding: 12px; flex-shrink: 0; }

/* ---------- main column ---------- */
.cb-main-col {
  flex: 1; margin-left: var(--cb-sidebar-w);
  display: flex; flex-direction: column; min-width: 0; /* prevents grid blowout */
  transition: margin-left .25s ease;
}
body.cb-sidebar-hidden .cb-sidebar { margin-left: calc(-1 * var(--cb-sidebar-w)); }
body.cb-sidebar-hidden .cb-main-col { margin-left: 0; }

/* ---------- desktop icon rail: collapse keeps navigation reachable ---------- */
@media (min-width: 992px) {
  body.cb-rail .cb-sidebar { width: var(--cb-rail-w); }
  body.cb-rail .cb-main-col { margin-left: var(--cb-rail-w); }

  body.cb-rail .cb-brand { padding: 0; justify-content: center; }
  body.cb-rail .cb-brand-text,
  body.cb-rail .cb-brand-toggle { display: none; }
  /* no hamburger in the rail: the CB logo itself is the expand control */
  body.cb-rail .cb-brand-mark { width: 40px; height: 40px; font-size: 1.05rem; border-radius: 11px; cursor: pointer; position: relative; overflow: visible; }
  body.cb-rail .cb-brand-mark::after {
    content: attr(data-tip);
    position: absolute; left: calc(100% + 12px); top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: var(--cb-navy); color: #fff; font-size: .74rem; font-weight: 700;
    padding: 5px 10px; border-radius: 8px; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease;
    box-shadow: var(--cb-shadow-lg); z-index: 1060;
  }
  body.cb-rail .cb-brand-mark:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

  /* rail scrolls when its items exceed the viewport; the hover flyout is JS-driven and
     appended to <body> so overflow-y here no longer clips it */
  body.cb-rail .cb-side-scroll { overflow-y: auto; overflow-x: hidden; padding: 12px 10px 24px; scrollbar-width: thin; }

  body.cb-rail .cb-nav-section { font-size: 0; padding: 12px 14px; }
  body.cb-rail .cb-nav-section::after { content: ""; display: block; height: 1px; background: var(--cb-line); }

  body.cb-rail .cb-nav-item { justify-content: center; gap: 0; padding: 11px 0; overflow: visible; }
  body.cb-rail .cb-nav-item > span,
  body.cb-rail .cb-nav-item .badge-count,
  body.cb-rail .cb-nav-item .sub-caret { display: none; }
  body.cb-rail .cb-nav-item i { position: relative; }
  body.cb-rail .cb-nav-item.has-badge i::after {
    content: ""; position: absolute; top: -3px; right: -6px; width: 9px; height: 9px;
    border-radius: 50%; background: var(--cb-danger); border: 2px solid var(--cb-white);
  }
  body.cb-rail .cb-nav-sub { grid-template-rows: 0fr; }

  /* hover flyout label lives in a fixed-position node outside the scroll container (see app.js)
     so it stays visible while the rail scrolls; the CSS ::after would be clipped by overflow-y */
  .cb-rail-tip {
    position: fixed; top: 0; left: 0; z-index: 1080;
    background: var(--cb-navy); color: #fff; font-size: .78rem; font-weight: 700;
    padding: 6px 11px; border-radius: 8px; white-space: nowrap;
    box-shadow: var(--cb-shadow-lg); pointer-events: none;
    opacity: 0; transform: translate(-4px, -50%);
    transition: opacity .12s ease, transform .12s ease;
  }
  .cb-rail-tip.show { opacity: 1; transform: translate(0, -50%); }

  body.cb-rail .cb-side-foot { padding: 12px 0; justify-content: center; }
  body.cb-rail .cb-side-foot .flex-grow-1,
  body.cb-rail .cb-side-foot .cb-icon-btn { display: none; }
}

.cb-topbar {
  height: var(--cb-topbar-h);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cb-line);
  position: sticky; top: 0; z-index: 1030;
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
}
.cb-icon-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid transparent;
  display: inline-grid; place-items: center; color: #3A4258; background: transparent;
  font-size: 1.2rem; cursor: pointer; position: relative; flex-shrink: 0;
  transition: background .15s;
}
.cb-icon-btn:hover { background: var(--cb-navy-050); color: var(--cb-navy); }
.cb-icon-btn .dot {
  position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cb-danger); border: 2px solid #fff;
}

/* hotel switcher pill */
.cb-hotel-switch {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cb-navy-050); border: 1px solid #DDD8F5;
  color: var(--cb-navy); font-weight: 700; font-size: .85rem;
  padding: 8px 14px; border-radius: 999px; max-width: 300px; cursor: pointer;
  min-width: 0; flex-shrink: 1; overflow: hidden;
}
.cb-hotel-switch .bi-chevron-down { font-size: .75rem; }
.cb-hotel-switch span.name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-hotel-switch:hover { background: #E6E3F8; }

/* searchable property switcher dropdown (google-hotel-center style) */
.cb-hotel-menu { width: 330px; max-width: 92vw; padding: 8px; border: 1px solid var(--cb-line); border-radius: 14px; box-shadow: var(--cb-shadow-lg); }
.cb-hotel-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin: 2px 2px 8px; border: 1px solid var(--cb-line); border-radius: 10px; background: #fff; color: var(--cb-muted); }
.cb-hotel-search:focus-within { border-color: var(--cb-navy); box-shadow: 0 0 0 3px var(--cb-navy-050); }
.cb-hotel-search input { border: 0; box-shadow: none; outline: none; flex: 1; min-width: 0; font-size: .85rem; font-weight: 600; color: var(--cb-ink); background: transparent; }
.cb-hotel-search input::placeholder { color: var(--cb-muted); font-weight: 600; }
.cb-hotel-list { max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.cb-hotel-list .dropdown-item.cb-hotel-item { white-space: normal; border-radius: 10px; padding: 8px 10px; color: inherit; }
.cb-hotel-list .dropdown-item.cb-hotel-item:hover, .cb-hotel-list .dropdown-item.cb-hotel-item.active { background: var(--cb-navy-050); color: inherit; }
/* keyboard-navigated row (Up/Down in the topbar switcher) — focus stays in the search box, so the
   highlight is a class, not :focus/:hover. */
.cb-psx-panel .dropdown-item.cb-hotel-item.kb-active { background: var(--cb-navy-050); color: inherit; box-shadow: inset 3px 0 0 var(--cb-navy); }
.cb-hotel-item-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cb-hotel-item .nm { font-weight: 800; font-size: .85rem; color: var(--cb-navy); }
.cb-hotel-item .bi-check-lg { color: var(--cb-success); font-size: .95rem; flex-shrink: 0; }
.cb-hotel-item .meta { font-size: .72rem; color: var(--cb-muted); font-weight: 600; margin-top: 2px; }
.cb-hotel-item .meta .bi { font-size: .72rem; }
.dot-sep { opacity: .5; margin: 0 2px; }
.cb-hotel-empty { padding: 16px 12px; text-align: center; font-size: .8rem; font-weight: 700; color: var(--cb-muted); }
.cb-hotel-group-label { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cb-muted); padding: 8px 10px 4px; }
.cb-hotel-loading { display: flex; align-items: center; gap: 8px; padding: 12px; font-size: .78rem; font-weight: 700; color: var(--cb-muted); }
.cb-hotel-foot { padding: 8px 12px 4px; font-size: .72rem; font-weight: 700; color: var(--cb-muted); text-align: center; }
.cb-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #DDD8F5; border-top-color: var(--cb-navy); animation: cbSpin .7s linear infinite; flex-shrink: 0; }
@keyframes cbSpin { to { transform: rotate(360deg); } }

/* single-input type-ahead property switcher (multi-property picker roles) — the header field IS
   the search box; results drop in a panel anchored to it (no Bootstrap dropdown, no 2nd input) */
.cb-topsearch-wrap { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; padding: 0 8px; }
.cb-psx { position: relative; width: 100%; max-width: 560px; min-width: 0; display: flex; align-items: center; gap: 10px;
  background: var(--cb-bg, #F6F7FB); border: 1px solid var(--cb-line); border-radius: 999px; padding: 9px 16px;
  transition: background .15s, border-color .15s, box-shadow .15s; }
.cb-psx:focus-within, .cb-psx.open { background: #fff; border-color: #DDD8F5; box-shadow: 0 0 0 3px var(--cb-navy-050); }
.cb-psx-ico { color: var(--cb-navy); font-size: 1rem; flex-shrink: 0; }
.cb-psx-input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; box-shadow: none;
  font-size: .88rem; font-weight: 600; color: var(--cb-ink); padding: 0; }
.cb-psx-input::placeholder { color: var(--cb-muted); font-weight: 600; }
.cb-psx .ts-cur { flex-shrink: 1; min-width: 0; display: inline-flex; align-items: center; gap: 5px; color: var(--cb-navy);
  background: var(--cb-navy-050); border-radius: 999px; padding: 3px 10px; font-size: .74rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.cb-psx-panel { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1050;
  background: #fff; border: 1px solid var(--cb-line); border-radius: 14px; box-shadow: var(--cb-shadow-lg); padding: 8px; }
.cb-psx.open .cb-psx-panel { display: block; }
@media (max-width: 767.98px) {
  .cb-topsearch-wrap { padding: 0 4px; }
  .cb-psx { max-width: none; padding: 7px 12px; }
  .cb-psx .ts-cur { display: none; }
}

/* topbar brand mark — appears only when the sidebar is collapsed/hidden so the
   product identity never disappears with the drawer (desktop collapse + mobile) */
.cb-topbar-brand { display: none; align-items: center; text-decoration: none; flex-shrink: 0; }
.cb-topbar-brand .cb-brand-mark { width: 30px; height: 30px; font-size: .9rem; border-radius: 9px; }
body.cb-sidebar-hidden .cb-topbar-brand { display: inline-flex; }
@media (max-width: 991.98px) { .cb-topbar-brand { display: inline-flex; } }

/* topbar reopen toggle — only when the sidebar is collapsed/hidden or in mobile drawer mode */
.cb-topbar-toggle { display: none; }
body.cb-sidebar-hidden .cb-topbar-toggle { display: inline-grid; }
@media (max-width: 991.98px) { .cb-topbar-toggle { display: inline-grid; } }
/* in-brand collapse toggle — the primary toggle while the sidebar is visible; hidden in drawer mode */
@media (max-width: 991.98px) { .cb-brand-toggle { display: none; } }

.cb-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cb-navy) 0%, #5B4FC0 100%);
  color: #fff; font-weight: 700; font-size: .8rem;
  display: inline-grid; place-items: center; flex-shrink: 0;
}

.cb-content { padding: 22px 24px 40px; width: 100%; max-width: 1440px; margin-inline: auto; }

.cb-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
/* let the title/subtitle column shrink and wrap its own text so the action buttons
   stay pinned right; basis must be 0 (not auto) because flex-wrap sizes the column to
   its max-content when deciding line breaks, so a long subtitle would still push the
   buttons to a second line. On phones (<576px) stack cleanly instead of squeezing. */
.cb-page-head > div:first-child { flex: 1 1 0; min-width: 0; }
@media (max-width: 575.98px) {
  .cb-page-head > div:first-child { flex: 1 1 100%; }
  .cb-page-head > .d-flex { width: 100%; }
}
.cb-page-title { font-size: 1.35rem; font-weight: 800; color: var(--cb-navy); margin: 0; letter-spacing: -.01em; }
.cb-page-sub { color: var(--cb-muted); font-size: .85rem; margin: 3px 0 0; }
.cb-crumb { font-size: .75rem; color: var(--cb-muted); margin-bottom: 4px; display: flex; gap: 6px; align-items: center; }
.cb-crumb a { color: var(--cb-muted); }
.cb-crumb a:hover { color: var(--cb-navy); }

/* ---------- per-property screens: "choose a property" empty state (admin/operator open property.html or revenue-calendar.html with no ?p) ---------- */
.cb-content[data-cb-scope="needs"] > *:not(.cb-need-prop) { display: none !important; }
.cb-need-prop { display: none; }
.cb-content[data-cb-scope="needs"] .cb-need-prop { display: grid; place-items: center; text-align: center; padding: 40px 18px 72px; min-height: 42vh; }
.np-icon { width: 74px; height: 74px; border-radius: 50%; background: var(--cb-navy-050); color: var(--cb-navy); display: grid; place-items: center; font-size: 2rem; margin: 0 auto 18px; }
.cb-need-prop h3 { color: var(--cb-navy); font-weight: 800; margin: 0 0 8px; }
.cb-need-prop p { color: var(--cb-muted); font-size: .9rem; max-width: 460px; margin: 0 auto 20px; }
.cb-need-prop .np-actions { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
.cb-need-prop .np-alt { color: var(--cb-navy); font-weight: 700; font-size: .85rem; text-decoration: underline; }

/* ---------- cards ---------- */
.cb-card {
  background: var(--cb-white); border: 1px solid var(--cb-line);
  border-radius: var(--cb-radius); box-shadow: var(--cb-shadow);
}
.cb-card-head { padding: 16px 18px; border-bottom: 1px solid var(--cb-line); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cb-card-title { font-size: 1rem; font-weight: 800; color: var(--cb-navy); margin: 0; }
.cb-card-body { padding: 18px; }

.kpi {
  background: var(--cb-white); border: 1px solid var(--cb-line); border-radius: var(--cb-radius);
  padding: 16px 18px; box-shadow: var(--cb-shadow); height: 100%;
}
.kpi .k-label { font-size: .75rem; font-weight: 700; color: var(--cb-muted); text-transform: uppercase; letter-spacing: .06em; }
.kpi .k-value { font-size: 1.55rem; font-weight: 800; color: var(--cb-navy); margin-top: 4px; line-height: 1.1; }
.kpi .k-delta { font-size: .75rem; font-weight: 700; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; }
.kpi .k-delta.up { color: var(--cb-success); }
.kpi .k-delta.down { color: var(--cb-danger); }
.kpi .k-icon {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem;
}

/* ---------- compact stat chips (portfolio / hotels strip) ---------- */
.stat-strip { display: flex; flex-wrap: wrap; gap: 10px; }
.stat-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: var(--cb-white); border: 1px solid var(--cb-line); border-radius: 12px;
  padding: 10px 16px; font-size: .8rem; font-weight: 700; color: var(--cb-muted); box-shadow: var(--cb-shadow);
}
.stat-chip b { color: var(--cb-navy); font-size: 1.05rem; font-weight: 800; line-height: 1; }

/* ---------- badges ---------- */
.cb-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  white-space: nowrap;
}
.cb-badge .b-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cb-badge.ok { background: var(--cb-success-050); color: #0A8A4F; }
.cb-badge.warn { background: var(--cb-warning-050); color: #B54708; }
.cb-badge.bad { background: var(--cb-danger-050); color: #D92D20; }
.cb-badge.info { background: var(--cb-info-050); color: #1570CD; }
.cb-badge.neutral { background: #F2F4F7; color: #475467; }
.cb-badge.brand { background: var(--cb-amber-050); color: #B54708; }

/* ---------- segmented tabs (nav pills as segments) ---------- */
.cb-segmented {
  display: inline-flex; background: #EEF0F5; border-radius: 12px; padding: 4px; gap: 2px;
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.cb-segmented::-webkit-scrollbar { display: none; }
.cb-segmented .seg-btn {
  border: 0; background: transparent; padding: 8px 16px; border-radius: 9px;
  font-weight: 700; font-size: .85rem; color: var(--cb-muted); white-space: nowrap; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; transition: all .15s;
}
.cb-segmented .seg-btn.active { background: var(--cb-white); color: var(--cb-navy); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.cb-segmented a.seg-btn { text-decoration: none; }
.cb-segmented .seg-btn .mini { font-size: .68rem; background: var(--cb-navy-050); color: var(--cb-navy); border-radius: 8px; padding: 1px 6px; font-weight: 800; }
.cb-segmented .seg-btn.active .mini { background: var(--cb-amber-050); color: var(--cb-amber-600); }

/* ---------- buttons ---------- */
.btn-cb { background: var(--cb-navy); color: #fff; border: 0; font-weight: 700; font-size: .85rem; padding: 9px 18px; border-radius: 10px; }
.btn-cb:hover { background: var(--cb-navy-600); color: #fff; }
.btn-cb-amber { background: var(--cb-amber); color: var(--cb-navy); border: 0; font-weight: 800; font-size: .85rem; padding: 9px 18px; border-radius: 10px; }
.btn-cb-amber:hover { background: var(--cb-amber-600); color: var(--cb-navy); }
.btn-ghost { background: transparent; border: 1px solid var(--cb-line); color: #3A4258; font-weight: 700; font-size: .85rem; padding: 8px 16px; border-radius: 10px; }
.btn-ghost:hover { border-color: var(--cb-navy); color: var(--cb-navy); background: var(--cb-navy-050); }

/* ---------- tables ---------- */
.cb-table { width: 100%; font-size: .86rem; }
.cb-table thead th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cb-muted);
  font-weight: 800; border-bottom: 1px solid var(--cb-line); padding: 10px 12px; white-space: nowrap; background: #FAFBFD;
}
.cb-table tbody td { padding: 12px; border-bottom: 1px solid var(--cb-line); vertical-align: middle; }
.cb-table tbody tr:last-child td { border-bottom: 0; }
.cb-table tbody tr { transition: background .12s; }
.cb-table tbody tr:hover { background: #FAFAFE; }

/* ---------- revenue calendar grid ---------- */
.cb-calwrap {
  overflow: auto; border: 1px solid var(--cb-line); border-radius: var(--cb-radius); background: var(--cb-white);
  max-height: calc(100vh - 300px);
}
.cb-cal { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 900px; font-size: .82rem; }
.cb-cal th, .cb-cal td { border-right: 1px solid var(--cb-line); border-bottom: 1px solid var(--cb-line); padding: 0; }
.cb-cal thead th {
  position: sticky; top: 0; z-index: 5; background: #FAFBFD; min-width: 74px; padding: 8px 6px; text-align: center;
  border-bottom: 1px solid var(--cb-line);
}
.cb-cal thead th.weekend { background: var(--cb-amber-050); }
.cb-cal thead th .dow { font-size: .66rem; font-weight: 800; text-transform: uppercase; color: var(--cb-muted); letter-spacing: .05em; }
.cb-cal thead th .dnum { font-size: .95rem; font-weight: 800; color: var(--cb-navy); line-height: 1.2; }
.cb-cal thead th.weekend .dnum { color: var(--cb-amber-600); }
.cb-cal th.sticky-col, .cb-cal td.sticky-col {
  position: sticky; left: 0; z-index: 6; background: var(--cb-white); min-width: 210px; max-width: 210px;
  border-right: 2px solid var(--cb-line); padding: 10px 12px;
}
.cb-cal thead th.sticky-col { z-index: 7; background: #FAFBFD; }
.cb-cal .room-name { font-weight: 800; color: var(--cb-navy); font-size: .84rem; }
.cb-cal .plan-name { color: var(--cb-muted); font-size: .72rem; font-weight: 600; }
.cb-cal tbody td { padding: 5px; }
.cb-cell { display: block; width: 100%; text-align: center; padding: 9px 6px; border: 1px solid var(--cb-line); border-radius: 8px; background: var(--cb-white); cursor: pointer; font-weight: 700; font-size: .84rem; color: var(--cb-ink); transition: border-color .12s, box-shadow .12s, background .12s; }
.cb-cell:hover { background: var(--cb-amber-050); border-color: var(--cb-amber); box-shadow: 0 0 0 2px var(--cb-amber-050); }
.cb-cell:focus-visible { outline: 0; border-color: var(--cb-navy); box-shadow: 0 0 0 3px var(--cb-navy-050); }

/* brand-consistent keyboard focus for form controls across the app shell —
   login pages carry their own copy; every other screen was falling back to
   Bootstrap's default blue glow, which clashes with the navy/amber palette */
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--cb-navy); box-shadow: 0 0 0 4px var(--cb-navy-050);
}
.form-control:focus-visible, .form-select:focus-visible { outline: 0; }
.btn:focus-visible { box-shadow: 0 0 0 .22rem rgba(30, 20, 102, .3); }

/* canonical empty-table row — was referenced as .empty-msg on several pages but never defined */
.empty-msg { text-align: center; color: var(--cb-muted); padding: 26px 16px; font-size: .9rem; }
.cb-cell .sub { display: block; font-size: .64rem; font-weight: 700; color: var(--cb-muted); margin-top: 1px; }
td.cell-weekend .cb-cell { background: #FFFBF2; }
.cb-cell.closed { background: var(--cb-danger-050); color: #D92D20; text-transform: uppercase; font-size: .7rem; letter-spacing: .05em; }
.cb-cell.low { color: var(--cb-warning); }
.cb-cell.out { background: #F2F4F7; color: #98A2B3; }
.cb-cell.pending { border-color: var(--cb-amber); background: var(--cb-amber-050); }
.cb-cell-input { display: block; width: 100%; box-sizing: border-box; text-align: center; padding: 8px 6px; border: 1px solid var(--cb-navy); border-radius: 8px; background: var(--cb-white); font-weight: 800; font-size: .84rem; color: var(--cb-ink); outline: 0; box-shadow: 0 0 0 3px var(--cb-navy-050); }
.cb-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .75rem; color: var(--cb-muted); font-weight: 600; align-items: center; }
.cb-legend .sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; vertical-align: -2px; margin-right: 5px; border: 1px solid var(--cb-line); }

/* agenda (mobile calendar mode) */
.cb-agenda-day { border: 1px solid var(--cb-line); border-radius: var(--cb-radius); background: var(--cb-white); margin-bottom: 12px; overflow: hidden; }
.cb-agenda-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--cb-navy-050); font-weight: 800; color: var(--cb-navy); }
.cb-agenda-head small { font-weight: 700; color: var(--cb-muted); }
.cb-agenda-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-top: 1px solid var(--cb-line); font-size: .85rem; }
.cb-agenda-row .lbl { font-weight: 700; color: var(--cb-ink); }
.cb-agenda-row .lbl small { display: block; font-weight: 600; color: var(--cb-muted); font-size: .72rem; }

/* ---------- bookings ---------- */
.bk-card { border: 1px solid var(--cb-line); border-radius: var(--cb-radius); background: var(--cb-white); padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--cb-shadow); cursor: pointer; }
.bk-card .bk-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bk-card .bk-id { font-weight: 800; color: var(--cb-navy); font-size: .9rem; }
.bk-card .bk-guest { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.bk-card .bk-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: .78rem; color: var(--cb-muted); font-weight: 600; }
.bk-card .bk-meta i { margin-right: 3px; }
.guest-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--cb-navy-050); color: var(--cb-navy); font-weight: 800; font-size: .78rem; display: grid; place-items: center; flex-shrink: 0; }
.ota-chip { font-size: .68rem; font-weight: 800; padding: 3px 8px; border-radius: 6px; }
.ota-bd { background: #E8F0FE; color: #1A56C4; }
.ota-mtm { background: #FDECEC; color: #C92A2A; }
.ota-cb { background: var(--cb-amber-050); color: #B54708; }
.ota-exp { background: #EAF7EF; color: #15803D; }

/* ---------- pipeline ---------- */
.cb-pipe { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; }
.cb-pipe-col { min-width: 240px; flex: 1; background: #F1F3F8; border-radius: var(--cb-radius); padding: 10px; }
.cb-pipe-col .p-head { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; font-weight: 800; color: var(--cb-muted); text-transform: uppercase; letter-spacing: .05em; padding: 4px 6px 10px; }
.cb-pipe-card { background: var(--cb-white); border: 1px solid var(--cb-line); border-radius: var(--cb-radius-sm); padding: 12px; margin-bottom: 8px; box-shadow: var(--cb-shadow); cursor: grab; }
.cb-pipe-card .h-name { font-weight: 800; color: var(--cb-ink); font-size: .85rem; }
.cb-pipe-card .h-sub { font-size: .72rem; color: var(--cb-muted); font-weight: 600; margin-top: 2px; }

/* ---------- progress ---------- */
.cb-progress { height: 8px; border-radius: 99px; background: #EEF0F5; overflow: hidden; }
.cb-progress > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--cb-navy) 0%, #5B4FC0 100%); }
.cb-progress.amber > span { background: linear-gradient(90deg, var(--cb-amber-600) 0%, var(--cb-amber) 100%); }

/* ---------- checklist / stepper chips ---------- */
.cb-step { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--cb-line); background: var(--cb-white); border-radius: 999px; padding: 7px 14px; font-size: .8rem; font-weight: 700; color: var(--cb-muted); }
.cb-step.done { color: #0A8A4F; border-color: #BBE8D3; background: var(--cb-success-050); }
.cb-step.doing { color: var(--cb-navy); border-color: #C9C2EC; background: var(--cb-navy-050); }
.cb-step.todo { color: #B54708; border-color: #F5DFAE; background: var(--cb-amber-050); }

/* ---------- bottom nav (mobile) ---------- */
.cb-bottomnav {
  position: fixed; inset: auto 0 0 0; height: var(--cb-bottomnav-h);
  background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px);
  border-top: 1px solid var(--cb-line); z-index: 1050;
  display: none;
}
.cb-bottomnav .bn-inner { display: grid; grid-template-columns: repeat(5, 1fr); height: 100%; }
.cb-bottomnav a, .cb-bottomnav button {
  border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--cb-muted); font-size: .64rem; font-weight: 800; letter-spacing: .02em;
}
.cb-bottomnav a i, .cb-bottomnav button i { font-size: 1.3rem; }
.cb-bottomnav a.active { color: var(--cb-navy); position: relative; }
.cb-bottomnav a.active::before { content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 4px 4px; background: var(--cb-amber); }
.cb-bottomnav .bn-wrap { position: relative; }
.cb-bottomnav .badge-count { position: absolute; top: 4px; left: 55%; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--cb-danger); color: #fff; font-size: .6rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

/* more-sheet */
.cb-more-sheet {
  position: fixed; inset: auto 0 0 0; z-index: 1055; background: var(--cb-white);
  border-radius: 20px 20px 0 0; box-shadow: var(--cb-shadow-lg);
  transform: translateY(105%); transition: transform .28s ease;
  max-height: 78vh; overflow-y: auto; width: 100%;
}
.cb-more-sheet.open { transform: translateY(0); }
.cb-more-sheet .grab { width: 42px; height: 4px; border-radius: 99px; background: #D7DAE2; margin: 12px auto 4px; }
.cb-sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; }
.cb-sheet-tile {
  border: 1px solid var(--cb-line); border-radius: var(--cb-radius-sm); background: #FAFBFD;
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px;
  font-size: .74rem; font-weight: 800; color: var(--cb-ink); text-align: center;
}
.cb-sheet-tile i { font-size: 1.4rem; color: var(--cb-navy); }
.cb-sheet-backdrop { position: fixed; inset: 0; background: rgba(16, 24, 40, .4); z-index: 1052; opacity: 0; pointer-events: none; transition: opacity .25s; }
.cb-sheet-backdrop.show { opacity: 1; pointer-events: auto; }

/* ---------- dropdown/menu skin ---------- */
.dropdown-menu { border: 1px solid var(--cb-line); border-radius: var(--cb-radius); box-shadow: var(--cb-shadow-lg); font-size: .86rem; }
.dropdown-header { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--cb-muted); }
.dropdown-item:active, .dropdown-item.active { background: var(--cb-navy); }

/* ---------- scrollbar ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #CDD2DE; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #AEB5C6; border: 2px solid transparent; background-clip: content-box; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
  .cb-sidebar { transform: translateX(-100%); transition: transform .25s ease; margin-left: 0 !important; box-shadow: var(--cb-shadow-lg); }
  body.cb-drawer-open .cb-sidebar { transform: translateX(0); }
  .cb-main-col { margin-left: 0 !important; }
  .cb-drawer-backdrop { position: fixed; inset: 0; background: rgba(16, 24, 40, .45); z-index: 1044; opacity: 0; pointer-events: none; transition: opacity .25s; }
  body.cb-drawer-open .cb-drawer-backdrop { opacity: 1; pointer-events: auto; }
  .cb-content { padding: 16px 14px calc(var(--cb-bottomnav-h) + 28px); }
}
@media (min-width: 992px) {
  .cb-only-mobile { display: none !important; }
}
@media (max-width: 991.98px) {
  .cb-hide-mobile { display: none !important; }
}
@media (max-width: 767.98px) {
  .cb-bottomnav { display: block; }
  body { font-size: .9rem; }
  .cb-page-title { font-size: 1.15rem; }
  .kpi .k-value { font-size: 1.3rem; }
  .cb-topbar { padding: 0 10px; gap: 6px; }
  .cb-topbar .cb-hotel-switch { padding: 7px 10px; font-size: .78rem; max-width: 150px; }
  #cbSearchBtn { display: none; }
}

/* desktop table vs mobile card swap */
@media (max-width: 767.98px) {
  .cb-desktop-only { display: none !important; }
}
@media (min-width: 768px) {
  .cb-mobile-only { display: none !important; }
}

/* ---------- booking detail drawer (CB.bookingDrawer) ---------- */
/* fluid width: comfortable reading column on desktop, full-bleed sheets on phones */
#cbBkDrawer { width: min(680px, 94vw); border: 0; }
@media (min-width: 1400px) { #cbBkDrawer { width: min(760px, 62vw); } }
@media (max-width: 575.98px) { #cbBkDrawer { width: 100vw; } }
.cb-oc-head { background: var(--cb-navy); color: #fff; padding: 14px 26px; }
.cb-oc-head .bk-no { font-size: 1.2rem; font-weight: 800; letter-spacing: .01em; }
.cb-oc-head small { color: #C9C4EE; font-weight: 600; font-size: .78rem; line-height: 1.5; }
.cb-oc-actions { display: flex; gap: 10px; flex-wrap: wrap; padding: 12px 26px; border-bottom: 1px solid var(--cb-line); background: #FBFBFE; }
.cb-oc-actions .btn-oc { border: 1px solid var(--cb-line); background: #fff; border-radius: 10px; padding: 8px 15px; font-size: .84rem; font-weight: 800; color: var(--cb-navy); cursor: pointer; }
.cb-oc-actions .btn-oc:hover { border-color: var(--cb-navy); }
.cb-oc-actions .btn-oc.danger { color: var(--cb-danger); border-color: #F5C6C2; background: var(--cb-danger-050); }
.cb-oc-actions .btn-oc.success { color: #0A8A4F; border-color: #BBE8D3; background: var(--cb-success-050); }
/* labelled content blocks so the eye has anchors */
.cb-oc-label { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--cb-muted); margin: 0 0 6px; }
/* stay block = one calm strip, no competing tinted tiles — the amber pay-bar is the only highlight */
.bk-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; background: #fff; border: 1px solid var(--cb-line); border-radius: 14px; padding: 14px 22px; }
.bk-summary .bs-cell { display: flex; flex-direction: column; }
.bk-summary .bs-cell + .bs-cell { padding-left: 22px; border-left: 1px solid var(--cb-line); }
.bk-summary .bs-l { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--cb-muted); margin-bottom: 3px; }
.bk-summary .bs-v { font-size: .95rem; font-weight: 800; color: var(--cb-ink); }
.bk-summary .bs-dates { font-size: 1.18rem; font-weight: 800; color: var(--cb-ink); letter-spacing: .01em; }
.bk-summary .bs-arrow { color: var(--cb-muted); font-weight: 800; margin: 0 8px; font-size: .95rem; }
.bk-summary .bs-sub { font-size: .74rem; font-weight: 600; color: var(--cb-muted); margin-top: 2px; }
@media (max-width: 575.98px) {
  .bk-summary { gap: 14px; }
  .bk-summary .bs-cell + .bs-cell { padding-left: 14px; }
}
.bk-amt-table { width: 100%; font-size: .86rem; }
.bk-amt-table th { color: var(--cb-muted); font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--cb-line); padding: 10px 10px; }
.bk-amt-table td { padding: 12px 10px; border-bottom: 1px dashed var(--cb-line); font-weight: 700; color: var(--cb-ink); }
.bk-guest-card { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border: 1px solid var(--cb-line); border-left: 3px solid var(--cb-navy); border-radius: 16px; }
.bk-guest-card .gi { font-size: .86rem; font-weight: 600; color: #475467; }
.pay-bar { display: flex; justify-content: space-between; align-items: center; background: var(--cb-amber-050); border: 1px solid #F3D9A4; border-radius: 14px; padding: 16px 22px; font-weight: 800; color: var(--cb-navy); font-size: .98rem; }
.pay-bar span:last-child { font-size: 1.16rem; }

#offcanvasRight { width: min(680px, 94vw); border: 0; }
@media (min-width: 1400px) { #offcanvasRight { width: min(760px, 62vw); } }
@media (max-width: 575.98px) { #offcanvasRight { width: 100vw; } }

/* ---------- printable voucher / commission invoice docs ---------- */
.cb-doc { background: #fff; color: var(--cb-ink); border-radius: 4px; padding: 34px 38px; font-size: .86rem; }
.cb-doc .d-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 3px solid var(--cb-navy); padding-bottom: 14px; margin-bottom: 18px; }
.cb-doc .d-mark { font-size: 1.2rem; font-weight: 800; color: var(--cb-navy); }
.cb-doc .d-mark span { color: var(--cb-amber-600); }
.cb-doc .d-type { text-align: right; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; color: var(--cb-muted); }
.cb-doc .d-sec { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--cb-muted); margin: 18px 0 6px; }
.cb-doc table { width: 100%; font-size: .84rem; border-collapse: collapse; }
.cb-doc table th { text-align: left; background: var(--cb-navy-050); color: var(--cb-navy); padding: 8px 10px; font-weight: 800; font-size: .74rem; }
.cb-doc table td { padding: 8px 10px; border-bottom: 1px solid var(--cb-line); }
.cb-doc .d-tot { display: flex; justify-content: flex-end; margin-top: 14px; }
.cb-doc .d-tot table { width: 280px; }
.cb-doc .d-tot td:last-child { text-align: right; font-weight: 800; }
.cb-doc .d-stamp { float: right; border: 2px solid var(--cb-success); color: var(--cb-success); font-weight: 800; border-radius: 8px; padding: 4px 12px; transform: rotate(-4deg); font-size: .8rem; letter-spacing: .08em; }
.cb-doc .d-foot { margin-top: 22px; padding-top: 12px; border-top: 1px dashed var(--cb-line); font-size: .74rem; color: var(--cb-muted); }

/* ---------- more-filters panel ---------- */
.mf-panel { background: var(--cb-white); border: 1px solid var(--cb-line); border-radius: var(--cb-radius); padding: 18px 20px 14px; margin-bottom: 16px; box-shadow: var(--cb-shadow); display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.mf-panel .mf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px 16px; flex: 1 1 320px; }
.mf-panel label { font-size: .72rem; font-weight: 700; color: var(--cb-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; display: block; }
.mf-panel select, .mf-panel input[type="number"], .mf-panel input[type="text"] { font-size: .82rem; border-radius: 8px; border-color: var(--cb-line); }
.mf-actions { display: flex; gap: 10px; align-items: flex-end; flex: 0 0 auto; }
.mf-panel .mf-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; border-radius: 8px; background: var(--cb-amber); color: var(--cb-navy); font-size: .6rem; font-weight: 800; margin-left: 5px; }

/* ---------- print ---------- */
@media print {
  .cb-sidebar, .cb-topbar, .cb-bottomnav, .cb-drawer-backdrop, .cb-more-sheet, .cb-sheet-backdrop, #cbToasts, .cb-page-head { display: none !important; }
  .cb-main-col { margin: 0 !important; }
  body.cb-printing { overflow: visible !important; }
  body.cb-printing .modal { position: static !important; display: block !important; overflow: visible !important; background: #fff !important; }
  body.cb-printing .modal-backdrop, body.cb-printing .cb-doc-actions { display: none !important; }
  body.cb-printing .modal-dialog { max-width: 100% !important; margin: 0 !important; }
  body.cb-printing .offcanvas { display: none !important; }
}

/* ---------- sticky table headers (page-scroll mode) ---------- */
#portfolioTable,
#noRoomsTable,
#allHotelsTable,
#bookingsTable,
#vbTable {
  border-collapse: separate !important;
  border-spacing: 0;
}
#portfolioTable thead th,
#noRoomsTable thead th,
#allHotelsTable thead th,
#bookingsTable thead th,
#vbTable thead th {
  position: sticky;
  top: var(--cb-topbar-h);
  z-index: 2;
  background: #FAFBFD;
  box-shadow: 0 1px 0 var(--cb-line);
}