/* RecyTrax palette for the admin console. The console ships the same design
   tokens as the React app, so these values mirror react/src/styles/globals.css:
   Vert RecyTrax #0E9F6E, Encre #10312A, Surface #FAFAF8. */

:root {
  --background: oklch(0.985 0.003 106.4);
  --foreground: oklch(0.286 0.041 177.1);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.286 0.041 177.1);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.286 0.041 177.1);
  /* Brand green darkened one step so white labels clear WCAG AA (4.6:1). */
  --primary: oklch(0.540 0.115 162.3);
  --primary-foreground: oklch(0.990 0.003 106.4);
  --secondary: oklch(0.955 0.020 162.3);
  --secondary-foreground: oklch(0.286 0.041 177.1);
  --muted: oklch(0.962 0.008 165.0);
  --muted-foreground: oklch(0.505 0.022 167.4);
  --accent: oklch(0.945 0.028 162.3);
  --accent-foreground: oklch(0.286 0.041 177.1);
  --destructive: oklch(0.577 0.215 27.3);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.933 0.005 165.0);
  --input: oklch(0.933 0.005 165.0);
  --ring: oklch(0.622 0.133 162.3);
  --radius: 0.5rem;
}

.dark {
  /* Near-neutral charcoal surfaces: green stays an accent rather than tinting
     the whole shell. */
  --background: oklch(0.210 0.008 177.1);
  --foreground: oklch(0.968 0.004 106.4);
  --card: oklch(0.258 0.009 177.1);
  --card-foreground: oklch(0.968 0.004 106.4);
  --popover: oklch(0.258 0.009 177.1);
  --popover-foreground: oklch(0.968 0.004 106.4);
  --primary: oklch(0.700 0.140 162.3);
  --primary-foreground: oklch(0.210 0.008 177.1);
  --secondary: oklch(0.300 0.010 177.1);
  --secondary-foreground: oklch(0.968 0.004 106.4);
  --muted: oklch(0.300 0.010 177.1);
  --muted-foreground: oklch(0.730 0.012 170.0);
  --accent: oklch(0.325 0.014 170.0);
  --accent-foreground: oklch(0.968 0.004 106.4);
  --destructive: oklch(0.637 0.208 25.3);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 12%);
  --ring: oklch(0.700 0.140 162.3);
}

/* The console SPA ships its own markup and exposes only this stylesheet, so the
   RecyTrax mark is placed next to its title from here. Purely cosmetic: if the
   console's header markup changes, the mark quietly disappears. */
header div.flex-1 > span.font-semibold::before {
  content: "";
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
  vertical-align: -0.25rem;
  background: url("/images/logo/leptonx/icon.svg") center / contain no-repeat;
}

.dark header div.flex-1 > span.font-semibold::before {
  background-image: url("/images/logo/leptonx/icon-dark.svg");
}

/* The console's "<year>© by Volosoft" footer, hidden as it is in the React app. Matched by its
   link so no other footer is caught; like the mark above, if the console's markup changes the
   footer simply shows again. */
footer:has(a[href*="volosoft.com"]) {
  display: none !important;
}