/**
 * RushPay global UI layer — uses CSS variables from brand_theme.css.php (admin-customizable).
 * Load order: Bootstrap → brand_theme.css.php → this file.
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

html {
  scroll-behavior: smooth;
  /* Prevent iOS Safari chrome / overscroll exposing default white paint */
  height: 100%;
  height: -webkit-fill-available;
  background-color: var(--rp-bg-deep, #1d1b1b);
}

body {
  font-family: var(--rp-font);
  color: var(--rp-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 100vh is unreliable on Mobile Safari — use layered fallbacks */
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  /* Pseudo carries ambience: iOS Safari often ignores background-attachment:fixed on body */
  isolation: isolate;
  background-color: transparent;
}

/* Viewport-fixed paint layer — works on iOS where body-fixed backgrounds scroll */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  height: -webkit-fill-available;
  min-height: 100dvh;

  /*
   Corner ambience (top/bottom): four vmin spots + base tint.
   No background-attachment: fixed — element is fixed, so percentages track the viewport reliably.
   First gradient in the list stacks on top.
  */
  background-color: var(--rp-bg-deep);
  background-image:
    radial-gradient(
      calc(var(--rp-ambient-brand-vmin, 38) * 1vmin) circle at 6% 14%,
      rgba(var(--rp-brand-rgb), var(--rp-ambient-brand-alpha, 0.1)),
      transparent 72%
    ),
    radial-gradient(
      calc(var(--rp-ambient-success-vmin, 33) * 1vmin) circle at 94% 12%,
      rgba(var(--rp-success-rgb), var(--rp-ambient-success-alpha, 0.082)),
      transparent 70%
    ),
    radial-gradient(
      calc(var(--rp-ambient-success-vmin, 33) * 1vmin) circle at 6% 86%,
      rgba(var(--rp-success-rgb), var(--rp-ambient-success-alpha, 0.082)),
      transparent 70%
    ),
    radial-gradient(
      calc(var(--rp-ambient-brand-vmin, 38) * 1vmin) circle at 94% 88%,
      rgba(var(--rp-brand-rgb), var(--rp-ambient-brand-alpha, 0.1)),
      transparent 72%
    ),
    linear-gradient(
      185deg,
      var(--rp-bg-deep) 0%,
      var(--rp-bg-elevated) 52%,
      var(--rp-bg-deep) 100%
    );
  background-repeat: no-repeat;
  background-size:
    auto,
    auto,
    auto,
    auto,
    100% 100%;
  background-position:
    center,
    center,
    center,
    center,
    center;
}

/* Keep page chrome above ambience pseudo (explicit z-order for iOS stacking) */
body > * {
  position: relative;
  z-index: 1;
}

/*
 * Tiny chip for Brand theme admin — matches body backdrop layers (ambient variables from brand_theme.css.php).
 */
.rp-ambient-preview-mini {
  height: 118px;
  border-radius: var(--rp-radius-lg);
  border: 1px solid var(--rp-glass-border);
  background-color: var(--rp-bg-deep);
  background-repeat: no-repeat;
  background-size:
    auto,
    auto,
    auto,
    auto,
    100% 100%;
  background-position:
    center,
    center,
    center,
    center,
    center;
  background-image:
    radial-gradient(
      calc(var(--rp-ambient-brand-vmin, 38) * 1vmin) circle at 6% 14%,
      rgba(var(--rp-brand-rgb), var(--rp-ambient-brand-alpha, 0.1)),
      transparent 72%
    ),
    radial-gradient(
      calc(var(--rp-ambient-success-vmin, 33) * 1vmin) circle at 94% 12%,
      rgba(var(--rp-success-rgb), var(--rp-ambient-success-alpha, 0.082)),
      transparent 70%
    ),
    radial-gradient(
      calc(var(--rp-ambient-success-vmin, 33) * 1vmin) circle at 6% 86%,
      rgba(var(--rp-success-rgb), var(--rp-ambient-success-alpha, 0.082)),
      transparent 70%
    ),
    radial-gradient(
      calc(var(--rp-ambient-brand-vmin, 38) * 1vmin) circle at 94% 88%,
      rgba(var(--rp-brand-rgb), var(--rp-ambient-brand-alpha, 0.1)),
      transparent 72%
    ),
    linear-gradient(
      185deg,
      var(--rp-bg-deep) 0%,
      var(--rp-bg-elevated) 52%,
      var(--rp-bg-deep) 100%
    );
}

/* Bootstrap link tint; primary/button variables live in brand_theme.css.php output. */
:root {
  --bs-link-color: var(--rp-brand-soft);
  --bs-link-hover-color: var(--rp-brand);
}

/* —— Layout rhythm —— */
.rp-main {
  padding-top: 5.5rem;
  padding-bottom: 3rem;
}

@media (min-width: 992px) {
  .rp-main {
    padding-top: 6rem;
  }
}

/* —— Glass & mirror surfaces —— */
.rp-glass {
  background: var(--rp-glass-bg);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--rp-glass-border);
  border-radius: var(--rp-radius-lg);
  box-shadow: var(--rp-shadow-card);
}

.rp-mirror-card {
  position: relative;
  border-radius: var(--rp-radius-lg);
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, calc(0.07 + var(--rp-mirror-strength) * 0.04)) 0%,
    rgba(255, 255, 255, 0.02) 42%,
    rgba(var(--rp-brand-rgb), calc(0.04 + var(--rp-mirror-strength) * 0.06)) 100%
  );
  border: 1px solid var(--rp-glass-border);
  box-shadow:
    var(--rp-shadow-card),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -18px 36px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  overflow: hidden;
}

.rp-mirror-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(255, 255, 255, calc(0.04 + var(--rp-mirror-strength) * 0.05)) 48%,
    transparent 56%
  );
  pointer-events: none;
  opacity: 0.65;
}

.rp-screen-reflection {
  position: relative;
  overflow: hidden;
  border-radius: var(--rp-radius-lg);
}

.rp-screen-reflection::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 55%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, calc(0.05 + var(--rp-mirror-strength) * 0.06)),
    transparent
  );
  transform: rotate(-6deg);
  pointer-events: none;
}

/* —— Bootstrap cards & panels —— */
.card {
  background-color: rgba(255, 255, 255, 0.058);
  border: 1px solid var(--rp-glass-border);
  border-radius: var(--rp-radius-lg);
  box-shadow: var(--rp-shadow-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--rp-text);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--rp-brand-rgb), 0.35);
  box-shadow: var(--rp-shadow-float), var(--rp-shadow-card);
}

.card-header,
.card-footer {
  background: rgba(0, 0, 0, 0.25);
  border-color: var(--rp-glass-border);
  color: var(--rp-text);
}

/* —— Forms (readability + contrast) —— */
.form-label {
  color: var(--rp-text);
  font-weight: 500;
}

.form-control,
.form-select {
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--rp-glass-border);
  color: var(--rp-text);
  border-radius: calc(var(--rp-radius-lg) - 6px);
}

.form-control::placeholder {
  color: var(--rp-text-muted);
  opacity: 0.85;
}

.form-control:focus,
.form-select:focus {
  background-color: rgba(255, 255, 255, 0.09);
  border-color: rgba(var(--rp-brand-rgb), 0.65);
  color: var(--rp-text);
  box-shadow: 0 0 0 0.22rem rgba(var(--rp-brand-rgb), 0.28);
}

.form-select option {
  background-color: var(--rp-bg-elevated);
  color: var(--rp-text);
}

.input-group-text {
  background: rgba(0, 0, 0, 0.35);
  border-color: var(--rp-glass-border);
  color: var(--rp-text-muted);
}

/* —— Tables —— */
.table {
  color: var(--rp-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--rp-glass-border);
}

.table > :not(caption) > * > * {
  background-color: transparent;
  border-bottom-color: var(--rp-glass-border);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, 0.03);
}

.table-hover > tbody > tr:hover > * {
  background-color: rgba(var(--rp-brand-rgb), 0.08);
}

/* —— Alerts —— */
.alert {
  border-radius: calc(var(--rp-radius-lg) - 4px);
  border-width: 1px;
}

.alert-success {
  background: rgba(var(--rp-success-rgb), 0.12);
  border-color: rgba(var(--rp-success-rgb), 0.45);
  color: var(--rp-text);
}

.alert-danger {
  background: rgba(var(--rp-danger-rgb), 0.12);
  border-color: rgba(var(--rp-danger-rgb), 0.45);
  color: var(--rp-text);
}

/* —— Nav tabs / pills —— */
.nav-tabs .nav-link {
  color: var(--rp-text-muted);
  border-color: transparent;
}

.nav-tabs .nav-link:hover {
  color: var(--rp-text);
  border-color: var(--rp-glass-border);
}

.nav-tabs .nav-link.active {
  color: var(--rp-brand);
  background: rgba(var(--rp-brand-rgb), 0.12);
  border-color: var(--rp-glass-border);
}

/* —— Dropdowns & modals —— */
.dropdown-menu {
  background: rgba(12, 12, 12, 0.94);
  border: 1px solid var(--rp-glass-border);
  backdrop-filter: blur(18px);
  box-shadow: var(--rp-shadow-card);
}

.dropdown-item {
  color: var(--rp-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(var(--rp-brand-rgb), 0.18);
  color: var(--rp-text);
}

.modal-content {
  background: var(--rp-bg-elevated);
  border: 1px solid var(--rp-glass-border);
  border-radius: var(--rp-radius-lg);
  color: var(--rp-text);
  box-shadow: var(--rp-shadow-card);
}

.modal-header,
.modal-footer {
  border-color: var(--rp-glass-border);
}

/* —— Lists —— */
.list-group-item {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--rp-glass-border);
  color: var(--rp-text);
}

.accordion-body,
.offcanvas-footer {
  background-color: transparent;
  color: var(--rp-text);
}

.toast {
  background-color: rgba(22, 22, 22, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: var(--rp-glass-border);
  color: var(--rp-text);
}

/* —— Secondary buttons —— */
.btn-outline-light {
  border-color: var(--rp-glass-border);
  color: var(--rp-text);
}

.btn-outline-light:hover {
  background: rgba(var(--rp-brand-rgb), 0.18);
  border-color: rgba(var(--rp-brand-rgb), 0.55);
  color: var(--rp-text);
}

/* —— Links —— */
a {
  color: var(--rp-brand-soft);
}

a:hover {
  color: var(--rp-brand);
}

/* —— Headings —— */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--rp-text);
  letter-spacing: -0.02em;
}

.text-muted,
small.form-text {
  color: var(--rp-text-muted) !important;
}

/* —— Utilities —— */
.rp-brand-gradient-text {
  background: linear-gradient(120deg, var(--rp-brand-soft), var(--rp-brand));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rp-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rp-glass-border), transparent);
  margin: 1.25rem 0;
}

/* =============================================================================
   User / admin portal chrome clearance (fixed header + mobile bottom nav)
   High specificity beats page-level `.main-content { padding-top: … }` blocks.
   ============================================================================= */

:root {
  --rp-user-header-clearance: clamp(5.5rem, 4.75rem + 2.5vw, 7.35rem);
  --rp-user-footer-clear-desktop: max(3rem, env(safe-area-inset-bottom, 0px));
  /* Bottom nav ~72–80px + raised menu button + safe area */
  --rp-user-footer-clear-mobile: calc(7.25rem + env(safe-area-inset-bottom, 0px));
  --rp-admin-footer-clear: max(2rem, env(safe-area-inset-bottom, 0px));
}

/* Legacy pages that padded body + inner shell — keep a single offset on the main column */
body:has(> nav.navbar.fixed-top.rp-user-topnav) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body:has(> nav.navbar.fixed-top.rp-admin-topnav) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Logged-in API docs: sticky tabs anchor below header */
body.logged-in-docs:has(> nav.navbar.fixed-top.rp-user-topnav) {
  --docs-nav-offset: clamp(4.85rem, 4rem + 2vw, 6.6rem);
}

nav.navbar.fixed-top.rp-user-topnav ~ .main-content,
nav.navbar.fixed-top.rp-user-topnav ~ .rp-user-shell,
nav.navbar.fixed-top.rp-user-topnav ~ .container.main-content,
nav.navbar.fixed-top.rp-user-topnav ~ .container-fluid.main-content {
  padding-top: var(--rp-user-header-clearance);
  padding-bottom: var(--rp-user-footer-clear-desktop);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  nav.navbar.fixed-top.rp-user-topnav ~ .main-content,
  nav.navbar.fixed-top.rp-user-topnav ~ .rp-user-shell,
  nav.navbar.fixed-top.rp-user-topnav ~ .container.main-content,
  nav.navbar.fixed-top.rp-user-topnav ~ .container-fluid.main-content {
    padding-bottom: var(--rp-user-footer-clear-mobile);
  }
}

nav.navbar.fixed-top.rp-admin-topnav ~ .main-content {
  padding-top: var(--rp-user-header-clearance);
  padding-bottom: var(--rp-admin-footer-clear);
  box-sizing: border-box;
}

/* When admin `.main-content` is nested (wrapper between nav and column), sibling `~` rules miss it */
body:has(nav.navbar.fixed-top.rp-admin-topnav) .main-content,
body:has(nav.navbar.fixed-top.rp-admin-topnav) .container.main-content,
body:has(nav.navbar.fixed-top.rp-admin-topnav) .container-fluid.main-content {
  padding-top: var(--rp-user-header-clearance);
  padding-bottom: var(--rp-admin-footer-clear);
  box-sizing: border-box;
}

/* Logged-in API docs: main column is first .container after chrome */
body.logged-in-docs nav.navbar.fixed-top.rp-user-topnav ~ .container {
  padding-top: var(--rp-user-header-clearance);
  padding-bottom: var(--rp-user-footer-clear-desktop);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  body.logged-in-docs nav.navbar.fixed-top.rp-user-topnav ~ .container {
    padding-bottom: var(--rp-user-footer-clear-mobile);
  }
}

/* Premium panel shell for typical user "dashboard-card" sections */
nav.navbar.fixed-top ~ div .dashboard-card:not(.balance-card):not(.welcome-section):not(.stats-card):not(.deposit-card):not(.success-card):not(.error-card):not(.wallet-card):not(.wallet-card-setup):not(.modal-content) {
  position: relative;
  border-radius: var(--rp-radius-lg);
  border: 1px solid var(--rp-glass-border);
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, calc(0.05 + var(--rp-mirror-strength) * 0.03)),
    rgba(255, 255, 255, 0.02) 45%,
    rgba(var(--rp-brand-rgb), calc(0.03 + var(--rp-mirror-strength) * 0.04))
  );
  box-shadow:
    var(--rp-shadow-card),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -12px 28px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(20px) saturate(155%);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

nav.navbar.fixed-top ~ div .dashboard-card:not(.balance-card):not(.welcome-section):not(.stats-card):not(.deposit-card):not(.success-card):not(.error-card):not(.wallet-card):not(.wallet-card-setup):not(.modal-content)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 255, 255, calc(0.03 + var(--rp-mirror-strength) * 0.04)) 48%,
    transparent 58%
  );
  opacity: 0.55;
}

nav.navbar.fixed-top ~ div .dashboard-card:not(.balance-card):not(.welcome-section):not(.stats-card):not(.deposit-card):not(.success-card):not(.error-card):not(.wallet-card):not(.wallet-card-setup):not(.modal-content):hover {
  transform: translateY(-4px);
  border-color: rgba(var(--rp-brand-rgb), 0.38);
  box-shadow: var(--rp-shadow-float), var(--rp-shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* Auth / marketing shells that use a centered login container */
.login-container {
  border-radius: var(--rp-radius-lg);
  border: 1px solid var(--rp-glass-border);
  background: var(--rp-glass-bg);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: var(--rp-shadow-card);
}

/* =============================================================================
   Portal sidebars (user + admin): under fixed header & bottom nav (lower z-index),
   but the drawer is inset so balance / account links stay visible (not covered).
   ============================================================================= */

:root {
  /* Visual height of fixed top bar (slim navbar) — drawer starts below this */
  --rp-fixed-header-band: clamp(3.65rem, 3.25rem + 1.2vw, 4.55rem);
  /* Mobile bottom nav + safe area — user sidebar only */
  --rp-fixed-bottom-nav-band: 0px;
  /* Portal drawer width — user + admin persistent sidebars on desktop */
  --rp-portal-sidebar-width: min(22rem, calc(100vw - 2.5rem));
}

@media (max-width: 768px) {
  :root {
    --rp-fixed-bottom-nav-band: calc(5.85rem + env(safe-area-inset-bottom, 0px));
  }
}

.offcanvas.rp-portal-sidebar {
  z-index: 1020 !important;
  width: var(--rp-portal-sidebar-width);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  /* Full viewport would sit under fixed chrome; inset vertically instead */
  top: var(--rp-fixed-header-band) !important;
  bottom: auto !important;
  height: calc(100vh - var(--rp-fixed-header-band)) !important;
  height: calc(100dvh - var(--rp-fixed-header-band)) !important;
  max-height: calc(100vh - var(--rp-fixed-header-band)) !important;
  max-height: calc(100dvh - var(--rp-fixed-header-band)) !important;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column !important;
}

/* User app: clear mobile bottom nav */
@media (max-width: 768px) {
  .offcanvas.rp-portal-sidebar:not(.rp-admin-sidebar) {
    height: calc(100vh - var(--rp-fixed-header-band) - var(--rp-fixed-bottom-nav-band)) !important;
    height: calc(100dvh - var(--rp-fixed-header-band) - var(--rp-fixed-bottom-nav-band)) !important;
    max-height: calc(100vh - var(--rp-fixed-header-band) - var(--rp-fixed-bottom-nav-band)) !important;
    max-height: calc(100dvh - var(--rp-fixed-header-band) - var(--rp-fixed-bottom-nav-band)) !important;
  }
}

.offcanvas.rp-portal-sidebar .offcanvas-header {
  flex-shrink: 0;
}

.offcanvas.rp-portal-sidebar .offcanvas-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.offcanvas.rp-portal-sidebar .offcanvas-body > nav.overflow-auto {
  min-height: 0;
}

/* User + admin drawers: more viewport width on phones so balance + eye fit */
@media (max-width: 991.98px) {
  body #rpUserSidebar.offcanvas.rp-portal-sidebar,
  body #rpAdminSidebar.offcanvas.rp-portal-sidebar {
    width: min(22rem, calc(100vw - 1rem)) !important;
    max-width: calc(100vw - 1rem) !important;
  }
}

/* User drawer: no header close (dismiss via backdrop, Menu, or navigation) */
#rpUserSidebar .btn-close {
  display: none !important;
}

.offcanvas-backdrop {
  z-index: 1018 !important;
}

/* User + admin portals: fixed persistent sidebar on large screens */
@media (min-width: 992px) {
  body #rpUserSidebar.offcanvas.rp-portal-sidebar,
  body #rpAdminSidebar.offcanvas.rp-portal-sidebar {
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    top: var(--rp-fixed-header-band) !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
    width: var(--rp-portal-sidebar-width) !important;
    max-width: none !important;
    transform: none !important;
    visibility: visible !important;
    transition: none !important;
    pointer-events: auto !important;
    display: flex !important;
  }

  #rpAdminSidebar .btn-close {
    display: none !important;
  }

  nav.navbar.fixed-top.rp-user-topnav ~ .main-content,
  nav.navbar.fixed-top.rp-user-topnav ~ .rp-user-shell,
  nav.navbar.fixed-top.rp-user-topnav ~ .container.main-content,
  nav.navbar.fixed-top.rp-user-topnav ~ .container-fluid.main-content {
    margin-left: var(--rp-portal-sidebar-width) !important;
    width: calc(100% - var(--rp-portal-sidebar-width)) !important;
    box-sizing: border-box;
  }

  body.logged-in-docs nav.navbar.fixed-top.rp-user-topnav ~ .container {
    margin-left: var(--rp-portal-sidebar-width) !important;
    width: calc(100% - var(--rp-portal-sidebar-width)) !important;
    box-sizing: border-box;
  }

  /* Keep :has() in its own rule: some engines drop the whole comma-separated group if any selector is unsupported/invalid */
  nav.navbar.fixed-top.rp-admin-topnav ~ .main-content,
  nav.navbar.fixed-top.rp-admin-topnav ~ .container.main-content,
  nav.navbar.fixed-top.rp-admin-topnav ~ .container-fluid.main-content {
    margin-left: var(--rp-portal-sidebar-width) !important;
    width: calc(100% - var(--rp-portal-sidebar-width)) !important;
    box-sizing: border-box;
  }

  body:has(> nav.navbar.fixed-top.rp-admin-topnav) > .main-content,
  body:has(> nav.navbar.fixed-top.rp-admin-topnav) > .container.main-content,
  body:has(> nav.navbar.fixed-top.rp-admin-topnav) > .container-fluid.main-content {
    margin-left: var(--rp-portal-sidebar-width) !important;
    width: calc(100% - var(--rp-portal-sidebar-width)) !important;
    box-sizing: border-box;
  }

  /*
   Descendant selectors: admin pages may wrap markup so `.main-content` is not a sibling of `nav`;
   without this, the fixed sidebar can sit on top of the main column on desktop.
   */
  body:has(nav.navbar.fixed-top.rp-admin-topnav) .main-content,
  body:has(nav.navbar.fixed-top.rp-admin-topnav) .container.main-content,
  body:has(nav.navbar.fixed-top.rp-admin-topnav) .container-fluid.main-content {
    margin-left: var(--rp-portal-sidebar-width) !important;
    width: calc(100% - var(--rp-portal-sidebar-width)) !important;
    box-sizing: border-box;
  }
}

nav.navbar.fixed-top.rp-user-topnav,
nav.navbar.fixed-top.rp-admin-topnav {
  z-index: 1030 !important;
  /* Match portal drawer inset (`top: var(--rp-fixed-header-band)`) — shorter navbar left a visible strip */
  min-height: var(--rp-fixed-header-band);
  box-sizing: border-box;
}

.bottom-nav-fixed {
  z-index: 1035 !important;
}

/* =============================================================================
   Admin portal — mobile & narrow viewports (all themed admin pages load this file)
   ============================================================================= */

.table-wrap,
.rp-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 991.98px) {
  body:has(nav.navbar.fixed-top.rp-admin-topnav) {
    overflow-x: hidden; /* legacy engines */
    overflow-x: clip;
  }

  /* Undo desktop sidebar column shift; let containers use full width under drawer */
  body:has(nav.navbar.fixed-top.rp-admin-topnav) .main-content,
  body:has(nav.navbar.fixed-top.rp-admin-topnav) .container.main-content,
  body:has(nav.navbar.fixed-top.rp-admin-topnav) .container-fluid.main-content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
  }

  /* Grids / flex regions inside the main column must be allowed to shrink for overflow */
  body:has(nav.navbar.fixed-top.rp-admin-topnav) .main-content .row > [class*="col-"] {
    min-width: 0;
  }

  /* Top bar: keep brand on one line; actions stay reachable */
  nav.navbar.fixed-top.rp-admin-topnav .navbar-brand {
    min-width: 0;
    flex: 1 1 auto;
    max-width: 100%;
  }

  nav.navbar.fixed-top.rp-admin-topnav .navbar-brand span:last-child {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }

  body:has(nav.navbar.fixed-top.rp-admin-topnav) .main-content img,
  body:has(nav.navbar.fixed-top.rp-admin-topnav) .main-content video,
  body:has(nav.navbar.fixed-top.rp-admin-topnav) .main-content iframe {
    max-width: 100%;
    height: auto;
  }

  /* Cards / glass panels: contain wide children */
  body:has(nav.navbar.fixed-top.rp-admin-topnav) .main-content .card-body {
    min-width: 0;
  }
}

@media (max-width: 575.98px) {
  /* Stat tiles: force a single column on phones if page CSS used many fixed columns */
  body:has(nav.navbar.fixed-top.rp-admin-topnav) .stats-grid {
    grid-template-columns: 1fr !important;
  }

  body:has(nav.navbar.fixed-top.rp-admin-topnav) .page-title,
  body:has(nav.navbar.fixed-top.rp-admin-topnav) .admin-page-title {
    font-size: clamp(1.25rem, 5.5vw, 1.85rem);
    line-height: 1.25;
    word-break: break-word;
  }

  body:has(nav.navbar.fixed-top.rp-admin-topnav) .page-header {
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
  }

  /* Root layout containers only — avoid tightening nested `.container`s in modals/cards */
  body:has(nav.navbar.fixed-top.rp-admin-topnav) > .container.main-content,
  body:has(nav.navbar.fixed-top.rp-admin-topnav) > .container-fluid.main-content,
  body:has(nav.navbar.fixed-top.rp-admin-topnav) .main-content > .container,
  body:has(nav.navbar.fixed-top.rp-admin-topnav) .main-content > .container-fluid {
    padding-left: max(calc(var(--bs-gutter-x) * 0.5), env(safe-area-inset-left, 0px));
    padding-right: max(calc(var(--bs-gutter-x) * 0.5), env(safe-area-inset-right, 0px));
  }
}

/* Paginated controls (1 2 3 4 …): scroll inside the viewport instead of stretching the layout */
@media (max-width: 991.98px) {
  body:has(nav.navbar.fixed-top) .main-content nav:has(> ul.pagination),
  body:has(nav.navbar.fixed-top) .rp-user-shell nav:has(> ul.pagination) {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  /* Inner nav under #pagination: don't scroll here — #pagination handles overflow */
  body:has(nav.navbar.fixed-top) .main-content #pagination nav:has(> ul.pagination) {
    width: max-content;
    max-width: none;
    overflow: visible;
  }

  body:has(nav.navbar.fixed-top) .main-content nav:has(> ul.pagination) > ul.pagination,
  body:has(nav.navbar.fixed-top) .rp-user-shell nav:has(> ul.pagination) > ul.pagination {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    width: max-content;
    max-width: none;
  }

  /* e.g. user_management AJAX pagination wrapper — scroll the outer wrapper only */
  body:has(nav.navbar.fixed-top) #pagination {
    display: block !important;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  body:has(nav.navbar.fixed-top) #pagination ul.pagination {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    width: max-content;
    margin-bottom: 0;
  }

}

@media (max-width: 575.98px) {
  body:has(nav.navbar.fixed-top) .main-content .pagination .page-link,
  body:has(nav.navbar.fixed-top) .rp-user-shell .pagination .page-link {
    padding: 0.2rem 0.45rem;
    font-size: 0.8125rem;
  }
}