/* ==========================================================================
   RESERVATIONS DEMO

   A working miniature of the admin a restaurant runs the room from: the Kore
   Site dashboard, and the Reservation System in its left-hand nav, whose List
   row is the table layout. Also the reservation settings and the screen that
   takes a booking.

   The layouts follow the real product, from modules/admin/views/dashboard and
   modules/appointments/views in the mydev codebase, and the table shapes are
   the app's own SVGs. The data is invented.

   Everything is namespaced .rsv-* and scoped under .rsv-demo.
   ========================================================================== */

.rsv-demo {
  --rsv-ink: #0e2a47;
  --rsv-body: #47566a;
  --rsv-muted: #8d9aab;
  --rsv-line: #e6ebf1;
  --rsv-line-2: #f2f5f8;
  --rsv-cyan: #00b4e5;
  --rsv-blue: #1f7ae0;
  --rsv-green: #16a34a;
  --rsv-amber: #eab308;
  --rsv-red: #ef4444;
  --rsv-violet: #7c3aed;

  position: absolute;
  inset: 0;
  display: grid;
  /* The nav, the page, and the platform rail; a meta strip over the page. */
  grid-template-columns: 208px minmax(0, 1fr) 44px;
  grid-template-rows: 34px minmax(0, 1fr);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: var(--rsv-ink);
  background: #fff;
  text-align: left;
  overflow: hidden;
}
.rsv-demo *,
.rsv-demo *::before,
.rsv-demo *::after { box-sizing: border-box; }
/* Only what responds gets a pointer. */
.rsv-demo,
.rsv-demo :where(button) { cursor: default; font: inherit; color: inherit; }
.rsv-demo :where(button) { background: none; border: 0; padding: 0; text-align: left; }
.rsv-demo [data-rsv-go],
.rsv-demo [data-rsv-toggle] { cursor: pointer; }

/* ---------------- main ---------------- */
.rsv-main {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 14px 18px;
}
/* The dashboard is longer than the window, and is meant to be. */
.rsv-main.is-scroll {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #d7dfe8 transparent;
}
.rsv-main.is-scroll::-webkit-scrollbar { width: 6px; }
.rsv-main.is-scroll::-webkit-scrollbar-thumb { background: #d7dfe8; border-radius: 99px; }
.rsv-daterange {
  flex: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 7px;
  background: #e8f4fd;
  color: var(--rsv-blue);
  font-size: 12px;
  font-weight: 700;
}
.rsv-daterange svg { width: 14px; height: 14px; }

.rsv-h3 {
  margin: 0 0 9px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---------------- preference cards ---------------- */
.rsv-prefs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.rsv-pref {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--rsv-line);
  border-radius: 9px;
  background: #fff;
  transition: border-color 0.15s ease;
}
.rsv-pref:hover { border-color: #cfe0f0; }
.rsv-pref__icon {
  flex: none;
  width: 20px;
  display: grid;
  place-items: center;
  color: var(--rsv-ink);
  padding-top: 1px;
}
.rsv-pref__icon svg { width: 16px; height: 16px; }
.rsv-pref__body { flex: 1; min-width: 0; }
.rsv-pref__title {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 3px;
}
.rsv-pref__text {
  display: block;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--rsv-body);
}
/* The switch, which really does flip. */
.rsv-switch {
  flex: none;
  width: 38px;
  height: 21px;
  margin-top: 2px;
  border-radius: 99px;
  background: #dfe4ea;
  position: relative;
  transition: background 0.2s ease;
}
.rsv-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.rsv-switch.is-on { background: #22c55e; }
.rsv-switch.is-on::after { transform: translateX(17px); }

/* ---------------- overview counters ---------------- */
.rsv-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--rsv-line);
  border-radius: 9px;
  overflow: hidden;
  margin-bottom: 16px;
}
.rsv-stat {
  padding: 11px 14px;
  border-right: 1px solid var(--rsv-line-2);
  border-bottom: 1px solid var(--rsv-line-2);
}
.rsv-stat:nth-child(4n) { border-right: 0; }
.rsv-stat:nth-last-child(-n + 4) { border-bottom: 0; }
.rsv-stat__label {
  display: block;
  font-size: 11px;
  color: var(--rsv-body);
  margin-bottom: 4px;
}
.rsv-stat__val {
  display: block;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ---------------- trends chart ---------------- */
.rsv-chart { height: 104px; }
.rsv-chart svg { width: 100%; height: 100%; overflow: visible; }
.rsv-chart__grid { stroke: var(--rsv-line-2); stroke-width: 1; }
.rsv-chart__bar {
  fill: var(--rsv-cyan);
  transform-origin: bottom;
  animation: rsvGrow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes rsvGrow { from { transform: scaleY(0); } }
.rsv-chart__axis { font-size: 8px; fill: var(--rsv-muted); }

/* ---------------- add reservation ---------------- */
.rsv-add__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.rsv-add__head b { color: var(--rsv-cyan); font-weight: 800; }
.rsv-add__head svg { width: 12px; height: 12px; }
.rsv-area {
  display: block;
  padding: 9px 14px;
  margin-bottom: 12px;
  border-radius: 7px;
  border: 2px solid #14a34a;
  background: #16a34a;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
}
/* The search box and the empty state that used to sit on this screen were
   removed with the old add-reservation layout. Their rules stayed behind and
   were being applied to the room's search and its empty list instead, which
   is the sort of thing that only shows up as a mystery later. */

/* ---------------- narrow ---------------- */

@media (max-width: 900px) {
  .rsv-demo { font-size: 11px; }
  .rsv-prefs { grid-template-columns: minmax(0, 1fr); }
  .rsv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rsv-stat:nth-child(4n) { border-right: 1px solid var(--rsv-line-2); }
  .rsv-stat:nth-child(2n) { border-right: 0; }
  .rsv-stat:nth-last-child(-n + 4) { border-bottom: 1px solid var(--rsv-line-2); }
  .rsv-stat:nth-last-child(-n + 2) { border-bottom: 0; }
}

/* The mockup is absolutely positioned, so the laptop screen has nothing to
   size to. The pane is what holds it open. */
/* ==========================================================================
   TAKING A BOOKING

   Four steps down one column: guest, party, sitting, table, with a summary
   that fills in underneath. Everything here answers a click, which is the
   point of putting this screen in a product hero rather than a picture of it.
   ========================================================================== */
.rsv-add { padding: 0 14px 4px; }

.rsv-step {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 14px 0 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--rsv-ink);
}
.rsv-step__n {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  background: var(--rsv-cyan);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}
.rsv-step svg { width: 12px; height: 12px; color: var(--rsv-green); }

/* step 1: the guest */
.rsv-picks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.rsv-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--rsv-line);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.rsv-pick:hover { border-color: var(--rsv-cyan); background: #f4fbff; }
.rsv-pick.is-on { border-color: var(--rsv-cyan); background: #eaf7ff; }
.rsv-pick__av {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--rsv-cyan);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}
.rsv-pick__body { display: flex; flex-direction: column; min-width: 0; }
.rsv-pick__body b { font-size: 10.5px; font-weight: 700; color: var(--rsv-ink); }
.rsv-pick__body i {
  font-style: normal;
  font-size: 9px;
  color: var(--rsv-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* steps 2 and 3: party size and sitting */
.rsv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rsv-chip {
  padding: 5px 12px;
  border: 1px solid var(--rsv-line);
  border-radius: 99px;
  background: #fff;
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  color: var(--rsv-body);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.rsv-chip:hover { border-color: var(--rsv-cyan); color: var(--rsv-ink); }
.rsv-chip.is-on {
  border-color: var(--rsv-cyan);
  background: var(--rsv-cyan);
  color: #fff;
}

/* step 4: the floor */
.rsv-tables {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}
.rsv-table {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 9px 4px;
  border: 1px solid var(--rsv-line);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.rsv-table:hover:not(.is-off) { border-color: var(--rsv-cyan); background: #f4fbff; }
.rsv-table b { font-size: 11px; font-weight: 800; color: var(--rsv-ink); }
.rsv-table i { font-style: normal; font-size: 8.5px; color: var(--rsv-muted); }
.rsv-table em {
  font-style: normal;
  margin-top: 2px;
  padding: 0 5px;
  border-radius: 3px;
  background: #fdecec;
  color: var(--rsv-red);
  font-size: 8px;
  font-weight: 700;
}
.rsv-table.is-on { border-color: var(--rsv-cyan); background: #eaf7ff; }
.rsv-table.is-off { opacity: 0.45; cursor: not-allowed; }

/* the summary, and the button that is only live once the booking is whole */
.rsv-sum,
.rsv-done {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 14px 0;
  padding: 11px 14px;
  border-top: 1px solid var(--rsv-line);
}
.rsv-sum__line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; flex: 1; }
.rsv-sum__line b { font-size: 11.5px; font-weight: 700; color: var(--rsv-ink); }
.rsv-sum__line i { font-style: normal; font-size: 10px; color: var(--rsv-muted); }
.rsv-go {
  padding: 8px 16px;
  border: 0;
  border-radius: 7px;
  background: var(--rsv-cyan);
  color: #fff;
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}
.rsv-go.is-off { background: #cdd6de; cursor: not-allowed; }

.rsv-done {
  border-top-color: #bfe6cf;
  background: #f1fbf5;
  border-radius: 0 0 8px 8px;
  font-size: 11px;
  color: #17663c;
}
.rsv-done b { font-weight: 800; }
.rsv-done svg { width: 15px; height: 15px; flex: none; color: var(--rsv-green); }

.kore-demo__pane[data-demo-pane="reservations"] { min-height: 780px; }
@media (max-width: 900px) {
  .kore-demo__pane[data-demo-pane="reservations"] { min-height: 620px; }
}

/* ==========================================================================
   THE ROOM

   The app's own front screen: the day's book down the left, the floor plan
   on the right, and the two tied together. Tap a table and its booking
   lights up; tap a booking and the plan jumps to the room it is in.

   The table shapes are the app's own SVGs, from its assets/tables folder,
   named by shape and seat count. The fixture kinds, their footprints and
   their colours come from the app's room palette.
   ========================================================================== */

.rsv-demo [data-rsv-table],
.rsv-demo [data-rsv-book],
.rsv-demo [data-rsv-floor],
.rsv-demo [data-rsv-filter] { cursor: pointer; }

.rsv-tl {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  gap: 12px;
}

/* ---------------- the admin shell ---------------- */

/* The product is a module inside the Kore Site admin, so the demo is that
   admin: its nav down the left, its meta strip across the top, and the
   platform rail on the right. Reservation System is one row of the nav, and
   its List row is the table layout. */
.rsv-nav {
  grid-column: 1;
  grid-row: 1 / -1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--rsv-line);
  background: #fff;
}

.rsv-nav__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rsv-line);
}
.rsv-nav__mark {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: conic-gradient(from 210deg, #00b4e5, #1f7ae0, #7c3aed, #00b4e5);
  -webkit-mask: radial-gradient(circle, transparent 34%, #000 36%);
  mask: radial-gradient(circle, transparent 34%, #000 36%);
}
.rsv-nav__bt {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.rsv-nav__bt i {
  display: block;
  font-style: normal;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--rsv-muted);
}
.rsv-nav__fold {
  flex: none;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--rsv-line);
  color: var(--rsv-muted);
}
.rsv-nav__fold svg { width: 10px; height: 10px; }

.rsv-nav__site {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 9px 10px 0;
  padding: 7px 9px;
  border: 1px solid var(--rsv-line);
  border-radius: 8px;
  background: var(--rsv-line-2);
}
.rsv-nav__dots { display: grid; place-items: center; color: var(--rsv-cyan); }
.rsv-nav__dots svg { width: 13px; height: 13px; }
.rsv-nav__dom {
  min-width: 0;
  font-size: 10px;
  color: var(--rsv-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rsv-nav__label {
  margin: 10px 0 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: #0047ab;
}

/* The nav is the tall part, so it takes the leftover height and scrolls.
   The brand above it and the account below it stay put. */
.rsv-nav__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: #d7dfe8 transparent;
}
.rsv-nav__list::-webkit-scrollbar { width: 5px; }
.rsv-nav__list::-webkit-scrollbar-thumb { background: #d7dfe8; border-radius: 99px; }

.rsv-nav__i {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 12px;
  font-size: 11.5px;
  font-weight: 500;
  color: #24384f;
  transition: background 0.15s ease, color 0.15s ease;
}
.rsv-nav__ic { flex: none; display: grid; place-items: center; color: var(--rsv-body); }
.rsv-nav__ic svg { width: 15px; height: 15px; }
.rsv-nav__car {
  margin-left: auto;
  display: grid;
  place-items: center;
  color: var(--rsv-muted);
  transition: transform 0.18s ease;
}
.rsv-nav__car svg { width: 9px; height: 9px; }
.rsv-nav__i.is-open .rsv-nav__car { transform: rotate(180deg); }

button.rsv-nav__i:hover { background: var(--rsv-line-2); }
button.rsv-nav__i.is-on,
.rsv-nav__i.is-on { color: #0047ab; font-weight: 700; }
.rsv-nav__i.is-on .rsv-nav__ic { color: #0047ab; }

/* The open group sits on a tint, as it does in the admin. */
.rsv-nav__kids {
  margin: 0;
  padding: 2px 0;
  list-style: none;
  background: rgba(230, 238, 255, 0.5);
}
.rsv-nav__k {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 12px 6px 34px;
  font-size: 11px;
  color: #33475f;
  transition: background 0.15s ease, color 0.15s ease;
}
.rsv-nav__k::before {
  content: "";
  position: absolute;
  left: 21px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
}
button.rsv-nav__k:hover { background: rgba(255, 255, 255, 0.75); }
button.rsv-nav__k:hover::before { opacity: 1; }
button.rsv-nav__k.is-on,
button.rsv-nav__k.is-on:hover,
.rsv-nav__k.is-on {
  background: #0047ab;
  color: #fff;
  font-weight: 700;
}
.rsv-nav__k.is-on::before { opacity: 1; }

.rsv-nav__foot { border-top: 1px solid var(--rsv-line); padding: 8px 10px; }
.rsv-nav__apps {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  background: var(--rsv-line-2);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--rsv-body);
}
.rsv-nav__apps svg { width: 13px; height: 13px; }
.rsv-nav__user { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.rsv-nav__av {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #10365c;
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
}
.rsv-nav__ub { flex: 1; min-width: 0; }
.rsv-nav__ub b { display: block; font-size: 10.5px; font-weight: 700; }
.rsv-nav__ub i {
  display: block;
  font-style: normal;
  font-size: 9px;
  color: var(--rsv-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rsv-nav__ud { flex: none; display: grid; place-items: center; color: var(--rsv-muted); }
.rsv-nav__ud svg { width: 13px; height: 13px; }

/* ---------------- the meta strip ---------------- */
.rsv-top {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 0 16px;
  border-bottom: 1px solid var(--rsv-line);
  font-size: 10px;
  color: var(--rsv-muted);
}
.rsv-top__meta b { color: var(--rsv-ink); font-weight: 700; }
.rsv-top__link { color: var(--rsv-body); font-weight: 600; }
.rsv-top__icons { display: flex; align-items: center; gap: 10px; margin-left: 4px; }
.rsv-top__icons i { position: relative; display: grid; place-items: center; color: var(--rsv-body); }
.rsv-top__icons svg { width: 14px; height: 14px; }
.rsv-top__bell b {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  background: var(--rsv-red);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
}

/* ---------------- the page head, shared ---------------- */
.rsv-page__act { display: flex; gap: 7px; flex: none; }
.rsv-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border: 1px solid var(--rsv-line);
  border-radius: 6px;
  background: var(--rsv-line-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--rsv-body);
  white-space: nowrap;
}
.rsv-btn svg { width: 12px; height: 12px; }
.rsv-btn--go {
  border-color: #1a73e8;
  background: #1a73e8;
  color: #fff;
}
.rsv-bar .rsv-btn--go { cursor: pointer; }
.rsv-bar .rsv-btn--go:hover { background: #1765cc; }

.rsv-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 5px 11px 5px 8px;
  border: 1px solid var(--rsv-line);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--rsv-body);
  cursor: pointer;
}
.rsv-back:hover { border-color: #bcd7ea; background: #f6fbfe; }
.rsv-back svg { width: 11px; height: 11px; }

/* ---------------- the Kore Site dashboard ---------------- */
.rsv-page--dash { margin-bottom: 12px; }

.rsv-setup {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 16px;
  margin-bottom: 12px;
  border: 1px solid var(--rsv-line);
  border-radius: 11px;
}
.rsv-ring { position: relative; flex: none; width: 96px; height: 96px; }
.rsv-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rsv-ring__t { fill: none; stroke: var(--rsv-line-2); stroke-width: 9; }
.rsv-ring__v {
  fill: none;
  stroke: #12b981;
  stroke-width: 9;
  stroke-linecap: round;
}
.rsv-ring__c {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1.1;
}
.rsv-ring__c i { font-style: normal; font-size: 10px; color: var(--rsv-muted); }
.rsv-ring__c b { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }

.rsv-setup__b { flex: 1; min-width: 0; }
.rsv-setup__b h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; }
.rsv-setup__g {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 22px;
}
.rsv-setup__i {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rsv-line-2);
  font-size: 11.5px;
  color: var(--rsv-body);
}
.rsv-setup__i:nth-last-child(-n + 2) { border-bottom: 0; }
.rsv-setup__i span { flex: 1; min-width: 0; }
.rsv-setup__ok {
  flex: none;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #12b981;
  color: #fff;
}
.rsv-setup__ok svg { width: 9px; height: 9px; }

.rsv-sug {
  padding: 11px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--rsv-line);
  border-radius: 11px;
}
.rsv-sug h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; }
.rsv-sug__b {
  display: flex;
  gap: 11px;
  padding: 11px 13px;
  border-radius: 9px;
  background: linear-gradient(90deg, #eaf6fe, #f7fbff 60%, #fff);
}
.rsv-sug__ic {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #fff;
  color: var(--rsv-cyan);
  box-shadow: 0 1px 3px rgba(14, 42, 71, 0.12);
}
.rsv-sug__ic svg { width: 16px; height: 16px; }
.rsv-sug__b b { display: block; font-size: 11.5px; font-weight: 700; }
.rsv-sug__b i {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--rsv-body);
}

.rsv-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.rsv-kpi {
  padding: 11px 13px;
  border: 1px solid var(--rsv-line);
  border-radius: 10px;
}
.rsv-kpi__l { margin: 0 0 7px; font-size: 10.5px; color: var(--rsv-body); }
.rsv-kpi__v {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.rsv-kpi__v.is-wide { font-size: 17px; }
.rsv-kpi__f {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 7px 0 0;
  font-size: 9.5px;
  color: var(--rsv-muted);
}
.rsv-kpi__f b {
  padding: 1px 5px;
  border-radius: 4px;
  background: #dcfce7;
  color: #15803d;
  font-size: 9px;
  font-weight: 700;
}
.rsv-kpi__f a { color: var(--rsv-blue); font-weight: 600; }

.rsv-minis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.rsv-mini { border: 1px solid var(--rsv-line); border-radius: 10px; overflow: hidden; }
.rsv-mini__h {
  margin: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rsv-line);
  font-size: 11px;
  font-weight: 700;
}
.rsv-mini__v {
  margin: 0;
  padding: 10px 12px 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.rsv-mini__s { margin: 4px 0 0; padding: 0 12px; font-size: 9.5px; color: var(--rsv-muted); }
.rsv-mini__a {
  display: block;
  padding: 3px 12px 10px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--rsv-blue);
}

.rsv-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.rsv-panel {
  padding: 11px 13px;
  border: 1px solid var(--rsv-line);
  border-radius: 10px;
}
.rsv-panel__h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rsv-panel__h h3 { margin: 0; flex: 1; font-size: 12.5px; font-weight: 700; }
.rsv-seg2 {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 6px;
  background: var(--rsv-line-2);
}
.rsv-seg2__i {
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--rsv-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.rsv-seg2__i:hover { background: #fff; color: var(--rsv-ink); }
.rsv-seg2__i.is-on,
.rsv-seg2__i.is-on:hover { background: #1a73e8; color: #fff; }

/* The plot: the scale down the left, the drawing beside it, and the dates
   underneath. The drawing is the only part that stretches, so the numbers
   and the dates stay the size they were set at. */
.rsv-plot { display: flex; gap: 8px; }
.rsv-plot__y {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 88px;
  font-size: 9px;
  line-height: 1;
  color: var(--rsv-muted);
  text-align: right;
}
.rsv-plot__a {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 88px;
  /* Three rules, at the three numbers beside them. */
  background:
    linear-gradient(var(--rsv-line-2), var(--rsv-line-2)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--rsv-line-2), var(--rsv-line-2)) 0 50% / 100% 1px no-repeat,
    linear-gradient(var(--rsv-line), var(--rsv-line)) 0 100% / 100% 1px no-repeat;
}
.rsv-plot__x {
  display: flex;
  justify-content: space-between;
  margin: 5px 0 0 34px;
  font-size: 9px;
  color: var(--rsv-muted);
}
.rsv-plot__x[data-spread="even"] > span { flex: 1; text-align: center; }

.rsv-spark { display: block; width: 100%; height: 100%; }
.rsv-spark polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.rsv-spark.is-blue  polygon  { fill: rgba(26, 115, 232, 0.13); }
.rsv-spark.is-blue  polyline { stroke: #1a73e8; }
.rsv-spark.is-green polygon  { fill: rgba(18, 185, 129, 0.14); }
.rsv-spark.is-green polyline { stroke: #12b981; }

/* Bars are laid out rather than drawn, so their rounded tops stay round
   however wide the panel gets. */
.rsv-bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 4%;
  padding: 0 3%;
}
/* Named for the chart, not the page: .rsv-bar is already the Table
   Layout heading strip. */
.rsv-cbar {
  flex: 1;
  min-width: 0;
  border-radius: 3px 3px 0 0;
  background: #93bdf5;
  animation: rsvRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes rsvRise { from { transform: scaleY(0); transform-origin: bottom; } }

/* ---------------- page head ---------------- */
.rsv-page {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.rsv-page__t h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.rsv-page__t p {
  margin: 2px 0 0;
  color: var(--rsv-muted);
  font-size: 11.5px;
}
.rsv-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: var(--rsv-line-2);
  border: 1px solid var(--rsv-line);
}
.rsv-tabs__i {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--rsv-muted);
  white-space: nowrap;
}
.rsv-tabs__i.is-on {
  background: #fff;
  color: var(--rsv-ink);
  box-shadow: 0 1px 2px rgba(14, 42, 71, 0.12);
}

/* ---------------- the strip under it ---------------- */
.rsv-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rsv-bar h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}
.rsv-find {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--rsv-line);
  border-radius: 8px;
  font-size: 11px;
  color: var(--rsv-muted);
  background: #fff;
}
.rsv-find svg { width: 12px; height: 12px; }

.rsv-date {
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--rsv-line);
  border-radius: 8px;
  font-size: 11.5px;
  color: var(--rsv-body);
  background: #fff;
}
.rsv-date svg { width: 13px; height: 13px; color: var(--rsv-cyan); }
.rsv-date b { color: var(--rsv-ink); font-weight: 700; }
.rsv-date i { display: grid; place-items: center; color: var(--rsv-muted); }
.rsv-date i svg { width: 10px; height: 10px; }

/* ---------------- the two columns ---------------- */
.rsv-split {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 262px minmax(0, 1fr);
  gap: 14px;
}

.rsv-side {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--rsv-line);
  border-radius: 12px;
  background: #fff;
}

.rsv-seg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border-radius: 9px;
  background: var(--rsv-line-2);
}
.rsv-seg__i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 4px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--rsv-muted);
}
.rsv-seg__i svg { width: 12px; height: 12px; }
.rsv-seg__i.is-on {
  background: #10365c;
  color: #fff;
}

.rsv-filt { display: flex; gap: 5px; }
.rsv-filt__i {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 4px;
  border: 1px solid var(--rsv-line);
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--rsv-body);
  white-space: nowrap;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.rsv-filt__i i {
  font-style: normal;
  min-width: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--rsv-line-2);
  color: var(--rsv-muted);
  font-size: 9.5px;
  text-align: center;
}
.rsv-filt__i:hover { border-color: #bcd7ea; background: #f6fbfe; }
.rsv-filt__i.is-on {
  background: #e8f7fd;
  border-color: var(--rsv-cyan);
  color: #0b4a66;
}
.rsv-filt__i.is-on i { background: var(--rsv-cyan); color: #fff; }

.rsv-search {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--rsv-line);
  border-radius: 8px;
  color: var(--rsv-muted);
  font-size: 11px;
}
.rsv-search svg { width: 12px; height: 12px; }

.rsv-list {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #cfd8e3 transparent;
}
.rsv-list::-webkit-scrollbar { width: 5px; }
.rsv-list::-webkit-scrollbar-thumb { background: #cfd8e3; border-radius: 99px; }
/* Rows keep their height: a long book scrolls rather than squashing. */
.rsv-list > * { flex: 0 0 auto; }
.rsv-when {
  margin: 4px 0 0;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rsv-muted);
}
.rsv-when:first-child { margin-top: 0; }

.rsv-bk {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid var(--rsv-line);
  border-left: 3px solid var(--rsv-line);
  border-radius: 9px;
  background: #fff;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.rsv-bk:hover { border-color: #bcd7ea; background: #f8fcfe; }
.rsv-bk.is-on {
  border-color: var(--rsv-cyan);
  border-left-color: var(--rsv-cyan);
  background: #e8f7fd;
}
.rsv-bk__b { min-width: 0; flex: 1; }
.rsv-bk__n {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--rsv-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rsv-bk__m {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 10px;
  color: var(--rsv-muted);
}
.rsv-bk__m svg { width: 10px; height: 10px; }
.rsv-bk__t {
  font-style: normal;
  margin-left: 3px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--rsv-line-2);
  color: var(--rsv-body);
  font-size: 9.5px;
  font-weight: 700;
}
.rsv-bk.is-on .rsv-bk__t { background: var(--rsv-cyan); color: #fff; }
.rsv-bk__time {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--rsv-body);
  white-space: nowrap;
}
.rsv-empty {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--rsv-muted);
}

/* ---------------- the floor ---------------- */
.rsv-floor {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rsv-rooms {
  display: flex;
  gap: 5px;
}
.rsv-rooms__i {
  padding: 6px 14px;
  border: 1px solid var(--rsv-line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--rsv-body);
  background: #fff;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.rsv-rooms__i:hover { border-color: #bcd7ea; background: #f6fbfe; }
.rsv-rooms__i.is-on {
  background: #10365c;
  border-color: #10365c;
  color: #fff;
}
.rsv-floor__note {
  margin: 0;
  font-size: 10.5px;
  color: var(--rsv-muted);
  min-height: 15px;
}

.rsv-plan {
  position: relative;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--rsv-line);
  border-radius: 12px;
  background:
    linear-gradient(to right, rgba(14, 42, 71, 0.045) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(to bottom, rgba(14, 42, 71, 0.045) 1px, transparent 1px) 0 0 / 34px 34px,
    #fbfcfe;
  overflow: hidden;
}

/* Fixtures sit from their top left corner, the way the app's room palette
   drops them in. Tables are placed by their middle, so the arrangement
   survives the plan changing size. */
.rsv-fx {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  text-align: center;
  overflow: hidden;
  padding: 0 4px;
}
.rsv-fx--door { background: var(--rsv-cyan); }
.rsv-fx--walk { background: #94a3b8; }
.rsv-fx--bar  { background: #8abbec; }
.rsv-fx--loo  { background: #60a5fa; }
.rsv-fx--furn { background: #6b7280; }
.rsv-fx--curt { background: #b08968; }

.rsv-t {
  position: absolute;
  transform: translate(-50%, -50%);
  aspect-ratio: 1;
  display: grid;
  align-content: center;
  place-items: center;
  padding: 0;
  transition: transform 0.16s ease;
}
/* The shape is the app's SVG used as a mask with the fill painted behind it,
   which is how the app itself colours a table by whoever is holding it. The
   file supplies the outline and the chair tabs; --t supplies the colour. */
.rsv-t__sh {
  position: absolute;
  inset: 0;
  background: var(--t, #00b4e5);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  pointer-events: none;
  transition: background 0.18s ease;
}
.rsv-t__n,
.rsv-t__s {
  position: relative;
  z-index: 1;
  pointer-events: none;
  text-align: center;
  line-height: 1.15;
  max-width: 76%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* White on the fill, as the app sets it. Every fill a table can take is
     chosen dark enough to carry it. */
  color: #fff;
}
.rsv-t__n { font-size: 9.5px; font-weight: 800; }
.rsv-t__s { font-size: 7.5px; font-weight: 600; opacity: 0.88; }

/* On the staff screen, the sections nobody is looking at step back rather
   than disappear: the room should still read as a room. */
.rsv-t.is-faded { opacity: 0.3; }
.rsv-t.is-faded:hover { opacity: 0.7; }

.rsv-t:hover { transform: translate(-50%, -50%) scale(1.07); }

/* The chosen one gets a ring, so the highlight does not fight the fill that
   is already carrying the meaning. */
.rsv-t.is-on { transform: translate(-50%, -50%) scale(1.07); opacity: 1; }
.rsv-t.is-on::before {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #0e2a47, 0 0 0 5px rgba(14, 42, 71, 0.14);
}

/* ---------------- who holds which tables ---------------- */

/* The app's Employee Table Assignments panel: a heading that counts the
   whole building, then a card per person carrying their colour, whether
   they are on now, what their section adds up to, and a chip per table. */
.rsv-tle { margin-bottom: 2px; }
.rsv-tle__t {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.rsv-tle__s {
  display: block;
  margin-top: 1px;
  font-size: 9.5px;
  line-height: 1.4;
  color: var(--rsv-muted);
}

.rsv-emp {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid var(--rsv-line);
  border-left: 3px solid var(--emp, var(--rsv-line));
  border-radius: 9px;
  background: #fff;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.rsv-emp:hover { background: #f8fcfe; }
.rsv-emp.is-on { border-color: #10365c; border-left-color: var(--emp); background: #f4f8fb; }

.rsv-emp__top { display: flex; align-items: center; gap: 7px; }
.rsv-emp__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--emp, var(--rsv-muted));
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(14, 42, 71, 0.12);
}
.rsv-emp__n {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rsv-emp__on,
.rsv-emp__off {
  flex: none;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.rsv-emp__on  { background: #dcfce7; color: #15803d; }
.rsv-emp__off { background: var(--rsv-line-2); color: var(--rsv-muted); }

/* Role, tables, seats and the shift, separated by dots rather than rules:
   four short facts on one line want the lightest divider there is. */
.rsv-emp__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 5px;
  font-size: 9.5px;
  color: var(--rsv-muted);
}
/* The dot goes after each fact rather than before the next one: when the
   line wraps, a trailing dot ends the first line instead of a stray one
   opening the second. */
.rsv-emp__meta span:not(:last-child)::after {
  content: "\00b7";
  margin-left: 5px;
}

.rsv-emp__chips { display: flex; flex-wrap: wrap; gap: 3px; }

/* A table chip, not to be confused with .rsv-chip, which is the pill the
   add-reservation screen uses for a party size or a sitting. */
.rsv-tchip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 5px;
  border: 1px solid var(--rsv-line);
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
  color: var(--rsv-body);
  background: #fff;
}
.rsv-tchip i {
  font-style: normal;
  font-weight: 600;
  font-size: 8px;
  color: var(--rsv-muted);
}
.rsv-tchip--more { border-style: dashed; color: var(--rsv-muted); }

/* ---------------- narrow ---------------- */
@media (max-width: 1100px) {
  .rsv-split { grid-template-columns: 232px minmax(0, 1fr); }
}

/* Below a laptop the demo is a phone-shaped box about 330 by 440, and the
   book and the plan cannot both live in it and stay legible. The plan is the
   screen, so the plan is what stays: tapping a table still names the party on
   it in the line above, which is the whole exchange the book was there for.
   A squeezed two-line list beside a postage-stamp room would show both and
   say nothing. */
@media (max-width: 900px) {
  .rsv-tl { gap: 8px; }
  .rsv-page { align-items: flex-start; flex-direction: column; gap: 6px; }
  .rsv-page__t h2 { font-size: 15px; }
  .rsv-page__t p { display: none; }

  /* The strip runs past the edge at this width, so it swipes instead of
     losing its last tab to a clip. */
  .rsv-tabs {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .rsv-tabs::-webkit-scrollbar { display: none; }
  .rsv-tabs__i { padding: 4px 9px; font-size: 10px; }

  .rsv-bar h3 { font-size: 12.5px; }
  .rsv-date { padding: 5px 8px; font-size: 10.5px; gap: 5px; }

  .rsv-split { grid-template-columns: minmax(0, 1fr); }
  .rsv-side { display: none; }

  .rsv-rooms__i { padding: 5px 11px; font-size: 10px; }
  .rsv-floor__note { font-size: 10px; }
  .rsv-plan { background-size: 22px 22px, 22px 22px; }
  .rsv-t__n { font-size: 7px; }
  .rsv-t__s { display: none; }
  .rsv-fx { font-size: 7px; border-radius: 3px; }
}

/* ---------------- the shell, narrow ---------------- */

/* Below a laptop the demo is a phone-shaped box about 330 by 440. A 208px
   nav column would be most of it, so the nav and the meta strip go and the
   page takes the whole window: on a phone this admin is one screen at a
   time anyway. These sit at the end of the file because the shell they
   override is declared above them. */
@media (max-width: 900px) {
  .rsv-demo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .rsv-nav,
  .rsv-top { display: none; }
  .rsv-main { grid-column: 1; grid-row: 1; padding: 12px; }

  .rsv-page--dash { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rsv-page__act { flex-wrap: wrap; }
  .rsv-setup { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px; }
  .rsv-ring { align-self: center; }
  .rsv-setup__g { grid-template-columns: minmax(0, 1fr); }
  .rsv-setup__i:nth-last-child(-n + 2) { border-bottom: 1px solid var(--rsv-line-2); }
  .rsv-setup__i:last-child { border-bottom: 0; }
  .rsv-kpis  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rsv-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rsv-panels { grid-template-columns: minmax(0, 1fr); }
  .rsv-sug__b { flex-direction: column; gap: 8px; }
}
/* The bar has a heading, a search, a date and a button, and at this width
   only two of those earn their place. */
@media (max-width: 900px) {
  .rsv-bar h3 { flex: none; white-space: nowrap; }
  .rsv-find { display: none; }
  .rsv-bar .rsv-btn--go { padding: 5px 9px; font-size: 10px; }
}

/* The page head only gets its spacing from a flex gap inside the table
   layout. Standing on its own it needs its own. */
.rsv-page { margin-bottom: 12px; }
.rsv-tl > .rsv-page { margin-bottom: 0; }

/* ---------------- the hover card on a table ---------------- */

/* The app puts the table's number, name and covers under the pointer. The
   room clips at its own edge, so a table near one flips the card to the side
   that has room, and the hovered table lifts above its neighbours. */
.rsv-t:hover { z-index: 5; }
.rsv-t__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translate(-50%, 4px);
  z-index: 6;
  min-width: 104px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #374151;
  color: #fff;
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.65;
  text-align: left;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(14, 42, 71, 0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}
.rsv-t__tip b { font-weight: 700; }
.rsv-t__tipw {
  display: block;
  margin-top: 3px;
  padding-top: 3px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-style: normal;
  font-size: 9px;
  color: #cbd5e1;
}
.rsv-t:hover .rsv-t__tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* Near the top of the room the card hangs below instead. */
.rsv-t.tip-below .rsv-t__tip {
  bottom: auto;
  top: calc(100% + 6px);
  transform: translate(-50%, -4px);
}
.rsv-t.tip-below:hover .rsv-t__tip { transform: translate(-50%, 0); }

/* And near a side it lines up with that side rather than the middle. */
.rsv-t.tip-left  .rsv-t__tip { left: 0; transform: translate(0, 4px); }
.rsv-t.tip-left:hover  .rsv-t__tip { transform: translate(0, 0); }
.rsv-t.tip-right .rsv-t__tip { left: auto; right: 0; transform: translate(0, 4px); }
.rsv-t.tip-right:hover .rsv-t__tip { transform: translate(0, 0); }

.rsv-t.tip-left.tip-below  .rsv-t__tip { transform: translate(0, -4px); }
.rsv-t.tip-right.tip-below .rsv-t__tip { transform: translate(0, -4px); }
.rsv-t.tip-left.tip-below:hover  .rsv-t__tip,
.rsv-t.tip-right.tip-below:hover .rsv-t__tip { transform: translate(0, 0); }

/* A finger cannot hover, so the card only gets in the way there. */
@media (hover: none) {
  .rsv-t__tip { display: none; }
}

/* ==========================================================================
   RESERVATIONS ONLY

   The app's booking table. Sixteen columns is more than any window holds, so
   it scrolls sideways with the tick box and the name pinned to the left and
   the row actions pinned to the right, which is what the app does with it.
   The chips above filter, the boxes tick, and the Auto Waitlist switch flips.
   ========================================================================== */

.rsv-demo [data-rsv-tab],
.rsv-demo [data-rsv-chip],
.rsv-demo [data-rsv-sel],
.rsv-demo [data-rsv-autowait] { cursor: pointer; }

/* ---------------- the toolbar ---------------- */
.rsv-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
}
.rsv-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--rsv-line);
  border-radius: 8px;
  background: #fff;
  font-size: 11px;
  font-weight: 500;
  color: var(--rsv-body);
  white-space: nowrap;
}
.rsv-tool svg { width: 12px; height: 12px; color: var(--rsv-muted); }
.rsv-tool--sw { gap: 8px; }
.rsv-tool--sw b { font-size: 10px; font-weight: 700; color: var(--rsv-muted); }
.rsv-tool--sw.is-on b { color: #15803d; }

/* The switch beside Auto Waitlist, which really does flip. */
.rsv-mini-sw {
  position: relative;
  width: 26px;
  height: 14px;
  flex: none;
  border-radius: 99px;
  background: #dfe4ea;
  transition: background 0.18s ease;
}
.rsv-mini-sw::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.rsv-mini-sw.is-on { background: #22c55e; }
.rsv-mini-sw.is-on::after { transform: translateX(12px); }

/* ---------------- the card ---------------- */
.rsv-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rsv-line);
  border-radius: 11px;
  background: #fff;
  overflow: hidden;
}

.rsv-chips2 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 11px 12px;
}
.rsv-chip2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border: 1px solid var(--rsv-line);
  border-radius: 7px;
  background: #fff;
  font-size: 11px;
  font-weight: 600;
  color: var(--rsv-body);
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.rsv-chip2 i {
  font-style: normal;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--rsv-line-2);
  color: var(--rsv-muted);
  font-size: 9.5px;
  text-align: center;
}
.rsv-chip2:hover { border-color: #bcd7ea; background: #f6fbfe; }
.rsv-chip2.is-on {
  background: #1a73e8;
  border-color: #1a73e8;
  color: #fff;
}
.rsv-chip2.is-on i { background: rgba(255, 255, 255, 0.24); color: #fff; }

/* ---------------- the table ---------------- */
.rsv-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #7cc4ea transparent;
}
.rsv-scroll::-webkit-scrollbar { width: 8px; height: 9px; }
.rsv-scroll::-webkit-scrollbar-thumb { background: #7cc4ea; border-radius: 99px; }
.rsv-scroll::-webkit-scrollbar-track { background: #eef4f9; }

.rsv-dt {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
}
.rsv-dt th,
.rsv-dt td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--rsv-line);
  text-align: left;
  vertical-align: middle;
  background: #fff;
}
.rsv-dt th {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--rsv-line);
  background: #fbfcfd;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--rsv-ink);
  white-space: nowrap;
}
.rsv-dt .is-mid { text-align: center; }
.rsv-dt .rsv-nowrap { white-space: nowrap; color: var(--rsv-body); }
.rsv-dt tbody tr:last-child td { border-bottom: 0; }
.rsv-dt tbody tr:hover td { background: #f8fbfe; }
.rsv-dt tbody tr.is-sel td { background: #eff6ff; }

/* Pinned either side, so the name and the row actions stay put while the
   other fourteen columns slide under them. */
.rsv-td-cb { width: 40px; padding-left: 12px; padding-right: 6px; }
.rsv-stick-l { position: sticky; left: 0; z-index: 1; }
.rsv-stick-n { position: sticky; left: 40px; z-index: 1; }
.rsv-stick-r {
  position: sticky;
  right: 0;
  z-index: 1;
  width: 84px;
  white-space: nowrap;
  box-shadow: -6px 0 8px -6px rgba(14, 42, 71, 0.16);
}
.rsv-stick-n { box-shadow: 6px 0 8px -6px rgba(14, 42, 71, 0.16); }
.rsv-dt th.rsv-stick-l,
.rsv-dt th.rsv-stick-n,
.rsv-dt th.rsv-stick-r { z-index: 3; }
.rsv-dt tbody tr:hover .rsv-stick-l,
.rsv-dt tbody tr:hover .rsv-stick-n,
.rsv-dt tbody tr:hover .rsv-stick-r { background: #f8fbfe; }
.rsv-dt tbody tr.is-sel .rsv-stick-l,
.rsv-dt tbody tr.is-sel .rsv-stick-n,
.rsv-dt tbody tr.is-sel .rsv-stick-r { background: #eff6ff; }

/* ---------------- what sits in the cells ---------------- */
.rsv-cb {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
  color: transparent;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.rsv-cb svg { width: 10px; height: 10px; }
.rsv-cb:hover { border-color: #1a73e8; }
.rsv-cb.is-on { background: #1a73e8; border-color: #1a73e8; color: #fff; }

/* The app edits these in place, so they read as fields rather than text. */
.rsv-inline {
  display: block;
  padding: 5px 9px;
  border: 1px solid var(--rsv-line);
  border-radius: 6px;
  background: #fff;
  color: var(--rsv-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rsv-add-t {
  display: inline-block;
  padding: 4px 10px;
  border: 1px dashed #bfd4e8;
  border-radius: 6px;
  color: #4b83c4;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}

.rsv-cell-t { display: inline-flex; align-items: center; gap: 5px; }
.rsv-thumb {
  width: 22px;
  height: 22px;
  flex: none;
  background: var(--rsv-cyan);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.rsv-thumb__l { font-size: 10px; font-weight: 700; color: var(--rsv-ink); }
.rsv-more {
  display: inline-block;
  margin-left: 5px;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--rsv-line-2);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--rsv-body);
  white-space: nowrap;
}

.rsv-party {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 48px;
  padding: 3px 9px;
  border: 1px solid #bfdbfe;
  border-radius: 5px;
  background: #f0f7ff;
  color: #1d4ed8;
  font-size: 10.5px;
  font-weight: 700;
}
.rsv-party svg { width: 11px; height: 11px; }

.rsv-cat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--rsv-line);
  border-radius: 5px;
  background: #f8fafc;
  color: var(--rsv-muted);
  font-size: 10.5px;
  white-space: nowrap;
}
.rsv-cat svg { width: 11px; height: 11px; }

/* Where the booking came from. The app shows the Kore mark. */
.rsv-src {
  display: inline-block;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, #00b4e5, #1f7ae0, #7c3aed, #00b4e5);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%);
  mask: radial-gradient(circle, transparent 38%, #000 40%);
}

.rsv-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.rsv-status i { display: grid; place-items: center; opacity: 0.7; }
.rsv-status svg { width: 9px; height: 9px; }

.rsv-yn {
  display: inline-block;
  min-width: 40px;
  padding: 4px 9px;
  border: 1px solid #fecaca;
  border-radius: 5px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
}
.rsv-yn.is-yes { border-color: #bbf7d0; background: #f0fdf4; color: #15803d; }

.rsv-act {
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 25px;
  margin-right: 4px;
  border: 1px solid var(--rsv-line);
  border-radius: 6px;
  color: var(--rsv-body);
  background: #fff;
}
.rsv-act:last-child { margin-right: 0; }
.rsv-act svg { width: 12px; height: 12px; }

.rsv-none {
  padding: 26px 12px;
  text-align: center;
  color: var(--rsv-muted);
}

/* ---------------- the count and the pager ---------------- */
.rsv-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 13px;
  border-top: 1px solid var(--rsv-line);
  font-size: 10.5px;
  color: var(--rsv-body);
}
.rsv-pager { display: inline-flex; align-items: center; gap: 5px; }
.rsv-pager i,
.rsv-pager b {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border: 1px solid var(--rsv-line);
  border-radius: 5px;
  font-style: normal;
  font-size: 10.5px;
  color: var(--rsv-muted);
}
.rsv-pager svg { width: 10px; height: 10px; }
.rsv-pager b { background: #1a73e8; border-color: #1a73e8; color: #fff; font-weight: 700; }

/* ---------------- narrow ---------------- */
@media (max-width: 900px) {
  /* The toolbar is six controls wide and none of them fit. The chips and the
     table are the screen, so they are what stays. */
  .rsv-tools { display: none; }
  .rsv-chips2 { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 9px 10px; }
  .rsv-chips2::-webkit-scrollbar { display: none; }
  .rsv-chip2 { padding: 5px 10px; font-size: 10px; }
  .rsv-foot { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 9.5px; }
}

/* A booking with no table yet: nothing on the plan to point at, so the row
   does not offer a click and its chip says so. */
.rsv-bk.is-flat { cursor: default; }
.rsv-bk.is-flat:hover { border-color: var(--rsv-line); background: #fff; }
.rsv-bk__t.is-none {
  background: transparent;
  border: 1px dashed #cbd5e1;
  color: var(--rsv-muted);
  font-weight: 600;
}