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

@layer components {
  /* Universal Button System - Clean and Simple */
  
  /* Base button class with accessibility */
  .btn {
    @apply inline-flex items-center justify-center font-normal rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
    @apply py-2.5 px-4 text-sm min-h-[40px] min-w-[80px];
    /* Default medium size - can be overridden by size classes */
  }

  /* Size variants */
  .btn-sm {
    @apply py-2 px-3 text-sm min-h-[36px] min-w-[64px];
  }

  .btn-md {
    @apply py-2.5 px-4 text-sm min-h-[40px] min-w-[80px];
  }

  .btn-lg {
    @apply py-3 px-6 text-base min-h-[44px] min-w-[96px];
  }

  /* Color variants with WCAG-compliant hover states */
  .btn-primary {
    @apply bg-blue-600 text-white border border-blue-600;
    @apply hover:bg-blue-700 hover:border-blue-700;
    @apply active:bg-blue-800 active:border-blue-800;
    @apply focus:ring-blue-500;
  }

  .btn-secondary {
    @apply bg-white text-gray-700 border border-gray-300;
    @apply hover:bg-gray-50 hover:border-gray-400 hover:text-gray-800;
    @apply active:bg-gray-100 active:border-gray-500 active:text-gray-900;
    @apply focus:ring-blue-500;
  }

  .btn-success {
    @apply bg-green-600 text-white border border-green-600;
    @apply hover:bg-green-700 hover:border-green-700;
    @apply active:bg-green-800 active:border-green-800;
    @apply focus:ring-green-500;
  }

  .btn-warning {
    @apply bg-orange-600 text-white border border-orange-600;
    @apply hover:bg-orange-700 hover:border-orange-700;
    @apply active:bg-orange-800 active:border-orange-800;
    @apply focus:ring-orange-500;
  }

  .btn-danger {
    @apply bg-red-600 text-white border border-red-600;
    @apply hover:bg-red-700 hover:border-red-700;
    @apply active:bg-red-800 active:border-red-800;
    @apply focus:ring-red-500;
  }

  .btn-light {
    @apply bg-white text-gray-900 border border-gray-300;
    @apply hover:bg-gray-50 hover:border-gray-400;
    @apply active:bg-gray-100 active:border-gray-500;
    @apply focus:ring-blue-500;
  }

  .btn-link {
    @apply bg-transparent text-blue-600 border border-transparent;
    @apply hover:bg-blue-50 hover:text-blue-700;
    @apply active:bg-blue-100 active:text-blue-800;
    @apply focus:ring-blue-500;
  }

  /* Button group for table actions */
  .btn-group {
    @apply flex items-center justify-end gap-2;
    /* Right-aligned by default for table actions */
  }

  .btn-group .btn {
    @apply btn-sm;
    /* Table action buttons are small by default */
  }

  /* Responsive button group for mobile */
  @media (max-width: 640px) {
    .btn-group {
      @apply flex-col gap-1;
    }
    
    .btn-group .btn {
      @apply w-full min-h-[44px];
    }
  }
}

@layer base {
  body {
    @apply bg-gray-50 text-gray-900 font-sans text-sm;
  }
  
  h1 {
    @apply text-3xl font-bold mb-6 text-gray-900;
  }
  
  h2 {
    @apply text-2xl font-bold mb-4 text-gray-800;
  }
  
  h3 {
    @apply text-xl font-bold mb-3 text-gray-800;
  }
}


/* Typography improvements for System UI font and accessibility */
@layer base {
  /* Ensure System UI font is used consistently */
  * {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  
  /* Base typography with 16px font size */
  html {
    font-size: 16px;
    line-height: 1.5;
  }
  
  body {
    @apply bg-gray-50 text-gray-900 text-base;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  
  /* Improved heading hierarchy */
  h1 {
    @apply text-3xl font-bold mb-6 text-gray-900;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  
  h2 {
    @apply text-2xl font-bold mb-4 text-gray-800;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  
  h3 {
    @apply text-xl font-bold mb-3 text-gray-800;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  
  /* Enhanced accessibility for links */
  a {
    @apply transition-colors duration-200;
  }
  
  a:focus {
    @apply outline-2 outline-offset-2 outline-blue-500;
  }
  
  /* Improved form element accessibility */
  input:focus,
  textarea:focus,
  select:focus {
    @apply outline-2 outline-offset-2 outline-blue-500;
  }
}

/* Enhanced mobile responsiveness */
@layer utilities {
  /* Mobile-first responsive text sizes */
  .text-responsive-sm {
    @apply text-sm;
  }
  
  .text-responsive-base {
    @apply text-base;
  }
  
  .text-responsive-lg {
    @apply text-lg sm:text-xl;
  }
  
  .text-responsive-xl {
    @apply text-xl sm:text-2xl;
  }
  
  .text-responsive-2xl {
    @apply text-2xl sm:text-3xl;
  }
  
  /* Mobile-friendly spacing */
  .spacing-mobile {
    @apply px-4 py-2 sm:px-6 sm:py-3;
  }
  
  /* Touch-friendly interactive elements */
  .touch-target {
    @apply min-h-[44px] min-w-[44px];
  }
}

/* iPhone 14+ Portrait Mode Optimizations (390x844px) */
@layer components {
  /* Mobile-optimized navigation */
  .mobile-nav {
    @apply fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-50;
    @apply flex justify-around items-center py-2;
    @apply sm:hidden; /* Hide on larger screens */
  }
  
  .mobile-nav-item {
    @apply flex flex-col items-center justify-center p-2 min-h-[44px] min-w-[44px];
    @apply text-xs text-gray-600 hover:text-blue-600 transition-colors;
  }
  
  /* Mobile-optimized tables */
  .mobile-table {
    @apply block sm:table;
  }
  
  .mobile-table thead {
    @apply hidden sm:table-header-group;
  }
  
  .mobile-table tbody {
    @apply block sm:table-row-group;
  }
  
  .mobile-table tr {
    @apply block border border-gray-200 rounded-lg mb-4 p-4 sm:table-row sm:border-0 sm:rounded-none sm:mb-0 sm:p-0;
  }
  
  .mobile-table td {
    @apply block text-left border-0 py-2 sm:table-cell sm:py-4 sm:px-6;
  }
  
  .mobile-table td:before {
    content: attr(data-label) ": ";
    @apply font-medium text-gray-700 sm:hidden;
  }
  
  /* Mobile-optimized forms */
  .mobile-form {
    @apply space-y-4;
  }
  
  .mobile-form .form-group {
    @apply flex flex-col space-y-2;
  }
  
  .mobile-form label {
    @apply text-sm font-medium text-gray-700;
  }
  
  .mobile-form input,
  .mobile-form textarea,
  .mobile-form select {
    @apply w-full min-h-[44px] px-3 py-2 border border-gray-300 rounded-md;
    @apply focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
  }
  
  /* Mobile-optimized cards */
  .mobile-card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 p-4;
    @apply mb-4 sm:mb-6;
  }
  
  .mobile-card-header {
    @apply flex flex-col sm:flex-row sm:items-center sm:justify-between;
    @apply mb-4 space-y-2 sm:space-y-0;
  }
  
  .mobile-card-title {
    @apply text-lg font-semibold text-gray-900;
  }
  
  .mobile-card-actions {
    @apply flex flex-col sm:flex-row gap-2;
  }
}

/* iPhone 14+ specific breakpoints and optimizations */
@media (max-width: 390px) {
  /* Extra small mobile optimizations */
  .container {
    @apply px-3;
  }
  
  .btn-group {
    @apply flex-col gap-1;
  }
  
  .btn-group .btn {
    @apply w-full;
  }
  
  /* Optimize text sizes for small screens */
  h1 {
    @apply text-2xl;
  }
  
  h2 {
    @apply text-xl;
  }
  
  h3 {
    @apply text-lg;
  }
}

@media (min-width: 391px) and (max-width: 640px) {
  /* iPhone 14+ and similar device optimizations */
  .responsive-grid {
    @apply grid-cols-1;
  }
  
  .responsive-flex {
    @apply flex-col space-y-4;
  }
  
  /* Optimize button groups for this screen size */
  .btn-group {
    @apply flex-row flex-wrap gap-2;
  }
  
  .btn-group .btn {
    @apply flex-1 min-w-[120px];
  }
}

/* Touch-friendly improvements */
@layer utilities {
  .touch-friendly {
    @apply min-h-[44px] min-w-[44px] p-3;
  }
  
  .touch-friendly-sm {
    @apply min-h-[36px] min-w-[36px] p-2;
  }
  
  .touch-friendly-lg {
    @apply min-h-[48px] min-w-[48px] p-4;
  }
}

/* Improved responsive navigation */
@media (max-width: 640px) {
  .desktop-nav {
    @apply hidden;
  }
  
  .mobile-nav-toggle {
    @apply block;
  }
  
  /* Ensure proper spacing for mobile navigation */
  .main-content {
    @apply pb-20; /* Account for bottom navigation */
  }
}

@media (min-width: 641px) {
  .desktop-nav {
    @apply block;
  }
  
  .mobile-nav {
    @apply hidden;
  }
  
  .mobile-nav-toggle {
    @apply hidden;
  }
  
  .main-content {
    @apply pb-0;
  }
}

/* Prose styling for rich content areas */
@layer components {
  .prose-custom {
    @apply text-gray-900 dark:text-gray-100;
  }
  
  .prose-custom ul {
    @apply list-disc list-inside mb-4 space-y-2;
    margin-left: 1.25rem;
  }
  
  .prose-custom ol {
    @apply list-decimal list-inside mb-4 space-y-2;
    margin-left: 1.25rem;
  }
  
  .prose-custom li {
    @apply text-gray-700 dark:text-gray-300 leading-relaxed;
    margin-bottom: 0.5rem;
  }
  
  .prose-custom li ul,
  .prose-custom li ol {
    @apply mt-2 mb-2;
    margin-left: 1.5rem;
  }
  
  .prose-custom p {
    @apply mb-4 leading-relaxed text-gray-700 dark:text-gray-300;
  }
  
  .prose-custom strong {
    @apply font-semibold text-gray-900 dark:text-gray-100;
  }
  
  .prose-custom em {
    @apply italic;
  }
  
  .prose-custom a {
    @apply text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 underline;
  }
  
  .prose-custom h1,
  .prose-custom h2,
  .prose-custom h3,
  .prose-custom h4,
  .prose-custom h5,
  .prose-custom h6 {
    @apply font-semibold text-gray-900 dark:text-gray-100 mb-3;
  }
  
  .prose-custom h1 { @apply text-2xl; }
  .prose-custom h2 { @apply text-xl; }
  .prose-custom h3 { @apply text-lg; }
  .prose-custom h4 { @apply text-base; }
  .prose-custom h5 { @apply text-sm; }
  .prose-custom h6 { @apply text-xs; }
  
  .prose-custom blockquote {
    @apply border-l-4 border-gray-300 dark:border-gray-600 pl-4 italic text-gray-600 dark:text-gray-400 mb-4;
  }
  
  .prose-custom code {
    @apply bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded text-sm font-mono;
  }
  
  .prose-custom pre {
    @apply bg-gray-100 dark:bg-gray-800 p-4 rounded-lg overflow-x-auto mb-4;
  }
  
  .prose-custom pre code {
    @apply bg-transparent p-0;
  }
}