/* PhoenixKit DaisyUI 5 Theme Definitions */
/* Color-only themes to prevent layout jumping */

/* ============================================================================
   Fade In/Out Animations
   Used for progress bars and dynamic content
   ============================================================================ */

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

@keyframes pk-fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pk-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.animate-fade-in {
  animation: pk-fade-in 0.3s ease-out;
}

.animate-fade-in-down {
  animation: pk-fade-in-down 0.3s ease-out;
}

.animate-fade-out {
  animation: pk-fade-out 0.2s ease-in forwards;
}

/* Custom Phoenix Themes */
[data-theme=phoenix-light] {
  color-scheme: light;
  --color-primary: oklch(57.38% 0.233 262.08);
  --color-primary-content: oklch(98% 0.02 262.08);
  --color-secondary: oklch(75.61% 0.194 333.67);
  --color-secondary-content: oklch(20% 0.02 333.67);
  --color-accent: oklch(74.22% 0.209 6.35);
  --color-accent-content: oklch(20% 0.02 6.35);
  --color-neutral: oklch(23.04% 0.065 269.31);
  --color-neutral-content: oklch(98% 0.02 269.31);
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(96% 0 0);
  --color-base-300: oklch(92% 0.005 286.88);
  --color-base-content: oklch(20% 0.02 269.31);
  --color-info: oklch(72.06% 0.191 231.6);
  --color-info-content: oklch(20% 0.02 231.6);
  --color-success: oklch(64.8% 0.150 160);
  --color-success-content: oklch(20% 0.02 160);
  --color-warning: oklch(84.71% 0.199 83.87);
  --color-warning-content: oklch(20% 0.02 83.87);
  --color-error: oklch(71.76% 0.221 22.18);
  --color-error-content: oklch(20% 0.02 22.18);
}

[data-theme=phoenix-dark] {
  color-scheme: dark;
  --color-primary: oklch(57.38% 0.233 262.08);
  --color-primary-content: oklch(98% 0.02 262.08);
  --color-secondary: oklch(75.61% 0.194 333.67);
  --color-secondary-content: oklch(20% 0.02 333.67);
  --color-accent: oklch(74.22% 0.209 6.35);
  --color-accent-content: oklch(20% 0.02 6.35);
  --color-neutral: oklch(32.77% 0.033 264.54);
  --color-neutral-content: oklch(85% 0.02 264.54);
  --color-base-100: oklch(25.33% 0.024 265.76);
  --color-base-200: oklch(23.45% 0.022 265.76);
  --color-base-300: oklch(21.68% 0.020 265.76);
  --color-base-content: oklch(85% 0.02 265.76);
  --color-info: oklch(72.06% 0.191 231.6);
  --color-info-content: oklch(20% 0.02 231.6);
  --color-success: oklch(64.8% 0.150 160);
  --color-success-content: oklch(20% 0.02 160);
  --color-warning: oklch(84.71% 0.199 83.87);
  --color-warning-content: oklch(20% 0.02 83.87);
  --color-error: oklch(71.76% 0.221 22.18);
  --color-error-content: oklch(20% 0.02 22.18);
}

/* Black Theme - OLED-friendly */
[data-theme=black] {
  color-scheme: dark;
  --color-primary: oklch(65.91% 0.196 273.21);
  --color-primary-content: oklch(17.43% 0.037 277.02);
  --color-secondary: oklch(47.73% 0.103 236.64);
  --color-secondary-content: oklch(89.19% 0.023 236.59);
  --color-accent: oklch(70.71% 0.191 327.17);
  --color-accent-content: oklch(12.19% 0.042 329.69);
  --color-neutral: oklch(14.86% 0.046 272.16);
  --color-neutral-content: oklch(86.9% 0.017 272.16);
  --color-base-100: oklch(9.04% 0 0);
  --color-base-200: oklch(11.13% 0.019 272.16);
  --color-base-300: oklch(15.31% 0.038 272.16);
  --color-base-content: oklch(86.9% 0.017 272.16);
  --color-info: oklch(64.04% 0.197 247.86);
  --color-info-content: oklch(17.43% 0.037 247.96);
  --color-success: oklch(64.04% 0.197 142.5);
  --color-success-content: oklch(17.43% 0.037 142.5);
  --color-warning: oklch(84.71% 0.199 83.87);
  --color-warning-content: oklch(17.43% 0.037 84.24);
  --color-error: oklch(71.76% 0.221 22.18);
  --color-error-content: oklch(17.43% 0.037 22.18);
}

/* ============================================================================
   Mobile Responsiveness Fixes
   Override DaisyUI styles for better mobile experience

   NOTE: Core DaisyUI label/flex/checkbox overrides live in
   phoenix_kit_daisyui5.css (loaded first). This file adds app-specific
   mobile layout fixes only.
   ============================================================================ */

/* General label improvements for all screen sizes */
.label-text,
.label-text-alt {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile: label-text-alt should stack below and align left */
@media (max-width: 768px) {
  .form-control .label .label-text-alt {
    margin-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
    font-size: 0.75rem !important;
  }
}

/* Mobile-specific fixes */
@media (max-width: 768px) {
  /* Allow cursor-pointer labels to wrap */
  .label.cursor-pointer,
  label.label.cursor-pointer {
    white-space: normal !important;
  }

  /* Improve form control spacing on mobile */
  .form-control {
    margin-bottom: 0.75rem;
  }

  /* Ensure form inputs take full width on mobile */
  .form-control input:not([type="checkbox"]):not([type="radio"]),
  .form-control select,
  .form-control textarea {
    width: 100%;
    min-width: 0;
  }

  /* Fix long text overflow in form fields */
  .input,
  .select,
  .textarea {
    width: 100%;
  }

  /* Handle very long labels in settings forms */
  .max-w-2xl .form-control .label-text {
    font-size: 0.875rem;
  }

  /* Improve button spacing on mobile - stack buttons vertically */
  .flex.gap-3 > .btn,
  .flex.gap-4 > .btn,
  .flex.gap-2 > .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  /* Fix flex containers that should stack on mobile */
  .flex.flex-wrap.items-center.gap-3,
  .flex.flex-wrap.items-center.gap-4 {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Tablet-specific adjustments */
@media (max-width: 1024px) {
  /* Allow slightly more wrapping on tablets */
  .label span.label-text {
    word-break: break-all;
  }

  /* Make modals more mobile-friendly */
  .modal-box {
    width: 95% !important;
    max-width: none;
  }
}

/* Small mobile fixes */
@media (max-width: 640px) {
  /* Improve button spacing on small mobile devices */
  .flex.gap-3 {
    flex-direction: column;
    gap: 0.5rem !important;
  }

  /* Make form containers take full width */
  .max-w-2xl {
    width: 100%;
    max-width: 100%;
  }

  /* Fix container padding on very small screens */
  .container.mx-auto.px-4 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* Fix for long unbreakable text (URLs, emails, etc.) */
@media (max-width: 768px) {
  .break-all {
    word-break: break-all !important;
  }

  /* Ensure code blocks wrap on mobile */
  code,
  .font-mono {
    word-break: break-word;
    white-space: pre-wrap;
  }
}

/* Cupcake Theme - Soft pastel light theme */
[data-theme=cupcake] {
  color-scheme: light;
  --color-primary: oklch(69.71% 0.196 12.19);
  --color-primary-content: oklch(27.19% 0.046 12.19);
  --color-secondary: oklch(76.76% 0.152 346.53);
  --color-secondary-content: oklch(23.26% 0.038 346.53);
  --color-accent: oklch(74.83% 0.172 49.77);
  --color-accent-content: oklch(24.92% 0.048 49.77);
  --color-neutral: oklch(89.8% 0.011 319.24);
  --color-neutral-content: oklch(27.19% 0.046 319.24);
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(98.41% 0.014 319.24);
  --color-base-300: oklch(95.27% 0.018 319.24);
  --color-base-content: oklch(27.19% 0.046 319.24);
  --color-info: oklch(65.68% 0.196 247.86);
  --color-info-content: oklch(27.19% 0.046 247.96);
  --color-success: oklch(64.04% 0.197 142.5);
  --color-success-content: oklch(27.19% 0.046 142.5);
  --color-warning: oklch(84.71% 0.199 83.87);
  --color-warning-content: oklch(27.19% 0.046 84.24);
  --color-error: oklch(71.76% 0.221 22.18);
  --color-error-content: oklch(27.19% 0.046 22.18);
}

/* Synthwave Theme - Neon purple/cyan dark theme */
[data-theme=synthwave] {
  color-scheme: dark;
  --color-primary: oklch(69.71% 0.196 331.56);
  --color-primary-content: oklch(17.43% 0.037 331.56);
  --color-secondary: oklch(47.73% 0.103 256.76);
  --color-secondary-content: oklch(89.19% 0.023 256.76);
  --color-accent: oklch(74.83% 0.172 186.39);
  --color-accent-content: oklch(17.43% 0.037 186.39);
  --color-neutral: oklch(21.7% 0.044 264.79);
  --color-neutral-content: oklch(89.19% 0.023 264.79);
  --color-base-100: oklch(26.47% 0.021 264.79);
  --color-base-200: oklch(23.11% 0.018 264.79);
  --color-base-300: oklch(20.14% 0.016 264.79);
  --color-base-content: oklch(89.19% 0.023 264.79);
  --color-info: oklch(65.68% 0.196 247.86);
  --color-info-content: oklch(17.43% 0.037 247.96);
  --color-success: oklch(64.04% 0.197 142.5);
  --color-success-content: oklch(17.43% 0.037 142.5);
  --color-warning: oklch(84.71% 0.199 83.87);
  --color-warning-content: oklch(17.43% 0.037 84.24);
  --color-error: oklch(71.76% 0.221 22.18);
  --color-error-content: oklch(17.43% 0.037 22.18);
}

/* Cyberpunk Theme - Bold yellow/pink light theme */
[data-theme=cyberpunk] {
  color-scheme: light;
  --color-primary: oklch(62.95% 0.238 65.62);
  --color-primary-content: oklch(32.54% 0.058 65.62);
  --color-secondary: oklch(74.51% 0.172 334.94);
  --color-secondary-content: oklch(27.84% 0.053 334.94);
  --color-accent: oklch(74.83% 0.172 0.19);
  --color-accent-content: oklch(27.84% 0.053 0.19);
  --color-neutral: oklch(29.37% 0.066 281.49);
  --color-neutral-content: oklch(92.84% 0.019 281.49);
  --color-base-100: oklch(95.47% 0.019 281.49);
  --color-base-200: oklch(90.41% 0.016 281.49);
  --color-base-300: oklch(84.34% 0.014 281.49);
  --color-base-content: oklch(32.54% 0.058 281.49);
  --color-info: oklch(65.68% 0.196 247.86);
  --color-info-content: oklch(32.54% 0.058 247.96);
  --color-success: oklch(64.04% 0.197 142.5);
  --color-success-content: oklch(32.54% 0.058 142.5);
  --color-warning: oklch(84.71% 0.199 83.87);
  --color-warning-content: oklch(32.54% 0.058 84.24);
  --color-error: oklch(71.76% 0.221 22.18);
  --color-error-content: oklch(32.54% 0.058 22.18);
}

/* Forest Theme - Green nature dark theme */
[data-theme=forest] {
  color-scheme: dark;
  --color-primary: oklch(67.69% 0.187 152.23);
  --color-primary-content: oklch(17.43% 0.037 152.23);
  --color-secondary: oklch(47.73% 0.103 172.79);
  --color-secondary-content: oklch(89.19% 0.023 172.79);
  --color-accent: oklch(74.83% 0.172 142.5);
  --color-accent-content: oklch(17.43% 0.037 142.5);
  --color-neutral: oklch(25.25% 0.032 152.23);
  --color-neutral-content: oklch(89.19% 0.023 152.23);
  --color-base-100: oklch(20.65% 0.025 152.23);
  --color-base-200: oklch(17.85% 0.022 152.23);
  --color-base-300: oklch(15.43% 0.019 152.23);
  --color-base-content: oklch(89.19% 0.023 152.23);
  --color-info: oklch(65.68% 0.196 247.86);
  --color-info-content: oklch(17.43% 0.037 247.96);
  --color-success: oklch(64.04% 0.197 142.5);
  --color-success-content: oklch(17.43% 0.037 142.5);
  --color-warning: oklch(84.71% 0.199 83.87);
  --color-warning-content: oklch(17.43% 0.037 84.24);
  --color-error: oklch(71.76% 0.221 22.18);
  --color-error-content: oklch(17.43% 0.037 22.18);
}

/* Dracula Theme - Purple/pink vampire dark theme */
[data-theme=dracula] {
  color-scheme: dark;
  --color-primary: oklch(65.91% 0.196 327.17);
  --color-primary-content: oklch(17.43% 0.037 327.17);
  --color-secondary: oklch(47.73% 0.103 296.67);
  --color-secondary-content: oklch(89.19% 0.023 296.67);
  --color-accent: oklch(74.83% 0.172 12.19);
  --color-accent-content: oklch(17.43% 0.037 12.19);
  --color-neutral: oklch(26.95% 0.041 277.02);
  --color-neutral-content: oklch(89.19% 0.023 277.02);
  --color-base-100: oklch(21.7% 0.032 277.02);
  --color-base-200: oklch(18.73% 0.028 277.02);
  --color-base-300: oklch(16.17% 0.024 277.02);
  --color-base-content: oklch(89.19% 0.023 277.02);
  --color-info: oklch(65.68% 0.196 247.86);
  --color-info-content: oklch(17.43% 0.037 247.96);
  --color-success: oklch(64.04% 0.197 142.5);
  --color-success-content: oklch(17.43% 0.037 142.5);
  --color-warning: oklch(84.71% 0.199 83.87);
  --color-warning-content: oklch(17.43% 0.037 84.24);
  --color-error: oklch(71.76% 0.221 22.18);
  --color-error-content: oklch(17.43% 0.037 22.18);
}

/* Sunset Theme - Warm orange/purple dark theme */
[data-theme=sunset] {
  color-scheme: dark;
  --color-primary: oklch(69.71% 0.196 38.4);
  --color-primary-content: oklch(17.43% 0.037 38.4);
  --color-secondary: oklch(47.73% 0.103 327.17);
  --color-secondary-content: oklch(89.19% 0.023 327.17);
  --color-accent: oklch(74.83% 0.172 274.97);
  --color-accent-content: oklch(17.43% 0.037 274.97);
  --color-neutral: oklch(26.76% 0.036 19.18);
  --color-neutral-content: oklch(89.19% 0.023 19.18);
  --color-base-100: oklch(21.31% 0.028 19.18);
  --color-base-200: oklch(18.43% 0.024 19.18);
  --color-base-300: oklch(15.93% 0.021 19.18);
  --color-base-content: oklch(89.19% 0.023 19.18);
  --color-info: oklch(65.68% 0.196 247.86);
  --color-info-content: oklch(17.43% 0.037 247.96);
  --color-success: oklch(64.04% 0.197 142.5);
  --color-success-content: oklch(17.43% 0.037 142.5);
  --color-warning: oklch(84.71% 0.199 83.87);
  --color-warning-content: oklch(17.43% 0.037 84.24);
  --color-error: oklch(71.76% 0.221 22.18);
  --color-error-content: oklch(17.43% 0.037 22.18);
}

/* ============================================================================
   Tailwind Typography Prose Overrides with DaisyUI Theme Integration
   Extends prose classes to use daisyUI's theme-aware CSS custom properties.
   ============================================================================ */

@layer base {
  /* Override prose colors to use daisyUI theme variables */
  .prose {
    color: oklch(var(--bc));
    max-width: 65ch;
  }

  /* Headings */
  .prose h1 {
    color: oklch(var(--bc));
    font-size: 2.25rem;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid oklch(var(--bc) / 0.1);
  }

  .prose h2 {
    color: oklch(var(--bc));
    font-size: 1.875rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
  }

  .prose h3 {
    color: oklch(var(--bc));
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
  }

  .prose h4 {
    color: oklch(var(--bc));
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }

  .prose h5 {
    color: oklch(var(--bc));
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }

  .prose h6 {
    color: oklch(var(--bc));
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }

  /* Paragraphs */
  .prose p {
    margin-top: 1rem;
    margin-bottom: 1rem;
    line-height: 1.7;
  }

  /* Text emphasis */
  .prose strong {
    color: oklch(var(--bc));
    font-weight: 700;
  }

  .prose em {
    color: oklch(var(--bc));
    font-style: italic;
  }

  .prose del,
  .prose s {
    color: oklch(var(--bc) / 0.7);
    text-decoration: line-through;
  }

  /* Horizontal rule */
  .prose hr {
    border-color: oklch(var(--bc) / 0.1);
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  /* Inline code */
  .prose code {
    color: oklch(var(--bc));
    background-color: oklch(var(--b2));
    padding: 0.2em 0.4em;
    border-radius: 0.25rem;
    font-size: 0.9em;
  }

  /* Code blocks */
  .prose pre {
    color: oklch(var(--bc));
    background-color: oklch(var(--b3));
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .prose pre code {
    background-color: transparent;
    padding: 0;
    color: inherit;
  }

  /* Links */
  .prose a {
    color: oklch(var(--p));
    text-decoration: underline;
  }

  .prose a:hover {
    color: oklch(var(--pf));
  }

  /* Blockquotes */
  .prose blockquote {
    color: oklch(var(--bc) / 0.7);
    border-left-color: oklch(var(--p));
    border-left-width: 4px;
    border-left-style: solid;
    padding-left: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-style: italic;
  }

  /* Tables */
  .prose table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .prose table th,
  .prose table td {
    border: 1px solid oklch(var(--bc) / 0.2);
    padding: 0.5rem;
    text-align: left;
  }

  .prose table th {
    color: oklch(var(--bc));
    background-color: oklch(var(--b2));
    font-weight: 600;
  }

  .prose table td {
    color: oklch(var(--bc));
  }

  /* Images */
  .prose img {
    border-radius: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  /* Lists */
  .prose ul,
  .prose ol {
    color: oklch(var(--bc));
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-left: 2rem;
  }

  .prose li {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  /* Task lists (checkboxes) */
  .prose input[type="checkbox"] {
    margin-right: 0.5rem;
    cursor: pointer;
  }

  .prose li:has(input[type="checkbox"]) {
    list-style: none;
    margin-left: -1.5rem;
  }

  /* Large prose variant */
  .prose-lg {
    font-size: 1.125rem;
    line-height: 1.75;
  }

  .prose-lg h1 {
    font-size: 2.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
  }

  .prose-lg h2 {
    font-size: 2rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
  }

  .prose-lg h3 {
    font-size: 1.75rem;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
  }

  /* Small prose variant */
  .prose-sm {
    font-size: 0.875rem;
    line-height: 1.6;
  }

  .prose-sm h1 {
    font-size: 1.875rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
  }

  .prose-sm h2 {
    font-size: 1.5rem;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
  }
}