/* Tailwind CSS Local Styles */
/* This file contains essential Tailwind CSS styles for offline use */

/* Base styles */
*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

::before,
::after {
  --tw-content: '';
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
}

body {
  margin: 0;
  line-height: inherit;
}

/* Dark mode support */
.dark {
  color-scheme: dark;
}

/* Essential utility classes */
.bg-gray-50 { background-color: rgb(249 250 251); }
.bg-white { background-color: rgb(255 255 255); }
.bg-red-600 { background-color: rgb(220 38 38); }
.bg-gray-800 { background-color: rgb(31 41 55); }

.dark .bg-gray-900 { background-color: rgb(17 24 39); }
.dark .bg-gray-800 { background-color: rgb(31 41 55); }

.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

.text-primary-600 { color: rgb(2 132 199); }
.text-primary-400 { color: rgb(56 189 248); }
.text-gray-700 { color: rgb(55 65 81); }
.text-gray-300 { color: rgb(209 213 219); }
.text-gray-500 { color: rgb(107 114 128); }
.text-gray-400 { color: rgb(156 163 175); }
.text-white { color: rgb(255 255 255); }
.text-red-600 { color: rgb(220 38 38); }
.text-red-700 { color: rgb(185 28 28); }
.text-red-400 { color: rgb(248 113 113); }
.text-red-300 { color: rgb(252 165 165); }

.dark .text-gray-300 { color: rgb(209 213 219); }
.dark .text-gray-400 { color: rgb(156 163 175); }
.dark .text-white { color: rgb(255 255 255); }
.dark .text-primary-400 { color: rgb(56 189 248); }
.dark .text-red-400 { color: rgb(248 113 113); }
.dark .text-red-300 { color: rgb(252 165 165); }

.hover\:text-gray-900:hover { color: rgb(17 24 39); }
.hover\:text-red-700:hover { color: rgb(185 28 28); }
.dark .hover\:text-white:hover { color: rgb(255 255 255); }
.dark .hover\:text-red-300:hover { color: rgb(252 165 165); }

.max-w-7xl { max-width: 80rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-auto { margin-top: auto; }
.ml-3 { margin-left: 0.75rem; }

.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }

.h-16 { height: 4rem; }

.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-shrink-0 { flex-shrink: 0; }
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.shadow-lg { 
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.rounded-md { border-radius: 0.375rem; }
.rounded { border-radius: 0.25rem; }

.text-center { text-align: center; }
.relative { position: relative; }

/* Responsive utilities */
@media (min-width: 640px) {
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (min-width: 1024px) {
  .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
}

/* High contrast mode support */
.high-contrast .bg-white { background-color: #000000; color: #ffffff; }
.high-contrast .bg-gray-50 { background-color: #000000; color: #ffffff; }
.high-contrast .text-gray-700 { color: #ffffff; }
.high-contrast .text-gray-500 { color: #ffffff; }

/* Reduced motion support */
.reduce-motion * {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}