@import url(https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap);
/* Theme Variables CSS */

:root {
  /* Default light theme variables - using shadcn UI HSL format */
  --background: 0 0% 98%; /* light: off-white instead of pure white */
  --foreground: 0 0% 9%;   /* dark: near-black for better contrast */
  --card: 0 0% 97%; /* surface: warm off-white for cards — avoids pure white for readability */
  --card-foreground: 0 0% 9%; /* near-black text on cards */
  --popover: 0 0% 97%; /* surface: warm off-white for popovers */
  --popover-foreground: 0 0% 9%; /* near-black text on popovers */
  --primary: 221 83% 53%; /* blue primary for better contrast */
  --primary-foreground: 0 0% 98%; /* light text on primary */
  --secondary: 210 40% 96%; /* light grey secondary */
  --secondary-foreground: 222 84% 5%; /* dark text on secondary */
  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%; /* muted text color */
  --accent: 210 40% 96%; /* accent matches secondary */
  --accent-foreground: 222 84% 5%; /* dark text on accent */
  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;
  --border: 214 32% 91%; /* light grey border */
  --input: 214 32% 91%; /* light grey input border */
  --ring: 221 83% 53%; /* ring matches primary */
  /* Dropdown / select list hover & selection — darker than accent/muted for visibility */
  --menu-highlight: 210 25% 82%;
  --menu-highlight-foreground: 0 0% 9%;
  --radius: 0.5rem;
  --mellowYellow: 60 100% 50%; /* soft yellow */
  --purpleRain: 270 100% 25%;  /* deep purple */
  --blueSky: 200 100% 50%;     /* bright blue */

  /* Modular spacing scale */
  --spacing-0: 0;
  --spacing-1: 0.5rem;    /* 8px */
  --spacing-2: 1rem;      /* 16px */
  --spacing-3: 1.5rem;    /* 24px */
  --spacing-4: 2rem;      /* 32px */
  --spacing-5: 3rem;      /* 48px */
  
  /* Typography scale */
  --font-size-h1: 2rem;         /* 32px */
  --font-size-h2: 1.5rem;       /* 24px */
  --font-size-h3: 1.25rem;      /* 20px */
  --font-size-h4: 1rem;         /* 16px */
  --font-size-h5: 0.875rem;     /* 14px */
  --font-size-body: 1rem;       /* 16px */
  --font-size-small: 0.875rem;  /* 14px */
  --font-size-xs: 0.75rem;      /* 12px */
  
  /* Line heights */
  --line-height-h1: 1.2;
  --line-height-h2: 1.25;
  --line-height-h3: 1.3;
  --line-height-h4: 1.35;
  --line-height-h5: 1.4;
  --line-height-body: 1.5;

  /* Document and Slideshow specific theme variables */
  --document-bg: hsl(var(--background));
  --document-text: hsl(var(--foreground));
  --document-border: hsl(var(--border));
  --document-primary: hsl(var(--primary));
  --document-secondary: hsl(var(--secondary));
  --document-muted: hsl(var(--muted));
  --document-muted-text: hsl(var(--muted-foreground));
  --document-card-bg: hsl(var(--card));
  --document-card-text: hsl(var(--card-foreground));
  --document-accent: hsl(var(--accent));
  --document-accent-text: hsl(var(--accent-foreground));
}

/* Global theme transition rules to prevent flickering */
html {
  transition: background-color 0.3s ease, 
              color 0.3s ease, 
              border-color 0.3s ease !important;
}

/* Optimized: Only apply transitions to specific elements, not all elements */
body,
header, nav, main, footer,
.card, .card-content,
[class*="theme-transition"]:not(button):not(.button):not(.btn) {
  transition-property: background-color, color, border-color, box-shadow;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

/* Fast button interactions - buttons should transition quickly and be prioritized */
/* Use high specificity to override any other transition rules */
button, .button, .btn,
button *, .button *, .btn *,
.theme-transition button,
.theme-transition .button,
.theme-transition .btn,
.theme-transition button *,
.theme-transition .button *,
.theme-transition .btn * {
  transition: background-color 0.15s ease, 
              color 0.15s ease, 
              border-color 0.15s ease,
              box-shadow 0.15s ease,
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Modal animations */
.dialog-content, .modal-content {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Theme transition for smooth color changes - but exclude buttons for faster rendering */
/* Use descendant selector to exclude all nested buttons */
.theme-transition:not(button):not(.button):not(.btn),
.theme-transition :not(button):not(.button):not(.btn) {
  transition: background-color 0.3s ease, 
              color 0.3s ease, 
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

/* Fix for select components to prevent flickering */
.select-content[data-state="open"] {
  animation: none !important;
}

/* Dropdown menu specific fixes */
.dropdown-menu[data-state="open"],
.dropdown-menu-content[data-state="open"] {
  animation: none !important;
  transition: opacity 0.2s ease !important;
}

/* Popover / attach-lesson list rows — darker hover & selection per theme */
.menu-list-item-hover:hover,
.menu-list-item-hover:focus-visible {
  background-color: hsl(var(--menu-highlight));
  color: hsl(var(--menu-highlight-foreground));
}

.menu-list-item-selected {
  background-color: hsl(var(--menu-highlight));
  color: hsl(var(--menu-highlight-foreground));
}

/* Prevent background flashes.
   NOTE: `transform: translateZ(0)` was removed because it creates a CSS
   containing block, which breaks `position: fixed` descendants (they anchor
   to the transformed ancestor instead of the viewport — e.g. the mobile
   bottom nav ended up stuck near the top of the page). Modern browsers
   already promote elements with `will-change` to their own compositor layer,
   so the hack is no longer required. */
.theme-transition {
  will-change: background-color, color;
  backface-visibility: hidden;
}

/* Force hardware acceleration for smoother transitions.
   Same rationale as above — no `transform: translateZ(0)` here so fixed
   descendants (mobile bottom nav, modals, toasts) remain anchored to the
   viewport rather than any of these containers. */
body, 
.card, 
.button, 
.nav, 
.header, 
.footer,
.dropdown-menu,
.popover,
.dialog,
.toast {
  will-change: background-color, color, border-color;
  backface-visibility: hidden;
}

/* Use theme variables in your styles */
.themed-container {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.themed-button {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.themed-button:hover {
  background-color: hsl(var(--primary) / 0.9);
}

.themed-button:active {
  background-color: hsl(var(--primary) / 0.8);
}

.themed-secondary-button {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
}

.themed-secondary-button:hover {
  background-color: hsl(var(--secondary) / 0.9);
}

.themed-secondary-button:active {
  background-color: hsl(var(--secondary) / 0.8);
}

.themed-error {
  color: hsl(var(--destructive));
}

/* Custom hover styles for mellow yellow elements */
.hover\:bg-mellowYellow:hover {
  background-color: hsl(var(--primary)) !important;
}

/* Dark theme — Apple grouped OLED: black canvas, cool-neutral lift, inverted plate, blue tint */
.dark, [data-theme="dark"] {
  --background: 0 0% 0%; /* #000000 canvas */
  --foreground: 0 0% 100%; /* label */
  --card: 240 4% 11%; /* #1C1C1E surface */
  --card-foreground: 0 0% 100%;
  --popover: 240 4% 11%;
  --popover-foreground: 0 0% 100%;
  --primary: 240 11% 97%; /* #F5F5F7 plate — nav/CTA fill, not tint */
  --primary-foreground: 0 0% 0%; /* black ink on plate */
  --secondary: 240 2% 18%; /* #2C2C2E raised */
  --secondary-foreground: 0 0% 100%;
  --muted: 240 2% 18%;
  --muted-foreground: 240 2% 57%; /* #8E8E93 secondary label */
  --accent: 240 2% 18%;
  --accent-foreground: 240 14% 93%; /* #EBEBF5 */
  --destructive: 4 100% 61%; /* #FF453A */
  --destructive-foreground: 0 0% 100%;
  --border: 240 2% 22%; /* #38383A separator */
  --input: 240 2% 22%;
  --tint: 211 100% 52%; /* #0A84FF focus/links/charts */
  --ring: 211 100% 52%;
  --menu-highlight: 240 2% 18%;
  --menu-highlight-foreground: 0 0% 100%;
  --mellowYellow: 60 100% 60%;
  --purpleRain: 270 100% 35%;
  --blueSky: 200 100% 60%;
}

/* Dark theme (night) - label white; muted/secondary ranks stay readable */
.dark p:not(.text-muted-foreground):not(.text-secondary-foreground),
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6,
.dark span:not(.text-muted-foreground):not(.text-secondary-foreground),
.dark div:not(.text-muted-foreground):not(.text-secondary-foreground),
.dark label:not(.text-muted-foreground):not(.text-secondary-foreground),
.dark li:not(.text-muted-foreground):not(.text-secondary-foreground),
.dark a:not(.text-muted-foreground):not(.text-secondary-foreground):not(.bg-primary),
[data-theme="dark"] p:not(.text-muted-foreground):not(.text-secondary-foreground),
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6,
[data-theme="dark"] span:not(.text-muted-foreground):not(.text-secondary-foreground),
[data-theme="dark"] div:not(.text-muted-foreground):not(.text-secondary-foreground),
[data-theme="dark"] label:not(.text-muted-foreground):not(.text-secondary-foreground),
[data-theme="dark"] li:not(.text-muted-foreground):not(.text-secondary-foreground),
[data-theme="dark"] a:not(.text-muted-foreground):not(.text-secondary-foreground):not(.bg-primary) {
  color: hsl(var(--foreground)) !important;
}

.dark .text-muted-foreground,
.dark .text-muted-foreground *,
[data-theme="dark"] .text-muted-foreground,
[data-theme="dark"] .text-muted-foreground * {
  color: hsl(var(--muted-foreground)) !important;
}

.dark .text-secondary-foreground,
.dark .text-secondary-foreground *,
[data-theme="dark"] .text-secondary-foreground,
[data-theme="dark"] .text-secondary-foreground * {
  color: hsl(var(--secondary-foreground)) !important;
}

/* Canvas icons white; plates (default / bg-primary) get black glyphs below */
.dark svg:not([class*="text-"]),
[data-theme="dark"] svg:not([class*="text-"]) {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.dark svg[class*="text-red"],
.dark svg[class*="text-yellow"],
.dark svg[class*="text-blue"],
.dark svg[class*="text-green"],
.dark svg[class*="text-gray"],
.dark svg[class*="text-slate"],
[data-theme="dark"] svg[class*="text-red"],
[data-theme="dark"] svg[class*="text-yellow"],
[data-theme="dark"] svg[class*="text-blue"],
[data-theme="dark"] svg[class*="text-green"],
[data-theme="dark"] svg[class*="text-gray"],
[data-theme="dark"] svg[class*="text-slate"] {
  stroke: currentColor !important;
}

/* Override dark Tailwind text classes to use white/light in dark theme */
.dark .text-gray-600,
.dark .text-gray-700,
.dark .text-gray-800,
.dark .text-gray-900,
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-900,
.dark .text-slate-600,
.dark .text-slate-700,
.dark .text-slate-800,
.dark .text-slate-900,
[data-theme="dark"] .text-slate-600,
[data-theme="dark"] .text-slate-700,
[data-theme="dark"] .text-slate-800,
[data-theme="dark"] .text-slate-900,
.dark .text-zinc-600,
.dark .text-zinc-700,
.dark .text-zinc-800,
.dark .text-zinc-900,
[data-theme="dark"] .text-zinc-600,
[data-theme="dark"] .text-zinc-700,
[data-theme="dark"] .text-zinc-800,
[data-theme="dark"] .text-zinc-900 {
  color: #e5e7eb !important;
}

/* Semantic colors - use lighter variants for dark theme */
.dark .text-red-600,
.dark .text-red-700,
.dark .text-red-800,
[data-theme="dark"] .text-red-600,
[data-theme="dark"] .text-red-700,
[data-theme="dark"] .text-red-800 {
  color: #fca5a5 !important;
}

.dark .text-blue-600,
.dark .text-blue-700,
.dark .text-blue-800,
.dark .text-blue-900,
[data-theme="dark"] .text-blue-600,
[data-theme="dark"] .text-blue-700,
[data-theme="dark"] .text-blue-800,
[data-theme="dark"] .text-blue-900 {
  color: #93c5fd !important;
}

.dark .text-yellow-600,
.dark .text-yellow-700,
.dark .text-yellow-800,
[data-theme="dark"] .text-yellow-600,
[data-theme="dark"] .text-yellow-700,
[data-theme="dark"] .text-yellow-800 {
  color: #fde047 !important;
}

.dark .text-green-600,
.dark .text-green-700,
.dark .text-green-800,
[data-theme="dark"] .text-green-600,
[data-theme="dark"] .text-green-700,
[data-theme="dark"] .text-green-800 {
  color: #86efac !important;
}

/* ---------------------------------------------------------------------------
   Button variants are matched on `data-variant`, which src/components/ui/button.tsx
   sets from the cva variant prop.

   They must NOT be matched on the class list. Every variant's classes contain
   `focus-visible:outline-none`, so `[class*="outline"]` matches EVERY button —
   including `variant="default"` ones carrying `bg-primary`. That is what used
   to strip the fill off primary buttons in light theme.
--------------------------------------------------------------------------- */

/* Dark theme buttons — plate (default) is black ink; secondary/destructive stay white */
.dark button[data-variant="secondary"],
.dark button[data-variant="destructive"],
.dark button[data-variant="link"],
.dark .button[data-variant="secondary"],
.dark .button[data-variant="destructive"],
.dark .btn[data-variant="secondary"],
.dark .btn[data-variant="destructive"],
[data-theme="dark"] button[data-variant="secondary"],
[data-theme="dark"] button[data-variant="destructive"],
[data-theme="dark"] button[data-variant="link"],
[data-theme="dark"] .button[data-variant="secondary"],
[data-theme="dark"] .button[data-variant="destructive"],
[data-theme="dark"] .btn[data-variant="secondary"],
[data-theme="dark"] .btn[data-variant="destructive"] {
  color: #ffffff !important;
}

.dark button[data-variant="default"],
.dark button[data-variant="default"] span,
.dark button[data-variant="default"] p,
.dark .button[data-variant="default"],
.dark .btn[data-variant="default"],
.dark .bg-primary,
.dark .bg-primary span,
.dark a.bg-primary,
[data-theme="dark"] button[data-variant="default"],
[data-theme="dark"] button[data-variant="default"] span,
[data-theme="dark"] button[data-variant="default"] p,
[data-theme="dark"] .button[data-variant="default"],
[data-theme="dark"] .btn[data-variant="default"],
[data-theme="dark"] .bg-primary,
[data-theme="dark"] .bg-primary span,
[data-theme="dark"] a.bg-primary {
  color: #000000 !important;
}

.dark button svg,
.dark .button svg,
.dark .btn svg,
.dark a svg,
[data-theme="dark"] button svg,
[data-theme="dark"] .button svg,
[data-theme="dark"] .btn svg,
[data-theme="dark"] a svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.dark button[data-variant="default"] svg,
.dark .button[data-variant="default"] svg,
.dark .btn[data-variant="default"] svg,
.dark .bg-primary svg,
.dark a.bg-primary svg,
[data-theme="dark"] button[data-variant="default"] svg,
[data-theme="dark"] .button[data-variant="default"] svg,
[data-theme="dark"] .btn[data-variant="default"] svg,
[data-theme="dark"] .bg-primary svg,
[data-theme="dark"] a.bg-primary svg {
  color: #000000 !important;
  stroke: #000000 !important;
}

.dark button[data-variant="outline"],
.dark button[data-variant="ghost"],
.dark .button[data-variant="outline"],
.dark .button[data-variant="ghost"],
[data-theme="dark"] button[data-variant="outline"],
[data-theme="dark"] button[data-variant="ghost"],
[data-theme="dark"] .button[data-variant="outline"],
[data-theme="dark"] .button[data-variant="ghost"] {
  color: #ffffff !important;
  border-color: hsl(var(--border)) !important;
}

.dark button[data-variant="outline"] svg,
.dark button[data-variant="ghost"] svg,
.dark .button[data-variant="outline"] svg,
.dark .button[data-variant="ghost"] svg,
[data-theme="dark"] button[data-variant="outline"] svg,
[data-theme="dark"] button[data-variant="ghost"] svg,
[data-theme="dark"] .button[data-variant="outline"] svg,
[data-theme="dark"] .button[data-variant="ghost"] svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Ghost/outline hover: Apple tertiary fill, white ink (not mid-grey) */
.dark button[data-variant="outline"]:hover,
.dark button[data-variant="ghost"]:hover,
.dark .button[data-variant="outline"]:hover,
.dark .button[data-variant="ghost"]:hover,
[data-theme="dark"] button[data-variant="outline"]:hover,
[data-theme="dark"] button[data-variant="ghost"]:hover,
[data-theme="dark"] .button[data-variant="outline"]:hover,
[data-theme="dark"] .button[data-variant="ghost"]:hover {
  background-color: rgba(120, 120, 128, 0.24) !important;
  color: #ffffff !important;
}

.dark button[data-variant="outline"]:hover svg,
.dark button[data-variant="ghost"]:hover svg,
.dark .button[data-variant="outline"]:hover svg,
.dark .button[data-variant="ghost"]:hover svg,
[data-theme="dark"] button[data-variant="outline"]:hover svg,
[data-theme="dark"] button[data-variant="ghost"]:hover svg,
[data-theme="dark"] .button[data-variant="outline"]:hover svg,
[data-theme="dark"] .button[data-variant="ghost"]:hover svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* iOS dark field: filled card, separator hairline, tint focus */
.dark input,
.dark select,
.dark textarea,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  color: #ffffff !important;
  background-color: hsl(var(--card)) !important;
  border-color: hsl(var(--border)) !important;
}

.dark input:focus,
.dark input:focus-visible,
.dark select:focus,
.dark select:focus-visible,
.dark textarea:focus,
.dark textarea:focus-visible,
[data-theme="dark"] input:focus,
[data-theme="dark"] input:focus-visible,
[data-theme="dark"] select:focus,
[data-theme="dark"] select:focus-visible,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] textarea:focus-visible {
  outline: 2px solid hsl(var(--tint)) !important;
  outline-offset: 2px !important;
  /* Beat Tailwind focus-visible:ring-* so the tint stays visible */
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--tint)) !important;
}

.dark input::placeholder,
.dark textarea::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: rgba(235, 235, 245, 0.3) !important;
}

/* Theme-specific styles based on data-theme attribute */
[data-theme="dark"] .themed-card {
  box-shadow: none;
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
}

[data-theme="light"] .themed-card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: hsl(var(--card));
  border: 1px solid rgba(0, 0, 0, 0.8); /* Darkened border */
}

/* Light theme (day) - blue primary for buttons, black nav highlight only, white text on black */
[data-theme="light"] {
  --primary: 221 83% 53%; /* blue for primary buttons (Check Availability, etc.) - no black fill */
  --primary-foreground: 0 0% 100%; /* white text on primary (when primary is dark) */
  --ring: 221 83% 53%; /* blue ring for focus */
  --menu-highlight: 210 25% 82%;
  --menu-highlight-foreground: 0 0% 9%;
}

/* Unstyled buttons - transparent with subtle border (no black fill).
   Anything that brings its own surface is left alone: the shadcn variants via
   `data-variant`, and hand-rolled buttons via `[class*="bg-"]`. */
[data-theme="light"] button:not(nav button):not(.nav-button):not(header button):not(footer button):not([data-variant="outline"]):not([data-variant="ghost"]):not([data-variant="link"]):not([data-variant="secondary"]):not([data-variant="destructive"]):not([class*="navbar"]):not([class*="header"]):not([class*="bg-"]):not([data-no-outline]),
[data-theme="light"] .button:not([data-variant="outline"]):not([data-variant="ghost"]):not([data-variant="link"]):not([data-variant="secondary"]):not([data-variant="destructive"]):not([class*="bg-"]):not([data-no-outline]),
[data-theme="light"] .btn:not([data-variant="outline"]):not([data-variant="ghost"]):not([data-variant="link"]):not([data-variant="secondary"]):not([data-variant="destructive"]):not([class*="bg-"]):not([data-no-outline]) {
  background-color: transparent !important;
  color: black !important;
  border: 1px solid hsl(var(--border)) !important;
}

/* No border for elements that opt out (e.g. reviews link, inline actions) */
[data-theme="light"] button[data-no-outline],
[data-theme="light"] .button[data-no-outline],
[data-theme="light"] [data-no-outline] {
  border: none !important;
  box-shadow: none !important;
}

[data-theme="light"] button:not(nav button):not(.nav-button):not(header button):not(footer button):not([data-variant="outline"]):not([data-variant="ghost"]):not([data-variant="link"]):not([data-variant="secondary"]):not([data-variant="destructive"]):not([class*="navbar"]):not([class*="header"]):not([class*="bg-"]):hover,
[data-theme="light"] .button:not([data-variant="outline"]):not([data-variant="ghost"]):not([data-variant="link"]):not([data-variant="secondary"]):not([data-variant="destructive"]):not([class*="bg-"]):hover,
[data-theme="light"] .btn:not([data-variant="outline"]):not([data-variant="ghost"]):not([data-variant="link"]):not([data-variant="secondary"]):not([data-variant="destructive"]):not([class*="bg-"]):hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: black !important;
  border: 1px solid hsl(var(--border)) !important;
}

/* Outline and ghost buttons - subtle border (no heavy black outline) */
[data-theme="light"] button[data-variant="outline"],
[data-theme="light"] .button[data-variant="outline"],
[data-theme="light"] button[data-variant="ghost"]:not(nav button):not(.navbar button):not(header button):not(footer button):not([data-no-outline]),
[data-theme="light"] .button[data-variant="ghost"]:not(nav .button):not(.navbar .button):not(header .button):not(footer .button):not([data-no-outline]) {
  border: 1px solid hsl(var(--border)) !important;
  color: black !important;
  background-color: transparent !important;
}

[data-theme="light"] button[data-variant="outline"]:hover,
[data-theme="light"] .button[data-variant="outline"]:hover,
[data-theme="light"] button[data-variant="ghost"]:not(nav button):not(.navbar button):not(header button):not(footer button):not([data-no-outline]):hover,
[data-theme="light"] .button[data-variant="ghost"]:not(nav .button):not(.navbar .button):not(header .button):not(footer .button):not([data-no-outline]):hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: black !important;
  border: 1px solid hsl(var(--border)) !important;
}

/* No outline: nav alert/notification, theme toggle, avatar/DP, footer About Us & Plans */
[data-theme="light"] nav button[data-variant="ghost"],
[data-theme="light"] nav .button[data-variant="ghost"],
[data-theme="light"] .navbar button[data-variant="ghost"],
[data-theme="light"] .navbar .button[data-variant="ghost"],
[data-theme="light"] header button[data-variant="ghost"],
[data-theme="light"] header .button[data-variant="ghost"],
[data-theme="light"] footer button,
[data-theme="light"] footer .button {
  border: none !important;
  box-shadow: none !important;
}

[data-theme="light"] nav button[data-variant="ghost"]:hover,
[data-theme="light"] nav .button[data-variant="ghost"]:hover,
[data-theme="light"] .navbar button[data-variant="ghost"]:hover,
[data-theme="light"] .navbar .button[data-variant="ghost"]:hover,
[data-theme="light"] header button[data-variant="ghost"]:hover,
[data-theme="light"] header .button[data-variant="ghost"]:hover,
[data-theme="light"] footer button:hover,
[data-theme="light"] footer .button:hover {
  border: none !important;
  box-shadow: none !important;
}

[data-theme="light"] a {
  color: black;
}

[data-theme="light"] a:hover {
  color: white;
  background-color: black;
}

[data-theme="light"] svg:not([class*="text-"]) {
  color: black;
}

/* Icons: black by default; white only when inside nav hover/active (black bg) */
[data-theme="light"] button:hover svg:not(nav button svg):not(.navbar button svg):not(.nav-button svg):not(.header button svg),
[data-theme="light"] .button:hover svg:not(nav .button svg):not(.navbar .button svg),
[data-theme="light"] .btn:hover svg:not(nav .btn svg):not(.navbar .btn svg),
[data-theme="light"] a:hover svg:not(nav a svg):not(.navbar a svg) {
  color: black !important;
}

/* Nav bar: black highlight with white text when hovered or selected */
[data-theme="light"] nav button,
[data-theme="light"] .navbar button,
[data-theme="light"] .nav-button,
[data-theme="light"] .header button,
[data-theme="light"] .logo,
[data-theme="light"] .brand,
[data-theme="light"] .my-pace,
[data-theme="light"] nav a,
[data-theme="light"] .navbar a {
  background-color: transparent;
  color: black;
  border: none;
  outline: none;
  box-shadow: none;
}

[data-theme="light"] nav button:hover,
[data-theme="light"] nav button[data-state="active"],
[data-theme="light"] nav a.bg-primary,
[data-theme="light"] .navbar button:hover,
[data-theme="light"] .navbar button[data-state="active"],
[data-theme="light"] .nav-button:hover,
[data-theme="light"] .header button:hover,
[data-theme="light"] nav a:hover,
[data-theme="light"] .navbar a:hover {
  background-color: black !important;
  color: white !important;
}

/* Icons and text white when nav item is hovered/active (black background) */
[data-theme="light"] nav button:hover svg,
[data-theme="light"] nav button[data-state="active"] svg,
[data-theme="light"] nav a.bg-primary svg,
[data-theme="light"] .navbar button:hover svg,
[data-theme="light"] .navbar button[data-state="active"] svg,
[data-theme="light"] .nav-button:hover svg,
[data-theme="light"] .header button:hover svg,
[data-theme="light"] nav a:hover svg,
[data-theme="light"] .navbar a:hover svg {
  color: white !important;
}

/* My Pace / Logo text white when nav button hovered (overrides text-foreground) */
[data-theme="light"] nav button:hover span,
[data-theme="light"] nav button:hover .text-foreground,
[data-theme="light"] nav button[data-state="active"] span,
[data-theme="light"] nav button[data-state="active"] .text-foreground,
[data-theme="light"] .navbar button:hover span,
[data-theme="light"] .navbar button:hover .text-foreground,
[data-theme="light"] .navbar button[data-state="active"] span,
[data-theme="light"] .navbar button[data-state="active"] .text-foreground {
  color: white !important;
}

/* shadcn Button default variant (used for selected nav) - black bg, white text when highlighted */
[data-theme="light"] nav .bg-primary,
[data-theme="light"] .navbar .bg-primary,
[data-theme="light"] nav a.bg-primary,
[data-theme="light"] .navbar a.bg-primary {
  background-color: black !important;
  color: white !important;
  border: none;
}

[data-theme="light"] nav .bg-primary svg,
[data-theme="light"] .navbar .bg-primary svg,
[data-theme="light"] nav a.bg-primary svg,
[data-theme="light"] .navbar a.bg-primary svg {
  color: white !important;
}

/* Dark nav: #F5F5F7 plate, black ink (mirror of light black pill) */
[data-theme="dark"] nav button:hover,
[data-theme="dark"] nav button[data-state="active"],
[data-theme="dark"] nav a.bg-primary,
[data-theme="dark"] .navbar button:hover,
[data-theme="dark"] .navbar button[data-state="active"],
[data-theme="dark"] .nav-button:hover,
[data-theme="dark"] .header button:hover,
[data-theme="dark"] nav a:hover,
[data-theme="dark"] .navbar a:hover {
  background-color: hsl(var(--primary)) !important;
  color: #000000 !important;
}

[data-theme="dark"] nav button:hover svg,
[data-theme="dark"] nav button[data-state="active"] svg,
[data-theme="dark"] nav a.bg-primary svg,
[data-theme="dark"] .navbar button:hover svg,
[data-theme="dark"] .navbar button[data-state="active"] svg,
[data-theme="dark"] .nav-button:hover svg,
[data-theme="dark"] .header button:hover svg,
[data-theme="dark"] nav a:hover svg,
[data-theme="dark"] .navbar a:hover svg {
  color: #000000 !important;
  stroke: #000000 !important;
}

[data-theme="dark"] nav button:hover span,
[data-theme="dark"] nav button:hover .text-foreground,
[data-theme="dark"] nav button[data-state="active"] span,
[data-theme="dark"] nav button[data-state="active"] .text-foreground,
[data-theme="dark"] .navbar button:hover span,
[data-theme="dark"] .navbar button:hover .text-foreground,
[data-theme="dark"] .navbar button[data-state="active"] span,
[data-theme="dark"] .navbar button[data-state="active"] .text-foreground {
  color: #000000 !important;
}

[data-theme="dark"] nav .bg-primary,
[data-theme="dark"] .navbar .bg-primary,
[data-theme="dark"] nav a.bg-primary,
[data-theme="dark"] .navbar a.bg-primary {
  background-color: hsl(var(--primary)) !important;
  color: #000000 !important;
  border: none;
}

[data-theme="dark"] nav .bg-primary svg,
[data-theme="dark"] .navbar .bg-primary svg,
[data-theme="dark"] nav a.bg-primary svg,
[data-theme="dark"] .navbar a.bg-primary svg {
  color: #000000 !important;
  stroke: #000000 !important;
}


[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  border-color: hsl(var(--border));
}

[data-theme="light"] .highlight,
[data-theme="light"] ::selection {
  background-color: rgba(0, 0, 0, 0.15);
  color: inherit;
}

/* Mellow Yellow theme - refined HSL values for better shadcn UI compatibility */
.mellowYellow-theme, [data-theme="mellowYellow"] {
  --background: 60 100% 95%; /* pale yellow background */
  --foreground: 30 100% 15%;  /* dark brown for better contrast */
  --card: 55 80% 93%; /* warm cream surface — noticeably tinted for readability */
  --card-foreground: 30 100% 15%;  /* dark brown text */
  --popover: 55 80% 93%; /* warm cream surface */
  --popover-foreground: 30 100% 15%;  /* dark brown text */
  --primary: 49 100% 68%;  /* vibrant yellow primary */
  --primary-foreground: 30 100% 15%;  /* dark brown on primary */
  --secondary: 60 100% 85%; /* lighter yellow secondary */
  --secondary-foreground: 30 100% 15%;  /* dark brown text */
  --muted: 60 33% 96%; /* very light yellow muted */
  --muted-foreground: 30 50% 40%;  /* medium brown muted text */
  --accent: 43 100% 50%; /* orange accent */
  --accent-foreground: 60 100% 98%;  /* light text on accent */
  --destructive: 16 100% 44%;
  --destructive-foreground: 60 100% 98%;  /* light text on destructive */
  --border: 49 100% 68%; /* yellow border */
  --input: 49 100% 68%; /* yellow input border */
  --ring: 43 100% 50%; /* orange ring */
  --menu-highlight: 49 75% 68%;
  --menu-highlight-foreground: 30 100% 15%;
}

[data-theme="mellowYellow"] .themed-card, .mellowYellow-theme .themed-card {
  box-shadow: 0 2px 4px rgba(93, 64, 55, 0.2);
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--primary) / 0.3);
}

/* The `link` variant is `text-primary`, and this theme's --primary is a vibrant
   yellow (49 100% 68%) sitting on a pale yellow --background (60 100% 95%) —
   1.28:1, effectively invisible. --accent is no better (1.72:1), so --foreground
   is the only readable token this theme has. Matched on the bare attribute, not
   `button[data-variant]`: two of the link-variant call sites use `asChild`, so
   the attribute lands on an <a>, not a <button>. */
[data-theme="mellowYellow"] [data-variant="link"],
.mellowYellow-theme [data-variant="link"] {
  color: hsl(var(--foreground)) !important;
}

[data-theme="mellowYellow"] [data-variant="link"] svg,
.mellowYellow-theme [data-variant="link"] svg {
  color: hsl(var(--foreground)) !important;
  stroke: hsl(var(--foreground)) !important;
}

/* Ensure text is black in Mellow Yellow theme */
[data-theme="mellowYellow"] p, 
[data-theme="mellowYellow"] h1, 
[data-theme="mellowYellow"] h2, 
[data-theme="mellowYellow"] h3, 
[data-theme="mellowYellow"] h4, 
[data-theme="mellowYellow"] h5, 
[data-theme="mellowYellow"] h6, 
[data-theme="mellowYellow"] span, 
[data-theme="mellowYellow"] div, 
[data-theme="mellowYellow"] label, 
[data-theme="mellowYellow"] li, 
.mellowYellow-theme p, 
.mellowYellow-theme h1, 
.mellowYellow-theme h2, 
.mellowYellow-theme h3, 
.mellowYellow-theme h4, 
.mellowYellow-theme h5, 
.mellowYellow-theme h6, 
.mellowYellow-theme span, 
.mellowYellow-theme div, 
.mellowYellow-theme label, 
.mellowYellow-theme li {
  color: black !important;
}

/* Make all icons black in Mellow Yellow theme except for the theme icon */
[data-theme="mellowYellow"] svg:not(.text-\[#FFC107\]), 
.mellowYellow-theme svg:not(.text-\[#FFC107\]) {
  color: black !important;
}

/* The "Your Pace" span this styled was removed with the v2 hero headline
   (Phase 2, docs/LANDING_PAGE_V2_PLAN.md); `.your-pace-text` no longer exists
   anywhere in src/. */

/* Keep hero section text white in mellow yellow theme (landing page) */
[data-theme="mellowYellow"] .relative.bg-cover h1,
[data-theme="mellowYellow"] .relative.bg-cover p,
.mellowYellow-theme .relative.bg-cover h1,
.mellowYellow-theme .relative.bg-cover p {
  color: white !important;
}

/* Purple Rain theme - refined HSL values for better shadcn UI compatibility */
.purpleRain-theme, [data-theme="purpleRain"] {
  --background: 270 100% 95%; /* pale purple background */
  --foreground: 270 100% 20%; /* dark purple text */
  --card: 270 50% 93%; /* lavender surface — noticeably tinted for readability */
  --card-foreground: 270 100% 20%; /* dark purple text */
  --popover: 270 50% 93%; /* lavender surface */
  --popover-foreground: 270 100% 20%; /* dark purple text */
  --primary: 270 100% 25%; /* deep purple primary */
  --primary-foreground: 0 0% 100%; /* white text on primary (navbar selected state) */
  --secondary: 270 100% 85%; /* lighter purple secondary */
  --secondary-foreground: 270 100% 20%; /* dark text on secondary */
  --muted: 270 50% 95%; /* very light purple muted */
  --muted-foreground: 270 30% 50%; /* medium purple muted text */
  --accent: 291 76% 42%; /* bright purple accent */
  --accent-foreground: 270 100% 98%; /* light text on accent */
  --destructive: 0 84% 60%;
  --destructive-foreground: 270 100% 98%; /* light text on destructive */
  --border: 270 100% 85%; /* light purple border */
  --input: 270 100% 85%; /* light purple input border */
  --ring: 291 76% 42%; /* bright purple ring */
  --menu-highlight: 270 55% 72%;
  --menu-highlight-foreground: 270 100% 18%;
}

/* Make Purple Rain theme icon white when highlighted/hovered */
button:hover .text-\[#9C27B0\],
.button:hover .text-\[#9C27B0\],
.theme-selector:hover .text-\[#9C27B0\],
.theme-button:hover .text-\[#9C27B0\],
.active .text-\[#9C27B0\],
.selected .text-\[#9C27B0\] {
  color: white !important;
}

/* Additional selectors for Purple Rain icon */
button:hover svg[data-theme-value="purpleRain"],
.button:hover svg[data-theme-value="purpleRain"],
button:hover .purpleRain-icon,
.button:hover .purpleRain-icon,
.theme-selector:hover .purpleRain-icon,
.theme-button:hover .purpleRain-icon,
button:hover [data-theme-value="purpleRain"] svg,
button.active svg[data-theme-value="purpleRain"],
.active .purpleRain-icon,
.selected .purpleRain-icon,
button:hover svg.text-purple-600,
button:hover svg.text-purple-700,
button:hover svg.text-purple-800,
button:hover svg.purple-theme-icon,
[role="menuitem"]:hover svg[data-value="purpleRain"],
[role="option"]:hover svg[data-value="purpleRain"],
.theme-item:hover svg[data-theme="purpleRain"],
svg[data-theme="purpleRain"].active,
svg[data-theme="purpleRain"].selected {
  color: white !important;
  fill: white !important;
  stroke: white !important;
}

[data-theme="purpleRain"] .themed-card, .purpleRain-theme .themed-card {
  box-shadow: 0 2px 4px rgba(74, 20, 140, 0.2);
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--primary) / 0.3);
}

/* Blue Sky theme - refined HSL values for better shadcn UI compatibility */
.blueSky-theme, [data-theme="blueSky"] {
  --background: 200 100% 95%; /* pale blue background */
  --foreground: 200 100% 20%; /* dark blue text */
  --card: 200 50% 93%; /* soft sky surface — noticeably tinted for readability */
  --card-foreground: 200 100% 20%; /* dark blue text */
  --popover: 200 50% 93%; /* soft sky surface */
  --popover-foreground: 200 100% 20%; /* dark blue text */
  --primary: 200 100% 50%; /* bright blue primary */
  --primary-foreground: 200 100% 98%; /* light text on primary */
  --secondary: 200 100% 85%; /* lighter blue secondary */
  --secondary-foreground: 200 100% 20%; /* dark text on secondary */
  --muted: 200 50% 96%; /* very light blue muted */
  --muted-foreground: 200 30% 50%; /* medium blue muted text */
  --accent: 212 100% 53%; /* bright blue accent */
  /* Dark blue on accent hover/focus (outline, ghost, menus) — not white */
  --accent-foreground: 200 100% 18%;
  --destructive: 0 100% 65%;
  --destructive-foreground: 200 100% 98%; /* light text on destructive */
  --border: 200 100% 85%; /* light blue border */
  --input: 200 100% 85%; /* light blue input border */
  --ring: 212 100% 53%; /* bright blue ring */
  --menu-highlight: 200 55% 72%;
  --menu-highlight-foreground: 200 100% 18%;
}

[data-theme="blueSky"] .themed-card, .blueSky-theme .themed-card {
  box-shadow: 0 2px 4px rgba(13, 71, 161, 0.2);
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--primary) / 0.3);
}

/* Typography utility classes */
h1, .h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  margin-bottom: var(--spacing-2);
  font-weight: 700;
}

h2, .h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  margin-bottom: var(--spacing-1);
  font-weight: 600;
}

h3, .h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  margin-bottom: var(--spacing-1);
  font-weight: 600;
}

h4, .h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  margin-bottom: var(--spacing-1);
  font-weight: 600;
}

h5, .h5 {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  margin-bottom: var(--spacing-1);
  font-weight: 600;
}

p, .body-text {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  margin-bottom: var(--spacing-2);
}

.small-text {
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
}

.xs-text {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-body);
}

/* Text-specific spacing (won't affect buttons or icons) */
.text-mb-1 {
  margin-bottom: var(--spacing-1);
}

.text-mb-2 {
  margin-bottom: var(--spacing-2);
}

.text-mb-3 {
  margin-bottom: var(--spacing-3);
}

/* Tailwind utility classes for typography with proper spacing */
.text-h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  margin-bottom: var(--spacing-2);
  font-weight: 700;
}

.text-h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  margin-bottom: var(--spacing-1);
  font-weight: 600;
}

.text-h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  margin-bottom: var(--spacing-1);
  font-weight: 600;
}

.text-h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  margin-bottom: var(--spacing-1);
  font-weight: 600;
}

.text-h5 {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  margin-bottom: var(--spacing-1);
  font-weight: 600;
}

.text-body {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  margin-bottom: var(--spacing-2);
}

/* Ensure card content has proper spacing to prevent overlap */
.card-content {
  padding: var(--spacing-2);
}

.card-content > *:last-child {
  margin-bottom: 0;
}

.card-title {
  margin-bottom: var(--spacing-1);
}

.card-description {
  margin-bottom: var(--spacing-2);
} 

/* Document and Slideshow Theme Styles */

/* ========================================== */
/* UNIVERSAL DOCUMENT/SLIDESHOW STYLES */
/* ========================================== */

/* Base document container styles */
.document-container,
.slideshow-container {
  background-color: var(--document-bg);
  color: var(--document-text);
  border: 1px solid var(--document-border);
  border-radius: var(--radius);
  transition: all 0.3s ease;
}

/* Document content area */
.document-content,
.slideshow-content {
  background-color: var(--document-card-bg);
  color: var(--document-card-text);
  padding: var(--spacing-4);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Document text elements */
.document-content h1,
.document-content h2,
.document-content h3,
.document-content h4,
.document-content h5,
.document-content h6,
.slideshow-content h1,
.slideshow-content h2,
.slideshow-content h3,
.slideshow-content h4,
.slideshow-content h5,
.slideshow-content h6 {
  color: var(--document-text);
  margin-bottom: var(--spacing-2);
}

.document-content p,
.document-content span,
.document-content div,
.slideshow-content p,
.slideshow-content span,
.slideshow-content div {
  color: var(--document-text);
  line-height: var(--line-height-body);
}

/* Document links */
.document-content a,
.slideshow-content a {
  color: var(--document-primary);
  text-decoration: underline;
}

.document-content a:hover,
.slideshow-content a:hover {
  color: var(--document-accent);
}

/* Document code blocks */
.document-content pre,
.document-content code,
.slideshow-content pre,
.slideshow-content code {
  background-color: var(--document-muted);
  color: var(--document-text);
  border: 1px solid var(--document-border);
  border-radius: calc(var(--radius) / 2);
  padding: var(--spacing-2);
  font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace;
}

/* Document tables */
.document-content table,
.slideshow-content table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--spacing-3) 0;
}

.document-content th,
.document-content td,
.slideshow-content th,
.slideshow-content td {
  border: 1px solid var(--document-border);
  padding: var(--spacing-2);
  text-align: left;
}

.document-content th,
.slideshow-content th {
  background-color: var(--document-muted);
  font-weight: 600;
  color: var(--document-text);
}

/* Document lists */
.document-content ul,
.document-content ol,
.slideshow-content ul,
.slideshow-content ol {
  color: var(--document-text);
  margin: var(--spacing-2) 0;
  padding-left: var(--spacing-4);
}

.document-content li,
.slideshow-content li {
  color: var(--document-text);
  margin-bottom: var(--spacing-1);
}

/* Document blockquotes */
.document-content blockquote,
.slideshow-content blockquote {
  border-left: 4px solid var(--document-primary);
  background-color: var(--document-muted);
  padding: var(--spacing-3);
  margin: var(--spacing-3) 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ========================================== */
/* THEME-SPECIFIC DOCUMENT/SLIDESHOW STYLES */
/* ========================================== */

/* Light theme documents */
[data-theme="light"] .document-container,
[data-theme="light"] .slideshow-container {
  --document-bg: #f7f7f7;
  --document-text: #000000;
  --document-border: #e5e7eb;
  --document-primary: #000000;
  --document-secondary: #6b7280;
  --document-muted: #f3f4f6;
  --document-muted-text: #6b7280;
  --document-card-bg: #f7f7f7;
  --document-card-text: #000000;
  --document-accent: #3b82f6;
  --document-accent-text: #f7f7f7;
}

/* Dark theme documents */
[data-theme="dark"] .document-container,
[data-theme="dark"] .slideshow-container {
  --document-bg: #1f2937;
  --document-text: #f9fafb;
  --document-border: #374151;
  --document-primary: #60a5fa;
  --document-secondary: #9ca3af;
  --document-muted: #374151;
  --document-muted-text: #9ca3af;
  --document-card-bg: #111827;
  --document-card-text: #f9fafb;
  --document-accent: #3b82f6;
  --document-accent-text: #f9fafb;
}

/* Mellow Yellow theme documents */
[data-theme="mellowYellow"] .document-container,
[data-theme="mellowYellow"] .slideshow-container {
  --document-bg: #fffde7;
  --document-text: #000000;
  --document-border: #ffc107;
  --document-primary: #ffc107;
  --document-secondary: #ff9800;
  --document-muted: #fff8e1;
  --document-muted-text: #795548;
  --document-card-bg: #fff9c4;
  --document-card-text: #000000;
  --document-accent: #ff9800;
  --document-accent-text: #000000;
}

/* Purple Rain theme documents */
[data-theme="purpleRain"] .document-container,
[data-theme="purpleRain"] .slideshow-container {
  --document-bg: #f3e5f5;
  --document-text: #4a148c;
  --document-border: #9c27b0;
  --document-primary: #9c27b0;
  --document-secondary: #7b1fa2;
  --document-muted: #e1bee7;
  --document-muted-text: #6a1b9a;
  --document-card-bg: #f8f0f8;
  --document-card-text: #4a148c;
  --document-accent: #7b1fa2;
  --document-accent-text: #f8f0f8;
}

/* Blue Sky theme documents */
[data-theme="blueSky"] .document-container,
[data-theme="blueSky"] .slideshow-container {
  --document-bg: #e3f2fd;
  --document-text: #0d47a1;
  --document-border: #2196f3;
  --document-primary: #2196f3;
  --document-secondary: #03a9f4;
  --document-muted: #bbdefb;
  --document-muted-text: #1976d2;
  --document-card-bg: #eaf3ff;
  --document-card-text: #0d47a1;
  --document-accent: #1976d2;
  --document-accent-text: #e3f2fd;
}

/* ========================================== */
/* SLIDESHOW SPECIFIC STYLES */
/* ========================================== */

/* Slide container */
.slide-container {
  background: linear-gradient(135deg, var(--document-card-bg) 0%, var(--document-muted) 100%);
  border: 1px solid var(--document-border);
  border-radius: var(--radius);
  padding: var(--spacing-4);
  margin: var(--spacing-3) 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.slide-container:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* Slide title */
.slide-title {
  color: var(--document-primary);
  font-size: var(--font-size-h2);
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--spacing-3);
  border-bottom: 2px solid var(--document-primary);
  padding-bottom: var(--spacing-2);
}

/* Slide content */
.slide-content {
  color: var(--document-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  text-align: center;
}

/* Slide navigation */
.slide-navigation {
  background-color: var(--document-muted);
  border: 1px solid var(--document-border);
  border-radius: var(--radius);
  padding: var(--spacing-3);
  margin: var(--spacing-3) 0;
}

/* Slide thumbnails */
.slide-thumbnail {
  background: linear-gradient(135deg, var(--document-card-bg) 0%, var(--document-muted) 100%);
  border: 1px solid var(--document-border);
  border-radius: calc(var(--radius) / 2);
  padding: var(--spacing-2);
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.slide-thumbnail:hover {
  border-color: var(--document-primary);
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.slide-thumbnail.active {
  border-color: var(--document-primary);
  border-width: 2px;
  box-shadow: 0 4px 12px var(--document-primary);
  transform: scale(1.1);
}

/* ========================================== */
/* EDITOR SPECIFIC STYLES */
/* ========================================== */

/* Tiptap editor container */
.tiptap-editor {
  background-color: var(--document-card-bg);
  border: 1px solid var(--document-border);
  border-radius: var(--radius);
  color: var(--document-text);
}

/* Tiptap toolbar */
.tiptap-toolbar {
  background-color: var(--document-muted);
  border-bottom: 1px solid var(--document-border);
  padding: var(--spacing-2);
}

/* Tiptap content area */
.tiptap-content {
  background-color: var(--document-card-bg);
  color: var(--document-text);
  padding: var(--spacing-3);
  min-height: 200px;
}

/* Tiptap placeholder */
.tiptap-placeholder {
  color: var(--document-muted-text);
}

/* ========================================== */
/* RESPONSIVE DESIGN */
/* ========================================== */

@media (max-width: 768px) {
  .document-container,
  .slideshow-container {
    padding: var(--spacing-2);
  }
  
  .document-content,
  .slideshow-content {
    padding: var(--spacing-2);
  }
  
  .slide-container {
    padding: var(--spacing-2);
    margin: var(--spacing-2) 0;
  }
  
  .slide-title {
    font-size: var(--font-size-h3);
  }
  
  .slide-thumbnail {
    min-width: 100px;
    height: 60px;
    padding: var(--spacing-1);
  }
}

/* ========================================== */
/* ANIMATIONS AND TRANSITIONS */
/* ========================================== */

.document-container,
.slideshow-container,
.slide-container,
.slide-thumbnail {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.document-container:hover,
.slideshow-container:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ========================================== */
/* ACCESSIBILITY */
/* ========================================== */

/* Focus states for keyboard navigation */
.document-container:focus,
.slideshow-container:focus,
.slide-container:focus,
.slide-thumbnail:focus,
button:focus,
.button:focus,
.btn:focus,
input:focus,
select:focus,
textarea:focus,
a:focus {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .document-container,
  .slideshow-container {
    border-width: 2px;
  }
  
  .slide-container {
    border-width: 2px;
  }
  
  .slide-thumbnail {
    border-width: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .document-container,
  .slideshow-container,
  .slide-container,
  .slide-thumbnail,
  button,
  .button,
  .btn,
  .card,
  .dialog-content,
  .modal-content {
    transition: none;
  }
  
  .slide-thumbnail:hover,
  button:active,
  .button:active,
  .btn:active {
    transform: none;
  }
  
  html * {
    transition: none !important;
  }
} 

/* Dialog positioning and scrolling fixes - Updated for new DialogBody structure */
.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The new DialogContent uses flexbox layout internally */
.dialog-content {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: 90vw; /* Consider adding a max-width for larger screens */
  max-width: 1000px;
  height: 80vh;
  min-height: 400px;
  max-height: 80vh;
  overflow-y: auto; 
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Override dialog-content positioning for native dialogs */
dialog .dialog-content {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
}

/* DialogBody handles scrolling internally - these styles are now handled by the component */
/* Custom scrollbar styles for DialogBody content */
[data-radix-dialog-content] .overflow-y-auto::-webkit-scrollbar {
  width: 6px;
}

[data-radix-dialog-content] .overflow-y-auto::-webkit-scrollbar-track {
  background: transparent;
}

[data-radix-dialog-content] .overflow-y-auto::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.3);
  border-radius: 3px;
}

[data-radix-dialog-content] .overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

/* DialogFooter is now positioned by flexbox, no need for sticky positioning */
.dialog-footer {
  background: hsl(var(--popover));
  border-top: 1px solid hsl(var(--border));
  padding-top: 1rem;
  margin-top: 1rem;
}

/* Floating feedback widget - ensure it stays on top */
.feedback-floating-button {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 99999 !important;
  transform: none !important;
  will-change: auto !important;
}

/* Ensure floating button is not affected by any parent transforms */
.feedback-floating-button * {
  transform: none !important;
}

/* Mobile-specific fixes */
@media (max-width: 640px) {
  .dialog-content {
    width: 95vw;
    max-height: 90vh;
    margin: 1rem;
  }
} 
/* ---------------------------------------------------------------------------
   Marketing header while it is transparent over the hero artwork.

   The landing hero runs up behind the header, and that artwork is dark in every
   theme — so the controls sitting on it are pinned to a light-on-dark treatment
   rather than following the theme.

   This has to live here, with !important and a deliberately heavier selector,
   because the per-theme blocks above set button colour with !important and
   utility classes on the buttons cannot outrank them.
   `html[data-theme] header[data-header-transparent] …` is 0,2,3, which clears
   the 0,2,1–0,2,2 of those blocks.

   Originally written to beat `[data-theme="light"] button[class*="outline"]`,
   which matched EVERY button — `focus-visible:outline-none` contains the
   substring "outline" — and so rendered the header CTAs black on the artwork.
   Those selectors now key off `data-variant` instead, but this block is still
   required: it is what makes the controls light-on-dark in *every* theme,
   not just light.
--------------------------------------------------------------------------- */
html[data-theme] header[data-header-transparent="true"] button,
html[data-theme] header[data-header-transparent="true"] a,
html[data-theme] header[data-header-transparent="true"] svg {
  color: #ffffff !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

/* Labels are their own elements — the logo is a `text-foreground` span inside
   its button, so colouring the button alone leaves it dark on the artwork. */
html[data-theme] header[data-header-transparent="true"] button span {
  color: #ffffff !important;
}

html[data-theme] header[data-header-transparent="true"] button:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

/* The one dominant CTA keeps a solid surface so it still reads as a button. */
html[data-theme] header[data-header-transparent="true"] button[data-header-cta="primary"] {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #ffffff !important;
}

html[data-theme] header[data-header-transparent="true"] button[data-header-cta="primary"]:hover {
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: #0f172a !important;
}

html[data-theme] header[data-header-transparent="true"] button[data-header-cta="primary"] svg,
html[data-theme] header[data-header-transparent="true"] button[data-header-cta="primary"] span {
  color: #0f172a !important;
}

/* Enhanced Validation Styles - shadcn/ui Compatible */

/* Form Field Container */
.validation-field > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(8px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(8px * var(--tw-space-y-reverse));
}

/* Label Styles - using shadcn/ui label patterns */
.validation-label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  line-height: 1;
}
.peer:disabled ~ .validation-label {
  cursor: not-allowed;
  opacity: 0.7;
}

.validation-label.required::after {
  content: ' *';
  color: hsl(var(--destructive));
}

/* Input Field Styles - compatible with shadcn/ui Input */
.validation-input {
  display: flex;
  height: 40px;
  width: 100%;
  border-radius: calc(var(--radius) - 2px);
  border-width: 1px;
  border-color: hsl(var(--input));
  background-color: hsl(var(--background));
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-ring-offset-color: hsl(var(--background));
}
.validation-input::file-selector-button {
  border-width: 0px;
  background-color: transparent;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}
.validation-input::placeholder {
  color: hsl(var(--muted-foreground));
}
.validation-input:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: hsl(var(--ring));
  --tw-ring-offset-width: 2px;
}
.validation-input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Validation State Classes */
.validation-input.error {
  border-color: hsl(var(--destructive));
}
.validation-input.error:focus-visible {
  --tw-ring-color: hsl(var(--destructive));
}

.validation-input.warning {
  --tw-border-opacity: 1;
  border-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
}

.validation-input.warning:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(234 179 8 / var(--tw-ring-opacity, 1));
}

.validation-input.success {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}

.validation-input.success:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1));
}

/* Error Message Styles - using shadcn/ui error patterns */
.validation-error {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: hsl(var(--destructive));
}

.validation-warning {
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}

.validation-warning:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}

.validation-success {
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.validation-success:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}

/* Help Text */
.validation-help {
  font-size: 0.75rem;
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
}

/* Form Container */
.validated-form > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(24px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(24px * var(--tw-space-y-reverse));
}

.validated-form .form-section > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(16px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(16px * var(--tw-space-y-reverse));
}

.validated-form .form-row {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 16px;
}

@media (min-width: 768px) {
  .validated-form .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Field Group Styles */
.validation-field-group > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(16px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(16px * var(--tw-space-y-reverse));
}
.validation-field-group {
  border-radius: var(--radius);
  border-width: 1px;
  border-color: hsl(var(--border));
  background-color: hsl(var(--card));
  padding: 16px;
}

.validation-field-group .group-title {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: hsl(var(--card-foreground));
}

.validation-field-group .group-description {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: hsl(var(--muted-foreground));
}

/* Real-time Validation Indicators */
.validation-indicator {
  position: absolute;
  right: 12px;
  top: 50%;
  height: 16px;
  width: 16px;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.validation-indicator.loading {
  animation: spin 1s linear infinite;
  color: hsl(var(--muted-foreground));
}

.validation-indicator.error {
  color: hsl(var(--destructive));
}

.validation-indicator.warning {
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}

.validation-indicator.success {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}

/* Form Button Styles - using shadcn/ui button patterns */
.validation-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-ring-offset-color: hsl(var(--background));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.validation-submit:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: hsl(var(--ring));
  --tw-ring-offset-width: 2px;
}
.validation-submit:disabled {
  pointer-events: none;
  opacity: 0.5;
}

.validation-submit.primary {
  height: 40px;
  background-color: hsl(var(--primary));
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  color: hsl(var(--primary-foreground));
}

.validation-submit.primary:hover {
  background-color: hsl(var(--primary) / 0.9);
}

.validation-submit.secondary {
  height: 40px;
  background-color: hsl(var(--secondary));
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  color: hsl(var(--secondary-foreground));
}

.validation-submit.secondary:hover {
  background-color: hsl(var(--secondary) / 0.8);
}

/* Responsive Design */
@media (max-width: 640px) {
  .validated-form .form-row {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  .validation-field-group {
    padding: 12px;
  }
}

/* Dark Mode Support - handled by shadcn/ui CSS variables */
@media (prefers-color-scheme: dark) {
  /* Additional dark mode adjustments if needed */
  .validation-field-group {
    border-color: hsl(var(--border));
    background-color: hsl(var(--card));
  }
}

/* Animation Classes */
.validation-fade-in {
  transition-duration: 300ms;
  animation-name: enter;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
  --tw-enter-opacity: 0;
  animation-duration: 300ms;
}

.validation-fade-out {
  transition-duration: 300ms;
  animation-name: exit;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
  --tw-exit-opacity: 0;
  animation-duration: 300ms;
}

.validation-slide-down {
  transition-duration: 300ms;
  animation-name: enter;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
  --tw-enter-translate-y: -8px;
  animation-duration: 300ms;
}

/* Accessibility Enhancements */
.validation-error[role="alert"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.validation-error.visible {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Focus Management */
.validation-input:focus + .validation-indicator {
  opacity: 1;
}

.validation-input:not(:focus) + .validation-indicator {
  opacity: 0.7;
}

/* Loading States */
.validation-loading {
  pointer-events: none;
  opacity: 0.5;
}

.validation-loading::after {
  content: '';
  position: absolute;
  inset: 0px;
  border-radius: calc(var(--radius) - 2px);
  background-color: hsl(var(--background) / 0.5);
} 
/* Responsive Video Meeting Styles */

/* Container queries for video meeting components */
@container (max-width: 640px) {
  .video-meeting-container {
    --video-gap: 0.5rem;
    --panel-width: 100%;
    --control-size: 2.5rem;
  }
}

@container (min-width: 641px) and (max-width: 1023px) {
  .video-meeting-container {
    --video-gap: 1rem;
    --panel-width: 50%;
    --control-size: 2.75rem;
  }
}

@container (min-width: 1024px) {
  .video-meeting-container {
    --video-gap: 1.5rem;
    --panel-width: 33.333%;
    --control-size: 3rem;
  }
}

/* Aspect ratio preservation utilities */
.aspect-video {
  aspect-ratio: 16 / 9;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-portrait {
  aspect-ratio: 3 / 4;
}

.aspect-landscape {
  aspect-ratio: 4 / 3;
}

/* Smooth transition classes (300ms per design system) */
.transition-layout {
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-fast {
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-slow {
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reduced motion support per design system accessibility rules */
@media (prefers-reduced-motion: reduce) {
  .transition-layout,
  .transition-fast,
  .transition-slow {
    transition: none;
  }
  
  .animate-spin,
  .animate-pulse,
  .animate-bounce {
    animation: none;
  }
}

/* Breakpoint-specific spacing utilities adhering to 8-point grid */
.spacing-xs { padding: 0.25rem; } /* 4px */
.spacing-sm { padding: 0.5rem; }  /* 8px */
.spacing-md { padding: 1rem; }    /* 16px */
.spacing-lg { padding: 1.5rem; }  /* 24px */
.spacing-xl { padding: 2rem; }    /* 32px */
.spacing-2xl { padding: 3rem; }   /* 48px */

.gap-xs { gap: 0.25rem; } /* 4px */
.gap-sm { gap: 0.5rem; }  /* 8px */
.gap-md { gap: 1rem; }    /* 16px */
.gap-lg { gap: 1.5rem; }  /* 24px */
.gap-xl { gap: 2rem; }    /* 32px */
.gap-2xl { gap: 3rem; }   /* 48px */

/* Responsive spacing utilities */
@media (max-width: 640px) {
  .responsive-padding { padding: 0.5rem; }
  .responsive-gap { gap: 0.5rem; }
  .responsive-margin { margin: 0.5rem; }
}

@media (min-width: 641px) and (max-width: 1023px) {
  .responsive-padding { padding: 1rem; }
  .responsive-gap { gap: 1rem; }
  .responsive-margin { margin: 1rem; }
}

@media (min-width: 1024px) {
  .responsive-padding { padding: 1.5rem; }
  .responsive-gap { gap: 1.5rem; }
  .responsive-margin { margin: 1.5rem; }
}

/* Touch target minimums (44x44px) */
.touch-target {
  min-width: 2.75rem;  /* 44px */
  min-height: 2.75rem; /* 44px */
}

.touch-target-sm {
  min-width: 2.5rem;   /* 40px */
  min-height: 2.5rem;  /* 40px */
}

/* Focus states: 2px solid outline with 2px offset */
.focus-ring {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.focus-ring-inset {
  outline: 2px solid hsl(var(--ring));
  outline-offset: -2px;
}

/* Video meeting specific responsive utilities */
.video-grid-mobile {
  grid-template-columns: 1fr;
}

.video-grid-tablet {
  grid-template-columns: repeat(2, 1fr);
}

.video-grid-desktop {
  grid-template-columns: repeat(3, 1fr);
}

.video-grid-large {
  grid-template-columns: repeat(4, 1fr);
}

/* Panel responsive behavior */
.panel-mobile {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: hsl(var(--background));
  transform: translateY(100%);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.panel-mobile.open {
  transform: translateY(0);
}

.panel-tablet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  z-index: 40;
  background: hsl(var(--background));
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.panel-tablet.open {
  transform: translateX(0);
}

.panel-desktop {
  position: relative;
  width: 33.333%;
  flex-shrink: 0;
}

/* Video overlay responsive positioning */
.video-overlay-mobile {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 8rem;
  height: 5.5rem;
  z-index: 60;
}

.video-overlay-tablet {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 12rem;
  height: 8rem;
  z-index: 60;
}

.video-overlay-desktop {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 18rem;
  height: 12rem;
  z-index: 60;
}

/* Whiteboard responsive adjustments */
.whiteboard-mobile {
  min-height: 300px;
}

.whiteboard-tablet {
  min-height: 400px;
}

.whiteboard-desktop {
  min-height: 500px;
}

/* Lesson display responsive adjustments */
.lesson-content-mobile {
  max-height: 60vh;
}

.lesson-content-tablet {
  max-height: 70vh;
}

.lesson-content-desktop {
  max-height: 80vh;
}

/* PDF viewer responsive adjustments */
.pdf-viewer-mobile {
  min-height: 300px;
}

.pdf-viewer-tablet {
  min-height: 400px;
}

.pdf-viewer-desktop {
  min-height: 500px;
}

/* Control button responsive sizing */
.control-mobile {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
}

.control-tablet {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.625rem;
}

.control-desktop {
  width: 3rem;
  height: 3rem;
  padding: 0.75rem;
}

/* Typography responsive scaling */
.text-responsive-xs {
  font-size: 0.75rem; /* 12px */
  line-height: 1rem;
}

.text-responsive-sm {
  font-size: 0.875rem; /* 14px */
  line-height: 1.25rem;
}

.text-responsive-base {
  font-size: 1rem; /* 16px */
  line-height: 1.5rem;
}

.text-responsive-lg {
  font-size: 1.125rem; /* 18px */
  line-height: 1.75rem;
}

.text-responsive-xl {
  font-size: 1.25rem; /* 20px */
  line-height: 1.75rem;
}

.text-responsive-2xl {
  font-size: 1.5rem; /* 24px */
  line-height: 2rem;
}

.text-responsive-3xl {
  font-size: 1.875rem; /* 30px */
  line-height: 2.25rem;
}

.text-responsive-4xl {
  font-size: 2.25rem; /* 36px */
  line-height: 2.5rem;
}

/* Mobile-specific adjustments */
@media (max-width: 640px) {
  .text-responsive-xs { font-size: 0.625rem; }
  .text-responsive-sm { font-size: 0.75rem; }
  .text-responsive-base { font-size: 0.875rem; }
  .text-responsive-lg { font-size: 1rem; }
  .text-responsive-xl { font-size: 1.125rem; }
  .text-responsive-2xl { font-size: 1.25rem; }
  .text-responsive-3xl { font-size: 1.5rem; }
  .text-responsive-4xl { font-size: 1.875rem; }
}

/* Tablet-specific adjustments */
@media (min-width: 641px) and (max-width: 1023px) {
  .text-responsive-xs { font-size: 0.6875rem; }
  .text-responsive-sm { font-size: 0.8125rem; }
  .text-responsive-base { font-size: 0.9375rem; }
  .text-responsive-lg { font-size: 1.0625rem; }
  .text-responsive-xl { font-size: 1.1875rem; }
  .text-responsive-2xl { font-size: 1.375rem; }
  .text-responsive-3xl { font-size: 1.6875rem; }
  .text-responsive-4xl { font-size: 2.0625rem; }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .video-meeting-container {
    --border-width: 2px;
    --ring-width: 3px;
  }
  
  .focus-ring {
    outline-width: 3px;
  }
}

/* Print styles */
@media print {
  .video-meeting-container {
    display: none;
  }
  
  .video-controls {
    display: none;
  }
  
  .video-overlay-mobile,
  .video-overlay-tablet,
  .video-overlay-desktop {
    display: none;
  }
}

/* Global Responsive Utilities */

/* Container queries */
@supports (container-type: inline-size) {
  .container-responsive {
    container-type: inline-size;
  }
}

/* Aspect ratio utilities */
.aspect-card {
  aspect-ratio: 1 / 1;
}

.aspect-wide-card {
  aspect-ratio: 16 / 9;
}

/* Touch target minimum */
.touch-target {
  min-width: 44px;
  min-height: 44px;
}

/* Responsive text truncation */
.truncate-mobile {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 640px) {
  .truncate-mobile {
    text-overflow: clip;
  }
}

/* Smooth transitions */
.transition-layout {
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .transition-layout,
  .theme-transition {
    transition: none;
  }
}

/* API Status component styles */
.api-status-container {
  margin: 1rem 0;
}

.api-status {
  padding: 1rem;
  border-radius: 0.5rem;
}

.api-status-healthy {
  background-color: #f0fff4;
  border: 1px solid #9ae6b4;
}

.api-status-error {
  background-color: #fff5f5;
  border: 1px solid #feb2b2;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.api-status-healthy .status-indicator {
  margin-bottom: 0;
}

.api-status-error .status-indicator {
  margin-bottom: 1rem;
}

.status-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.status-badge-success {
  background-color: #38a169;
  color: white;
}

.status-badge-error {
  background-color: #e53e3e;
  color: white;
}

.status-message {
  font-size: 0.875rem;
}

.actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.action-button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.action-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.action-button-diagnostic {
  background-color: #4299e1;
  color: white;
}

.action-button-refresh {
  background-color: #667eea;
  color: white;
}

.action-button-details {
  background-color: #a0aec0;
  color: white;
}

.details-panel {
  margin-top: 1rem;
  padding: 1rem;
  background-color: #f7fafc;
  border-radius: 0.25rem;
  overflow: auto;
}

.details-panel pre {
  white-space: pre-wrap;
  font-size: 0.75rem;
} 
/* Document Viewer Styles
   Zero-dependency document viewer styling that works with all themes
*/

/* Container styles */
.document-viewer-container {
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.5;
  background: transparent;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.document-viewer-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  flex: 1;
}

/* Toolbar styles */
.document-viewer-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background-color: var(--toolbar-bg, #f5f5f5);
  border-bottom: 1px solid var(--border-color, #ddd);
  flex-wrap: wrap;
  gap: 8px;
}

.document-viewer-toolbar button {
  background-color: var(--button-bg, #ffffff);
  border: 1px solid var(--button-border, #ccc);
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 14px;
  margin: 0 2px;
}

.document-viewer-toolbar button:hover {
  background-color: var(--button-hover-bg, #f0f0f0);
}

.zoom-controls, .pagination-controls {
  display: flex;
  align-items: center;
}

/* Page styles */
.page {
  background-color: var(--page-bg, #ffffff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  margin: 20px auto;
  position: relative;
  transition: transform 0.2s ease-in-out;
  transform-origin: top center;
  border-radius: 2px;
  max-width: calc(100% - 40px);
  width: fit-content;
  min-height: 400px;
  overflow: visible;
  box-sizing: border-box;
  display: block;
}

/* Common document styles */
.pdf-page {
  padding: 40px;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
  background-color: var(--page-bg, #ffffff);
  margin: 20px auto;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* PDF specific styles */
.pdf-document {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  box-sizing: border-box;
}

.pdf-content {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  box-sizing: border-box;
}

/* Ensure PDF canvas elements have transparent backgrounds */
.pdf-document canvas,
.pdf-page canvas,
canvas[data-pdf-page] {
  background-color: transparent !important;
}

/* PDF viewer containers should allow theme background to show through */
.document-viewer-container[data-document-type="pdf"] {
  background-color: transparent;
}

.pdf-canvas-container {
  background-color: transparent;
}

/* TXT specific styles */
.txt-page {
  padding: 20px;
}

.plain-text {
  font-family: monospace;
  white-space: pre-wrap;
  margin: 0;
  padding: 0;
}

.code-container {
  font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace;
  overflow: auto;
}

/* Code syntax highlighting */
.language-javascript .keyword,
.language-python .keyword,
.language-json .keyword {
  color: var(--keyword-color, #0000ff);
}

.language-javascript .string,
.language-python .string,
.language-json .string {
  color: var(--string-color, #a31515);
}

.language-javascript .number,
.language-python .number,
.language-json .number {
  color: var(--number-color, #098658);
}

.language-javascript .comment,
.language-python .comment {
  color: var(--comment-color, #008000);
  font-style: italic;
}

.language-html .tag,
.language-xml .tag {
  color: var(--tag-color, #800000);
}

.language-html .attr-name,
.language-xml .attr-name {
  color: var(--attr-name-color, #ff0000);
}

.language-html .attr-value,
.language-xml .attr-value {
  color: var(--attr-value-color, #0000ff);
}

.language-css .selector {
  color: var(--selector-color, #800000);
}

.language-css .property {
  color: var(--property-color, #ff0000);
}

.language-css .value {
  color: var(--value-color, #0000ff);
}

.language-json .key {
  color: var(--key-color, #0451a5);
}

/* Error page styles */
.error-page {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  text-align: center;
}

.error-container {
  max-width: 500px;
}

.error-container h2 {
  color: var(--error-title-color, #d32f2f);
  margin-bottom: 16px;
}

.error-container p {
  margin: 8px 0;
}

/* Responsiveness */
@media (max-width: 768px) {
  .document-viewer-toolbar {
    flex-direction: column;
    align-items: center;
  }
  
  .zoom-controls, .pagination-controls {
    margin: 4px 0;
  }
  
  .pdf-page {
    padding: 20px;
  }
}

/* Theme variables */
:root {
  --toolbar-bg: #f5f5f5;
  --toolbar-border: #ddd;
  --toolbar-text: #555;
  --toolbar-button: #555;
  --button-bg: #f7f7f7;
  --button-border: #ccc;
  --button-hover-bg: #ececec;
  --button-hover-border: #999;
  --button-disabled-bg: #f5f5f5;
  --page-bg: #f7f7f7;
  --text-color: #000;
  --border-color: #ddd;
  --viewer-bg: #f5f5f5;
  --viewer-text: #333;
  --focus-color: #0066cc;
  --toolbar-separator: #ddd;
  --loading-text: #555;
  --error-text: #d32f2f;
}

/* Dark theme */
.dark-theme {
  --toolbar-bg: #404040;
  --toolbar-border: #555;
  --toolbar-text: #e0e0e0;
  --toolbar-button: #e0e0e0;
  --button-bg: #555;
  --button-border: #666;
  --button-hover-bg: #666;
  --button-hover-border: #777;
  --button-disabled-bg: #444;
  --page-bg: #404040;
  --text-color: #e0e0e0;
  --border-color: #555;
  --viewer-bg: #2d2d2d;
  --viewer-text: #e0e0e0;
  --focus-color: #4da6ff;
  --toolbar-separator: #555;
  --loading-text: #ccc;
  --error-text: #ff6b6b;
}

/* Document viewer */
.document-viewer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--viewer-bg);
  color: var(--viewer-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Document content */
.document-content {
  flex: 1;
  overflow: auto;
  padding: 20px;
  background: var(--viewer-bg);
  position: relative;
  height: 100%;
  box-sizing: border-box;
}

/* Document toolbar */
.document-toolbar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background-color: var(--toolbar-bg);
  border-bottom: 1px solid var(--toolbar-border);
  z-index: 10;
  min-height: 48px;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar-button {
  background: var(--button-bg);
  border: 1px solid var(--button-border);
  border-radius: 4px;
  color: var(--toolbar-button);
  font-size: 14px;
  padding: 6px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  min-width: 32px;
  min-height: 32px;
}

.toolbar-button:hover:not(:disabled) {
  background-color: var(--button-hover-bg);
  border-color: var(--button-hover-border);
}

.toolbar-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--button-disabled-bg);
}

.toolbar-separator {
  height: 24px;
  width: 1px;
  background-color: var(--toolbar-separator);
  margin: 0 8px;
}

/* Page navigation */
.page-navigation {
  display: flex;
  align-items: center;
}

.page-count {
  margin: 0 8px;
  font-size: 14px;
  color: var(--toolbar-text);
}

/* Zoom controls */
.zoom-controls {
  display: flex;
  align-items: center;
}

.zoom-level {
  margin: 0 8px;
  font-size: 14px;
  color: var(--toolbar-text);
  min-width: 40px;
  text-align: center;
}

/* Pages and content */
.pdf-page {
  background-color: var(--page-bg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.page-content {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Text content */
.text-layer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  color: var(--text-color);
  font-family: sans-serif;
  overflow: hidden;
}

.text-layer > span {
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}

/* PDF specific styles */
.pdf-annotation {
  position: absolute;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.pdf-link {
  position: absolute;
  cursor: pointer;
}

/* TXT specific styles */
.txt-content {
  white-space: pre-wrap;
  font-family: monospace;
  padding: 20px;
  line-height: 1.5;
}

.txt-content.syntax-highlighting .keyword {
  color: var(--syntax-keyword, #07a);
}

.txt-content.syntax-highlighting .string {
  color: var(--syntax-string, #690);
}

.txt-content.syntax-highlighting .number {
  color: var(--syntax-number, #905);
}

.txt-content.syntax-highlighting .comment {
  color: var(--syntax-comment, #999);
  font-style: italic;
}

/* Loading and error states */
.document-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--loading-text);
}

.document-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--error-text);
  padding: 20px;
  text-align: center;
}

.error-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

/* Print styles */
@media print {
  .document-toolbar {
    display: none;
  }
  
  .document-viewer {
    height: auto;
    overflow: visible;
  }
  
  .pdf-page {
    break-inside: avoid;
    box-shadow: none;
    margin: 0;
    page-break-after: always;
  }
}

/* Ensure all document content fits within container */
.document-viewer-container,
.document-viewer,
.document-content {
  box-sizing: border-box;
}

.document-viewer-container img,
.document-viewer img,
.document-content img,
.document-viewer-container table,
.document-viewer table,
.document-content table {
  max-width: 100%;
  box-sizing: border-box;
}

/* Enhanced rules for content that might overflow */
.document-viewer-container img,
.document-viewer img,
.document-content img {
  height: auto;
  object-fit: contain;
}

.document-viewer-container table,
.document-viewer table,
.document-content table {
  table-layout: auto;
  word-wrap: break-word;
}

/* Ensure content containers are properly sized - only for direct children */
.document-viewer-wrapper,
.document-content {
  contain: layout size;
}

/* Prevent absolute positioned elements from breaking layout */
.page [style*="position: absolute"] {
  position: relative !important;
}

/* Scrollbar styling for webkit browsers */
.document-viewer-container,
.document-viewer-wrapper,
.document-content {
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.document-viewer-wrapper::-webkit-scrollbar,
.document-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.document-viewer-wrapper::-webkit-scrollbar-track,
.document-content::-webkit-scrollbar-track {
  background: transparent;
}

.document-viewer-wrapper::-webkit-scrollbar-thumb,
.document-content::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 4px;
}

.document-viewer-wrapper::-webkit-scrollbar-thumb:hover,
.document-content::-webkit-scrollbar-thumb:hover {
  background-color: var(--toolbar-text);
} 
/* Notes Overlay Layout Styles */
.notes-overlay {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  background: hsl(var(--background)) !important;
  width: 100% !important;
}

.notes-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--card));
}

.notes-main {
  display: flex !important;
  flex: 1 !important;
  overflow: hidden !important;
  width: 100% !important;
}

.notes-sidebar {
  width: 100% !important;
  max-width: 350px !important;
  min-width: 280px !important;
  border-right: 1px solid hsl(var(--border)) !important;
  background: hsl(var(--card)) !important;
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 1 !important;
}

.notes-editor {
  flex: 1 !important;
  padding: 1rem !important;
  background: hsl(var(--background)) !important;
  overflow-y: auto !important;
  width: 100% !important;
  min-width: 0 !important;
}

.notes-filters {
  padding: 1rem;
  border-bottom: 1px solid hsl(var(--border));
}

.notes-list {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
}

.tags-filter {
  margin-top: 1rem;
}

/* Add proper padding and max-width to the editor content */
.notes-editor .card {
  max-width: 100% !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Target the actual input elements more specifically */
.notes-editor input[type="text"],
.notes-editor textarea,
.notes-editor select {
  max-width: 100% !important;
  padding: 0.75rem !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.375rem !important;
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.notes-editor input[type="text"]:focus,
.notes-editor textarea:focus,
.notes-editor select:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

/* Target the TiptapEditor component */
.notes-editor .border.rounded-md {
  max-width: 100% !important;
  padding: 1rem !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.375rem !important;
  background-color: hsl(var(--background)) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Additional TiptapEditor styling */
.notes-editor .min-h-\[400px\] {
  min-height: 400px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Ensure proper spacing in the card content */
.notes-editor [data-radix-card-content] {
  padding: 1.5rem;
}

/* Add some breathing room to the form elements */
.notes-editor .space-y-4 > * + * {
  margin-top: 1rem;
}

/* Additional styling for better visual hierarchy */
.notes-editor .flex.gap-2 {
  gap: 0.5rem !important;
  width: 100% !important;
}

.notes-editor .flex.gap-2 input {
  flex: 1 !important;
  max-width: calc(100% - 140px) !important;
}

.notes-editor .flex.gap-2 select {
  min-width: 120px !important;
  max-width: 140px !important;
}

/* Override any conflicting styles */
.notes-overlay * {
  box-sizing: border-box !important;
}

/* Ensure the layout works on all screen sizes */
@media (max-width: 768px) {
  .notes-main {
    flex-direction: column !important;
  }
  
  .notes-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
    max-height: 40vh !important;
  }
  
  .notes-editor {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.75rem !important;
  }
}

/*
 * Minimal pdf.js text-layer styles (subset of pdfjs-dist/web/pdf_viewer.css).
 * Used by the selectable text overlay in PdfViewer when reference-library
 * PDF highlighting is enabled. Spans are positioned by pdf.js's TextLayer;
 * these rules make them invisible but selectable over the canvas.
 */
.textLayer {
  position: absolute;
  text-align: initial;
  inset: 0;
  overflow: hidden;
  opacity: 1;
  line-height: 1;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
       text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  caret-color: CanvasText;
  z-index: 0;
}

.textLayer :is(span, br) {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}

.textLayer span.markedContent {
  top: 0;
  height: 0;
}

.textLayer ::selection {
  background: rgb(0 0 255 / 0.25);
}

.textLayer br::selection {
  background: transparent;
}

.textLayer .endOfContent {
  display: block;
  position: absolute;
  inset: 100% 0 0;
  z-index: 0;
  cursor: default;
  -webkit-user-select: none;
          user-select: none;
}

/*
 * al studio host theme — maps @kaidosdragon/al-design-system's --ds-* tokens to
 * my-pace's HSL design tokens (src/styles/theme.css). Replaces the library's
 * global :root block + html/body styles, which would otherwise repaint my-pace.
 *
 * Apply by wrapping every al studio mount in <div className="al-studio-root">.
 * Do NOT also import "@kaidosdragon/al-design-system/styles.css" globally — its
 * html/body rules would clobber the host. The studios reference --ds-* via inline
 * styles, so redefining them on a scoped ancestor is enough.
 */

.al-studio-root {
  /* Surfaces — mapped to my-pace's card/background/muted */
  --ds-background: hsl(var(--background));
  --ds-surface: hsl(var(--card));
  --ds-surface-muted: hsl(var(--muted));
  --ds-surface-sunken: hsl(var(--secondary));

  /* Text */
  --ds-ink: hsl(var(--foreground));
  --ds-ink-soft: hsl(var(--foreground) / 0.85);
  --ds-ink-muted: hsl(var(--muted-foreground));
  --ds-ink-subtle: hsl(var(--muted-foreground) / 0.7);

  /* Rules */
  --ds-border: hsl(var(--border));
  --ds-border-soft: hsl(var(--border) / 0.6);

  /* Brand */
  --ds-primary: hsl(var(--primary));
  --ds-primary-soft: hsl(var(--primary) / 0.15);
  --ds-primary-strong: hsl(var(--primary));

  /* Status */
  --ds-success: hsl(142 71% 40%);
  --ds-success-soft: hsl(142 71% 40% / 0.15);
  --ds-warning: hsl(38 92% 50%);
  --ds-warning-soft: hsl(38 92% 50% / 0.15);
  --ds-danger: hsl(var(--destructive));
  --ds-danger-soft: hsl(var(--destructive) / 0.15);

  /* Hero gradient — keep al's hero so it still feels lively, but tint with primary */
  --ds-gradient-start: hsl(var(--primary));
  --ds-gradient-end: hsl(var(--primary) / 0.65);
  --ds-gradient: linear-gradient(135deg, var(--ds-gradient-start) 0%, var(--ds-gradient-end) 100%);

  /* Fonts — inherit my-pace's stack instead of al's Apple-system override */
  --ds-font-sans: inherit;
  --ds-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Shadows — keep al's, the values are theme-neutral rgba */
  --ds-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
  --ds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
  --ds-shadow-focus: 0 0 0 3px hsl(var(--ring) / 0.25);

  /* Transitions */
  --ds-transition-quick: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --ds-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Anchor my-pace typography + background inside the studio's tree */
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: inherit;
  border-radius: var(--radius);
}

.al-studio-root *,
.al-studio-root *::before,
.al-studio-root *::after {
  box-sizing: border-box;
}

/*
 * Embedded / fill mode — used when a studio is mounted inside a bounded host
 * box (e.g. the in-meeting StudioDisplayOverlay card) rather than a full page.
 *
 * The al ToolShell root hard-codes `height: 100dvh; min-height: 100vh;
 * max-height: 100dvh` (see @kaidosdragon/al-tool-shell ToolShell). Inside a
 * smaller card that forces the studio to full-viewport height, overflowing the
 * card so the canvas + menu trigger get clipped — worst on tablet/mobile where
 * the meeting reserves less height. Here we make the studio fill exactly its
 * host box instead, so it scales dynamically with the available area and
 * nothing is cut off.
 *
 * AlProvider/Suspense render no DOM, so the ToolShell root is the first child
 * of `.al-studio-root`. `!important` is required because ToolShell sets the
 * height via inline styles.
 */
.al-studio-root--embedded {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.al-studio-root--embedded > div {
  flex: 1 1 auto;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
}

.al-studio-root ::selection {
  background: hsl(var(--primary) / 0.20);
  color: hsl(var(--foreground));
}

.lp-root,
.lp-paper {
  font-family: var(--lp-font-family, inherit);
  font-size: calc(1rem * var(--lp-font-scale, 1));
  line-height: calc(1.5 * var(--lp-line-spacing, 1));
  letter-spacing: var(--lp-letter-spacing, 0);
}

.lp-root {
  position: relative;
}

.lp-root.lp-single-column .lp-two-col,
.lp-paper.lp-single-column .lp-two-col {
  grid-template-columns: 1fr !important;
}

.lp-root.lp-contrast-high,
.lp-paper.lp-contrast-high {
  --foreground: 0 0% 0%;
  --muted-foreground: 0 0% 15%;
  --background: 0 0% 100%;
  --card: 0 0% 100%;
  --border: 0 0% 20%;
}

.lp-root.lp-contrast-dark,
.lp-paper.lp-contrast-dark {
  --foreground: 0 0% 100%;
  --muted-foreground: 0 0% 85%;
  --background: 0 0% 8%;
  --card: 0 0% 12%;
}

.lp-root.lp-large-hit button,
.lp-root.lp-large-hit a,
.lp-root.lp-large-hit input,
.lp-root.lp-large-hit textarea,
.lp-root.lp-large-hit [role='radio'],
.lp-root.lp-large-hit [role='checkbox'],
.lp-paper.lp-large-hit button,
.lp-paper.lp-large-hit a,
.lp-paper.lp-large-hit input,
.lp-paper.lp-large-hit textarea,
.lp-paper.lp-large-hit [role='radio'],
.lp-paper.lp-large-hit [role='checkbox'] {
  min-height: 48px;
  min-width: 48px;
}

.lp-root.lp-reduced-motion,
.lp-root.lp-reduced-motion *,
.lp-root.lp-reduced-motion *::before,
.lp-root.lp-reduced-motion *::after,
.lp-paper.lp-reduced-motion,
.lp-paper.lp-reduced-motion *,
.lp-paper.lp-reduced-motion *::before,
.lp-paper.lp-reduced-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

.lp-root.lp-reduced-motion .al-studio-root,
.al-studio-root.lp-reduced-motion {
  --ds-transition-quick: 0ms;
  --ds-transition-base: 0ms;
}

.lp-root.lp-keyboard-only :focus-visible,
.lp-paper.lp-keyboard-only :focus-visible {
  outline: 3px solid hsl(var(--foreground));
  outline-offset: 3px;
}

.lp-overlay {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--lp-overlay, transparent);
  mix-blend-mode: multiply;
}

/* Contained sample on the settings form — tint stays inside the paper, not the whole app. */
.lp-preview {
  position: relative;
  overflow: hidden;
}

.lp-preview .lp-overlay {
  position: absolute;
  z-index: 3;
}

.lp-root[data-lp-meeting='true'] .lp-overlay {
  display: none !important;
}

.lp-meeting-surface {
  --lp-overlay: transparent;
}

@media print {
  .lp-no-print {
    display: none !important;
  }

  .lp-print-sheet {
    font-family: var(--lp-font-family, inherit);
    font-size: calc(12pt * var(--lp-font-scale, 1));
    line-height: calc(1.5 * var(--lp-line-spacing, 1));
    letter-spacing: var(--lp-letter-spacing, 0);
    color: #111;
    background: #fff;
  }

  .lp-print-sheet .lp-print-item {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 1.25rem;
  }

  /*
    Figures on paper (src/figures).

    Two things are true of a printed worksheet that are not true on screen:
    school printers are usually monochrome, and browsers omit backgrounds by
    default. So strokes go pure black and fills are dropped — the dash pattern
    and the label, which already carry the meaning on screen, are what
    distinguish one series from another here. Nothing is lost, because colour
    was never the only cue.
  */
  .mp-figure-root {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .mp-figure {
    max-width: 100% !important;
    height: auto;
  }

  .mp-figure .mp-figure__surface {
    fill: #fff !important;
    stroke: #767676 !important;
  }

  .mp-figure .mp-figure__grid line {
    stroke: #b8b8b8 !important;
  }

  .mp-figure .mp-figure__axis line,
  .mp-figure .mp-figure__series polyline,
  .mp-figure .mp-figure__interval line,
  .mp-figure .mp-figure__legend line {
    stroke: #000 !important;
  }

  /* Hollow endpoint = value excluded. Flagged with data-open so print does not
     have to infer it from the on-screen fill colour. */
  .mp-figure circle[data-open='false'] {
    fill: #000 !important;
    stroke: #000 !important;
  }

  .mp-figure circle[data-open='true'] {
    fill: #fff !important;
    stroke: #000 !important;
  }

  /* Only the glyph fill — the white `stroke` on point labels is the halo that
     keeps them readable where they cross a curve. */
  .mp-figure text {
    fill: #000 !important;
  }

  /* Beats whichever utility class the surrounding page put on the caption. */
  .mp-figure-root figcaption {
    color: #000 !important;
  }
}

/* PDF Transparent Background Styles */
/* Pure CSS-based theme handling for PDF viewers - No encoding detection needed */

/* ========================================== */
/* CORE PDF TRANSPARENCY RULES */
/* ========================================== */

/* PDF Canvas elements should always be transparent to allow theme backgrounds to show through */
canvas {
  background-color: transparent !important;
}

/* PDF containers should be transparent */
.pdf-document,
.pdf-page,
.pdf-content,
.pdf-canvas-container {
  background-color: transparent !important;
}

/* React-PDF specific canvas background */
.react-pdf__Page__canvas {
  background-color: transparent !important;
}

/* ThemedPdfViewer container */
.themed-pdf-document {
  background-color: transparent !important;
}

.themed-pdf-page {
  background-color: transparent !important;
}

/* Document viewer containers for PDFs */
.document-viewer-container[data-document-type="pdf"] {
  background-color: transparent !important;
}

/* Ensure PDF viewer wrapper allows theme to show through */
.document-viewer-wrapper .pdf-document {
  background-color: transparent !important;
}

/* PDF.js specific canvas styling */
canvas[data-pdf-page] {
  background-color: transparent !important;
}

/* Canvas containers in PDF viewers */
.canvas-container,
.pdf-viewer-canvas-container {
  background-color: transparent !important;
}

/* ========================================== */
/* THEME-BASED PDF CONTAINER BACKGROUNDS */
/* ========================================== */

/* Default/Light theme PDF container backgrounds */
.pdf-viewer-container,
.document-viewer-container[data-document-type="pdf"],
.enhanced-pdf-viewer,
.themed-pdf-viewer {
  background-color: hsl(var(--background));
  transition: background-color 0.3s ease;
}

/* Dark theme PDF container backgrounds */
[data-theme="dark"] .pdf-viewer-container,
[data-theme="dark"] .document-viewer-container[data-document-type="pdf"],
[data-theme="dark"] .enhanced-pdf-viewer,
[data-theme="dark"] .themed-pdf-viewer,
.dark .pdf-viewer-container,
.dark .document-viewer-container[data-document-type="pdf"],
.dark .enhanced-pdf-viewer,
.dark .themed-pdf-viewer {
  background-color: hsl(var(--background));
}

/* Mellow Yellow theme PDF container backgrounds */
[data-theme="mellowYellow"] .pdf-viewer-container,
[data-theme="mellowYellow"] .document-viewer-container[data-document-type="pdf"],
[data-theme="mellowYellow"] .enhanced-pdf-viewer,
[data-theme="mellowYellow"] .themed-pdf-viewer,
.mellowYellow .pdf-viewer-container,
.mellowYellow .document-viewer-container[data-document-type="pdf"],
.mellowYellow .enhanced-pdf-viewer,
.mellowYellow .themed-pdf-viewer {
  background-color: hsl(var(--background));
}

/* Purple Rain theme PDF container backgrounds */
[data-theme="purpleRain"] .pdf-viewer-container,
[data-theme="purpleRain"] .document-viewer-container[data-document-type="pdf"],
[data-theme="purpleRain"] .enhanced-pdf-viewer,
[data-theme="purpleRain"] .themed-pdf-viewer,
.purpleRain .pdf-viewer-container,
.purpleRain .document-viewer-container[data-document-type="pdf"],
.purpleRain .enhanced-pdf-viewer,
.purpleRain .themed-pdf-viewer {
  background-color: hsl(var(--background));
}

/* Blue Sky theme PDF container backgrounds */
[data-theme="blueSky"] .pdf-viewer-container,
[data-theme="blueSky"] .document-viewer-container[data-document-type="pdf"],
[data-theme="blueSky"] .enhanced-pdf-viewer,
[data-theme="blueSky"] .themed-pdf-viewer,
.blueSky .pdf-viewer-container,
.blueSky .document-viewer-container[data-document-type="pdf"],
.blueSky .enhanced-pdf-viewer,
.blueSky .themed-pdf-viewer {
  background-color: hsl(var(--background));
}

/* ========================================== */
/* LESSON CONTENT CONTAINER THEMING */
/* ========================================== */

/* Lesson display containers should use theme backgrounds */
.lesson-content-container,
.lesson-content-main,
.lesson-content-display,
.lesson-display-overlay {
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
}

/* Ensure lesson content areas inherit theme colors */
.lesson-content-container * {
  background-color: transparent !important;
}

/* Lesson content text should use theme foreground color */
.lesson-content-container p,
.lesson-content-container h1,
.lesson-content-container h2,
.lesson-content-container h3,
.lesson-content-container h4,
.lesson-content-container h5,
.lesson-content-container h6,
.lesson-content-container span,
.lesson-content-container div {
  color: hsl(var(--foreground)) !important;
}

/* ========================================== */
/* UNIVERSAL TRANSPARENCY FIXES (NO ENCODING DETECTION) */
/* ========================================== */

/* Force transparency for ALL PDF canvases regardless of creator */
canvas[data-pdf-canvas],
canvas[data-pdf-page],
.pdf-canvas,
.react-pdf__Page__canvas,
.enhanced-pdf-viewer canvas,
.pdf-viewer canvas,
.document-viewer canvas {
  background-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
}

/* Enhanced transparency handling for any PDF viewer */
.enhanced-pdf-viewer canvas,
.pdf-viewer canvas,
div[data-document-type="pdf"] canvas {
  background-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Container transparency for all PDF viewers */
.enhanced-pdf-viewer,
.pdf-viewer,
div[data-document-type="pdf"] {
  /* Canvas children should be transparent, but container gets theme background */
}

/* ========================================== */
/* IMPROVED TRANSPARENCY WITHOUT CREATOR DETECTION */
/* ========================================== */

/* Aggressive transparency for any canvas that needs special handling */
canvas[data-special-transparency="true"],
canvas[data-transparent="true"],
.transparent-canvas {
  background-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  opacity: 1 !important;
}

/* Apply better blend modes for transparency without knowing PDF creator */
.pdf-viewer canvas,
.enhanced-pdf-viewer canvas {
  mix-blend-mode: normal !important;
  isolation: auto;
}

/* ========================================== */
/* THEME TRANSITION ANIMATIONS */
/* ========================================== */

/* Smooth theme transitions for PDF containers */
.pdf-viewer-container,
.document-viewer-container[data-document-type="pdf"],
.enhanced-pdf-viewer,
.themed-pdf-viewer {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ========================================== */
/* PRINT MEDIA TRANSPARENCY PRESERVATION */
/* ========================================== */

@media print {
  /* Ensure transparency is preserved when printing */
  canvas,
  .pdf-canvas,
  .react-pdf__Page__canvas {
    background-color: transparent !important;
    background: transparent !important;
    -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
  }
} 

/* ========================================== */
/* ACCESSIBILITY & HIGH CONTRAST SUPPORT */
/* ========================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .pdf-viewer-container,
  .document-viewer-container[data-document-type="pdf"] {
    border: 2px solid currentColor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .pdf-viewer-container,
  .document-viewer-container[data-document-type="pdf"],
  .enhanced-pdf-viewer,
  .themed-pdf-viewer {
    transition: none;
  }
} 
/* Reference book reader — text surfaces transparent (PDF parity); images untouched */

.book-scroll-flow,
.book-page-flow,
.reference-article-shell {
  background-color: transparent !important;
  background: transparent !important;
}

.book-scroll-flow[data-theme="light"] .prose,
.book-page-flow[data-theme="light"] {
  color: hsl(var(--foreground));
  --tw-prose-body: hsl(var(--foreground));
  --tw-prose-headings: hsl(var(--foreground));
}

.book-scroll-flow[data-theme="light"] .prose :where(p, li, blockquote, td, th, h1, h2, h3, h4, h5, h6),
.book-page-flow[data-theme="light"] :where(p, li, blockquote, td, th, h1, h2, h3, h4, h5, h6) {
  color: inherit;
}


/*# sourceMappingURL=main-ef7d455c.ab334be5d9031739094b.css.map*/