@import 'tailwindcss';
@plugin "@tailwindcss/typography";
@plugin "tailwindcss-safe-area";
@plugin "daisyui";
/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/

@plugin "daisyui/theme" {
  name: "light";
  default: true;
  prefersdark: false;
  color-scheme: "light";
  --color-base-100: #ffffff;
  --color-primary: #4f46e5;
  --color-primary-content: #ffffff;
  --color-secondary: #10b981;
  --color-accent: #f59e0b;
  --color-neutral: #374151;
  --color-info: #3b82f6;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
}

@plugin "daisyui/theme" {
  name: "dark";
  default: false;
  prefersdark: true;
  color-scheme: "dark";
  --color-base-100: #111827;
  --color-primary: #4f46e5;
  --color-primary-content: #ffffff;
  --color-secondary: #10b981;
  --color-accent: #f59e0b;
  --color-neutral: #1f2937;
  --color-info: #3b82f6;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
}


@theme {
  --font-sans:
    Inter var, ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica,
    Apple Color Emoji, Arial, sans-serif, Segoe UI Emoji, Segoe UI Symbol;
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

@layer base {
  html,
  body,
  #root {
    height: -webkit-fill-available;
  }

  /* Prevent overscroll background color change on mobile */
  html {
    background-color: var(--color-base-200);
    position: fixed;
    width: 100%;
    overflow: hidden;
  }

  body {
    background-color: var(--color-base-200);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
}

/* Flash message animations */
@layer components {
  #flash-messages > div {
    animation: flash-in 0.3s ease forwards;
    opacity: 0;
    transform: translateY(-10px);
  }

  @keyframes flash-in {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* Print styles */
@media print {
  /* Override height constraints for printing */
  html, body {
    height: auto !important;
    overflow: visible !important;
    position: static !important;
    width: auto !important;
  }

  body {
    min-height: 0 !important;
    display: block !important;
    -webkit-overflow-scrolling: auto !important;
    overscroll-behavior-y: auto !important;
  }

  main {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }

  .container {
    height: auto !important;
    overflow: visible !important;
  }

  /* Ensure all elements expand for print */
  *, *::before, *::after {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Remove flex constraints */
  .flex, .flex-col, .flex-grow {
    height: auto !important;
  }

  .min-h-screen {
    min-height: 0 !important;
  }

  /* Ensure divs expand */
  div {
    height: auto !important;
    overflow: visible !important;
  }

  /* Chart specific sizing for print */
  .h-\[300px\] {
    height: 150px !important;
  }

  canvas {
    max-width: 100% !important;
    height: 150px !important;
  }

  /* Let pie charts size naturally */
  #triggerChartContainer.h-\[300px\],
  #medicationChartContainer.h-\[300px\] {
    height: auto !important;
  }

  #triggerChart,
  #medicationChart {
    height: auto !important;
    max-height: 250px !important;
  }

  /* Card sizing for print */
  .card {
    max-width: 100% !important;
    margin-bottom: 1rem !important;
  }

  .card-body {
    padding: 0.5rem !important;
  }

  /* Grid adjustments for print */
  .grid {
    gap: 0.5rem !important;
  }

  /* Maintain grid layout for pie charts */
  .print\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
