.pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 20px;
}

.pagination a,
.pagination span,
.pagination em {
  padding: 6px 12px;
  border: 1px solid #dee2e6;
  color: #0d6efd;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
}

.pagination em.current {
  background-color: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
  font-style: normal;
}

.pagination a:hover {
  background-color: #e9ecef;
}

.pagination .disabled {
  color: #6c757d;
  pointer-events: none;
}


/* Toast message */
.sm-toast-container {
  position: fixed;
  top: 90px;
  /* adjust this to match your header height */
  right: 20px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
}

.sm-toast {
  min-width: 320px;
  padding: 12px 14px;
  border-radius: 10px;
  display: flex !important;
  /* override bootstrap */
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  font-size: 14px;
}

/* Notice */
.sm-toast.notice {
  background: #ecfdf3;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

/* Alert */
.sm-toast.alert {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #991b1b;
}

.sm-toast-icon {
  font-weight: bold;
}

.sm-toast-close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: inherit;
  font-weight: bold;
  cursor: pointer;
}

.sm-toast {
  animation: slideDown 0.25s ease-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.text-red {
  color: red;
}

.fsm {
  font-size: smaller;
}

.border-blue {
  border-color: blue;
}

/* ── Shipping partner stepper ─────────────────────────────────────── */
.stepper-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e9ecef;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  border: 2px solid #dee2e6;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.stepper-circle--active {
  background: #556ee6;
  border-color: #556ee6;
  color: #fff;
}

.stepper-circle--done {
  background: #34c38f;
  border-color: #34c38f;
  color: #fff;
}

/* ─── Sidebar mode section visibility ──────────────────────────────────────── */

/* All sections hidden by default until Stimulus sets data-sidebar-mode */
#side-menu .sidebar-section {
  display: none;
}

/* Show only the active section */
#side-menu[data-sidebar-mode="dashboard"] .sidebar-section[data-section="dashboard"] {
  display: block;
}

#side-menu[data-sidebar-mode="online_store"] .sidebar-section[data-section="online_store"] {
  display: block;
}

#side-menu[data-sidebar-mode="offline_store"] .sidebar-section[data-section="offline_store"] {
  display: block;
}

#side-menu[data-sidebar-mode="procurement"] .sidebar-section[data-section="procurement"] {
  display: block;
}

/* Fallback: if JS hasn't set mode yet, show dashboard (prevents flash of empty sidebar) */
#side-menu:not([data-sidebar-mode]) .sidebar-section[data-section="dashboard"] {
  display: block;
}

/* ─── Sidebar mode tab strip ────────────────────────────────────────────────── */

.sidebar-mode-tabs {
  display: flex;
  padding: 8px 12px;
  gap: 4px;
  background: rgba(31, 88, 199, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.sidebar-mode-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border-radius: 6px;
  border: none;
  background: transparent;
  font-size: 10px;
  color: #74788d;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.sidebar-mode-tab i {
  font-size: 18px;
}

.sidebar-mode-tab:hover {
  background: rgba(31, 88, 199, 0.08);
  color: #556ee6;
}

.sidebar-mode-tab.sidebar-tab-active {
  background: rgba(31, 88, 199, 0.14);
  color: #556ee6;
  font-weight: 600;
}

/* ─── Sub-menu item icons (.sub-nav-icon) ───────────────────────────────────── */

/* Expanded sidebar: make sub-menu links flex so icon+label are left-aligned
   and badges are pushed to the right via ms-auto. */
#sidebar-menu ul li ul.sub-menu li a {
  display: flex !important;
  align-items: center;
}

/* Small, muted icon to the left of the label */
.sub-nav-icon {
  font-size: 14px;
  width: 18px;
  flex-shrink: 0;
  text-align: center;
  margin-right: 6px;
  color: #74788d;
}

/* Active item: brighten the icon to match the active link colour */
.mm-active>a>.sub-nav-icon,
a.active>.sub-nav-icon {
  color: #556ee6;
}

/* Collapsed flyout: icon slightly larger, full blue for scanability */
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu .sidebar-section ul>li:hover>ul.sub-menu .sub-nav-icon {
  font-size: 15px;
  margin-right: 8px;
  color: #556ee6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COLLAPSED SIDEBAR (data-sidebar-size=sm) — custom element fixes
   The webadmin sm-mode CSS targets direct children of #side-menu (depth 3).
   Our section wrapper <li.sidebar-section> adds an extra nesting level, so
   we need to mirror those rules at depth 4 and prevent the wrapper from
   triggering the hover-flyout rule meant for accordion parents.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Tenant identity card ─────────────────────────────────────────────────── */
body[data-sidebar-size=sm] .sidebar-tenant-card {
  padding: 12px 0 !important;
  justify-content: center;
}

body[data-sidebar-size=sm] .sidebar-tenant-card .d-flex {
  justify-content: center;
}

body[data-sidebar-size=sm] .sidebar-tenant-text {
  display: none !important;
}

/* 2. Mode tab strip: stack vertically, icons only ─────────────────────────── */
body[data-sidebar-size=sm] .sidebar-mode-tabs {
  flex-direction: column;
  padding: 4px 8px;
  gap: 2px;
}

body[data-sidebar-size=sm] .sidebar-mode-tabs .sidebar-mode-tab {
  flex-direction: row;
  justify-content: center;
  padding: 8px 0;
  gap: 0;
}

body[data-sidebar-size=sm] .sidebar-mode-tabs .sidebar-mode-tab span {
  display: none;
}

/* 3. Section visibility — honour active mode in sm mode too ─────────────────
      Mode-based show/hide rules (data-sidebar-mode on #side-menu) already apply
      in sm mode. No override needed — only the active section's icons render. */

/* 4. Prevent the section wrapper <li> from triggering webadmin's
      hover-flyout rule (body[data-sidebar-size=sm] #sidebar-menu>ul>li:hover>ul).
      The wrapper has no <a>, so it must NOT act as an accordion parent. */
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu>ul>li.sidebar-section:hover>ul {
  display: block !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  max-height: none !important;
  overflow: visible !important;
  box-shadow: none !important;
  z-index: auto !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* 5. Hide text, badges, and has-arrow chevron for items inside sections ───── */
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu .sidebar-section ul li>a span,
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu .sidebar-section ul li>a .badge {
  display: none !important;
}

body[data-sidebar-size=sm] .vertical-menu #sidebar-menu .sidebar-section ul li a.has-arrow::after {
  display: none !important;
}

/* 6. Center icon in top-level section item links (mirrors webadmin's rule
      for #sidebar-menu>ul>li>a at depth 3, applied at depth 4) */
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu .sidebar-section>ul>li>a {
  display: flex !important;
  justify-content: center !important;
  padding: 12px 20px !important;
  text-align: center;
}

/* 7. Each section item needs position:relative so sub-menu can fly out ─────── */
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu .sidebar-section ul>li {
  position: relative;
}

/* 7a. Force-collapse ALL sub-menus in sm mode (overrides MetisMenu mm-show/mm-active
       open state). This eliminates the invisible vertical space below accordion icons
       that causes the hover-flicker when the mouse passes over the open-but-hidden area. */
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu .sidebar-section ul li>ul.sub-menu {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* 8. Sub-menu flyout for accordion items inside sections on hover ──────────── */
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu .sidebar-section ul>li:hover>ul.sub-menu {
  display: block !important;
  height: auto !important;
  overflow: auto !important;
  max-height: 350px;
  left: 70px !important;
  position: absolute !important;
  top: 0 !important;
  width: 240px !important;
  z-index: 9999 !important;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: 0 4px 4px 0;
  padding: 5px 0 !important;
}

/* 8a. Transparent left bridge on the flyout — prevents the micro-gap flicker
       when the mouse moves diagonally from the icon to the flyout popup.
       The ::before pseudo-element covers the space between the 70px sidebar
       and the flyout, keeping :hover alive during the mouse transition. */
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu .sidebar-section ul>li:hover>ul.sub-menu::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 0;
  bottom: 0;
  width: 8px;
}

/* 9. Sub-menu flyout links: restore text + badge visibility inside the flyout popup ── */
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu .sidebar-section ul>li:hover>ul.sub-menu li>a span.menu-item {
  display: inline !important;
}

body[data-sidebar-size=sm] .vertical-menu #sidebar-menu .sidebar-section ul>li:hover>ul.sub-menu li>a .badge {
  display: inline-flex !important;
}

body[data-sidebar-size=sm] .vertical-menu #sidebar-menu .sidebar-section ul>li:hover>ul.sub-menu li>a {
  padding: 8px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}