/* ===========================================================
   SIDEBAR SPEC v3 — Mz 2026-05-29
   CMS-friendly: layout + per-feat colors as DEFAULT.
   CMS-injected #cms-sidebar-style (loaded later, same specificity)
   wins on overlapping props: width / item_h / pad-x / radius /
   icon_size / icon_color / active_bg / active_text / active_indicator.
   Drop `body` prefix so cascade order resolves CMS > mine.
   =========================================================== */

/* ---------- LAYOUT (locked — CMS does not control flex/gap/structure) ---------- */
#drawer .drawer-item,
#drawer div.drawer-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-left: 2px solid transparent;
  grid-template-columns: none !important;
  padding: 9px 14px;
  border-radius: 10px;
  min-height: 0;
}

/* Vertical spacing + transparent row bg — higher specificity to beat pattern-a !important */
#drawer div.drawer-item {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;   /* 4px gap; single-side avoids margin-collapse */
  height: auto !important;
  box-sizing: border-box !important;
  background: transparent !important;  /* no row pill — only icon wrapper colored */
}

/* ---------- ICON CONTAINER — 32×32 compact dim wrapper ----------
   Selector mirrors pattern-a's "> span:not(...)" specificity (0,1,4,0)
   so this rule wins by cascade order (loaded later, equal specificity).
*/
#drawer .drawer-item > span.sb-svg-icon:not(.sidebar-badge):not(.sb-emoji),
#drawer .drawer-item > .sb-svg-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  flex: 0 0 32px !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.04);
  grid-column: auto !important;
}
/* SVG inside container — CMS icon_size_px wins (no !important on size) */
#drawer .drawer-item > .sb-svg-icon > svg {
  width: 16px;
  height: 16px;
}

/* ---------- LABEL ---------- */
#drawer .drawer-item > span:not(.sidebar-badge):not(.sb-svg-icon):not(.sb-emoji) {
  flex: 1 1 auto !important;
  font-size: 13px;
  font-weight: 400;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0;
  grid-column: auto !important;
}

/* ---------- BADGE ---------- */
#drawer .drawer-item > .sidebar-badge {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  background: rgba(245,166,35,0.15);
  color: #f5a623;
  font-size: 9px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 10px;
  border: 0.5px solid rgba(245,166,35,0.3);
  grid-column: auto !important;
}
#drawer .drawer-item > .sidebar-badge.new { background: rgba(56,189,248,0.15); color: #38bdf8; border-color: rgba(56,189,248,0.3); }
#drawer .drawer-item > .sidebar-badge.red { background: rgba(239,68,68,0.15); color: #f87171; border-color: rgba(239,68,68,0.3); }

/* ---------- PER-FEAT ICON COLORS — dim neutral wrapper, colored glyph ---------- */
#drawer .drawer-item[data-feat="home"]        > .sb-svg-icon { background: rgba(245,166,35,0.10) !important; color: #f5a623 !important; }
#drawer .drawer-item[data-feat="deposit"]     > .sb-svg-icon { background: rgba(34,197,94,0.08)  !important; color: #4ade80 !important; }
#drawer .drawer-item[data-feat="withdraw"]    > .sb-svg-icon { background: rgba(251,191,36,0.08) !important; color: #fbbf24 !important; }
#drawer .drawer-item[data-feat="promo"]       > .sb-svg-icon { background: rgba(255,255,255,0.04) !important; color: #f87171 !important; }
#drawer .drawer-item[data-feat="vip"]         > .sb-svg-icon { background: rgba(168,85,247,0.10) !important; color: #c084fc !important; }
#drawer .drawer-item[data-feat="leaderboard"] > .sb-svg-icon { background: rgba(56,189,248,0.10) !important; color: #38bdf8 !important; }
#drawer .drawer-item[data-feat="freecredit"]  > .sb-svg-icon { background: rgba(255,255,255,0.04) !important; color: #f5a623 !important; }
#drawer .drawer-item[data-feat="rebate"]      > .sb-svg-icon { background: rgba(251,191,36,0.10) !important; color: #fbbf24 !important; }
#drawer .drawer-item[data-feat="lucky"]       > .sb-svg-icon { background: rgba(255,255,255,0.04) !important; color: rgba(255,255,255,0.55) !important; }
#drawer .drawer-item[data-feat="spin"]        > .sb-svg-icon { background: rgba(255,255,255,0.04) !important; color: rgba(255,255,255,0.55) !important; }
#drawer .drawer-item[data-feat="shop"]        > .sb-svg-icon { background: rgba(255,255,255,0.04) !important; color: rgba(255,255,255,0.55) !important; }
#drawer .drawer-item[data-feat="checkin"]     > .sb-svg-icon { background: rgba(255,255,255,0.04) !important; color: rgba(255,255,255,0.55) !important; }
#drawer .drawer-item[data-feat="invite"]      > .sb-svg-icon { background: rgba(34,197,94,0.08)  !important; color: #4ade80 !important; }
#drawer .drawer-item[data-feat="history"]     > .sb-svg-icon { background: rgba(255,255,255,0.04) !important; color: rgba(255,255,255,0.45) !important; }
#drawer .drawer-item[data-feat="livechat"]    > .sb-svg-icon { background: rgba(56,189,248,0.10) !important; color: #38bdf8 !important; }
#drawer .drawer-item[data-feat="mission"]     > .sb-svg-icon { background: rgba(245,166,35,0.10) !important; color: #f5a623 !important; }

/* ---------- ACTIVE state — overrides per-feat bg/color (CMS active_bg etc still wins via cascade order) ---------- */
#drawer div.drawer-item.active {
  background: rgba(245,166,35,0.10) !important;
  border-left-color: #f5a623;
  padding-left: 12px;
}
#drawer .drawer-item.active > .sb-svg-icon {
  background: rgba(245,166,35,0.15);
  color: #f5a623;
}
#drawer .drawer-item.active > span:not(.sidebar-badge):not(.sb-svg-icon) {
  color: #f5a623;
  font-weight: 500;
}

/* ---------- GROUP TITLE (CMS color/font_size_px wins) ---------- */
#drawer .drawer-title {
  padding: 12px 18px 4px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
#drawer .drawer-section { padding: 0; margin: 0; }

/* ---------- LOG OUT pinned bottom ---------- */
#drawer #drawer-logout {
  margin: 8px 4px 16px !important;
  padding: 9px 14px;
  border-top: 0.5px solid rgba(255,255,255,0.06);
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer;
  color: #f87171;
  font-size: 13px;
  font-weight: 500;
  grid-template-columns: none !important;
}
#drawer #drawer-logout > .sb-svg-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  flex: 0 0 32px !important;
  border-radius: 8px !important;
  background: rgba(248,113,113,0.10);
  color: #f87171;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}