/*
 * Fisher & Paykel admin sidebar branding.
 *
 * Rebrands the two store/account triggers in the admin sidebar — the store
 * header at the TOP and the user-account menu at the BOTTOM (Medusa's `Header`
 * components in `main-layout.tsx`). Medusa exposes no widget/injection zone for
 * the sidebar shell, so this ships as a global stylesheet, injected into every
 * admin page's index.html by the branding Vite plugin in medusa-config.ts.
 * Being pure CSS, it survives the dashboard's React re-renders with no
 * JS/observer and no flash of the stock branding.
 *
 * Both triggers are 3-column grids uniquely identified by their Tailwind
 * arbitrary template `grid-cols-[24px_1fr_15px]`:
 *   col 1 = an Avatar          (top: store "M"; bottom: the user's initial)
 *   col 2 = a name Text        (top: store name; bottom: user name), always
 *           wrapped in an `overflow-hidden` div
 *   col 3 = the ellipsis icon
 *
 * NOTE the two triggers differ internally: in the top header the Avatar is a
 * DIRECT grid child, while in the bottom menu it is nested inside a
 * `div.flex.size-6` wrapper. Painting a logo on `:first-child` therefore hit
 * the wrapper (hidden behind the round avatar) on the bottom one — which is why
 * the previous favicon approach showed no logo there. This version sidesteps
 * that entirely: it hides col 1 in both, and paints the F&P wordmark in the
 * name column (col 2), which has an identical `overflow-hidden` wrapper in both.
 *
 * The wordmark is rendered as a CSS mask filled with `currentColor`, so it
 * inherits the sidebar's themed foreground and flips automatically between
 * light and dark mode (dark ink on light, light ink on dark) while staying
 * crisp at any DPI. (mask-mode for an SVG image uses its alpha channel, so the
 * wordmark's black fill is irrelevant — only its shape is used.)
 */

/* Two DOM variants share this grid class:
   - TOP store header: first child is the avatar directly.
   - BOTTOM account menu: first child is a `size-6` wrapper that contains avatar.
   Split styling by that wrapper so top and bottom can differ safely. */

/* --- TOP: favicon icon + "F&P Store" label (as requested). --- */
[class*="grid-cols-[24px_1fr_15px]"]:not(:has(> :first-child[class*="size-6"])) > :first-child {
  position: relative;
}

[class*="grid-cols-[24px_1fr_15px]"]:not(:has(> :first-child[class*="size-6"])) > :first-child,
[class*="grid-cols-[24px_1fr_15px]"]:not(:has(> :first-child[class*="size-6"])) > :first-child * {
  color: transparent !important;
}

[class*="grid-cols-[24px_1fr_15px]"]:not(:has(> :first-child[class*="size-6"])) > :first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("/static/favicon.ico");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

[class*="grid-cols-[24px_1fr_15px]"]:not(:has(> :first-child[class*="size-6"])) > [class*="overflow-hidden"],
[class*="grid-cols-[24px_1fr_15px]"]:not(:has(> :first-child[class*="size-6"])) > :nth-child(2) {
  display: flex !important;
  align-items: center !important;
  min-width: 0;
}

[class*="grid-cols-[24px_1fr_15px]"]:not(:has(> :first-child[class*="size-6"])) > [class*="overflow-hidden"] > *,
[class*="grid-cols-[24px_1fr_15px]"]:not(:has(> :first-child[class*="size-6"])) > :nth-child(2) > * {
  font-size: 0 !important;
}

[class*="grid-cols-[24px_1fr_15px]"]:not(:has(> :first-child[class*="size-6"])) > [class*="overflow-hidden"]::before,
[class*="grid-cols-[24px_1fr_15px]"]:not(:has(> :first-child[class*="size-6"])) > :nth-child(2)::before {
  content: "F&P Store";
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25rem;
}

/* Store dropdown header (row above "Store settings") should match the top
   trigger branding: favicon icon + single-line "F&P Store" label. */
[class*="radix-dropdown-menu-trigger-width"] > [class*="items-center"][class*="gap-x-3"][class*="px-2"][class*="py-1"] > :first-child {
  position: relative;
}

[class*="radix-dropdown-menu-trigger-width"] > [class*="items-center"][class*="gap-x-3"][class*="px-2"][class*="py-1"] > :first-child,
[class*="radix-dropdown-menu-trigger-width"] > [class*="items-center"][class*="gap-x-3"][class*="px-2"][class*="py-1"] > :first-child * {
  color: transparent !important;
}

[class*="radix-dropdown-menu-trigger-width"] > [class*="items-center"][class*="gap-x-3"][class*="px-2"][class*="py-1"] > :first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("/static/favicon.ico");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

[class*="radix-dropdown-menu-trigger-width"] > [class*="items-center"][class*="gap-x-3"][class*="px-2"][class*="py-1"] > [class*="overflow-hidden"] > :first-child {
  font-size: 0 !important;
}

[class*="radix-dropdown-menu-trigger-width"] > [class*="items-center"][class*="gap-x-3"][class*="px-2"][class*="py-1"] > [class*="overflow-hidden"] > :first-child::after {
  content: "F&P Store";
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25rem;
}

/* Hide the dropdown subtitle ("Store") so it matches the top trigger. */
[class*="radix-dropdown-menu-trigger-width"] > [class*="items-center"][class*="gap-x-3"][class*="px-2"][class*="py-1"] > [class*="overflow-hidden"] > :nth-child(2) {
  display: none !important;
}

/* --- BOTTOM: keep themed wordmark treatment. --- */
[class*="grid-cols-[24px_1fr_15px]"]:has(> :first-child[class*="size-6"]) {
  grid-template-columns: 1fr 15px !important;
  align-items: center !important;
}

[class*="grid-cols-[24px_1fr_15px]"]:has(> :first-child[class*="size-6"]) > :first-child,
[class*="grid-cols-[24px_1fr_15px]"]:has(> :first-child[class*="size-6"]) > :first-child * {
  display: none !important;
}

[class*="grid-cols-[24px_1fr_15px]"]:has(> :first-child[class*="size-6"]) > [class*="overflow-hidden"],
[class*="grid-cols-[24px_1fr_15px]"]:has(> :first-child[class*="size-6"]) > :nth-child(2) {
  display: flex !important;
  align-items: center !important;
  width: 100%;
  min-width: 0;
}

[class*="grid-cols-[24px_1fr_15px]"]:has(> :first-child[class*="size-6"]) > [class*="overflow-hidden"] > *,
[class*="grid-cols-[24px_1fr_15px]"]:has(> :first-child[class*="size-6"]) > :nth-child(2) > * {
  font-size: 0 !important;
}

[class*="grid-cols-[24px_1fr_15px]"]:has(> :first-child[class*="size-6"]) > [class*="overflow-hidden"]::before,
[class*="grid-cols-[24px_1fr_15px]"]:has(> :first-child[class*="size-6"]) > :nth-child(2)::before {
  content: "";
  flex: 0 0 auto;
  height: 18px;
  width: 140px;
  max-width: 100%;
  margin-top: 1px;
  background-color: currentColor;
  -webkit-mask: url("/static/fpa-wordmark.svg") left center / contain no-repeat;
  mask: url("/static/fpa-wordmark.svg") left center / contain no-repeat;
}