admin/src/index.css

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

:root {
  --toast-bg: #ffffff;
  --toast-color: #374151;
}

[data-theme="dark"] {
  --toast-bg: #1f2937;
  --toast-color: #f3f4f6;
}

@layer base {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
      "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
      "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    background-color: #f9fafb;
    transition: background-color 0.2s ease;
    /* Prevent horizontal scrolling on mobile */
    overflow-x: hidden;
  }

  .dark body {
    background-color: #111827;
  }

  /* Ensure touch targets are large enough on mobile */
  @media (max-width: 1024px) {
    button,
    a,
    [role="button"] {
      min-height: 44px;
      min-width: 44px;
    }
  }

  /* Improve text selection on mobile */
  @media (max-width: 768px) {
    * {
      -webkit-text-size-adjust: 100%;
      -webkit-tap-highlight-color: transparent;
    }
  }
}

@layer components {
  .card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700;
  }

  .btn-primary {
    @apply bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg transition-colors duration-200 font-medium;
  }

  .btn-secondary {
    @apply bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 px-4 py-2 rounded-lg transition-colors duration-200 font-medium;
  }

  .input {
    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors duration-200;
  }

  /* Mobile-specific utilities */
  .mobile-container {
    @apply px-4 sm:px-6 lg:px-8;
  }

  .mobile-card {
    @apply card p-4 sm:p-6;
  }

  /* Safe area for mobile devices */
  .safe-area {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Mobile-specific form improvements */
  @media (max-width: 768px) {
    .input,
    textarea,
    select {
      @apply text-base; /* Prevent zoom on iOS */
      font-size: 16px !important;
    }

    .form-grid {
      @apply grid-cols-1 gap-4;
    }

    .button-group {
      @apply flex-col space-y-3 space-x-0;
    }

    .button-group > * {
      @apply w-full;
    }
  }

  /* Responsive text utilities */
  .text-responsive-xs {
    @apply text-xs sm:text-sm;
  }

  .text-responsive-sm {
    @apply text-sm sm:text-base;
  }

  .text-responsive-base {
    @apply text-base sm:text-lg;
  }

  .text-responsive-lg {
    @apply text-lg sm:text-xl lg:text-2xl;
  }

  .text-responsive-xl {
    @apply text-xl sm:text-2xl lg:text-3xl;
  }

  /* Mobile chart container */
  .chart-container {
    @apply w-full overflow-hidden;
    min-height: 200px;
  }

  @media (max-width: 640px) {
    .chart-container {
      min-height: 180px;
    }
  }
}