/* Colored sidebar (desktop only, opt-in from /admin/settings).

   There is no build step here, so these rules are hand-written rather than
   generated from Tailwind sources - they only lean on the daisyUI theme
   variables that public/css/daisyui-themes.css already defines. */

/* Snapshot of the active theme's surface colours under names the sidebar never
   remaps, so anything nested inside a tinted sidebar can opt back out. */
:root {
  --color-page-base-100: var(--color-base-100);
  --color-page-base-200: var(--color-base-200);
  --color-page-base-300: var(--color-base-300);
  --color-page-base-content: var(--color-base-content);
}

/* Rather than restyling every element in the sidebar, remap the base palette
   inside it to one of the theme's accent colours - so bg-base-100,
   border-base-300, text-base-content and btn-ghost's hover all follow along,
   in whatever theme is active.

   Which colour is picked comes from a sidebar-tint-* class alongside this one;
   the fallbacks keep the sidebar readable if that class ever goes missing. */
.sidebar-tinted {
  --tint: var(--sidebar-tint, var(--color-primary));
  --tint-fg: var(--sidebar-tint-content, var(--color-primary-content));
  --color-base-100: var(--tint);
  --color-base-200: color-mix(in oklab, var(--tint) 92%, var(--tint-fg));
  --color-base-300: color-mix(in oklab, var(--tint) 82%, var(--tint-fg));
  --color-base-content: var(--tint-fg);
  background-image: linear-gradient(
    to bottom,
    transparent,
    color-mix(in oklab, var(--tint-fg) 7%, transparent)
  );
}

.sidebar-tint-primary {
  --sidebar-tint: var(--color-primary);
  --sidebar-tint-content: var(--color-primary-content);
}

.sidebar-tint-secondary {
  --sidebar-tint: var(--color-secondary);
  --sidebar-tint-content: var(--color-secondary-content);
}

.sidebar-tint-accent {
  --sidebar-tint: var(--color-accent);
  --sidebar-tint-content: var(--color-accent-content);
}

.sidebar-tint-neutral {
  --sidebar-tint: var(--color-neutral);
  --sidebar-tint-content: var(--color-neutral-content);
}

/* A colour the user picked, so there is no matching -content in the theme to
   pair with it. White is the safe default; where relative colour syntax is
   available the label flips to black over light picks. */
.sidebar-tint-custom {
  --sidebar-tint: var(--sidebar-custom, #6366f1);
  --sidebar-tint-content: #ffffff;
}

@supports (color: oklch(from red l c h)) {
  .sidebar-tint-custom {
    --sidebar-tint-content: oklch(from var(--sidebar-tint) clamp(0, (0.62 - l) * 1000, 1) 0 0);
  }
}

/* The theme picker lists swatches that need a neutral backdrop to read against,
   so it stays on the page palette even when the sidebar around it is tinted. */
.sidebar-tinted .sidebar-untinted {
  --color-base-100: var(--color-page-base-100);
  --color-base-200: var(--color-page-base-200);
  --color-base-300: var(--color-page-base-300);
  --color-base-content: var(--color-page-base-content);
  background-image: none;
}

/* Native colour input reduced to just its swatch, to sit in the chip row. */
.color-swatch-input {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.color-swatch-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-swatch-input::-webkit-color-swatch {
  border: none;
  border-radius: 9999px;
}

.color-swatch-input::-moz-color-swatch {
  border: none;
  border-radius: 9999px;
}