/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
/* You can use the following syntax to include files in this manifest:
 *= require_tree .
 *= require_self
 */
/* Base Reset & Layout */
/** {*/
  /*margin: 0;*/
  /*padding: 0;*/
  /*box-sizing: border-box;*/
/*}*/

body {
  font-family: 'Segoe UI', sans-serif;
  line-height: 1.5;
  background-color: var(--bg);
  color: var(--text);
  /*padding: 1rem;*/
}

/* Color Themes */
:root {
  --bg: #fdfcf8;
  --text: #1e1e1e;
  --button-bg-1: #e0c097; /* sand */
  --button-bg-2: #d4a373; /* wheat */
  --button-bg-3: #a3b18a; /* grass */
  --button-bg-4: #8ecae6; /* sky */
  --button-bg-5: #90be6d; /* spring green */
  --button-bg-6: #cdb4db; /* lavender */
  --button-text: #1e1e1e;
  --card-bg: #ffffff;
  --section-bg: #f4f1ee;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --text: #f0f0f0;
    --button-bg-1: #665c54;
    --button-bg-2: #7c6f64;
    --button-bg-3: #5f7c6f;
    --button-bg-4: #4e6e81;
    --button-bg-5: #586e4d;
    --button-bg-6: #6c5d6e;
    --button-text: #ffffff;
    --card-bg: #1e1e1e;
    --section-bg: #1a1a1a;
  }
}

.dark {
  --bg: #121212;
  --text: #f0f0f0;
  --button-bg-1: #665c54;
  --button-bg-2: #7c6f64;
  --button-bg-3: #5f7c6f;
  --button-bg-4: #4e6e81;
  --button-bg-5: #586e4d;
  --button-bg-6: #6c5d6e;
  --button-text: #ffffff;
  --card-bg: #1e1e1e;
  --section-bg: #1a1a1a;
}

/* Markdown Tables - Override prose styles with maximum specificity */
.prose table,
.chat-markdown table,
.prose.prose-sm table,
.dark\:prose-invert table {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 1rem 0 !important;
}

.prose th,
.prose td,
.chat-markdown th,
.chat-markdown td,
.prose.prose-sm th,
.prose.prose-sm td,
.dark\:prose-invert th,
.dark\:prose-invert td {
  border: 1px solid #d1d5db !important;
  padding: 0.5rem !important;
  text-align: left !important;
}

.prose th,
.chat-markdown th,
.prose.prose-sm th,
.dark\:prose-invert th {
  background: #f3f4f6 !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
}

.prose tbody tr:nth-child(even),
.chat-markdown tbody tr:nth-child(even),
.prose.prose-sm tbody tr:nth-child(even),
.dark\:prose-invert tbody tr:nth-child(even) {
  background: #f9fafb !important;
}

/* Dark mode table styles - override prose-invert with maximum specificity */
@media (prefers-color-scheme: dark) {
  .prose th,
  .prose td,
  .chat-markdown th,
  .chat-markdown td,
  .prose.prose-sm th,
  .prose.prose-sm td,
  .dark\:prose-invert th,
  .dark\:prose-invert td {
    border-color: #4b5563 !important;
  }

  .prose th,
  .chat-markdown th,
  .prose.prose-sm th,
  .dark\:prose-invert th {
    background: #374151 !important;
    color: #121212 !important;
  }

  .prose tbody tr:nth-child(even),
  .chat-markdown tbody tr:nth-child(even),
  .prose.prose-sm tbody tr:nth-child(even),
  .dark\:prose-invert tbody tr:nth-child(even) {
    background: #1f2937 !important;
  }
}

.dark .prose th,
.dark .prose td,
.dark .chat-markdown th,
.dark .chat-markdown td,
.dark .prose.prose-sm th,
.dark .prose.prose-sm td,
.dark .dark\:prose-invert th,
.dark .dark\:prose-invert td {
  border-color: #4b5563 !important;
}

.dark .prose th,
.dark .chat-markdown th,
.dark .prose.prose-sm th,
.dark .dark\:prose-invert th {
  background: #374151 !important;
  color: #121212 !important;
}

.dark .prose tbody tr:nth-child(even),
.dark .chat-markdown tbody tr:nth-child(even),
.dark .prose.prose-sm tbody tr:nth-child(even),
.dark .dark\:prose-invert tbody tr:nth-child(even) {
  background: #1f2937 !important;
}

/* Footer */
footer {
  margin-top: 2rem;
  padding: 1rem;
  text-align: center;
  background-color: var(--section-bg);
  border-radius: 10px;
}