/*
 * Academy Admin — Tailwind CSS 4 Entry Point
 *
 * Tailwind 4 uses CSS-first configuration via @import, @plugin, and @theme
 * directives. No tailwind.config.js is needed.
 *
 * Build: npx @tailwindcss/cli -i web/static/css/app.css -o web/static/css/output.css
 *
 * For development without the Tailwind build step, this file imports the
 * DaisyUI CDN stylesheet. Replace with the Tailwind CLI output for production.
 */

/* --- Sweetspot Theme (DaisyUI 5 + Tailwind 4) --- */

/*
 * When Tailwind CLI is configured, uncomment the following:
 *
 * @import "tailwindcss";
 * @source "../../../internal";
 * @source "../../../web/templates";
 * @plugin "daisyui" { themes: light --default; };
 * @plugin "daisyui/theme" {
 *   name: "sweetspot";
 *   default: true;
 *   color-scheme: light;
 *   ... (same variables as below)
 * };
 * @theme {
 *   --font-content: "Roboto", sans-serif;
 *   --font-title: "RundText", sans-serif;
 *   --font-brand: "RundDisplay", sans-serif;
 * };
 * @import "./fonts.css";
 */

/* Sweetspot light theme — CDN-compatible override via data-theme attribute.
   These OKLCH color variables override DaisyUI 5 defaults with Sweetspot brand colors.
   Purple primary, cyan secondary, golden accent — tuned for WCAG AA contrast. */
[data-theme="sweetspot"] {
  color-scheme: light;
  --color-primary: oklch(55% 0.22 250);
  --color-primary-content: oklch(98% 0.01 250);
  --color-secondary: oklch(65% 0.18 190);
  --color-secondary-content: oklch(98% 0.01 190);
  --color-accent: oklch(70% 0.20 80);
  --color-accent-content: oklch(20% 0.05 80);
  --color-neutral: oklch(30% 0.02 250);
  --color-neutral-content: oklch(90% 0.01 250);
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(97% 0.01 250);
  --color-base-300: oklch(92% 0.02 250);
  --color-base-content: oklch(20% 0.02 250);
  --color-info: oklch(55% 0.22 260);
  --color-info-content: oklch(98% 0.01 260);
  --color-success: oklch(55% 0.20 145);
  --color-success-content: oklch(98% 0.01 145);
  --color-warning: oklch(75% 0.18 85);
  --color-warning-content: oklch(20% 0.05 85);
  --color-error: oklch(55% 0.22 25);
  --color-error-content: oklch(98% 0.01 25);
  --radius-selector: 0.5rem;
  --radius-field: 0.375rem;
  --radius-box: 0.75rem;
}

/* Sweetspot player theme — red primary for the /play/ layout.
   Per feedback thread 72df: players see a red brand accent instead of blue.
   All other palette channels inherit the same luminance/chroma shape as
   data-theme="sweetspot" so contrast + secondary/accent/info stay consistent. */
[data-theme="sweetspot-player"] {
  color-scheme: light;
  --color-primary: oklch(55% 0.22 25);
  --color-primary-content: oklch(98% 0.01 25);
  --color-secondary: oklch(65% 0.18 190);
  --color-secondary-content: oklch(98% 0.01 190);
  --color-accent: oklch(70% 0.20 80);
  --color-accent-content: oklch(20% 0.05 80);
  --color-neutral: oklch(30% 0.02 25);
  --color-neutral-content: oklch(90% 0.01 25);
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(97% 0.01 25);
  --color-base-300: oklch(92% 0.02 25);
  --color-base-content: oklch(20% 0.02 25);
  --color-info: oklch(55% 0.22 260);
  --color-info-content: oklch(98% 0.01 260);
  --color-success: oklch(55% 0.20 145);
  --color-success-content: oklch(98% 0.01 145);
  --color-warning: oklch(75% 0.18 85);
  --color-warning-content: oklch(20% 0.05 85);
  --color-error: oklch(45% 0.20 15);
  --color-error-content: oklch(98% 0.01 15);
  --radius-selector: 0.5rem;
  --radius-field: 0.375rem;
  --radius-box: 0.75rem;
}

/* Sweetspot dark theme — inverted luminance with same hue palette.
   Activated via data-theme="sweetspot-dark" or OS prefers-dark-scheme toggle. */
[data-theme="sweetspot-dark"] {
  color-scheme: dark;
  --color-primary: oklch(65% 0.22 250);
  --color-primary-content: oklch(15% 0.02 250);
  --color-secondary: oklch(70% 0.18 190);
  --color-secondary-content: oklch(15% 0.02 190);
  --color-accent: oklch(75% 0.20 80);
  --color-accent-content: oklch(15% 0.05 80);
  --color-neutral: oklch(75% 0.02 250);
  --color-neutral-content: oklch(20% 0.01 250);
  --color-base-100: oklch(20% 0.02 250);
  --color-base-200: oklch(25% 0.02 250);
  --color-base-300: oklch(30% 0.02 250);
  --color-base-content: oklch(90% 0.01 250);
  --color-info: oklch(65% 0.22 260);
  --color-info-content: oklch(15% 0.02 260);
  --color-success: oklch(65% 0.20 145);
  --color-success-content: oklch(15% 0.02 145);
  --color-warning: oklch(80% 0.18 85);
  --color-warning-content: oklch(15% 0.05 85);
  --color-error: oklch(65% 0.22 25);
  --color-error-content: oklch(15% 0.02 25);
  --radius-selector: 0.5rem;
  --radius-field: 0.375rem;
  --radius-box: 0.75rem;
}

/* Minimal reset for embedded serving without Tailwind build */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Roboto", system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Sidebar active indicator — left border with smooth transition.
   Applied via sidebar-active class on the active nav link. */
.sidebar-active {
  border-left: 3px solid oklch(55% 0.22 250); /* primary color */
  padding-left: calc(0.5rem - 3px); /* compensate for border width */
}

/* HTMX swap transitions — fade new content in on all HTMX swaps.
   htmx-added: applied to new elements during the settle phase, then removed.
   The animation runs once when new content appears after any hx-swap. */
.htmx-added {
  animation: htmx-fade-in 300ms ease-in;
}

@keyframes htmx-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* View Transitions API — cross-fade between pages on navigation.
   Progressive enhancement: browsers without support get normal navigation.
   @view-transition enables automatic cross-fade for same-origin navigations. */
@view-transition {
  navigation: auto;
}

/* Assign a view-transition-name to the main content area so it animates
   independently from the sidebar (which stays static). */
#main-content {
  view-transition-name: main-content;
}

/* Custom cross-fade duration for the main content transition */
::view-transition-old(main-content),
::view-transition-new(main-content) {
  animation-duration: 200ms;
  animation-timing-function: ease-in-out;
}

/* Dashboard stat reveal — scale+fade cascade on page load.
   Apply .animate-stat-reveal to stat values with --delay custom property for stagger. */
@keyframes statReveal {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-stat-reveal {
  animation: statReveal 400ms ease-out both;
  animation-delay: var(--delay, 0ms);
}

/* Sidebar Developer dropdown: keep only the native left disclosure marker.
   DaisyUI adds a ::after chevron on the right that visually duplicates the
   disclosure arrow and can drift out of vertical alignment with the label. */
#dev-toggle > summary::after {
  content: none !important;
}