/* ============================================================
   Lobby — views/BEngine/N/lobby.php
   Scoped under .lb. Replaces lobbyadmin / lobbyacc / lobbycashback with one
   shell; the panes inside still carry the old markup, so anything not
   prefixed .lb- here is a restyle of that markup, not new structure.
   ============================================================ */

body.lb-body { margin: 0; background: #f4f7fa; }

.lb {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: "Open Sans", sans-serif;
  color: var(--ink);
  background: var(--slate-50);
}

.lb *, .lb *::before, .lb *::after { box-sizing: border-box; }

/* ---------- top bar ---------- */

.lb-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  flex: 0 0 var(--bar);
  height: var(--bar);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 1px 3px rgba(12, 36, 57, .18);
}

.lb-burger {
  display: none;
  width: 38px;
  height: 38px;
  margin-left: -8px;
  padding: 0;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.lb-brand { display: flex; align-items: center; gap: 10px; }

.lb-brand-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue), #6aa6d8);
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 2px 8px rgba(43, 116, 176, .45);
}

.lb-brand-name {
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: .2px;
  color: #fff;
}

.lb-brand-sub {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  border-left: 1px solid rgba(255, 255, 255, .18);
  padding-left: 10px;
}

/* which section is open. The brand says where you are in the product; this
   says where you are in the lobby, which the framed tools cannot say for
   themselves once their own heading is hidden. */
.lb-crumb {
  display: none;
  min-width: 0;
  padding-left: 12px;
  margin-left: -2px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
  border-left: 1px solid rgba(255, 255, 255, .18);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-spacer { flex: 1 1 auto; }

/* get_hot_button() emits a bare <input>; this is the only place it lands */
.lb-testing .btn-danger {
  height: 32px;
  margin: 0 !important;
  padding: 0 12px !important;
  float: none !important;
  font-size: 12px;
  font-weight: 600;
  color: #ffd98a !important;
  background: rgba(183, 121, 31, .18);
  border: 1px solid rgba(255, 217, 138, .35);
  border-radius: var(--r);
}

.lb-user {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 10px 4px 4px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .07);
}

.lb-avatar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.lb-avatar-lg { width: 38px; height: 38px; font-size: 13px; }

.lb-user-txt { display: flex; flex-direction: column; line-height: 1.15; }
.lb-user-name { font-size: 12px; font-weight: 600; color: #fff; }
.lb-user-role { font-size: 9.5px; letter-spacing: .7px; text-transform: uppercase; color: #8fc0e6; }

.lb-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--r);
  text-decoration: none;
  transition: background .16s var(--ease);
}

.lb-logout:hover,
.lb-logout:focus { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }

/* ---------- shell ---------- */

.lb-shell { flex: 1 1 auto; display: flex; min-height: 0; }

.lb-scrim { display: none; }

.lb-nav {
  flex: 0 0 var(--nav);
  width: var(--nav);
  padding: 12px 8px 24px;
  background: #fff;
  border-right: 1px solid var(--slate-200);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lb-nav-user { display: none; }

.lb-nav-head {
  padding: 14px 12px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--slate-400);
}

.lb-nav-head:first-of-type { padding-top: 8px; }

.lb-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 9px;
  font-family: var(--serif);
  font-size: 13.5px;
  color: #33506b;
  text-decoration: none;
  transition: background .16s var(--ease), color .16s var(--ease);
}

.lb-nav-item > svg {
  flex: 0 0 18px;
  color: #6b8098;
  transition: color .16s var(--ease), transform .16s var(--ease);
}

/* the icon leads, the label follows it — enough to feel live, small enough
   that a menu of sixteen does not look like it is squirming */
.lb-nav-item:hover > svg { transform: translateX(2px); }
.lb-nav-txt { flex: 1 1 auto; }

.lb-nav-item:hover { background: var(--slate-50); color: var(--navy); text-decoration: none; }
.lb-nav-item:hover > svg { color: var(--blue); }

.lb-nav-item.is-on { background: var(--blue-50); color: var(--navy); font-weight: 700; }
.lb-nav-item.is-on > svg { color: var(--blue); }
.lb-nav-item.is-on::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--blue);
}

.lb-out { color: var(--slate-300); }

.lb-count {
  font-family: "Open Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--slate-600);
  background: var(--slate-100);
  border-radius: 20px;
  padding: 1px 8px;
}

.lb-nav-item.is-on .lb-count { color: var(--blue-600); background: #fff; }

.lb-nav-foot {
  margin: auto 2px 0;
  padding: 13px 14px;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 9px;
}

.lb-nav-foot-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--slate-600);
}

.lb-nav-foot p { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--slate-600); }

/* ---------- main ---------- */

.lb-main { flex: 1 1 auto; min-width: 0; padding: 20px 24px 24px; }

.lb-pane { display: none; }

.lb-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--slate-200);
}

.lb-head h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
}

.lb-sub { margin: 4px 0 0; font-size: 13px; color: var(--slate-600); }

/* ---------- recently opened ---------- */

.lb-recent:empty { display: none; }
.lb-recent { margin-top: 20px; }

.lb-recent-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--slate-600);
  margin-bottom: 9px;
}

.lb-recent-row { display: flex; flex-wrap: wrap; gap: 10px; }

.lb-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 9px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 9px;
  text-decoration: none;
  transition: border-color .16s var(--ease);
}

.lb-chip {
  transition: border-color .14s var(--ease), transform .14s var(--ease),
              box-shadow .14s var(--ease);
}

.lb-chip:hover {
  border-color: var(--blue);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--e-2);
}

.lb-chip-mark {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  font-family: var(--serif);
  font-size: 11px;
  font-weight: 700;
}

.lb-chip-name { font-size: 13px; font-weight: 600; color: var(--ink); }

/* ---------- picker filter ---------- */

.lb-filter {
  margin-top: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.lb-search { position: relative; flex: 1 1 320px; max-width: 420px; }

.lb-search > svg {
  position: absolute;
  left: 12px;
  top: 11px;
  color: var(--slate-400);
  pointer-events: none;
}

.lb-search input {
  width: 100%;
  height: 38px;
  padding: 8px 11px 8px 36px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--slate-300);
  border-radius: var(--r);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}

.lb-search input:focus,
.lb .lb-select:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(43, 116, 176, .16);
}

.lb .lb-select {
  height: 38px;
  padding: 8px 11px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--slate-300);
  border-radius: var(--r);
}

.lb-count-txt { font-size: 12px; white-space: nowrap; color: var(--slate-600); }

/* ---------- property list ---------- */

.lb-list {
  margin-top: 20px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  /* no overflow:hidden — it would break position:sticky on .lb-list-head, so
     the corners are rounded on the first and last children instead */
}

.lb-list-head { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.lb-row:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }

.lb-list-head,
.lb-row {
  display: grid;
  /* the header and the rows are separate grid containers, so an `auto` track
     would size differently in each (empty header slot vs two buttons) and the
     1fr column would absorb the difference. Every track is explicit. */
  grid-template-columns: 38px 84px minmax(0, 1fr) 150px 150px 140px 190px 22px;
  align-items: center;
  gap: 16px;
}

.lb-list-head {
  position: sticky;
  top: var(--bar);            /* the page bar is sticky too, so clear it */
  z-index: 4;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--slate-600);
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
}

/* ---------- sortable headers ---------- */

.lb .lb-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .14s var(--ease);
}

.lb .lb-sort:hover { color: var(--navy); }
.lb .lb-sort:focus { outline: 0; color: var(--navy); text-decoration: underline; }

/* faint caret on hover, solid and pointed once the column is the active sort */
.lb .lb-sort > i {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid var(--slate-300);
  opacity: 0;
  transition: opacity .14s var(--ease), transform .14s var(--ease);
}

.lb .lb-sort:hover > i { opacity: .6; }
.lb .lb-sort.is-asc > i,
.lb .lb-sort.is-desc > i { opacity: 1; border-bottom-color: var(--blue); }
.lb .lb-sort.is-desc > i { transform: rotate(180deg); }
.lb .lb-sort.is-asc, .lb .lb-sort.is-desc { color: var(--navy); }

.lb-row {
  padding: 12px 16px;
  border-top: 1px solid var(--slate-100);
  cursor: pointer;
  transition: background .14s var(--ease), transform .14s var(--ease),
              box-shadow .14s var(--ease);
}

.lb-row:first-of-type { border-top: 0; }

/* A single pixel and a shadow. The row is 748 rows' worth of identical
   grey; the only job here is to say which one the pointer is on, without
   nudging the row below it — transform does not reflow. */
.lb-row:hover {
  background: var(--blue-50);
  transform: translateY(-1px);
  box-shadow: var(--e-2);
  position: relative;
  z-index: 1;
}
.lb-row:hover .lb-go { color: var(--blue); }
.lb-row:hover .lb-row-name { color: var(--blue-600); }

.lb-mark {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  font-family: var(--serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
}

/* the logo covers the initials; if it fails to load the img is removed */
.lb-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  padding: 2px;
}

.lb-chip-mark .lb-logo { padding: 3px; }

.lb-row-main { min-width: 0; }

.lb-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  transition: color .14s var(--ease);
}

.lb-row-cell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--slate-600);
}

.lb-row-cell:empty::before { content: "—"; color: var(--slate-300); }

.lb-code {
  justify-self: start;
  font-family: Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--slate-600);
  background: var(--slate-100);
  border-radius: 5px;
  padding: 3px 8px;
}

.lb-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 20px;
  padding: 3px 9px;
  white-space: nowrap;
}

.lb-on      { color: var(--ok); background: #e4f3ea; }
.lb-neutral { color: var(--slate-600); background: var(--slate-100); }

.lb-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.lb-visit,
.lb-set {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-600);
  background: #fff;
  border: 1px solid var(--slate-300);
  border-radius: var(--r);
  text-decoration: none;
  transition: color .14s var(--ease), border-color .14s var(--ease), background .14s var(--ease);
}

.lb-visit:hover,
.lb-visit:focus {
  color: var(--blue-600);
  border-color: var(--blue);
  background: var(--blue-50);
  text-decoration: none;
}

.lb-set {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
  cursor: pointer;
}

.lb-set:hover,
.lb-set:focus {
  color: #fff;
  background: var(--blue-600);
  border-color: var(--blue-600);
}

.lb-ico { width: 14px; height: 14px; flex: 0 0 14px; }
.lb-go  { width: 16px; height: 16px; color: var(--slate-300); transition: color .14s var(--ease); }

.lb-noresult {
  display: none;
  margin-top: 16px;
  padding: 44px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--slate-600);
  background: #fff;
  border: 1px dashed var(--slate-300);
  border-radius: var(--r-lg);
}

/* ---------- empty state ---------- */

.lb-empty {
  margin-top: 22px;
  padding: 56px 40px;
  text-align: center;
  background: #fff;
  border: 1px dashed var(--slate-300);
  border-radius: var(--r-lg);
}

.lb-empty-ico {
  width: 56px;
  height: 56px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--slate-50);
  color: var(--slate-400);
}

.lb-empty h3 {
  margin: 18px 0 0;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
}

.lb-empty p {
  max-width: 420px;
  margin: 8px auto 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--slate-600);
}

/* ---------- filter cards (ported panes) ---------- */

.lb-card-panel {
  margin-top: 20px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  /* no overflow:hidden — the hotel multiselect's menu has to escape the card */
}

.lb-card-head {
  padding: 12px 20px;
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.lb-card-head h4 {
  margin: 0;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}

.lb-card-inner { padding: 20px; }

.lb-card-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  background: var(--slate-50);
  border-top: 1px solid var(--slate-200);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.lb-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  align-items: end;
}

.lb-field label {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--slate-600);
}

.lb .form-control {
  width: 100%;
  height: auto;
  min-height: 38px;
  padding: 8px 11px;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--slate-300);
  border-radius: var(--r);
  box-shadow: none;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}

.lb .form-control:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(43, 116, 176, .16);
}

.lb-sub-block { margin-top: 20px; }

.lb-sub-block > label {
  display: block;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--slate-600);
}

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

.lb-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 20px;
  cursor: pointer;
  transition: border-color .14s var(--ease), background .14s var(--ease);
}

.lb-check:hover { border-color: var(--blue); background: var(--blue-50); }
.lb-check input { margin: 0; }

.lb-multi-label {
  display: block;
  margin: 14px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--slate-600);
}

/* bootstrap-multiselect, injected by box.get_all_hotels() into .hotel-list */
.lb-multi { position: relative; z-index: 5; margin-top: 6px; max-width: 420px; }
.lb-multi:empty { display: none; }
/* bootstrap floats .btn-group>.btn; display:block would not contain that float
   and the button would escape the card. flex makes the float moot. */
.lb-multi .btn-group { display: flex; width: 100%; }

/* inc-js.php loads bootstrap-multiselect's JS from a CDN but not its stylesheet,
   which is what normally hides the original <select>. Without this the raw
   multi-select renders as a white block beside the generated button. */
/* .lb .form-control is (0,2,0), so this needs the extra class to win */
.lb .lb-multi select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  min-height: 0;
}

.lb .multiselect.dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--slate-300);
  border-radius: var(--r);
  box-shadow: none;
}

.lb .multiselect.dropdown-toggle:hover { border-color: var(--blue); }
.lb .multiselect.dropdown-toggle[disabled] { opacity: .5; background: var(--slate-50); }
.lb .multiselect.dropdown-toggle .caret { color: var(--slate-400); }

.lb .multiselect-container {
  width: 100%;
  min-width: 0;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  margin-top: 4px;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 32px rgba(12, 36, 57, .16);
}

.lb .multiselect-container > li > a { padding: 0; }

.lb .multiselect-container > li > a > label {
  display: block;
  position: relative;
  /* bootstrap pulls .checkbox inputs out with margin-left:-20px, so the left
     padding has to leave room for it */
  padding: 8px 10px 8px 32px;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  border-radius: 6px;
}

.lb .multiselect-container > li > a > label > input { margin-top: 1px; }

.lb .multiselect-container > li > a > label:hover { background: var(--blue-50); }
.lb .multiselect-container > li.active > a > label { background: var(--blue-50); font-weight: 600; }

.lb .multiselect-container > li.multiselect-item.filter { padding: 2px 2px 8px; }
.lb .multiselect-container .multiselect-search { min-height: 34px; border-radius: var(--r) 0 0 var(--r); }
.lb .multiselect-container .input-group-addon { background: var(--slate-50); border-color: var(--slate-300); }

.lb .btn {
  min-height: 38px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--r);
  border: 1px solid transparent;
  box-shadow: none;
}

.lb .btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.lb .btn-primary:hover,
.lb .btn-primary:focus { background: var(--blue-600); border-color: var(--blue-600); }
.lb .btn-success { background: var(--ok); border-color: var(--ok); color: #fff; }
.lb .btn[disabled] { opacity: .45; }

/* ---------- result surfaces ---------- */

.lb-result { margin-top: 20px; }
.lb-result:empty { display: none; }

/* DataTables computes explicit table widths whenever scrollX/scrollY is on.
   Forcing width here is what makes its cloned header drift from the body, so
   only plain (non-DataTables) tables get stretched. */
.lb-result table {
  background: #fff;
  border-collapse: separate;
  border-spacing: 0;
}

/* DataTables manages margins too (it uses them for scroll alignment), so the
   reset only applies to tables it is not driving */
.lb-result table:not(.dataTable) {
  width: 100%;
  margin: 0;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* the card chrome moves to the wrapper so the scroll containers stay intact */
.lb-result .dataTables_wrapper {
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
}

.lb-result .dataTables_scrollHead,
.lb-result .dataTables_scrollBody { background: #fff; }

.lb-result thead th {
  padding: 11px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--slate-600);
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
}

.lb-result tbody td {
  padding: 11px 12px;
  font-size: 13px;
  border-top: 1px solid var(--slate-100);
}

.lb-result tbody tr:hover td { background: var(--slate-50); }

/* the DataTables bootstrap integration puts .form-control on its own search
   box and length menu, so .lb .form-control{width:100%} was stretching them */
.lb .dataTables_filter input,
.lb .dataTables_length select {
  width: auto;
  min-height: 34px;
  padding: 6px 11px;
  font-size: 13px;
  border: 1px solid var(--slate-300);
  border-radius: var(--r);
}

.lb .dataTables_filter input { min-width: 200px; }
.lb .dataTables_filter, .lb .dataTables_length { font-size: 13px; color: var(--slate-600); }

.lb .dataTables_paginate .paginate_button {
  padding: 5px 11px;
  font-size: 13px;
  border-radius: var(--r);
}

/* ---------- mobile ---------- */

@media (max-width: 991px) {
  .lb { --bar: 56px; }

  .lb-burger { display: grid; place-items: center; }
  .lb-brand-name, .lb-brand-sub { display: none; }
  .lb-user .lb-user-txt { display: none; }

  .lb-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 80;
    width: 296px;
    padding: 0 10px 16px;
    transform: translateX(-100%);
    transition: transform .22s var(--ease);
    overflow-y: auto;
    box-shadow: 4px 0 24px rgba(12, 36, 57, .28);
  }

  .lb.is-drawer .lb-nav { transform: none; }

  .lb-nav-user {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 -10px 8px;
    padding: 16px;
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  }

  .lb.is-drawer .lb-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(12, 36, 57, .52);
    /* the drawer already slides; without this the ground behind it snaps */
    animation: lb-fade var(--dur-slow) var(--ease-out);
  }

  .lb-nav-item { min-height: 46px; font-size: 14px; }

  .lb-main { padding: 16px 16px 24px; }

  .lb-list-head { display: none; }

  .lb-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
    min-height: 60px;
  }

  /* the code column folds back under the name on a phone */
  .lb-code {
    grid-row: 1;
    grid-column: 2;
    justify-self: start;
    align-self: end;
    font-size: 11px;
  }

  .lb-row-main { grid-row: 1; grid-column: 2; align-self: start; }
  .lb-row-cell { display: none; }
  /* name + actions win the width here; the connector badge is desktop-only */
  .lb-go { display: none; }
  .lb-actions { gap: 6px; }
  .lb-visit, .lb-set { width: 36px; height: 36px; padding: 0; }
  .lb-visit span, .lb-set span { display: none; }

  .lb-card-foot .btn { flex: 1 1 auto; }
}

/* ============================================================
   Booking / cashback results — 20 columns of operational data.
   Staff work these in bulk, so the priority is fitting as much on
   screen as possible and making status readable at a glance.
   ============================================================ */

/* Collapse the nav to an icon rail to give these tables ~190px more room.
   Mirrors body.nav-collapsed in nav-newbng.css, which the rest of the admin
   already uses. */
.lb.is-rail { --nav: 68px; }
.lb.is-rail .lb-nav { padding-left: 6px; padding-right: 6px; }
.lb.is-rail .lb-nav-txt,
.lb.is-rail .lb-nav-head,
.lb.is-rail .lb-count,
.lb.is-rail .lb-out,
.lb.is-rail .lb-nav-foot { display: none; }
.lb.is-rail .lb-nav-item { justify-content: center; padding-left: 0; padding-right: 0; }

.lb-rail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: rgba(255, 255, 255, .75);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--r);
  cursor: pointer;
  transition: background .16s var(--ease);
}

.lb-rail-btn:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.lb.is-rail .lb-rail-btn { background: rgba(255, 255, 255, .16); color: #fff; }

/* these panes are data-dense; claw back some page padding too */
.lb-pane[data-pane="reservations"],
.lb-pane[data-pane="cashback"] { margin: 0 -12px; }

/* denser cells so more columns fit before anything scrolls */
.lb .table-book-reser,
.lb .table-cashback { font-size: 12px; }

.lb .table-book-reser th,
.lb .table-book-reser td,
.lb .table-cashback th,
.lb .table-cashback td {
  padding: 7px 6px;
  vertical-align: middle;
}

/* Values that must never break mid-character: row numbers, money, counts,
   booking ids, dates. break-word was splitting "17" into "1 / 7" and
   "4200.00" into "4200. / 00". */
.lb .cell-res-no,
.lb .cell-res-no-room,
.lb .cell-res-no-pri,
.lb .cell-res-no-policy,
.lb .cell-res-booknum,
.lb .cell-res-no-pay-met,
.lb .cell-res-no-pay-st,
.lb .cell-res-ck-in,
.lb .cell-res-ck-out,
.lb .cell-res-glpm-no-pri,
.lb .cell-res-glpm-booknum,
.lb .cell-res-glpm-no-pay-met,
.lb .cell-res-glpm-no-pay-st { white-space: nowrap; }

/* Text that may wrap, but only between words */
.lb .cell-res-bookdate,
.lb .cell-res-hname,
.lb .cell-res-des,
.lb .cell-res-product,
.lb .cell-res-glpm-title,
.lb .cell-res-glpm-bookdate,
.lb .cell-res-glpm-hname,
.lb .cell-res-glpm-des { white-space: normal; word-break: normal; overflow-wrap: break-word; }

/* Minimum widths so nothing is squeezed into a column of its own making */
.lb .cell-res-ck-box    { min-width: 30px; }
.lb .cell-res-no        { min-width: 36px; text-align: center; }
.lb .cell-res-bookdate  { min-width: 88px; }
.lb .cell-res-product   { min-width: 84px; }
.lb .cell-res-hname     { min-width: 124px; }
.lb .cell-res-booknum   { min-width: 104px; }
.lb .cell-res-des       { min-width: 74px; }
.lb .cell-res-glpm-title { min-width: 150px; }
.lb .cell-res-ck-in,
.lb .cell-res-ck-out    { min-width: 82px; }
.lb .cell-res-no-room   { min-width: 46px; text-align: center; }
.lb .cell-res-no-pri    { min-width: 76px; text-align: right; }
.lb .cell-res-no-policy { min-width: 48px; }
.lb .cell-res-no-pay-met { min-width: 88px; }
.lb .cell-res-no-pay-st { min-width: 76px; }

.lb .table-book-reser thead th,
.lb .table-cashback thead th {
  font-size: 10px;
  letter-spacing: .03em;
  line-height: 1.25;
}

/* the two editable status columns get real room (complaint #2) */
.lb .cell-res-st-book-mkt,
.lb .cell-res-glpm-st-book-mkt { min-width: 148px; }
.lb .cell-res-st-book-acc,
.lb .cell-res-glpm-st-book-acc { min-width: 158px; }
.lb .cell-res-comment { min-width: 130px; }

.lb .table-book-reser select,
.lb .table-cashback select {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 4px 6px;
  font-size: 12px;
  border-radius: 5px;
}

.lb .table-book-reser td input[type="text"] {
  width: 100%;
  min-height: 30px;
  padding: 4px 6px;
  font-size: 12px;
  border-radius: 5px;
}

/* --- status colours (complaint #3) --------------------------------
   data-v is written by lb.paint_status(); the values come from
   BEngineN_m: MKT 0 Pending / 1 Submitted, ACC 2 Waiting / 3 Processing
   / 4 Paid. Submitted greys out so finished rows recede. */

.lb .table-book-reser select[data-v="0"] {          /* MKT pending */
  color: #8a5a12;
  background: #fdf3e3;
  border-color: #e6cfa4;
}

.lb .table-book-reser select[data-v="1"] {          /* MKT submitted — done */
  color: var(--slate-600);
  background: var(--slate-100);
  border-color: var(--slate-300);
}

.lb .table-book-reser select[data-v="2"] {          /* ACC waiting */
  color: #8a5a12;
  background: #fdf3e3;
  border-color: #e6cfa4;
}

.lb .table-book-reser select[data-v="3"] {          /* ACC processing */
  color: var(--blue-600);
  background: var(--blue-50);
  border-color: #a9cbe6;
}

.lb .table-book-reser select[data-v="4"] {          /* ACC paid */
  color: var(--ok);
  background: #e4f3ea;
  border-color: #b6ddc5;
}

.lb .table-book-reser select[disabled] { opacity: 1; cursor: default; }

/* the identity columns stay put while scrolling right, so a row stays
   recognisable when reaching the status columns */
.lb .table-book-reser .cell-res-ck-box,
.lb .table-book-reser .cell-res-no {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
}

.lb .table-book-reser .cell-res-no { left: 42px; }
.lb .table-book-reser thead .cell-res-ck-box,
.lb .table-book-reser thead .cell-res-no { background: var(--slate-50); z-index: 3; }

/* Payment-link status: Expired has to be unmissable (complaint #7) */
.lb .cell-res-no-pay-st,
.lb .cell-res-glpm-no-pay-st { font-weight: 700; white-space: nowrap; }

@media (max-width: 1400px) {
  .lb-pane[data-pane="reservations"] .lb-result,
  .lb-pane[data-pane="cashback"] .lb-result { margin-left: 0; }
}

/* ---------- skeleton loading ----------
   Stands in for a table while it is on its way. Matches the real row height
   so nothing jumps when the content lands. */

.lb-skel {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.lb-skel-row {
  display: grid;
  grid-template-columns: 1fr 2fr 1.4fr 1.4fr 1fr;
  align-items: center;
  gap: 16px;
  /* Measured 2026-09-02 against a real DataTables row at the pane's real width
     (1440 window, 256 nav): 32px for the common single-line row. The old 52
     came from a measurement at a narrower width where addresses wrapped, and
     left a 20px jump per row when data landed. 40 is on the scale, within 8px
     of the common case, and absorbs a mild wrap rather than being pushed down
     by it. */
  height: 40px;
  padding: 0 16px;
  border-top: 1px solid var(--slate-100);
}

.lb-skel-row:first-child { border-top: 0; }
.lb-skel-row.is-head { height: 40px; background: var(--slate-50); border-bottom: 1px solid var(--slate-200); }

.lb-bone {
  display: block;
  height: 10px;
  border-radius: 5px;
  background: var(--slate-100);
  background-image: linear-gradient(90deg, var(--slate-100) 0%, var(--slate-200) 50%, var(--slate-100) 100%);
  background-size: 200% 100%;
  animation: lb-shimmer 1.3s linear infinite;
}

.lb-skel-row.is-head .lb-bone { height: 8px; background-image: none; background: var(--slate-300); animation: none; }

.lb-bone.w3 { width: 30%; }
.lb-bone.w4 { width: 45%; }
.lb-bone.w5 { width: 60%; }
.lb-bone.w6 { width: 75%; }
.lb-bone.w7 { width: 88%; }

@keyframes lb-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* a shimmer that never resolves is worse than none — and motion is not
   everyone's friend */
@media (prefers-reduced-motion: reduce) {
  .lb-bone { animation: none; background-image: none; }
}

/* the same skeleton for a bare <table>, whose placeholder has to be rows */
tr.lb-skel-tr > td {
  height: 40px;
  padding: 0 16px;
  background: #fff;
  border-top: 1px solid var(--slate-100);
}

tr.lb-skel-tr:first-child > td { border-top: 0; }

td.lb-stalled-cell {
  padding: 28px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--slate-600);
  background: #fff;
}

.lb-stalled,
.lb-note {
  margin: 0;
  padding: 28px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--slate-600);
  background: #fff;
  border: 1px dashed var(--slate-300);
  border-radius: var(--r-lg);
}

/* ============================================================
   Motion

   Two keyframes for the whole screen. Everything that arrives uses one of
   them, so the lobby moves in one accent rather than six.

   What deliberately does NOT animate:

   - The pane itself never gets a transform, only opacity. A transform makes
     the element a containing block, which would move .lb-list-head out from
     under position:sticky and change what DataTables measures in
     lb.remeasure(). The travel is on .lb-head instead, which is neither.
   - The embedded tools' iframes are not faded in on a JS class. Gating a
     tool's visibility on a class that has to be removed later is exactly how
     nine of them shipped as blank white panes; the skeleton already covers
     the wait.
   ============================================================ */

@keyframes lb-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@keyframes lb-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* lb.show() replays .lb-in on the pane it opened by taking the class off,
   forcing a reflow and putting it back. The class then stays put, which is
   why nothing here uses fill-mode: forwards — the moment an animation ends
   the element is back on its own styles, carrying no transform.

   The content follows the heading by 40ms, which needs `backwards` so it
   holds the opening frame through the delay instead of flashing in at full
   opacity first. `backwards` reverts once the animation is over; `both`
   would pin the end state permanently over whatever came later. */
.lb-pane.lb-in                     { animation: lb-fade var(--dur-enter) var(--ease-out); }
.lb-pane.lb-in > .lb-head          { animation: lb-rise var(--dur-enter) var(--ease-out); }
.lb-pane.lb-in > .lb-card-panel,
.lb-pane.lb-in > .lb-result,
.lb-pane.lb-in > .lb-filter        { animation: lb-rise var(--dur-enter) var(--ease-out) 40ms backwards; }

/* The section name in the top bar changes under the pointer with nothing to
   mark it; this is the one place a 160ms fade is the whole message. */
.lb-crumb.lb-in { animation: lb-fade var(--dur) var(--ease-out); }

/* The result tables are injected by box.* long after the pane opened, so they
   cannot ride the pane's entrance. This fires on whatever lands, whenever it
   lands, with no class to set and nothing to clean up. */
.lb-result table,
.lb-result .dataTables_wrapper { animation: lb-fade var(--dur-enter) var(--ease-out); }

/* First paint of the property list only. lb.init() drops .is-fresh after the
   stagger has run: sorting re-appends every row, which would otherwise replay
   all 748 animations on every click of a column header.

   The per-row delays are set as inline styles by lb.stagger(), not by a run of
   :nth-child rules. .lb-list-head is the list's first child, so :nth-child(n)
   is row n-1 -- an off-by-one that shipped once already and that any future
   change to the header markup would silently reintroduce. This rule carries
   the delay for everything past the first screenful. */
.lb-list.is-fresh .lb-row {
  animation: lb-rise var(--dur-enter) var(--ease-out) backwards;
  animation-delay: calc(var(--stagger) * 12);
}

/* the recently-opened chips are the first thing on the pane, so they lead */
.lb-recent .lb-chip { animation: lb-rise var(--dur-enter) var(--ease-out); }
.lb-recent .lb-chip:nth-child(2) { animation-delay: var(--stagger); }
.lb-recent .lb-chip:nth-child(3) { animation-delay: calc(var(--stagger) * 2); }

/* the message a frame falls back to, and the empty and stalled states */
.lb-frame-msg,
.lb-noresult,
.lb-stalled,
.lb-note { animation: lb-fade var(--dur-enter) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .lb-pane.lb-in,
  .lb-pane.lb-in > .lb-head,
  .lb-pane.lb-in > .lb-card-panel,
  .lb-pane.lb-in > .lb-result,
  .lb-pane.lb-in > .lb-filter,
  .lb-crumb.lb-in,
  .lb-result table,
  .lb-result .dataTables_wrapper,
  .lb-list.is-fresh .lb-row,
  .lb-recent .lb-chip,
  .lb-frame-msg,
  .lb-noresult,
  .lb-stalled,
  .lb-note {
    animation: none;
  }

  .lb-row:hover,
  .lb-chip:hover { transform: none; }
  .lb-nav-item:hover > svg { transform: none; }
}

/* ---------- embedded tools ----------
   A back-office page running in its own document inside the shell. It keeps
   its own stylesheet and scripts, so nothing about it needed changing to
   bring it in. */

/* An embedded tool gets the same heading a native pane gets. Without one the
   pane was an unlabelled rectangle: the tool's own title bar is hidden as
   duplicate chrome, so nothing on screen said which tool you were looking at.
   Fixed height, because the frame below it is sized by subtraction. */
.lb-pane-embed .lb-head {
  height: 64px;
  align-items: center;
  padding-bottom: 0;
  margin-bottom: 12px;
}

.lb-pane-embed .lb-head h3 { font-size: 19px; }

.lb-pane-embed .lb-sub {
  max-width: 68ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-head-acts { display: flex; gap: 8px; flex: 0 0 auto; }

.lb-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--slate-300);
  border-radius: var(--r);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.lb-btn-ghost:hover,
.lb-btn-ghost:focus {
  color: var(--navy);
  background: var(--slate-50);
  border-color: var(--slate-400);
  text-decoration: none;
}

.lb-frame-wrap {
  position: relative;
  /* Fill what is left under the sticky bar; the tool scrolls inside itself so
     the shell's own chrome stays put. 96px is the pane's top padding (20) plus
     the header above (64) plus its margin (12) — keep the three in step. */
  height: calc(100vh - var(--bar) - 96px);
  margin: 0 -24px -24px;
  background: var(--paper);
  border-top: 1px solid var(--slate-200);
}

.lb-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--paper);
}

/* the frame is blank until the document inside it paints */
.lb-frame-load {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  gap: 16px;
  padding: 28px 24px;
  background: var(--paper);
}

.lb-pane-embed.is-loading .lb-frame-load { display: flex; }

@media (max-width: 991px) {
  /* the description goes, so the header is one line of title and buttons and
     the frame can still be sized by subtraction rather than left to scroll
     inside a page that also scrolls */
  .lb-pane-embed .lb-head { height: 44px; margin-bottom: 12px; }
  .lb-pane-embed .lb-head h3 { font-size: 17px; }
  .lb-pane-embed .lb-sub { display: none; }
  .lb-btn-ghost span { display: none; }
  .lb-btn-ghost { padding: 0 10px; }

  /* 72px: 16 pane padding + 44 header + 12 margin */
  .lb-frame-wrap { height: calc(100vh - var(--bar) - 72px); margin: 0 -16px -24px; }
}

/* a frame that could not show anything useful says so, rather than sitting
   as a white void or an endless shimmer */
/* the frame stays in place but is covered, so nothing reloads */
.lb-pane-embed.is-answered .lb-frame { visibility: hidden; }

.lb-frame-msg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
  text-align: center;
  background: var(--paper);
}

.lb-frame-msg p {
  max-width: 40ch;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--slate-600);
}

.lb-frame-msg a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--blue);
  border-radius: var(--r);
  text-decoration: none;
}

.lb-frame-msg a:hover { background: var(--blue-600); color: #fff; text-decoration: none; }