/* ============================================================
   Be Enhanced Admin — Design System
   Light theme — warm ivory + champagne gold (#c9a96e)
   ============================================================ */
:root {
  --be-black: #f5f3f0; /* page background */
  --be-dark: #ffffff; /* cards, sidebar, panels */
  --be-dark-alt: #f8f7f4; /* alternate section bg */
  --be-surface: #f0ede6; /* input bg, hover states */
  --be-surface-2: #e8e3d8; /* secondary surface */
  --be-gold: #121212; /* primary accent */
  --be-gold-light: #2a2a2a; /* hover gold */
  --be-gold-dark: #080808; /* text-safe darker gold */
  --be-white: #1a1a1a; /* headings (dark on light) */
  --be-text: #2e2c2a; /* body text */
  --be-text-muted: #7a7570; /* secondary text */
  --be-border: rgba(201, 169, 110, 0.28);
  --be-border-sub: rgba(0, 0, 0, 0.08);
  --be-success: #2e7d52;
  --be-warning: #c47a00;
  --be-danger: #c0392b;
  --be-info: #2563a8;
  --sidebar-w: 260px;
  --sidebar-col: 72px;
  --topbar-h: 64px;
  --content-p: 24px;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-ui: "Inter", system-ui, sans-serif;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-gold: 0 0 20px rgba(201, 169, 110, 0.18);
  --transition: 0.2s ease;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-size: 16px;
}
body {
  margin: 0;
  background: var(--be-black);
  color: var(--be-text);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--be-gold-dark);
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
}
:focus-visible {
  outline: 2px solid var(--be-gold);
  outline-offset: 2px;
}
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: var(--be-surface);
}
::-webkit-scrollbar-thumb {
  background: var(--be-surface-2);
  border-radius: 3px;
}

/* ── Layout ── */
.be-wrapper {
  display: flex;
  min-height: 100vh;
}
.be-main {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--transition);
}
.be-main.sidebar-collapsed {
  margin-left: var(--sidebar-col);
}
.be-content {
  flex: 1;
  min-width: 0;
  padding: var(--content-p);
  padding-top: calc(var(--topbar-h) + var(--content-p));
}

/* ── Sidebar ── */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--be-dark);
  border-right: 1px solid var(--be-border);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transition: width var(--transition);
  overflow: hidden;
}
.sidebar.collapsed {
  width: var(--sidebar-col);
}
.sidebar__logo {
  padding: 16px 18px;
  border-bottom: 1px solid var(--be-border);
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--topbar-h);
  flex-shrink: 0;
}
.sidebar__logo-mark {
  width: 32px;
  height: 32px;
  background: var(--be-gold);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.sidebar__logo-text {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--be-white);
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 1;
  transition: opacity var(--transition);
}
.sidebar.collapsed .sidebar__logo-text {
  opacity: 0;
  pointer-events: none;
}
.sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}
.sidebar__section-label {
  display: block;
  padding: 6px 18px 4px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--be-text-muted);
  white-space: nowrap;
}
.sidebar.collapsed .sidebar__section-label {
  opacity: 0;
}
.sidebar__nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  margin: 1px 8px;
  border-radius: var(--radius-md);
  color: var(--be-text-muted);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
}
.sidebar__nav-item:hover {
  background: var(--be-surface);
  color: var(--be-text);
}
.sidebar__nav-item.active {
  background: linear-gradient(
    135deg,
    rgba(201, 169, 110, 0.14) 0%,
    rgba(201, 169, 110, 0.05) 100%
  );
  color: var(--be-gold-dark);
  border: 1px solid var(--be-border);
}
.sidebar__nav-icon {
  font-size: 1rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.sidebar__nav-label {
  font-size: 0.85rem;
  opacity: 1;
  transition: opacity var(--transition);
}
.sidebar.collapsed .sidebar__nav-label {
  opacity: 0;
}
.sidebar__footer {
  padding: 12px;
  border-top: 1px solid var(--be-border);
  flex-shrink: 0;
}
.sidebar__user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.sidebar__user:hover {
  background: var(--be-surface);
}
.sidebar__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--be-gold);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}
.sidebar__user-info {
  overflow: hidden;
  transition: opacity var(--transition);
}
.sidebar.collapsed .sidebar__user-info {
  opacity: 0;
}
.sidebar__user-name {
  font-size: 0.8rem;
  color: var(--be-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar__user-role {
  font-size: 0.7rem;
  color: var(--be-gold-dark);
}

/* ── Topbar ── */
.topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: var(--sidebar-w);
  height: var(--topbar-h);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--be-border);
  display: flex;
  align-items: center;
  padding: 0 var(--content-p);
  z-index: 900;
  gap: 14px;
  transition: left var(--transition);
}
.topbar.sidebar-collapsed {
  left: var(--sidebar-col);
}
.topbar__toggle {
  background: none;
  border: none;
  color: var(--be-text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  display: flex;
  align-items: center;
  font-size: 1.2rem;
}
.topbar__toggle:hover {
  color: var(--be-gold-dark);
  background: var(--be-surface);
}
.topbar__breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--be-text-muted);
  flex: 1;
}
.topbar__breadcrumb-item {
  color: var(--be-text-muted);
}
.topbar__breadcrumb-item.active,
.topbar__breadcrumb-item:hover {
  color: var(--be-text);
}
.topbar__breadcrumb-sep {
  color: var(--be-surface-2);
}
.topbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.topbar__country-select {
  background: var(--be-surface);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  color: var(--be-text);
  padding: 5px 10px;
  font-size: 0.82rem;
  cursor: pointer;
}
.topbar__icon-btn {
  background: var(--be-surface);
  border: 1px solid var(--be-border-sub);
  border-radius: var(--radius-md);
  color: var(--be-text-muted);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  font-size: 1rem;
}
.topbar__icon-btn:hover {
  color: var(--be-gold-dark);
}

/* ── Typography ── */
h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  color: var(--be-white);
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 0.5em;
  letter-spacing: 0.02em;
}
h1 {
  font-size: 1.9rem;
}
h2 {
  font-size: 1.5rem;
}
h3 {
  font-size: 1.2rem;
}
h4 {
  font-size: 1rem;
}

/* ── Page Header ── */
.be-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.be-page-title {
  font-size: 1.8rem;
  margin: 0 0 4px;
}
.be-page-subtitle {
  color: var(--be-text-muted);
  font-size: 0.85rem;
  margin: 0;
}

/* ── Cards ── */
.be-card {
  background: var(--be-dark);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.be-card__header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--be-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.be-card__title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--be-white);
  margin: 0;
}
.be-card__body {
  padding: 20px;
}
.be-card__footer {
  padding: 12px 20px;
  border-top: 1px solid var(--be-border);
  background: var(--be-dark-alt);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ── Stat Cards ── */
.be-stat-card {
  background: var(--be-dark);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: all var(--transition);
}
.be-stat-card:hover {
  border-color: var(--be-gold);
  box-shadow: var(--shadow-gold);
}
.be-stat-card__icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: rgba(201, 169, 110, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--be-gold-dark);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.be-stat-card__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--be-text-muted);
  margin-bottom: 6px;
}
.be-stat-card__value {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: var(--be-white);
  line-height: 1;
  margin-bottom: 6px;
}
.be-stat-card__change {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.76rem;
  padding: 2px 7px;
  border-radius: 999px;
}
.be-stat-card__change.positive {
  background: rgba(46, 125, 82, 0.1);
  color: var(--be-success);
}
.be-stat-card__change.negative {
  background: rgba(192, 57, 43, 0.1);
  color: var(--be-danger);
}
.be-stat-mini {
  text-align: center;
}
.be-stat-mini span {
  display: block;
  font-size: 0.7rem;
  color: var(--be-text-muted);
}

/* ── Tables ── */
.be-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.be-table thead th {
  padding: 10px 16px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--be-text-muted);
  background: var(--be-dark-alt);
  border-bottom: 1px solid var(--be-border);
  white-space: nowrap;
}
.be-table tbody tr {
  border-bottom: 1px solid var(--be-border-sub);
  transition: background var(--transition);
}
.be-table tbody tr:hover {
  background: var(--be-surface);
}
.be-table tbody tr:last-child {
  border-bottom: none;
}
.be-table td {
  padding: 11px 16px;
  font-size: 0.85rem;
  vertical-align: middle;
}
.be-cell-name {
  font-weight: 500;
}

.weekly-booking-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
}
.weekly-booking-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(201, 169, 110, 0.18);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  transition:
    background var(--transition),
    border-color var(--transition);
}
.weekly-booking-row:hover {
  background: rgba(201, 169, 110, 0.08);
  border-color: rgba(201, 169, 110, 0.28);
}
.weekly-booking-row--today {
  background: rgba(201, 169, 110, 0.14);
  border-color: rgba(201, 169, 110, 0.35);
}
.weekly-booking-details {
  min-width: 0;
}
.weekly-booking-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(201, 169, 110, 0.2);
  color: var(--be-gold-dark);
  font-size: 0.9rem;
  font-weight: 700;
}
.weekly-booking-pill i {
  font-size: 1rem;
}
.weekly-booking-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.weekly-booking-count {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--be-gold);
  min-width: 28px;
  text-align: right;
}
.weekly-booking-count--zero {
  color: var(--be-text-muted);
}
.weekly-booking-action {
  border-color: rgba(201, 169, 110, 0.25);
  color: var(--be-text);
  background: rgba(201, 169, 110, 0.08);
}
.weekly-booking-action:hover {
  background: rgba(201, 169, 110, 0.16);
  border-color: rgba(201, 169, 110, 0.32);
}
.be-cell-sub {
  font-size: 0.78rem;
  color: var(--be-text-muted);
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.4;
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-primary {
  background: var(--be-gold);
  color: #fff;
  border-color: var(--be-gold);
}
.btn-primary:hover {
  background: var(--be-gold-dark);
  border-color: var(--be-gold-dark);
  color: #fff;
  box-shadow: var(--shadow-gold);
}
.btn-secondary {
  background: transparent;
  color: var(--be-text);
  border-color: var(--be-border);
}
.btn-secondary:hover {
  background: var(--be-surface);
  color: var(--be-white);
}
.btn-ghost {
  background: transparent;
  color: var(--be-text-muted);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--be-surface);
  color: var(--be-text);
}
.btn-danger {
  background: var(--be-danger);
  color: #fff;
  border-color: var(--be-danger);
}
.btn-sm {
  padding: 5px 10px;
  font-size: 0.78rem;
}
.btn-sm.btn-icon {
  padding: 5px 7px;
}
.w-100 {
  width: 100%;
  justify-content: center;
}

/* ── Forms ── */
.be-form-group {
  margin-bottom: 18px;
}
.be-form-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--be-text-muted);
  margin-bottom: 6px;
}
.be-form-control {
  width: 100%;
  padding: 9px 12px;
  background: var(--be-surface);
  border: 1px solid var(--be-border-sub);
  border-radius: var(--radius-md);
  color: var(--be-text);
  font-size: 0.88rem;
  font-family: var(--font-ui);
  transition: all var(--transition);
  line-height: 1.5;
}
.be-form-control::placeholder {
  color: var(--be-text-muted);
}
.be-form-control:focus {
  outline: none;
  border-color: var(--be-gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.12);
  background: #fff;
}
.be-form-control:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.iti {
  display: block;
  width: 100%;
}
.iti input.be-phone-input.be-form-control {
  width: 100%;
}
.be-form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%237a7570' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  appearance: none;
  cursor: pointer;
}
textarea.be-form-control {
  resize: vertical;
  min-height: 80px;
}

/* ── Badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.badge-status--pending {
  background: rgba(196, 122, 0, 0.1);
  color: var(--be-warning);
}
.badge-status--confirmed {
  background: rgba(46, 125, 82, 0.1);
  color: var(--be-success);
}
.badge-status--in-progress {
  background: rgba(37, 99, 168, 0.1);
  color: var(--be-info);
}
.badge-status--closed {
  background: rgba(37, 99, 168, 0.1);
  color: var(--be-info);
}
.badge-status--cancelled {
  background: rgba(192, 57, 43, 0.1);
  color: var(--be-danger);
}
.badge-status--no-show {
  background: rgba(120, 120, 120, 0.1);
  color: #888;
}
.badge-status--rescheduled {
  background: rgba(201, 169, 110, 0.12);
  color: var(--be-gold-dark);
}
.badge-tier--basic {
  background: rgba(150, 150, 150, 0.12);
  color: #888;
}
.badge-tier--silver {
  background: rgba(140, 140, 140, 0.12);
  color: #666;
}
.badge-tier--gold {
  background: rgba(201, 169, 110, 0.14);
  color: var(--be-gold-dark);
}
.badge-tier--platinum {
  background: rgba(80, 80, 80, 0.1);
  color: #555;
}
.be-badge--info {
  background: rgba(37, 99, 168, 0.1);
  color: var(--be-info);
}
.be-badge--secondary {
  background: rgba(120, 120, 120, 0.1);
  color: #888;
}
.be-badge--success {
  background: rgba(46, 125, 82, 0.1);
  color: var(--be-success);
}
.be-badge--warning {
  background: rgba(196, 122, 0, 0.1);
  color: var(--be-warning);
}
/* ── Filter Bar ── */
.be-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--be-dark);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-lg);
}
.be-filter-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: var(--radius-lg);
  background: var(--be-surface, #1a1a1a);
  border: 1px solid var(--be-border);
  font-size: 0.85rem;
  color: var(--be-text-muted);
}
.be-filter-bar__search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 200px;
}
.be-filter-bar__search-icon {
  position: absolute;
  left: 10px;
  color: var(--be-text-muted);
  pointer-events: none;
  font-size: 0.85rem;
}
.be-filter-bar__search-input {
  padding-left: 32px;
}
.be-filter-bar__filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.be-filter-select {
  width: auto !important;
}

/* ── Modal ── */
.be-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.be-modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.be-modal {
  background: var(--be-dark);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
  transform: translateY(16px) scale(0.98);
  transition: transform var(--transition);
  overflow: hidden;
}
.be-modal-overlay.open .be-modal {
  transform: translateY(0) scale(1);
}
.be-modal--sm {
  max-width: 380px;
}
.be-modal--md {
  max-width: 540px;
}
.be-modal--lg {
  max-width: 760px;
}
.be-modal--xl {
  max-width: 1000px;
}
.be-modal__header {
  padding: 16px 22px;
  border-bottom: 1px solid var(--be-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.be-modal__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--be-white);
  margin: 0;
  font-family: var(--font-serif);
}
.be-modal__close {
  background: none;
  border: none;
  color: var(--be-text-muted);
  cursor: pointer;
  padding: 5px;
  border-radius: var(--radius-sm);
  font-size: 1.2rem;
  transition: all var(--transition);
}
.be-modal__close:hover {
  color: var(--be-text);
  background: var(--be-surface);
}
.be-modal__body {
  padding: 20px 22px;
  overflow-y: auto;
  flex: 1;
}
.be-modal__footer {
  padding: 14px 22px;
  border-top: 1px solid var(--be-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
  background: var(--be-dark-alt);
}

/* ── Toasts ── */
#toastContainer {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 340px;
  width: 100%;
}
.be-toast {
  background: var(--be-dark);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-md);
  animation: slideInRight 0.3s ease;
}
.be-toast__icon {
  flex-shrink: 0;
  font-size: 0.95rem;
}
.be-toast__msg {
  flex: 1;
  font-size: 0.83rem;
}
.be-toast__close {
  background: none;
  border: none;
  color: var(--be-text-muted);
  cursor: pointer;
  padding: 0;
  font-size: 0.9rem;
}
.be-toast--success {
  border-color: rgba(46, 125, 82, 0.3);
}
.be-toast--success .be-toast__icon {
  color: var(--be-success);
}
.be-toast--error {
  border-color: rgba(192, 57, 43, 0.3);
}
.be-toast--error .be-toast__icon {
  color: var(--be-danger);
}
.be-toast--warning {
  border-color: rgba(196, 122, 0, 0.3);
}
.be-toast--warning .be-toast__icon {
  color: var(--be-warning);
}
.be-toast--info {
  border-color: rgba(37, 99, 168, 0.3);
}
.be-toast--info .be-toast__icon {
  color: var(--be-info);
}
.be-toast.removing {
  animation: slideOutRight 0.25s ease forwards;
}

/* ── Alerts ── */
.be-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 0.84rem;
  border: 1px solid transparent;
  margin-bottom: 16px;
}
.be-alert button {
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
  opacity: 0.6;
  font-size: 1rem;
  color: inherit;
}
.be-alert--error {
  background: rgba(192, 57, 43, 0.07);
  border-color: rgba(192, 57, 43, 0.25);
  color: var(--be-danger);
}
.be-alert--success {
  background: rgba(46, 125, 82, 0.07);
  border-color: rgba(46, 125, 82, 0.25);
  color: var(--be-success);
}
.be-alert--info {
  background: rgba(37, 99, 168, 0.07);
  border-color: rgba(37, 99, 168, 0.25);
  color: var(--be-info);
}
.be-alert--warning {
  background: rgba(196, 122, 0, 0.07);
  border-color: rgba(196, 122, 0, 0.25);
  color: var(--be-warning);
}

/* ── Exchange Rates ── */
.xr-row--differs {
  background: rgba(196, 122, 0, 0.05);
}

/* ── Pagination ── */
.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}
.page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--be-border);
  background: transparent;
  color: var(--be-text-muted);
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
}
.page-btn:hover {
  background: var(--be-surface);
  color: var(--be-text);
}
.page-btn.active {
  background: var(--be-gold);
  color: #fff;
  border-color: var(--be-gold);
  font-weight: 600;
}

/* ── Empty State ── */
.be-empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--be-text-muted);
}
.be-empty-state__icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  opacity: 0.35;
  display: block;
}

/* ── Spinner ── */
.be-spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 2px solid var(--be-border);
  border-top-color: var(--be-gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.be-spinner--sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

/* ── POS pending-payment / success confirmation (pages/pos/sale.php) ── */
.pos-pending-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pos-pending-spinner span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--be-gold);
  animation: pos-pulse-dot 1.2s ease-in-out infinite both;
}
.pos-pending-spinner span:nth-child(2) {
  animation-delay: 0.15s;
}
.pos-pending-spinner span:nth-child(3) {
  animation-delay: 0.3s;
}
.pos-payment-qr {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--be-border);
}
.pos-payment-qr__code {
  display: inline-block;
  padding: 10px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--be-border);
  line-height: 0;
}
.pos-success-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(46, 125, 82, 0.12);
  color: var(--be-success);
  font-size: 1.6rem;
  animation: pos-success-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Detail Grid ── */
.be-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.be-detail-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.be-detail-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--be-text-muted);
}

/* ── Avatar ── */
.be-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--be-gold);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}
.be-avatar--sm {
  width: 28px;
  height: 28px;
  font-size: 0.65rem;
}
.be-avatar--xl {
  width: 64px;
  height: 64px;
  font-size: 1.2rem;
}

/* ── Mono / Misc ── */
.be-mono {
  font-family: monospace;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
}
.text-success {
  color: var(--be-success) !important;
}
.text-danger {
  color: var(--be-danger) !important;
}
.text-warning {
  color: var(--be-warning) !important;
}
.text-muted {
  color: var(--be-text-muted) !important;
}
.d-none {
  display: none !important;
}

/* ── Search Dropdown ── */
.be-search-dropdown {
  background: var(--be-dark);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
  display: none;
  box-shadow: var(--shadow-md);
}
.be-search-dropdown__item {
  padding: 10px 14px;
  cursor: pointer;
  transition: background var(--transition);
}
.be-search-dropdown__item:hover {
  background: var(--be-surface);
}
.be-search-dropdown__empty,
.be-search-dropdown__loading {
  padding: 12px 14px;
  color: var(--be-text-muted);
  font-size: 0.83rem;
}

/* ── Selected Item ── */
.be-selected-item {
  background: var(--be-surface);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

/* ── Booking Row ── */
.be-booking-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--be-border-sub);
  text-decoration: none;
  transition: background var(--transition);
}
.be-booking-row:hover {
  background: var(--be-surface);
}
.be-booking-row__date {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: rgba(201, 169, 110, 0.1);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--be-gold-dark);
}
.be-booking-row__day {
  font-size: 1.2rem;
  font-family: var(--font-serif);
  line-height: 1;
}
.be-booking-row__mon {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.be-booking-row__body {
  flex: 1;
  min-width: 0;
}
.be-booking-row__name {
  font-weight: 600;
  color: var(--be-white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.be-booking-row__treatment {
  font-size: 0.8rem;
  color: var(--be-text-muted);
}
.be-booking-row__meta {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.be-booking-row__amount {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--be-white);
}

/* ── Wizard ── */
.be-wizard-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 24px;
}
.be-wizard-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.83rem;
  color: var(--be-text-muted);
}
.be-wizard-step span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--be-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}
.be-wizard-step.active {
  color: var(--be-gold-dark);
}
.be-wizard-step.active span {
  border-color: var(--be-gold);
  background: var(--be-gold);
  color: #fff;
}
.be-wizard-step.done span {
  background: var(--be-success);
  border-color: var(--be-success);
  color: #fff;
}
.be-wizard-step-line {
  flex: 1;
  height: 2px;
  background: var(--be-border);
  margin: 0 8px;
}
.be-wizard-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

/* ── Treatment Grid ── */
.be-treatment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.be-treatment-card {
  padding: 14px;
  background: var(--be-surface);
  border: 2px solid var(--be-border-sub);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition);
}
.be-treatment-card:hover {
  border-color: var(--be-gold);
}
.be-treatment-card.selected {
  border-color: var(--be-gold);
  background: rgba(201, 169, 110, 0.07);
}
.be-treatment-card__name {
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 4px;
}
.be-treatment-card__meta {
  font-size: 0.76rem;
  color: var(--be-text-muted);
}
.be-treatment-card__price {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--be-gold-dark);
  margin-top: 6px;
}

/* ── Slots ── */
.be-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}
.be-slot {
  padding: 10px;
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  background: var(--be-surface);
  color: var(--be-text);
  font-size: 0.84rem;
  cursor: pointer;
  text-align: center;
  transition: all var(--transition);
}
.be-slot:hover {
  border-color: var(--be-gold);
  color: var(--be-gold-dark);
}
.be-slot.selected {
  background: var(--be-gold);
  color: #fff;
  border-color: var(--be-gold);
  font-weight: 600;
}
.be-slot--taken {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ── Addon Picker ── */
.be-addon-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition);
  width: 100%;
}
.be-addon-picker:hover {
  border-color: var(--be-gold);
}
.be-addon-picker input {
  flex-shrink: 0;
}

/* ── Summary Table ── */
.be-summary-table {
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.be-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--be-border-sub);
  font-size: 0.88rem;
}
.be-summary-row:last-child {
  border-bottom: none;
}
.be-summary-total {
  background: var(--be-surface);
  font-weight: 600;
  font-size: 0.95rem;
}

/* ── Calendar ── */
.be-calendar__header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--be-border);
}
.be-calendar__day-label {
  padding: 8px;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--be-text-muted);
}
.be-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.be-calendar__cell {
  min-height: 72px;
  border-right: 1px solid var(--be-border-sub);
  border-bottom: 1px solid var(--be-border-sub);
  padding: 6px;
  cursor: pointer;
  transition: background var(--transition);
}
.be-calendar__cell:hover {
  background: var(--be-surface);
}
.be-calendar__cell--today {
  background: rgba(201, 169, 110, 0.07);
}
.be-calendar__cell--today .be-calendar__day-num {
  color: var(--be-gold-dark);
  font-weight: 700;
}
.be-calendar__cell--blocked {
  background: rgba(192, 57, 43, 0.05);
}
.be-calendar__cell--empty {
  cursor: default;
}
.be-calendar__day-num {
  font-size: 0.82rem;
  color: var(--be-text-muted);
}
.be-calendar__event {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 3px;
}
.be-calendar__event--blocked {
  background: var(--be-danger);
}
.be-calendar__event--holiday {
  background: var(--be-warning);
}
.cal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.cal-dot--blocked {
  background: var(--be-danger);
}
.cal-dot--holiday {
  background: var(--be-warning);
}

/* ── Nav Link ── */
.be-nav-link {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  color: var(--be-text-muted);
  font-size: 0.85rem;
  text-decoration: none;
  transition: all var(--transition);
  border-bottom: 1px solid var(--be-border-sub);
}
.be-nav-link:hover {
  background: var(--be-surface);
  color: var(--be-text);
}
.be-nav-link.active {
  color: var(--be-gold-dark);
  background: rgba(201, 169, 110, 0.07);
}

/* ── Hours Grid ── */
.be-hours-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.be-hours-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.w-100px {
  width: 100px;
}

/* ── Images ── */
.be-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}
.be-image-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--be-border);
}

/* ── Animations ── */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes slideInRight {
  from {
    transform: translateX(110%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(110%);
    opacity: 0;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pos-pulse-dot {
  0%,
  80%,
  100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes pos-success-pop {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  70% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.animate-fadeIn {
  animation: fadeIn 0.3s ease;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition);
  }
  .sidebar.mobile-open {
    transform: translateX(0);
  }
  .be-main {
    margin-left: 0 !important;
  }
  .topbar {
    left: 0 !important;
  }
  :root {
    --content-p: 16px;
  }
}
@media (max-width: 640px) {
  .be-page-header {
    flex-direction: column;
  }
  .be-page-header > *:last-child:not(:only-child) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  .be-page-header > *:last-child:not(:only-child).btn,
  .be-page-header > *:last-child:not(:only-child) .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  .be-detail-grid {
    grid-template-columns: 1fr;
  }
}
/* ── Bookings Calendar ─────────────────────────────────────── */
.bk-view-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  width: fit-content;
}
.bk-view-toggle__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  font-size: 0.82rem;
  font-weight: 500;
  background: transparent;
  border: none;
  color: var(--be-text-muted);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.bk-view-toggle__btn.active {
  background: var(--be-gold);
  color: #fff;
}
.bk-view-toggle__btn:not(.active):hover {
  background: var(--be-surface);
  color: var(--be-text);
}

/* ── Calendar week nav ─────────────────────────────────────── */
.bk-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 10px;
  flex-wrap: wrap;
}
.bk-cal-nav__week {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--be-white);
  text-align: center;
  min-width: 160px;
}
.bk-cal-nav__sub {
  font-size: 0.72rem;
  color: var(--be-text-muted);
  margin-top: 1px;
}
.bk-cal-nav__count {
  font-size: 0.78rem;
  color: var(--be-text-muted);
  white-space: nowrap;
}

/* ── Mobile day strip ──────────────────────────────────────── */
.bk-day-strip {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bk-day-strip::-webkit-scrollbar {
  display: none;
}
.bk-day-chip {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--be-border-sub);
  background: var(--be-dark);
  cursor: pointer;
  transition: all var(--transition);
  min-width: 46px;
}
.bk-day-chip__name {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--be-text-muted);
}
.bk-day-chip__num {
  font-size: 1.1rem;
  font-family: var(--font-serif);
  color: var(--be-white);
  line-height: 1.2;
}
.bk-day-chip.active {
  background: var(--be-gold);
  border-color: var(--be-gold);
}
.bk-day-chip.active .bk-day-chip__name,
.bk-day-chip.active .bk-day-chip__num {
  color: #fff;
}
.bk-day-chip.today {
  border-color: var(--be-gold);
}
.bk-day-chip.today .bk-day-chip__num {
  color: var(--be-gold-dark);
  font-weight: 700;
}
.bk-day-chip.has-events::after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--be-gold);
  margin-top: 3px;
}

/* ── Mobile event list ─────────────────────────────────────── */
.bk-day-events {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bk-day-events__empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--be-text-muted);
  font-size: 0.85rem;
}

/* ── Desktop week grid ─────────────────────────────────────── */
.bk-week-grid-wrap {
  overflow: auto;
  border: 1px solid var(--be-border);
  border-radius: var(--radius-lg);
  background: var(--be-dark);
}
.bk-week-grid {
  min-width: 640px;
  position: relative;
}

/* sticky header */
.bk-wg-header {
  display: grid;
  grid-template-columns: 52px repeat(7, 1fr);
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--be-dark);
  border-bottom: 2px solid var(--be-border);
}
.bk-wg-header__time {
  padding: 8px 6px;
  font-size: 0.62rem;
  color: var(--be-text-muted);
  border-right: 1px solid var(--be-border-sub);
}
.bk-wg-header__day {
  padding: 8px 4px;
  text-align: center;
  cursor: default;
}
.bk-wg-header__day-name {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--be-text-muted);
}
.bk-wg-header__day-num {
  font-size: 1.1rem;
  font-family: var(--font-serif);
  color: var(--be-white);
  line-height: 1.2;
}
.bk-wg-header__day.today .bk-wg-header__day-num {
  color: var(--be-gold-dark);
  font-weight: 700;
}
.bk-wg-header__day.today .bk-wg-header__day-name {
  color: var(--be-gold-dark);
}

/* body */
.bk-wg-body {
  display: grid;
  grid-template-columns: 52px repeat(7, 1fr);
}
.bk-wg-times {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--be-border-sub);
}
.bk-wg-hour {
  height: 64px;
  display: flex;
  align-items: flex-start;
  padding-top: 4px;
  padding-right: 6px;
  justify-content: flex-end;
}
.bk-wg-hour span {
  font-size: 0.62rem;
  color: var(--be-text-muted);
  white-space: nowrap;
}
.bk-wg-day-col {
  position: relative;
  border-right: 1px solid var(--be-border-sub);
}
.bk-wg-day-col:last-child {
  border-right: none;
}
.bk-wg-day-col__bg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.bk-wg-hour-line {
  height: 64px;
  border-bottom: 1px solid var(--be-border-sub);
}
.bk-wg-hour-line--half::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 32px;
  border-top: 1px dashed var(--be-border-sub);
  opacity: 0.5;
}
.bk-wg-day-col__blocked {
  position: absolute;
  inset: 0;
  background: rgba(55, 65, 81, 0.07);
  border-left: 3px solid #546e7a;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  padding: 8px 6px;
}
.bk-wg-day-col__blocked span {
  font-size: 0.7rem;
  color: #546e7a;
  font-weight: 600;
}

/* ── Calendar event chips ──────────────────────────────────── */
.bk-evt {
  position: absolute;
  left: 3px;
  right: 3px;
  width: calc(100% - 6px);
  border-radius: 5px;
  overflow: hidden;
  padding: 4px 6px;
  font-size: 0.72rem;
  cursor: pointer;
  z-index: 2;
  border-left: 3px solid;
  transition:
    box-shadow var(--transition),
    filter var(--transition);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.bk-evt:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  filter: brightness(0.97);
}
.bk-evt__time {
  font-size: 0.62rem;
  font-weight: 600;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-evt__customer {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-evt__prac {
  display: flex;
  align-items: center;
  gap: 3px;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-evt__prac i {
  font-size: 0.6rem;
}
.bk-evt__title {
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* event colours — [bg, border, text] */
.bk-evt--booking-confirmed,
.bk-evt--booking-in_progress {
  background: #dbeafe;
  border-color: #1d4ed8;
  color: #1e3a8a;
}
.bk-evt--booking-pending {
  background: #fef3c7;
  border-color: #d97706;
  color: #78350f;
}
.bk-evt--booking-cancelled,
.bk-evt--booking-no_show {
  background: #fee2e2;
  border-color: #dc2626;
  color: #7f1d1d;
}
.bk-evt--booking-completed {
  background: #f0fdf4;
  border-color: #16a34a;
  color: #14532d;
}
.bk-evt--booking-rescheduled {
  background: #ede9fe;
  border-color: #7c3aed;
  color: #4c1d95;
}
.bk-evt--consultation {
  background: #e0f2fe;
  border-color: #0284c7;
  color: #0c4a6e;
}
.bk-evt--blocked {
  background: #f1f5f9;
  border-color: #475569;
  color: #1e293b;
  cursor: default;
}
.bk-evt--google_event {
  background: #dcfce7;
  border-color: #15803d;
  color: #14532d;
}

/* ── Mobile event card ─────────────────────────────────────── */
.bk-event-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--be-border);
  border-left-width: 4px;
  background: var(--be-dark);
  cursor: pointer;
  transition: box-shadow var(--transition);
}
.bk-event-card:hover {
  box-shadow: var(--shadow-md);
}
.bk-event-card--not-clickable {
  cursor: default;
}
.bk-event-card__icon {
  font-size: 1.1rem;
  margin-top: 2px;
  flex-shrink: 0;
}
.bk-event-card__body {
  flex: 1;
  min-width: 0;
}
.bk-event-card__time {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--be-text-muted);
  margin-bottom: 2px;
}
.bk-event-card__name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--be-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-event-card__sub {
  font-size: 0.78rem;
  color: var(--be-text-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.bk-event-card__prac {
  display: flex;
  align-items: center;
  gap: 3px;
}
.bk-event-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* mobile card colours */
.bk-event-card--booking-confirmed,
.bk-event-card--booking-in_progress {
  border-color: #1d4ed8;
}
.bk-event-card--booking-confirmed .bk-event-card__icon,
.bk-event-card--booking-in_progress .bk-event-card__icon {
  color: #1d4ed8;
}
.bk-event-card--booking-pending {
  border-color: #d97706;
}
.bk-event-card--booking-pending .bk-event-card__icon {
  color: #d97706;
}
.bk-event-card--booking-cancelled,
.bk-event-card--booking-no_show {
  border-color: #dc2626;
}
.bk-event-card--booking-cancelled .bk-event-card__icon,
.bk-event-card--booking-no_show .bk-event-card__icon {
  color: #dc2626;
}
.bk-event-card--booking-completed {
  border-color: #16a34a;
}
.bk-event-card--booking-completed .bk-event-card__icon {
  color: #16a34a;
}
.bk-event-card--booking-rescheduled {
  border-color: #7c3aed;
}
.bk-event-card--booking-rescheduled .bk-event-card__icon {
  color: #7c3aed;
}
.bk-event-card--consultation {
  border-color: #0284c7;
}
.bk-event-card--consultation .bk-event-card__icon {
  color: #0284c7;
}
.bk-event-card--blocked {
  border-color: #475569;
  cursor: default;
}
.bk-event-card--blocked .bk-event-card__icon {
  color: #475569;
}
.bk-event-card--google_event {
  border-color: #15803d;
}
.bk-event-card--google_event .bk-event-card__icon {
  color: #15803d;
}

/* ── Legend ────────────────────────────────────────────────── */
.bk-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 14px 16px;
  border-top: 1px solid var(--be-border);
  background: var(--be-dark-alt);
}
.bk-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--be-text-muted);
}
.bk-legend__dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.bk-legend__dot--treatment {
  background: #dbeafe;
  border: 2px solid #1d4ed8;
}
.bk-legend__dot--consultation {
  background: #e0f2fe;
  border: 2px solid #0284c7;
}
.bk-legend__dot--pending {
  background: #fef3c7;
  border: 2px solid #d97706;
}
.bk-legend__dot--cancelled {
  background: #fee2e2;
  border: 2px solid #dc2626;
}
.bk-legend__dot--completed {
  background: #f0fdf4;
  border: 2px solid #16a34a;
}
.bk-legend__dot--blocked {
  background: #f1f5f9;
  border: 2px solid #475569;
}
.bk-legend__dot--google {
  background: #dcfce7;
  border: 2px solid #15803d;
}

/* ── Loader overlay ────────────────────────────────────────── */
.bk-cal-loader {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  border-radius: var(--radius-lg);
}

/* ── Responsive ────────────────────────────────────────────── */
.bk-mobile-only {
  display: flex;
  flex-direction: column;
}
.bk-desktop-only {
  display: none;
}
@media (min-width: 768px) {
  .bk-mobile-only {
    display: none !important;
  }
  .bk-desktop-only {
    display: block !important;
  }
  .bk-wg-hour {
    height: 64px;
  }
}

.tm-layout {
  display: grid;
  grid-template-columns: 220px 380px 1fr;
  gap: 14px;
  align-items: start;
}
.tm-panel {
  background: var(--be-dark);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.tm-panel__hdr {
  padding: 12px 16px;
  border-bottom: 1px solid var(--be-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tm-panel__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--be-text-muted);
  margin: 0;
  flex: 1;
}
.tm-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background var(--transition);
  border-left: 3px solid transparent;
  position: relative;
}
.tm-list-item:hover {
  background: var(--be-surface);
}
.tm-list-item.active {
  background: rgba(201, 169, 110, 0.08);
  border-left-color: var(--be-gold);
}
.tm-list-item__label {
  flex: 1;
  font-size: 0.85rem;
  color: var(--be-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tm-list-item.active .tm-list-item__label {
  color: var(--be-gold-dark);
  font-weight: 600;
}
.tm-list-item__sub {
  font-size: 0.7rem;
  color: var(--be-text-muted);
}
.tm-list-item__actions {
  display: none;
  gap: 2px;
  flex-shrink: 0;
}
.tm-list-item:hover .tm-list-item__actions {
  display: flex;
}
.tm-drag-handle {
  color: var(--be-text-muted);
  cursor: grab;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.tm-drag-handle:active {
  cursor: grabbing;
}
.tm-dragging {
  opacity: 0.35;
}
.tm-drag-over {
  border-top: 2px solid var(--be-gold);
  background: rgba(201, 169, 110, 0.05);
}
.tm-treatment-card {
  padding: 10px 14px;
  border-bottom: 1px solid var(--be-border-sub);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  transition: background var(--transition);
}
.tm-treatment-card:hover {
  background: var(--be-surface);
}
.tm-treatment-card.selected {
  background: rgba(201, 169, 110, 0.06);
}
.tm-treatment-card:last-child {
  border-bottom: none;
}
.tm-treatment-card__body {
  flex: 1;
  min-width: 0;
}
.tm-treatment-card__name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--be-white);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.tm-treatment-card__meta {
  font-size: 0.72rem;
  color: var(--be-text-muted);
  margin-top: 3px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.tm-treatment-card__actions {
  display: none;
  gap: 3px;
  flex-shrink: 0;
}
.tm-treatment-card:hover .tm-treatment-card__actions {
  display: flex;
}
.tm-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.tm-tag--active {
  background: rgba(46, 125, 82, 0.1);
  color: #2e7d52;
}
.tm-tag--draft {
  background: rgba(150, 150, 150, 0.12);
  color: #888;
}
.tm-tag--rec {
  background: rgba(201, 169, 110, 0.12);
  color: var(--be-gold-dark);
}
.tm-tag--model {
  background: rgba(37, 99, 168, 0.1);
  color: #2563a8;
}
.tm-tag--hidden {
  background: rgba(150, 0, 0, 0.08);
  color: #b00;
}
.tm-branch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--be-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--be-border-sub);
  margin-bottom: 6px;
}
.tm-branch-row__name {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 500;
}
.tm-branch-row__price {
  font-size: 0.82rem;
  color: var(--be-gold-dark);
  font-family: var(--font-serif);
}
.tm-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--be-text-muted);
  font-size: 0.83rem;
}
.tm-empty i {
  font-size: 1.5rem;
  opacity: 0.3;
  display: block;
  margin-bottom: 8px;
}
.tm-group-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--be-border);
  scrollbar-width: none;
}
.tm-group-tabs::-webkit-scrollbar {
  display: none;
}
.tm-group-tab {
  padding: 10px 18px;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--be-text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.tm-group-tab:hover {
  color: var(--be-text);
}
.tm-group-tab.active {
  color: var(--be-gold-dark);
  border-bottom-color: var(--be-gold);
  font-weight: 600;
}
.tm-check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.tm-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tm-check-row label {
  font-size: 0.83rem;
  cursor: pointer;
  user-select: none;
}
.tm-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--be-text-muted);
  padding: 10px 14px 4px;
}
@media (max-width: 1100px) {
  .tm-layout {
    grid-template-columns: 1fr 1fr;
  }
  #detailPanel {
    grid-column: span 2;
  }
}
@media (max-width: 700px) {
  .tm-layout {
    grid-template-columns: 1fr;
  }
  #detailPanel {
    grid-column: auto;
  }
}

/* Mobile layout */
@media (max-width: 768px) {
  .tm-layout {
    grid-template-columns: 1fr !important;
  }

  #categoryList,
  #treatmentList,
  #detailContent {
    max-height: 320px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================
   RESPONSIVE + MOBILE FIXES
   All new rules are additive — nothing above is changed.
   ============================================================ */

/* ── Sidebar backdrop (mobile) ─────────────────────────────── */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 998;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sidebar-backdrop.active {
  display: block;
}

/* ── Treatment management: remove-inline-style classes ─────── */
.tm-panel__hdr--actions-wrap {
  flex-wrap: wrap;
  gap: 6px;
}
.tm-panel__actions {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}
.tm-detail-actions {
  /* hidden until a treatment is selected — JS toggles display */
}
.tm-assign-staff-btn {
  /* hidden until checkboxes are ticked — JS sets display */
  display: none;
}

/* ── Group selector dropdown ─────────────────────────────── */
.tm-group-select-wrap {
  background: var(--be-dark);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-lg);
  padding: 4px;
}

.tm-group-select-inner {
  position: relative;
  display: flex;
  align-items: center;
}

.tm-group-select-icon {
  position: absolute;
  left: 14px;
  color: var(--be-gold-dark);
  font-size: 1rem;
  pointer-events: none;
  z-index: 1;
}

.tm-group-select-chevron {
  position: absolute;
  right: 14px;
  color: var(--be-text-muted);
  font-size: 0.8rem;
  pointer-events: none;
  z-index: 1;
  transition: transform var(--transition);
}

.tm-group-select {
  width: 100%;
  padding: 11px 40px 11px 40px;
  background: var(--be-surface);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  color: var(--be-white);
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: all var(--transition);
  outline: none;
}

.tm-group-select:focus {
  border-color: var(--be-gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.14);
  background: var(--be-dark);
}

.tm-group-select:focus + .tm-group-select-chevron {
  transform: rotate(180deg);
  color: var(--be-gold-dark);
}

.tm-group-select option {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  background: var(--be-dark);
  color: var(--be-text);
}

/* ── Scrollable table wrapper ───────────────────────────────── */
.be-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
}

/* ── Make existing tables scroll on mobile ──────────────────── */
.be-card .table-responsive,
.be-card > .be-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Toasts: full-width on small screens ─────────────────────── */
@media (max-width: 480px) {
  #toastContainer {
    right: 12px;
    left: 12px;
    max-width: none;
    width: auto;
  }
}

/* ── Modals: proper padding on small screens ─────────────────── */
@media (max-width: 540px) {
  .be-modal-overlay {
    padding: 10px;
  }
  .be-modal__header {
    padding: 12px 14px;
  }
  .be-modal__body {
    padding: 14px;
  }
  .be-modal__footer {
    padding: 10px 14px;
    gap: 8px;
  }
  .be-modal__title {
    font-size: 0.88rem;
  }
}

/* ── Page titles: scale down on very small screens ──────────── */
@media (max-width: 480px) {
  .be-page-title {
    font-size: 1.4rem;
  }
  h1 {
    font-size: 1.4rem;
  }
  h2 {
    font-size: 1.2rem;
  }
}

/* ── Topbar: keep breadcrumb from overflowing ────────────────── */
@media (max-width: 640px) {
  .topbar__breadcrumb {
    max-width: 140px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* ── Filter bar: stack on phone ───────────────────────────────── */
@media (max-width: 640px) {
  .be-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .be-filter-bar__search {
    min-width: unset;
    width: 100%;
  }
  .be-filter-bar__filters {
    flex-direction: column;
    align-items: stretch;
  }
  .be-filter-select {
    width: 100% !important;
  }
  .be-filter-bar .btn {
    justify-content: center;
  }
}

/* ── Stat cards: 2-col on small screens ──────────────────────── */
@media (max-width: 640px) {
  .row .col-md-3,
  .row .col-md-4,
  .row .col-xl-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* ── Detail grid: single column on phone ─────────────────────── */
@media (max-width: 480px) {
  .be-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Treatment management: panel constraints on mobile ───────── */
@media (max-width: 1100px) {
  .tm-layout {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .tm-layout {
    grid-template-columns: 1fr !important;
  }
  #categoryList,
  #treatmentList {
    max-height: 300px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #detailContent {
    max-height: 360px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Touch targets: all buttons min 44 px tall on mobile ─────── */
@media (max-width: 768px) {
  .btn {
    min-height: 44px;
    min-width: 44px;
  }
  .btn-sm {
    min-height: 36px;
    min-width: 36px;
    padding: 7px 12px;
  }
  .tm-treatment-card__actions {
    display: flex;
  } /* always show on touch */
  .tm-list-item__actions {
    display: flex;
  }
}

/* ── Booking page calendar: mobile ───────────────────────────── */
@media (max-width: 640px) {
  .bk-cal-nav {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .bk-cal-nav__count {
    order: -1;
  }
}

/* ── Wizard steps: hide label text on phone ──────────────────── */
@media (max-width: 480px) {
  .be-wizard-step .d-none-xs {
    display: none;
  }
  .be-wizard-step-line {
    margin: 0 4px;
  }
}

/* ── Prevent body horizontal scroll ─────────────────────────── */
body {
  overflow-x: hidden;
}

/* ── Treatment management: classes that replace old inline styles ── */
.tm-detail-section {
  padding: 0 14px 10px;
}

.tm-muted-note {
  font-size: 0.8rem;
  color: var(--be-text-muted);
  margin: 0;
}

.tm-staff-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--be-border-sub);
}
.tm-staff-row:last-child {
  border-bottom: none;
}
.tm-staff-row__name {
  flex: 1;
  font-size: 0.83rem;
}

.tm-prac-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--be-border-sub);
}
.tm-prac-row:last-child {
  border-bottom: none;
}
.tm-prac-label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  cursor: pointer;
}
.tm-prac-label__name {
  font-size: 0.85rem;
  font-weight: 600;
}
.tm-prac-label__branch {
  font-size: 0.72rem;
  color: var(--be-text-muted);
}

.tm-price-input {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tm-price-input__symbol {
  font-size: 1rem;
  color: var(--be-text-muted);
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.tm-cat-inactive {
  opacity: 0.45;
  font-style: italic;
}
.tm-cat-inactive-icon {
  font-size: 0.72rem;
  color: var(--be-text-muted);
  margin-left: 5px;
  vertical-align: middle;
}

.tm-treatment-toolbar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0;
}
.tm-toolbar-row--top {
  display: flex;
  align-items: center;
}
.tm-toolbar-row--actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tm-toolbar-action-btn {
  width: 100%;
  text-align: left;
}

/* ── Staff / User Management ─────────────────────────────────── */

.um-filters-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.um-search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
}

.um-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--be-text-muted, #888);
  pointer-events: none;
}

.um-search-input {
  padding-left: 32px !important;
}

.um-filter-select {
  min-width: 150px;
  max-width: 200px;
}

/* Staff cards */
#staffList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.um-staff-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--be-surface, #fff);
  border: 1px solid var(--be-border, #e5e7eb);
  border-radius: 8px;
  transition: box-shadow 0.15s;
}

.um-staff-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

.um-staff-card__body {
  flex: 1;
  min-width: 0;
}

.um-staff-card__name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--be-text, #111);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.um-staff-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--be-text-muted, #666);
}

.um-staff-card__meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.um-staff-card__actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.um-kebab {
  position: relative;
  flex-shrink: 0;
}

.um-kebab__btn {
  color: var(--be-text-muted);
}

.um-kebab__menu {
  display: none;
  position: fixed;
  min-width: 190px;
  background: var(--be-dark);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 500;
  overflow: hidden;
}

.um-kebab__menu.open {
  display: block;
}

.um-kebab__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--be-border-sub);
  font-size: 0.84rem;
  color: var(--be-text);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition);
}

.um-kebab__item:last-child {
  border-bottom: none;
}

.um-kebab__item:hover {
  background: var(--be-surface);
}

.um-kebab__item--reset {
  color: var(--be-info);
}

.um-kebab__item--reset:hover {
  background: rgba(37, 99, 168, 0.06);
}

.tm-prac-row--assigned {
  opacity: 0.7;
}

.tm-prac-row--assigned .form-check-input:disabled {
  cursor: not-allowed;
}

.tm-prac-assigned-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: rgba(201, 169, 110, 0.15);
  color: var(--be-gold-dark);
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 5px;
  vertical-align: middle;
}

/** Practitioner page specific **/
/* ── Combobox ────────────────────────────────────────────────── */
.prac-combobox {
  position: relative;
}

.prac-combobox__trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--be-dark);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition);
}

.prac-combobox__trigger.open {
  border-color: var(--be-gold);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.12);
}

.prac-combobox__person-icon {
  color: var(--be-gold-dark);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.prac-combobox__input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--be-white);
  font-family: var(--font-serif);
  font-size: 1rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  min-width: 0;
}

.prac-combobox__input::placeholder {
  color: var(--be-text-muted);
  font-family: var(--font-ui);
  font-size: 0.88rem;
}

.prac-combobox__chevron {
  color: var(--be-text-muted);
  font-size: 0.9rem;
  transition: transform var(--transition);
  flex-shrink: 0;
  pointer-events: none;
}

.prac-combobox__chevron.open {
  transform: rotate(180deg);
  color: var(--be-gold-dark);
}

.prac-combobox__dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 200;
  background: var(--be-dark);
  border: 1px solid var(--be-gold);
  border-top: none;
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  max-height: 300px;
  overflow-y: auto;
  display: none;
  -webkit-overflow-scrolling: touch;
}

.prac-combobox__dropdown.open {
  display: block;
}

.prac-combobox__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--be-border-sub);
  transition: background var(--transition);
}

.prac-combobox__item:last-child {
  border-bottom: none;
}

.prac-combobox__item:hover {
  background: var(--be-surface);
}

.prac-combobox__item.active {
  background: rgba(201, 169, 110, 0.09);
}

.prac-combobox__item-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--be-gold);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

.prac-combobox__item-info {
  flex: 1;
  min-width: 0;
}

.prac-combobox__item-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--be-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prac-combobox__item-branch {
  font-size: 0.72rem;
  color: var(--be-text-muted);
}

.prac-combobox__empty {
  padding: 14px;
  text-align: center;
  color: var(--be-text-muted);
  font-size: 0.83rem;
}

/* ── Practitioner header ─────────────────────────────────────── */
.prac-hdr {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.prac-hdr__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--be-gold);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
}

.prac-hdr__body {
  flex: 1;
  min-width: 0;
}

.prac-hdr__name {
  font-size: 1.25rem;
  font-family: var(--font-serif);
  color: var(--be-white);
  margin: 0 0 4px;
}

.prac-hdr__meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.76rem;
  color: var(--be-text-muted);
}

/* ── Tabs ────────────────────────────────────────────────────── */
.prac-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.prac-tabs::-webkit-scrollbar {
  display: none;
}

.prac-tab {
  flex-shrink: 0;
  padding: 11px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--be-text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}

.prac-tab:hover {
  color: var(--be-text);
}

.prac-tab.active {
  color: var(--be-gold-dark);
  border-bottom-color: var(--be-gold);
  font-weight: 600;
}

/* ── Toggle switch ───────────────────────────────────────────── */
.prac-toggle {
  position: relative;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
  display: inline-block;
  cursor: pointer;
}

.prac-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.prac-toggle__slider {
  position: absolute;
  inset: 0;
  background: var(--be-surface-2);
  border-radius: 999px;
  transition: 0.25s;
}

.prac-toggle__slider::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: 0.25s;
}

.prac-toggle input:checked + .prac-toggle__slider {
  background: var(--be-gold);
}

.prac-toggle input:checked + .prac-toggle__slider::before {
  transform: translateX(20px);
}

/* ── Setting row ─────────────────────────────────────────────── */
.prac-setting-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--be-border-sub);
}

.prac-setting-row__body {
  flex: 1;
}

.prac-setting-row__label {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--be-white);
}

.prac-setting-row__desc {
  font-size: 0.75rem;
  color: var(--be-text-muted);
  margin-top: 2px;
}

/* ── Calendar events ─────────────────────────────────────────── */
.prac-event {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--be-border-sub);
}

.prac-event:last-child {
  border-bottom: none;
}

.prac-event__date {
  width: 52px;
  flex-shrink: 0;
  text-align: center;
  background: rgba(201, 169, 110, 0.1);
  border-radius: var(--radius-md);
  padding: 6px 4px;
}

.prac-event__dname {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--be-text-muted);
}

.prac-event__dnum {
  font-size: 1.2rem;
  font-family: var(--font-serif);
  color: var(--be-gold-dark);
  line-height: 1.1;
}

.prac-event__time {
  font-size: 0.64rem;
  color: var(--be-text-muted);
}

.prac-event__body {
  flex: 1;
  min-width: 0;
}

.prac-event__customer {
  font-weight: 600;
  font-size: 0.85rem;
}

.prac-event__treatment {
  font-size: 0.76rem;
  color: var(--be-text-muted);
}

/* ── Working hours ───────────────────────────────────────────── */
.prac-hours-grid {
  display: flex;
  flex-direction: column;
}

.prac-hours-day {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--be-border-sub);
  flex-wrap: wrap;
}

.prac-hours-day:last-child {
  border-bottom: none;
}

.prac-hours-day__lbl {
  width: 88px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.prac-hours-day__lbl span {
  font-size: 0.83rem;
}

.prac-hours-day__times {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 180px;
}

.prac-hours-day__times--off {
  opacity: 0.35;
  pointer-events: none;
}

.prac-hours-day__times .be-form-control {
  padding: 6px 8px;
  font-size: 0.83rem;
}

/* ── Commission cards ────────────────────────────────────────── */
.prac-comm-card {
  background: var(--be-dark-alt);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 10px;
}

.prac-comm-card:last-child {
  margin-bottom: 0;
}

/* ── Treatments ──────────────────────────────────────────────── */
.prac-tx-group {
  margin-bottom: 16px;
}

.prac-tx-group__hdr {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--be-text-muted);
  margin-bottom: 8px;
}

.prac-tx-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--be-surface);
  border-radius: var(--radius-md);
  margin-bottom: 4px;
  font-size: 0.84rem;
}

/* ── Payments ────────────────────────────────────────────────── */
.prac-pay-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--be-border-sub);
  flex-wrap: wrap;
}

.prac-pay-row:last-child {
  border-bottom: none;
}

.prac-pay-row__date {
  font-size: 0.76rem;
  color: var(--be-text-muted);
  flex-shrink: 0;
  min-width: 72px;
}

.prac-pay-row__desc {
  flex: 1;
  font-size: 0.84rem;
}

.prac-pay-row__amt {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--be-white);
}

.prac-pay-total {
  font-size: 0.82rem;
  color: var(--be-text-muted);
}

/* ── Section layout ──────────────────────────────────────────── */
.prac-section {
  margin-bottom: 24px;
}

.prac-section:last-child {
  margin-bottom: 0;
}

.prac-section__hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.prac-section__title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--be-white);
  margin: 0;
}

.prac-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--be-text-muted);
}

.prac-empty i {
  font-size: 1.6rem;
  opacity: 0.3;
  display: block;
  margin-bottom: 8px;
}

.prac-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px;
}

/* ── End of practitioner styles ─────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════
   BeCombobox — reusable searchable dropdown component
   Same visual language as .prac-combobox but generic.
   ════════════════════════════════════════════════════════════ */
.be-combobox {
  position: relative;
}

.be-combobox__trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--be-dark);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition);
}
.be-combobox__trigger.open {
  border-color: var(--be-gold);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.12);
}
.be-combobox__trigger--disabled {
  opacity: 0.5;
  pointer-events: none;
}
.be-combobox__icon {
  color: var(--be-gold-dark);
  font-size: 1rem;
  flex-shrink: 0;
}
.be-combobox__input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--be-white);
  font-family: var(--font-serif);
  font-size: 1rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  min-width: 0;
}
.be-combobox__input::placeholder {
  color: var(--be-text-muted);
  font-family: var(--font-ui);
  font-size: 0.88rem;
}
.be-combobox__chevron {
  color: var(--be-text-muted);
  font-size: 0.9rem;
  transition: transform var(--transition);
  flex-shrink: 0;
  pointer-events: none;
}
.be-combobox__chevron.open {
  transform: rotate(180deg);
  color: var(--be-gold-dark);
}
.be-combobox__dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 300;
  background: var(--be-dark);
  border: 1px solid var(--be-gold);
  border-top: none;
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  max-height: 300px;
  overflow-y: auto;
  display: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.be-combobox__dropdown.open {
  display: block;
}

.be-combobox__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--be-border-sub);
  transition: background var(--transition);
}
.be-combobox__item:last-child {
  border-bottom: none;
}
.be-combobox__item:hover {
  background: var(--be-surface);
}
.be-combobox__item.active {
  background: rgba(201, 169, 110, 0.09);
}

.be-combobox__item-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--be-gold);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.be-combobox__item-info {
  flex: 1;
  min-width: 0;
}
.be-combobox__item-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--be-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.be-combobox__item-sublabel {
  font-size: 0.72rem;
  color: var(--be-text-muted);
}
.be-combobox__empty {
  padding: 14px;
  text-align: center;
  color: var(--be-text-muted);
  font-size: 0.83rem;
}

/* ════════════════════════════════════════════════════════════
   BeAccordion — collapsible sections
   ════════════════════════════════════════════════════════════ */
.be-accordion {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.be-accordion__item {
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.be-accordion__btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--be-dark-alt);
  border: none;
  cursor: pointer;
  transition: background var(--transition);
  text-align: left;
}
.be-accordion__btn:hover {
  background: var(--be-surface);
}
.be-accordion__btn.open {
  background: rgba(201, 169, 110, 0.07);
}
.be-accordion__title {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--be-white);
}
.be-accordion__btn.open .be-accordion__title {
  color: var(--be-gold-dark);
}
.be-accordion__chevron {
  color: var(--be-text-muted);
  font-size: 0.8rem;
  transition: transform var(--transition);
  flex-shrink: 0;
}
.be-accordion__btn.open .be-accordion__chevron {
  transform: rotate(180deg);
  color: var(--be-gold-dark);
}
.be-accordion__body {
  display: none;
  border-top: 1px solid var(--be-border);
}
.be-accordion__body.open {
  display: block;
}
.be-accordion__body-inner {
  padding: 14px;
}

/* ── Practitioner mini calendar ──────────────────────────── */
.prac-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.prac-cal-month {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--be-white);
}
.prac-cal-grid {
  width: 100%;
}
.prac-cal-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.prac-cal-day-label {
  text-align: center;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--be-text-muted);
  padding: 4px 0;
}
.prac-cal-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.prac-cal-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 2px;
  border-radius: var(--radius-sm);
  min-height: 36px;
  cursor: default;
}
.prac-cal-cell--empty {
  background: transparent;
}
.prac-cal-cell--today .prac-cal-day-num {
  background: var(--be-gold);
  color: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prac-cal-day-num {
  font-size: 0.78rem;
  color: var(--be-text);
  line-height: 24px;
  width: 24px;
  text-align: center;
}
.prac-cal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--be-gold);
  margin-top: 2px;
}
.prac-cal-cell--has-events {
  background: rgba(201, 169, 110, 0.06);
}

/* ════════════════════════════════════════════════════════════
   Treatment Management — Group & Routing enhancements
   ════════════════════════════════════════════════════════════ */

/* ── Group metadata badges ───────────────────────────────── */
.tm-group-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.tm-group-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(201, 169, 110, 0.12);
  color: var(--be-gold-dark);
  border: 1px solid rgba(201, 169, 110, 0.25);
  white-space: nowrap;
}
.tm-group-badge--warn {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.2);
}

/* ── Group action buttons row ────────────────────────────── */
.tm-group-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ── Routing modal rows ──────────────────────────────────── */
.tm-route-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
  background: var(--be-surface);
  gap: 10px;
}
.tm-route-row__info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  font-size: 0.84rem;
}
.tm-route-row__scope {
  font-weight: 600;
  color: var(--be-white);
}
.tm-route-row__url {
  font-size: 0.72rem;
  color: var(--be-text-muted);
  word-break: break-all;
}
.tm-route-row__actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.tm-route-form {
  background: var(--be-dark-alt);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 12px;
}
.tm-route-form__title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--be-text-muted);
  margin-bottom: 14px;
}

/* ── Quill rich-text editor ──────────────────────────────── */
.tm-quill-wrap .ql-toolbar.ql-snow {
  border: 1px solid var(--be-border);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--be-surface);
}
.tm-quill-wrap .ql-container.ql-snow {
  border: 1px solid var(--be-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--be-dark);
  min-height: 140px;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--be-text);
}
.tm-quill-wrap .ql-editor {
  min-height: 140px;
  color: var(--be-text);
}
.tm-quill-wrap .ql-editor.ql-blank::before {
  color: var(--be-text-muted);
  font-style: italic;
}
.tm-quill-wrap .ql-snow .ql-stroke {
  stroke: var(--be-text-muted);
}
.tm-quill-wrap .ql-snow .ql-fill {
  fill: var(--be-text-muted);
}
.tm-quill-wrap .ql-snow .ql-picker {
  color: var(--be-text-muted);
}
.tm-quill-wrap .ql-snow .ql-picker-options {
  background: var(--be-dark);
  border-color: var(--be-border);
}

/* ── Tag picker (consent forms / aftercare docs) ─────────── */
.tm-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  background: var(--be-surface);
}
.tm-tag-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(201, 169, 110, 0.12);
  border: 1px solid rgba(201, 169, 110, 0.25);
  color: var(--be-gold-dark);
  font-size: 0.78rem;
  font-weight: 600;
}
.tm-tag-remove {
  background: none;
  border: none;
  color: var(--be-text-muted);
  cursor: pointer;
  padding: 0 2px;
  font-size: 0.9rem;
  line-height: 1;
  transition: color var(--transition);
}
.tm-tag-remove:hover {
  color: #ef4444;
}

/* ── Category edit button (full width, below combobox) ────── */
.tm-cat-edit-btn {
  width: 100%;
  margin-top: 8px;
  justify-content: center;
}

/* ── Settings two-pane layout ──────────────────────────────── */
.st-page-card {
  overflow: hidden;
  padding: 0;
}

.st-mobile-nav {
  display: block;
  padding: 14px;
  border-bottom: 1px solid var(--be-border);
}

.st-left-nav {
  display: none;
}

.st-body {
  display: block;
}

@media (min-width: 768px) {
  .st-mobile-nav {
    display: none;
  }

  .st-body {
    display: flex;
    min-height: 500px;
  }

  .st-left-nav {
    display: flex;
    flex-direction: column;
    width: 210px;
    flex-shrink: 0;
    border-right: 1px solid var(--be-border);
  }
}

.st-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  color: var(--be-text-muted);
  font-size: 0.87rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: all var(--transition);
}

.st-nav-item:hover {
  background: var(--be-surface);
  color: var(--be-text);
}

.st-nav-item.active {
  border-left-color: var(--be-gold);
  background: rgba(201, 169, 110, 0.08);
  color: var(--be-gold-dark);
  font-weight: 600;
}

.st-nav-item i {
  font-size: 0.95rem;
  flex-shrink: 0;
}

.st-detail {
  flex: 1;
  min-width: 0;
}

.st-section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--be-border);
  background: var(--be-dark-alt);
}

.st-section-hdr__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--be-white);
  margin: 0;
}

.st-section-hdr__title i {
  color: var(--be-gold-dark);
}

.st-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--be-border-sub);
  min-height: 62px;
}

.st-row:last-child {
  border-bottom: none;
}

.st-row__info {
  flex: 1;
  min-width: 0;
}

.st-row__label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--be-white);
  line-height: 1.3;
}

.st-row__desc {
  font-size: 0.72rem;
  color: var(--be-text-muted);
  margin-top: 3px;
  line-height: 1.4;
}

.st-row__key {
  font-size: 0.65rem;
  font-family: monospace;
  color: var(--be-text-muted);
  opacity: 0.6;
  margin-top: 2px;
}

.st-row__ctrl {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.st-ctrl {
  display: flex;
  align-items: center;
  gap: 6px;
}

.st-ctrl .be-form-control {
  width: 80px;
  text-align: right;
  padding: 7px 8px;
  font-size: 0.9rem;
}

.st-ctrl--pre .be-form-control {
  width: 90px;
}

.st-unit {
  font-size: 0.75rem;
  color: var(--be-text-muted);
  flex-shrink: 0;
  font-weight: 500;
}

.st-tier-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--be-border-sub);
}

.st-tier-block:last-child {
  border-bottom: none;
}

.st-tier-name {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 2px;
}

.st-tier-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.st-tier-field__lbl {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--be-text-muted);
  font-weight: 600;
}

.st-tier--basic {
  color: var(--be-text-muted);
}

.st-tier--silver {
  color: #a8b8c8;
}

.st-tier--gold {
  color: var(--be-gold-dark);
}

.st-tier--platinum {
  color: #b08dd0;
}

@media (max-width: 380px) {
  .st-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .st-ctrl .be-form-control {
    width: 100%;
  }
}

/* ── Treatment cards ──────────────────────────────────────── */
.tx-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tx-card {
  background: var(--be-dark);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.tx-card__hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}
.tx-card__info {
  flex: 1;
  min-width: 0;
}
.tx-card__name {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--be-white);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tx-card__cat {
  font-size: 0.76rem;
  color: var(--be-text-muted);
  margin-top: 3px;
}
.tx-card__badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Price strip */
.tx-card__prices {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--be-border-sub);
  border-bottom: 1px solid var(--be-border-sub);
  background: var(--be-dark-alt);
}
.tx-price {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  border-right: 1px solid var(--be-border-sub);
}
.tx-price:last-child {
  border-right: none;
}
.tx-price__label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--be-text-muted);
  font-weight: 700;
}
.tx-price__value {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--be-white);
  font-weight: 600;
}
.tx-price__value--none {
  color: var(--be-text-muted);
  font-size: 0.84rem;
  font-family: var(--font-ui);
}

/* Feature tags */
.tx-card__attrs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 10px 16px;
}
.tx-attr {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.tx-attr--yes {
  background: #15d57c;
  color: #fff;
  border: 1px solid rgba(201, 169, 110, 0.2);
}
.tx-attr--no {
  background: var(--be-surface);
  color: var(--be-text-muted);
  border: 1px solid var(--be-border-sub);
}
.tx-attr i {
  font-size: 0.72rem;
}

/* Card footer */
.tx-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--be-border-sub);
  gap: 12px;
}
.tx-meta {
  font-size: 0.76rem;
  color: var(--be-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Practitioner avatar stack ────────────────────────────── */
.tx-staff-group {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: opacity var(--transition);
}
.tx-staff-group:hover .tx-staff-bubbles {
  opacity: 0.85;
}

.tx-staff-bubbles {
  display: flex;
  align-items: center;
}

.tx-prac-bubble {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.58rem;
  font-weight: 800;
  color: #fff;
  border: 2px solid var(--be-dark); /* gap between overlapping circles */
  flex-shrink: 0;
  letter-spacing: -0.01em;
  margin-left: -7px;
  transition: transform var(--transition);
}
.tx-prac-bubble:first-child {
  margin-left: 0;
}
.tx-staff-group:hover .tx-prac-bubble {
  transform: translateY(-1px);
}

.tx-prac-more {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.58rem;
  font-weight: 800;
  color: var(--be-text-muted);
  background: var(--be-surface-2);
  border: 2px solid var(--be-dark);
  margin-left: -7px;
  flex-shrink: 0;
}

.tx-staff-label {
  font-size: 0.74rem;
  color: var(--be-text-muted);
  font-weight: 500;
  white-space: nowrap;
}
.tx-staff-group:hover .tx-staff-label {
  color: var(--be-gold-dark);
}

.tx-staff-empty {
  font-size: 0.74rem;
  color: var(--be-text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 0.5;
}

/* Staff modal list */
.tx-staff-modal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--be-border-sub);
}
.tx-staff-modal-row:last-child {
  border-bottom: none;
}
.tx-staff-modal-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--be-white);
}
.tx-staff-modal-branch {
  font-size: 0.72rem;
  color: var(--be-text-muted);
}

/* Filter bar */
.tx-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  align-items: center;
}
.tx-filters .be-form-select {
  min-width: 130px;
  flex: 1 1 130px;
  max-width: 220px;
}

/* Empty state */
.tx-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--be-text-muted);
}
.tx-empty i {
  font-size: 2rem;
  opacity: 0.25;
  display: block;
  margin-bottom: 10px;
}

.cf-page-card {
  overflow: hidden;
  padding: 0;
}

/* Tab strip (reuses prac-tab pattern) */
.cf-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--be-border);
  background: var(--be-dark-alt);
}

.cf-tabs::-webkit-scrollbar {
  display: none;
}

.cf-tab {
  flex-shrink: 0;
  padding: 12px 18px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--be-text-muted);
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition);
  white-space: nowrap;
}

.cf-tab:hover {
  color: var(--be-text);
}

.cf-tab.active {
  color: var(--be-gold-dark);
  border-bottom-color: var(--be-gold);
  font-weight: 600;
}

/* Pane header */
.cf-pane-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--be-border);
}

.cf-pane-hdr__title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--be-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* ── Consent form list ───────────────────────────────────── */
.cf-form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 18px;
  border-bottom: 1px solid var(--be-border-sub);
}

.cf-form-row:last-child {
  border-bottom: none;
}

.cf-form-row__info {
  flex: 1;
  min-width: 0;
}

.cf-form-row__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--be-white);
}

.cf-form-row__meta {
  font-size: 0.72rem;
  color: var(--be-text-muted);
  margin-top: 2px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Aftercare PDF grid ──────────────────────────────────── */
.cf-ac-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  padding: 16px 18px;
}

.cf-ac-card {
  background: var(--be-dark-alt);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cf-ac-card__hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--be-border-sub);
  gap: 6px;
}

.cf-ac-card__name {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--be-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.cf-ac-card__body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 10px;
}

.cf-ac-pdf-icon {
  font-size: 2.4rem;
  color: var(--be-gold);
  opacity: 0.85;
}

/* ── Disclaimer list ─────────────────────────────────────── */
.cf-disc-row {
  padding: 14px 18px;
  border-bottom: 1px solid var(--be-border-sub);
}

.cf-disc-row:last-child {
  border-bottom: none;
}

.cf-disc-row__hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.cf-disc-row__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--be-white);
  flex: 1;
}

.cf-disc-row__preview {
  font-size: 0.76rem;
  color: var(--be-text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Question grid ───────────────────────────────────────── */
.cf-q-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  padding: 16px 18px;
}

.cf-q-card {
  background: var(--be-dark-alt);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cf-q-card__text {
  font-size: 0.82rem;
  color: var(--be-text);
  line-height: 1.5;
  flex: 1;
}

.cf-q-card__actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

/* Quill overrides (same as treatment-management page) */
.cf-quill-wrap .ql-toolbar.ql-snow {
  border: 1px solid var(--be-border);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--be-surface);
}

.cf-quill-wrap .ql-container.ql-snow {
  border: 1px solid var(--be-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--be-dark);
  min-height: 140px;
  font-size: 0.88rem;
  color: var(--be-text);
}

.cf-quill-wrap .ql-editor {
  min-height: 140px;
  color: var(--be-text);
}

.cf-quill-wrap .ql-snow .ql-stroke {
  stroke: var(--be-text-muted);
}

.cf-quill-wrap .ql-snow .ql-fill {
  fill: var(--be-text-muted);
}

.cf-quill-wrap .ql-snow .ql-picker {
  color: var(--be-text-muted);
}

/* Empty state */
.cf-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--be-text-muted);
}

.cf-empty i {
  font-size: 1.8rem;
  opacity: 0.25;
  display: block;
  margin-bottom: 8px;
}

/* File upload button */
.cf-file-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px dashed var(--be-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.84rem;
  color: var(--be-text-muted);
  transition: all var(--transition);
}

.cf-file-label:hover {
  border-color: var(--be-gold);
  color: var(--be-gold-dark);
}

/* ── Customer profile page ────────────────────────────────── */

/* Profile header card */
.cv-profile {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.cv-profile__meta {
  flex: 1;
  min-width: 0;
}

.cv-profile__name {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--be-white);
  margin: 0 0 3px;
}

.cv-profile__email {
  font-size: 0.78rem;
  color: var(--be-text-muted);
  word-break: break-all;
}

.cv-profile__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.cv-profile__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Stats strip */
.cv-stats {
  display: flex;
  border-top: 1px solid var(--be-border);
  margin-top: 16px;
}

.cv-stat {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  border-right: 1px solid var(--be-border);
}

.cv-stat:last-child {
  border-right: none;
}

.cv-stat__value {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--be-white);
}

.cv-stat__label {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--be-text-muted);
  margin-top: 2px;
}

/* Tabs (reuse prac-tab pattern) */
.cv-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--be-border);
}

.cv-tabs::-webkit-scrollbar {
  display: none;
}

.cv-tab {
  flex-shrink: 0;
  padding: 12px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--be-text-muted);
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition);
}

.cv-tab:hover {
  color: var(--be-text);
}

.cv-tab.active {
  color: var(--be-gold-dark);
  border-bottom-color: var(--be-gold);
  font-weight: 600;
}

.cv-tab-badge {
  font-size: 0.62rem;
  background: var(--be-surface-2);
  color: var(--be-text-muted);
  padding: 1px 5px;
  border-radius: 999px;
}

.cv-tab.active .cv-tab-badge {
  background: rgba(201, 169, 110, 0.15);
  color: var(--be-gold-dark);
}

/* Pane header */
.cv-pane-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--be-border);
}

.cv-pane-hdr__title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--be-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* ── Tab 1: Overview ──────────────────────────────────────── */
.cv-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 11px 16px;
  border-bottom: 1px solid var(--be-border-sub);
  gap: 12px;
}

.cv-detail-row:last-child {
  border-bottom: none;
}

.cv-detail-label {
  font-size: 0.76rem;
  color: var(--be-text-muted);
  flex-shrink: 0;
}

.cv-detail-value {
  font-size: 0.86rem;
  color: var(--be-white);
  text-align: right;
  word-break: break-word;
}

.cv-spend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 1px solid var(--be-border-sub);
}

.cv-spend-row:last-child {
  border-bottom: none;
}

.cv-spend-country {
  font-size: 0.8rem;
  color: var(--be-text-muted);
}

.cv-spend-amount {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--be-white);
  font-weight: 600;
}

.cv-coupon-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
}

.cv-coupon {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  background: var(--be-dark-alt);
}

.cv-coupon__code {
  font-size: 0.72rem;
  font-family: monospace;
  color: var(--be-gold-dark);
  font-weight: 700;
}

.cv-coupon__value {
  font-size: 0.68rem;
  color: var(--be-text-muted);
}

.cv-redeemed-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 16px;
  border-bottom: 1px solid var(--be-border-sub);
  flex-wrap: wrap;
}

.cv-redeemed-row:last-child {
  border-bottom: none;
}

.cv-redeemed-ref {
  font-size: 0.8rem;
  font-family: monospace;
  color: var(--be-text-muted);
}

.cv-redeemed-date {
  font-size: 0.72rem;
  color: var(--be-text-muted);
  margin-left: auto;
}

/* ── Tab 2: Bookings ──────────────────────────────────────── */
.cv-booking-card {
  padding: 12px 16px;
  border-bottom: 1px solid var(--be-border-sub);
}

.cv-booking-card:last-child {
  border-bottom: none;
}

.cv-booking-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.cv-booking-ref {
  font-size: 0.76rem;
  font-family: monospace;
  color: var(--be-text-muted);
  background: var(--be-surface);
  padding: 2px 7px;
  border-radius: var(--radius-sm);
}

.cv-booking-service {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--be-white);
  margin-bottom: 4px;
}

.cv-booking-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.74rem;
  color: var(--be-text-muted);
}

.cv-booking-meta i {
  margin-right: 3px;
}

/* ── Tab 3: Messages ──────────────────────────────────────── */
.cv-thread {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 420px;
  overflow-y: auto;
}

.cv-msg {
  display: flex;
  flex-direction: column;
  max-width: 78%;
}

.cv-msg--admin {
  align-self: flex-end;
  align-items: flex-end;
}

.cv-msg--customer {
  align-self: flex-start;
  align-items: flex-start;
}

.cv-msg__bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.85rem;
  line-height: 1.5;
}

.cv-msg--customer .cv-msg__bubble {
  background: var(--be-surface);
  color: var(--be-text);
  border-bottom-left-radius: 4px;
}

.cv-msg--admin .cv-msg__bubble {
  background: var(--be-gold);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.cv-msg__meta {
  font-size: 0.65rem;
  color: var(--be-text-muted);
  margin-top: 3px;
}

.cv-compose {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--be-border);
}

.cv-compose__input {
  flex: 1;
  resize: none;
  min-height: 42px;
  max-height: 120px;
}

/* ── Tab 4: Notes ─────────────────────────────────────────── */
.cv-note {
  padding: 13px 16px;
  border-bottom: 1px solid var(--be-border-sub);
}

.cv-note:last-child {
  border-bottom: none;
}

.cv-note__meta {
  font-size: 0.7rem;
  color: var(--be-text-muted);
  margin-bottom: 5px;
  display: flex;
  gap: 8px;
}

.cv-note__text {
  font-size: 0.86rem;
  color: var(--be-text);
  line-height: 1.6;
}

/* empty state */
.cv-empty {
  text-align: center;
  padding: 36px 16px;
  color: var(--be-text-muted);
}

.cv-empty i {
  font-size: 1.8rem;
  opacity: 0.2;
  display: block;
  margin-bottom: 8px;
}

/* section sub-label */
.cv-section-lbl {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--be-text-muted);
  padding: 10px 16px 4px;
}

/* ── Month calendar ──────────────────────────────────────────── */
.bk-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.bk-cal-nav__month {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--be-white);
}

.bk-cal-wrap {
  border-radius: var(--radius-lg);
  border: 1px solid var(--be-border);
  overflow: hidden;
  background: var(--be-dark);
}

.bk-cal-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--be-dark-alt);
  border-bottom: 1px solid var(--be-border);
}
.bk-cal-head__day {
  padding: 8px 4px;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--be-text-muted);
}

.bk-cal-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.bk-cal-cell {
  border-right: 1px solid var(--be-border-sub);
  border-bottom: 1px solid var(--be-border-sub);
  padding: 4px;
  min-height: 110px;
  transition: background var(--transition);
}
.bk-cal-cell:nth-child(7n) {
  border-right: none;
}
.bk-cal-cell--other {
  opacity: 0.35;
}
.bk-cal-cell--today .bk-cal-cell__num span {
  background: var(--be-gold);
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bk-cal-cell__num {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--be-text);
  margin-bottom: 3px;
}

.bk-cal-evt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px 5px 3px 7px;
  border-radius: 3px;
  margin-bottom: 2px;
  border-left: 3px solid transparent;
  cursor: pointer;
  font-size: 10px;
  line-height: 1.3;
  overflow: hidden;
  transition: filter 0.1s;
}
.bk-cal-evt:hover {
  filter: brightness(0.92);
}
.bk-cal-evt__time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-weight: 700;
  opacity: 0.85;
  white-space: nowrap;
}
.bk-cal-evt__ref {
  font-family: monospace;
  font-size: 9px;
  opacity: 0.75;
}
.bk-cal-evt__name {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10.5px;
}
.bk-cal-evt__prac {
  font-size: 9.5px;
  opacity: 0.7;
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  overflow: hidden;
}
.bk-cal-evt__prac i {
  font-size: 8px;
}
.bk-cal-more {
  display: block;
  background: none;
  border: none;
  padding: 1px 4px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--be-text-muted);
  cursor: pointer;
  text-align: left;
}
.bk-cal-more:hover {
  color: var(--be-gold-dark);
}

/* Legend */
.bk-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 10px 14px;
  border-top: 1px solid var(--be-border);
  background: var(--be-dark-alt);
}
.bk-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: var(--be-text-muted);
}
.bk-legend__dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Modal cards */
.bk-modal-card {
  padding: 10px 12px 10px 14px;
  border-radius: 5px;
  margin-bottom: 8px;
  border-left: 4px solid transparent;
  cursor: pointer;
  transition: filter 0.1s;
}
.bk-modal-card:last-child {
  margin-bottom: 0;
}
.bk-modal-card:hover {
  filter: brightness(0.93);
}
.bk-modal-card__time {
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.8;
  margin-bottom: 2px;
}
.bk-modal-card__name {
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 3px;
}
.bk-modal-card__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bk-modal-card__ref {
  font-family: monospace;
  font-size: 0.72rem;
  opacity: 0.7;
}
.bk-modal-card__prac {
  font-size: 0.72rem;
  opacity: 0.7;
  display: flex;
  align-items: center;
  gap: 3px;
}
.bk-modal-card__prac i {
  font-size: 0.65rem;
}

/* ── Mobile month grid: badge count + bottom day list ─────────
   .bk-cal-cell--mobile / .bk-cal-cell__badge / .bk-day-detail / .bk-detail-card
   are only ever rendered by bookings.js on mobile (<768px); the
   media query keeps them from ever touching the desktop grid. ── */
@media (max-width: 767px) {
  .bk-cal-cell.bk-cal-cell--mobile {
    position: relative;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 2px;
    cursor: pointer;
    transition: background var(--transition);
  }
  .bk-cal-cell.bk-cal-cell--mobile:active {
    background: var(--be-surface);
  }
  .bk-cal-cell--mobile .bk-cal-cell__num {
    margin-bottom: 0;
  }
  .bk-cal-cell--mobile.bk-cal-cell--sel {
    background: var(--be-gold);
    border-radius: var(--radius-md);
  }
  .bk-cal-cell--mobile.bk-cal-cell--sel .bk-cal-cell__num span,
  .bk-cal-cell--mobile.bk-cal-cell--sel.bk-cal-cell--today
    .bk-cal-cell__num
    span {
    background: transparent;
    color: #fff;
  }
  .bk-cal-cell__badge {
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--be-gold-dark);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
  }
  .bk-cal-cell__badge--zero {
    background: transparent;
    color: var(--be-text-muted);
    border: 1px solid var(--be-border-sub);
  }
  .bk-cal-cell--sel .bk-cal-cell__badge {
    background: #fff;
    color: var(--be-gold-dark);
  }
  .bk-cal-cell--sel .bk-cal-cell__badge--zero {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
  }

  .bk-day-detail {
    margin-top: 14px;
    border: 1px solid var(--be-border);
    border-radius: var(--radius-lg);
    background: var(--be-dark);
    overflow: hidden;
  }
  .bk-day-detail__hdr {
    padding: 12px 14px;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--be-white);
    background: var(--be-dark-alt);
    border-bottom: 1px solid var(--be-border);
  }

  .bk-detail-card {
    margin: 10px;
    padding: 10px 12px 10px 14px;
    border-radius: var(--radius-md);
    border-left: 4px solid transparent;
    cursor: pointer;
    transition: filter 0.1s;
  }
  .bk-detail-card:active {
    filter: brightness(0.93);
  }
  .bk-detail-card__time {
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.8;
    margin-bottom: 2px;
  }
  .bk-detail-card__name {
    font-size: 0.92rem;
    font-weight: 700;
    margin-bottom: 3px;
    overflow-wrap: anywhere;
  }
  .bk-detail-card__row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .bk-detail-card__ref {
    font-family: monospace;
    font-size: 0.72rem;
    opacity: 0.7;
  }
  .bk-detail-card__prac {
    font-size: 0.72rem;
    opacity: 0.7;
    display: flex;
    align-items: center;
    gap: 3px;
  }

  .bk-detail-empty {
    text-align: center;
    padding: 30px 16px;
    color: var(--be-text-muted);
  }
  .bk-detail-empty i {
    display: block;
    font-size: 1.8rem;
    opacity: 0.25;
    margin-bottom: 8px;
  }
  .bk-detail-empty p {
    margin: 0;
    font-size: 0.85rem;
  }
}

/* ── Mobile-first agenda calendar ─────────────────────────────
   Below 768px the month grid is fully replaced by a swipeable week
   strip + a vertical agenda of full-width event cards. Nothing here
   relies on hover, zoom, or horizontal scrolling. ───────────────── */
.bk-cal-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--be-dark);
  padding-top: 2px;
}
.bk-nav-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bk-cal-swipe {
  touch-action: pan-y;
}
.bk-fab-today {
  display: none;
}
@media (max-width: 767px) {
  .bk-cal-toolbar {
    padding: 6px 0;
    border-bottom: 1px solid var(--be-border-sub);
    margin-bottom: 0 !important;
  }

  .bk-agenda-strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: 10px 2px;
    position: sticky;
    top: 49px;
    background: var(--be-dark);
    z-index: 2;
    border-bottom: 1px solid var(--be-border-sub);
  }
  .bk-agenda-strip__day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 52px;
    padding: 6px 2px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--be-text);
    cursor: pointer;
    transition: background var(--transition);
  }
  .bk-agenda-strip__day:active {
    background: var(--be-surface);
  }
  .bk-agenda-strip__lbl {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--be-text-muted);
  }
  .bk-agenda-strip__num {
    font-size: 0.95rem;
    font-weight: 700;
  }
  .bk-agenda-strip__day--today .bk-agenda-strip__num {
    color: var(--be-gold-dark);
  }
  .bk-agenda-strip__day--sel {
    background: var(--be-gold);
  }
  .bk-agenda-strip__day--sel .bk-agenda-strip__num,
  .bk-agenda-strip__day--sel .bk-agenda-strip__lbl {
    color: #fff;
  }
  .bk-agenda-strip__badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 7px;
    background: var(--be-gold-dark);
    color: #fff;
    font-size: 0.56rem;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
  }
  .bk-agenda-strip__day--sel .bk-agenda-strip__badge {
    background: #fff;
    color: var(--be-gold-dark);
  }

  .bk-agenda-list {
    padding: 14px 2px 90px;
  }
  .bk-agenda-list__hdr {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--be-white);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .bk-agenda-list__today-pill {
    font-family: var(--font-ui);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--be-gold);
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
  }
  .bk-agenda-empty {
    text-align: center;
    padding: 36px 16px;
    color: var(--be-text-muted);
  }
  .bk-agenda-empty i {
    display: block;
    font-size: 1.9rem;
    opacity: 0.25;
    margin-bottom: 8px;
  }
  .bk-agenda-empty p {
    margin: 0;
    font-size: 0.85rem;
  }

  .bk-agenda-card {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 64px;
    margin-bottom: 10px;
    border: none;
    border-radius: var(--radius-lg);
    border-left: 4px solid transparent;
    overflow: hidden;
    text-align: left;
    cursor: pointer;
    padding: 0;
    transition: filter 0.1s;
  }
  .bk-agenda-card:active {
    filter: brightness(0.94);
  }
  .bk-agenda-card__stripe {
    width: 5px;
    flex-shrink: 0;
  }
  .bk-agenda-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 11px 10px;
    min-width: 0;
  }
  .bk-agenda-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .bk-agenda-card__title {
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .bk-agenda-card__type-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .bk-agenda-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    font-size: 0.74rem;
    color: var(--be-text-muted);
  }
  .bk-agenda-card__time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
  }
  .bk-agenda-card__label {
    font-weight: 700;
    opacity: 0.9;
  }
  .bk-agenda-card__range {
    display: flex;
    align-items: center;
    gap: 3px;
    opacity: 0.75;
  }
  .bk-agenda-card__action {
    flex-shrink: 0;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--be-text-muted);
    font-size: 0.95rem;
    border-left: 1px solid var(--be-border-sub);
  }
  .bk-agenda-card__action--locked {
    opacity: 0.5;
  }

  .bk-fab-today {
    display: flex;
    align-items: center;
    gap: 6px;
    position: sticky;
    bottom: 14px;
    margin-left: auto;
    margin-right: 6px;
    float: right;
    z-index: 4;
    min-height: 44px;
    padding: 0 16px;
    border: none;
    border-radius: 22px;
    background: var(--be-gold);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: var(--shadow-md);
  }
  .bk-fab-today i {
    font-size: 0.95rem;
  }

  .bk-cal-legend {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .bk-agenda-strip,
  .bk-agenda-list,
  .bk-fab-today {
    display: none !important;
  }
}

/* ── Action bar ────────────────────────────────────────────── */
.bk-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.bk-action-bar__left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bk-action-bar__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bk-action-bar__month {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--be-white);
  min-width: 110px;
  text-align: center;
}
.bk-action-bar__count {
  font-size: 0.78rem;
  color: var(--be-text-muted);
}

/* ── Shared legend bar ─────────────────────────────────────── */
.bk-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 10px 14px;
  background: var(--be-dark-alt);
}
.bk-legend--top {
  border-radius: var(--radius-lg);
  border: 1px solid var(--be-border);
  margin-bottom: 10px;
}
.bk-legend--bottom {
  border-top: 1px solid var(--be-border);
}
.bk-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: var(--be-text-muted);
}
.bk-legend__dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ── Calendar grid ─────────────────────────────────────────── */
.bk-cal-wrap {
  border-radius: var(--radius-lg);
  border: 1px solid var(--be-border);
  overflow: hidden;
  background: var(--be-dark);
}
.bk-cal-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--be-dark-alt);
  border-bottom: 1px solid var(--be-border);
}
.bk-cal-head__day {
  padding: 8px 4px;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--be-text-muted);
}
.bk-cal-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.bk-cal-cell {
  border-right: 1px solid var(--be-border-sub);
  border-bottom: 1px solid var(--be-border-sub);
  padding: 4px;
  min-height: 110px;
}
.bk-cal-cell:nth-child(7n) {
  border-right: none;
}
.bk-cal-cell--other {
  opacity: 0.35;
}
.bk-cal-cell--today .bk-cal-cell__num span {
  background: var(--be-gold);
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bk-cal-cell__num {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--be-text);
  margin-bottom: 3px;
}
.bk-cal-evt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px 5px 3px 7px;
  border-radius: 3px;
  margin-bottom: 2px;
  border-left: 3px solid transparent;
  cursor: pointer;
  font-size: 10px;
  line-height: 1.3;
  overflow: hidden;
  transition: filter 0.1s;
}
.bk-cal-evt:hover {
  filter: brightness(0.91);
}
.bk-cal-evt__time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-weight: 700;
  opacity: 0.85;
  white-space: nowrap;
}
.bk-cal-evt__ref {
  font-family: monospace;
  font-size: 9px;
  opacity: 0.75;
}
.bk-cal-evt__name {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10.5px;
}
.bk-cal-evt__prac {
  font-size: 9.5px;
  opacity: 0.7;
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  overflow: hidden;
}
.bk-cal-evt__prac i {
  font-size: 8px;
}
.bk-cal-more {
  display: block;
  background: none;
  border: none;
  padding: 1px 4px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--be-text-muted);
  cursor: pointer;
  text-align: left;
}
.bk-cal-more:hover {
  color: var(--be-gold-dark);
}

/* Modal cards */
.bk-modal-card {
  padding: 10px 12px 10px 14px;
  border-radius: 5px;
  margin-bottom: 8px;
  border-left: 4px solid transparent;
  cursor: pointer;
  transition: filter 0.1s;
}
.bk-modal-card:last-child {
  margin-bottom: 0;
}
.bk-modal-card:hover {
  filter: brightness(0.93);
}
.bk-modal-card__time {
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.8;
  margin-bottom: 2px;
}
.bk-modal-card__name {
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 3px;
}
.bk-modal-card__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bk-modal-card__ref {
  font-family: monospace;
  font-size: 0.72rem;
  opacity: 0.7;
}
.bk-modal-card__prac {
  font-size: 0.72rem;
  opacity: 0.7;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* ── Booking list cards (replaces table) ───────────────────── */
.bk-list-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bk-list-card {
  background: var(--be-dark);
  border: 1px solid var(--be-border);
  border-left-width: 4px;
  border-left-style: solid;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition);
}
.bk-list-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Card header: ref + date | status badge */
.bk-list-card__hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--be-border-sub);
}
.bk-list-card__ref {
  font-family: monospace;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--be-white);
  display: block;
}
.bk-list-card__booked {
  font-size: 0.68rem;
  color: var(--be-text-muted);
  margin-top: 2px;
}

/* Card body: customer / branch / practitioner / services */
.bk-list-card__body {
  padding: 10px 14px;
}
.bk-list-card__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.bk-list-card__customer {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--be-white);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.bk-list-card__customer {
  text-decoration: none;
}
a.bk-list-card__customer:hover {
  color: var(--be-gold-dark);
}

.bk-list-card__branch,
.bk-list-card__prac {
  font-size: 0.74rem;
  color: var(--be-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
}

/* Meta row: date · time range · duration */
.bk-list-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 0.75rem;
  color: var(--be-text-muted);
  padding-top: 8px;
  border-top: 1px solid var(--be-border-sub);
}
.bk-list-card__meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Card footer: consent + total | action buttons */
.bk-list-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  gap: 8px;
  border-top: 1px solid var(--be-border-sub);
  background: var(--be-dark-alt);
}
.bk-list-card__price {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bk-list-card__total {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--be-white);
}
.bk-list-card__actions {
  display: flex;
  gap: 4px;
}

/* Mobile */
@media (max-width: 480px) {
  .bk-list-card__row {
    grid-template-columns: 1fr;
  }
}

.bk-cal-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--be-dark);
  padding-top: 2px;
}
.bk-nav-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bk-cal-swipe {
  touch-action: pan-y;
}
.bk-fab-today {
  display: none;
}
@media (max-width: 767px) {
  .bk-cal-toolbar {
    padding: 6px 0;
    border-bottom: 1px solid var(--be-border-sub);
    margin-bottom: 0 !important;
  }

  .bk-agenda-strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: 10px 2px;
    position: sticky;
    top: 49px;
    background: var(--be-dark);
    z-index: 2;
    border-bottom: 1px solid var(--be-border-sub);
  }
  .bk-agenda-strip__day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 52px;
    padding: 6px 2px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--be-text);
    cursor: pointer;
    transition: background var(--transition);
  }
  .bk-agenda-strip__day:active {
    background: var(--be-surface);
  }
  .bk-agenda-strip__lbl {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--be-text-muted);
  }
  .bk-agenda-strip__num {
    font-size: 0.95rem;
    font-weight: 700;
  }
  .bk-agenda-strip__day--today .bk-agenda-strip__num {
    color: var(--be-gold-dark);
  }
  .bk-agenda-strip__day--sel {
    background: var(--be-gold);
  }
  .bk-agenda-strip__day--sel .bk-agenda-strip__num,
  .bk-agenda-strip__day--sel .bk-agenda-strip__lbl {
    color: #fff;
  }
  .bk-agenda-strip__badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 7px;
    background: var(--be-gold-dark);
    color: #fff;
    font-size: 0.56rem;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
  }
  .bk-agenda-strip__day--sel .bk-agenda-strip__badge {
    background: #fff;
    color: var(--be-gold-dark);
  }

  .bk-agenda-list {
    padding: 14px 2px 90px;
  }
  .bk-agenda-list__hdr {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--be-white);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .bk-agenda-list__today-pill {
    font-family: var(--font-ui);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--be-gold);
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
  }
  .bk-agenda-empty {
    text-align: center;
    padding: 36px 16px;
    color: var(--be-text-muted);
  }
  .bk-agenda-empty i {
    display: block;
    font-size: 1.9rem;
    opacity: 0.25;
    margin-bottom: 8px;
  }
  .bk-agenda-empty p {
    margin: 0;
    font-size: 0.85rem;
  }

  .bk-agenda-card {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 64px;
    margin-bottom: 10px;
    border: none;
    border-radius: var(--radius-lg);
    border-left: 4px solid transparent;
    overflow: hidden;
    text-align: left;
    cursor: pointer;
    padding: 0;
    transition: filter 0.1s;
  }
  .bk-agenda-card:active {
    filter: brightness(0.94);
  }
  .bk-agenda-card__stripe {
    width: 5px;
    flex-shrink: 0;
  }
  .bk-agenda-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 11px 10px;
    min-width: 0;
  }
  .bk-agenda-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .bk-agenda-card__title {
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .bk-agenda-card__type-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .bk-agenda-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    font-size: 0.74rem;
    color: var(--be-text-muted);
  }
  .bk-agenda-card__time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
  }
  .bk-agenda-card__label {
    font-weight: 700;
    opacity: 0.9;
  }
  .bk-agenda-card__range {
    display: flex;
    align-items: center;
    gap: 3px;
    opacity: 0.75;
  }
  .bk-agenda-card__action {
    flex-shrink: 0;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--be-text-muted);
    font-size: 0.95rem;
    border-left: 1px solid var(--be-border-sub);
  }
  .bk-agenda-card__action--locked {
    opacity: 0.5;
  }

  .bk-fab-today {
    display: flex;
    align-items: center;
    gap: 6px;
    position: sticky;
    bottom: 14px;
    margin-left: auto;
    margin-right: 6px;
    float: right;
    z-index: 4;
    min-height: 44px;
    padding: 0 16px;
    border: none;
    border-radius: 22px;
    background: var(--be-gold);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: var(--shadow-md);
  }
  .bk-fab-today i {
    font-size: 0.95rem;
  }

  .bk-cal-legend {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .bk-agenda-strip,
  .bk-agenda-list,
  .bk-fab-today {
    display: none !important;
  }
}

/* ── Booking view ─────────────────────────────────────────── */
.bv-header {
  background: var(--be-dark);
  border: 1px solid var(--be-border);
  border-left: 4px solidvar(--be-border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.bv-header__info {
  flex: 1;
  min-width: 0;
}
.bv-header__ref {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--be-white);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bv-header__meta {
  font-size: 0.78rem;
  color: var(--be-text-muted);
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.bv-header__meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.bv-header__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Actions dropdown */
.bv-actions-wrap {
  position: relative;
}
.bv-actions-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  background: var(--be-dark);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 200;
  display: none;
  overflow: hidden;
}
.bv-actions-menu.open {
  display: block;
}
.bv-actions-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: 0.85rem;
  color: var(--be-text);
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  transition: background var(--transition);
}
.bv-actions-item:hover {
  background: var(--be-surface);
}
.bv-actions-item--danger {
  color: var(--color-error, #ef4444);
}
.bv-actions-sep {
  height: 1px;
  background: var(--be-border-sub);
  margin: 4px 0;
}

/* Warning bar */
.bv-warning {
  background: rgba(217, 119, 6, 0.1);
  border: 1px solid rgba(217, 119, 6, 0.3);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 0.82rem;
  color: #d97706;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

/* Detail rows */
.bv-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--be-border-sub);
}
.bv-detail-row:last-child {
  border-bottom: none;
}
.bv-detail-label {
  font-size: 0.76rem;
  color: var(--be-text-muted);
  flex-shrink: 0;
}
.bv-detail-value {
  font-size: 0.86rem;
  color: var(--be-white);
  text-align: right;
}

/* Financial strip */
.bv-fin-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--be-border-sub);
  font-size: 0.85rem;
}
.bv-fin-row:last-child {
  border-bottom: none;
  font-weight: 700;
  font-size: 0.95rem;
  font-family: var(--font-serif);
  color: var(--be-white);
}
.bv-fin-row--discount {
  color: #22c55e;
}

/* Service cards */
.bv-service {
  background: var(--be-dark-alt);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  padding: 0;
  overflow: hidden;
  margin-bottom: 10px;
}
.bv-service:last-child {
  margin-bottom: 0;
}
.bv-service__hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--be-border-sub);
  flex-wrap: wrap;
}
.bv-service__type {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--be-gold);
  color: #fff;
}
.bv-service__main {
  font-size: 0.7rem;
  color: var(--be-text-muted);
}
.bv-service__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  gap: 10px;
}
.bv-service__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--be-white);
}
.bv-service__price-wrap {
  text-align: right;
  flex-shrink: 0;
}
.bv-service__price {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--be-white);
}
.bv-service__orig {
  font-size: 0.74rem;
  color: var(--be-text-muted);
  text-decoration: line-through;
}
.bv-service__disc {
  font-size: 0.74rem;
  color: #22c55e;
}
.bv-service__action {
  background: none;
  border: none;
  color: var(--be-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: color var(--transition);
}
.bv-service__action:hover {
  color: var(--be-gold-dark);
}

/* Tabs */
.bv-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--be-border);
}
.bv-tabs::-webkit-scrollbar {
  display: none;
}
.bv-tab {
  flex-shrink: 0;
  padding: 12px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--be-text-muted);
  font-size: 0.83rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all var(--transition);
}
.bv-tab:hover {
  color: var(--be-text);
}
.bv-tab.active {
  color: var(--be-gold-dark);
  border-bottom-color: var(--be-gold);
  font-weight: 600;
}
.bv-tab-badge {
  font-size: 0.6rem;
  background: var(--be-surface-2);
  color: var(--be-text-muted);
  padding: 1px 5px;
  border-radius: 999px;
}
.bv-tab.active .bv-tab-badge {
  background: rgba(201, 169, 110, 0.15);
  color: var(--be-gold-dark);
}

.bv-pane-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--be-border);
}
.bv-pane-hdr__title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--be-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* Notes */
.bv-note {
  padding: 12px 16px;
  border-bottom: 1px solid var(--be-border-sub);
}
.bv-note:last-child {
  border-bottom: none;
}
.bv-note__meta {
  font-size: 0.7rem;
  color: var(--be-text-muted);
  margin-bottom: 5px;
  display: flex;
  gap: 8px;
}
.bv-note__text {
  font-size: 0.86rem;
  color: var(--be-text);
  line-height: 1.6;
}
.bv-compose {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--be-border);
}
.bv-compose__input {
  flex: 1;
  resize: none;
  min-height: 40px;
  max-height: 100px;
}

/* Recommendations (AFTER_CARE products) */
.bv-recommendation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--be-border-sub);
}
.bv-recommendation:last-child {
  border-bottom: none;
}
.bv-recommendation__info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bv-recommendation__name {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--be-white);
}
.bv-recommendation__meta {
  font-size: 0.75rem;
  color: var(--be-text-muted);
}
.bv-compose--recommendation {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--be-border);
}
.bv-compose--recommendation select {
  flex: 1;
}

/* Consent Q&A */
.bv-qa-item {
  padding: 11px 16px;
  border-bottom: 1px solid var(--be-border-sub);
}
.bv-qa-item:last-child {
  border-bottom: none;
}
.bv-qa-question {
  font-size: 0.8rem;
  color: var(--be-text-muted);
  margin-bottom: 3px;
}
.bv-qa-answer {
  font-size: 0.88rem;
  color: var(--be-white);
  font-weight: 500;
}

/* Signature */
.bv-sig-wrap {
  background: white;
  border-radius: var(--radius-md);
  padding: 8px;
  text-align: center;
  margin-top: 12px;
}
.bv-sig-wrap img {
  max-width: 100%;
  max-height: 120px;
  object-fit: contain;
}
.bv-sig-label {
  font-size: 0.68rem;
  color: var(--be-text-muted);
  text-align: center;
  margin-top: 4px;
}

/* Documents */
.bv-doc-section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--be-border-sub);
}
.bv-doc-section:last-child {
  border-bottom: none;
}
.bv-doc-section__hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.bv-doc-section__label {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--be-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bv-doc-section__count {
  font-size: 0.65rem;
  background: var(--be-surface);
  color: var(--be-text-muted);
  padding: 1px 6px;
  border-radius: 999px;
}
.bv-doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}
.bv-doc-img {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--be-border);
}
.bv-doc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.2s;
}
.bv-doc-img:hover img {
  filter: brightness(0.8);
}
.bv-doc-img__del {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  color: white;
  font-size: 0.65rem;
}
.bv-doc-img:hover .bv-doc-img__del {
  opacity: 1;
}
.bv-doc-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--be-surface);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
}
.bv-doc-file:last-child {
  margin-bottom: 0;
}
.bv-doc-file__icon {
  font-size: 1.2rem;
  color: var(--be-gold);
  flex-shrink: 0;
}
.bv-doc-file__name {
  font-size: 0.78rem;
  color: var(--be-text);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bv-doc-file__del {
  background: none;
  border: none;
  color: var(--be-text-muted);
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}
.bv-doc-file__del:hover {
  color: var(--color-error, #ef4444);
}
.bv-doc-empty {
  font-size: 0.78rem;
  color: var(--be-text-muted);
  font-style: italic;
  padding: 8px 0;
}

/* Upload drop area (in modal) */
.bv-file-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1.5px dashed var(--be-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.84rem;
  color: var(--be-text-muted);
  transition: all var(--transition);
}
.bv-file-label:hover {
  border-color: var(--be-gold);
  color: var(--be-gold-dark);
}
/* Multi-file upload list (in modal) */
.bv-upload-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
}
.bv-upload-list:empty {
  display: none;
}
.bv-upload-list__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--be-border-sub, var(--be-border));
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  margin-bottom: 4px;
}
.bv-upload-list__icon {
  color: var(--be-text-muted);
  flex-shrink: 0;
}
.bv-upload-list__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bv-upload-list__meta {
  color: var(--be-text-muted);
  font-size: 0.74rem;
  flex-shrink: 0;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bv-upload-list__remove {
  border: 0;
  background: none;
  padding: 0 2px;
  color: var(--be-text-muted);
  cursor: pointer;
  line-height: 1;
}
.bv-upload-list__remove:hover {
  color: #c0392b;
}
.bv-upload-list__remove:disabled {
  visibility: hidden;
}
.bv-upload-list__item.is-done .bv-upload-list__meta {
  color: #2e9e5b;
}
.bv-upload-list__item.is-error {
  border-color: #e3a5a0;
}
.bv-upload-list__item.is-error .bv-upload-list__meta {
  color: #c0392b;
}
.bv-upload-progress {
  height: 3px;
  background: var(--be-border);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
  display: none;
}
.bv-upload-progress__bar {
  height: 100%;
  background: var(--be-gold);
  width: 0;
  transition: width 0.3s;
}

/* Previous treatments */
.bv-prev-card {
  padding: 14px 16px;
  border-bottom: 1px solid var(--be-border-sub);
}
.bv-prev-card:last-child {
  border-bottom: none;
}
.bv-prev-card__hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.bv-prev-card__ref {
  font-family: monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--be-white);
}
.bv-prev-card__meta {
  font-size: 0.74rem;
  color: var(--be-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 8px;
}
.bv-prev-card__treatments {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.bv-prev-treat-pill {
  font-size: 0.72rem;
  padding: 3px 9px;
  background: rgba(201, 169, 110, 0.1);
  color: var(--be-gold-dark);
  border: 1px solid rgba(201, 169, 110, 0.2);
  border-radius: 999px;
}

/* Customer avatar strip */
.bv-customer-strip {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bv-customer-strip__info {
  flex: 1;
  min-width: 0;
}
.bv-customer-strip__name {
  font-weight: 600;
  color: var(--be-white);
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bv-customer-strip__email {
  font-size: 0.74rem;
  color: var(--be-text-muted);
}

/* Consent status */
.bv-consent-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
}
.bv-consent-status--ok {
  color: #22c55e;
}
.bv-consent-status--pending {
  color: #d97706;
}
.bv-consent-status--none {
  color: var(--be-text-muted);
}

/* Assignee chip */
.bv-assignee {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bv-assignee__name {
  font-size: 0.88rem;
  color: var(--be-white);
  font-weight: 500;
}
.bv-assignee__change {
  background: none;
  border: 1px solid var(--be-border);
  border-radius: var(--radius-sm);
  padding: 3px 9px;
  font-size: 0.72rem;
  color: var(--be-text-muted);
  cursor: pointer;
  transition: all var(--transition);
}
.bv-assignee__change:hover {
  border-color: var(--be-gold);
  color: var(--be-gold-dark);
}

.bv-empty-pane {
  text-align: center;
  padding: 36px 16px;
  color: var(--be-text-muted);
}
.bv-empty-pane i {
  font-size: 1.8rem;
  opacity: 0.2;
  display: block;
  margin-bottom: 8px;
}

/* ── Wizard chrome ─────────────────────────────────────────── */
/* Wizard chrome */
.be-wizard-steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.be-wizard-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--be-text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.be-wizard-step span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--be-surface);
  border: 1px solid var(--be-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}

.be-wizard-step.active {
  color: var(--be-gold-dark);
}

.be-wizard-step.active span {
  background: var(--be-gold);
  border-color: var(--be-gold);
  color: #fff;
}

.be-wizard-step.done span {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
}

.be-wizard-step-line {
  flex: 1;
  height: 1px;
  background: var(--be-border);
  margin: 0 4px;
  min-width: 14px;
}

.be-wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0 0;
}

/* Treatment grid — multi-select */
.be-treatment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

@media (max-width: 480px) {
  .be-treatment-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.be-treatment-card {
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  padding: 12px;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  user-select: none;
}

.be-treatment-card:hover {
  border-color: var(--be-gold);
}

.be-treatment-card.selected {
  border-color: var(--be-gold);
  background: rgba(201, 169, 110, 0.08);
}

.be-treatment-card__check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--be-gold);
  display: none;
  align-items: center;
  justify-content: center;
}

.be-treatment-card.selected .be-treatment-card__check {
  display: flex;
}

.be-treatment-card__check i {
  font-size: 0.55rem;
  color: #fff;
}

.be-treatment-card__name {
  font-weight: 600;
  color: var(--be-white);
  font-size: 0.85rem;
  margin-bottom: 3px;
  padding-right: 20px;
}

.be-treatment-card__meta {
  font-size: 0.72rem;
  color: var(--be-text-muted);
}

.be-treatment-card__price {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--be-gold-dark);
  margin-top: 6px;
}

.be-treatment-card__deposit {
  font-size: 0.7rem;
  color: var(--be-text-muted);
  margin-top: 2px;
}

/* Cart */
.bw-cart {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bw-cart-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--be-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--be-border);
}

.bw-cart-item__name {
  flex: 1;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--be-white);
}

.bw-cart-item__price {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  color: var(--be-gold-dark);
  flex-shrink: 0;
}

.bw-cart-item__remove {
  background: none;
  border: none;
  color: var(--be-text-muted);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  transition: color var(--transition);
  flex-shrink: 0;
}

.bw-cart-item__remove:hover {
  color: var(--color-error, #ef4444);
}

.bw-cart-empty {
  text-align: center;
  padding: 20px;
  color: var(--be-text-muted);
  font-size: 0.82rem;
}

.bw-cart-total {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  font-weight: 700;
  font-family: var(--font-serif);
  color: var(--be-white);
  border-top: 1px solid var(--be-border);
  margin-top: 4px;
}

/* Slots */
.be-slots-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.bw-slot-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--be-gold);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  margin-left: 5px;
  vertical-align: middle;
}
.be-slot.selected .bw-slot-badge {
  background: rgba(255, 255, 255, 0.35);
}

.be-slot {
  padding: 8px 14px;
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  background: none;
  color: var(--be-text);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all var(--transition);
}

.be-slot:hover:not(:disabled) {
  border-color: var(--be-gold);
  color: var(--be-gold-dark);
}

.be-slot.selected {
  background: var(--be-gold);
  border-color: var(--be-gold);
  color: #fff;
  font-weight: 600;
}

.be-slot--taken {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

.bw-slot-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  margin-top: 8px;
}

.bw-slot-alert--warn {
  background: rgba(217, 119, 6, 0.1);
  border: 1px solid rgba(217, 119, 6, 0.3);
  color: #d97706;
}

.bw-slot-alert--none {
  background: rgba(55, 65, 81, 0.2);
  border: 1px solid var(--be-border);
  color: var(--be-text-muted);
}

/* Payment calc */
.bw-calc {
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.bw-calc-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 14px;
  border-bottom: 1px solid var(--be-border-sub);
  font-size: 0.86rem;
}

.bw-calc-row:last-child {
  border-bottom: none;
  padding: 11px 14px;
  font-weight: 700;
  font-size: 0.98rem;
  font-family: var(--font-serif);
  color: var(--be-white);
  background: var(--be-dark-alt);
}

.bw-calc-row--discount {
  color: #22c55e;
}

.bw-calc-row--deposit {
  font-size: 0.82rem;
  color: #93c5fd;
  border-top: 1px solid var(--be-border);
}

/* Toggles */
.bw-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--be-border-sub);
}

.bw-toggle:last-of-type {
  border-bottom: none;
}

.bw-toggle input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--be-gold);
}

.bw-toggle label {
  font-size: 0.86rem;
  color: var(--be-text);
  cursor: pointer;
}

.bw-toggle label small {
  display: block;
  color: var(--be-text-muted);
  font-size: 0.74rem;
  margin-top: 1px;
}

.bw-deposit-info {
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  font-size: 0.83rem;
  color: #93c5fd;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cart-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition:
    box-shadow var(--transition),
    transform var(--transition);
  background: var(--be-surface);
}

.cart-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

.cart-card__body {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-left: 4px solid transparent;
}

.cart-card__ref {
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--be-text-muted);
  letter-spacing: 0.03em;
  min-width: 90px;
}

.cart-card__customer {
  flex: 1;
  min-width: 0;
}

.cart-card__name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--be-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-card__email {
  font-size: 0.76rem;
  color: var(--be-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-card__meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 120px;
  font-size: 0.78rem;
  color: var(--be-text-muted);
}

.cart-card__meta strong {
  color: var(--be-text);
  font-size: 0.8rem;
  font-weight: 500;
}

.cart-card__badges {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  min-width: 120px;
}

.cart-card__updated {
  font-size: 0.72rem;
  color: var(--be-text-muted);
  min-width: 80px;
  text-align: right;
}

.cart-card__action {
  padding-left: 8px;
}

/* Legend strip */
.be-status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.be-status-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: var(--be-text-muted);
}

.be-status-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .cart-card__meta,
  .cart-card__updated {
    display: none;
  }

  .cart-card__badges {
    min-width: 80px;
  }
}

.bw-calc {
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.bw-calc-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 14px;
  border-bottom: 1px solid var(--be-border-sub);
  font-size: 0.86rem;
}

.bw-calc-row:last-child {
  border-bottom: none;
  padding: 11px 14px;
  font-weight: 700;
  font-size: 0.98rem;
  font-family: var(--font-serif);
  color: var(--be-white);
  background: var(--be-dark-alt);
}

.bw-calc-row--discount {
  color: #22c55e;
}

.bw-calc-row--deposit {
  font-size: 0.82rem;
  color: #93c5fd;
  background: none;
  font-weight: 500;
  border-top: 1px solid var(--be-border);
}

.be-detail-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.be-detail-row {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px solid var(--be-border-sub);
  gap: 12px;
  font-size: 0.86rem;
}

.be-detail-row:last-child {
  border-bottom: none;
}

.be-detail-label {
  min-width: 130px;
  color: var(--be-text-muted);
  flex-shrink: 0;
}

.be-detail-value {
  color: var(--be-white);
  word-break: break-word;
}

.be-detail-value a {
  color: var(--be-gold-dark);
  text-decoration: none;
}

.be-detail-value a:hover {
  text-decoration: underline;
}

.cart-card {
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition:
    box-shadow var(--transition),
    transform var(--transition);
  background: var(--be-surface);
}

.cart-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

.cart-card__body {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-left: 4px solid transparent;
}

.cart-card__ref {
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--be-text-muted);
  letter-spacing: 0.03em;
  min-width: 90px;
}

.cart-card__customer {
  flex: 1;
  min-width: 0;
}

.cart-card__name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--be-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-card__email {
  font-size: 0.76rem;
  color: var(--be-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-card__meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 120px;
  font-size: 0.78rem;
  color: var(--be-text-muted);
}

.cart-card__meta strong {
  color: var(--be-text);
  font-size: 0.8rem;
  font-weight: 500;
}

.cart-card__badges {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  min-width: 130px;
}

.cart-card__updated {
  font-size: 0.72rem;
  color: var(--be-text-muted);
  min-width: 80px;
  text-align: right;
}

.cart-card__action {
  padding-left: 8px;
}

.be-status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.be-status-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: var(--be-text-muted);
}

.be-status-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .cart-card__meta,
  .cart-card__updated {
    display: none;
  }

  .cart-card__badges {
    min-width: 80px;
  }
}

/* ── Reconciliation page ─────────────────────────────────────────────────── */
.recon-date-nav {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.recon-date-nav a,
.recon-date-nav button {
  padding: 7px 12px;
  background: none;
  border: none;
  color: var(--be-text-muted);
  cursor: pointer;
  font-size: 0.82rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--be-border);
}
.recon-date-nav a:last-child,
.recon-date-nav button:last-child {
  border-right: none;
}
.recon-date-nav a:hover,
.recon-date-nav button:hover {
  background: var(--be-surface);
  color: var(--be-text);
}
.recon-date-input {
  border: none;
  background: transparent;
  color: var(--be-white);
  font-size: 0.84rem;
  font-weight: 600;
  padding: 7px 12px;
  border-right: 1px solid var(--be-border);
  outline: none;
  width: 130px;
  text-align: center;
}

/* Summary cards */
.recon-sum-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.recon-sum-card {
  background: var(--be-dark);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  padding: 14px;
}
.recon-sum-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--be-text-muted);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.recon-sum-value {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--be-white);
}
.recon-sum-sub {
  font-size: 0.72rem;
  color: var(--be-text-muted);
  margin-top: 2px;
}
.recon-sum-card--grand {
  border-color: var(--be-gold);
  background: rgba(201, 169, 110, 0.07);
}
.recon-sum-card--grand .recon-sum-value {
  color: var(--be-gold-dark);
}

/* Booking cards */
.recon-bk-card {
  background: var(--be-dark);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 8px;
  transition: box-shadow var(--transition);
}
.recon-bk-card:hover {
  box-shadow: var(--shadow-md);
}
.recon-bk-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
}
.recon-bk-time {
  font-size: 0.75rem;
  color: var(--be-text-muted);
  min-width: 50px;
}
.recon-bk-ref {
  font-family: monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--be-text-muted);
  min-width: 100px;
}
.recon-bk-prac {
  font-size: 0.88rem;
  font-weight: 600;
  flex: 1;
}
.recon-bk-summary {
  font-size: 0.76rem;
  color: var(--be-text-muted);
  flex: 2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recon-bk-total {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 600;
  min-width: 80px;
  text-align: right;
}
.recon-bk-chevron {
  color: var(--be-text-muted);
  font-size: 0.9rem;
  transition: transform var(--transition);
}
.recon-bk-chevron.open {
  transform: rotate(180deg);
}

/* Booking detail expand */
.recon-bk-detail {
  display: none;
  border-top: 1px solid var(--be-border);
  background: var(--be-dark-alt);
}
.recon-bk-detail.open {
  display: block;
}
.recon-fin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 14px 16px;
}
.recon-fin-col h4 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--be-text-muted);
  margin-bottom: 10px;
}
.recon-fin-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid var(--be-border-sub);
  font-size: 0.84rem;
}
.recon-fin-row:last-child {
  border-bottom: none;
  font-weight: 600;
}
.recon-split-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--be-border-sub);
  font-size: 0.82rem;
}
.recon-split-row:last-child {
  border-bottom: none;
}
.recon-split-curr {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  background: rgba(201, 169, 110, 0.15);
  color: var(--be-gold-dark);
}
.recon-split-method {
  flex: 1;
  color: var(--be-text-muted);
}
.recon-split-foreign {
  font-size: 0.76rem;
  color: var(--be-text-muted);
}
.recon-split-base {
  font-weight: 600;
  min-width: 80px;
  text-align: right;
}

@media (max-width: 640px) {
  .recon-bk-row {
    gap: 8px;
    padding: 12px;
  }
  .recon-bk-time {
    min-width: 38px;
    font-size: 0.7rem;
  }
  .recon-bk-ref {
    min-width: 0;
    flex: 0 0 auto;
    font-size: 0.7rem;
  }
  .recon-bk-summary {
    display: none;
  }
  .recon-bk-total {
    min-width: 0;
    font-size: 0.86rem;
  }
}

@media (max-width: 600px) {
  .recon-fin-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .recon-confirm-hdr,
  .recon-confirm-row {
    grid-template-columns: 84px 1fr 1fr 50px;
    gap: 6px;
  }
  .recon-col-hdr,
  .recon-method-lbl,
  .recon-sys-val {
    font-size: 0.7rem;
  }
  .recon-method-lbl span {
    white-space: normal;
  }
}

@media (max-width: 420px) {
  .recon-confirm-hdr,
  .recon-confirm-row {
    grid-template-columns: 70px 1fr 1fr 44px;
  }
  .recon-diff-ok,
  .recon-diff-over,
  .recon-diff-short {
    font-size: 0.7rem;
  }
}

/* Reconciliation form */
.recon-form-card {
  background: var(--be-dark);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-top: 20px;
}
.recon-form-title {
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-serif);
  margin-bottom: 4px;
}
.recon-form-sub {
  font-size: 0.82rem;
  color: var(--be-text-muted);
  margin-bottom: 18px;
}
.recon-confirm-hdr {
  display: grid;
  grid-template-columns: 180px 1fr 1fr 100px;
  gap: 10px;
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--be-border);
}
.recon-confirm-row {
  display: grid;
  grid-template-columns: 180px 1fr 1fr 100px;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--be-border-sub);
}
.recon-confirm-row:last-of-type {
  border-bottom: none;
}
.recon-col-hdr {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--be-text-muted);
  font-weight: 600;
}
.recon-method-lbl {
  font-size: 0.84rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.recon-sys-val {
  font-size: 0.84rem;
  color: var(--be-text-muted);
}
.recon-physical-hint {
  font-size: 0.68rem;
  color: var(--be-text-muted);
  margin-top: 3px;
}
.recon-diff-ok {
  font-size: 0.82rem;
  font-weight: 600;
  color: #22c55e;
}
.recon-diff-over {
  font-size: 0.82rem;
  font-weight: 600;
  color: #d97706;
}
.recon-diff-short {
  font-size: 0.82rem;
  font-weight: 600;
  color: #ef4444;
}

/* Read-only reconciliation */
.recon-done-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(22, 163, 74, 0.1);
  border: 1px solid rgba(22, 163, 74, 0.25);
  border-radius: var(--radius-md);
  color: #16a34a;
  font-size: 0.84rem;
  margin-top: 20px;
}

/* ── Finance report page ───────────────────────────────────────────────────── */
.fr-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

@media (max-width: 1100px) {
  .fr-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 767px) {
  .fr-stats {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 420px) {
  .fr-stats {
    grid-template-columns: 1fr;
  }
}

.fr-stat {
  background: var(--be-dark);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fr-stat__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--be-text-muted);
}

.fr-stat__value {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--be-white);
  line-height: 1.1;
}

.fr-stat__sub {
  font-size: 0.7rem;
  color: var(--be-text-muted);
}

.fr-stat--net {
  border-color: rgba(201, 169, 110, 0.4);
  background: linear-gradient(
    135deg,
    rgba(201, 169, 110, 0.1) 0%,
    rgba(201, 169, 110, 0.03) 100%
  );
  grid-column: span 2;
}

@media (max-width: 420px) {
  .fr-stat--net {
    grid-column: span 1;
  }
}

.fr-stat--net .fr-stat__value {
  font-size: 2rem;
}

.fr-stat--warn .fr-stat__value {
  color: var(--be-warning);
}

.fr-stat--danger .fr-stat__value {
  color: var(--be-danger);
}

/* Filter bar */
.fr-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
  background: var(--be-dark);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
}

.fr-filters select,
.fr-filters input[type="date"] {
  flex: 0 0 auto;
}

.fr-date-pair {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fr-date-pair label {
  font-size: 0.76rem;
  color: var(--be-text-muted);
  white-space: nowrap;
}

.fr-date-pair input {
  width: 140px;
}

.fr-quick {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .fr-filters select,
  .fr-filters input[type="date"],
  .fr-date-pair input {
    width: 100%;
  }

  .fr-date-pair {
    width: 100%;
  }

  .fr-quick {
    width: 100%;
  }
}

/* Alert banner */
.fr-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(196, 122, 0, 0.09);
  border: 1px solid rgba(196, 122, 0, 0.3);
  border-radius: var(--radius-md);
  font-size: 0.84rem;
  color: var(--be-warning);
  margin-bottom: 16px;
}

/* Booking cards list */
.fr-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fr-card {
  background: var(--be-dark);
  border: 1px solid var(--be-border);
  border-left: 4px solid var(--be-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition);
}

.fr-card:hover {
  box-shadow: var(--shadow-md);
}

.fr-card--disc {
  border-left-color: var(--be-warning);
  background: rgba(196, 122, 0, 0.03);
}

.fr-card--coupon {
  border-left-color: var(--be-info);
}

/* Card header */
.fr-card__hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--be-border-sub);
  gap: 8px;
}

.fr-card__ref {
  font-family: monospace;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--be-white);
  letter-spacing: 0.04em;
}

.fr-card__hdr-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.fr-disc-icon {
  color: var(--be-warning);
  font-size: 0.8rem;
}

/* Amounts strip */
.fr-card__amounts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--be-border-sub);
  background: var(--be-dark-alt);
}

.fr-card__amt {
  padding: 10px 14px;
  border-right: 1px solid var(--be-border-sub);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fr-card__amt:last-child {
  border-right: none;
}

.fr-card__amt-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--be-text-muted);
}

.fr-card__amt-value {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--be-white);
  font-weight: 600;
}

.fr-card__amt-value--disc {
  color: var(--be-warning);
}

.fr-card__amt-value--ok {
  color: var(--be-success);
}

.fr-card__amt-value--deduct {
  color: var(--be-warning);
  font-size: 0.9rem;
}

/* Detail rows */
.fr-card__body {
  padding: 6px 14px 10px;
}

.fr-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--be-border-sub);
  font-size: 0.82rem;
  gap: 8px;
}

.fr-card__row:last-child {
  border-bottom: none;
}

.fr-card__row-label {
  color: var(--be-text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  min-width: 90px;
}

.fr-card__row-value {
  color: var(--be-text);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

.prac-combobox__item-name,
.be-combobox__item-name {
  min-width: 0;
}

.fr-coupon-code {
  font-family: monospace;
  font-size: 0.76rem;
  color: var(--be-info);
  background: rgba(37, 99, 168, 0.08);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}

/* Empty state */
.fr-empty {
  background: var(--be-dark);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-lg);
}

/* Pagination */
.fr-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 0;
}

.fr-pager__info {
  font-size: 0.8rem;
  color: var(--be-text-muted);
}

.fr-pager__pages {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* ============================================================
   Chat System — mobile-first
   ============================================================ */
.be-main:has(.chat-page) {
  min-height: unset;
  height: 100vh;
  overflow: hidden;
}
.chat-page {
  padding: 0 !important;
  padding-top: var(--topbar-h) !important;
  margin: 0 !important;
  flex: 1;
  min-height: 0;
  height: 0; /* flex child: actual height comes from flex, not content */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.chat-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

/* ── Sidebar ── */
.chat-sidebar {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-right: 1px solid var(--be-border);
  background: var(--be-dark);
  overflow: hidden;
  /* mobile: full width */
  width: 100%;
}

/* ── Thread panel ── */
.chat-thread {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--be-black);
}

/* ── Desktop: side-by-side ── */
@media (min-width: 992px) {
  .chat-sidebar {
    width: 320px;
    min-width: 280px;
    max-width: 340px;
    flex-shrink: 0;
  }
  .chat-sidebar--hidden-mobile {
    display: flex;
  }
  .chat-thread--empty {
    display: flex;
  }
}

@media (max-width: 991px) {
  .chat-page {
    padding-top: var(--topbar-h) !important;
  }

  .chat-sidebar {
    width: 100%;
    flex-shrink: 0;
  }

  .chat-sidebar--hidden-mobile {
    display: none !important;
  }

  .chat-thread {
    width: 100%;
    flex-shrink: 0;
  }

  .chat-thread--empty {
    display: none !important;
  }
}

.chat-sidebar__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--be-border) !important;
  flex-shrink: 0 !important;
  min-height: 56px !important;
  gap: 8px !important;
}
.chat-sidebar__title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--be-white);
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#chatNewBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  min-width: 44px !important;
  min-height: 44px !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ── Sidebar search ── */
.chat-sidebar__search {
  padding: 10px 12px;
  border-bottom: 1px solid var(--be-border-sub);
  flex-shrink: 0;
}
.chat-search-box {
  position: relative;
}
.chat-search-box__icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--be-text-muted);
  font-size: 0.85rem;
  pointer-events: none;
}
.chat-search-box__input {
  width: 100%;
  padding: 8px 10px 8px 32px;
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md);
  background: var(--be-surface);
  color: var(--be-text);
  font-size: 0.85rem;
  outline: none;
}
.chat-search-box__input:focus {
  border-color: var(--be-gold);
}

/* ── Conversation list ── */
.chat-sidebar__list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

/* ── Conversation item ── */
.chat-conv-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--be-border-sub);
  text-decoration: none;
  color: var(--be-text);
  transition: background var(--transition);
  position: relative;
  min-height: 68px;
}
.chat-conv-item:hover,
.chat-conv-item:focus {
  background: var(--be-surface);
}
.chat-conv-item--active {
  background: var(--be-dark-alt);
  border-left: 3px solid var(--be-gold);
}
.chat-conv-item__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--be-gold);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 600;
  flex-shrink: 0;
}
.chat-conv-item__body {
  flex: 1;
  min-width: 0;
}
.chat-conv-item__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
}
.chat-conv-item__name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--be-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-conv-item--unread .chat-conv-item__name {
  color: var(--be-gold-dark);
}
.chat-conv-item__time {
  font-size: 0.72rem;
  color: var(--be-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.chat-conv-item__preview {
  font-size: 0.8rem;
  color: var(--be-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.chat-conv-item--unread .chat-conv-item__preview {
  color: var(--be-text);
  font-weight: 500;
}
.chat-conv-item__badge {
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--be-gold);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  flex-shrink: 0;
}

/* ── Empty state ── */
.chat-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  text-align: center;
  color: var(--be-text-muted);
}
.chat-empty-state__icon {
  font-size: 2.5rem;
  opacity: 0.35;
}

/* ── Thread placeholder (desktop only) ── */
.chat-thread__placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--be-text-muted);
  text-align: center;
  padding: 40px;
}
.chat-thread__placeholder-icon {
  font-size: 3rem;
  opacity: 0.25;
}
.chat-thread__placeholder-text {
  font-size: 0.95rem;
  margin: 0;
}

/* ── Thread header ── */
.chat-thread__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--be-border);
  background: var(--be-dark);
  flex-shrink: 0;
  min-height: 56px;
}
.chat-thread__back {
  font-size: 1.2rem;
  color: var(--be-text-muted);
  padding: 4px 8px 4px 0;
  text-decoration: none;
  min-width: 32px;
  display: flex;
  align-items: center;
}
.chat-thread__back:hover {
  color: var(--be-text);
}
.chat-thread__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--be-gold);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
}
.chat-thread__partner-info {
  flex: 1;
  min-width: 0;
}
.chat-thread__partner-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--be-white);
}
.chat-thread__partner-status {
  font-size: 0.75rem;
  color: var(--be-success);
}

/* ── Messages area ── */
.chat-thread__messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Message bubbles ── */
.chat-msg {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  max-width: 78%;
  animation: chatMsgIn 0.18s ease;
}
@keyframes chatMsgIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.chat-msg--own {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.chat-msg--other {
  align-self: flex-start;
}
.chat-msg__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--be-surface-2);
  color: var(--be-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 600;
  flex-shrink: 0;
  margin-bottom: 2px;
}
.chat-msg__bubble {
  padding: 9px 13px;
  border-radius: 16px;
  max-width: 100%;
  word-break: break-word;
}
.chat-msg--own .chat-msg__bubble {
  background: var(--be-gold);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg--other .chat-msg__bubble {
  background: var(--be-dark);
  color: var(--be-text);
  border-bottom-left-radius: 4px;
  border: 1px solid var(--be-border);
}
.chat-msg__text {
  font-size: 0.9rem;
  line-height: 1.5;
}
.chat-msg__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 4px;
}
.chat-msg__time {
  font-size: 0.68rem;
  opacity: 0.65;
}
.chat-msg--other .chat-msg__time {
  color: var(--be-text-muted);
  opacity: 1;
}
.chat-msg__tick {
  font-size: 0.8rem;
  opacity: 0.8;
}
.chat-msg--read .chat-msg__tick {
  color: #4fc3f7;
  opacity: 1;
}
.chat-read-separator {
  text-align: center;
  font-size: 0.72rem;
  color: var(--be-text-muted);
  padding: 4px 0 8px;
}

/* ── Compose area ── */
.chat-thread__compose {
  border-top: 1px solid var(--be-border);
  background: var(--be-dark);
  padding: 10px 12px 8px;
  flex-shrink: 0;
}
.chat-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.chat-compose__input {
  flex: 1;
  resize: none;
  border: 1px solid var(--be-border);
  border-radius: 20px;
  padding: 10px 14px;
  background: var(--be-surface);
  color: var(--be-text);
  font-size: 0.9rem;
  font-family: var(--font-ui);
  line-height: 1.4;
  outline: none;
  max-height: 120px;
  overflow-y: auto;
  transition: border-color var(--transition);
}
.chat-compose__input:focus {
  border-color: var(--be-gold);
}
.chat-compose__send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--be-gold);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  transition:
    background var(--transition),
    transform var(--transition);
}
.chat-compose__send:hover {
  background: var(--be-gold-light);
  transform: scale(1.06);
}
.chat-compose__send:active {
  transform: scale(0.95);
}
.chat-compose__hint {
  font-size: 0.68rem;
  color: var(--be-text-muted);
  margin-top: 5px;
  padding-left: 4px;
}
.chat-compose__hint kbd {
  background: var(--be-surface-2);
  border: 1px solid var(--be-border);
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 0.65rem;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .chat-thread__compose {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
}

/* ── New message modal ── */
#chatNewModal {
  z-index: 2100;
}
#chatNewModal .be-modal__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100dvh - 180px);
}
@media (max-width: 767px) {
  #chatNewModal .be-modal {
    width: calc(100% - 24px);
    max-width: 100%;
    margin: 12px;
    max-height: calc(100dvh - 24px);
    display: flex;
    flex-direction: column;
  }
  #chatNewModal .be-modal__body {
    flex: 1;
    max-height: none;
  }
}
#chatStaffSearch {
  font-size: 16px;
}

/* ── Staff list in modal ── */
.chat-staff-list {
  max-height: 320px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -16px;
}
.chat-staff-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--be-border-sub);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition);
  color: var(--be-text);
  -webkit-tap-highlight-color: transparent;
}
.chat-staff-item:hover,
.chat-staff-item:focus {
  background: var(--be-surface);
  outline: none;
}
.chat-staff-item__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--be-gold);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
}
.chat-staff-item__info {
  flex: 1;
  min-width: 0;
}
.chat-staff-item__name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--be-white);
}
.chat-staff-item__role {
  font-size: 0.75rem;
  color: var(--be-text-muted);
}

/* ── Sidebar nav unread badge ── */
.sidebar__nav-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--be-gold);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  flex-shrink: 0;
}

@media (max-width: 576px) {
  .cv-profile {
    flex-direction: column;
    align-items: stretch;
  }
  .cv-profile__actions {
    width: 100%;
  }
  .cv-profile__actions .btn {
    flex: 1 1 0;
  }
}

@media (max-width: 480px) {
  .cv-stats {
    flex-wrap: wrap;
  }
  .cv-stat {
    flex: 1 1 50%;
    min-width: 0;
  }
  .cv-stat:nth-child(odd) {
    border-right: 1px solid var(--be-border);
  }
  .cv-stat:nth-child(even) {
    border-right: none;
  }
  .cv-stat:nth-child(-n + 2) {
    border-bottom: 1px solid var(--be-border);
    padding-bottom: 12px;
  }
}

.cv-tabs,
.bv-tabs,
.cf-tabs {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 480px) {
  #stmtYear,
  #stmtMonth {
    max-width: 100%;
  }
}

.be-stat-card > div:last-child {
  min-width: 0;
  flex: 1;
}
.be-stat-card__label {
  overflow-wrap: break-word;
}
@media (max-width: 420px) {
  .be-stat-card {
    padding: 14px;
    gap: 10px;
  }
  .be-stat-card__icon {
    width: 34px;
    height: 34px;
    font-size: 0.95rem;
  }
  .be-stat-card__value {
    font-size: 1.4rem;
  }

  .col-6:has(> .be-stat-card) {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
}

@media (max-width: 600px) {
  .cv-tabs,
  .cf-tabs,
  .bv-tabs,
  .prac-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .cv-tab,
  .cf-tab,
  .bv-tab,
  .prac-tab {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .cart-card__body {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .cart-card__customer {
    flex: 1 1 100%;
    order: -1;
  }
  .cart-card__ref {
    min-width: 0;
  }
  .cart-card__meta {
    display: flex;
    min-width: 0;
  }
  .cart-card__updated {
    display: block;
    min-width: 0;
    text-align: left;
  }
  .cart-card__badges {
    min-width: 0;
    align-items: flex-start;
  }
}

.recon-bk-prac,
.recon-bk-summary {
  min-width: 0;
}
@media (max-width: 560px) {
  .recon-bk-row {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .recon-bk-prac {
    flex: 1 1 100%;
    order: -2;
  }
  .recon-bk-summary {
    flex: 1 1 100%;
    order: -1;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

@media (max-width: 768px) {
  .topbar__icon-btn,
  .topbar__toggle {
    width: 40px;
    height: 40px;
    font-size: 1.05rem;
  }
}

@media (max-width: 480px) {
  .be-booking-row {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .be-booking-row__meta {
    flex: 1 1 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding-left: 60px;
  }
}

.row > * {
  min-width: 0;
}

.an-summary {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: linear-gradient(
    135deg,
    rgba(201, 169, 110, 0.12) 0%,
    rgba(201, 169, 110, 0.03) 100%
  );
  border: 1px solid var(--be-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 20px;
}

.an-summary__icon {
  color: var(--be-gold-dark);
  font-size: 1.1rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.an-summary__line {
  margin: 0 0 4px 0;
  font-size: 0.88rem;
  color: var(--be-text);
  line-height: 1.5;
}

.an-summary__line:last-child {
  margin-bottom: 0;
}

.an-filters {
  justify-content: space-between;
}

.an-date-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.an-date-nav input[type="date"] {
  width: 150px;
}

.an-date-nav__btn {
  padding: 6px 10px;
}

.an-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.an-toggle-group {
  display: inline-flex;
  background: var(--be-surface);
  border: 1px solid var(--be-border);
  border-radius: var(--radius-md, 8px);
  padding: 3px;
  gap: 2px;
}

.an-toggle {
  border: none;
  background: transparent;
  color: var(--be-text-muted);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.an-toggle:hover {
  color: var(--be-text);
}

.an-toggle--active {
  background: var(--be-gold);
  color: #fff;
}

.an-chart-hint {
  font-size: 0.78rem;
  color: var(--be-text-muted);
  margin-bottom: 14px;
}

.an-chart-wrap {
  position: relative;
  width: 100%;
  height: 280px;
}

.an-chart-wrap--donut {
  height: 200px;
  width: 200px;
  flex-shrink: 0;
}

.an-source-layout {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.an-source-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 180px;
}

.an-source-legend__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
}

.an-source-legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.an-source-legend__swatch--website {
  background: #2e7d52;
}

.an-source-legend__swatch--portal {
  background: #c47a00;
}

.an-source-legend__swatch--admin {
  background: #2563a8;
}

.an-source-legend__label {
  color: var(--be-text);
  flex: 1;
}

.an-source-legend__value {
  color: var(--be-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.an-category-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.an-category-list__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 5px;
}

.an-category-list__name {
  font-size: 0.86rem;
  color: var(--be-text);
  font-weight: 600;
}

.an-category-list__value {
  font-size: 0.78rem;
  color: var(--be-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.an-category-list__track {
  width: 100%;
  height: 8px;
  background: var(--be-surface);
  border-radius: 4px;
  overflow: hidden;
}

.an-category-list__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--be-gold) 0%, #c9a96e 100%);
  border-radius: 4px;
}

.an-stat-value--small {
  font-size: 1.1rem !important;
}

@media (max-width: 767px) {
  .an-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .an-date-nav {
    width: 100%;
  }

  .an-date-nav input[type="date"] {
    flex: 1;
    width: auto;
  }

  .an-source-layout {
    justify-content: center;
  }

  .an-chart-wrap {
    height: 220px;
  }
}

/* Inline edit button in booking financial summary */
.bv-fin-edit {
  border: 0;
  background: none;
  padding: 0 2px;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  line-height: 1;
  font-size: 0.8rem;
}
.bv-fin-edit:hover {
  opacity: 1;
}