/* Joe's Color System */
:root {
  --joe-success: #22c55e;
  --joe-warning: #f59e0b;
  --joe-danger: #ef4444;
  --joe-info: #3b82f6;
  --joe-light: #d1d5db;
}

/* Flash Messages */
.joe-flash { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; margin: 0.5rem 0; border-radius: 0.5rem; backdrop-filter: blur(8px); }
.joe-flash-success { background: rgba(34, 197, 94, 0.1); border-left: 4px solid var(--joe-success); }
.joe-flash-error { background: rgba(239, 68, 68, 0.1); border-left: 4px solid var(--joe-danger); }
.joe-flash-emoji { font-size: 1.1em; }

/* Semantic Flash Message Classes */
.alert-success {
  @apply bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-800 dark:text-green-200 px-4 py-3 rounded-md mb-4;
}

.alert-error {
  @apply bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200 px-4 py-3 rounded-md mb-4;
}

.alert-warning {
  @apply bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 text-yellow-800 dark:text-yellow-200 px-4 py-3 rounded-md mb-4;
}

.alert-info {
  @apply bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-200 px-4 py-3 rounded-md mb-4;
}

/* Badges */
.joe-badge { display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 600; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25rem; text-decoration: none; border: 1px solid transparent; }
.joe-badge-primary { background-color: var(--pico-primary-background); color: var(--pico-primary-inverse); }
.joe-badge-secondary { background-color: var(--pico-secondary-background); color: var(--pico-secondary-inverse); }
.joe-badge-contrast { background-color: var(--pico-contrast-background); color: var(--pico-contrast-inverse); }
.joe-badge-success { background-color: rgba(34, 197, 94, 0.15); color: var(--joe-success); border-color: var(--joe-success); }
.joe-badge-warning { background-color: rgba(245, 158, 11, 0.15); color: var(--joe-warning); border-color: var(--joe-warning); }
.joe-badge-danger { background-color: rgba(239, 68, 68, 0.15); color: var(--joe-danger); border-color: var(--joe-danger); }
.joe-badge-info { background-color: rgba(59, 130, 246, 0.15); color: var(--joe-info); border-color: var(--joe-info); }
.joe-badge-light { background-color: rgba(243, 244, 246, 0.15); color: var(--joe-light); border-color: var(--joe-light); }

/* Responsive Design */
@media (max-width: 600px) {
  .responsive-text {
    display: none;
  }
}

/* Fonts */
header, h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', sans-serif; font-weight: 700; }
body { font-family: 'Lexend', sans-serif; }

/* Custom Scrollbar Styles */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

.custom-scrollbar::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Dark mode scrollbar */
.dark .custom-scrollbar {
  scrollbar-color: #475569 #1e293b;
}

.dark .custom-scrollbar::-webkit-scrollbar-track {
  background: #1e293b;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: #475569;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Utility classes combining overflow with custom scrollbar for consistency */
.scroll-x {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

.scroll-x::-webkit-scrollbar {
  height: 8px;
}

.scroll-x::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.scroll-x::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.scroll-x::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.scroll-y {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

.scroll-y::-webkit-scrollbar {
  width: 8px;
}

.scroll-y::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.scroll-y::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.scroll-y::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Dark mode for utility scroll classes */
.dark .scroll-x {
  scrollbar-color: #475569 #1e293b;
}

.dark .scroll-x::-webkit-scrollbar-track {
  background: #1e293b;
}

.dark .scroll-x::-webkit-scrollbar-thumb {
  background: #475569;
}

.dark .scroll-x::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

.dark .scroll-y {
  scrollbar-color: #475569 #1e293b;
}

.dark .scroll-y::-webkit-scrollbar-track {
  background: #1e293b;
}

.dark .scroll-y::-webkit-scrollbar-thumb {
  background: #475569;
}

.dark .scroll-y::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Hide scrollbars for mobile tab navigation */
.scrollbar-hide {
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
}

/* Mobile tab navigation optimizations */
@media (max-width: 640px) {
  .mobile-tab-optimized {
    font-size: 0.875rem; /* text-sm */
    padding-left: 0.5rem; /* px-2 */
    padding-right: 0.5rem; /* px-2 */
  }
  
  /* Ensure touch targets are at least 44px */
  .mobile-tab-optimized button {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Import Administrate overrides to match site design */
@import "administrate_overrides.css";
 

/* For dark mode, invert the calendar icon */
.dark input,
.dark select,
.dark textarea {
  color-scheme: dark;
}

/* Agent Tools Code Viewer - Override Prism font size */
[data-tool-viewer-target="code"] {
  font-size: 0.75rem !important; /* text-xs = 0.75rem */
  line-height:1;
}

/* Social Media Icons Hover Effects */
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

.social-facebook:hover {
  background: linear-gradient(135deg, #1877F2 0%, #42A5F5 100%);
  transform: rotate(-8deg);
}

.social-x:hover {
  background: linear-gradient(135deg, #000000 0%, #333333 100%);
  transform: rotate(8deg);
}

.social-instagram:hover {
  background: linear-gradient(135deg, #E1306C 0%, #F56040 50%, #F77737 100%);
  transform: rotate(-8deg);
}

/* Turbo Frame Error Styling (dark mode aware) */
.turbo-frame-error {
  @apply text-red-700 dark:text-red-300;
}

/* Markdown Content Styling - Minimal styles for LLM chat (only essential elements) */
.markdown-content {
  @apply leading-relaxed;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
  @apply font-semibold mt-4 mb-2;
}

.markdown-content h1 { @apply text-2xl; }
.markdown-content h2 { @apply text-xl; }
.markdown-content h3 { @apply text-lg; }

.markdown-content p { @apply mb-3; }

.markdown-content code {
  @apply bg-gray-200 dark:bg-gray-700 px-1.5 py-0.5 rounded text-xs font-mono;
}

.markdown-content pre {
  @apply bg-gray-100 dark:bg-gray-800 p-3 rounded-lg overflow-x-auto my-2;
}

.markdown-content pre code {
  @apply bg-transparent p-0;
}

.markdown-content ul,
.markdown-content ol {
  @apply ml-6 mb-3;
}

.markdown-content li { @apply mb-1; }

.markdown-content a {
  @apply text-blue-600 dark:text-blue-400 hover:underline;
}

/* Chat Styles */
@import "chat.css";