/* Mr Barber Theme App Shell — sidebar, header, mobile bottom bar & bottom sheet.
 * Used for: every new theme screen (phase 1.1). Built on tokens.css only. */

/* ─── Layout skeleton ─────────────────────────────────────────── */
.mrb-shell {
  display: flex;
  min-height: 100vh;
  background: var(--mrb-bg);
  color: var(--mrb-text-primary);
}

.mrb-shell__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin-inline-start: var(--mrb-sidebar-width);
  padding-top: var(--mrb-header-height);
  transition: margin-inline-start var(--mrb-transition);
}

/* ─── Sidebar ────────────────────────────────────────────────── */
.mrb-sidebar {
  position: fixed;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: var(--mrb-sidebar-width);
  display: flex;
  flex-direction: column;
  background: var(--mrb-surface);
  border-inline-end: 1px solid var(--mrb-border-faint);
  z-index: 40;
  transition: transform var(--mrb-transition-slow), width var(--mrb-transition-slow);
}

.mrb-sidebar__header {
  display: flex;
  align-items: center;
  gap: var(--mrb-gap-sm);
  height: var(--mrb-header-height);
  padding: 0 var(--mrb-gap);
  border-bottom: 1px solid var(--mrb-border-faint);
  flex-shrink: 0;
}

.mrb-sidebar__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--mrb-text-primary);
  font-weight: var(--mrb-font-weight-bold);
  font-size: var(--mrb-font-size-lg);
  min-width: 0;
}

.mrb-sidebar__logo img,
.mrb-sidebar__logo .mrb-logo {
  width: 150px;
  border-radius: var(--mrb-radius-sm);
  object-fit: contain;
  flex-shrink: 0;
}

.mrb-sidebar__logo .mrb-logo {
  color: var(--mrb-logo-color);
  display: block;
}

/* Mr Barber logo mark — the inline SVG keeps currentColor fills so the wrapper
 * color (--mrb-logo-color) tints the whole mark; used in the sidebar header. */

.mrb-sidebar__logo-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mrb-sidebar__nav {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--mrb-gap-sm) 0;
}

.mrb-nav-group {
  margin: 0 0 var(--mrb-gap) 0;
}

.mrb-nav-group__title {
  display: block;
  padding: var(--mrb-gap-sm) var(--mrb-gap) 4px;
  font-size: var(--mrb-font-size-xs);
  font-weight: var(--mrb-font-weight-semibold);
  color: var(--mrb-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mrb-nav-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nav item block */
.mrb-nav-item a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px var(--mrb-gap);
  margin: 1px 8px;
  border-radius: var(--mrb-radius-sm);
  color: var(--mrb-text-secondary);
  text-decoration: none;
  font-size: var(--mrb-font-size-md);
  font-weight: var(--mrb-font-weight-semibold);
  transition: background var(--mrb-transition-fast), color var(--mrb-transition-fast);
}

.mrb-nav-item a:hover {
  background: var(--mrb-surface-hover);
  color: var(--mrb-text-primary);
}

.mrb-nav-item.is-active a {
  background: color-mix(in srgb, var(--mrb-brand-accent) 12%, transparent);
  color: var(--mrb-brand-accent);
  font-weight: var(--mrb-font-weight-semibold);
}

.mrb-nav-item__icon {
  width: 20px;
  height: 20px;
  font-size: 18px;
  color: var(--mrb-text-muted);
  flex-shrink: 0;
}

.mrb-nav-item a:hover .mrb-nav-item__icon,
.mrb-nav-item.is-active .mrb-nav-item__icon {
  color: inherit;
}

.mrb-nav-item__label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mrb-nav-item__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--mrb-radius-pill);
  background: var(--mrb-brand-accent);
  color: var(--mrb-brand-text-on-accent);
  font-size: var(--mrb-font-size-xs);
  font-weight: var(--mrb-font-weight-bold);
}

/* Mr Barber attention dot — used for nav items that still need the user's
   action (client profile completion after first sign-up). Variants: none;
   a count badge (above) always wins over the dot. */
.mrb-nav-item__dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mrb-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mrb-danger) 22%, transparent);
  flex: 0 0 9px;
}

.mrb-nav-item__soon {
  font-size: 10px;
  font-weight: var(--mrb-font-weight-semibold);
  color: var(--mrb-brand-accent);
  background: color-mix(in srgb, var(--mrb-brand-accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--mrb-brand-accent) 35%, transparent);
  padding: 1px 7px;
  border-radius: var(--mrb-radius-pill);
  white-space: nowrap;
}

.mrb-nav-item.is-disabled a {
  opacity: 0.55;
  cursor: not-allowed;
}

.mrb-nav-item.is-disabled a:hover {
  background: transparent;
  color: var(--mrb-text-muted);
}

.mrb-sidebar__footer {
  border-top: 1px solid var(--mrb-border-faint);
  padding: var(--mrb-gap-sm) 0;
  flex-shrink: 0;
}

.mrb-sidebar__update {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 16px);
  margin: 0 8px;
  padding: 9px var(--mrb-gap);
  border: none;
  border-radius: var(--mrb-radius-sm);
  background: var(--mrb-surface-2);
  color: var(--mrb-text-secondary);
  font-family: var(--mrb-font-family);
  text-align: start;
  cursor: pointer;
  transition: background var(--mrb-transition-fast), color var(--mrb-transition-fast);
}

.mrb-sidebar__update:hover {
  background: var(--mrb-surface-hover);
  color: var(--mrb-text-primary);
}

.mrb-sidebar__update .mrb-icon.mrb-sidebar__update-caret {
  margin-inline-start: auto;
  color: var(--mrb-text-faint);
  font-size: 0.7rem;
}

/* Mr Barber update-text — exact flex layout so the label + version stay on
 * their own lines and truncate instead of pushing the caret off the button. */
.mrb-sidebar__update-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  line-height: 1.4;
}

.mrb-sidebar__update-label,
.mrb-sidebar__update-version {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mrb-sidebar__update-label {
  font-size: var(--mrb-font-size-xs);
  font-weight: var(--mrb-font-weight-semibold);
}

.mrb-sidebar__update-version {
  font-size: 11px;
  color: var(--mrb-text-faint);
}

/* ─── Header (fixed top bar — never scrolls with the page) ───── */
.mrb-header {
  position: fixed;
  top: 0;
  inset-inline-start: var(--mrb-sidebar-width);
  inset-inline-end: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--mrb-gap);
  height: var(--mrb-header-height);
  padding: 0 var(--mrb-gap-lg);
  background: var(--mrb-surface);
  border-bottom: 1px solid var(--mrb-border-faint);
}

.mrb-header__burger {
  display: none;
  background: none;
  border: none;
  color: var(--mrb-text-primary);
  padding: 8px;
  border-radius: var(--mrb-radius-sm);
  cursor: pointer;
}

.mrb-header__burger .mrb-icon {
  font-size: 1.25rem;
}

.mrb-header__burger:hover {
  background: var(--mrb-surface-hover);
}

.mrb-header__search {
  flex: 1;
  max-width: 480px;
  position: relative;
}

.mrb-header__search input {
  width: 100%;
  height: 38px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--mrb-border);
  border-radius: var(--mrb-radius-sm);
  background: var(--mrb-surface-2);
  color: var(--mrb-text-primary);
  font-family: var(--mrb-font-family);
  font-size: var(--mrb-font-size-sm);
  outline: none;
  transition: border-color var(--mrb-transition-fast), box-shadow var(--mrb-transition-fast);
}

[dir="rtl"] .mrb-header__search input {
  padding: 0 38px 0 14px;
}

.mrb-header__search input:focus {
  border-color: var(--mrb-brand-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mrb-brand-accent) 20%, transparent);
}

.mrb-header__search .mrb-header__search-icon {
  position: absolute;
  inset-inline-start: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mrb-text-faint);
  font-size: 0.875rem;
  pointer-events: none;
}

/* Header quick search — live suggestions panel (populated by core.js). */
.mrb-search-panel {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  inset-inline-end: 0;
  background: var(--mrb-surface);
  border: 1px solid var(--mrb-border);
  border-radius: var(--mrb-radius);
  box-shadow: var(--mrb-shadow-lg);
  z-index: 60;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--mrb-transition), transform var(--mrb-transition), visibility var(--mrb-transition);
}

.mrb-search-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mrb-search-panel__group {
  padding: 6px 0;
  border-bottom: 1px solid var(--mrb-border);
}

.mrb-search-panel__group:last-child {
  border-bottom: none;
}

.mrb-search-panel__group-title {
  display: block;
  padding: 6px 14px 2px;
  font-size: 10px;
  font-weight: var(--mrb-font-weight-semibold);
  color: var(--mrb-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mrb-search-panel__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: var(--mrb-text-secondary);
  font-family: var(--mrb-font-family);
  font-size: var(--mrb-font-size-sm);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--mrb-transition-fast), color var(--mrb-transition-fast);
}

.mrb-search-panel__item:hover,
.mrb-search-panel__item.is-active {
  background: var(--mrb-surface-hover);
  color: var(--mrb-text-primary);
}

.mrb-search-panel__item .mrb-icon {
  font-size: 0.9rem;
  color: var(--mrb-brand-accent);
}

.mrb-search-panel__label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mrb-search-panel__hint {
  font-size: 11px;
  color: var(--mrb-text-faint);
  font-family: var(--mrb-font-mono);
}

.mrb-search-panel__empty {
  padding: 18px 14px;
  color: var(--mrb-text-faint);
  font-size: var(--mrb-font-size-sm);
  text-align: center;
}

.mrb-header__actions {
  display: flex;
  align-items: center;
  gap: var(--mrb-gap-sm);
  margin-inline-start: auto;
}

.mrb-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: var(--mrb-radius-pill);
  background: transparent;
  color: var(--mrb-text-secondary);
  cursor: pointer;
  transition: background var(--mrb-transition-fast), color var(--mrb-transition-fast);
}

.mrb-icon-btn .mrb-icon {
  font-size: 1.05rem;
}

.mrb-icon-btn:hover {
  background: var(--mrb-surface-hover);
  color: var(--mrb-text-primary);
}

.mrb-icon-btn__count {
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--mrb-radius-pill);
  background: var(--mrb-brand-accent);
  color: var(--mrb-brand-text-on-accent);
  font-size: 10px;
  font-weight: var(--mrb-font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Account dropdown */
.mrb-account {
  position: relative;
}

.mrb-account__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 10px;
  border: none;
  border-radius: var(--mrb-radius-pill);
  background: var(--mrb-surface-2);
  color: var(--mrb-text-primary);
  cursor: pointer;
  font-family: var(--mrb-font-family);
  font-size: var(--mrb-font-size-sm);
  font-weight: var(--mrb-font-weight-medium);
  transition: background var(--mrb-transition-fast);
}

.mrb-account__trigger:hover {
  background: var(--mrb-surface-hover);
}

.mrb-account__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--mrb-brand-accent);
  color: var(--mrb-brand-text-on-accent);
  font-size: 0.8rem;
  font-weight: var(--mrb-font-weight-bold);
}

/* Real photo inside the header avatar (owner 2026-10-28): the img fills the
   letter circle exactly; overflow keeps it circular. No photo → letter. */
.mrb-account__avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.mrb-account__name {
  max-width: 140px;  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mrb-account__menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 200px;
  background: var(--mrb-surface);
  border: 1px solid var(--mrb-border);
  border-radius: var(--mrb-radius);
  box-shadow: var(--mrb-shadow-lg);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--mrb-transition), transform var(--mrb-transition), visibility var(--mrb-transition);
  z-index: 50;
}

.mrb-account.is-open .mrb-account__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mrb-account__menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--mrb-radius-sm);
  color: var(--mrb-text-secondary);
  text-decoration: none;
  font-size: var(--mrb-font-size-sm);
  transition: background var(--mrb-transition-fast), color var(--mrb-transition-fast);
}

.mrb-account__menu a:hover {
  background: var(--mrb-surface-hover);
  color: var(--mrb-text-primary);
}

.mrb-account__menu a.is-danger {
  color: var(--mrb-danger);
}

.mrb-account__menu a.is-danger:hover {
  background: var(--mrb-danger-bg);
}

.mrb-account__menu-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
}

.mrb-account__menu-name {
  font-size: var(--mrb-font-size-sm);
  font-weight: var(--mrb-font-weight-semibold);
  color: var(--mrb-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mrb-account__menu-role {
  font-size: var(--mrb-font-size-xs);
  color: var(--mrb-text-faint);
}

.mrb-account__menu-divider {
  height: 1px;
  background: var(--mrb-border);
  margin: 4px 2px;
}

.mrb-account__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: var(--mrb-radius-sm);
  background: transparent;
  color: var(--mrb-text-secondary);
  font-family: var(--mrb-font-family);
  font-size: var(--mrb-font-size-sm);
  text-align: start;
  cursor: pointer;
  transition: background var(--mrb-transition-fast), color var(--mrb-transition-fast);
}

.mrb-account__row:hover {
  background: var(--mrb-surface-hover);
  color: var(--mrb-text-primary);
}

.mrb-account__row-icon {
  width: 20px;
  height: 20px;
  font-size: 18px;
  flex-shrink: 0;
  color: var(--mrb-text-muted);
}

.mrb-account__row-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mrb-account__row-toggle {
  flex-shrink: 0;
}

/* Switch (theme row) */
.mrb-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 19px;
  border-radius: var(--mrb-radius-pill);
  background: var(--mrb-border-strong);
  transition: background var(--mrb-transition-fast);
}

.mrb-switch__thumb {
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--mrb-surface);
  box-shadow: var(--mrb-shadow-sm);
  transition: transform var(--mrb-transition);
}

[dir="rtl"] .mrb-switch.is-on .mrb-switch__thumb {
  transform: translateX(-17px);
}

[dir="ltr"] .mrb-switch.is-on .mrb-switch__thumb {
  transform: translateX(17px);
}

.mrb-switch.is-on {
  background: var(--mrb-brand-accent);
}

/* Language switch (account menu / sheet) */
.mrb-account__row--lang {
  cursor: default;
}

.mrb-account__row--lang:hover {
  background: transparent;
  color: var(--mrb-text-secondary);
}

.mrb-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--mrb-surface-2);
  border-radius: var(--mrb-radius-pill);
}

.mrb-lang-switch__item {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--mrb-radius-pill);
  color: var(--mrb-text-muted);
  text-decoration: none;
  font-size: var(--mrb-font-size-xs);
  font-weight: var(--mrb-font-weight-medium);
  transition: background var(--mrb-transition-fast), color var(--mrb-transition-fast);
}

.mrb-lang-switch__item:hover {
  color: var(--mrb-text-primary);
}

.mrb-lang-switch__item.is-active {
  background: var(--mrb-brand-accent);
  color: var(--mrb-brand-text-on-accent);
}

/* Notifications panel (desktop dropdown / mobile sheet) */
.mrb-notif {
  position: fixed;
  top: calc(var(--mrb-header-height) + 10px);
  inset-inline-end: var(--mrb-gap-lg);
  width: 340px;
  max-width: calc(100vw - 32px);
  max-height: min(480px, calc(100vh - var(--mrb-header-height) - 30px));
  background: var(--mrb-surface);
  border: 1px solid var(--mrb-border);
  border-radius: var(--mrb-radius);
  box-shadow: var(--mrb-shadow-lg);
  z-index: 50;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--mrb-transition), transform var(--mrb-transition), visibility var(--mrb-transition);
}

.mrb-notif.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mrb-notif__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--mrb-gap);
  border-bottom: 1px solid var(--mrb-border);
  flex-shrink: 0;
}

.mrb-notif__title {
  font-size: var(--mrb-font-size-sm);
  font-weight: var(--mrb-font-weight-semibold);
}

.mrb-notif__close {
  background: none;
  border: none;
  color: var(--mrb-text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--mrb-radius-sm);
}

.mrb-notif__close:hover {
  background: var(--mrb-surface-hover);
  color: var(--mrb-text-primary);
}

.mrb-notif__body {
  overflow-y: auto;
  padding: 6px;
}

.mrb-notif__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  color: var(--mrb-text-faint);
  font-size: var(--mrb-font-size-sm);
  text-align: center;
}

.mrb-notif__empty .mrb-icon {
  font-size: 1.8rem;
  opacity: 0.6;
}

.mrb-notif__item {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: var(--mrb-radius-sm);
  transition: background var(--mrb-transition-fast);
}

.mrb-notif__item:hover {
  background: var(--mrb-surface-hover);
}

.mrb-notif__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 0.9rem;
}.mrb-notif__icon--pending {
  background: color-mix(in srgb, var(--mrb-brand-accent) 14%, transparent);
  color: var(--mrb-brand-accent);
}

.mrb-notif__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mrb-notif__title-line {
  font-size: var(--mrb-font-size-sm);
  font-weight: var(--mrb-font-weight-semibold);
  color: var(--mrb-text-primary);
}

.mrb-notif__msg {
  font-size: var(--mrb-font-size-xs);
  color: var(--mrb-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mrb-notif__time {
  font-size: 11px;
  color: var(--mrb-text-faint);
}

/* Changelog modal */
.mrb-changelog {
  display: flex;
  flex-direction: column;
  gap: var(--mrb-gap-lg);
}

.mrb-changelog__ver {
  border-inline-start: 3px solid var(--mrb-brand-accent);
  padding-inline-start: var(--mrb-gap);
}

.mrb-changelog__ver-badge {
  display: inline-block;
  font-size: var(--mrb-font-size-xs);
  font-weight: var(--mrb-font-weight-bold);
  color: var(--mrb-brand-accent);
  background: color-mix(in srgb, var(--mrb-brand-accent) 12%, transparent);
  border-radius: var(--mrb-radius-pill);
  padding: 2px 10px;
  margin-inline-end: 8px;
}

.mrb-changelog__ver-date {
  font-size: var(--mrb-font-size-xs);
  color: var(--mrb-text-faint);
}

.mrb-changelog__list {
  margin: 8px 0 0;
  padding-inline-start: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--mrb-font-size-sm);
  color: var(--mrb-text-secondary);
}

/* ─── YouTube "How it works" (sidebar support item + lazy modal) ─── */
.mrb-youtube {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 16px);
  margin: 1px 8px;
  padding: 9px var(--mrb-gap);
  border: none;
  border-radius: var(--mrb-radius-sm);
  background: transparent;
  color: var(--mrb-text-secondary);
  font-family: var(--mrb-font-family);
  font-size: var(--mrb-font-size-sm);
  font-weight: var(--mrb-font-weight-medium);
  text-align: start;
  cursor: pointer;
  transition: background var(--mrb-transition-fast), color var(--mrb-transition-fast);
}

.mrb-youtube:hover {
  background: var(--mrb-surface-hover);
  color: var(--mrb-text-primary);
}

.mrb-youtube .mrb-icon {
  font-size: 18px;
  color: var(--mrb-danger);
}

.mrb-youtube__label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mrb-youtube__badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: var(--mrb-font-weight-semibold);
  color: var(--mrb-surface);
  background: var(--mrb-danger);
  border-radius: var(--mrb-radius-pill);
  padding: 2px 8px;
  animation: mrb-youtube-glow 2.4s ease-in-out infinite;
}

@keyframes mrb-youtube-glow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mrb-danger) 45%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--mrb-danger) 0%, transparent); }
}

/* Mr Barber YouTube-frame — lazy iframe holder (16:9) injected by core.js. */
.mrb-youtube-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--mrb-bg);
  border-radius: var(--mrb-radius-sm);
  overflow: hidden;
}

.mrb-youtube-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.mrb-youtube-frame__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--mrb-text-muted);
  font-size: var(--mrb-font-size-sm);
}

.mrb-youtube-frame__placeholder .mrb-icon {
  font-size: 2.4rem;
  color: var(--mrb-danger);
}

/* ─── Content area ───────────────────────────────────────────── */
.mrb-content {
  flex: 1;
  padding: var(--mrb-gap-lg);
}

.mrb-content__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* ─── Client shell: desktop side gutters ─────────────────────────────
 * Owner decision 2026-10-25: customer pages must read as a centred page,
 * not as a full-bleed strip beside the rail. Values are the owner's own
 * numbers — ~100px for the regular pages and ~140px for the money pages
 * (wallet / my cards / security). Mobile (≤1023px) keeps the plain
 * var(--mrb-gap) padding from the block below. */
@media (min-width: 1024px) {
  .mrb-shell--client .mrb-content {
    padding-inline: 40px;
  }
}

@media (min-width: 1280px) {
  .mrb-shell--client .mrb-content {
    padding-inline: 100px;
  }

  .mrb-shell--client.mrb-shell--view-client-wallet .mrb-content,
  .mrb-shell--client.mrb-shell--view-client-cards .mrb-content,
  .mrb-shell--client.mrb-shell--view-security .mrb-content {
    padding-inline: 140px;
  }
}

@media (min-width: 1440px) {
  .mrb-shell--client .mrb-content {
    padding-inline: 140px;
  }
}

/* ─── Mobile bottom bar ───────────────────────────────────────── */
.mrb-bottom-bar {
  display: none;
  position: fixed;
  bottom: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: var(--mrb-mobile-nav-height);
  background: var(--mrb-surface);
  border-top: 1px solid var(--mrb-border);
  z-index: 45;
}

.mrb-bottom-bar__list {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mrb-bottom-bar__item {
  flex: 1;
  display: flex;
}

.mrb-bottom-bar__item a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--mrb-text-muted);
  text-decoration: none;
  font-size: 10px;
  font-weight: var(--mrb-font-weight-medium);
  transition: color var(--mrb-transition-fast);
}

.mrb-bottom-bar__item a .mrb-icon {
  font-size: 1.15rem;
}

.mrb-bottom-bar__item a.is-active {
  color: var(--mrb-brand-accent);
}

/* ─── Bottom sheet (mobile full menu) ─────────────────────────── */
.mrb-sheet-overlay {
  position: fixed;
  inset: 0;
  background: var(--mrb-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--mrb-transition), visibility var(--mrb-transition);
  z-index: 60;
}

.mrb-sheet {
  position: fixed;
  bottom: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  max-height: 82vh;
  background: var(--mrb-surface);
  border-radius: var(--mrb-radius) var(--mrb-radius) 0 0;
  transform: translateY(100%);
  transition: transform var(--mrb-transition-slow);
  z-index: 61;
  display: flex;
  flex-direction: column;
}

.mrb-sheet.is-open {
  transform: translateY(0);
}

.mrb-sheet-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.mrb-sheet__handle {
  width: 40px;
  height: 4px;
  border-radius: var(--mrb-radius-pill);
  background: var(--mrb-border-strong);
  margin: 10px auto 4px;
  flex-shrink: 0;
  touch-action: none;
}

.mrb-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px var(--mrb-gap) 10px;
  border-bottom: 1px solid var(--mrb-border);
  font-weight: var(--mrb-font-weight-semibold);
  font-size: var(--mrb-font-size-md);
  touch-action: none;
}

.mrb-sheet__close {
  background: none;
  border: none;
  color: var(--mrb-text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--mrb-radius-sm);
}

.mrb-sheet__close:hover {
  background: var(--mrb-surface-hover);
  color: var(--mrb-text-primary);
}

.mrb-sheet__body {
  overflow-y: auto;
  padding: var(--mrb-gap-sm) 0 var(--mrb-gap-lg);
}

.mrb-sheet__extras {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 8px 8px;
}

.mrb-sheet__howitworks {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 8px 0;
  padding: 9px 10px;
  border: none;
  border-radius: var(--mrb-radius-sm);
  background: transparent;
  color: var(--mrb-text-secondary);
  font-family: var(--mrb-font-family);
  font-size: var(--mrb-font-size-sm);
  font-weight: var(--mrb-font-weight-medium);
  text-align: start;
  cursor: pointer;
  transition: background var(--mrb-transition-fast), color var(--mrb-transition-fast);
}

.mrb-sheet__howitworks:hover {
  background: var(--mrb-surface-hover);
  color: var(--mrb-text-primary);
}

.mrb-sheet__howitworks .mrb-icon {
  font-size: 18px;
  color: var(--mrb-danger);
}

.mrb-sheet__logout {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 9px 10px;
  border-radius: var(--mrb-radius-sm);
  color: var(--mrb-danger);
  text-decoration: none;
  font-size: var(--mrb-font-size-sm);
  transition: background var(--mrb-transition-fast);
}

.mrb-sheet__logout:hover {
  background: var(--mrb-danger-bg);
}

/* ─── Settings mode: dual sidebar (desktop) ─────────────────────
 * When a settings screen is active the primary sidebar collapses to icons-only
 * and a secondary settings sidebar appears beside it (between the rail and the
 * content). RTL-safe: inset-inline-start mirrors the whole layout. */

.mrb-settings-sidebar {
  position: fixed;
  top: var(--mrb-header-height);
  bottom: 0;
  inset-inline-start: var(--mrb-sidebar-width-collapsed);
  width: var(--mrb-settings-sidebar-width);
  background: var(--mrb-surface);
  border-inline-end: 1px solid var(--mrb-border-faint);
  z-index: 29;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: var(--mrb-gap-sm);
}

.mrb-settings-sidebar::-webkit-scrollbar {
  display: none;
}

.mrb-settings-sidebar__head {
  padding: var(--mrb-gap-sm) var(--mrb-gap);
  margin-bottom: var(--mrb-gap-sm);
}

.mrb-settings-sidebar__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--mrb-font-weight-bold);
  font-size: var(--mrb-font-size-sm);
  color: var(--mrb-text-primary);
  text-decoration: none;
}

.mrb-settings-sidebar__title .mrb-icon {
  font-size: 18px;
  color: var(--mrb-brand-accent);
}

.mrb-settings-group {
  margin: 0 0 var(--mrb-gap) 0;
}

.mrb-settings-group__title {
  display: block;
  padding: var(--mrb-gap-sm) var(--mrb-gap) 4px;
  font-size: var(--mrb-font-size-xs);
  font-weight: var(--mrb-font-weight-semibold);
  color: var(--mrb-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mrb-settings-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mrb-settings-item a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px var(--mrb-gap);
  margin: 1px 8px;
  border-radius: var(--mrb-radius-sm);
  color: var(--mrb-text-secondary);
  text-decoration: none;
  font-size: var(--mrb-font-size-md);
  font-weight: var(--mrb-font-weight-medium);
  transition: background var(--mrb-transition-fast), color var(--mrb-transition-fast);
}

.mrb-settings-item a:hover {
  background: var(--mrb-surface-hover);
  color: var(--mrb-text-primary);
}

.mrb-settings-item.is-active a {
  background: color-mix(in srgb, var(--mrb-brand-accent) 12%, transparent);
  color: var(--mrb-brand-accent);
  font-weight: var(--mrb-font-weight-semibold);
}

.mrb-settings-item .mrb-icon {
  width: 20px;
  height: 20px;
  font-size: 18px;
  color: var(--mrb-text-muted);
  flex-shrink: 0;
}

.mrb-settings-item.is-active .mrb-icon,
.mrb-settings-item a:hover .mrb-icon {
  color: inherit;
}

/* Monogram logo mark: hidden normally, shown only when the rail collapses. */
.mrb-sidebar__logo-monogram {
  display: none;
}

/* ─── Settings links page (view=settings) ────────────────────────
 * Rendered by view-settings.php from settings_groups() (single source of
 * truth, same data as the secondary sidebar). On desktop it's a compact
 * grouped list; on mobile (≤768px, settings shell covers the header) it
 * becomes the full-screen settings links page with tappable rows. */
.mrb-settings-page {
  max-width: 560px;
}

.mrb-settings-page__group {
  margin: 0 0 var(--mrb-gap-lg);
}

.mrb-settings-page__group-title {
  display: block;
  padding: 0 var(--mrb-gap-sm) 8px;
  font-size: var(--mrb-font-size-xs);
  font-weight: var(--mrb-font-weight-semibold);
  color: var(--mrb-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mrb-settings-page__list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--mrb-bg-surface, var(--mrb-surface));
  border: 1px solid var(--mrb-border-faint);
  border-radius: var(--mrb-radius-md, 10px);
  overflow: hidden;
}

.mrb-settings-page__item + .mrb-settings-page__item {
  border-top: 1px solid var(--mrb-border-faint);
}

.mrb-settings-page__item a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px var(--mrb-gap);
  color: var(--mrb-text-primary);
  text-decoration: none;
  font-size: var(--mrb-font-size-sm);
  font-weight: var(--mrb-font-weight-medium);
  transition: background var(--mrb-transition-fast);
}

.mrb-settings-page__item a:active {
  background: var(--mrb-bg-surface);
}

.mrb-settings-page__item a .mrb-icon {
  color: var(--mrb-text-muted);
  flex-shrink: 0;
}

.mrb-settings-page__item.is-active a {
  color: var(--mrb-brand-accent);
}

.mrb-settings-page__item.is-active a .mrb-icon {
  color: var(--mrb-brand-accent);
}

.mrb-settings-page__item-label {
  flex: 1;
  min-width: 0;
}

/* Caret arrow at the end side, pushed there regardless of direction. */
.mrb-settings-page__item-caret {
  display: inline-flex;
  margin-inline-start: auto;
  color: var(--mrb-text-faint);
  flex-shrink: 0;
}

.mrb-settings-page__item-caret .mrb-icon {
  font-size: 16px;
  color: inherit;
}

/* Settings content breathing room: page head + form are both inset so the
 * settings pages read consistently (airy width). Scoped to the settings shell
 * only — other pages (bookings, services...) keep their full-width head.
 * The security view (SECURITY-PAGE-PLAN.md) shares this exact rhythm so its
 * head/spacing match the profile on every device. */
.mrb-shell--settings .mrb-page-head,
.mrb-shell--settings .mrb-settings-form,
.mrb-shell--settings .mrb-security-section {
  padding-inline: 120px;
}

@media (max-width: 1200px) {
  .mrb-shell--settings .mrb-page-head,
  .mrb-shell--settings .mrb-settings-form,
  .mrb-shell--settings .mrb-security-section { padding-inline: 72px; }
}
@media (max-width: 992px) {
  .mrb-shell--settings .mrb-page-head,
  .mrb-shell--settings .mrb-settings-form,
  .mrb-shell--settings .mrb-security-section { padding-inline: 40px; }
}
@media (max-width: 1023px) {
  .mrb-shell--settings .mrb-page-head,
  .mrb-shell--settings .mrb-settings-form,
  .mrb-shell--settings .mrb-security-section { padding-inline: 0; }
}

@media (min-width: 1024px) {
  .mrb-shell--settings .mrb-sidebar {
    width: var(--mrb-sidebar-width-collapsed);
  }

  .mrb-shell--settings .mrb-header {
    inset-inline-start: var(--mrb-sidebar-width-collapsed);
  }

  .mrb-shell--settings .mrb-shell__main {
    margin-inline-start: calc(var(--mrb-sidebar-width-collapsed) + var(--mrb-settings-sidebar-width));
  }

  /* Collapse the primary nav to icons-only. */
  .mrb-shell--settings .mrb-nav-group__title,
  .mrb-shell--settings .mrb-nav-item__label,
  .mrb-shell--settings .mrb-nav-item__badge,
  .mrb-shell--settings .mrb-nav-item__soon,
  .mrb-shell--settings .mrb-youtube__label,
  .mrb-shell--settings .mrb-youtube__badge,
  .mrb-shell--settings .mrb-sidebar__update-text {
    display: none;
  }

  .mrb-shell--settings .mrb-nav-item a {
    justify-content: center;
    padding: 9px 0;
    margin: 1px 10px;
  }

  .mrb-shell--settings .mrb-youtube,
  .mrb-shell--settings .mrb-sidebar__update {
    justify-content: center;
  }

  /* Logo → centered monogram (icon mark). */
  .mrb-shell--settings .mrb-sidebar__logo-mark,
  .mrb-shell--settings .mrb-sidebar__logo img,
  .mrb-shell--settings .mrb-sidebar__logo-text {
    display: none;
  }

  .mrb-shell--settings .mrb-sidebar__logo {
    justify-content: center;
  }

  .mrb-shell--settings .mrb-sidebar__logo-monogram {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--mrb-brand-accent);
    color: var(--mrb-brand-text-on-accent);
    font-weight: var(--mrb-font-weight-bold);
    font-size: var(--mrb-font-size-md);
  }

  /* الأيقونة الحقيقية (المنصة للحلاقين، لوجو الصالون للزبون) تحل محل الحرف:
     تُعرض وحدها بلا خلفية ملوّنة وبلا قصّ — الدائرة الملوّنة كانت تبتلع
     تفاصيل الأيقونة فيظهر مربّع/دائرة بلا معنى (قرار المالك 2026-10-25). */
  .mrb-shell--settings .mrb-sidebar__logo-monogram.has-image {
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }

  .mrb-shell--settings .mrb-sidebar__logo-monogram img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
}

/* ─── Safe area & responsive ──────────────────────────────────── */
@media (max-width: 1023px) {
  .mrb-sidebar {
    transform: translateX(-100%);
  }

  [dir="rtl"] .mrb-sidebar {
    transform: translateX(100%);
  }

  .mrb-sidebar.is-open {
    transform: translateX(0);
  }

  .mrb-shell__main {
    margin-inline-start: 0;
  }

  .mrb-header {
    inset-inline-start: 0;
  }

  .mrb-header__burger {
    display: inline-flex;
  }

  .mrb-sidebar__backdrop {
    position: fixed;
    inset: 0;
    background: var(--mrb-overlay);
    z-index: 39;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--mrb-transition), visibility var(--mrb-transition);
  }

  .mrb-sidebar__backdrop.is-open {
    opacity: 1;
    visibility: visible;
  }
}

@media (max-width: 1023px) {
  .mrb-bottom-bar {
    display: block;
  }

  .mrb-content {
    padding: var(--mrb-gap) var(--mrb-gap) calc(var(--mrb-mobile-nav-height) + var(--mrb-gap));
  }

  .mrb-account__name {
    display: none;
  }

  .mrb-account__trigger {
    width: 38px;
    padding: 0;
    justify-content: center;
  }

  .mrb-header {
    padding: 0 var(--mrb-gap);
  }

  .mrb-notif {
    inset-inline-end: var(--mrb-gap);
    inset-inline-start: var(--mrb-gap);
    width: auto;
    max-width: none;
    max-height: min(70vh, calc(100vh - var(--mrb-header-height) - 20px));
  }
}

/* ─── Scrollbars: page thin + themed, sidebar hidden ─────────────
 * Mr Barber Theme scrollbars — used for the isolated theme page
 * (document) and the sidebar nav. Sidebar's own scrollbar is hidden
 * because the nav is keyboard/scroll-wheel friendly and a visible
 * scrollbar distracts from the rail look.
 * scrollbar-gutter: stable reserves space for the scrollbar at all
 * times so no layout shift occurs when overlays lock/unlock body
 * overflow. (§13.9 scrollbar fix) */
html {
  scrollbar-gutter: stable;
}

html,
body,
.mrb-shell {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--mrb-text-faint) 45%, transparent) transparent;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.mrb-shell::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.mrb-shell::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.mrb-shell::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--mrb-text-faint) 45%, transparent);
  border-radius: var(--mrb-radius-pill);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.mrb-shell::-webkit-scrollbar-thumb:hover {
  background: var(--mrb-brand-accent);
}

.mrb-sidebar__nav {
  scrollbar-width: none;
}

.mrb-sidebar__nav::-webkit-scrollbar {
  display: none;
}

/* ─── Mobile settings mode: full-page settings (≤768px) ─────────
 * User spec 2026-09-06: pressing "Settings" must open a TRUE full page —
 * the secondary settings sidebar stretched full width, the regular header
 * fully covered (space is scarce), and the bottom bar stays. A sticky back
 * row (arrow only) sits at the very top: on sub-screens it returns to the
 * settings links page; profile honors the arrival origin (mobile-back.js).
 * History/trail navigation works natively because every link is a real href. */
@media (max-width: 1023px) {
  /* On settings SUB-screens the back/save row IS the header (user spec,
     final 2026-09-06): the regular search/notifications header is hidden
     and the sticky row owns the very top of the screen. (Desktop is
     untouched — the row's base state is display:none.) */
  .mrb-shell--settings-sub .mrb-header {
    display: none;
  }

  .mrb-shell--settings-sub .mrb-shell__main {
    padding-top: 0;
    margin-inline-start: 0;
  }

  /* Content area: the sticky back/save row supplies the top, the bottom
     bar keeps its reserved space so the last rows never hide behind it. */
  .mrb-shell--settings-sub .mrb-content {
    padding-top: calc(44px + env(safe-area-inset-top));
    padding-bottom: calc(var(--mrb-mobile-nav-height) + var(--mrb-gap));
  }

  /* Full-screen links page: the settings sidebar is REPLACED on mobile by
     the in-content links page (view-settings.php) — hide the duplicate
     sidebar entirely and let the links page own the screen. */
  .mrb-shell--settings .mrb-settings-sidebar {
    display: none;
  }

  /* Sticky back row (MOBILE ONLY — display:none base keeps it off desktop):
     arrow-only link on the start side, text-style Save on the end side.
     Sticks to the very top (it IS the header now). */
  .mrb-settings-mobile-back {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    z-index: 44;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: auto;
    margin-inline: 0;
    padding: calc(10px + env(safe-area-inset-top)) var(--mrb-gap) 10px;
    background: var(--mrb-surface);
    border-bottom: 1px solid var(--mrb-border-faint);
    color: var(--mrb-text-primary);
    min-height: 44px;
  }

  .mrb-settings-mobile-back__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    margin: -6px -8px;
    color: var(--mrb-text-primary);
    text-decoration: none;
  }

  .mrb-settings-mobile-back__link .mrb-icon {
    font-size: 22px;
    color: inherit;
  }

  .mrb-settings-mobile-back__link:active {
    opacity: 0.6;
  }

  /* Text-style save: icon + label in the FONT color token — explicitly NOT a
     colored button (user spec). Transparent background, no border. */
  .mrb-settings-mobile-save {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    margin: -6px 0;
    border: 0;
    background: transparent;
    color: var(--mrb-text-primary);
    font-family: var(--mrb-font-family);
    font-size: var(--mrb-font-size-md);
    font-weight: var(--mrb-font-weight-semibold);
    cursor: pointer;
  }

  .mrb-settings-mobile-save .mrb-icon {
    font-size: 18px;
    color: inherit;
  }

  .mrb-settings-mobile-save:active {
    opacity: 0.6;
  }

  .mrb-settings-mobile-save:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .mrb-settings-mobile-back .mrb-icon {
    font-size: 20px;
    flex-shrink: 0;
    color: inherit;
  }

  .mrb-settings-mobile-back:active {
    background: var(--mrb-bg-surface);
  }

  /* Inline settings screens fill the width with sane gutters. The legacy
     .mrb-settings-form margin-top (80px, desktop sidebar era) must NOT apply
     here — the back row + normal flow spacing handle the top on mobile. */
  .mrb-shell--settings .mrb-page-head,
  .mrb-shell--settings .mrb-settings-form {
    padding-inline: var(--mrb-gap);
  }

  .mrb-shell--settings .mrb-settings-form {
    margin-top: var(--mrb-gap);
  }

  /* Security page: same mobile head treatment as the profile (title/subtitle
     hidden — the back/save row already identifies the screen). */
  .mrb-shell--settings .mrb-security-view .mrb-page-head__title,
  .mrb-shell--settings .mrb-security-view .mrb-page-head__subtitle {
    display: none;
  }

  /* Settings links page (view=settings): edge-to-edge tappable rows. */
  .mrb-settings-page {
    max-width: none;
  }

  .mrb-settings-page__list {
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .mrb-settings-page__item + .mrb-settings-page__item {
    border-top: 0;
  }

  .mrb-settings-page__item a {
    padding: 15px var(--mrb-gap);
    border-bottom: 1px solid var(--mrb-border-faint);
    font-size: var(--mrb-font-size-md);
  }
}

/* ─── Mobile header: search + notifications only ────────────────
 * The burger is hidden because the bottom bar already provides the
 * primary navigation; the account menu is hidden because theme /
 * language / logout live in the bottom sheet ("More"). Keeps the
 * header clean: search + notifications remain. (Settings mode is
 * handled separately above — its header is covered entirely.) */
@media (max-width: 1023px) {
  .mrb-header__burger,
  .mrb-account {
    display: none;
  }

  .mrb-header__search {
    max-width: none;
  }
}


/* ─── Header default area (search + actions row) ─── */
.mrb-header__default {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

/* ─── Settings mobile back row — MOBILE ONLY ────────────────────
 * Base state: hidden. The row exists in the DOM on every settings
 * sub-screen but only the ≤768px media block below turns it into the
 * sticky arrow + save bar (user spec 2026-09-06: never on desktop). */
.mrb-settings-mobile-back {
  display: none;
}

/* Timer pill removed (2026-08-24) — will return in future iteration */

/* ─── Client settings screens — phone top row (owner 2026-10-28) ───
 * The customer portal has no settings sidebar, but profile/security/
 * wallet/cards carry the same sticky back+action row as the barber's
 * settings sub-screens (the row markup itself now renders on client
 * shells too). The page head (title + its blue button) yields on
 * phones — the sticky row IS the header. Desktop is untouched. */
@media (max-width: 1023px) {
  .mrb-shell--client-settings .mrb-header {
    display: none;
  }

  .mrb-shell--client-settings .mrb-shell__main {
    padding-top: 0;
    margin-inline-start: 0;
  }

  .mrb-shell--client-settings .mrb-content {
    padding-top: calc(44px + env(safe-area-inset-top));
    padding-bottom: calc(var(--mrb-mobile-nav-height) + var(--mrb-gap));
  }

  .mrb-shell--client-settings .mrb-page-head {
    display: none;
  }

  /* «حجز جديد / موعد جديد / حجز موعد جديد» buttons inside page heads hide
   * on phones — the bottom bar's new-booking item replaces them. */
  .mrb-page-head [data-mrb-open-booking] {
    display: none;
  }
}