/* ── Remove number input spinners (increment/decrement buttons) across the admin panel ── */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  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;
  bottom: 24px;
  right: 24px;
  z-index: 999999;
  display: flex;
  flex-direction: column-reverse;
  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="catalog"] .sidebar-section[data-section="catalog"] {
  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;
}

/* ─── Mobile: small gap between the fixed top header and page content ──────
   .page-content's top padding (75px) exactly matches the fixed header's
   height, so page content sits flush against the header on every viewport.
   Add a little breathing room below the header on mobile/tablet. ────────── */
@media (max-width: 991.98px) {
  .page-content {
    padding-top: calc(75px + 12px);
  }
}

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;
}

/* ─── Login method switcher (Email / Mobile Number) ─────────────────────────
   app/views/{oauth,panel}/sessions/new.html.erb. Plain text options; only
   the selected one is highlighted, via Bootstrap .nav-pills' theme-primary
   fill. `min-height: 44px` + flex-centering guarantees the tap target meets
   the ~44px mobile minimum even on the rare viewport where a label wraps;
   the max-width:375px rule trims padding/font-size on the narrowest phones
   so "Mobile Number" fits on one line instead of wrapping to two while
   "Email" stays one line, which would otherwise leave the two tabs visibly
   uneven heights. ──────────────────────────────────────────────────────── */
.login-method-tabs {
  gap: 8px;
}
.login-method-tabs .nav-link {
  font-weight: 500;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media (max-width: 375px) {
  .login-method-tabs .nav-link {
    padding: 0.6rem 0.5rem;
    font-size: 13px;
  }
}

/* ─── WhatsApp-OTP login: searchable country calling-code picker ────────────
   app/views/shared/_phone_country_picker.html.erb (OAuth + panel login
   "Mobile Number" tabs, and the panel self-service Change Phone Number
   modal — app/views/shared/_phone_change_modal.html.erb — which reuses the
   same partial/classes). Widens/scrolls Bootstrap's own .dropdown-menu
   rather than reinventing it — the picker's ancestor .card has no
   `overflow` rule, so the dropdown is never clipped. ────────────────────── */
.phone-country-dropdown {
  width: 300px;
  max-width: 90vw;
}

.phone-country-option-list {
  max-height: 240px;
  overflow-y: auto;
}

/* The trigger button's content (flag + dial code + chevron) has a small,
   fairly fixed width — never let it shrink below that on narrow viewports,
   or the flag/dial/chevron get squeezed together. The national-number
   input is the one that should absorb the narrow viewport: flex-basis
   auto + flex-grow lets it take the remaining row width, and
   min-width: 0 overrides the flex-item default of min-width: auto (which
   is based on content size and would otherwise stop the input shrinking
   below it, pushing the whole row wider than the card on a ~320-360px
   screen). */
.phone-country-picker {
  flex-shrink: 0;
}

.phone-national-input {
  flex: 1 1 auto;
  min-width: 0;
}
/* ── Payout invoice lifecycle stepper (.sm-stepper) ────────────────────────────
   Rendered by shared/_status_stepper (payout invoices, onboarding, agreements).
   Payout example: Draft -> Submitted -> Payment sent -> Paid. Steps are --done / --current /
   --upcoming; --attention marks a current step that needs a second look (e.g. a
   rejected payment). The --compact modifier drops the labels for table rows. */
.sm-stepper {
  display: flex;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sm-stepper__step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

/* Connector drawn from the previous step's dot to this one. */
.sm-stepper__step::before {
  content: "";
  position: absolute;
  top: 15px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--bs-border-color, #dee2e6);
  z-index: 0;
}

.sm-stepper__step:first-child::before {
  display: none;
}

.sm-stepper__step--done::before,
.sm-stepper__step--current::before {
  background: var(--bs-success, #34c38f);
}

.sm-stepper__dot {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: var(--bs-body-bg, #fff);
  border: 2px solid var(--bs-border-color, #dee2e6);
  color: var(--bs-secondary-color, #6c757d);
}

.sm-stepper__step--done .sm-stepper__dot {
  background: var(--bs-success, #34c38f);
  border-color: var(--bs-success, #34c38f);
  color: #fff;
}

.sm-stepper__step--current .sm-stepper__dot {
  background: var(--bs-primary, #556ee6);
  border-color: var(--bs-primary, #556ee6);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(85, 110, 230, 0.18);
}

.sm-stepper__step--attention .sm-stepper__dot {
  background: var(--bs-warning, #f1b44c);
  border-color: var(--bs-warning, #f1b44c);
  box-shadow: 0 0 0 4px rgba(241, 180, 76, 0.25);
}

.sm-stepper__label {
  display: block;
  margin-top: 6px;
  padding: 0 2px;
  font-size: 12px;
  line-height: 1.25;
  color: var(--bs-secondary-color, #6c757d);
}

.sm-stepper__step--current .sm-stepper__label {
  color: var(--bs-body-color, #495057);
  font-weight: 600;
}

/* Compact: small dots, no labels (the status badge next to it carries the text). */
.sm-stepper--compact {
  min-width: 96px;
  max-width: 140px;
}

.sm-stepper--compact .sm-stepper__step::before {
  top: 6px;
}

.sm-stepper--compact .sm-stepper__dot {
  width: 14px;
  height: 14px;
  border-width: 2px;
  font-size: 0;
}

.sm-stepper--compact .sm-stepper__step--current .sm-stepper__dot,
.sm-stepper--compact .sm-stepper__step--attention .sm-stepper__dot {
  box-shadow: 0 0 0 3px rgba(85, 110, 230, 0.18);
}

.sm-stepper--compact .sm-stepper__label {
  display: none;
}

@media (max-width: 575.98px) {
  .sm-stepper:not(.sm-stepper--compact) .sm-stepper__label {
    font-size: 11px;
  }
}

/* Wide: lifecycles with many steps (onboarding enrollment, 8 steps). Keeps each label readable;
   wrap the list in an .overflow-auto container so it scrolls sideways on narrow screens. */
.sm-stepper--wide {
  min-width: 720px;
}

/* ── Contain absolutely-positioned content inside scrollable tables ────────────────────────
   `.visually-hidden` (screen-reader-only labels such as "Actions" / "View") is position:absolute.
   Without a positioned ancestor, its containing block is OUTSIDE the `.table-responsive` scroll
   box, so the scroll box does not clip it and a wide table's hidden label stretches the whole
   page sideways (blank area on phones, and a huge body padding-right when a modal opens).
   Making the scroll box the containing block clips these correctly on every page. */
.table-responsive {
  position: relative;
}