/* =====================================================================
   Portal shell (Vendor Portal + Platform Admin Portal)
   Sidebar uses Bootstrap's responsive offcanvas (.offcanvas-lg):
   static navigation ≥992px, accessible off-canvas menu below.
   ===================================================================== */

/* ---------- Page canvas (P7 design) ----------
   A cool off-white page with a soft blue wash in the top-right corner — the same light as the
   sign-in screens. `--rp-shell-side` is the sidebar colour; ≥992px it is also painted down the left
   edge of the shell, so the sidebar column reaches the foot of a long page, not just one viewport. */
.rp-portal {
  --rp-shell-side: var(--rp-surface);
  --rp-shell-side-line: var(--rp-border);
  background: var(--rp-portal-bg);
}
.rp-app-admin.rp-portal { --rp-shell-side: var(--rp-ink); --rp-shell-side-line: var(--rp-ink-raised); }

.rp-shell { display: flex; min-height: 100vh; min-height: 100dvh; }

/* ---------- Sidebar ---------- */
.rp-sidebar {
  --rp-sidebar-bg: var(--rp-surface);
  --bs-offcanvas-bg: var(--rp-sidebar-bg);
  --bs-offcanvas-width: min(20rem, 86vw);
  --bs-offcanvas-box-shadow: var(--rp-shadow-lg);
  --rp-nav-color: var(--rp-slate-700);
  --rp-nav-icon: var(--rp-slate-500);
  --rp-nav-hover-bg: var(--rp-slate-100);
  --rp-nav-hover-color: var(--rp-slate-900);
  --rp-nav-active-bg: var(--rp-tile-blue);
  --rp-nav-active-color: var(--rp-brand-900);
  --rp-nav-active-icon: var(--rp-action);
  --rp-nav-accent: var(--rp-action);
  --rp-nav-heading: var(--rp-text-subtle); /* 4.8:1 on white */
  background: var(--rp-sidebar-bg);
  border-right: 1px solid var(--rp-border);
}

@media (min-width: 992px) {
  /* Bootstrap's .offcanvas-lg forces a transparent background ≥992px; restore the skin's surface. */
  .rp-sidebar.offcanvas-lg { background-color: var(--rp-sidebar-bg) !important; }
  .rp-shell {
    background: linear-gradient(90deg,
      var(--rp-shell-side) calc(var(--rp-sidebar-w-lg) - 1px),
      var(--rp-shell-side-line) calc(var(--rp-sidebar-w-lg) - 1px),
      var(--rp-shell-side-line) var(--rp-sidebar-w-lg),
      transparent var(--rp-sidebar-w-lg));
  }
  .rp-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    width: var(--rp-sidebar-w-lg);
    flex: 0 0 var(--rp-sidebar-w-lg);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--rp-slate-300) transparent;
  }
}
/* Phones and tablets: the same navigation as an accessible off-canvas panel (Bootstrap traps focus,
   closes on Esc and returns focus to the menu button). It scrolls on its own when it is taller than
   the screen — the admin list is, in landscape. */
@media (max-width: 991.98px) {
  .rp-sidebar.offcanvas-lg { display: flex; flex-direction: column; overflow-y: auto; }
}

/* Top row: the platform lockup (vendor) or the admin brand link, and the close button on phones. */
.rp-sidebar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rp-space-3);
  min-height: var(--rp-header-h);
  padding: var(--rp-space-4) var(--rp-space-5) var(--rp-space-3);
}
.rp-sidebar__logo { display: block; height: 2.125rem; width: auto; max-width: min(11.5rem, 100%); }
.rp-sidebar__close {
  flex: none;
  width: var(--rp-target-touch);
  height: var(--rp-target-touch);
  padding: 0;
  border-radius: var(--rp-radius-control);
  background-size: 0.875rem;
}
.rp-sidebar__close:hover { background-color: var(--rp-nav-hover-bg); }

.rp-brand {
  display: flex;
  align-items: center;
  gap: var(--rp-space-3);
  padding: var(--rp-space-5) var(--rp-space-5) var(--rp-space-4);
  text-decoration: none;
  color: var(--rp-text);
}
.rp-brand__mark {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--rp-radius);
  background: var(--rp-primary);
  color: #fff;
  font-weight: var(--rp-fw-bold);
  font-size: var(--rp-fs-md);
}
/* Platform lockup. The logo image already carries the symbol, the wordmark and the tagline,
   so the brand tile widens into the whole lockup and stays transparent on both skins. The
   title text beside it would repeat the wordmark, so it is left for assistive technology. */
.rp-brand__mark--venuza {
  background: transparent;
  border-radius: 0;
  width: min(11rem, 40vw);
  height: 2.5rem;
  flex: none;
}
.rp-brand__mark--venuza::before {
  content: "";
  width: 100%;
  height: 100%;
  background: url("/assets/brand/logo.png") left center / contain no-repeat;
  background-image: image-set(url("/assets/brand/logo.webp") type("image/webp"), url("/assets/brand/logo.png") type("image/png"));
}
/* No portal label beside the lockup (the public website): the wordmark needs no gap after it. */
.rp-brand:has(.rp-brand__mark--venuza):not(:has(.rp-brand__sub)) { gap: 0; }
.rp-brand:has(.rp-brand__mark--venuza) .rp-brand__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.rp-brand__name { display: flex; flex-direction: column; line-height: 1.2; }
.rp-brand__title { font-weight: var(--rp-fw-bold); font-size: var(--rp-fs-base); letter-spacing: -0.01em; }
.rp-brand__sub { font-size: var(--rp-fs-sm); color: var(--rp-nav-heading); font-weight: var(--rp-fw-medium); }

/* Vendor workspace card: the venue's initials and name (data, never translated) under the platform
   logo, with the portal label as an eyebrow. It is the sidebar's link back to the dashboard. */
.rp-sidebar .rp-brand {
  margin: 0 var(--rp-space-3) var(--rp-space-3);
  padding: var(--rp-space-3);
  gap: var(--rp-space-3);
  border: 1px solid var(--rp-border);
  border-radius: 0.875rem;
  background: linear-gradient(135deg, var(--rp-brand-50), var(--rp-surface) 72%);
  color: var(--rp-text);
  transition: border-color var(--rp-dur-fast) var(--rp-ease-out), box-shadow var(--rp-dur-fast) var(--rp-ease-out);
}
.rp-sidebar .rp-brand:hover { border-color: var(--rp-primary-subtle-border); box-shadow: var(--rp-shadow-card); }
.rp-sidebar .rp-brand__mark:not(.rp-brand__mark--venuza) {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, var(--rp-brand-600), var(--rp-brand-900));
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  box-shadow: var(--rp-shadow-action);
}
.rp-sidebar .rp-brand__name { min-width: 0; gap: 0.125rem; }
.rp-sidebar .rp-brand__title { font-size: 0.9375rem; overflow-wrap: anywhere; }
.rp-sidebar .rp-brand__sub {
  font-size: 0.6875rem;
  font-weight: var(--rp-fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rp-action);
}

/* ---------- Navigation ---------- */
.rp-nav { list-style: none; margin: 0; padding: var(--rp-space-1) var(--rp-space-3) var(--rp-space-5); display: flex; flex-direction: column; gap: 2px; }
.rp-nav__section {
  font-size: 0.6875rem;
  font-weight: var(--rp-fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rp-nav-heading);
  padding: var(--rp-space-4) 0.875rem 0.375rem;
}
.rp-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--rp-space-3);
  min-height: var(--rp-target-touch);
  padding: 0.5rem 0.875rem;
  border-radius: var(--rp-radius-control);
  color: var(--rp-nav-color);
  font-weight: var(--rp-fw-medium);
  font-size: var(--rp-fs-sm);
  text-decoration: none;
  transition: background-color var(--rp-dur-fast) var(--rp-ease-out), color var(--rp-dur-fast) var(--rp-ease-out);
}
.rp-nav__link .bi { font-size: 1.125rem; color: var(--rp-nav-icon); transition: color var(--rp-dur-fast) var(--rp-ease-out); }
.rp-nav__link:hover { background: var(--rp-nav-hover-bg); color: var(--rp-nav-hover-color); }
.rp-nav__link:hover .bi { color: var(--rp-nav-active-icon); }
.rp-nav__link[aria-current="page"] { background: var(--rp-nav-active-bg); color: var(--rp-nav-active-color); font-weight: var(--rp-fw-semibold); }
.rp-nav__link[aria-current="page"] .bi { color: var(--rp-nav-active-icon); }
/* The current page also carries a bar on the left edge, so it never depends on the tint alone. */
.rp-nav__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--rp-space-3));
  top: 0.625rem;
  bottom: 0.625rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--rp-nav-accent);
}
.rp-nav__badge {
  margin-left: auto;
  min-width: 1.5rem;
  text-align: center;
  font-size: var(--rp-fs-xs);
  font-weight: var(--rp-fw-bold);
  background: var(--rp-warning-subtle);
  color: var(--rp-warning-emphasis);
  border: 1px solid var(--rp-warning-border);
  border-radius: var(--rp-radius-pill);
  padding: 0.0625rem 0.5rem;
}

.rp-sidebar__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--rp-space-2);
  padding: var(--rp-space-4) var(--rp-space-5);
  border-top: 1px solid var(--rp-border);
  font-size: var(--rp-fs-xs);
  font-weight: var(--rp-fw-semibold);
  letter-spacing: 0.04em;
  color: var(--rp-text-muted);
}
.rp-sidebar__footer-mark {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  background: url("/assets/brand/mark.png") center / contain no-repeat;
}

/* Admin skin: the navy of the admin sign-in panel, so admins never confuse the portals (UI spec 7.1). */
.rp-app-admin .rp-sidebar {
  --rp-sidebar-bg: var(--rp-ink);
  --bs-offcanvas-color: var(--rp-on-ink-muted);
  --rp-nav-color: var(--rp-on-ink-muted);
  --rp-nav-icon: var(--rp-on-ink-subtle);
  --rp-nav-hover-bg: rgba(255, 255, 255, 0.06);
  --rp-nav-hover-color: var(--rp-on-ink);
  --rp-nav-active-bg: rgba(169, 193, 255, 0.14);
  --rp-nav-active-color: var(--rp-on-ink);
  --rp-nav-active-icon: var(--rp-on-ink-accent);
  --rp-nav-accent: var(--rp-on-ink-accent);
  --rp-nav-heading: var(--rp-on-ink-subtle);
  background-image: radial-gradient(26rem 18rem at 0% 0%, rgba(35, 82, 224, 0.24), transparent 70%);
  border-right-color: var(--rp-ink-raised);
  color: var(--rp-on-ink-muted);
}
.rp-app-admin .rp-brand { color: #fff; }
.rp-app-admin .rp-brand__mark { background: #fff; color: var(--rp-slate-900); }
.rp-app-admin .rp-brand__mark--venuza { background: transparent; }
/* The admin brand link is the lockup on a white plate (the logo is drawn for a light ground), with
   "Platform Admin" under it as the eyebrow of the admin sign-in panel. */
.rp-app-admin .rp-sidebar .rp-brand {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rp-space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--rp-radius);
  background: none;
}
.rp-app-admin .rp-sidebar .rp-brand:hover { box-shadow: none; }
.rp-app-admin .rp-sidebar .rp-brand__mark--venuza {
  box-sizing: border-box;
  width: 11.5rem;
  max-width: 100%;
  height: 2.75rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}
.rp-app-admin .rp-sidebar .rp-brand__sub {
  font-size: 0.6875rem;
  font-weight: var(--rp-fw-bold);
  letter-spacing: var(--rp-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--rp-on-ink-accent);
  padding-left: 0.125rem;
}
.rp-app-admin .rp-sidebar__top { align-items: flex-start; padding-top: var(--rp-space-5); }
.rp-app-admin .rp-sidebar__footer { border-top-color: var(--rp-ink-raised); color: var(--rp-on-ink-subtle); }
.rp-app-admin .rp-sidebar .offcanvas-header { border-bottom-color: var(--rp-ink-raised); }
.rp-app-admin .rp-sidebar .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.rp-app-admin .rp-sidebar :focus-visible { outline-color: #ffffff; }
.rp-app-admin .rp-nav__badge { background: rgba(253, 232, 164, 0.15); color: #fde8a4; border-color: rgba(253, 232, 164, 0.4); }

/* ---------- Main column ---------- */
.rp-shell__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: radial-gradient(56rem 26rem at 100% -6rem, rgba(35, 82, 224, 0.07), transparent 70%) no-repeat;
}

/* Top bar: a frosted strip over the page, so content slides under it rather than being cut. */
.rp-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  height: var(--rp-header-h);
  display: flex;
  align-items: center;
  gap: var(--rp-space-3);
  padding: 0 var(--rp-space-6);
  background: var(--rp-topbar-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid rgba(207, 214, 224, 0.7);
}
.rp-topbar__logo { flex: none; height: 1.75rem; width: auto; }
/* The logo stands in for the portal label wherever there is room; the label itself stays in the
   markup so assistive technology still announces which portal this is. */
.rp-topbar__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  font-size: var(--rp-fs-sm);
  font-weight: var(--rp-fw-semibold);
  color: var(--rp-text-muted);
  margin: 0;
}
/* ≥992px the sidebar carries the logo, so the top bar shows the portal as an eyebrow instead
   (the admin bar already has its "Admin" tag). */
@media (min-width: 992px) {
  .rp-topbar__logo { display: none; }
  .rp-app-vendor .rp-topbar__title {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    display: inline-flex;
    align-items: center;
    gap: var(--rp-space-2);
    font-size: var(--rp-fs-xs);
    font-weight: var(--rp-fw-bold);
    letter-spacing: var(--rp-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--rp-action);
  }
  .rp-app-vendor .rp-topbar__title::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--rp-success);
    box-shadow: 0 0 0 3px var(--rp-success-subtle);
  }
}
.rp-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--rp-space-2); min-width: 0; }
/* Language switcher and account menu as the floating pills of the sign-in screens. */
.rp-topbar .rp-langswitch__toggle,
.rp-usermenu {
  --bs-btn-bg: var(--rp-surface);
  --bs-btn-hover-bg: var(--rp-surface);
  --bs-btn-active-bg: var(--rp-slate-50);
  --bs-btn-border-color: var(--rp-slate-200);
  --bs-btn-hover-border-color: var(--rp-slate-300);
  --bs-btn-active-border-color: var(--rp-slate-300);
  --bs-btn-color: var(--rp-slate-900);
  --bs-btn-hover-color: var(--rp-slate-900);
  --bs-btn-active-color: var(--rp-slate-900);
  --bs-btn-font-size: var(--rp-fs-sm);
  min-height: 2.5rem;
  border-radius: var(--rp-radius-pill);
  box-shadow: var(--rp-shadow-float);
}
.rp-topbar .rp-langswitch__toggle { --bs-btn-padding-x: 0.875rem; }
.rp-usermenu { --bs-btn-padding-x: 0.25rem; padding-right: 0.75rem; gap: var(--rp-space-2); max-width: 16rem; }
.rp-usermenu__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-usermenu__caret { font-size: 0.75em; opacity: 0.7; }
.rp-avatar {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--rp-radius-pill);
  background: linear-gradient(135deg, var(--rp-brand-600), var(--rp-brand-900));
  color: #fff;
  font-size: 0.75rem;
  font-weight: var(--rp-fw-bold);
  letter-spacing: 0.02em;
}
.rp-avatar--lg { width: 2.5rem; height: 2.5rem; font-size: var(--rp-fs-sm); }
.rp-app-admin .rp-avatar { background: linear-gradient(135deg, var(--rp-ink-raised), var(--rp-ink)); color: #fff; }
.rp-usermenu__menu { min-width: 16rem; }
.rp-usermenu__head { display: flex; align-items: center; gap: var(--rp-space-3); padding: var(--rp-space-2) var(--rp-space-3) var(--rp-space-1); }
.rp-usermenu__who { display: flex; flex-direction: column; min-width: 0; }
.rp-usermenu__who-name { font-weight: var(--rp-fw-semibold); font-size: var(--rp-fs-sm); color: var(--rp-text); overflow-wrap: anywhere; }
.rp-usermenu__who .dropdown-item-text { padding: 0; overflow-wrap: anywhere; }
.rp-portal-tag {
  font-size: var(--rp-fs-xs);
  font-weight: var(--rp-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: var(--rp-radius-pill);
  background: var(--rp-ink);
  color: #fff;
}

.rp-main { flex: 1 1 auto; padding: var(--rp-space-6) var(--rp-space-6) var(--rp-space-8); max-width: 90rem; width: 100%; }
.rp-main:focus { outline: none; }

/* ---------- Page header: eyebrow, title, lead, actions ---------- */
.rp-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--rp-space-4) var(--rp-space-5); margin-bottom: var(--rp-space-6); }
.rp-page-header__text { min-width: 0; max-width: 46rem; }
.rp-page-eyebrow {
  font-size: var(--rp-fs-xs);
  font-weight: var(--rp-fw-bold);
  letter-spacing: var(--rp-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--rp-action);
  margin: 0 0 var(--rp-space-2);
}
.rp-page-header h1 {
  font-size: var(--rp-fs-page-title);
  font-weight: var(--rp-fw-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  overflow-wrap: anywhere;
}
.rp-page-header__text p:not(.rp-page-eyebrow) { margin: var(--rp-space-2) 0 0; color: var(--rp-text-muted); }
.rp-page-header__text p:empty { display: none; }
.rp-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rp-space-2); }

.rp-section + .rp-section { margin-top: var(--rp-space-6); }
.rp-section__title { font-size: var(--rp-fs-lg); margin-bottom: var(--rp-space-4); }

/* Detail layout: main + aside */
.rp-detail { display: grid; grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); gap: var(--rp-space-5); align-items: start; }
.rp-detail__aside { display: flex; flex-direction: column; gap: var(--rp-space-5); min-width: 0; }
/* QA-022: whatever opens a detail page above the two columns (KPI cards, a summary card, a status
   note) keeps the section gap from them. The main column often starts with a small note, which hid
   the missing gap there, but the aside's first card touched the cards above. In a normal flow the
   margin collapses with a margin the element above already has (the larger wins); a stack or grid
   parent spaces its children itself. */
:not(.rp-stack, .rp-grid) > * + .rp-detail { margin-top: var(--rp-space-6); }

/* Status actions of a detail page (reservation: confirm, reject, check in …). */
.rp-action-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rp-space-2); }

/* ---------- Auth screens ---------- */
.rp-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); background: var(--rp-surface); }
.rp-auth__panel { display: flex; flex-direction: column; justify-content: center; padding: var(--rp-space-7) var(--rp-space-6); }
.rp-auth__form { width: 100%; max-width: 26rem; margin: 0 auto; }
.rp-auth__form h1 { font-size: var(--rp-fs-2xl); margin-bottom: var(--rp-space-2); }
.rp-auth__form > p { color: var(--rp-text-muted); margin-bottom: var(--rp-space-6); }
.rp-auth__aside {
  background: var(--rp-slate-50);
  border-left: 1px solid var(--rp-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--rp-space-7);
}
.rp-auth__aside h2 { font-size: var(--rp-fs-xl); max-width: 26rem; }
.rp-auth__aside ul { list-style: none; padding: 0; margin: var(--rp-space-5) 0 0; display: flex; flex-direction: column; gap: var(--rp-space-3); }
.rp-auth__aside li { display: flex; gap: var(--rp-space-3); color: var(--rp-text-muted); }
.rp-auth__aside li .bi { color: var(--rp-primary); font-size: 1.15rem; }
.rp-auth__footer { font-size: var(--rp-fs-sm); color: var(--rp-text-muted); margin-top: var(--rp-space-6); }

.rp-otp-input { font-size: var(--rp-fs-xl); letter-spacing: 0.35em; font-variant-numeric: tabular-nums; text-align: center; font-weight: var(--rp-fw-semibold); }
.rp-qr { width: 11rem; height: 11rem; border: 1px solid var(--rp-border); border-radius: var(--rp-radius-lg); padding: var(--rp-space-2); background: #fff; }
.rp-secret { font-family: var(--rp-font-mono); font-size: var(--rp-fs-md); letter-spacing: 0.08em; word-break: break-all; background: var(--rp-surface-muted); border: 1px dashed var(--rp-border-strong); border-radius: var(--rp-radius); padding: var(--rp-space-3) var(--rp-space-4); }
.rp-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rp-space-2); list-style: none; padding: var(--rp-space-4); margin: 0; background: var(--rp-surface-muted); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-lg); font-family: var(--rp-font-mono); }

.rp-steps-mini { display: flex; gap: var(--rp-space-2); list-style: none; padding: 0; margin: 0 0 var(--rp-space-5); font-size: var(--rp-fs-sm); color: var(--rp-text-muted); }
.rp-steps-mini li { display: flex; align-items: center; gap: var(--rp-space-1); }
.rp-steps-mini li[aria-current="step"] { color: var(--rp-primary); font-weight: var(--rp-fw-semibold); }

/* Wizard stepper (event creation) */
.rp-wizard-steps { list-style: none; display: flex; gap: var(--rp-space-2); padding: 0; margin: 0 0 var(--rp-space-5); counter-reset: step; flex-wrap: wrap; }
.rp-wizard-steps li { display: flex; align-items: center; gap: var(--rp-space-2); font-size: var(--rp-fs-sm); font-weight: var(--rp-fw-medium); color: var(--rp-text-muted); padding-right: var(--rp-space-3); }
.rp-wizard-steps li::before {
  counter-increment: step;
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--rp-radius-pill);
  border: 1.5px solid var(--rp-border-strong);
  font-weight: var(--rp-fw-semibold);
  background: var(--rp-surface);
}
.rp-wizard-steps li[aria-current="step"] { color: var(--rp-text); font-weight: var(--rp-fw-semibold); }
.rp-wizard-steps li[aria-current="step"]::before { background: var(--rp-primary); border-color: var(--rp-primary); color: #fff; }
.rp-wizard-steps li.is-complete::before { content: "\2713"; background: var(--rp-success-subtle); border-color: var(--rp-success); color: var(--rp-success-emphasis); }

/* Schedule rule rows */
.rp-rule { border: 1px solid var(--rp-border); border-radius: var(--rp-radius-lg); padding: var(--rp-space-4); background: var(--rp-surface); }
.rp-weekdays { display: flex; flex-wrap: wrap; gap: var(--rp-space-2); }
.rp-weekdays .btn-check + .btn { min-width: 3.25rem; }
.btn-check:checked + .btn-outline-primary { background: var(--rp-primary); color: #fff; border-color: var(--rp-primary); }
.btn-check:focus-visible + .btn { outline: var(--rp-focus-width) solid var(--rp-focus); outline-offset: var(--rp-focus-offset); }

/* Option cards (radio cards used for pricing type, event type, capacity mode) */
.rp-option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--rp-space-3); }
.rp-option { position: relative; }
.rp-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rp-option label {
  display: flex;
  flex-direction: column;
  gap: var(--rp-space-1);
  height: 100%;
  padding: var(--rp-space-4);
  border: 1.5px solid var(--rp-border-strong);
  border-radius: var(--rp-radius-lg);
  background: var(--rp-surface);
  cursor: pointer;
  transition: border-color var(--rp-dur-fast) var(--rp-ease-out), background-color var(--rp-dur-fast) var(--rp-ease-out), box-shadow var(--rp-dur-fast);
}
.rp-option label strong { display: flex; align-items: center; gap: var(--rp-space-2); }
.rp-option label span { font-size: var(--rp-fs-sm); color: var(--rp-text-muted); }
.rp-option label:hover { border-color: var(--rp-control-border); }
.rp-option input:checked + label { border-color: var(--rp-primary); background: var(--rp-primary-subtle); box-shadow: inset 0 0 0 1px var(--rp-primary); }
.rp-option input:checked + label strong::after { content: "\f26a"; font-family: "bootstrap-icons"; margin-left: auto; color: var(--rp-primary); }
.rp-option input:focus-visible + label { outline: var(--rp-focus-width) solid var(--rp-focus); outline-offset: var(--rp-focus-offset); }

/* Filters: collapsible on phones, always visible ≥768px */
@media (min-width: 768px) {
  .rp-filters.collapse:not(.show) { display: flex; }
}
.rp-filters-toggle { margin: var(--rp-space-4) var(--rp-space-4) 0; }

/* Week calendar (reservations) — each day is a heading + list; agenda-style on phones */
.rp-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--rp-space-2); }
.rp-week__day { background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-lg); min-height: 12rem; display: flex; flex-direction: column; }
.rp-week__day.is-today { border-color: var(--rp-primary); box-shadow: inset 0 3px 0 var(--rp-primary); }
.rp-week__head { padding: var(--rp-space-3); border-bottom: 1px solid var(--rp-border); }
.rp-week__head h3 { font-size: var(--rp-fs-sm); margin: 0; }
.rp-week__head p { font-size: var(--rp-fs-xs); color: var(--rp-text-muted); margin: 0; font-weight: var(--rp-fw-medium); }
.rp-week__list { list-style: none; margin: 0; padding: var(--rp-space-2); display: flex; flex-direction: column; gap: var(--rp-space-2); }
.rp-week__item a { display: block; padding: var(--rp-space-2); border-radius: var(--rp-radius); border: 1px solid var(--rp-border); background: var(--rp-surface-muted); text-decoration: none; color: var(--rp-text); font-size: var(--rp-fs-xs); line-height: 1.35; }
.rp-week__item a:hover { border-color: var(--rp-primary); background: var(--rp-primary-subtle); }
.rp-week__item strong { display: block; font-size: var(--rp-fs-sm); }
/* A day column is ~1/7 of the content width, narrower than a long status such as "Pending confirmation";
   the badge wraps inside its card instead of pushing the page wider than the viewport (WCAG 1.4.10). */
.rp-week__item .rp-status { white-space: normal; max-width: 100%; }
.rp-week__empty { font-size: var(--rp-fs-xs); color: var(--rp-text-subtle); padding: var(--rp-space-3); }
@media (max-width: 1199.98px) { .rp-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
  .rp-week { grid-template-columns: 1fr; }
  .rp-week__day { min-height: 0; }
}

/* Location / event cards */
.rp-entity-card h2 { font-size: var(--rp-fs-md); margin: 0; }
.rp-entity-card h2 a { color: var(--rp-text); text-decoration: none; }
.rp-entity-card h2 a:hover { color: var(--rp-primary); text-decoration: underline; }
.rp-entity-card__facts { display: flex; flex-wrap: wrap; gap: var(--rp-space-2) var(--rp-space-5); list-style: none; padding: 0; margin: var(--rp-space-3) 0; font-size: var(--rp-fs-sm); color: var(--rp-text-muted); }
.rp-entity-card__facts li { display: inline-flex; gap: var(--rp-space-2); align-items: center; }
.rp-link-field { display: flex; gap: var(--rp-space-2); align-items: stretch; flex-wrap: wrap; }
.rp-link-field .form-control { flex: 1 1 16rem; font-family: var(--rp-font-mono); font-size: var(--rp-fs-sm); }

/* ------------------------------------------------------------------ *
 * Onboarding wizard (vendor setup: business -> localization -> currency
 * -> payments -> complete). Two columns >=992px, one column below.
 * ------------------------------------------------------------------ */
.rp-onboard { display: grid; grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr); gap: var(--rp-space-6); align-items: start; }
.rp-onboard__aside { position: sticky; top: var(--rp-space-5); display: flex; flex-direction: column; gap: var(--rp-space-5); }
.rp-onboard__intro h2 { font-size: var(--rp-fs-lg); margin: 0 0 var(--rp-space-2); }
.rp-onboard__intro p { color: var(--rp-text-muted); margin: 0; font-size: var(--rp-fs-sm); }

.rp-progress-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rp-progress-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--rp-space-3); padding-bottom: var(--rp-space-4); position: relative; }
.rp-progress-steps li:last-child { padding-bottom: 0; }
.rp-progress-steps li::after {
  content: "";
  position: absolute;
  left: 0.9375rem;
  top: 2.125rem;
  bottom: 0.375rem;
  width: 2px;
  background: var(--rp-border);
}
.rp-progress-steps li:last-child::after { display: none; }
.rp-progress-steps__marker {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  border: 1px solid var(--rp-border-strong);
  background: var(--rp-surface);
  color: var(--rp-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--rp-fs-sm);
  font-weight: var(--rp-fw-semibold);
  flex: none;
}
.rp-progress-steps__text { min-width: 0; }
.rp-progress-steps__title { display: block; font-weight: var(--rp-fw-medium); color: var(--rp-text-muted); font-size: var(--rp-fs-sm); }
.rp-progress-steps__hint { display: block; font-size: var(--rp-fs-xs); color: var(--rp-text-subtle); }
.rp-progress-steps li[aria-current="step"] .rp-progress-steps__marker { background: var(--rp-primary); border-color: var(--rp-primary); color: var(--rp-on-primary); }
.rp-progress-steps li[aria-current="step"] .rp-progress-steps__title { color: var(--rp-text); font-weight: var(--rp-fw-semibold); }
.rp-progress-steps li.is-complete .rp-progress-steps__marker { background: var(--rp-success-subtle); border-color: var(--rp-success-border); color: var(--rp-success-emphasis); }
.rp-progress-steps li.is-complete::after { background: var(--rp-success-border); }

.rp-onboard__panel h2 { font-size: var(--rp-fs-xl); margin: 0 0 var(--rp-space-2); }
.rp-onboard__lead { color: var(--rp-text-muted); margin: 0 0 var(--rp-space-5); }
.rp-onboard__actions { display: flex; flex-wrap: wrap; gap: var(--rp-space-3); align-items: center; margin-top: var(--rp-space-6); }
.rp-onboard__forward { margin-left: auto; display: flex; gap: var(--rp-space-3); flex-wrap: wrap; }

@media (max-width: 991.98px) {
  .rp-onboard { grid-template-columns: minmax(0, 1fr); }
  .rp-onboard__aside { position: static; }
  /* Wraps rather than scrolling: a scrollable list with no focusable children would be
     unreachable by keyboard (WCAG 2.1.1). */
  .rp-progress-steps { flex-direction: row; flex-wrap: wrap; gap: var(--rp-space-3) var(--rp-space-4); }
  .rp-progress-steps li { grid-template-columns: auto; justify-items: center; text-align: center; padding-bottom: 0; min-width: 4.5rem; }
  .rp-progress-steps li::after { display: none; }
  .rp-progress-steps__hint { display: none; }
}

/* Helper message under an automatically suggested value. It explains a suggestion; it never
   announces a lock, because the user can always choose something else (see locale.js). */
.rp-suggestion {
  display: flex;
  gap: var(--rp-space-2);
  align-items: flex-start;
  font-size: var(--rp-fs-sm);
  color: var(--rp-text-muted);
  background: var(--rp-surface-muted);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius);
  padding: var(--rp-space-3);
  margin-top: var(--rp-space-3);
}
.rp-suggestion .bi { color: var(--rp-info); flex: none; margin-top: 0.15rem; }

/* ------------------------------------------------------------------ *
 * Payment provider cards (provider-agnostic - see payment-providers.js)
 * ------------------------------------------------------------------ */
.rp-provider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--rp-space-4); }
.rp-provider { display: flex; flex-direction: column; gap: var(--rp-space-3); }
.rp-provider.is-selected { border-color: var(--rp-primary); box-shadow: inset 0 0 0 1px var(--rp-primary); }
.rp-provider__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--rp-space-3); align-items: start; }
.rp-provider__heading { min-width: 0; }
.rp-provider__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--rp-radius);
  background: var(--rp-primary-subtle);
  color: var(--rp-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex: none;
}
.rp-provider__title { font-size: var(--rp-fs-md); margin: 0; }
.rp-provider__desc { font-size: var(--rp-fs-sm); color: var(--rp-text-muted); margin: var(--rp-space-1) 0 0; }
.rp-provider__status { grid-column: 1 / -1; justify-self: start; }
.rp-provider__account { font-size: var(--rp-fs-sm); color: var(--rp-text-muted); margin: 0; display: flex; gap: var(--rp-space-2); align-items: center; }
.rp-provider__account span { font-family: var(--rp-font-mono); overflow-wrap: anywhere; }
.rp-provider__note { font-size: var(--rp-fs-sm); color: var(--rp-text-muted); margin: 0; display: flex; gap: var(--rp-space-2); align-items: flex-start; }
.rp-provider__note .bi { flex: none; margin-top: 0.15rem; }
.rp-provider__actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--rp-space-2); }
.rp-provider__actions .btn { width: 100%; }

/* Security note shown with any payout form */
.rp-secure-note {
  display: flex;
  gap: var(--rp-space-3);
  align-items: flex-start;
  font-size: var(--rp-fs-sm);
  color: var(--rp-text-muted);
  border: 1px solid var(--rp-border);
  border-left: 3px solid var(--rp-success);
  border-radius: var(--rp-radius);
  padding: var(--rp-space-3) var(--rp-space-4);
}
.rp-secure-note .bi { color: var(--rp-success); font-size: 1.1rem; flex: none; margin-top: 0.1rem; }

/* ------------------------------------------------------------------ *
 * Settings sub-navigation (Business, Profile, Localization, Payment,
 * Notifications, Security). Vertical >=768px, horizontally scrollable below.
 * ------------------------------------------------------------------ */
.rp-settings { display: grid; grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr); gap: var(--rp-space-6); align-items: start; }
.rp-settings__nav { position: sticky; top: var(--rp-space-5); }
.rp-settings__nav .nav { flex-direction: column; gap: 2px; }
.rp-settings__nav .nav-link {
  display: flex;
  align-items: center;
  gap: var(--rp-space-3);
  border-radius: var(--rp-radius);
  color: var(--rp-text-muted);
  font-weight: var(--rp-fw-medium);
  font-size: var(--rp-fs-sm);
  padding: var(--rp-space-3);
  min-height: var(--rp-target-min);
  text-align: left;
  border: 0;
  background: none;
  width: 100%;
}
.rp-settings__nav .nav-link:hover { background: var(--rp-surface-hover); color: var(--rp-text); }
.rp-settings__nav .nav-link.active { background: var(--rp-primary-subtle); color: var(--rp-brand-900); font-weight: var(--rp-fw-semibold); }
.rp-settings__nav .nav-link .bi { font-size: 1.05rem; }

@media (max-width: 767.98px) {
  .rp-settings { grid-template-columns: minmax(0, 1fr); }
  .rp-settings__nav { position: static; }
  .rp-settings__nav .nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; }
  .rp-settings__nav .nav-link { white-space: nowrap; width: auto; }
}

/* Booking-link list (one row per bookable event) */
.rp-linklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rp-space-4); }
.rp-linklist__head { display: flex; flex-wrap: wrap; gap: var(--rp-space-2) var(--rp-space-3); align-items: baseline; justify-content: space-between; margin-bottom: var(--rp-space-3); }
.rp-linklist__head h3 { font-size: var(--rp-fs-md); margin: 0; }

/* ------------------------------------------------------------------ *
 * Connected payment account (Settings -> Payment)
 * ------------------------------------------------------------------ */
.rp-account { display: flex; flex-direction: column; gap: var(--rp-space-4); }
.rp-account--primary { border-color: var(--rp-primary-subtle-border); box-shadow: inset 3px 0 0 var(--rp-primary); }
.rp-account__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--rp-space-3); align-items: start; }
/* On an account card the status is the headline, so it sits top-right rather than on its own row. */
.rp-account__head .rp-provider__status { grid-column: 3; justify-self: end; }
.rp-account__role {
  font-size: var(--rp-fs-xs);
  font-weight: var(--rp-fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rp-primary);
  margin: var(--rp-space-1) 0 0;
}
.rp-account__actions { display: flex; flex-wrap: wrap; gap: var(--rp-space-2); margin-top: auto; }

@media (max-width: 575.98px) {
  .rp-account__head { grid-template-columns: auto minmax(0, 1fr); }
  .rp-account__head .rp-provider__status { grid-column: 1 / -1; justify-self: start; }
  .rp-account__actions .btn { width: 100%; }
}

/* Development-only controls (mock API). Never rendered against a live backend. */
.rp-dev-panel {
  border: 1px dashed var(--rp-border-strong);
  border-radius: var(--rp-radius);
  background: var(--rp-surface);
  padding: var(--rp-space-4);
  margin-top: var(--rp-space-4);
}
.rp-dev-panel__title {
  display: flex;
  gap: var(--rp-space-2);
  align-items: flex-start;
  font-size: var(--rp-fs-sm);
  color: var(--rp-text-muted);
  margin: 0 0 var(--rp-space-3);
}
.rp-dev-panel__title .bi { flex: none; margin-top: 0.15rem; }

/* Brand + language switcher above an authentication form. The switcher has to be reachable
   BEFORE signing in, because the sign-in and registration screens are themselves translated. */
.rp-auth__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rp-space-3);
  margin-bottom: var(--rp-space-6);
}
.rp-auth__top .rp-brand { margin-bottom: 0; }
/* The admin skin paints the brand white for the dark sidebar; auth pages put that same brand
   on the light column, so it takes the page text colour back. */
.rp-app-admin .rp-auth__top .rp-brand { color: var(--rp-text); }
/* Verification and other single-column authentication screens have no aside panel. */
.rp-auth--single { grid-template-columns: minmax(0, 1fr); }
.rp-auth--single .rp-auth__form { max-width: 32rem; }

/* ---------- Vendor + admin authentication: form column + photo panel ----------
   Every vendor and admin sign-in, recovery and account screen shares this split screen. The vendor
   has the photo on the right; the admin (`.rp-auth--admin`) mirrors it — photo on the left under a
   navy "control centre" overlay. <main> stays first in the DOM on both, so the skip link, the
   reading order and the focus order are the same; only the grid places the columns. */
:is(.rp-auth--vendor, .rp-auth--admin) { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); }
@media (min-width: 992px) {
  .rp-auth--admin { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); grid-template-areas: "aside panel"; }
  .rp-auth--admin > .rp-auth__panel { grid-area: panel; }
  .rp-auth--admin > .rp-auth__aside { grid-area: aside; }
}
/* Desktop: the split screen is exactly one viewport tall, so the page itself never scrolls. On a
   very short window the form column scrolls on its own instead of being cut off. */
@media (min-width: 992px) {
  :is(.rp-auth--vendor, .rp-auth--admin) { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  :is(.rp-auth--vendor, .rp-auth--admin) .rp-auth__panel { overflow-y: auto; scrollbar-width: none; }
  :is(.rp-auth--vendor, .rp-auth--admin) .rp-auth__panel::-webkit-scrollbar { display: none; }
}
:is(.rp-auth--vendor, .rp-auth--admin) .rp-auth__panel {
  position: relative;
  padding-block: clamp(1.25rem, 4vh, 2.5rem);
  /* Soft blue wash in the lower-left corner, as in the approved design. */
  background:
    radial-gradient(38rem 28rem at -12% 108%, rgba(35, 82, 224, 0.07), transparent 60%),
    radial-gradient(26rem 20rem at -6% 96%, rgba(35, 82, 224, 0.06), transparent 70%),
    var(--rp-surface);
}
/* Admin: the same wash, mirrored into the lower-right corner. */
.rp-auth--admin .rp-auth__panel {
  background:
    radial-gradient(38rem 28rem at 112% 108%, rgba(35, 82, 224, 0.07), transparent 60%),
    radial-gradient(26rem 20rem at 106% 96%, rgba(35, 82, 224, 0.06), transparent 70%),
    var(--rp-surface);
}
/* "Safe" centring: auto margins centre the form while it fits and let it start at the top once it is
   taller than the column (mfa-setup at 1024 × 768). `justify-content: center` would push the top of
   a too-tall form above the scroll origin, where it can never be scrolled back into view. */
:is(.rp-auth--vendor, .rp-auth--admin) .rp-auth__panel { justify-content: flex-start; }
:is(.rp-auth--vendor, .rp-auth--admin) .rp-auth__form { max-width: 28rem; margin: auto; }
:is(.rp-auth--vendor, .rp-auth--admin) .rp-auth__top { margin-bottom: clamp(1.25rem, 4.5vh, 2.5rem); }
:is(.rp-auth--vendor, .rp-auth--admin) .rp-brand { gap: var(--rp-space-4); }
:is(.rp-auth--vendor, .rp-auth--admin) .rp-brand__mark--venuza { width: min(15rem, 60vw); height: 3.25rem; }
:is(.rp-auth--vendor, .rp-auth--admin) .rp-brand__sub {
  align-self: stretch;
  display: flex;
  align-items: center;
  max-width: 5rem;
  padding-left: var(--rp-space-4);
  border-left: 1px solid var(--rp-border-strong);
  font-size: var(--rp-fs-base);
  font-weight: var(--rp-fw-semibold);
  line-height: 1.25;
  color: var(--rp-text);
}
:is(.rp-auth--vendor, .rp-auth--admin) .rp-brand__name { align-self: stretch; }

/* Also when the eyebrow is a direct child of the form (mfa-setup.html), where `.rp-auth__form > p` would
   otherwise grey it and widen its gap — it must look the same as on login.html. */
.rp-auth__eyebrow,
.rp-auth__form > .rp-auth__eyebrow {
  font-size: var(--rp-fs-sm);
  font-weight: var(--rp-fw-semibold);
  font-size: var(--rp-fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rp-brand-600);
  margin-bottom: var(--rp-space-2);
}
:is(.rp-auth--vendor, .rp-auth--admin) .rp-auth__form h1 {
  font-size: clamp(1.625rem, 1.9vw, 2.125rem);
  font-weight: var(--rp-fw-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--rp-slate-900);
  max-width: 10.5em;
  margin-bottom: var(--rp-space-2);
}
.rp-auth__lead { font-size: var(--rp-fs-sm); color: var(--rp-text-muted); margin-bottom: clamp(1rem, 3vh, 1.5rem); max-width: 30rem; }
:is(.rp-auth--vendor, .rp-auth--admin) .form-label { font-size: var(--rp-fs-sm); font-weight: var(--rp-fw-medium); color: var(--rp-slate-900); margin-bottom: 0.375rem; }
:is(.rp-auth--vendor, .rp-auth--admin) .rp-field { margin-bottom: clamp(0.75rem, 2.2vh, 1.125rem); }
:is(.rp-auth--vendor, .rp-auth--admin) .rp-auth__link { font-size: var(--rp-fs-sm); }

/* Text inputs with a leading icon. */
.rp-input-icon { position: relative; }
.rp-input-icon > .bi {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  font-size: 1.15rem;
  color: var(--rp-slate-600);
  pointer-events: none;
}
.rp-input-icon > .form-control { padding-left: 3rem; }
:is(.rp-auth--vendor, .rp-auth--admin) .form-control {
  min-height: 2.75rem;
  font-size: var(--rp-fs-sm);
  background: #f6f8fd;
  border-color: var(--rp-slate-300);
  border-radius: 0.5rem;
}
:is(.rp-auth--vendor, .rp-auth--admin) .form-control:focus { background: var(--rp-surface); }
:is(.rp-auth--vendor, .rp-auth--admin) .form-control::placeholder { color: var(--rp-slate-500); }
/* MFA step: the code keeps its spaced, centred digits but at the same size as the other inputs. */
:is(.rp-auth--vendor, .rp-auth--admin) .rp-otp-input { font-size: var(--rp-fs-base); letter-spacing: 0.35em; }
:is(.rp-auth--vendor, .rp-auth--admin) .form-text { font-size: var(--rp-fs-xs); }
/* Stand-alone text buttons ("Use a recovery code instead", "Back to log in") keep a 24 px target
   (WCAG 2.5.8) without the 44 px height of a filled button. */
:is(.rp-auth--vendor, .rp-auth--admin) .btn-link.rp-auth__link { min-height: 1.5rem; line-height: 1.5; display: inline-flex; align-items: center; }

.rp-auth__link { font-weight: var(--rp-fw-medium); color: var(--rp-brand-600); text-decoration: underline; text-underline-offset: 0.2em; }
.rp-auth__link:hover { color: var(--rp-brand-800); }
.rp-auth__link .bi { font-size: 0.95em; margin-left: 0.25rem; }
.rp-auth__footer .rp-auth__link { margin-left: var(--rp-space-2); white-space: nowrap; }
:is(.rp-auth--vendor, .rp-auth--admin) .rp-auth__footer { font-size: var(--rp-fs-sm); margin-top: clamp(1rem, 3vh, 1.5rem); margin-bottom: 0; }

.rp-auth__submit {
  --bs-btn-bg: var(--rp-brand-600);
  --bs-btn-border-color: var(--rp-brand-600);
  --bs-btn-hover-bg: var(--rp-brand-700);
  --bs-btn-hover-border-color: var(--rp-brand-700);
  min-height: 2.75rem;
  font-size: var(--rp-fs-base);
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rp-space-3);
  font-weight: var(--rp-fw-semibold);
  margin-top: var(--rp-space-2);
}
/* Photo panel. The left of the photo is washed out so the copy stays readable (WCAG 1.4.3). */
.rp-auth__aside--photo {
  position: relative;
  justify-content: flex-start;
  padding: var(--rp-space-6) clamp(2rem, 5vw, 5rem);
  border-left: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.93) 0%, rgba(255, 255, 255, 0.84) 38%, rgba(255, 255, 255, 0.45) 56%, rgba(255, 255, 255, 0) 72%),
    url("/assets/images/vendor-bg.jpg") 62% center / cover no-repeat,
    var(--rp-slate-100);
}
.rp-auth__aside-lang { position: absolute; top: var(--rp-space-6); right: var(--rp-space-6); z-index: 2; }
.rp-auth__aside-lang .rp-langswitch__toggle {
  min-height: 2.5rem;
  padding: 0.375rem 1rem;
  font-size: var(--rp-fs-sm);
  border-radius: var(--rp-radius-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--rp-slate-900);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.12);
}
.rp-auth__aside-lang .rp-langswitch__toggle:hover { background: #fff; }
/* The generic aside list rules above would otherwise open and restyle the dropdown menu. */
.rp-auth__aside-lang .dropdown-menu { display: none; margin: 0; gap: 0; }
.rp-auth__aside-lang .dropdown-menu.show { display: block; }
.rp-auth__aside-lang .dropdown-menu li { display: block; color: inherit; }
.rp-auth__aside-body { margin-top: clamp(3rem, 13vh, 7rem); max-width: 24rem; }
.rp-auth__aside--photo .rp-eyebrow {
  font-size: var(--rp-fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rp-brand-600);
  margin-bottom: var(--rp-space-3);
}
.rp-auth__aside--photo h2 {
  font-size: clamp(1.5rem, 1.8vw, 2rem);
  font-weight: var(--rp-fw-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--rp-slate-900);
  max-width: 22rem;
}
.rp-auth__features { list-style: none; padding: 0; margin: var(--rp-space-5) 0 0; display: flex; flex-direction: column; gap: var(--rp-space-4); }
.rp-auth__features li { display: flex; align-items: flex-start; gap: var(--rp-space-4); }
.rp-auth__features strong { display: block; font-size: var(--rp-fs-base); font-weight: var(--rp-fw-semibold); color: var(--rp-slate-900); margin-bottom: 0.25rem; }
.rp-auth__features strong + span { display: block; font-size: var(--rp-fs-sm); color: var(--rp-slate-700); line-height: 1.45; }
.rp-auth__feature-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
}
.rp-auth__features .rp-auth__feature-icon .bi { font-size: 1.25rem; color: inherit; }
.rp-auth__feature-icon--blue { background: #e4ecff; color: var(--rp-brand-600); }
.rp-auth__feature-icon--green { background: #dcf5ef; color: var(--rp-accent-700); }
.rp-auth__feature-icon--amber { background: #fdeec8; color: var(--rp-amber-700); }

/* Admin photo panel: the same photograph under a deep navy overlay — a "control centre" rather than
   a café. The overlay is densest on the left, where the copy sits, and thins towards the form on the
   right so the lit laptop still glows through. Wherever text can fall it is at least 80 % navy, so
   white text keeps ≥ 7:1 and the muted copy ≥ 4.5:1 even over the brightest pixel (WCAG 1.4.3). */
.rp-auth__aside.rp-auth__aside--admin {
  color: #fff;
  border-left: 0;
  background:
    radial-gradient(36rem 28rem at 8% 18%, rgba(35, 82, 224, 0.26), transparent 70%),
    linear-gradient(90deg, rgba(6, 13, 36, 0.96) 0%, rgba(8, 17, 46, 0.92) 48%, rgba(10, 22, 58, 0.84) 74%, rgba(12, 27, 72, 0.6) 100%),
    url("/assets/images/vendor-bg.jpg") 78% center / cover no-repeat,
    #0a1534;
}
.rp-auth__aside--admin .rp-auth__aside-body { margin-top: clamp(4rem, 17vh, 9.5rem); }
.rp-auth__aside.rp-auth__aside--admin .rp-eyebrow { color: #a9c1ff; }
.rp-auth__aside.rp-auth__aside--admin h2 { color: #fff; }
.rp-auth__aside--admin .rp-auth__features li { color: #fff; }
.rp-auth__aside--admin .rp-auth__features strong { color: #fff; }
.rp-auth__aside--admin .rp-auth__features strong + span { color: #d3dbe8; }
/* Glass tiles instead of the pastel ones of the light panel; each keeps its colour cue. */
.rp-auth__aside--admin .rp-auth__feature-icon {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.rp-auth__aside--admin .rp-auth__features .rp-auth__feature-icon--blue .bi { color: #a9c1ff; }
.rp-auth__aside--admin .rp-auth__features .rp-auth__feature-icon--green .bi { color: #6ee7d3; }
.rp-auth__aside--admin .rp-auth__features .rp-auth__feature-icon--amber .bi { color: #fcd877; }
/* "Restricted area. All actions are audited." — a quiet pill at the foot of the panel. */
.rp-auth__aside.rp-auth__aside--admin .rp-auth__aside-note {
  margin: auto 0 0;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--rp-space-2);
  padding: 0.5rem 0.875rem;
  border-radius: var(--rp-radius-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--rp-fs-xs);
  color: #e2e8f0;
}
.rp-auth__aside-note .bi { color: #fcd877; }

/* Admin: no photo-panel switcher (the panel is on the left, and a control there would come last in
   the focus order). From tablet width up the form row's own switcher moves into the top-right corner
   of the page — the same corner as on the vendor screens — as the same pill. On a vendor tablet
   (768–991 px, photo hidden) the form row's switcher takes that corner too, so the full lockup, the
   portal label and the switcher never have to share the 28rem column. */
@media (min-width: 768px) {
  /* The column's content starts below the corner switcher, so a long screen (mfa-setup) or a narrow
     column (1024 px) never puts the brand row underneath it. */
  .rp-auth--admin .rp-auth__panel { padding-top: calc(var(--rp-space-6) + 2.5rem + var(--rp-space-4)); }
  .rp-auth--admin .rp-auth__top > [data-language-switcher] { position: absolute; top: var(--rp-space-6); right: var(--rp-space-6); z-index: 2; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .rp-auth--vendor .rp-auth__panel { padding-top: calc(var(--rp-space-6) + 2.5rem + var(--rp-space-4)); }
  .rp-auth--vendor .rp-auth__top > [data-language-switcher] { position: absolute; top: var(--rp-space-6); right: var(--rp-space-6); z-index: 2; }
}
@media (min-width: 768px) {
  :is(.rp-auth--vendor, .rp-auth--admin) .rp-auth__top .rp-langswitch__toggle {
    min-height: 2.5rem;
    padding: 0.375rem 1rem;
    font-size: var(--rp-fs-sm);
    border: 1px solid var(--rp-slate-300);
    border-radius: var(--rp-radius-pill);
    background: var(--rp-surface);
    color: var(--rp-slate-900);
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
  }
}

/* Result and state screens in the form column (link sent, password changed, invitation expired,
   signed out …): left-aligned, without the padding of an empty-state card, and with buttons of the
   same height as the form's. */
:is(.rp-auth--vendor, .rp-auth--admin) .rp-auth__form .rp-state { padding: 0; gap: var(--rp-space-3); align-items: flex-start; text-align: start; }
:is(.rp-auth--vendor, .rp-auth--admin) .rp-auth__form .rp-state h1 { margin: var(--rp-space-1) 0 0; }
:is(.rp-auth--vendor, .rp-auth--admin) .rp-auth__form .rp-state p { margin: 0 0 var(--rp-space-2); font-size: var(--rp-fs-sm); }
:is(.rp-auth--vendor, .rp-auth--admin) .rp-auth__form :is(.rp-state, #verify-root, #mfa-lost-step) .btn:not(.btn-link):not(.btn-sm) {
  min-height: 2.75rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rp-space-2);
  font-weight: var(--rp-fw-semibold);
}
:is(.rp-auth--vendor, .rp-auth--admin) .rp-auth__form :is(.rp-state, #verify-root) .btn-primary { --bs-btn-bg: var(--rp-brand-600); --bs-btn-border-color: var(--rp-brand-600); --bs-btn-hover-bg: var(--rp-brand-700); --bs-btn-hover-border-color: var(--rp-brand-700); }
/* Registration: the terms line sits under the button, where it is read before the account exists. */
/* Email verification (auth-verify-email.js renders these): the result icon, lead and "sent to" line,
   styled here because the booking stylesheet that first defined them is not loaded on portal pages. */
.rp-auth__form .rp-result__icon {
  display: inline-grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--rp-radius-pill);
  font-size: 1.5rem;
  margin-bottom: var(--rp-space-3);
}
.rp-auth__form .rp-result__icon--info { background: var(--rp-info-subtle); color: var(--rp-info); }
.rp-auth__form .rp-result__icon--success { background: var(--rp-success-subtle); color: var(--rp-success); }
.rp-auth__form .rp-result__icon--warning { background: var(--rp-warning-subtle); color: var(--rp-warning-emphasis); }
.rp-auth__form .rp-result__lead { font-size: var(--rp-fs-sm); color: var(--rp-text-muted); margin: var(--rp-space-2) 0 var(--rp-space-4); }
.rp-auth__form .rp-reference {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: var(--rp-space-3);
  background: var(--rp-surface-muted);
  border: 1px solid var(--rp-border);
  border-radius: 0.5rem;
  font-size: var(--rp-fs-sm);
}
.rp-auth__form .rp-reference span { color: var(--rp-text-muted); }
.rp-auth__form .rp-reference strong { min-width: 0; overflow-wrap: anywhere; }
/* The setup key breaks between its groups of four rather than mid-group; an ungrouped key still wraps. */
.rp-auth__form .rp-secret { word-break: normal; overflow-wrap: anywhere; }
/* A lead that is a direct child of the form (register, mfa-setup) keeps the gap it has inside a section. */
.rp-auth__form > .rp-auth__lead { margin-bottom: clamp(1rem, 3vh, 1.5rem); }
.rp-auth__form > .rp-auth__terms { display: flex; gap: var(--rp-space-2); align-items: flex-start; margin: var(--rp-space-3) 0 0; font-size: var(--rp-fs-xs); color: var(--rp-text-muted); }
.rp-auth__terms .bi { color: var(--rp-accent-700); margin-top: 0.1rem; }

/* "Edit" beside a value on the review step. It sits on its own line on narrow screens so the
   value is never squeezed, and keeps a 24px target height (WCAG 2.5.8). */
.rp-dl__edit {
  margin-left: var(--rp-space-3);
  padding: 0;
  font-size: var(--rp-fs-sm);
  min-height: 1.5rem;
}

/* ---------- Portal-wide notices (backend P4: announcements + billing notices) ---------- */
.rp-notices { margin-bottom: var(--rp-space-5); }
.rp-notices__list { display: grid; gap: var(--rp-space-3); }
.rp-notice { margin-bottom: 0; align-items: flex-start; }
.rp-notice__body { flex: 1 1 auto; min-width: 0; }
.rp-notice__title { margin-bottom: var(--rp-space-1); }
.rp-notice__text { margin-bottom: var(--rp-space-2); white-space: pre-line; overflow-wrap: anywhere; }
.rp-notice__close { flex: none; width: 1.5rem; height: 1.5rem; padding: 0; margin-left: auto; }
/* Backend P5: the "signed in with a recovery code" banner (mfa-notice.js) above the page. */
.rp-mfa-notice:not(:empty) { margin-bottom: var(--rp-space-5); }

/* ---------- Sub-navigation of an area with several pages (backend P4: admin billing) ---------- */
.rp-subnav { margin-bottom: var(--rp-space-5); }
.rp-subnav .nav { flex-wrap: wrap; gap: var(--rp-space-1); }

/* ---------- Email template editor: the preview reads like the email (plain text, one line per paragraph) ---------- */
.rp-mail-preview { border: 1px solid var(--rp-border); border-radius: var(--rp-radius); background: var(--rp-surface-muted); padding: var(--rp-space-4); }
.rp-mail-preview__subject { font-weight: var(--rp-fw-semibold); margin-bottom: var(--rp-space-3); overflow-wrap: anywhere; }
.rp-mail-preview__line { margin-bottom: var(--rp-space-2); white-space: pre-line; overflow-wrap: anywhere; }
.rp-placeholders { display: flex; flex-wrap: wrap; gap: var(--rp-space-2); padding: 0; list-style: none; }
.rp-placeholders code { display: inline-block; padding: 0.125rem 0.5rem; border-radius: var(--rp-radius-sm); background: var(--rp-surface-hover); color: var(--rp-text); }
.rp-preline { white-space: pre-line; overflow-wrap: anywhere; }

/* ---------- Plan limits on vendor settings (backend P4) ---------- */
.rp-limits { display: grid; gap: var(--rp-space-4); }
.rp-limits__item { display: grid; gap: var(--rp-space-2); }

/* =====================================================================
   P7 portal design — page-level components (vendor + admin portals).
   Scoped to `.rp-portal`; the sign-in sections above are not touched.
   ===================================================================== */

/* ---------- View switch (List / Week calendar): a segmented control ---------- */
.rp-portal .rp-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--rp-slate-200);
  border-radius: 0.75rem;
  background: var(--rp-slate-100);
}
.rp-portal .rp-segmented > .btn {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-color: var(--rp-slate-700);
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.75);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: var(--rp-slate-900);
  --bs-btn-active-bg: var(--rp-surface);
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-color: var(--rp-slate-900);
  min-height: 2.25rem;
  border-radius: 0.5rem;
  box-shadow: none;
}
.rp-portal .rp-segmented > .btn[aria-current="page"] {
  --bs-btn-bg: var(--rp-surface);
  --bs-btn-color: var(--rp-brand-800);
  --bs-btn-hover-bg: var(--rp-surface);
  --bs-btn-hover-color: var(--rp-brand-800);
  box-shadow: var(--rp-shadow-sm);
}
.rp-portal .rp-segmented > .btn[aria-current="page"] .bi { color: var(--rp-action); }

/* ---------- Filters toggle (phones) ---------- */
.rp-portal .rp-filters-toggle { margin: var(--rp-space-4) var(--rp-space-4) 0; }

/* ---------- Event wizard steps: one track, the current step lit ---------- */
.rp-portal .rp-wizard-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rp-space-1);
  padding: 0.375rem;
  border: 1px solid rgba(207, 214, 224, 0.75);
  border-radius: var(--rp-radius-card);
  background: var(--rp-surface);
  box-shadow: var(--rp-shadow-card);
}
.rp-portal .rp-wizard-steps li { min-width: 0; padding: 0.5rem 0.75rem; border-radius: 0.625rem; gap: 0.625rem; overflow-wrap: anywhere; line-height: 1.3; }
.rp-portal .rp-wizard-steps li::before { flex: none; width: 1.75rem; height: 1.75rem; font-size: var(--rp-fs-xs); background: var(--rp-slate-50); }
.rp-portal .rp-wizard-steps li[aria-current="step"] { background: var(--rp-brand-50); color: var(--rp-brand-900); }
.rp-portal .rp-wizard-steps li[aria-current="step"]::before { background: var(--rp-action); border-color: var(--rp-action); box-shadow: 0 0 0 3px rgba(35, 82, 224, 0.18); }
.rp-portal .rp-wizard-steps li.is-complete { color: var(--rp-slate-800); }

/* Step actions (Back / Continue) on the event wizard and the location form. */
.rp-portal .rp-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--rp-space-2); }
.rp-portal .rp-step__actions.rp-form-actions { justify-content: flex-start; margin-top: var(--rp-space-5); padding-top: var(--rp-space-5); border-top: 1px solid var(--rp-slate-100); }

/* ---------- Option cards (pricing type, event type, capacity mode) ---------- */
.rp-portal .rp-option label { border-radius: 0.875rem; border-color: var(--rp-slate-300); padding: var(--rp-space-4) var(--rp-space-5); }
.rp-portal .rp-option label strong .bi { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 0.625rem; background: var(--rp-tile-blue); color: var(--rp-tile-blue-ink); }
.rp-portal .rp-option label:hover { border-color: var(--rp-slate-400); box-shadow: var(--rp-shadow-card); }
.rp-portal .rp-option input:checked + label { border-color: var(--rp-action); background: var(--rp-brand-50); box-shadow: inset 0 0 0 1px var(--rp-action), var(--rp-shadow-card); }
.rp-portal .rp-option input:checked + label strong::after { color: var(--rp-action); }
.rp-portal .rp-rule { border-radius: 0.875rem; background: var(--rp-slate-25); }
.rp-portal .btn-check:checked + .btn-outline-primary { background: var(--rp-action); border-color: var(--rp-action); }

/* ---------- Week calendar ---------- */
.rp-portal .rp-week { gap: var(--rp-space-3); }
.rp-portal .rp-week__day { border-color: rgba(207, 214, 224, 0.75); border-radius: 0.875rem; box-shadow: var(--rp-shadow-card); overflow: hidden; }
.rp-portal .rp-week__day.is-today { border-color: var(--rp-action); box-shadow: inset 0 3px 0 var(--rp-action), var(--rp-shadow-card); }
.rp-portal .rp-week__head { background: var(--rp-slate-50); border-bottom-color: var(--rp-slate-100); }
.rp-portal .rp-week__day.is-today .rp-week__head { background: var(--rp-brand-50); }
.rp-portal .rp-week__head h3 { font-size: var(--rp-fs-sm); font-weight: var(--rp-fw-bold); }
.rp-portal .rp-week__head p { color: var(--rp-text-muted); }
.rp-portal .rp-week__item a {
  position: relative;
  padding: var(--rp-space-2) var(--rp-space-2) var(--rp-space-2) 0.875rem;
  border-radius: 0.625rem;
  border-color: var(--rp-slate-200);
  background: var(--rp-surface);
  box-shadow: var(--rp-shadow-xs);
  transition: border-color var(--rp-dur-fast) var(--rp-ease-out), box-shadow var(--rp-dur-fast) var(--rp-ease-out);
}
.rp-portal .rp-week__item a::before { content: ""; position: absolute; left: 0.3125rem; top: 0.5rem; bottom: 0.5rem; width: 3px; border-radius: 3px; background: var(--rp-action); }
.rp-portal .rp-week__item a:hover { border-color: var(--rp-primary-subtle-border); background: var(--rp-surface); box-shadow: var(--rp-shadow-card); }
.rp-portal .rp-week__empty { color: var(--rp-text-muted); }

/* ---------- Location / event cards ---------- */
.rp-portal .rp-entity-card h2 { font-size: 1.0625rem; font-weight: var(--rp-fw-bold); letter-spacing: -0.01em; }
.rp-portal .rp-entity-card h2 a { text-decoration: none; }
.rp-portal .rp-entity-card h2 a:hover { color: var(--rp-action); text-decoration: underline; text-underline-offset: 0.2em; }
.rp-portal .rp-entity-card__facts { gap: var(--rp-space-2); }
.rp-portal .rp-entity-card__facts li { padding: 0.25rem 0.625rem; border-radius: var(--rp-radius-pill); background: var(--rp-slate-50); border: 1px solid var(--rp-slate-100); color: var(--rp-slate-700); }
.rp-portal .rp-entity-card__facts .bi { color: var(--rp-action); }
.rp-portal .rp-link-field .form-control { background: var(--rp-slate-50); }

/* ---------- Onboarding wizard ---------- */
.rp-portal .rp-onboard__intro { background: linear-gradient(150deg, var(--rp-brand-50), var(--rp-surface) 65%); }
.rp-portal .rp-onboard__intro h2 { font-weight: var(--rp-fw-bold); letter-spacing: -0.015em; }
.rp-portal .rp-progress-steps__marker { width: 2rem; height: 2rem; background: var(--rp-slate-50); }
.rp-portal .rp-progress-steps li::after { left: 1rem; top: 2.25rem; }
.rp-portal .rp-progress-steps li[aria-current="step"] .rp-progress-steps__marker { background: var(--rp-action); border-color: var(--rp-action); box-shadow: 0 0 0 4px rgba(35, 82, 224, 0.16); }
.rp-portal .rp-onboard__panel h2 { font-weight: var(--rp-fw-bold); letter-spacing: -0.02em; }
.rp-portal .rp-onboard__actions { padding-top: var(--rp-space-5); border-top: 1px solid var(--rp-slate-100); }

/* ---------- Payment providers / accounts ---------- */
.rp-portal .rp-provider__icon { width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; background: var(--rp-tile-blue); color: var(--rp-tile-blue-ink); }
.rp-portal .rp-provider.is-selected { border-color: var(--rp-action); box-shadow: inset 0 0 0 1px var(--rp-action), var(--rp-shadow-card); }
.rp-portal .rp-account--primary { box-shadow: inset 3px 0 0 var(--rp-action), var(--rp-shadow-card); }
.rp-portal .rp-secure-note { border-radius: var(--rp-radius-control); background: var(--rp-surface); }
.rp-portal .rp-suggestion { border-radius: var(--rp-radius-control); }

/* ---------- Settings: sub-navigation as a floating card ---------- */
.rp-portal .rp-settings__nav .nav {
  padding: 0.375rem;
  border: 1px solid rgba(207, 214, 224, 0.75);
  border-radius: var(--rp-radius-card);
  background: var(--rp-surface);
  box-shadow: var(--rp-shadow-card);
}
.rp-portal .rp-settings__nav .nav-link { position: relative; min-height: var(--rp-target-touch); border-radius: 0.625rem; color: var(--rp-slate-700); }
.rp-portal .rp-settings__nav .nav-link .bi { color: var(--rp-slate-500); }
.rp-portal .rp-settings__nav .nav-link.active { background: var(--rp-tile-blue); color: var(--rp-brand-900); }
.rp-portal .rp-settings__nav .nav-link.active .bi { color: var(--rp-action); }

/* ---------- Booking links, reports, billing ---------- */
.rp-portal .rp-linklist__head h3 { font-weight: var(--rp-fw-bold); letter-spacing: -0.01em; }
.rp-portal .rp-code { border-radius: var(--rp-radius-control); background: var(--rp-ink); }
.rp-portal .rp-bars .rp-meter__bar { height: 0.625rem; }
.rp-portal .rp-subnav .nav-pills { --bs-nav-pills-link-active-bg: var(--rp-action); --bs-nav-pills-border-radius: var(--rp-radius-pill); }
.rp-portal .rp-subnav .nav-link { min-height: 2.5rem; display: inline-flex; align-items: center; gap: var(--rp-space-2); font-weight: var(--rp-fw-semibold); font-size: var(--rp-fs-sm); }

/* ---------- Portal notices ---------- */
.rp-portal .rp-notice { box-shadow: var(--rp-shadow-card); }

/* =====================================================================
   QA 2026-10-03 design fixes (QA-006 / QA-007 / QA-008 / QA-009)
   ===================================================================== */

/* QA-008: ≥992px the sidebar is a fixed-height flex column. Its rows used to shrink to fit the
   viewport, so the admin brand row (lockup + a two-line "Administración de la plataforma") was
   squeezed below its content and the label ran into the first navigation link. The rows keep their
   height; the sidebar scrolls on its own instead (it already has overflow-y: auto) — the same for
   the off-canvas panel on a short landscape phone. */
.rp-sidebar > * { flex-shrink: 0; }
/* The portal label under the admin lockup wraps in German and Spanish: balanced lines, a readable
   line height and room before the navigation. */
.rp-app-admin .rp-sidebar .rp-brand__sub { max-width: 100%; line-height: 1.4; text-wrap: balance; overflow-wrap: anywhere; }
.rp-app-admin .rp-sidebar__top { padding-bottom: var(--rp-space-4); }

/* QA-007: the side column of a detail page is narrow (≈ 17–20rem). Label | value pairs there left
   the value about 6rem, so a status pill or an e-mail pushed the page sideways in German and
   Spanish. The aside is a size container: when it is narrow its lists read label-over-value (as
   on phones); when it is wider the value column may shrink and its content wraps. Below 768px the
   phone rule in responsive.css (label over value) stays in charge. */
.rp-detail__aside { container: rp-aside / inline-size; }
@media (min-width: 768px) {
  .rp-detail__aside .rp-dl:not(.rp-dl--stacked) { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); }
}
.rp-detail__aside .rp-dl > dd { min-width: 0; }
.rp-detail__aside .rp-dl > dd .rp-status { white-space: normal; max-width: 100%; }
@container rp-aside (max-width: 22rem) {
  .rp-portal .rp-detail__aside .rp-dl:not(.rp-dl--stacked) { grid-template-columns: minmax(0, 1fr); }
  .rp-portal .rp-detail__aside .rp-dl:not(.rp-dl--stacked) > dt { border-bottom: 0; padding-bottom: 0; }
  .rp-portal .rp-detail__aside .rp-dl:not(.rp-dl--stacked) > dd { margin-bottom: 0; padding-top: 0.125rem; }
}

/* QA-006: a vendor that has not finished set-up — flagged in the vendors list and on its page. */
.table .rp-cell-flag,
.rp-record .rp-cell-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: var(--rp-space-2);
  font-size: var(--rp-fs-xs);
  font-weight: var(--rp-fw-semibold);
  color: var(--rp-warning-emphasis);
  white-space: nowrap;
}
.rp-record .rp-cell-flag { margin-left: 0; white-space: normal; }
.rp-setup-note {
  display: flex;
  gap: var(--rp-space-2);
  margin: 0 0 var(--rp-space-3);
  padding: var(--rp-space-2) var(--rp-space-3);
  border: 1px solid var(--rp-warning-border);
  border-radius: var(--rp-radius-control);
  background: var(--rp-warning-subtle);
  color: var(--rp-warning-emphasis);
  font-size: var(--rp-fs-sm);
}
.rp-setup-note .bi { flex: none; margin-top: 0.125rem; }

/* QA-009: the vendor events table at 1280 px. The event name keeps a readable measure, the next
   date stays on one line, and Copy link + Manage share the actions cell. */
/* (min-widths include the cell padding) A long column title such as "Nächster freier Termin" may
   wrap, so it no longer sets the width of a column whose values are short. */
.table .rp-cell-name { min-width: 13rem; }
.table .rp-cell-place { min-width: 9rem; }
.table td.rp-cell-when { white-space: nowrap; }
.table thead th.rp-cell-when { white-space: normal; }
.rp-cell-actions__group { display: inline-flex; align-items: center; gap: var(--rp-space-2); }

/* ---------- Print (QA 2026-10-23, UI-013) ----------
   An invoice, a reservation or a payment printed from either portal printed the whole app: the
   sidebar, the top bar with the language and account menus, and every action button. Paper gets the
   page itself — title, details and status — on white, full width, with cards kept whole. */
@media print {
  .rp-portal,
  .rp-portal .rp-shell { background: #fff !important; }
  .rp-portal .rp-skip-link,
  .rp-portal .rp-sidebar,
  .rp-portal .rp-topbar,
  .rp-portal .offcanvas-backdrop,
  .rp-portal .rp-toast-region,
  .rp-portal .rp-dev-note,
  .rp-portal .breadcrumb,
  .rp-portal main .btn,
  .rp-portal .rp-form-actions { display: none !important; }
  .rp-portal .rp-main { margin: 0 !important; padding: 0 !important; max-width: none !important; width: 100% !important; }
  .rp-portal .rp-card { box-shadow: none !important; border: 1px solid var(--rp-border) !important; break-inside: avoid; }
  .rp-portal .rp-page-enter,
  .rp-portal .rp-reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
  .rp-portal a[href] { color: inherit; text-decoration: none; }
}