/*
==========================================
PRO ADMIN UI KIT - COMPONENT LIBRARY
==========================================

Comprehensive UI component library for BuyUSAFirst Pro Admin theme.
Works with both .pro-admin and .pro-merchant themes.

FILE ORGANIZATION:
1. CSS Variables (this section)
2. Core Components (cards, buttons, forms, tables, etc.)
3. Layout Components (sidebar, dropdowns, modals)
4. Advanced Components (multiselect, inline editing)
5. UI Kit Demo Specific (at end of file)

NAMING CONVENTION:
- Prefix: .pa- (Pro Admin)
- BEM-like structure: .pa-component__element--modifier
- State classes: .active, .selected, .is-editing

KEY IDs FOR JAVASCRIPT:
- #mainLayout - Main layout container
- #topHeader - Full-width top header
- #sidebarToggle - Hamburger menu button
- #sidebar - Left navigation sidebar
- #mainContent - Right content area
- #userMenu - User dropdown menu
- #globalSearchBtn - Global search button
- #notificationsBtn - Notifications button

BROWSER SUPPORT:
- Modern browsers (Chrome, Firefox, Safari, Edge)
- CSS Grid and Flexbox required
- CSS Custom Properties (variables) required

MAINTENANCE NOTES:
- All inline styles have been extracted to this file for caching
- Grouped by component type for easy navigation
- Comprehensive comments for each section
- Modify CSS here, NOT in HTML inline styles

==========================================
*/

/* ====================================
   CSS VARIABLES
   Shared across .pro-admin and .pro-merchant themes
   ==================================== */

.pro-admin,
.pro-merchant {
  /* Brand Colors */
  --pa-primary: var(--primary-blue, #0075B2);
  --pa-primary-dark: var(--primary-blue-dark, #005A8B);
  --pa-danger: var(--primary-red, #E21F26);
  --pa-success: #2ECC71;
  --pa-warning: #F1C40F;

  /* Layout Colors */
  --pa-bg: var(--bg-color, #EEF2F6);
  --pa-card: var(--card-bg, #FFFFFF);
  --pa-border: var(--border-color, #DCE1E7);

  /* Text Colors */
  --pa-text: var(--text-main, #3F4B59);
  --pa-muted: var(--text-muted, #8B94A3);

  /* Sidebar Dimensions */
  --pa-sidebar-width: 260px;
  --pa-sidebar-collapsed-width: 60px;
  --pa-sidebar-scroll-btn-size: 24px;
  --pa-sidebar-scroll-btn-edge: 6px;
  --pa-sidebar-scroll-up-offset: 6px;
  --pa-sidebar-scroll-step: 140px;

  color: var(--pa-text);
}

.pro-admin .pa-card,
.pro-merchant .pa-card {
  background: var(--pa-card);
  border: 1px solid var(--pa-border);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.pro-admin .pa-card-header,
.pro-merchant .pa-card-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--pa-border);
  font-weight: 600;
}

.pro-admin .pa-card-body,
.pro-merchant .pa-card-body {
  padding: 1rem;
}

.pro-admin .pa-btn,
.pro-merchant .pa-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 4px;
  border: 1px solid transparent;
  padding: 0.5rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 600;
  background: #F3F4F6;
  color: var(--pa-text);
  text-decoration: none;
  cursor: pointer;
  transition: all 150ms ease-in-out;
}

.pro-admin .pa-btn:hover,
.pro-merchant .pa-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.pro-admin .pa-btn:focus-visible,
.pro-merchant .pa-btn:focus-visible {
  outline: 2px solid rgba(0, 117, 178, 0.35);
  outline-offset: 2px;
}

.pro-admin .pa-btn-primary,
.pro-merchant .pa-btn-primary {
  background: var(--pa-primary);
  color: #FFFFFF;
}

.pro-admin .pa-btn-secondary,
.pro-merchant .pa-btn-secondary {
  background: #FFFFFF;
  border-color: var(--pa-border);
  color: var(--pa-text);
}

.pro-admin .pa-btn-outline,
.pro-merchant .pa-btn-outline {
  background: transparent;
  border-color: var(--pa-primary);
  color: var(--pa-primary);
}

.pro-admin .pa-btn-danger,
.pro-merchant .pa-btn-danger {
  background: var(--pa-danger);
  color: #FFFFFF;
}

.pro-admin .pa-btn-sm,
.pro-merchant .pa-btn-sm {
  padding: 0.35rem 0.7rem;
  font-size: 0.75rem;
}

.pro-admin .pa-btn-lg,
.pro-merchant .pa-btn-lg {
  padding: 0.6rem 1.3rem;
  font-size: 0.95rem;
}

.pro-admin .pa-form-grid,
.pro-merchant .pa-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.pro-admin .pa-field,
.pro-merchant .pa-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.pro-admin .pa-label,
.pro-merchant .pa-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--pa-muted);
}

.pro-admin .pa-input,
.pro-admin .pa-select,
.pro-admin .pa-textarea,
.pro-merchant .pa-input,
.pro-merchant .pa-select,
.pro-merchant .pa-textarea {
  border: 1px solid var(--pa-border);
  border-radius: 4px;
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
  color: var(--pa-text);
  background: #FFFFFF;
  transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}

.pro-admin .pa-input:focus,
.pro-admin .pa-select:focus,
.pro-admin .pa-textarea:focus,
.pro-merchant .pa-input:focus,
.pro-merchant .pa-select:focus,
.pro-merchant .pa-textarea:focus {
  outline: none;
  border-color: var(--pa-primary);
  box-shadow: 0 0 0 3px rgba(0, 117, 178, 0.12);
}

.pro-admin .pa-helper,
.pro-merchant .pa-helper {
  font-size: 0.75rem;
  color: var(--pa-muted);
}

.pro-admin .pa-error,
.pro-merchant .pa-error {
  font-size: 0.75rem;
  color: var(--pa-danger);
}

.pro-admin .pa-table,
.pro-merchant .pa-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--pa-border);
  background: #FFFFFF;
}

.pro-admin .pa-table th,
.pro-admin .pa-table td,
.pro-merchant .pa-table th,
.pro-merchant .pa-table td {
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--pa-border);
  font-size: 0.8rem;
}

.pro-admin .pa-table th,
.pro-merchant .pa-table th {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
  color: var(--pa-muted);
  background: #F7F8FA;
}

.pro-admin .pa-table tr:last-child td,
.pro-merchant .pa-table tr:last-child td {
  border-bottom: none;
}

/* ── Table density variants ──────────────────────────────────────────────── */
/* Default (.pa-table) = Large. Apply .pa-table-md/.sm/.xs to reduce density. */

.pro-admin .pa-table.pa-table-md th,
.pro-admin .pa-table.pa-table-md td,
.pro-merchant .pa-table.pa-table-md th,
.pro-merchant .pa-table.pa-table-md td {
  padding: 0.35rem 0.65rem;
  font-size: 0.75rem;
}
.pro-admin .pa-table.pa-table-md th,
.pro-merchant .pa-table.pa-table-md th {
  font-size: 0.65rem;
}

.pro-admin .pa-table.pa-table-sm th,
.pro-admin .pa-table.pa-table-sm td,
.pro-merchant .pa-table.pa-table-sm th,
.pro-merchant .pa-table.pa-table-sm td {
  padding: 0.2rem 0.45rem;
  font-size: 0.7rem;
}
.pro-admin .pa-table.pa-table-sm th,
.pro-merchant .pa-table.pa-table-sm th {
  font-size: 0.6rem;
}

.pro-admin .pa-table.pa-table-xs th,
.pro-admin .pa-table.pa-table-xs td,
.pro-merchant .pa-table.pa-table-xs th,
.pro-merchant .pa-table.pa-table-xs td {
  padding: 0.08rem 0.32rem;
  font-size: 0.65rem;
  line-height: 1.2;
}
.pro-admin .pa-table.pa-table-xs th,
.pro-merchant .pa-table.pa-table-xs th {
  font-size: 0.55rem;
}

/* Tighten badges inside density-reduced tables */
.pro-admin .pa-table.pa-table-sm .pa-badge,
.pro-admin .pa-table.pa-table-xs .pa-badge,
.pro-merchant .pa-table.pa-table-sm .pa-badge,
.pro-merchant .pa-table.pa-table-xs .pa-badge {
  padding: 0.1rem 0.35rem;
  font-size: 0.6rem;
}

/* Density picker control */
.pa-density-picker {
  display: inline-flex;
  border: 1px solid var(--pa-border);
  border-radius: 4px;
  overflow: hidden;
}
.pa-density-btn {
  padding: 0.18rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 600;
  border: none;
  border-right: 1px solid var(--pa-border);
  background: transparent;
  color: var(--pa-muted);
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
  line-height: 1.4;
}
.pa-density-btn:last-child { border-right: none; }
.pa-density-btn.active { background: var(--pa-primary); color: #fff; }
.pa-density-btn:not(.active):hover { background: rgba(0,117,178,0.08); color: var(--pa-text); }

.pro-admin .pa-alert,
.pro-merchant .pa-alert {
  padding: 0.75rem 1rem;
  border-radius: 4px;
  border: 1px solid transparent;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.8rem;
}

.pro-admin .pa-alert-info,
.pro-merchant .pa-alert-info {
  background: rgba(0, 117, 178, 0.12);
  border-color: rgba(0, 117, 178, 0.3);
  color: var(--pa-primary);
}

.pro-admin .pa-alert-success,
.pro-merchant .pa-alert-success {
  background: rgba(46, 204, 113, 0.12);
  border-color: rgba(46, 204, 113, 0.3);
  color: #1E8C4A;
}

.pro-admin .pa-alert-warning,
.pro-merchant .pa-alert-warning {
  background: rgba(241, 196, 15, 0.15);
  border-color: rgba(241, 196, 15, 0.35);
  color: #8A6D00;
}

.pro-admin .pa-alert-danger,
.pro-merchant .pa-alert-danger {
  background: rgba(226, 31, 38, 0.12);
  border-color: rgba(226, 31, 38, 0.3);
  color: #9B0F14;
}

.pro-admin .pa-badge,
.pro-merchant .pa-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: #E7EBF0;
  color: var(--pa-muted);
}

.pro-admin .pa-badge-success,
.pro-merchant .pa-badge-success {
  background: rgba(46, 204, 113, 0.2);
  color: #1E8C4A;
}

.pro-admin .pa-badge-warning,
.pro-merchant .pa-badge-warning {
  background: rgba(241, 196, 15, 0.25);
  color: #8A6D00;
}

.pro-admin .pa-badge-danger,
.pro-merchant .pa-badge-danger {
  background: rgba(226, 31, 38, 0.2);
  color: #9B0F14;
}

/* Badge in menu items */
.pro-admin .pa-menu-item .pa-badge,
.pro-merchant .pa-menu-item .pa-badge {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  min-width: 18px;
  padding: 0.15rem 0.4rem;
  font-size: 0.65rem;
}

/* Collapsed state: show badge as dot indicator */
html.sidebar-collapsed .pro-admin .pa-menu-item .pa-badge,
html.sidebar-collapsed .pro-merchant .pa-menu-item .pa-badge {
  width: 6px;
  height: 6px;
  min-width: 6px;
  padding: 0;
  border-radius: 50%;
  background: var(--pa-danger);
  right: 8px;
  top: 8px;
  transform: none;
  font-size: 0;
  overflow: hidden;
}

/* Badge hover behavior removed - badges remain as dots when collapsed */

.pro-admin .pa-menu,
.pro-merchant .pa-menu {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;  /* Ultra-tight spacing */
}

.pro-admin .pa-menu-item,
.pro-merchant .pa-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;  /* More compact vertical padding */
  border-radius: 4px;
  color: var(--pa-muted);
  text-decoration: none;
  transition: background 150ms ease-in-out, color 150ms ease-in-out;
  position: relative;
  min-height: 30px;  /* More compact height */
  line-height: 1.1;  /* Even tighter line height */
}

.pro-admin .pa-menu-item i,
.pro-merchant .pa-menu-item i {
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.pro-admin .pa-menu-item:hover,
.pro-merchant .pa-menu-item:hover {
  background: rgba(0, 117, 178, 0.08);
  color: var(--pa-text);
}

.pro-admin .pa-menu-item.active,
.pro-merchant .pa-menu-item.active {
  background: rgba(0, 117, 178, 0.15);
  color: var(--pa-primary);
  font-weight: 600;
}

.pro-admin .pa-tabs,
.pro-merchant .pa-tabs {
  display: inline-flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--pa-border);
}

.pro-admin .pa-tab,
.pro-merchant .pa-tab {
  padding: 0.5rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--pa-muted);
  border-bottom: 2px solid transparent;
  text-decoration: none;
}

.pro-admin .pa-tab.active,
.pro-merchant .pa-tab.active {
  color: var(--pa-primary);
  border-color: var(--pa-primary);
}

.pro-admin .pa-modal-overlay,
.pro-merchant .pa-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1.5rem;
  will-change: opacity;
}

.pro-admin .pa-modal,
.pro-merchant .pa-modal {
  background: var(--pa-card);
  border-radius: 6px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pro-admin .pa-modal-header,
.pro-merchant .pa-modal-header {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--pa-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pro-admin .pa-modal-title,
.pro-merchant .pa-modal-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--pa-text);
}

.pro-admin .pa-modal-close,
.pro-merchant .pa-modal-close {
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--pa-muted);
  transition: all 150ms ease-in-out;
}

.pro-admin .pa-modal-close:hover,
.pro-merchant .pa-modal-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--pa-text);
}

.pro-admin .pa-modal-body,
.pro-merchant .pa-modal-body {
  padding: 1.2rem;
  overflow-y: auto;
  flex: 1;
}

.pro-admin .pa-modal-footer,
.pro-merchant .pa-modal-footer {
  padding: 0.85rem 1.2rem;
  border-top: 1px solid var(--pa-border);
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  background: #F7F8FA;
}

.pro-admin .pa-tooltip-wrapper,
.pro-merchant .pa-tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.pro-admin .pa-tooltip,
.pro-merchant .pa-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--pa-text);
  color: #FFFFFF;
  padding: 0.4rem 0.65rem;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-in-out;
  z-index: 100;
}

.pro-admin .pa-tooltip::after,
.pro-merchant .pa-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--pa-text);
}

.pro-admin .pa-tooltip-wrapper:hover .pa-tooltip,
.pro-merchant .pa-tooltip-wrapper:hover .pa-tooltip {
  opacity: 1;
}

.pro-admin .pa-tooltip-right,
.pro-merchant .pa-tooltip-right {
  bottom: auto;
  left: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
}

.pro-admin .pa-tooltip-right::after,
.pro-merchant .pa-tooltip-right::after {
  top: 50%;
  left: 0;
  transform: translateX(-8px) translateY(-50%);
  border-top-color: transparent;
  border-right-color: var(--pa-text);
}

.pro-admin .pa-empty-state,
.pro-merchant .pa-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 2rem;
  text-align: center;
  color: var(--pa-muted);
}

.pro-admin .pa-empty-icon,
.pro-merchant .pa-empty-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #F7F8FA;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  font-size: 2.25rem;
  color: var(--pa-border);
}

.pro-admin .pa-empty-title,
.pro-merchant .pa-empty-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--pa-text);
  margin: 0 0 0.65rem 0;
}

.pro-admin .pa-empty-description,
.pro-merchant .pa-empty-description {
  font-size: 0.85rem;
  color: var(--pa-muted);
  margin: 0 0 1.25rem 0;
  max-width: 380px;
}

.pro-admin .pa-empty-actions,
.pro-merchant .pa-empty-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}

.pro-admin .pa-layout,
.pro-merchant .pa-layout {
  display: flex;
  min-height: 100vh;
  background: var(--pa-bg);
}

.pro-admin .pa-sidebar,
.pro-merchant .pa-sidebar {
  width: var(--pa-sidebar-width);
  background: var(--pa-card);
  border-right: 1px solid var(--pa-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow: hidden;  /* Prevent scrollbars on sidebar itself */
  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: width;
  z-index: 1000;
}

.pro-admin .pa-sidebar-header,
.pro-merchant .pa-sidebar-header {
  padding: 1.2rem 1rem;
  border-bottom: 1px solid var(--pa-border);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--pa-primary);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  overflow: visible;  /* Allow logo to be visible */
  position: relative;  /* For absolute positioning of pin button */
}

.pro-admin .pa-sidebar-header i,
.pro-merchant .pa-sidebar-header i {
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.pro-admin .pa-sidebar-header img,
.pro-merchant .pa-sidebar-header img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.pro-admin .pa-sidebar-scroll-wrap,
.pro-merchant .pa-sidebar-scroll-wrap {
  flex: 1;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scrollbar-gutter: stable;
  padding-top: 0;
  padding-bottom: 6px;
}

.pro-admin .pa-sidebar-scroll-wrap::-webkit-scrollbar,
.pro-merchant .pa-sidebar-scroll-wrap::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.pro-admin .pa-sidebar-nav,
.pro-merchant .pa-sidebar-nav {
  flex: 1 1 auto;
  padding: 0.75rem;
  overflow-y: visible;
  overflow-x: hidden;  /* Prevent horizontal scrollbars from text-indent */
  padding-top: 0.2rem;
  padding-bottom: 0.5rem;
}

.pro-admin .pa-sidebar-nav::-webkit-scrollbar,
.pro-merchant .pa-sidebar-nav::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.pro-admin .pa-sidebar-scroll-btn,
.pro-merchant .pa-sidebar-scroll-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  width: var(--pa-sidebar-scroll-btn-size);
  height: var(--pa-sidebar-scroll-btn-size);
  border: 1px solid #bcd9ea;
  border-radius: 999px;
  background: #f3f8fc;
  color: #005A8B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.08);
  transition: opacity 120ms ease, background 120ms ease, border-color 120ms ease;
}

.pro-admin .pa-sidebar-scroll-btn .scroll-glyph,
.pro-merchant .pa-sidebar-scroll-btn .scroll-glyph {
  font-size: 10px;
}

.pro-admin .pa-sidebar-scroll-up,
.pro-merchant .pa-sidebar-scroll-up {
  position: sticky;
  top: var(--pa-sidebar-scroll-btn-edge);
  bottom: auto;
  margin: 0;
}

.pro-admin .pa-sidebar-scroll-down,
.pro-merchant .pa-sidebar-scroll-down {
  position: sticky;
  bottom: var(--pa-sidebar-scroll-btn-edge);
  top: auto;
  margin: 0;
}

.pro-admin .pa-sidebar-scroll-btn:disabled,
.pro-merchant .pa-sidebar-scroll-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.pro-admin .pa-sidebar-scroll-btn.is-hidden,
.pro-merchant .pa-sidebar-scroll-btn.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.pro-admin .pa-sidebar-scroll-btn:focus-visible,
.pro-merchant .pa-sidebar-scroll-btn:focus-visible {
  outline: 2px solid rgba(0, 90, 139, 0.45);
  outline-offset: 1px;
}

.pro-admin .pa-sidebar-scroll-btn.is-emphasis,
.pro-merchant .pa-sidebar-scroll-btn.is-emphasis {
  background: #e6f1f8;
  border-color: #9bc7df;
}

@supports not (position: sticky) {
  .pro-admin .pa-sidebar-scroll-up,
  .pro-merchant .pa-sidebar-scroll-up,
  .pro-admin .pa-sidebar-scroll-down,
  .pro-merchant .pa-sidebar-scroll-down {
    position: absolute;
    margin: 0;
  }

  .pro-admin .pa-sidebar-scroll-up,
  .pro-merchant .pa-sidebar-scroll-up {
    top: var(--pa-sidebar-scroll-btn-edge);
  }

  .pro-admin .pa-sidebar-scroll-down,
  .pro-merchant .pa-sidebar-scroll-down {
    bottom: var(--pa-sidebar-scroll-btn-edge);
  }
}

.pro-admin .pa-sidebar-footer,
.pro-merchant .pa-sidebar-footer {
  padding: 0;
  border-top: 1px solid var(--pa-border);
  font-size: 0.75rem;
  color: var(--pa-muted);
}