@tailwind base;
@tailwind components;
@tailwind utilities;

@import './components/index.css';
/* Button overrides for Landing & Launchpad */
.btn {
  /* Smooth color/brightness transitions */
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn:hover, .btn:focus-visible {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0); /* Reset on active press */
}

/* Ghost buttons are transparent; tweak background on hover */
.btn-ghost:hover {
  filter: none !important;
  background-color: var(--fallback-bc,oklch(var(--bc)/0.1)) !important;
}

/* Outline variant glow for dark theme */
[data-theme="dark"] .btn-outline:hover {
  backdrop-filter: blur(10px);
  box-shadow: 0 0 15px rgba(45, 85, 93, 0.4);
}

/* Ensure circular buttons (avatars) center their content */
.btn-circle {
  display: flex; /* override DaisyUI inline-flex */
  align-items: center;
  justify-content: center;
  gap: 0; /* no internal gap needed for single letter */
}

/* Override avatar child rule from DaisyUI that forces display:block */
.avatar > .btn-circle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
} 
/* Card style overrides for Landing & Launchpad */
.card-clickable {
  transition: filter 0.3s ease, box-shadow 0.3s ease;
}

.card-clickable:hover {
  filter: brightness(1.03);
  box-shadow: 0 4px 16px -4px rgba(0,0,0,0.12);
}

/* Stronger shadow in dark mode */
[data-theme="dark"] .card-clickable:hover {
  box-shadow: 0 4px 16px -4px rgba(0,0,0,0.35);
}

/* Interactive content items (e.g., images inside cards) */
.interactive-content:hover {
  transform: translateY(-3px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .interactive-content:hover {
  box-shadow: 0 15px 35px -8px rgba(16, 16, 21, 0.2);
}

[data-theme="light"] .interactive-content:hover {
  box-shadow: 0 15px 35px -8px rgba(0, 0, 0, 0.12);
}

/* Stat card subtle glow */
[data-theme="dark"] .stat:hover {
  background: linear-gradient(135deg, hsl(var(--b2)) 0%, hsl(var(--b3)) 100%);
  box-shadow: 0 0 20px rgba(45, 85, 93, 0.3);
}

[data-theme="light"] .stat:hover {
  background: linear-gradient(135deg, hsl(var(--b2)) 0%, hsl(var(--b3)) 100%);
  box-shadow: 0 0 20px rgba(173, 173, 164, 0.3);
} 
@import './buttons.css';
@import './cards.css';
@import './links.css';
@import './utilities.css';
@import './mindmap.css'; 
/* ===================================================================
 * LINK THEME CONFIGURATION
 * ===================================================================
 * 
 * Comprehensive link styling system built on DaisyUI theme colors.
 * Based on privacy/legal links as the standard baseline pattern.
 * 
 * USAGE:
 *   <%= link_to "Text", path, class: "link-footer" %>
 *   <%= link_to "Text", path, class: "link-nav" %>
 *   <%= link_to "Text", path, class: "link-accent" %>
 * 
 * AVAILABLE LINK VARIANTS:
 * - link-footer    : Standard footer links (privacy/legal baseline)
 * - link-nav       : Navigation links with background hover
 * - link-nav-title : Large navigation title links
 * - link-accent    : Accent colored links (DaisyUI accent)
 * - link-primary   : Primary colored links (DaisyUI primary)
 * - link-secondary : Secondary colored links (DaisyUI secondary)
 * - link-success   : Success colored links (DaisyUI success)
 * - link-warning   : Warning colored links (DaisyUI warning)
 * - link-error     : Error colored links (DaisyUI error)
 * - link-subtle    : Subtle underlined links
 * - link-breadcrumb: Breadcrumb navigation links
 * - link-external  : External links with indicator
 * - link-button    : Button-styled links
 * 
 * BUTTON LINK VARIANTS:
 * - btn-link-primary   : Primary button link
 * - btn-link-secondary : Secondary button link
 * - btn-link-accent    : Accent button link
 * - btn-link-ghost     : Ghost button link
 * - btn-link-outline   : Outline button link
 * 
 * SIZE MODIFIERS (append to any variant):
 * - -xs, -sm, -lg, -xl
 * 
 * STATE MODIFIERS:
 * - -disabled : Disabled state
 * - -active   : Active state
 * 
 * =================================================================== */

/* ===================================================================
 * BASE LINK CONFIGURATION
 * =================================================================== */

/* Reset default link styling to build upon */
.link-component {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Focus states for accessibility */
.link-component:focus {
  outline: 2px solid hsl(var(--accent));
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* ===================================================================
 * STANDARD LINK VARIANTS
 * =================================================================== */

/* Footer Links - Privacy/Legal Baseline Standard */
.link-footer {
  @apply link-component;
  color: hsl(var(--base-content) / 0.7);
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-footer:hover,
.link-footer:focus {
  color: hsl(var(--base-content));
}

/* Navigation Links - Background hover effect */
.link-nav {
  @apply link-component;
  color: hsl(var(--base-content));
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-nav:hover,
.link-nav:focus {
  background-color: hsl(var(--base-200));
  color: hsl(var(--base-content));
}

/* Navigation Title Links - Large titles */
.link-nav-title {
  @apply link-component;
  color: hsl(var(--base-content));
  font-size: 1.125rem;
  font-weight: 500;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-nav-title:hover,
.link-nav-title:focus {
  color: hsl(var(--accent));
}

@media (min-width: 768px) {
  .link-nav-title {
    font-size: 1.25rem;
  }
}

/* DaisyUI Theme Color Links */
.link-accent {
  @apply link-component;
  color: hsl(var(--accent));
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-accent:hover,
.link-accent:focus {
  color: hsl(var(--accent) / 0.8);
}

.link-primary {
  @apply link-component;
  color: hsl(var(--primary));
  font-weight: 500;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-primary:hover,
.link-primary:focus {
  color: hsl(var(--primary) / 0.8);
}

.link-secondary {
  @apply link-component;
  color: hsl(var(--secondary));
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-secondary:hover,
.link-secondary:focus {
  color: hsl(var(--secondary) / 0.8);
}

.link-success {
  @apply link-component;
  color: hsl(var(--success));
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-success:hover,
.link-success:focus {
  color: hsl(var(--success) / 0.8);
}

.link-warning {
  @apply link-component;
  color: hsl(var(--warning));
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-warning:hover,
.link-warning:focus {
  color: hsl(var(--warning) / 0.8);
}

.link-error {
  @apply link-component;
  color: hsl(var(--error));
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-error:hover,
.link-error:focus {
  color: hsl(var(--error) / 0.8);
}

/* ===================================================================
 * SPECIALIZED LINK VARIANTS
 * =================================================================== */

/* Subtle Links - With underline decoration */
.link-subtle {
  @apply link-component;
  color: hsl(var(--base-content) / 0.7);
  text-decoration: underline;
  text-decoration-color: hsl(var(--base-content) / 0.3);
  text-underline-offset: 0.25rem;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              text-decoration-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-subtle:hover,
.link-subtle:focus {
  color: hsl(var(--base-content));
  text-decoration-color: hsl(var(--base-content) / 0.6);
}

/* Breadcrumb Links - For navigation paths */
.link-breadcrumb {
  @apply link-component;
  color: hsl(var(--accent));
  font-size: 0.875rem;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2rem;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              text-decoration-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-breadcrumb:hover,
.link-breadcrumb:focus {
  color: hsl(var(--accent) / 0.8);
  text-decoration-color: hsl(var(--accent) / 0.6);
}

/* External Links - With indicator icon */
.link-external {
  @apply link-component;
  color: hsl(var(--accent));
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-external:hover,
.link-external:focus {
  color: hsl(var(--accent) / 0.8);
  transform: translateY(-1px);
}

.link-external::after {
  content: "↗";
  font-size: 0.75em;
  margin-left: 0.25rem;
  opacity: 0.7;
}

/* Button-styled Links */
.link-button {
  @apply link-component;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-content));
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-button:hover,
.link-button:focus {
  background-color: hsl(var(--primary) / 0.9);
  transform: translateY(-1px);
}

/* ===================================================================
 * BUTTON LINK VARIANTS (Enhanced DaisyUI buttons)
 * =================================================================== */

.btn-link-primary {
  @apply btn btn-primary;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-link-primary:hover {
  transform: translateY(-1px);
}

.btn-link-secondary {
  @apply btn btn-secondary;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-link-secondary:hover {
  transform: translateY(-1px);
}

.btn-link-accent {
  @apply btn btn-accent;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-link-accent:hover {
  transform: translateY(-1px);
}

.btn-link-ghost {
  @apply btn btn-ghost;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-link-ghost:hover {
  transform: translateY(-1px);
  background-color: hsl(var(--base-content) / 0.1);
}

.btn-link-outline {
  @apply btn btn-outline;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-link-outline:hover {
  transform: translateY(-1px);
}

/* ===================================================================
 * SIZE MODIFIERS
 * =================================================================== */

/* Extra Small */
.link-xs {
  font-size: 0.75rem;
  gap: 0.125rem;
}

.link-xs.link-nav {
  padding: 0.25rem 0.5rem;
}

.link-xs.link-button {
  padding: 0.25rem 0.5rem;
}

/* Small */
.link-sm {
  font-size: 0.875rem;
  gap: 0.1875rem;
}

.link-sm.link-nav {
  padding: 0.375rem 0.625rem;
}

.link-sm.link-button {
  padding: 0.375rem 0.75rem;
}

/* Large */
.link-lg {
  font-size: 1.125rem;
  gap: 0.375rem;
  font-weight: 500;
}

.link-lg.link-nav {
  padding: 0.75rem 1rem;
}

.link-lg.link-button {
  padding: 0.75rem 1.5rem;
}

/* Extra Large */
.link-xl {
  font-size: 1.25rem;
  gap: 0.5rem;
  font-weight: 600;
}

.link-xl.link-nav {
  padding: 1rem 1.25rem;
}

.link-xl.link-button {
  padding: 1rem 2rem;
}

/* ===================================================================
 * STATE MODIFIERS
 * =================================================================== */

/* Disabled State */
.link-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Active State */
.link-active {
  font-weight: 600;
}

.link-nav.link-active {
  background-color: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
}

.link-accent.link-active {
  color: hsl(var(--accent));
  font-weight: 600;
}

/* ===================================================================
 * DARK MODE ENHANCEMENTS
 * =================================================================== */

[data-theme="dark"] .btn-link-outline:hover {
  backdrop-filter: blur(10px);
  box-shadow: 0 0 15px rgba(45, 85, 93, 0.4);
}

[data-theme="dark"] .link-external:hover {
  text-shadow: 0 0 8px hsl(var(--accent) / 0.3);
}

/* ===================================================================
 * INTERACTIVE EFFECTS
 * =================================================================== */

/* Hover Scale Effect (for special cases) */
.link-scale {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-scale:hover {
  transform: scale(1.05);
}

/* Glow Effect (for dark theme highlights) */
[data-theme="dark"] .link-glow:hover {
  text-shadow: 0 0 8px currentColor;
}

/* ===================================================================
 * ICON INTEGRATION
 * =================================================================== */

.link-component svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.link-xs svg {
  width: 0.75em;
  height: 0.75em;
}

.link-sm svg {
  width: 0.875em;
  height: 0.875em;
}

.link-lg svg {
  width: 1.125em;
  height: 1.125em;
}

.link-xl svg {
  width: 1.25em;
  height: 1.25em;
}

/* Icon positioning */
.link-component .icon-left {
  order: -1;
}

.link-component .icon-right {
  order: 1;
} 
/* Custom mindmap styling extracted from inline <style> tag */
#learning-vectors-mindmap .jmnode {
  background-color: #374151 !important;
  border-color: #374151 !important;
  color: white !important;
}

#learning-vectors-mindmap .jmnode.root {
  background-color: #111827 !important;
  border-color: #111827 !important;
  color: white !important;
}

#learning-vectors-mindmap .jmnode.selected {
  background-color: #4B5563 !important;
  border-color: #4B5563 !important;
}

#learning-vectors-mindmap .jmnode:hover {
  background-color: #4B5563 !important;
  border-color: #4B5563 !important;
}

/* Info icon styling for microlesson view */
.info-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.info-icon {
  cursor: pointer !important;
  transition: all 0.2s ease-in-out;
}

.info-icon:hover {
  transform: scale(1.1);
  color: hsl(var(--p)) !important;
}

/* Tooltip popup styling */
.tooltip-popup {
  animation: fadeIn 0.2s ease-in-out;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
} 
/* Tag Component Styles */
/* 
 * This component enhances DaisyUI badge classes for a more sleek, modern appearance.
 * Base styling comes from DaisyUI badges, with custom enhancements for visual polish.
 * See: https://daisyui.com/components/badge/
 * 
 * Available variants: badge-primary, badge-secondary, badge-accent, badge-neutral,
 *                    badge-info, badge-success, badge-warning, badge-error
 * 
 * Available sizes: badge-xs, badge-sm, (default), badge-lg
 */

/* Enhanced base badge styling for all tag components */
.tag-component.badge {
  /* Modern rounded pill appearance */
  border-radius: 9999px !important;
  
  /* Enhanced typography */
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.025em !important;
  
  /* Improved spacing */
  padding: 0.25rem 0.75rem !important;
  min-height: 1.5rem !important;
  
  /* Minimal visual enhancements */
  border: 1px solid transparent !important;
  box-shadow: none !important;
  
  /* Smooth transitions */
  transition: all 0.15s ease-in-out !important;
  
  /* Better text alignment */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.25rem !important;
}

/* Size variants with enhanced styling */
.tag-component.badge-xs {
  font-size: 0.625rem;
  padding: 0.125rem 0.5rem;
  min-height: 1.25rem;
}

.tag-component.badge-sm {
  font-size: 0.6875rem;
  padding: 0.1875rem 0.625rem;
  min-height: 1.375rem;
}

.tag-component.badge-lg {
  font-size: 0.875rem;
  padding: 0.375rem 1rem;
  min-height: 2rem;
  font-weight: 600;
}

/* Enhanced hover effects for clickable tags */
.tag-component.badge.tag-clickable {
  cursor: pointer;
}

.tag-component.badge.tag-clickable:hover {
  transform: translateY(-1px) !important;
  opacity: 0.8 !important;
}

.tag-component.badge.tag-clickable:active {
  transform: translateY(0) !important;
  opacity: 0.6 !important;
}

/* Minimal color variants with subtle backgrounds and colored text */
.tag-component.badge-success {
  background-color: rgba(34, 197, 94, 0.1) !important;
  color: rgb(21, 128, 61) !important;
  border: 1px solid rgba(34, 197, 94, 0.2) !important;
  box-shadow: none !important;
}

.tag-component.badge-warning {
  background-color: rgba(245, 158, 11, 0.1) !important;
  color: rgb(180, 83, 9) !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
  box-shadow: none !important;
}

.tag-component.badge-info {
  background-color: rgba(59, 130, 246, 0.1) !important;
  color: rgb(37, 99, 235) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  box-shadow: none !important;
}

.tag-component.badge-error {
  background-color: rgba(239, 68, 68, 0.1) !important;
  color: rgb(220, 38, 38) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  box-shadow: none !important;
}

.tag-component.badge-primary {
  background-color: rgba(168, 85, 247, 0.1) !important;
  color: rgb(147, 51, 234) !important;
  border: 1px solid rgba(168, 85, 247, 0.2) !important;
  box-shadow: none !important;
}

.tag-component.badge-secondary {
  background-color: rgba(107, 114, 128, 0.1) !important;
  color: rgb(75, 85, 99) !important;
  border: 1px solid rgba(107, 114, 128, 0.2) !important;
  box-shadow: none !important;
}

.tag-component.badge-neutral {
  background-color: rgba(107, 114, 128, 0.1) !important;
  color: rgb(75, 85, 99) !important;
  border: 1px solid rgba(107, 114, 128, 0.2) !important;
  box-shadow: none !important;
}

/* Icon styling within tags */
.tag-component.badge svg {
  width: 0.875em;
  height: 0.875em;
  flex-shrink: 0;
}

.tag-component.badge-xs svg {
  width: 0.75em;
  height: 0.75em;
}

.tag-component.badge-lg svg {
  width: 1em;
  height: 1em;
}

/* Focus states for accessibility */
.tag-component.badge.tag-clickable:focus {
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .tag-component.badge {
    font-size: 0.6875rem;
    padding: 0.1875rem 0.625rem;
  }
  
  .tag-component.badge-lg {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
  }
} 
/* ===== Migrated from globals.css - project-wide utility overrides ===== */

/* Variable Fonts */
@supports (font-variation-settings: normal) {
  @font-face {
    font-family: "MPLUS1";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/MPLUS1-VariableFont_wght-f690acd6c4283c34769a24b3d3989b121db7c449c9fc30957698edb8ec41dd9c.woff2) format("woff2");
    font-named-instance: "Regular";
  }
}

@layer utilities {
  .font-thin { font-variation-settings: 'wght' 100; }
  .font-extralight { font-variation-settings: 'wght' 200; }
  .font-light { font-variation-settings: 'wght' 300; }
  .font-normal { font-variation-settings: 'wght' 400; }
  .font-medium { font-variation-settings: 'wght' 500; }
  .font-semibold { font-variation-settings: 'wght' 600; }
  .font-bold { font-variation-settings: 'wght' 700; }
  .font-extrabold { font-variation-settings: 'wght' 800; }
  .font-black { font-variation-settings: 'wght' 900; }

  /* Shared transition helpers to replace bulky utility chains */
  .transition-base {
    @apply transition duration-300 ease-in-out;
  }

  .transition-fast {
    @apply transition duration-200 ease-in-out;
  }
}

/* Additional utilities & component tweaks (kept here if not already moved) */

/* Custom shadow-primary for light theme */
[data-theme="light"] .shadow-primary {
  --tw-shadow: 0px 0px 1px 1px rgba(173, 173, 164, 0.5);
  box-shadow: var(--tw-shadow);
}

/* Dark-theme shadow refinements */
[data-theme="dark"] .shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  box-shadow: var(--tw-shadow);
}
[data-theme="dark"] .shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  box-shadow: var(--tw-shadow);
}
[data-theme="dark"] .shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  box-shadow: var(--tw-shadow);
}

/* AI-Usage dashboard card animation */
.ai-usage-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}
.ai-usage-card:hover { transform: scale(1.02) translateY(-2px); }
[data-theme="dark"] .ai-usage-card:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
[data-theme="light"] .ai-usage-card:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Progress component enhancements (matches DaisyUI `.progress`) */
.progress {
  appearance: none;
  border-radius: 9999px;
  overflow: hidden;
}
[data-theme="dark"] .progress::-webkit-progress-bar { background-color: hsl(var(--b3)); border-radius: 9999px; }
[data-theme="dark"] .progress::-webkit-progress-value {
  background: linear-gradient(90deg, hsl(var(--p)) 0%, hsl(var(--s)) 100%);
  border-radius: 9999px;
  transition: all 0.3s ease;
}
[data-theme="light"] .progress::-webkit-progress-value {
  background: linear-gradient(90deg, hsl(var(--p)) 0%, hsl(var(--s)) 100%);
  border-radius: 9999px;
  transition: all 0.3s ease;
}

/* Alerts, collapse, tables, scrollbar & misc animations */
[data-theme="dark"] .alert { backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); }
[data-theme="dark"] .alert-warning { background: linear-gradient(135deg, rgba(236, 148, 85, .2) 0%, rgba(236,148,85,.1) 100%); border-color: rgba(236,148,85,.3); }
[data-theme="dark"] .alert-error   { background: linear-gradient(135deg, rgba(234, 67, 53, .2) 0%, rgba(234,67,53,.1) 100%); border-color: rgba(234,67,53,.3); }
[data-theme="dark"] .alert-info    { background: linear-gradient(135deg, rgba(45, 85, 93, .2) 0%, rgba(45,85,93,.1) 100%); border-color: rgba(45,85,93,.3); }

[data-theme="dark"] .collapse { backdrop-filter: blur(10px); }
.collapse-title:hover { background: linear-gradient(135deg, hsl(var(--b3)) 0%, hsl(var(--b2)) 100%); }

/* Card-like table styling - applying card properties to table rows */
.table {
  border-collapse: separate;
  border-spacing: 0.5rem;
  width: 100%;
}

.table thead {
  background-color: transparent;
}

.table thead th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: hsl(var(--bc));
  border-bottom: 1px solid hsl(var(--b3));
  background-color: transparent;
}

.table tbody tr {
  background-color: hsl(var(--b2));
  border: 1px solid hsl(var(--b3));
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
  margin-bottom: 0.5rem;
}

.table tbody tr:hover {
  background-color: hsl(var(--b2) / 0.8) !important;
  border-color: hsl(var(--accent) / 0.3) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px -4px rgba(0,0,0,0.12);
}

.table tbody td {
  padding: 1rem;
  color: hsl(var(--bc));
  border-radius: 0.5rem;
}

/* Clickable table rows with card-like hover effects */
.table tbody tr.cursor-pointer {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.table tbody tr.cursor-pointer:hover {
  background-color: hsl(var(--b2) / 0.9) !important;
  border-color: hsl(var(--accent) / 0.4) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px -4px rgba(0,0,0,0.12);
}

[data-theme="dark"] .table tbody tr.cursor-pointer:hover {
  box-shadow: 0 4px 16px -4px rgba(0,0,0,0.35);
}

[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: hsl(var(--b3)); border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: hsl(var(--bc) / 0.3); border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: hsl(var(--bc) / 0.5); }

@keyframes float { 0%,100% { transform: translateY(0px);} 50% { transform: translateY(-5px);} }
@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 5px rgba(45,85,93,.5);} 50% { box-shadow: 0 0 20px rgba(45,85,93,.8);} }
.float-animation { animation: float 3s ease-in-out infinite; }
[data-theme="dark"] .pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }

/* Tab design */
.tab {
  transition: all 0.3s ease;
  border-radius: 0.5rem 0.5rem 0 0;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  background: linear-gradient(135deg, hsl(var(--b2)) 0%, hsl(var(--b3)) 100%);
}
.tab-active {
  background: linear-gradient(135deg, hsl(var(--b1)) 0%, hsl(var(--b2)) 100%);
  border-bottom: 2px solid hsl(var(--p));
  color: hsl(var(--p));
}

/* Mindmap colours for dialogs / controller-driven maps */
[data-controller="mindmap"] jmnode,
.mindmap-presentation jmnode {
  background: linear-gradient(135deg, hsl(var(--b2)) 0%, hsl(var(--b3)) 100%);
  border: 1px solid hsl(var(--bc) / 0.2);
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
[data-controller="mindmap"] jmnode.selected,
jmnode.selected {
  background: linear-gradient(135deg, hsl(var(--p)) 0%, hsl(var(--s)) 100%);
  color: hsl(var(--pc));
  border-color: hsl(var(--p));
  box-shadow: 0 0 10px rgba(45,85,93,.5);
} 
/**
 * @license BSD
 * @copyright 2014-2025 hizzgdev@163.com
 * 
 * Project Home:
 *   https://github.com/hizzgdev/jsmind/
 */

/* important section */
.jsmind-inner {
    position: relative;
    overflow: auto;
    width: 100%;
    height: 100%;
    outline: none;
} /*box-shadow:0 0 2px #000;*/
.jsmind-inner {
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.jsmind-inner canvas {
    position: absolute;
}

/* z-index:1 */
svg.jsmind {
    position: absolute;
    z-index: 1;
}
canvas.jsmind {
    position: absolute;
    z-index: 1;
}

/* z-index:2 */
jmnodes {
    position: absolute;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0);
} /*background color is necessary*/
jmnode {
    position: absolute;
    cursor: default;
    max-width: 400px;
}
jmexpander {
    position: absolute;
    width: 11px;
    height: 11px;
    display: block;
    overflow: hidden;
    line-height: 12px;
    font-size: 10px;
    text-align: center;
    border-radius: 6px;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
}

.jmnode-overflow-wrap jmnodes {
    min-width: 420px;
}

.jmnode-overflow-hidden jmnode {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* default theme */
jmnode {
    padding: 10px;
    background-color: #fff;
    color: #333;
    border-radius: 5px;
    box-shadow: 1px 1px 1px #666;
    font: 16px/1.125 Verdana, Arial, Helvetica, sans-serif;
}
jmnode:hover {
    box-shadow: 2px 2px 8px #000;
    background-color: #ebebeb;
    color: #333;
}
jmnode.selected {
    background-color: #11f;
    color: #fff;
    box-shadow: 2px 2px 8px #000;
}
jmnode.root {
    font-size: 24px;
}
jmexpander {
    border-color: gray;
}
jmexpander:hover {
    border-color: #000;
}

@media screen and (max-device-width: 1024px) {
    jmnode {
        padding: 5px;
        border-radius: 3px;
        font-size: 14px;
    }
    jmnode.root {
        font-size: 21px;
    }
}
/* primary theme */
jmnodes.theme-primary jmnode {
    background-color: #428bca;
    color: #fff;
    border-color: #357ebd;
}
jmnodes.theme-primary jmnode:hover {
    background-color: #3276b1;
    border-color: #285e8e;
}
jmnodes.theme-primary jmnode.selected {
    background-color: #f1c40f;
    color: #fff;
}
jmnodes.theme-primary jmnode.root {
}
jmnodes.theme-primary jmexpander {
}
jmnodes.theme-primary jmexpander:hover {
}

/* warning theme */
jmnodes.theme-warning jmnode {
    background-color: #f0ad4e;
    border-color: #eea236;
    color: #fff;
}
jmnodes.theme-warning jmnode:hover {
    background-color: #ed9c28;
    border-color: #d58512;
}
jmnodes.theme-warning jmnode.selected {
    background-color: #11f;
    color: #fff;
}
jmnodes.theme-warning jmnode.root {
}
jmnodes.theme-warning jmexpander {
}
jmnodes.theme-warning jmexpander:hover {
}

/* danger theme */
jmnodes.theme-danger jmnode {
    background-color: #d9534f;
    border-color: #d43f3a;
    color: #fff;
}
jmnodes.theme-danger jmnode:hover {
    background-color: #d2322d;
    border-color: #ac2925;
}
jmnodes.theme-danger jmnode.selected {
    background-color: #11f;
    color: #fff;
}
jmnodes.theme-danger jmnode.root {
}
jmnodes.theme-danger jmexpander {
}
jmnodes.theme-danger jmexpander:hover {
}

/* success theme */
jmnodes.theme-success jmnode {
    background-color: #5cb85c;
    border-color: #4cae4c;
    color: #fff;
}
jmnodes.theme-success jmnode:hover {
    background-color: #47a447;
    border-color: #398439;
}
jmnodes.theme-success jmnode.selected {
    background-color: #11f;
    color: #fff;
}
jmnodes.theme-success jmnode.root {
}
jmnodes.theme-success jmexpander {
}
jmnodes.theme-success jmexpander:hover {
}

/* info theme */
jmnodes.theme-info jmnode {
    background-color: #5dc0de;
    border-color: #46b8da;
    color: #fff;
}
jmnodes.theme-info jmnode:hover {
    background-color: #39b3d7;
    border-color: #269abc;
}
jmnodes.theme-info jmnode.selected {
    background-color: #11f;
    color: #fff;
}
jmnodes.theme-info jmnode.root {
}
jmnodes.theme-info jmexpander {
}
jmnodes.theme-info jmexpander:hover {
}

/* greensea theme */
jmnodes.theme-greensea jmnode {
    background-color: #1abc9c;
    color: #fff;
}
jmnodes.theme-greensea jmnode:hover {
    background-color: #16a085;
}
jmnodes.theme-greensea jmnode.selected {
    background-color: #11f;
    color: #fff;
}
jmnodes.theme-greensea jmnode.root {
}
jmnodes.theme-greensea jmexpander {
}
jmnodes.theme-greensea jmexpander:hover {
}

/* nephrite theme */
jmnodes.theme-nephrite jmnode {
    background-color: #2ecc71;
    color: #fff;
}
jmnodes.theme-nephrite jmnode:hover {
    background-color: #27ae60;
}
jmnodes.theme-nephrite jmnode.selected {
    background-color: #11f;
    color: #fff;
}
jmnodes.theme-nephrite jmnode.root {
}
jmnodes.theme-nephrite jmexpander {
}
jmnodes.theme-nephrite jmexpander:hover {
}

/* belizehole theme */
jmnodes.theme-belizehole jmnode {
    background-color: #3498db;
    color: #fff;
}
jmnodes.theme-belizehole jmnode:hover {
    background-color: #2980b9;
}
jmnodes.theme-belizehole jmnode.selected {
    background-color: #11f;
    color: #fff;
}
jmnodes.theme-belizehole jmnode.root {
}
jmnodes.theme-belizehole jmexpander {
}
jmnodes.theme-belizehole jmexpander:hover {
}

/* wisteria theme */
jmnodes.theme-wisteria jmnode {
    background-color: #9b59b6;
    color: #fff;
}
jmnodes.theme-wisteria jmnode:hover {
    background-color: #8e44ad;
}
jmnodes.theme-wisteria jmnode.selected {
    background-color: #11f;
    color: #fff;
}
jmnodes.theme-wisteria jmnode.root {
}
jmnodes.theme-wisteria jmexpander {
}
jmnodes.theme-wisteria jmexpander:hover {
}

/* asphalt theme */
jmnodes.theme-asphalt jmnode {
    background-color: #34495e;
    color: #fff;
}
jmnodes.theme-asphalt jmnode:hover {
    background-color: #2c3e50;
}
jmnodes.theme-asphalt jmnode.selected {
    background-color: #11f;
    color: #fff;
}
jmnodes.theme-asphalt jmnode.root {
}
jmnodes.theme-asphalt jmexpander {
}
jmnodes.theme-asphalt jmexpander:hover {
}

/* orange theme */
jmnodes.theme-orange jmnode {
    background-color: #f1c40f;
    color: #fff;
}
jmnodes.theme-orange jmnode:hover {
    background-color: #f39c12;
}
jmnodes.theme-orange jmnode.selected {
    background-color: #11f;
    color: #fff;
}
jmnodes.theme-orange jmnode.root {
}
jmnodes.theme-orange jmexpander {
}
jmnodes.theme-orange jmexpander:hover {
}

/* pumpkin theme */
jmnodes.theme-pumpkin jmnode {
    background-color: #e67e22;
    color: #fff;
}
jmnodes.theme-pumpkin jmnode:hover {
    background-color: #d35400;
}
jmnodes.theme-pumpkin jmnode.selected {
    background-color: #11f;
    color: #fff;
}
jmnodes.theme-pumpkin jmnode.root {
}
jmnodes.theme-pumpkin jmexpander {
}
jmnodes.theme-pumpkin jmexpander:hover {
}

/* pomegranate theme */
jmnodes.theme-pomegranate jmnode {
    background-color: #e74c3c;
    color: #fff;
}
jmnodes.theme-pomegranate jmnode:hover {
    background-color: #c0392b;
}
jmnodes.theme-pomegranate jmnode.selected {
    background-color: #11f;
    color: #fff;
}
jmnodes.theme-pomegranate jmnode.root {
}
jmnodes.theme-pomegranate jmexpander {
}
jmnodes.theme-pomegranate jmexpander:hover {
}

/* clouds theme */
jmnodes.theme-clouds jmnode {
    background-color: #ecf0f1;
    color: #333;
}
jmnodes.theme-clouds jmnode:hover {
    background-color: #bdc3c7;
}
jmnodes.theme-clouds jmnode.selected {
    background-color: #11f;
    color: #fff;
}
jmnodes.theme-clouds jmnode.root {
}
jmnodes.theme-clouds jmexpander {
}
jmnodes.theme-clouds jmexpander:hover {
}

/* asbestos theme */
jmnodes.theme-asbestos jmnode {
    background-color: #95a5a6;
    color: #fff;
}
jmnodes.theme-asbestos jmnode:hover {
    background-color: #7f8c8d;
}
jmnodes.theme-asbestos jmnode.selected {
    background-color: #11f;
    color: #fff;
}
jmnodes.theme-asbestos jmnode.root {
}
jmnodes.theme-asbestos jmexpander {
}
jmnodes.theme-asbestos jmexpander:hover {
}

/* Drag and Drop Styles */
.lesson-plan-item {
  transition: all 0.2s ease;
}

.lesson-plan-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.lesson-plan-item.dragging {
  opacity: 0.5;
  background-color: var(--base-300);
}

.lesson-plan-item.drag-over {
  border-top: 2px solid var(--primary);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* AI Deck Tab System */
[data-controller="ai-deck"] .tab-content {
  display: none;
  height: 100%;
  width: 100%;
  min-height: 0;
  flex: 1;
}

[data-controller="ai-deck"] .tab-content:not(.hidden) {
  display: block !important;
}

[data-controller="ai-deck"] .tab-content.hidden {
  display: none !important;
}

/* Ensure proper height inheritance for tab containers */
[data-controller="ai-deck"] .flex-1 {
  min-height: 0;
}