/* ---------------------------------------------------------------------------
   SELLER NAVIGATION -- ICON RAIL + FLYOUT

   Markup in application/views/seller/include-sidebar.php.

   Layout contract
     desktop (>=992px)  72px fixed rail; .page carries the matching padding, so
                        the topbar and the content both clear it without
                        relying on Tabler's .navbar-vertical ~ .page-wrapper
                        rule (tabler.css:16781 hardcodes margin-left: 15rem,
                        which is why that rule is not used here).
                        The flyout OVERLAYS the content instead of pushing it:
                        opening a menu must never reflow a table mid-scan.
     mobile  (<992px)   rail hidden, burger button, same flyout element becomes
                        a drawer showing every section stacked -- a hover-only
                        rail is unusable on a touch screen.

   Colour comes from the shared ramp in theme-modern.css. Nothing here declares
   its own grey.
--------------------------------------------------------------------------- */

.srail {
  --srail-w: 72px;
  --srail-bg: #101a2b;
  --srail-ink: #8fa2bb;
  --srail-ink-strong: #ffffff;
  --srail-hover: rgba(255, 255, 255, .07);
  --srail-panel-bg: #162134;
}

/* ==========================================================================
   RAIL
   ========================================================================== */

.srail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1045;
  display: none;
  width: var(--srail-w);
  flex-direction: column;
  align-items: center;
  padding: .75rem 0 .5rem;
  background: var(--srail-bg);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06);
}

.srail__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: .75rem;
  border-radius: var(--sm-radius-sm, 7px);
  flex: 0 0 auto;
}

.srail__brand img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.srail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  align-items: center;
  overflow-y: auto;
  overflow-x: visible;
  flex: 1 1 auto;
  scrollbar-width: none;
}

.srail__list::-webkit-scrollbar {
  width: 0;
}

.srail__foot {
  flex: 0 0 auto;
  padding-top: .5rem;
  margin-top: .25rem;
  width: 100%;
  display: flex;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

.srail__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--srail-ink);
  cursor: pointer;
  transition: background-color .13s ease, color .13s ease;
}

.srail__btn i {
  font-size: 1.35rem;
  line-height: 1;
}

.srail__btn:hover,
.srail__btn:focus-visible {
  background: var(--srail-hover);
  color: var(--srail-ink-strong);
}

.srail__btn:focus-visible {
  outline: 2px solid var(--sm-accent, #0e7dd1);
  outline-offset: 2px;
}

/* The section you are in. The bar on the leading edge is what makes the rail
   readable at a glance -- with icons only, a tint alone is too weak to find. */
.srail__btn.is-current {
  background: rgba(var(--sm-accent-rgb, 14, 125, 209), .2);
  color: var(--srail-ink-strong);
}

.srail__btn.is-current::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  border-radius: 0 3px 3px 0;
  background: var(--sm-accent, #0e7dd1);
}

/* The section whose panel is currently open, which is not always the section
   you are in -- you can browse Products while sitting on an order. */
.srail__btn[aria-expanded="true"] {
  background: var(--srail-hover);
  color: var(--srail-ink-strong);
}

/* ---- tooltips --------------------------------------------------------
   An icon rail without labels is a memory test. These appear instantly on
   hover and on keyboard focus. */

.srail__tip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  padding: .3rem .55rem;
  border-radius: 6px;
  background: #0b1220;
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  z-index: 2;
}

.srail__btn:hover .srail__tip,
.srail__btn:focus-visible .srail__tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* The tooltip duplicates the visually-hidden label. It is hidden from screen
   readers with aria-hidden in the markup, not from CSS -- the `speak` property
   was dropped from the spec and does nothing in any current browser. */

/* ==========================================================================
   FLYOUT / DRAWER
   ========================================================================== */

.srail-flyout {
  position: fixed;
  inset: 0 auto 0 var(--srail-w, 72px);
  z-index: 1040;
  width: 260px;
  padding: .75rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--srail-panel-bg, #162134);
  box-shadow: 8px 0 28px -10px rgba(0, 0, 0, .55);
  transform: translateX(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.srail-flyout.is-open {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

/* Desktop shows one section at a time; the drawer on mobile shows all of them,
   which is why this rule is scoped rather than global. */
@media (min-width: 992px) {

  .srail {
    display: flex;
  }

  .srail-flyout .srail-panel {
    display: none;
  }

  .srail-flyout .srail-panel.is-active {
    display: block;
  }

  .srail-flyout__head {
    display: none;
  }

  /* Offsets the topbar and the content together. Applied to .page rather than
     .page-wrapper so the sticky header clears the rail too. */
  .page {
    padding-left: var(--srail-w, 72px);
  }
}

.srail-panel__title {
  margin: .15rem 0 .5rem;
  padding: 0 .5rem;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .45);
}

.srail-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .6rem;
  border-radius: 7px;
  color: #9fb0c6;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}

.srail-link:hover,
.srail-link:focus-visible {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

.srail-link:focus-visible {
  outline: 2px solid var(--sm-accent, #0e7dd1);
  outline-offset: -2px;
}

.srail-link.is-current {
  background: rgba(var(--sm-accent-rgb, 14, 125, 209), .22);
  color: #fff;
  font-weight: 700;
}

.srail-link i {
  font-size: 1.05rem;
  opacity: .85;
}

/* Section name under a search hit, so "Cities" is distinguishable from any
   other short label once it is out of its section. */
.srail-link__in {
  margin-left: auto;
  padding-left: .5rem;
  font-size: .6875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .35);
  white-space: nowrap;
}

/* ---- find ------------------------------------------------------------ */

.srail-find__input {
  width: 100%;
  margin-bottom: .5rem;
  padding: .45rem .6rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 7px;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font: inherit;
  font-size: .8125rem;
}

.srail-find__input::placeholder {
  color: rgba(255, 255, 255, .4);
}

.srail-find__input:focus {
  outline: none;
  border-color: var(--sm-accent, #0e7dd1);
  background: rgba(255, 255, 255, .1);
}

.srail-find__empty {
  margin: .5rem .6rem;
  color: rgba(255, 255, 255, .4);
  font-size: .8125rem;
}

/* ==========================================================================
   SCRIM
   ========================================================================== */

.srail-scrim {
  position: fixed;
  inset: 0;
  z-index: 1039;
  background: rgba(8, 13, 22, .45);
  opacity: 0;
  transition: opacity .16s ease;
}

.srail-scrim.is-open {
  opacity: 1;
}

/* Desktop only needs the scrim as a click-catcher, not as a dimmer -- the
   flyout is a menu there, not a modal. */
@media (min-width: 992px) {
  .srail-scrim {
    background: transparent;
  }
}

/* ==========================================================================
   MOBILE
   ========================================================================== */

.srail-burger {
  position: fixed;
  left: .65rem;
  top: .65rem;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--sm-line, #e2e8f0);
  border-radius: 9px;
  background: var(--sm-surface, #fff);
  color: var(--sm-ink, #0f172a);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .1);
}

.srail-burger i {
  font-size: 1.3rem;
}

.srail-burger:focus-visible {
  outline: 2px solid var(--sm-accent, #0e7dd1);
  outline-offset: 2px;
}

.srail-flyout__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .25rem .35rem .75rem;
  margin-bottom: .25rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08);
}

.srail-flyout__brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: #fff;
  font-weight: 800;
  font-size: .9375rem;
  text-decoration: none;
  letter-spacing: -.015em;
}

.srail-flyout__brand img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.srail-flyout__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
}

.srail-flyout__close:focus-visible {
  outline: 2px solid var(--sm-accent, #0e7dd1);
  outline-offset: 2px;
}

@media (max-width: 991.98px) {

  /* The drawer starts flush to the edge, because there is no rail beside it. */
  .srail-flyout {
    left: 0;
    width: min(288px, 86vw);
    transform: translateX(-100%);
    opacity: 1;
    visibility: hidden;
  }

  .srail-flyout.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  /* Every section is listed, so a phone gets one scrollable menu rather than a
     rail it cannot hover. */
  .srail-panel {
    margin-bottom: .35rem;
  }

  .srail-panel--find {
    padding-top: .5rem;
    margin-top: .25rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  }

  /* The burger sits where the page title would start, so the header needs to
     make room for it. */
  .navbar-container,
  .page-header {
    padding-left: 3.25rem;
  }
}

@media (min-width: 992px) {
  .srail-burger {
    display: none;
  }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  .srail-flyout,
  .srail-scrim,
  .srail__btn,
  .srail__tip,
  .srail-link {
    transition: none;
  }
}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {

  .srail,
  .srail-flyout,
  .srail-scrim,
  .srail-burger {
    display: none !important;
  }

  .page {
    padding-left: 0 !important;
  }
}