/* Fun Cartoon & Child-like Theme Design */
:root {
  /* Playful Color Palette - Bright & Cheerful */
  --background: oklch(0.9800 0.0200 85.8742); /* Soft cream with warm tint */
  --foreground: oklch(0.2000 0.0300 285.8273); /* Soft dark purple-gray */
  --card: oklch(0.9900 0.0150 120.5570); /* Very light mint green */
  --card-foreground: oklch(0.2000 0.0300 285.8273);
  --popover: oklch(0.9900 0.0150 120.5570);
  --popover-foreground: oklch(0.2000 0.0300 285.8273);

  /* Bright Fun Colors */
  --primary: oklch(0.7000 0.3500 285.8273); /* Bright purple */
  --primary-foreground: oklch(0.9800 0.0200 85.8742);

  /* Soft pastel tones */
  --secondary: oklch(0.8500 0.1200 150.4953); /* Soft mint */
  --secondary-foreground: oklch(0.3000 0.0300 285.8273);
  --muted: oklch(0.9200 0.0800 200.7952); /* Light lavender */
  --muted-foreground: oklch(0.5000 0.0200 285.8273);

  /* Happy accent colors */
  --accent: oklch(0.6500 0.2800 65.5570); /* Sunny orange - darker for better contrast */
  --accent-foreground: oklch(0.9800 0.0200 85.8742);

  /* Gentle warning colors */
  --destructive: oklch(0.7000 0.2500 15.3250); /* Soft coral red */
  --destructive-foreground: oklch(0.9800 0.0200 85.8742);

  /* Soft borders and inputs */
  --border: oklch(0.8000 0.1000 285.8273); /* Light purple border */
  --input: oklch(0.9500 0.0500 120.5570); /* Very light mint input */
  --ring: oklch(0.7000 0.3500 285.8273); /* Purple focus ring */

  /* Rainbow chart colors */
  --chart-1: oklch(0.7000 0.3500 285.8273); /* Purple */
  --chart-2: oklch(0.7500 0.2800 65.5570); /* Orange */
  --chart-3: oklch(0.7000 0.2500 142.4953); /* Green */
  --chart-4: oklch(0.7200 0.3000 220.6707); /* Blue */
  --chart-5: oklch(0.7500 0.2500 350.3250); /* Pink */

  /* Fun status indicator colors */
  --success: oklch(0.5500 0.2500 142.4953); /* Happy green - darker for better contrast */
  --warning: oklch(0.7500 0.2800 65.5570); /* Cheerful orange */
  --error: oklch(0.7000 0.2500 15.3250); /* Gentle red */
  --info: oklch(0.7200 0.3000 220.6707); /* Friendly blue */

  /* Fun Typography - Rounded & Friendly */
  --font-sans: 'Comic Neue', 'Quicksand', 'Nunito', 'Fredoka One', 'Bubblegum Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Kalam', 'Architects Daughter', 'Caveat', serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Extra rounded corners for cartoon feel */
  --radius: 24px;

  /* Playful shadows - bouncy and colorful */
  --shadow-2xs: 0 2px 4px 0px rgba(139, 69, 19, 0.15);
  --shadow-xs: 0 3px 6px 0px rgba(139, 69, 19, 0.20), 0 2px 4px 0px rgba(255, 192, 203, 0.10);
  --shadow-sm: 0 6px 12px -2px rgba(139, 69, 19, 0.25), 0 4px 8px -2px rgba(255, 192, 203, 0.15);
  --shadow: 0 12px 24px -4px rgba(139, 69, 19, 0.30), 0 8px 16px -4px rgba(255, 192, 203, 0.20);
  --shadow-md: 0 20px 40px -8px rgba(139, 69, 19, 0.35), 0 12px 24px -8px rgba(255, 192, 203, 0.25);
  --shadow-lg: 0 30px 60px -12px rgba(139, 69, 19, 0.40), 0 18px 36px -12px rgba(255, 192, 203, 0.30);
  --shadow-xl: 0 40px 80px -16px rgba(139, 69, 19, 0.45), 0 24px 48px -16px rgba(255, 192, 203, 0.35);
  --shadow-2xl: 0 60px 120px -24px rgba(139, 69, 19, 0.50), 0 36px 72px -24px rgba(255, 192, 203, 0.40);

  /* Playful letter spacing */
  --tracking-normal: 0.02em;
  --spacing: 0.5rem;

  /* Extra rounded radius values */
  --radius-sm: 16px;
  --radius-md: 20px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* Cartoon-specific design tokens */
  --gradient-fun: linear-gradient(135deg, #FFB6C1 0%, #87CEEB 50%, #DDA0DD 100%);
  --gradient-success: linear-gradient(135deg, #98FB98 0%, #90EE90 100%);
  --gradient-warning: linear-gradient(135deg, #FFE4B5 0%, #FFDAB9 100%);
  --gradient-error: linear-gradient(135deg, #FFA07A 0%, #FFB6C1 100%);

  /* Bouncy animation timing */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-fun: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

* {
  font-family: var(--font-sans) !important;
}

body {
  background: linear-gradient(to bottom right, #ffc0cb 0%, #e6e6fa 50%, #b0e0e6 100%) !important;
  min-height: 100vh !important;
}

/* Fun animations */
@keyframes confetti {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-200px) rotate(720deg); opacity: 0; }
}

@keyframes sparkle {
  0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
  50% { transform: scale(1) rotate(180deg); opacity: 1; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

@keyframes rainbow {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-rainbow {
  animation: rainbow 3s linear infinite;
}

.bounce-in {
  animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounceIn {
  0% { transform: scale(0.3) rotate(-10deg); opacity: 0; }
  50% { transform: scale(1.2) rotate(5deg); opacity: 0.8; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.wiggle:hover {
  animation: wiggle 0.5s ease-in-out;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Cartoon-style component foundations */
.cartoon-card {
  background: var(--gradient-fun);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  border: 3px solid var(--primary);
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.cartoon-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
  transform: rotate(45deg);
  animation: shine 3s infinite;
  pointer-events: none; /* CRITICAL: Allow clicks to pass through to inputs/buttons */
}

@keyframes shine {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
  100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
}

.cartoon-button-primary {
  background: var(--gradient-fun);
  color: var(--foreground);
  border-radius: var(--radius-xl);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: var(--tracking-normal);
  transition: all 0.3s var(--ease-bounce);
  border: 3px solid var(--primary);
  padding: 18px 36px;
  min-height: 60px;
  text-transform: uppercase;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.cartoon-button-primary:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: var(--shadow-xl);
}

.cartoon-button-primary:active {
  transform: translateY(-2px) scale(0.98);
  box-shadow: var(--shadow-sm);
}

.cartoon-button-secondary {
  background: var(--gradient-success);
  color: var(--foreground);
  border-radius: var(--radius-xl);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: var(--tracking-normal);
  transition: all 0.3s var(--ease-bounce);
  border: 3px solid var(--success);
  padding: 16px 32px;
  min-height: 56px;
  box-shadow: var(--shadow);
}

.cartoon-input {
  background: var(--input);
  border: 3px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 24px;
  font-size: 20px;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: var(--tracking-normal);
  transition: all 0.3s var(--ease-bounce);
  min-height: 60px;
  box-shadow: var(--shadow-sm);
}

.cartoon-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(139, 69, 19, 0.3), var(--shadow-md);
  transform: scale(1.02);
}

/* Cartoon typography scale */
.text-title-large {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: var(--tracking-normal);
  line-height: 1.1;
  color: var(--primary);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.text-title {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: var(--tracking-normal);
  line-height: 1.2;
  color: var(--primary);
}

.text-headline {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: var(--tracking-normal);
  line-height: 1.3;
  color: var(--accent);
}

.text-body {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: var(--tracking-normal);
  line-height: 1.4;
  color: var(--foreground);
}

.text-caption {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: var(--tracking-normal);
  line-height: 1.3;
  color: var(--muted-foreground);
}

/* Placeholder text with sufficient contrast */
::placeholder {
  color: oklch(0.4500 0.0200 285.8273) !important;
  opacity: 1 !important;
}

input::placeholder,
textarea::placeholder {
  color: oklch(0.4500 0.0200 285.8273) !important;
  opacity: 1 !important;
}

/* Special cartoon effects */
.cartoon-widget {
  background: var(--card);
  border-radius: var(--radius-xl);
  border: 3px solid var(--primary);
  box-shadow: var(--shadow-lg);
  padding: 20px;
  transition: all 0.3s var(--ease-bounce);
  position: relative;
}

.cartoon-widget:hover {
  transform: translateY(-8px) rotate(1deg);
  box-shadow: var(--shadow-2xl);
}

.cartoon-table {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 3px solid var(--primary);
  box-shadow: var(--shadow);
}

.cartoon-table th {
  background: var(--gradient-fun);
  color: var(--foreground);
  font-weight: 700;
  font-size: 20px;
  padding: 20px;
  border-bottom: 2px solid var(--primary);
}

.cartoon-table td {
  background: var(--card);
  font-size: 18px;
  padding: 20px;
  border-bottom: 1px solid var(--border);
  transition: all 0.2s var(--ease-fun);
  line-height: 1.5;
}

.cartoon-table tr:hover td {
  background: var(--gradient-success);
  transform: scale(1.02);
}

.bg-gradient-success { background: var(--gradient-success); }
.bg-gradient-warning { background: var(--gradient-warning); }
.bg-gradient-error { background: var(--gradient-error); }
.bg-gradient-fun { background: var(--gradient-fun); }

/* Mobile responsive adjustments for Alert Recipients cards */
@media (max-width: 767px) {
  .cartoon-card {
    padding: 16px; /* Reduce from 24px to 16px on mobile */
  }

  .cartoon-input {
    min-height: 48px; /* Reduce from 60px to 48px */
    padding: 12px 16px; /* Reduce from 18px 24px */
    font-size: 18px; /* Reduce from 20px */
  }

  .cartoon-button-primary {
    min-height: 48px; /* Reduce from 60px */
    padding: 12px 24px; /* Reduce from 18px 36px */
    font-size: 14px; /* Reduce from 16px */
  }

  .cartoon-button-secondary {
    min-height: 48px; /* Reduce from 56px */
    padding: 12px 20px; /* Reduce from 16px 32px */
    font-size: 14px; /* Reduce from 16px */
  }
}

/* ========================================
   ACCESSIBILITY & KEYBOARD NAVIGATION STYLES
   ======================================== */

/* Screen reader only content */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}

/* Enhanced focus styles for keyboard navigation */
/* Remove default focus outline when clicked with mouse */
*:focus {
  outline: none;
}

/* Only show focus styles when using keyboard navigation (not mouse clicks) */
*:focus-visible {
  outline: 4px solid var(--ring);
  outline-offset: 3px;
  transition: outline 0.2s ease-in-out;
}

/* Button focus styles */
button:focus-visible,
.cartoon-button-primary:focus-visible,
.cartoon-button-secondary:focus-visible {
  outline: 4px solid var(--accent);
  outline-offset: 4px;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 8px var(--accent), var(--shadow-xl);
  transform: scale(1.05);
}

/* Input focus styles */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.cartoon-input:focus-visible {
  outline: 4px solid var(--primary);
  outline-offset: 2px;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--background), 0 0 0 6px var(--primary), var(--shadow-md);
}

/* Link focus styles */
a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

/* High contrast focus for interactive elements */
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible {
  outline: 4px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 8px var(--accent);
}

/* Card/Widget focus styles */
.cartoon-card:focus-visible,
.cartoon-widget:focus-visible {
  outline: 4px solid var(--primary);
  outline-offset: 4px;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 8px var(--primary), var(--shadow-2xl);
  transform: translateY(-12px) rotate(2deg);
}

/* Keyboard navigation indicators */
.keyboard-navigable {
  position: relative;
}

.keyboard-navigable::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 3px dashed transparent;
  border-radius: calc(var(--radius-xl) + 6px);
  opacity: 0;
  transition: all 0.3s var(--ease-bounce);
  pointer-events: none;
}

.keyboard-navigable:focus-within::after {
  border-color: var(--primary);
  opacity: 1;
}

/* Focus trap containers (modals, dropdowns) */
[role="dialog"]:focus-within,
[role="menu"]:focus-within,
[role="listbox"]:focus-within {
  box-shadow: 0 0 0 4px var(--accent), var(--shadow-2xl);
}

/* Disabled state - ensure proper contrast */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  filter: grayscale(50%);
}

button:disabled:focus,
input:disabled:focus,
select:disabled:focus,
textarea:disabled:focus,
[aria-disabled="true"]:focus {
  outline: 3px dashed var(--muted-foreground);
  outline-offset: 2px;
}

/* Invalid/Error state focus */
input:invalid:focus-visible,
textarea:invalid:focus-visible,
[aria-invalid="true"]:focus-visible {
  outline-color: var(--destructive);
  border-color: var(--destructive);
  box-shadow: 0 0 0 2px var(--background), 0 0 0 6px var(--destructive);
}

/* Loading state */
[aria-busy="true"] {
  position: relative;
  pointer-events: none;
}

[aria-busy="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2s ease-in-out infinite;
}

/* Expanded/Collapsed states */
[aria-expanded="true"] {
  background: var(--gradient-fun);
}

[aria-expanded="false"] {
  background: var(--muted);
}

/* Selected state */
[aria-selected="true"] {
  background: var(--gradient-success);
  border-color: var(--success);
  font-weight: 700;
}

/* Pressed/Toggled state */
[aria-pressed="true"] {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Table keyboard navigation */
table:focus-within {
  box-shadow: 0 0 0 4px var(--primary);
}

tr:focus-within td {
  background: var(--gradient-warning);
  outline: 2px solid var(--primary);
}

/* Live region visual indicator (for debugging) */
[aria-live="polite"]:not(.sr-only),
[aria-live="assertive"]:not(.sr-only) {
  border: 2px dashed var(--info);
  padding: 12px;
  margin: 12px 0;
  border-radius: var(--radius-lg);
  background: var(--gradient-fun);
}

/* Tooltip/Description connections */
[aria-describedby] {
  cursor: help;
}

/* Required field indicator */
[required]::after,
[aria-required="true"]::after {
  content: ' *';
  color: var(--destructive);
  font-weight: 700;
}

/* Modal/Dialog accessibility */
[role="dialog"] {
  position: fixed;
  z-index: 100;
}

[role="dialog"][aria-modal="true"]::backdrop,
[role="dialog"][aria-modal="true"] + .backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

/* Animation preferences - respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .animate-float,
  .animate-rainbow,
  .wiggle,
  .bounce-in {
    animation: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  * {
    border-width: 2px !important;
  }

  *:focus-visible {
    outline-width: 6px !important;
    outline-offset: 4px !important;
  }

  .cartoon-card,
  .cartoon-widget {
    border-width: 4px !important;
  }
}