/*
 * NO SAINT admin theme — sidebar colors.
 *
 * Matches the sidebar of the NO SAINT org admin
 * (staging.nosaint.co/en-uk/tools/admin): dark #222 panel, flat #333 active
 * item, light text.
 *
 * Medusa UI colors everything through CSS custom properties (--bg-subtle,
 * --fg-base, ...) set on :root / .dark. Re-declaring them on the sidebar
 * container re-themes every descendant (nav items, header, user badge,
 * dividers) without touching Medusa's markup or class names, and wins over
 * :root / .dark regardless of stylesheet order, in both light and dark mode.
 *
 * Scope: the sidebar <aside> is the only <aside> in the dashboard, and its
 * parent is the sidebar container — the desktop column (border-e, 220px) or
 * the mobile drawer (Radix dialog). Both main and settings sidebars match.
 * Dropdown menus opened from the sidebar are portaled to <body>, so they keep
 * the regular theme.
 *
 * Linked from the admin index.html by adminThemePlugin
 * (src/modules/nosaint-admin-theme/vite-plugins.ts).
 */
div:has(> aside) {
  /* Panel */
  --bg-subtle: #222222;
  --bg-subtle-hover: #333333;
  --bg-subtle-pressed: #3a3a3a;

  /* Active nav item (bg-ui-bg-base), flat like the reference */
  --bg-base: #333333;
  --bg-base-hover: #333333;
  --bg-base-pressed: #3a3a3a;
  --elevation-card-rest: none;

  /* Icon buttons / menu triggers */
  --button-transparent: transparent;
  --button-transparent-hover: #333333;
  --button-transparent-pressed: #3a3a3a;
  --bg-component: #333333;
  --bg-component-hover: #3a3a3a;
  --bg-component-pressed: #444444;

  /* Text */
  --fg-base: #f9fafb;
  --fg-subtle: #ccd1da;
  --fg-muted: rgba(203, 208, 218, 0.6);
  --fg-disabled: rgba(203, 208, 218, 0.4);

  /* Lines */
  --border-base: rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.32);
  --borders-base: 0 0 0 1px rgba(255, 255, 255, 0.12);

  color-scheme: dark;
  /*
   * The desktop column has no background of its own, and the store/user names
   * have no color class — both show <body>'s, which is outside this scope.
   */
  background-color: var(--bg-subtle);
  color: var(--fg-base);
}

/*
 * Header: NO SAINT wordmark in place of the store avatar + name.
 *
 * The header is the store menu trigger (grid: avatar | name | "...") in the
 * sticky top section; the user badge at the bottom has the same grid. The
 * button and its menu (Store settings, Log out) stay; the avatar is hidden and
 * the name cell is painted with nosaint-logo.svg as a mask, so the logo takes
 * the sidebar text color. The name text is made transparent rather than
 * removed, so screen readers still announce it.
 */
aside .top-0 button.grid-cols-\[24px_1fr_15px\] {
  grid-template-columns: 1fr 15px;
  padding: 4px 8px 4px 2px;
}

aside .top-0 button.grid-cols-\[24px_1fr_15px\] > :first-child {
  display: none;
}

aside .top-0 button.grid-cols-\[24px_1fr_15px\] > :nth-child(2) {
  height: 18px;
  color: transparent;
  background-color: var(--fg-base);
  -webkit-mask: url("nosaint-logo.svg") left center / auto 100% no-repeat;
  mask: url("nosaint-logo.svg") left center / auto 100% no-repeat;
}

/* User avatar (bottom badge): lime chip, as in the reference. */
div:has(> aside) .rounded-full.bg-ui-bg-component-hover {
  background-color: #d3f100;
  color: #222222;
}

/*
 * Environment badge: a small tag on a second line under the user's name, in
 * the user badge at the bottom of the sidebar (main and settings sidebars both
 * end with it, in a sticky bottom-0 section). The name cell is turned into a
 * column so the tag lines up with the name and never squeezes it.
 *
 * The label (--nosaint-env) and <html data-nosaint-env> are injected by
 * adminEnvPlugin (src/modules/nosaint-admin-theme). Unknown environment
 * names get the neutral default colors.
 */
aside .sticky.bottom-0 button.grid-cols-\[24px_1fr_15px\] > :nth-child(2) {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

aside .sticky.bottom-0 button.grid-cols-\[24px_1fr_15px\] > :nth-child(2)::after {
  content: var(--nosaint-env, "");
  padding: 0 4px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background-color: #444444;
  color: #f9fafb;
}

html[data-nosaint-env="development"] aside .sticky.bottom-0 button > :nth-child(2)::after {
  background-color: #3b82f6;
  color: #ffffff;
}

html[data-nosaint-env="staging"] aside .sticky.bottom-0 button > :nth-child(2)::after {
  background-color: #f59e0b;
  color: #222222;
}

html[data-nosaint-env="production"] aside .sticky.bottom-0 button > :nth-child(2)::after {
  background-color: #ef4444;
  color: #ffffff;
}

/*
 * Order page "..." menu: no Create Return or Create Exchange (Claims and Edit
 * order stay). Medusa 2.21.1 has no setting for that menu; both entries are
 * links (/orders/:id/returns, /orders/:id/exchanges), disabled or not, so
 * they're hidden by their href. UI only: the pages stay reachable by URL.
 */
[role="menu"] a[role="menuitem"][href*="/orders/"]:is([href$="/returns"], [href$="/exchanges"]) {
  display: none;
}

/*
 * Login, invite and reset-password pages: NO SAINT wordmark in place of
 * Medusa's logo tile. The tile (AvatarBox / LogoBox) is the only element with
 * after:button-neutral-gradient. Its contents (Medusa's SVG, the success
 * checkmark) and gradient overlay are hidden, and the tile itself is painted
 * with nosaint-logo.svg as a mask so the logo takes the text color in light
 * and dark mode. "div" outranks Tailwind's single-class size/background rules,
 * which load after this stylesheet.
 */
div.after\:button-neutral-gradient {
  width: 280px;
  height: 45px;
  margin-bottom: 28px;
  border-radius: 0;
  box-shadow: none;
  background-color: var(--fg-base);
  -webkit-mask: url("nosaint-logo.svg") center / contain no-repeat;
  mask: url("nosaint-logo.svg") center / contain no-repeat;
}

/* "> div" outranks Tailwind's [&>div]:flex on the AvatarBox wrapper. */
div.after\:button-neutral-gradient > *,
div.after\:button-neutral-gradient > div,
div.after\:button-neutral-gradient::after {
  display: none;
}