/* Production-specific overrides to ensure consistency with development */

/* Critical layout fixes */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  line-height: 1.5 !important;
  color: #333 !important;
  background-color: #f7f7f7 !important;
  padding-top: 0 !important;
  margin: 0 !important;
}

/* Header fixes */
.header, header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background-color: #f7f7f7 !important;
  padding: 1rem 0 !important;
  z-index: 50 !important;
  border-bottom: 1px solid rgba(0,0,0,0.1) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

/* Navigation fixes */
.nav, nav {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

.nav-list, nav ul {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1.5rem !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Critical transitions and transforms */
.transition-transform {
  transition: transform 0.3s ease !important;
}

.rotate-180 {
  transform: rotate(180deg) !important;
}

/* Icon sizing */
.h-5 {
  height: 1.25rem !important;
}

.w-5 {
  width: 1.25rem !important;
}

/* Critical color classes */
.bg-yellow-400 {
  background-color: #fbbf24 !important;
}

.bg-white {
  background-color: #ffffff !important;
}

.text-green-600 {
  color: #4a934a !important;
}

/* Card and container styles */
.container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
}

.card, .bg-card-white {
  background-color: white !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

/* Font styles */
.text-base {
  font-size: 1rem !important;
}

.text-xl {
  font-size: 1.25rem !important;
}

.font-bold {
  font-weight: 700 !important;
}

/* Spacing utilities */
.py-8 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.mb-8 {
  margin-bottom: 2rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mr-2 {
  margin-right: 0.5rem !important;
}

.-mt-6 {
  margin-top: -1.5rem !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Critical layout classes */
.relative {
  position: relative !important;
}

.z-10 {
  z-index: 10 !important;
}

.border-2 {
  border-width: 2px !important;
  border-style: solid !important;
}

.border-gray-300 {
  border-color: #d1d5db !important;
}

.border-gray-800 {
  border-color: #1f2937 !important;
}

.rounded-lg {
  border-radius: 0.5rem !important;
}

/* Whitepaper page specific */
.cursor-pointer {
  cursor: pointer !important;
}

.flex {
  display: flex !important;
}

.justify-between {
  justify-content: space-between !important;
}

.items-center {
  align-items: center !important;
}

.hidden {
  display: none !important;
}

.p-4 {
  padding: 1rem !important;
}

.p-6 {
  padding: 1.5rem !important;
}

/* Other critical classes we've observed are different */
.max-w-4xl {
  max-width: 56rem !important;
}

.max-w-5xl {
  max-width: 64rem !important;
}

/* Whitepaper content styling fixes */
.collapsible-content {
  padding: 1.5rem !important;
  border-top: 1px solid #e5e7eb !important;
}

.collapsible-content h3 {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
  color: #1f2937 !important;
}

.collapsible-content p {
  margin-bottom: 1rem !important;
  color: #4b5563 !important;
}

/* Fix for list indentation and bullets */
.collapsible-content ul {
  list-style-type: disc !important;
  padding-left: 1.25rem !important;
  margin-bottom: 1rem !important;
}

.collapsible-content ul li {
  margin-bottom: 0.25rem !important;
  display: list-item !important;
  color: #4b5563 !important;
}

.collapsible-content ul.list-disc {
  list-style-type: disc !important;
  padding-left: 1.25rem !important;
  margin-bottom: 1rem !important;
}

.collapsible-content .list-disc li {
  display: list-item !important;
  margin-bottom: 0.25rem !important;
}

/* Strong tag styling */
.collapsible-content strong {
  font-weight: 700 !important;
  color: #1f2937 !important;
}

/* Background and spacing for sections */
.bg-blue-50, .bg-purple-50, .bg-amber-50, .bg-green-50 {
  background-color: #f0f9ff !important;
}

.bg-blue-50 {
  background-color: #eff6ff !important;
}

.bg-purple-50 {
  background-color: #f5f3ff !important;
}

.bg-amber-50 {
  background-color: #fffbeb !important;
}

.bg-green-50 {
  background-color: #ecfdf5 !important;
}

/* Specific text colors for whitepaper */
.text-blue-500 {
  color: #3b82f6 !important;
}

.text-purple-500 {
  color: #8b5cf6 !important;
}

.text-amber-500 {
  color: #f59e0b !important;
}

.text-green-500 {
  color: #10b981 !important;
}

/* Fix specific spacing for whitepaper lists */
.space-y-3 > * + * {
  margin-top: 0.75rem !important;
}

.space-y-2 > * + * {
  margin-top: 0.5rem !important;
}

/* Text coloring */
.text-gray-700 {
  color: #4b5563 !important;
}

.text-gray-800 {
  color: #1f2937 !important;
}

.text-gray-600 {
  color: #6b7280 !important;
}

.text-gray-900 {
  color: #111827 !important;
}

/* Project Starter Page Styling */
.grid-container {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: minmax(400px, auto) minmax(400px, auto) !important;
  grid-gap: 20px !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-bottom: 40px !important;
}

.grid-box {
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  background-color: white !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 400px !important;
}

.grid-box-header {
  padding: 15px 20px !important;
  border-bottom: 1px solid #e5e7eb !important;
  font-weight: 600 !important;
}

.grid-box-content {
  padding: 20px !important;
  flex-grow: 1 !important;
  overflow: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

.grid-item-1 {
  grid-area: 1 / 1 / 2 / 2 !important;
}

.grid-item-2 {
  grid-area: 1 / 2 / 2 / 3 !important;
}

.grid-item-3 {
  grid-area: 2 / 1 / 3 / 2 !important;
}

.grid-item-4 {
  grid-area: 2 / 2 / 3 / 3 !important;
}

/* Chat input specific styling */
.grid-item-3 .grid-box-content form {
  display: flex !important;
  margin-top: auto !important;
  gap: 8px !important;
  align-items: stretch !important;
}

.grid-item-3 .grid-box-content input[type="text"] {
  flex: 1 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0.375rem !important;
  padding: 0.5rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  height: 38px !important;
}

/* Send button styling */
.grid-item-3 .grid-box-content button[type="button"] {
  background-color: #1D7751 !important;
  color: white !important;
  border: none !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.375rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  height: 38px !important;
  text-align: center !important;
  width: auto !important;
  min-width: 80px !important;
}

/* Show past messages button */
#togglePastMessages {
  font-size: 0.75rem !important;
  color: #3b82f6 !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  width: auto !important;
}

/* Add message display fixes */
[data-project-chat-target="chatBox"] {
  background-color: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0.375rem !important;
  padding: 0.75rem !important;
  margin-bottom: 0.75rem !important;
  height: 320px !important;
  overflow-y: auto !important;
  flex-grow: 0 !important;
}

/* Fix alignment and dimensions for chat inputs */
#chatForm {
  display: flex !important;
  gap: 8px !important;
  margin-top: auto !important;
}

/* Fix chat form button */
#chatForm button {
  width: auto !important;
  flex-shrink: 0 !important;
}

/* User message styling */
.chat-user {
  background-color: #3b82f6 !important;
  color: white !important;
  padding: 0.5rem !important;
  border-radius: 0.375rem !important;
}

.chat-assistant {
  background-color: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  padding: 0.5rem !important;
  border-radius: 0.375rem !important;
}

/* Fix margin between form inputs */
.space-y-4 > * + * {
  margin-top: 1rem !important;
}

/* Project form styling */
.form-container {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  justify-content: space-between !important;
}

.form-fields {
  margin-bottom: 20px !important;
}

.form-submit {
  margin-top: auto !important;
  padding-top: 16px !important;
}

/* Form inputs styling */
input[type="text"], input[type="date"], textarea {
  width: 100% !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0.375rem !important;
  padding: 0.5rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

textarea {
  resize: vertical !important;
  min-height: 4rem !important;
}

label {
  display: block !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #4b5563 !important;
  margin-bottom: 0.25rem !important;
}

/* Button styling */
.btn-success, button[type="submit"] {
  background-color: #1D7751 !important;
  color: white !important;
  border: none !important;
  border-radius: 0.375rem !important;
  padding: 0.5rem 1rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  width: 100% !important;
  text-align: center !important;
}

.btn-success:hover, button[type="submit"]:hover {
  background-color: #155e40 !important;
}

/* Chat styling */
.chat-message {
  margin-bottom: 0.5rem !important;
  padding: 0.5rem !important;
  border-radius: 0.375rem !important;
}

.text-xs {
  font-size: 0.75rem !important;
}

.text-sm {
  font-size: 0.875rem !important;
}

/* Project API output */
pre {
  background-color: #f3f4f6 !important;
  padding: 0.75rem !important;
  border-radius: 0.375rem !important;
  font-family: monospace !important;
  font-size: 0.75rem !important;
  overflow-x: auto !important;
  border: 1px solid #e5e7eb !important;
  white-space: pre-wrap !important;
}

/* Debug controls */
.debug-controls {
  position: fixed !important;
  bottom: 10px !important;
  right: 10px !important;
  background: rgba(0,0,0,0.7) !important;
  color: white !important;
  padding: 5px 10px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  z-index: 1000 !important;
}

/* Background colors for each grid box header */
.grid-box-header[style*="background-color: #e8f2ff"] {
  background-color: #e8f2ff !important;
}

.grid-box-header[style*="background-color: #f9edfc"] {
  background-color: #f9edfc !important;
}

.grid-box-header[style*="background-color: #fff8e0"] {
  background-color: #fff8e0 !important;
}

.grid-box-header[style*="background-color: #e8f5e9"] {
  background-color: #e8f5e9 !important;
}

/* Ensure chat messages display properly */
.chat-box {
  height: 320px !important;
  overflow-y: auto !important;
  background-color: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0.375rem !important;
  padding: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

.chat-input {
  display: flex !important;
  gap: 0.5rem !important;
}

.chat-input input {
  flex-grow: 1 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0.375rem !important;
  padding: 0.5rem !important;
  font-size: 0.875rem !important;
}

/* Show/hide past messages toggle */
.latest-message {
  display: block !important;
}

.hidden-message {
  display: none !important;
}

/* Changelog styling */
.changelog-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 2rem 1rem !important;
  overflow-y: auto !important;
}

.changelog-entry {
  position: relative !important;
  background-color: white !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  padding: 2rem !important;
  margin-bottom: 2rem !important;
  overflow: visible !important;
}

/* Version and title styling */
.changelog-version {
  display: block !important;
  font-size: 0.875rem !important;
  color: #6b7280 !important;
  margin-bottom: 0.5rem !important;
  font-weight: normal !important;
}

.changelog-title {
  font-size: 1.875rem !important;
  font-weight: 600 !important;
  color: #111827 !important;
  margin-bottom: 1.5rem !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding-bottom: 1rem !important;
}

.changelog-date {
  font-size: 0.875rem !important;
  color: #6b7280 !important;
  position: absolute !important;
  right: 2rem !important;
  top: 2rem !important;
}

/* Category sections */
.changelog-sections {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  gap: 3rem !important;
  margin-top: 2rem !important;
  position: relative !important;
  overflow: visible !important;
}

.changelog-section {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: calc(33.333% - 2rem) !important;
  position: relative !important;
  overflow: visible !important;
}

.changelog-section h3 {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin-bottom: 1rem !important;
}

/* Category icons and colors */
.changelog-section.added h3 {
  color: #22c55e !important;
}

.changelog-section.added h3::before {
  content: '✚' !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
}

.changelog-section.changed h3 {
  color: #6366f1 !important;
}

.changelog-section.changed h3::before {
  content: '↻' !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
}

.changelog-section.fixed h3 {
  color: #64748b !important;
}

.changelog-section.fixed h3::before {
  content: '⚫' !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
}

/* List styling */
.changelog-section ul {
  list-style-type: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.changelog-section li {
  margin-bottom: 0.75rem !important;
  line-height: 1.5 !important;
  color: #4b5563 !important;
}

/* Responsive design */
@media (max-width: 768px) {
  .changelog-sections {
    flex-direction: column !important;
    gap: 2rem !important;
  }
  
  .changelog-section {
    width: 100% !important;
  }
  
  .changelog-date {
    position: static !important;
    text-align: right !important;
    margin-bottom: 1rem !important;
  }
}

/* Story page styling */
.story-container {
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 2rem 1rem !important;
}

.story-title {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin-bottom: 2.5rem !important;
  color: #1f2937 !important;
}

.story-content p {
  margin-bottom: 2rem !important;
  font-size: 1.125rem !important;
  line-height: 1.75 !important;
  color: #1f2937 !important;
}

.story-content p:last-child {
  margin-bottom: 3rem !important;
}

/* Experience page styling */
.experience-section h2 {
  border: none !important;
}

/* Skill tag styling */
.flex-wrap.gap-2 span {
  margin: 0.25rem !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  border-radius: 0.375rem !important;
  background-color: #f3f4f6 !important;
  color: #4b5563 !important;
  white-space: nowrap !important;
}

.flex-wrap.gap-2 {
  margin: -0.25rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}