/* ============================================================
   Sidebar — full-height, no topbar.
   Overrides common-theme.css hardcoded values (top: 48px,
   width: 300px, padding-left: 300px, blue header bg).
   ============================================================ */

/* ── Hide Serenity's built-in blue header ────────────────────── */
.s-sidebar-header { display: none !important; }

/* ── Remove 48px header offset from content height ──────────── */
/* common-theme hardcodes calc(100vh - 48px) on section.content  */
section.content {
  min-height: 100dvh !important;
  padding: 2.2rem 2.2rem 0.6rem 2.2rem !important
}
@media (min-width: 768px) {
  .full-height-page section.content {
    height: 100dvh !important;
  }
}

/* ── Sidebar shell ─────────────────────────────────────────────
   The rail is dark in BOTH themes, so it no longer inherits page
   surface tokens — every colour below comes from the --s-sidebar-*
   family the theme files declare for it.

   The seam is the brand's signature: .topbar carries a 6px yellow
   bottom border, .totals a 5px top border, .toast a 5px left border.
   Rotated for a vertical rail, that rule lands on the edge facing
   content. border-inline-end mirrors itself for RTL, where the rail
   sits on the right and content is to its left.

   No backdrop-filter: it cost a compositing layer to blur a surface
   that is now fully opaque.                                        */
.s-sidebar {
  top: 0 !important;
  width: var(--s-sidebar-pane-width) !important;
  height: 100dvh;
  background: var(--s-sidebar-bg) !important;
  border-inline-end: 4px solid var(--s-sidebar-seam);
  /* Keep hidden in the expanded state. It is also what gives Popper a
     clipping boundary to flip the footer menus against, so they open
     upward into the rail instead of off the bottom of the screen —
     turning it visible unanchors that and they open downward. */
  overflow: hidden;
  transition: width var(--s-transition-slow), transform var(--s-transition-slow);
  z-index: 1050;
}

/* ── Sidebar pane — override common-theme's hardcoded #fff ───── */
.s-sidebar-pane {
  position: relative !important;
  width: 100% !important;
  background: transparent !important;  /* inherits from .s-sidebar */
  border-right: none !important;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ── Brand: the eye as a stamp, the wordmark set beside it ─────
   The badge this replaces was 210x100 plus padding — 129px of a rail
   that has to hold fourteen destinations, spent on the one element
   nobody clicks. It also shipped two yellows a few pixels apart: the
   lockup's field is a textured mustard baked into the pixels (sampled
   #D7B33A, drifting #CFA82E-#DCB952), not --wgl-yellow.

   logo_eyet.png is the eye alone, 215x215, on that same field. Square,
   so it survives being small; the field becomes the stamp rather than
   a band of dead colour around a mark. 66px total, and the wordmark
   now says in type what the cropped banner was straining to say in
   pixels.

   The two yellows still differ — the field is the file's own — but at
   38px it reads as an ink stamp rather than a second brand colour.  */
.s-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 0.875rem 0.8rem;
  flex-shrink: 0;
  border-bottom: 1px solid var(--s-sidebar-divider);
}
.s-sidebar-mark {
  display: block;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  background-image: var(--s-site-logo-eye-url);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: var(--s-shadow-sm);
  /* No width/height transition. The mark only resizes when the rail
     collapses, and the rail is already animating its own width in that
     same 350ms window — animating the mark's box as well just adds a
     second layout-thrashing element to every frame for no visual gain.
     It snaps, inside a moving container, which reads as instant. */
}
.s-sidebar-wordmark {
  min-width: 0;
  line-height: 1.15;
  overflow: hidden;
}
/* The WORDMARK, set as the brand sets it: lowercase and tight.

   It used to be uppercase at +0.11em, which is the app's micro-label geometry
   (9.5px / .16em / uppercase) borrowed for something that is not a label. The
   brand is a lockup — `why go less?` in Space Grotesk 700 at -0.01em — and it
   sits 10px from the eye mark carrying that exact lockup, so tracking it out and
   shouting it contradicted the logo beside it. */
.s-sidebar-wordmark b {
  display: block;
  font-family: var(--header-font);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--s-sidebar-fg-strong);
  white-space: nowrap;
}

/* The tagline under the wordmark.

   DIRECT CHILD, not any descendant. As `.s-sidebar-wordmark span` this also hit
   the question mark nested inside the <b>, which then took `display: block` and
   dropped onto its own line at 0.615rem — the brand accent rendered as a second
   tagline. */
.s-sidebar-wordmark > span {
  display: block;
  margin-top: 2px;
  font-size: 0.615rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--s-sidebar-link-active);
  white-space: nowrap;
}

/* The question mark is the brand's one accent, and it is TEXT rather than a
   chip — `.brand span { color: var(--yellow) }` in the legacy, #B99A00 in print.
   A yellow container here would be a lockup the brand does not have.

   Everything but the colour is inherited from the <b>, so the mark stays on the
   same line and at the same size as the words it belongs to. `display: inline`
   is stated rather than assumed: it is the one property a stray descendant
   selector took away once already.

   Yellow as text is legal because the rail is dark; on a light surface the token
   to reach for would be --wgl-yellow-deep. See the contrast invariants in
   tokens.css. */
.s-sidebar-wordmark b .s-sidebar-brand-q {
  display: inline;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: var(--s-sidebar-link-active);
}

/* ── Search ──────────────────────────────────────────────────── */
.s-sidebar-search {
  padding: 0.85rem 0.85rem 0.4rem;
  flex-shrink: 0;
  position: relative;
}
.s-sidebar-search-icon {
  position: absolute;
  left: 1.65rem;
  top: 55%;
  transform: translateY(-50%);
  color: var(--s-sidebar-field-ph);
  font-size: 0.82rem;
  pointer-events: none;
}
[dir="rtl"] .s-sidebar-search-icon { left: auto; right: 1.65rem; }
/* Keeps the project's input geometry, but not its colours — the page's
   --s-input-* are tuned for paper and would put a white field on the
   black rail. A translucent well reads as recessed into the rail.   */
.s-sidebar-search-input {
  padding-left: 2.1rem !important;
  border-radius: var(--bs-border-radius) !important;
  border-color: var(--s-sidebar-field-border) !important;
  background: var(--s-sidebar-field-bg) !important;
  color: var(--s-sidebar-field-text) !important;
  font-size: 0.875rem;
  height: var(--s-input-inner-height);
  line-height: var(--s-input-line-height);
}
.s-sidebar-search-input::placeholder { color: var(--s-sidebar-field-ph); }
[dir="rtl"] .s-sidebar-search-input {
  padding-left: 0.75rem !important;
  padding-right: 2.1rem !important;
}
.s-sidebar-search-input:focus {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 3px var(--s-input-outline) !important;
}

/* ── Scrollable nav area ───────────────────────────────────────
   The mask fades the first and last 16px so a row that is half past the
   boundary reads as "there is more", instead of being sliced flat against
   the footer's divider and looking like a rendering fault.             */
.s-sidebar-groups {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.25rem 0 0.6rem;
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.s-sidebar-groups:hover {
  scrollbar-color: var(--s-sidebar-scroll-thumb) transparent;
}

/* ── Menu list ───────────────────────────────────────────────── */
.s-sidebar-menu {
  padding: 0 0.6rem;
  list-style: none;
  margin: 0;
}

/* ── Sidebar items ───────────────────────────────────────────── */
.s-sidebar-item {
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
  position: relative;
}
.s-sidebar-item.has-children {
  margin-top: 0.2rem;
}

/* ── Sidebar link ────────────────────────────────────────────── */
/* Scope to .s-sidebar to beat Bootstrap's a{color:--bs-link-color}
   and any common-theme.css rules that may have higher specificity  */
.s-sidebar a,
.s-sidebar a:visited,
.s-sidebar a:hover {
  text-decoration: none;
}
/* 39px rows rather than 47px. This is a mouse-driven desktop admin, so the
   comfortable minimum is well under the 44px touch figure, and eight pixels
   a row across fourteen destinations is most of what pays for the band
   titles. The icon-to-label gap goes the other way — 0.3rem had the glyph
   almost touching its word. */
.s-sidebar .s-sidebar-link,
.s-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.8rem;
  border-radius: 9px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--s-sidebar-link);
  text-decoration: none;
  position: relative;
  transition: background var(--s-transition), color var(--s-transition);
}
/* Neutral, not yellow. --s-sidebar-hover-bg is a 10% yellow wash, which over
   #111 composites to a muddy olive and spends the rail's one signal colour on
   "the cursor is here". Every yellow pixel in the rail now means "you are
   here", which is the only thing worth shouting in a list of fourteen. */
.s-sidebar .s-sidebar-link:hover,
.s-sidebar-link:hover {
  background: rgba(var(--wgl-paper-rgb), 0.07);
  color: var(--s-sidebar-fg-strong);
  text-decoration: none;
}
/* There was no focus style at all, so tabbing the rail on a near-black
   surface showed whatever the browser draws over #111 — in practice nothing.
   Inset so it cannot be clipped by the scroll container. */
.s-sidebar .s-sidebar-link:focus-visible,
.s-sidebar-link:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--s-sidebar-link-active);
}

/* ── Active leaf — a solid brand pill ─────────────────────────
      On a dark rail the fill can carry the state by itself: black on
      --wgl-yellow is 13.4:1, and it is the reference's own primary
      button (.btn.solid in WGL_Quotation_Builder.html). The 3px
      leading marker bar that used to sit inside this pill is gone.

      Only one row is ever active, so the loudest object in the rail
      is also the one you are looking for.
      Uses --s-sidebar-active-* so each theme controls it alone.  */
.s-sidebar .s-sidebar-item.active:not(.has-children) > .s-sidebar-link,
.s-sidebar-item.active:not(.has-children) > .s-sidebar-link {
  background: var(--s-sidebar-active-bg, var(--bs-primary));
  color: var(--s-sidebar-active-color, var(--s-on-primary));
  font-weight: 600;
  position: relative;
}
.s-sidebar-item.active:not(.has-children) > .s-sidebar-link .s-sidebar-icon {
  color: var(--s-sidebar-active-color, var(--s-on-primary));
}
/* Keep pill on hover — don't dim it */
.s-sidebar-item.active:not(.has-children) > .s-sidebar-link:hover {
  background: var(--s-sidebar-active-bg, var(--bs-primary));
  color: var(--s-sidebar-active-color, var(--s-on-primary));
}
.s-sidebar-item.active:not(.has-children) > .s-sidebar-link:hover .s-sidebar-icon {
  color: var(--s-sidebar-active-color, var(--s-on-primary));
}

/* ── Active parent group — an edge marker, not a fill ────────────
   The fill belongs to the leaf you are actually on. A parent that merely
   contains it gets a 3px marker on the edge facing the content: related,
   subordinate, and unmistakably not the same thing as the yellow pill. */
.s-sidebar .s-sidebar-item.active.has-children > .s-sidebar-link,
.s-sidebar-item.active.has-children > .s-sidebar-link {
  background: transparent;
  color: var(--s-sidebar-fg-strong);
  font-weight: 600;
}
.s-sidebar-item.active.has-children > .s-sidebar-link .s-sidebar-icon {
  color: var(--s-sidebar-icon-active, var(--bs-primary));
}
.s-sidebar-item.active.has-children > .s-sidebar-link::before {
  content: "";
  position: absolute;
  inset-inline-start: -0.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 17px;
  border-radius: 0 3px 3px 0;
  background: var(--s-sidebar-link-active);
}
[dir="rtl"] .s-sidebar-item.active.has-children > .s-sidebar-link::before {
  border-radius: 3px 0 0 3px;
}

/* ── Expanded parent (aria-expanded) ─────────────────────────── */
.s-sidebar .s-sidebar-link[aria-expanded="true"],
.s-sidebar-link[aria-expanded="true"] { color: var(--s-sidebar-fg-strong); font-weight: 500; }
.s-sidebar-link[aria-expanded="true"] .s-sidebar-icon { color: var(--s-sidebar-icon); }

/* ── Sidebar icon ─────────────────────────────────────────────── */
.s-sidebar-icon {
  font-size: 1.1rem;
  width: 1.25rem;
  text-align: center;
  color: var(--s-sidebar-icon);
  flex-shrink: 0;
  transition: color var(--s-transition);
}
.s-sidebar .s-sidebar-link:hover .s-sidebar-icon,
.s-sidebar-link:hover .s-sidebar-icon { color: var(--s-sidebar-fg-strong); }

/* ── Chevron toggle ───────────────────────────────────────────── */
.s-sidebar-menu-toggle {
  font-size: 0.72rem;
  margin-left: auto;
  opacity: 0.45;
  transition: transform var(--s-transition);
  flex-shrink: 0;
}
[dir="rtl"] .s-sidebar-menu-toggle { margin-left: 0; margin-right: auto; }
[aria-expanded="true"] > .s-sidebar-menu-toggle { transform: rotate(90deg); }

/* ── Sub-menu: indented with left border connector ───────────── */
.s-sidebar-menu .s-sidebar-menu {
  margin-left: 1.35rem;
  margin-right: 0;
  padding: 0.2rem 0 0.25rem 0.6rem;
  border-left: 1px solid var(--s-sidebar-divider);
}
.s-sidebar-menu .s-sidebar-menu .s-sidebar-link {
  font-size: 0.9rem;
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  gap: 0.4rem;
}
/* Sub-item icons: slightly smaller than top-level but still readable */
.s-sidebar-menu .s-sidebar-menu .s-sidebar-icon {
  font-size: 1.05rem;
  width: 1.5rem;
}
[dir="rtl"] .s-sidebar-menu .s-sidebar-menu {
  margin-left: 0;
  margin-right: 1.35rem;
  padding-left: 0;
  padding-right: 0.6rem;
  border-left: none;
  border-right: 1px solid var(--s-sidebar-divider);
}

/* ── Section titles ─────────────────────────────────────────────
   The brand's micro-label: the quotation builder sets every one of
   its `label`s at 9.5px / .16em / uppercase. Matching that tracking
   is what makes these read as WhyGoLess rather than generic admin
   eyebrows. Opacity raised from .55 — on black that was dropping an
   already-muted grey below readable.

   The trailing rule closes the band. Without it the title floats and
   the eye has to guess where one group ends; with it, each band is a
   visibly bounded object, which is the entire point of grouping.   */
.s-sidebar-section-title {
  font-family: var(--header-font);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--s-sidebar-title);
  padding: 0.875rem 0.75rem 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.9;
}
.s-sidebar-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--s-sidebar-divider);
}
/* The band title is an .s-sidebar-item so that Serenity's search can hide it
   with the rest — it must not inherit the row padding meant for links. */
.s-sidebar-item.s-sidebar-section {
  padding-top: 0;
  padding-bottom: 0;
}
.s-sidebar-menu > .s-sidebar-item.s-sidebar-section:first-child
  > .s-sidebar-section-title {
  padding-top: 0.3rem;
}

/* ── Footer bar ─────────────────────────────────────────────────
   Three anonymous glyphs became a person. A cashier and the owner share
   one terminal in this shop; which account is signed in is something you
   want to know before you take a payment, not after.                  */
.s-sidebar-footer {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.5rem 0.5rem;
  border-top: 1px solid var(--s-sidebar-divider);
  flex-shrink: 0;
}
.s-sidebar-who-wrap {
  flex: 1;
  min-width: 0;
}
.s-sidebar-who {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  padding: 0.3rem 0.4rem;
  border-radius: 9px;
  text-decoration: none;
  transition: background var(--s-transition);
}
.s-sidebar-who:hover { background: rgba(var(--wgl-paper-rgb), 0.07); }
.s-sidebar-who:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--s-sidebar-link-active);
}
.s-sidebar-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(var(--wgl-yellow-rgb), 0.16);
  color: var(--s-sidebar-link-active);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.s-sidebar-who-text {
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--s-sidebar-fg-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s-sidebar-footer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  color: var(--s-sidebar-icon);
  font-size: 1.1rem;
  text-decoration: none;
  transition: background var(--s-transition), color var(--s-transition);
}
.s-sidebar-footer-btn:hover {
  background: rgba(var(--wgl-paper-rgb), 0.07);
  color: var(--s-sidebar-fg-strong);
}
.s-sidebar-footer-btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--s-sidebar-link-active);
}
.s-sidebar-footer .dropdown-menu {
  border: none;
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--s-shadow-lg);
  background: var(--s-card-solid-bg);
  padding: 6px 0;
  min-width: 160px;
  font-size: 0.875rem;
  /* Precaution, not a fix for anything observed: the language list is 11
     rows / ~420px and it opens upward from a footer already on the bottom
     edge, so it needs the full height of a short window. Cap and scroll. */
  max-height: min(60vh, 420px);
  overflow-y: auto;
}
.s-sidebar-footer .dropdown-item {
  padding: 7px 13px;
  border-radius: 6px;
  margin: 2px 5px;
  /* Bootstrap ships .dropdown-item at width:100%; with the 5px side margins
     above that makes every row 10px wider than the menu, so the hover fill
     spilled past the card's rounded edge. Shrink to fit the inset instead. */
  width: auto;
  color: var(--s-input-text);
  transition: background var(--s-transition), color var(--s-transition);
}
/* Hover/active take the same pill as the active sidebar row — yellow fill,
   black label — so the whole rail speaks one highlight language.
   The previous rule painted --bs-primary text on --bs-primary-bg-subtle:
   #FFD400 on #FFF6C9 is 1.1:1, unreadable in light theme. Yellow is a fill
   here, never a text colour. */
.s-sidebar-footer .dropdown-item:hover,
.s-sidebar-footer .dropdown-item:focus,
.s-sidebar-footer .dropdown-item:active,
.s-sidebar-footer .dropdown-item.active {
  background: var(--s-sidebar-active-bg, var(--bs-primary));
  color: var(--s-sidebar-active-color, var(--s-on-primary));
}
.s-user-profile-menu { min-width: 200px !important; }
.s-user-card { border-bottom-color: var(--s-card-border) !important; }
.s-user-avatar { color: var(--s-sidebar-icon); font-size: 2rem; }
.s-user-info { color: var(--bs-secondary-color); font-size: 0.85rem; }

/* ── Collapse toggle — desktop only, at the head of the rail ───
   It acts on the rail, so it sits on the rail's own header rather than
   queued behind language and theme in a footer that now also has to fit
   a name. */
.s-sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-inline-start: auto;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--s-sidebar-icon);
  font-size: 0.75rem;
  text-decoration: none;
  transition: background var(--s-transition), color var(--s-transition),
              transform var(--s-transition-slow);
}
.s-sidebar-collapse-btn:hover {
  background: rgba(var(--wgl-paper-rgb), 0.09);
  color: var(--s-sidebar-fg-strong);
}
.s-sidebar-collapse-btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--s-sidebar-link-active);
}
/* Hidden on mobile — sidebar open/close is via hamburger only */
@media (max-width: 1199.98px) {
  .s-sidebar-collapse-btn { display: none !important; }
}

/* ── Tooltip (collapsed hover) ────────────────────────────────── */
.s-sidebar-tooltip {
  position: fixed;
  transform: translateY(-50%);
  background: var(--s-card-solid-bg);
  border: 1px solid var(--s-card-border);
  padding: 5px 11px;
  border-radius: var(--bs-border-radius);
  box-shadow: var(--s-shadow-md);
  font-size: 0.85rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--s-transition);
  z-index: 2000;
}
@media (min-width: 1200px) {
  .s-sidebar-tooltip.show { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   MAIN CONTENT — global reset first, then scoped overrides
   ═══════════════════════════════════════════════════════════════ */

/* Global base: no offset, no margin, full height */
.s-main {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 100dvh !important;
  transition: padding-left var(--s-transition-slow);
}

/* Desktop: push content right of sidebar */
@media (min-width: 1200px) {
  .s-main {
    padding-left: var(--s-sidebar-pane-width) !important;
  }
  /* Collapsed: push content right of band */
  body.s-sidebar-pane-collapsed .s-main {
    padding-left: var(--s-sidebar-band-width) !important;
  }
}

/* Mobile: space for floating hamburger only */
@media (max-width: 1199.98px) {
  .s-main {
    padding-top: 58px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP COLLAPSED STATE — scoped to desktop only so mobile
   sidebar is never affected even if the cookie is set
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
  body.s-sidebar-pane-collapsed .s-sidebar {
    width: var(--s-sidebar-band-width) !important;
    overflow: visible;  /* allow footer dropdowns to escape the band */
  }
  body.s-sidebar-pane-collapsed .s-sidebar-pane {
    overflow: visible;
  }
  body.s-sidebar-pane-collapsed .s-sidebar-groups {
    overflow: hidden;  /* still clip the nav icons */
  }
  body.s-sidebar-pane-collapsed .s-sidebar-link-text,
  body.s-sidebar-pane-collapsed .s-sidebar-menu-toggle,
  body.s-sidebar-pane-collapsed #s-sidebar-search,
  body.s-sidebar-pane-collapsed .s-sidebar-wordmark,
  body.s-sidebar-pane-collapsed .s-sidebar-who-text,
  body.s-sidebar-pane-collapsed .s-sidebar-section-title {
    display: none !important;
  }
  /* The mark is already square and already the whole lockup, so the band
     needs no second file and no re-crop — it just gets smaller. This is why
     the eye was the right choice for the expanded rail too. */
  body.s-sidebar-pane-collapsed .s-sidebar-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }
  body.s-sidebar-pane-collapsed .s-sidebar-brand {
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.6rem 0 0.55rem;
  }
  /* A band title with nothing to title is a 1px rule floating in a 64px
     column. The title itself is hidden above; this removes its box too. */
  body.s-sidebar-pane-collapsed .s-sidebar-item.s-sidebar-section {
    display: none !important;
  }
  body.s-sidebar-pane-collapsed .s-sidebar-who-wrap {
    flex: none;
    width: 100%;
  }
  body.s-sidebar-pane-collapsed .s-sidebar-who {
    justify-content: center;
    padding: 0.3rem 0;
  }
  /* Footer: icon-only column in collapsed state */
  body.s-sidebar-pane-collapsed .s-sidebar-footer {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.6rem 0;
  }
  body.s-sidebar-pane-collapsed .s-sidebar-footer .dropup,
  body.s-sidebar-pane-collapsed .s-sidebar-footer .dropdown {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  /* Collapse btn: the band is 64px, so the mark and the toggle cannot sit
     side by side. Stack them — mark, then the toggle rotated to "expand". */
  body.s-sidebar-pane-collapsed .s-sidebar-collapse-btn {
    margin-inline-start: 0;
    transform: rotate(180deg);
  }
  /* Open menus to the right of the band */
  body.s-sidebar-pane-collapsed .s-sidebar-footer .dropdown-menu {
    left: 100% !important;
    right: auto !important;
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
    margin-left: 8px;
  }
  [dir="rtl"] body.s-sidebar-pane-collapsed .s-sidebar-footer .dropdown-menu {
    left: auto !important;
    right: 100% !important;
    margin-left: 0;
    margin-right: 8px;
  }
  /* Menu: tighter padding */
  body.s-sidebar-pane-collapsed .s-sidebar-menu {
    padding: 0 0.2rem;
  }
  /* Links: icon-only, centered */
  body.s-sidebar-pane-collapsed .s-sidebar-link {
    padding: 0.65rem;
    justify-content: center;
    gap: 0;
    border-radius: 10px;
  }
  body.s-sidebar-pane-collapsed .s-sidebar-icon {
    width: auto;
    font-size: 1.25rem;
  }
  body.s-sidebar-pane-collapsed .s-sidebar-item.has-children {
    margin-top: 0;
  }
  /* Sub-menus in collapsed: show active children (no indent/border) */
  body.s-sidebar-pane-collapsed .s-sidebar-menu .s-sidebar-menu {
    margin: 0;
    padding: 0;
    border: none;
  }
  body.s-sidebar-pane-collapsed .s-sidebar-menu .s-sidebar-menu .s-sidebar-link {
    font-size: inherit;
    padding: 0.65rem;
    border-radius: 10px;
  }
  body.s-sidebar-pane-collapsed .s-sidebar-menu .s-sidebar-menu .s-sidebar-icon {
    font-size: 1.25rem;
    width: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — sidebar hidden, slides in on toggle
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1199.98px) {
  .s-sidebar {
    transform: translateX(-100%) !important;
  }
  body.s-sidebar-expanded .s-sidebar {
    transform: translateX(0) !important;
  }
  body.s-sidebar-expanded::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--s-scrim);
    z-index: 1040;
    pointer-events: none;
  }
  /* Hide hamburger when sidebar is open — close via backdrop */
  body.s-sidebar-expanded .s-sidebar-toggler {
    display: none !important;
  }
}

/* RTL: sidebar sits on the right edge (mirror of LTR left:0) */
[dir="rtl"] .s-sidebar { left: auto !important; right: 0 !important; }

/* RTL slide direction — MOBILE ONLY (mirror of LTR translateX(-100%)).
   Must be media-scoped: unscoped it pushed the desktop sidebar right by
   its own width, leaving a gap on the left and overlapping the content. */
@media (max-width: 1199.98px) {
  [dir="rtl"] .s-sidebar { transform: translateX(100%) !important; }
  [dir="rtl"] body.s-sidebar-expanded .s-sidebar { transform: translateX(0) !important; }
}

/* RTL desktop: reserve the sidebar's space on the RIGHT, not the left */
@media (min-width: 1200px) {
  [dir="rtl"] .s-main {
    padding-left: 0 !important;
    padding-right: var(--s-sidebar-pane-width) !important;
  }
  [dir="rtl"] body.s-sidebar-pane-collapsed .s-main {
    padding-left: 0 !important;
    padding-right: var(--s-sidebar-band-width) !important;
  }
}

/* ── Mobile hamburger ─────────────────────────────────────────── */
.s-sidebar-toggler {
  position: fixed;
  top: 0.65rem;
  left: 0.75rem;
  z-index: 1100;
  width: 40px;
  height: 40px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--s-card-solid-bg);
  border: 1px solid var(--s-card-border);
  border-radius: 11px;
  color: var(--s-sidebar-icon);
  font-size: 1.1rem;
  box-shadow: var(--s-shadow-sm);
  cursor: pointer;
  transition: all var(--s-transition);
}
.s-sidebar-toggler:hover {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: var(--s-on-primary);
}
@media (min-width: 1200px) {
  .s-sidebar-toggler { display: none !important; }
}
[dir="rtl"] .s-sidebar-toggler { left: auto; right: 0.75rem; }