@charset "UTF-8";
/* ──────────────────────────────────────────────────────────────
 * wes_landing/sidebar — fixed left nav for logged-in users
 * SSR display:none → JS reveals when localStorage `wes_wallet` set.
 *
 * v2 (2026-05-01): switched from single-block <aside> to multi-block
 * region. The fixed-positioning + flex column rules now apply to the
 * `<aside class="wes-sidebar-region">` wrapper (theme template
 * `region--sidebar-first.html.twig`), so all blocks placed in the
 * sidebar_first region stack vertically inside the same column:
 *   - WES Profile block         (custom — avatar/balance/actions)
 *   - System Menu Block: wes_main (Drupal core, anh-managed via UI)
 *   - Disconnect button stays in WES Profile block (visual order via flex)
 * ────────────────────────────────────────────────────────────── */

/* Two render modes for the sidebar block:
 *   (A) Inside region--sidebar-first.html.twig (most pages) → wrapping
 *       <aside class="wes-sidebar-region"> is the fixed-positioned column;
 *       profile + menu blocks stack inside.
 *   (B) Standalone on the homepage (wes_homepage controller renders it via
 *       #theme without going through page.html.twig) → the profile block's
 *       own <div class="wes-sidebar"> takes over fixed positioning.
 * The selector group below applies fixed positioning to whichever wrapper
 * is present — never both at once on the same page. */
.wes-sidebar-region,
body:not(.wes-page-shell) .wes-sidebar.wes-sidebar-profile-block {
  position: fixed; left: 0; top: 0; bottom: 0;
  width: 240px; z-index: 1100;
  background: linear-gradient(180deg, #fff 0%, #fdf1f1 100%);
  border-right: 1px solid var(--wes-border);
  display: none; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
  font-family: 'UTM Avo', system-ui, sans-serif;
  box-shadow: 4px 0 24px rgba(0,0,0,0.04);
}

/* Region is a flex column — children stack vertically with `order` controlling
 * visual position. Profile block default order=1; menu block order=2;
 * disconnect-foot is given order=99 (via inner-rule below) so it ALWAYS lands
 * at the bottom even if it's nested inside the profile block (flex-order on
 * descendant only works when descendant is a direct child of the flex
 * container — so the JS sidebar.js::ensureDisconnectAtBottom() also moves
 * it to be a direct sibling at runtime as backup). */
.wes-sidebar-region {
  min-height: 100vh;
  flex-direction: column !important;
}
.wes-sidebar-region .wes-sidebar-foot,
.wes-sidebar-region > .wes-sidebar-foot,
.wes-sidebar.wes-sidebar-profile-block .wes-sidebar-foot {
  order: 99;
  margin-top: auto !important;   /* push to bottom regardless of order */
}

/* When wrapped inside the region, the inner profile block is just a
 * content block with no own fixed positioning.
 * Use body-rooted selector + !important so this wins against the Mode B
 * selector `body:not(.wes-page-shell) .wes-sidebar.wes-sidebar-profile-block`
 * (also (0,3,1) specific) — without these guards both `position: fixed` rules
 * apply and the homepage drawer renders blank/dark because the inner block
 * grabs its own fixed layer over the aside. */
body .wes-sidebar-region .wes-sidebar.wes-sidebar-profile-block {
  display: flex !important;
  flex-direction: column !important;
  position: static !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  flex: 1 1 auto !important;
  min-height: 100vh !important;
  width: 100% !important;
  transform: none !important;
}

/* Body shifts main content out from under the fixed sidebar (either mode). */
body.wes-logged-in .wes-sidebar-region,
body.wes-logged-in .wes-sidebar.wes-sidebar-profile-block { display: flex !important; }
body.wes-logged-in .wes-sidebar-region .wes-sidebar.wes-sidebar-profile-block {
  display: flex !important;
  flex-direction: column !important;
}
body.wes-logged-in .wes-landing-shell {
  margin-left: var(--wes-sidebar-width, 240px);
  width: calc(100% - var(--wes-sidebar-width, 240px));
  max-width: calc(100% - var(--wes-sidebar-width, 240px));
  transition: margin-left .35s cubic-bezier(.4,0,.2,1);
}
body.wes-logged-in .wes-landing-header {
  left: var(--wes-sidebar-width, 240px);
}

/* Drupal core system_menu_block:wes_main renders as
 * `<nav class="block block-system block-menu menu--wes-main">`.
 * Style its <ul> + <li> + <a> to match the legacy custom .wes-sidebar-item
 * look. Flex: 1 1 auto on the menu block makes it consume the gap and
 * push the WesProfile block's disconnect button visually toward the bottom.
 * Selectors are broad (multiple class permutations + !important on
 * list-style) to win against Olivero theme defaults that re-introduce
 * disc bullets. */
.wes-sidebar-region nav.block-menu,
.wes-sidebar-region .block.menu--wes-main,
.wes-sidebar-region nav[class*="menu--wes-main"] {
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 10px;
}
.wes-sidebar-region nav.block-menu h2,
.wes-sidebar-region .block.menu--wes-main h2,
.wes-sidebar-region nav[class*="menu--wes-main"] h2 {
  /* Drupal renders an <h2 class="visually-hidden"> with the block label.
   * Ensure it stays hidden so the menu starts cleanly. */
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.wes-sidebar-region nav.block-menu ul,
.wes-sidebar-region .menu--wes-main ul,
.wes-sidebar-region nav[class*="menu--wes-main"] ul,
.wes-sidebar-region ul.menu {
  list-style: none !important;
  list-style-type: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex; flex-direction: column; gap: 7px;
}
.wes-sidebar-region nav.block-menu li,
.wes-sidebar-region .menu--wes-main li,
.wes-sidebar-region ul.menu li,
.wes-sidebar-region li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
}
/* Nuclear: any list anywhere in the sidebar gets bullets killed.
 * Olivero theme injects `ul.menu li::marker { content: '•' }` in some
 * pages → ::marker pseudo bypasses list-style:none. Kill that too. */
.wes-sidebar-region ul,
.wes-sidebar-region ul.menu {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
}
.wes-sidebar-region li::marker { content: '' !important; }
.wes-sidebar-region li::before { /* preserved for our icon ::before below */ }
.wes-sidebar-region nav.block-menu a,
.wes-sidebar-region .menu--wes-main a,
.wes-sidebar-region ul.menu a {
  box-sizing: border-box;
  display: flex; align-items: center; gap: 12px;
  min-height: 42px;
  padding: 10px 14px; border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.48);
  text-decoration: none; color: var(--wes-fg);
  font-size: 13px; font-weight: 600;
  line-height: 1.15;
  transition: background 180ms, color 180ms, border-color 180ms, box-shadow 180ms, transform 180ms;
}
/* Desktop/mobile icons via ::before. CSS-only silhouettes keep icons distinct
 * without emoji/font glyphs, and keep diffs readable in VS Code. */
.wes-sidebar-region a[href="/"]::before,
.wes-sidebar-region a[href$="/homepage"]::before,
[data-wes-static-menu] a[data-icon="homepage"]::before {
  --wes-menu-clip: polygon(50% 0, 98% 40%, 84% 40%, 84% 100%, 16% 100%, 16% 40%, 2% 40%);
}
.wes-sidebar-region a[href$="/staking"]::before,
[data-wes-static-menu] a[data-icon="staking"]::before {
  --wes-menu-clip: ellipse(48% 38% at 50% 50%);
  --wes-menu-scale-y: 1.2;
}
.wes-sidebar-region a[href$="/lucky-draw"]::before,
[data-wes-static-menu] a[data-icon="lucky-draw"]::before {
  --wes-menu-radius: 4px;
  --wes-menu-clip: inset(5% round 4px);
}
.wes-sidebar-region a[href$="/rewards"]::before,
[data-wes-static-menu] a[data-icon="rewards"]::before {
  --wes-menu-clip: polygon(6% 30%, 44% 30%, 44% 0, 56% 0, 56% 30%, 94% 30%, 94% 100%, 6% 100%);
}
.wes-sidebar-region a[href$="/campaign"]::before,
[data-wes-static-menu] a[data-icon="campaign"]::before {
  --wes-menu-clip: polygon(0 38%, 58% 18%, 58% 82%, 0 62%);
}
.wes-sidebar-region a[href$="/users"]::before,
[data-wes-static-menu] a[data-icon="users"]::before {
  --wes-menu-clip: polygon(18% 46%, 18% 24%, 36% 8%, 58% 8%, 76% 24%, 76% 46%, 95% 70%, 95% 100%, 5% 100%, 5% 70%);
}
.wes-sidebar-region a[href$="/revenue"]::before,
[data-wes-static-menu] a[data-icon="revenue"]::before {
  --wes-menu-clip: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.wes-sidebar-region a[href$="/report"]::before,
[data-wes-static-menu] a[data-icon="report"]::before {
  --wes-menu-clip: polygon(0 100%, 0 55%, 24% 55%, 24% 100%, 38% 100%, 38% 30%, 62% 30%, 62% 100%, 76% 100%, 76% 8%, 100% 8%, 100% 100%);
}
.wes-sidebar-region a[href$="/location"]::before,
.wes-sidebar-region a[href$="/locations"]::before,
[data-wes-static-menu] a[data-icon="location"]::before {
  --wes-menu-clip: polygon(50% 100%, 22% 58%, 15% 32%, 28% 10%, 50% 0, 72% 10%, 85% 32%, 78% 58%);
}
.wes-sidebar-region a[href$="/realtime"]::before,
[data-wes-static-menu] a[data-icon="realtime"]::before {
  --wes-menu-clip: polygon(50% 100%, 38% 72%, 20% 72%, 50% 18%, 80% 72%, 62% 72%);
}
.wes-sidebar-region a[href$="/dashboard"]::before,
[data-wes-static-menu] a[data-icon="settings"]::before {
  --wes-menu-clip: polygon(50% 0, 62% 27%, 92% 18%, 73% 45%, 100% 58%, 70% 64%, 78% 96%, 50% 78%, 22% 96%, 30% 64%, 0 58%, 27% 45%, 8% 18%, 38% 27%);
}
.wes-sidebar-region a::before,
[data-wes-static-menu] a::before {
  content: "" !important;
  flex: 0 0 auto;
  display: inline-block;
  width: 17px;
  height: 17px;
  border-radius: 0;
  background: currentColor;
  opacity: 0.72;
  font-size: 0;
  line-height: 0;
  transform: scaleY(var(--wes-menu-scale-y, 1));
  clip-path: var(--wes-menu-clip, circle(45%));
}
.wes-sidebar-region .menu--wes-main a:hover {
  background: #fff;
  color: var(--wes-red);
  border-color: rgba(220,28,28,0.16);
  box-shadow: 0 6px 18px rgba(220,28,28,0.08);
  transform: translateX(2px);
}
.wes-sidebar-region .menu--wes-main li.menu-item--active-trail > a,
.wes-sidebar-region .menu--wes-main a.is-active {
  /* Softer active state — solid red gradient was too jarring on dark theme.
   * Use red-soft tint + red text + thin red left bar (consistent with the
   * tokenomics LIVE row indicator). */
  background: var(--wes-red-soft);
  color: var(--wes-red) !important;
  font-weight: 700;
  border-color: rgba(220,28,28,0.18);
  box-shadow: inset 3px 0 0 0 var(--wes-red), 0 6px 18px rgba(220,28,28,0.08);
}

/* ── Profile card (top) ────────────────────────────────────── */
.wes-sidebar-profile {
  padding: 24px 16px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(220,28,28,0.08);
}
.wes-sidebar-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  margin: 0 auto 10px;
  background: linear-gradient(135deg, #DC1C1C, #8B0000);
  border: 3px solid #fff;
  box-shadow: 0 4px 16px rgba(220,28,28,0.18);
  overflow: hidden;
  position: relative;
}
.wes-sidebar-avatar img[data-sidebar-avatar-img] {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.wes-sidebar-name {
  font-size: 13px; font-weight: 800; color: var(--wes-fg);
  letter-spacing: 0.3px; margin-bottom: 4px;
}
.wes-sidebar-balance {
  font-size: 12px; color: var(--wes-fg-muted); margin-bottom: 8px;
}
.wes-sidebar-balance [data-sidebar-balance] {
  color: var(--wes-red); font-weight: 800;
}
.wes-sidebar-role {
  display: inline-block;
  padding: 3px 10px; border-radius: 999px;
  background: var(--wes-red-soft); color: var(--wes-red);
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}

/* ── Deposit / Withdraw actions ──────────────────────────── */
.wes-sidebar-actions {
  display: flex; gap: 6px;
  margin: 10px 0 12px;
}
.wes-sidebar-action {
  flex: 1 1 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 6px;
  border-radius: 8px;
  background: #fff; border: 1px solid var(--wes-border);
  font-family: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: 0.3px; cursor: pointer;
  transition: all 180ms;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.wes-sidebar-action-ic { font-size: 13px; font-weight: 900; line-height: 1; }
.wes-sidebar-action--deposit { color: #19c37d; border-color: rgba(25,195,125,0.4); }
.wes-sidebar-action--deposit:hover {
  background: #19c37d; color: #fff; border-color: #19c37d;
  box-shadow: 0 4px 12px rgba(25,195,125,0.25); transform: translateY(-1px);
}
.wes-sidebar-action--withdraw { color: var(--wes-red); border-color: rgba(220,28,28,0.35); }
.wes-sidebar-action--withdraw:hover {
  background: var(--wes-red); color: #fff; border-color: var(--wes-red);
  box-shadow: 0 4px 12px rgba(220,28,28,0.25); transform: translateY(-1px);
}
.wes-sidebar-action:disabled,
.wes-sidebar-action.is-disabled,
.wes-sidebar-action[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.35);
}
.wes-sidebar-action:disabled:hover,
.wes-sidebar-action.is-disabled:hover,
.wes-sidebar-action[aria-disabled="true"]:hover {
  background: #fff;
  color: inherit;
  border-color: var(--wes-border);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transform: none;
}

/* ── Nav menu ───────────────────────────────────────────────── */
.wes-sidebar-menu {
  display: flex; flex-direction: column; padding: 12px 8px; gap: 2px; flex: 1 1 auto;
}
.wes-sidebar-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 10px;
  text-decoration: none; color: var(--wes-fg);
  font-size: 13px; font-weight: 600;
  transition: all 200ms;
}
.wes-sidebar-item:hover {
  background: var(--wes-red-soft); color: var(--wes-red);
}
.wes-sidebar-item.active,
.wes-sidebar-item.is-active {
  background: linear-gradient(135deg, var(--wes-red), var(--wes-red-2));
  color: #fff !important; font-weight: 700;
  box-shadow: 0 4px 12px rgba(220,28,28,0.25);
}
.wes-sidebar-ic {
  font-size: 16px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px;
}
.wes-sidebar-lbl { flex: 1 1 auto; }

/* ── Footer (Disconnect) ────────────────────────────────────── */
.wes-sidebar-foot {
  padding: 12px;
  border-top: 1px solid rgba(220,28,28,0.08);
  background: linear-gradient(0deg, #fdf1f1 0%, rgba(255,255,255,0.94) 100%);
}
.wes-sidebar-disconnect {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  min-height: 42px;
  padding: 10px 14px; border-radius: 12px;
  background: #fff; border: 1px solid rgba(220,28,28,0.20);
  color: var(--wes-red);
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background 180ms, color 180ms, border-color 180ms, box-shadow 180ms, transform 180ms;
  box-shadow: 0 4px 14px rgba(220,28,28,0.08);
}
.wes-sidebar-disconnect:hover {
  background: var(--wes-red);
  border-color: var(--wes-red);
  color: #fff;
  box-shadow: 0 10px 24px rgba(220,28,28,0.22);
  transform: translateY(-1px);
}
.wes-sidebar-exit-ic {
  width: 24px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wes-sidebar-exit-ic svg {
  display: block;
  flex: 0 0 auto;
}

/* ── Mobile: 60px always-visible icon rail (revert to v2 pattern) ──
 * v4 (2026-05-01): drawer pattern was too hidden — anh wanted a thin
 * always-visible navigation column on phones. Back to 60px icon rail.
 * Avatar + action icons (deposit/withdraw) + menu icons + disconnect
 * all visible. Text labels hidden via display:none. Menu icons injected
 * via CSS ::before on attr selectors so the Drupal core menu block
 * (text-only links) renders as icon glyphs on the narrow rail. */
@media (max-width: 768px) {
  /* Narrow column, full height, always visible at left edge.
   * Default 52px collapsed; expands to 220px when body has .wes-mobile-nav-expanded
   * (toggled by the top-right hamburger button injected by sidebar.js). */
  .wes-sidebar-region,
  body:not(.wes-page-shell) .wes-sidebar.wes-sidebar-profile-block {
    width: 52px;
    transform: none;
    border-right: 0;
    box-shadow: none;                /* no shadow → no white/light edge on dark page */
    padding-bottom: 56px;            /* leaves room for absolute disconnect footer */
    transition: width 220ms cubic-bezier(.4,0,.2,1);
  }
  /* Hamburger expand state — show full labels */
  body.wes-mobile-nav-expanded .wes-sidebar-region,
  body.wes-mobile-nav-expanded .wes-sidebar.wes-sidebar-profile-block {
    width: 220px;
    box-shadow: 4px 0 16px rgba(0,0,0,0.18);
  }
  body.wes-mobile-nav-expanded .wes-sidebar-name,
  body.wes-mobile-nav-expanded .wes-sidebar-balance,
  body.wes-mobile-nav-expanded .wes-sidebar-role,
  body.wes-mobile-nav-expanded .wes-sidebar-lbl,
  body.wes-mobile-nav-expanded .wes-sidebar-action-lbl { display: inline-block !important; }
  body.wes-mobile-nav-expanded .wes-sidebar-region .menu--wes-main a,
  body.wes-mobile-nav-expanded [data-wes-static-menu] a {
    justify-content: flex-start !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
  }
  body.wes-mobile-nav-expanded .wes-sidebar-actions {
    flex-direction: row !important;
  }

  /* Page content shifts right by 52px to clear the rail (collapsed default) */
  body.wes-logged-in .wes-landing-shell {
    margin-left: var(--wes-sidebar-width-mobile, 52px);
    width: calc(100% - var(--wes-sidebar-width-mobile, 52px));
    max-width: calc(100% - var(--wes-sidebar-width-mobile, 52px));
    overflow-x: hidden;
  }
  body.wes-logged-in .wes-landing-header { left: var(--wes-sidebar-width-mobile, 52px); }
  /* Expanded: shell does NOT shift further (drawer overlays content) so the
   * page doesn't reflow when toggling labels. */

  /* Hamburger toggle button — fixed top-right; injected by sidebar.js */
  [data-wes-mobile-burger] {
    position: fixed;
    top: 12px; right: 12px;
    width: 40px; height: 40px;
    z-index: 1102;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center; gap: 4px;
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(220,28,28,0.25);
    border-radius: 8px; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    padding: 0;
    transition: background 180ms;
  }
  [data-wes-mobile-burger] span {
    display: block; width: 20px; height: 2px;
    background: var(--wes-red); border-radius: 2px;
    transition: transform 180ms, opacity 180ms;
  }
  body.wes-mobile-nav-expanded [data-wes-mobile-burger] { background: var(--wes-red-soft); }
  body.wes-mobile-nav-expanded [data-wes-mobile-burger] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.wes-mobile-nav-expanded [data-wes-mobile-burger] span:nth-child(2) { opacity: 0; }
  body.wes-mobile-nav-expanded [data-wes-mobile-burger] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Hide decorative red orbs — their blur was bleeding through near the
   * sidebar edge and looked like a stray red border. They're pure decoration
   * so safe to hide on small screens. */
  .wes-landing-shell .orb { display: none !important; }

  /* Disconnect footer pinned to bottom of the rail regardless of profile/menu order */
  .wes-sidebar-region .wes-sidebar-foot,
  body:not(.wes-page-shell) .wes-sidebar.wes-sidebar-profile-block .wes-sidebar-foot {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: linear-gradient(0deg, #fdf1f1 0%, #fff 100%);
    border-top: 1px solid rgba(220,28,28,0.08);
    padding: 8px 6px;
    z-index: 2;
  }

  /* Force tokenomics + sale + stats cards to never overflow on mobile.
   * v2 (2026-05-01): explicit width:100% override (max-width:100% wasn't
   * enough because canvas had fixed pixel width attr). Plus parent .wes-
   * landing-tokenomics gets padding squeeze + section override. */
  .wes-landing-tokenomics,
  .wes-landing-stats,
  .wes-landing-section {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .wes-tokenomics-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .wes-tokenomics-card,
  .wes-stats-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 20px 14px !important;
    overflow: hidden;
  }
  .wes-tokenomics-chart {
    width: 100% !important;
    overflow: hidden !important;
    padding: 4px 0 !important;
  }
  .wes-tokenomics-chart canvas {
    width: 100% !important;
    max-width: 280px !important;     /* hard ceiling so donut never overflows */
    height: auto !important;
  }
  .wes-tokenomics-rounds {
    width: 100% !important;
    table-layout: fixed !important;
    font-size: 11px !important;
  }
  .wes-tokenomics-rounds th,
  .wes-tokenomics-rounds td {
    padding: 6px 4px !important;
    word-break: break-word !important;
  }

  /* Hide all text labels — icons only on rail */
  .wes-sidebar-name,
  .wes-sidebar-balance,
  .wes-sidebar-role,
  .wes-sidebar-lbl,
  .wes-sidebar-action-lbl { display: none !important; }

  /* Profile section compact */
  .wes-sidebar-profile { padding: 14px 6px; }
  .wes-sidebar-avatar { width: 38px; height: 38px; margin: 0 auto; }

  /* Action icons stack vertically + centered */
  .wes-sidebar-actions { flex-direction: column; gap: 6px; margin: 10px 0 6px; }
  .wes-sidebar-action {
    padding: 8px 0; min-height: 36px;
    justify-content: center;
  }
  .wes-sidebar-action-ic { font-size: 16px; }

  /* Disconnect button compact (footer) */
  .wes-sidebar-foot { padding: 8px 6px; }
  .wes-sidebar-disconnect {
    justify-content: center; padding: 10px 0;
    gap: 0;
  }
  .wes-sidebar-disconnect .wes-sidebar-ic { font-size: 18px; }

  /* Menu items from system_menu_block:wes_main — center text + add
   * route-specific emoji icons via ::before. Hide text label, keep icon. */
  .wes-sidebar-region .menu--wes-main {
    padding: 10px 4px;
  }
  .wes-sidebar-region .menu--wes-main a {
    justify-content: center;
    padding: 12px 0;
    font-size: 0;          /* hide link text */
    min-height: 44px;
    position: relative;
  }
  .wes-sidebar-region .menu--wes-main a::before {
    content: "" !important;
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 0;
    background: currentColor;
    font-size: 0;
    line-height: 0;
  }
  /* Drupal core menu block icons (href-based) */
  .wes-sidebar-region .menu--wes-main a[href$="/dashboard"]::before,
  .wes-sidebar-region .menu--wes-main a[href$="/staking"]::before,
  .wes-sidebar-region .menu--wes-main a[href$="/lucky-draw"]::before,
  .wes-sidebar-region .menu--wes-main a[href$="/rewards"]::before,
  .wes-sidebar-region .menu--wes-main a[href$="/campaign"]::before,
  .wes-sidebar-region .menu--wes-main a[href$="/users"]::before,
  .wes-sidebar-region .menu--wes-main a[href$="/revenue"]::before,
  .wes-sidebar-region .menu--wes-main a[href$="/report"]::before,
  .wes-sidebar-region .menu--wes-main a[href$="/location"]::before,
  .wes-sidebar-region .menu--wes-main a[href$="/locations"]::before,
  .wes-sidebar-region .menu--wes-main a[href$="/realtime"]::before { content: ""; }
  /* Static-menu icons (homepage fallback, data-icon based) */
  [data-wes-static-menu] a[data-icon="homepage"]::before,
  [data-wes-static-menu] a[data-icon="staking"]::before,
  [data-wes-static-menu] a[data-icon="lucky-draw"]::before,
  [data-wes-static-menu] a[data-icon="rewards"]::before,
  [data-wes-static-menu] a[data-icon="campaign"]::before,
  [data-wes-static-menu] a[data-icon="users"]::before,
  [data-wes-static-menu] a[data-icon="revenue"]::before,
  [data-wes-static-menu] a[data-icon="report"]::before,
  [data-wes-static-menu] a[data-icon="location"]::before,
  [data-wes-static-menu] a[data-icon="realtime"]::before,
  [data-wes-static-menu] a[data-icon="settings"]::before { content: ""; }
  .wes-sidebar-region .menu--wes-main a::before,
  [data-wes-static-menu] a::before {
    content: "" !important;
  }
}

/* Static-menu base styles (apply on desktop + mobile) — mirror .menu--wes-main */
[data-wes-static-menu] {
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 10px;
}
[data-wes-static-menu] ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 7px;
}
[data-wes-static-menu] li { margin: 0; padding: 0; }
[data-wes-static-menu] a {
  box-sizing: border-box;
  display: flex; align-items: center; gap: 12px;
  min-height: 42px;
  padding: 10px 14px; border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.48);
  text-decoration: none; color: var(--wes-fg);
  font-size: 13px; font-weight: 600;
  line-height: 1.15;
  transition: background 180ms, color 180ms, border-color 180ms, box-shadow 180ms, transform 180ms;
}
[data-wes-static-menu] a:hover {
  background: #fff;
  color: var(--wes-red);
  border-color: rgba(220,28,28,0.16);
  box-shadow: 0 6px 18px rgba(220,28,28,0.08);
  transform: translateX(2px);
}
[data-wes-static-menu] a.is-active {
  background: var(--wes-red-soft);
  color: var(--wes-red) !important;
  font-weight: 700;
  border-color: rgba(220,28,28,0.18);
  box-shadow: inset 3px 0 0 0 var(--wes-red), 0 6px 18px rgba(220,28,28,0.08);
}

/* Final sidebar polish overrides. These intentionally sit at the end of the
 * file so they win over earlier desktop/mobile menu rules and Drupal theme
 * defaults. */
body.wes-logged-in .wes-sidebar-region {
  display: flex !important;
}
body.wes-logged-in .wes-sidebar-region .wes-sidebar-profile {
  order: 1;
  flex: 0 0 auto;
}
body.wes-logged-in .wes-sidebar-region nav.block-menu,
body.wes-logged-in .wes-sidebar-region .block.menu--wes-main,
body.wes-logged-in .wes-sidebar-region #block-wes-theme-wes-sidebar-main,
body.wes-logged-in .wes-sidebar-region #block-wes-theme-wes-sidebar-main-olivero,
body.wes-logged-in .wes-sidebar-region [data-wes-static-menu] {
  order: 2;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 14px 12px !important;
}
body.wes-logged-in .wes-sidebar-region .wes-sidebar-foot {
  order: 99;
  flex: 0 0 auto;
  margin-top: auto !important;
}
body.wes-logged-in .wes-sidebar-region nav.block-menu ul,
body.wes-logged-in .wes-sidebar-region .menu--wes-main ul,
body.wes-logged-in .wes-sidebar-region #block-wes-theme-wes-sidebar-main ul,
body.wes-logged-in .wes-sidebar-region #block-wes-theme-wes-sidebar-main-olivero ul,
body.wes-logged-in .wes-sidebar-region [data-wes-static-menu] ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
body.wes-logged-in .wes-sidebar-region nav.block-menu li,
body.wes-logged-in .wes-sidebar-region .menu--wes-main li,
body.wes-logged-in .wes-sidebar-region #block-wes-theme-wes-sidebar-main li,
body.wes-logged-in .wes-sidebar-region #block-wes-theme-wes-sidebar-main-olivero li,
body.wes-logged-in .wes-sidebar-region [data-wes-static-menu] li {
  margin: 0 !important;
}
body.wes-logged-in .wes-sidebar-region nav.block-menu li + li,
body.wes-logged-in .wes-sidebar-region .menu--wes-main li + li,
body.wes-logged-in .wes-sidebar-region #block-wes-theme-wes-sidebar-main li + li,
body.wes-logged-in .wes-sidebar-region #block-wes-theme-wes-sidebar-main-olivero li + li,
body.wes-logged-in .wes-sidebar-region [data-wes-static-menu] li + li {
  margin-top: 0 !important;
}
body.wes-logged-in .wes-sidebar-region nav.block-menu a,
body.wes-logged-in .wes-sidebar-region .menu--wes-main a,
body.wes-logged-in .wes-sidebar-region #block-wes-theme-wes-sidebar-main a,
body.wes-logged-in .wes-sidebar-region #block-wes-theme-wes-sidebar-main-olivero a,
body.wes-logged-in .wes-sidebar-region [data-wes-static-menu] a {
  display: flex !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 11px !important;
  min-height: 40px !important;
  padding: 7px 13px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(220,28,28,0.10) !important;
  background: rgba(255,255,255,0.62) !important;
  color: var(--wes-fg, #1a1a1a) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.1 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset;
}
body.wes-logged-in .wes-sidebar-region nav.block-menu a:hover,
body.wes-logged-in .wes-sidebar-region .menu--wes-main a:hover,
body.wes-logged-in .wes-sidebar-region #block-wes-theme-wes-sidebar-main a:hover,
body.wes-logged-in .wes-sidebar-region #block-wes-theme-wes-sidebar-main-olivero a:hover,
body.wes-logged-in .wes-sidebar-region [data-wes-static-menu] a:hover {
  background: #fff !important;
  color: var(--wes-red) !important;
  border-color: rgba(220,28,28,0.18) !important;
  box-shadow: 0 6px 18px rgba(220,28,28,0.08) !important;
}
body.wes-logged-in .wes-sidebar-region nav.block-menu a.is-active,
body.wes-logged-in .wes-sidebar-region .menu--wes-main a.is-active,
body.wes-logged-in .wes-sidebar-region #block-wes-theme-wes-sidebar-main a.is-active,
body.wes-logged-in .wes-sidebar-region #block-wes-theme-wes-sidebar-main-olivero a.is-active,
body.wes-logged-in .wes-sidebar-region [data-wes-static-menu] a.is-active {
  background: var(--wes-red-soft) !important;
  color: var(--wes-red) !important;
  border-color: rgba(220,28,28,0.20) !important;
  box-shadow: inset 3px 0 0 var(--wes-red), 0 6px 18px rgba(220,28,28,0.08) !important;
}

/* Mobile drawer override (2026-05-02): phones hide the sidebar by default.
 * The left hamburger opens the full menu as an overlay drawer. */
@media (max-width: 768px) {
  body.wes-logged-in .wes-sidebar-region {
    width: min(280px, 86vw) !important;
    transform: translateX(-100%) !important;
    border-right: 1px solid rgba(220,28,28,0.12) !important;
    box-shadow: none !important;
    padding-bottom: 0 !important;
    transition: transform 220ms cubic-bezier(.4,0,.2,1), box-shadow 220ms cubic-bezier(.4,0,.2,1) !important;
  }

  body.wes-mobile-nav-expanded .wes-sidebar-region {
    transform: translateX(0) !important;
    box-shadow: 8px 0 28px rgba(0,0,0,0.22) !important;
  }

  body.wes-logged-in .wes-landing-shell {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.wes-logged-in main.wes-page-main,
  body.wes-logged-in .wes-page-main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.wes-logged-in .wes-landing-header {
    left: 0 !important;
  }

  [data-wes-mobile-burger] {
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
  }

  body.wes-mobile-nav-expanded [data-wes-mobile-burger] {
    left: min(calc(86vw + 12px), 292px) !important;
  }

  .wes-sidebar-region .wes-sidebar-foot,
  body:not(.wes-page-shell) .wes-sidebar.wes-sidebar-profile-block .wes-sidebar-foot {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }

  .wes-sidebar-name,
  .wes-sidebar-balance,
  .wes-sidebar-role,
  .wes-sidebar-lbl,
  .wes-sidebar-action-lbl {
    display: inline-block !important;
  }

  .wes-sidebar-actions {
    flex-direction: row !important;
  }

  body.wes-logged-in .wes-sidebar-region nav.block-menu a,
  body.wes-logged-in .wes-sidebar-region .menu--wes-main a,
  body.wes-logged-in .wes-sidebar-region #block-wes-theme-wes-sidebar-main a,
  body.wes-logged-in .wes-sidebar-region #block-wes-theme-wes-sidebar-main-olivero a,
  body.wes-logged-in .wes-sidebar-region [data-wes-static-menu] a {
    justify-content: flex-start !important;
    font-size: 13px !important;
    padding: 9px 13px !important;
  }
}

/* Hide Drupal admin contextual links inside the WES sidebar. The floating
 * "Configure block / Remove block / Edit menu" panel is useful in core admin
 * screens but breaks the production sidebar layout for administrator users. */
.wes-sidebar-region .contextual,
.wes-sidebar-region .contextual-links,
.wes-sidebar-region .contextual-links-wrapper,
.wes-sidebar-region [data-contextual-id],
.wes-sidebar-region [data-contextual-token],
#block-wes-theme-wes-sidebar-main .contextual,
#block-wes-theme-wes-sidebar-main [data-contextual-id],
#block-wes-theme-wes-sidebar-main [data-contextual-token] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}