/* Add this CSS to your main stylesheet or inline in your template */
.food-card {
    transition: all 0.2s ease-in-out;
    border-top: 4px solid transparent;
}

.food-card.protein-chicken { border-top-color: #fbbf24; }
.food-card.protein-beef { border-top-color: #ef4444; }
.food-card.protein-pork { border-top-color: #ec4899; }
.food-card.protein-lamb { border-top-color: #8b5cf6; }
.food-card.protein-fish { border-top-color: #3b82f6; }
.food-card.protein-vegetarian { border-top-color: #10b981; }
.food-card.protein-vegan { border-top-color: #059669; }

/* Make selection more visible */
.food-card.selected {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.5) !important;
    border-color: #4f46e5 !important;
    z-index: 1;
}

/* Maintain selection visibility on hover */
.food-card.selected:hover {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.7) !important;
}

/* Dark mode selection styles */
.dark .food-card.selected {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5) !important;
    border-color: #6366f1 !important;
}

.dark .food-card.selected:hover {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.7) !important;
}

/* Add these classes if they're used in your templates */
.outline-none {
    outline: none !important;
}

.outline-white {
    outline: 2px solid white !important;
}

.outline-black {
    outline: 2px solid black !important;
}

/* Dark-mode surface variables scoped to the menu app */
.dark .menu-app {
    --surface-bg: rgba(30, 41, 59, 0.98);
    --surface-text: #f1f5f9;
    --surface-border: rgba(71, 85, 105, 0.4);
    --surface-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
    --surface-hover-transform: translateY(-2px);
    --surface-hover-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);

    --muted-bg: rgba(30, 41, 59, 0.98);
    --muted-text: #f1f5f9;
    --muted-border: rgba(71, 85, 105, 0.4);
    --muted-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
    --muted-hover-transform: translateY(-1px);
    --muted-hover-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 3px 10px rgba(0, 0, 0, 0.3);
}

/* Enhanced protein colors for dark mode visibility - balanced brightness - these come after card styling to override */

/* Dark Mode Card Styling - Clean and Dark with Better Contrast */
.dark .menu-app .bg-white {
    background: var(--surface-bg) !important; /* Lighter than background for contrast */
    color: var(--surface-text) !important; /* Light text */
    border: 1px solid var(--surface-border) !important; /* More visible border */
    border-top: 4px solid transparent !important; /* This will be overridden by protein colors */
    border-radius: 12px !important; /* Clean rounded corners */
    box-shadow: var(--surface-shadow) !important;
    transition: all 0.3s ease !important;
}

/* Clean hover effect */
.dark .menu-app .bg-white:hover {
    transform: var(--surface-hover-transform) !important;
    box-shadow: var(--surface-hover-shadow) !important;
}

/* Dark Mode Sidebar Styling - Clean and Dark with Better Contrast */
.dark .menu-app .bg-gray-50 {
    background: var(--muted-bg) !important; /* Lighter than background for contrast */
    color: var(--muted-text) !important;
    border: 1px solid var(--muted-border) !important; /* More visible border */
    border-radius: 12px !important; /* Clean rounded corners */
    box-shadow: var(--muted-shadow) !important;
    transition: all 0.3s ease !important;
}

/* Dark Mode Selection Sidebar Styling */
.dark .menu-app aside.bg-white {
    background: var(--surface-bg) !important; /* Match card styling */
    border: 1px solid var(--surface-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--surface-shadow) !important;
}

/* Dark Mode Sidebar Header */
.dark .menu-app .sticky.bg-white {
    background: var(--surface-bg) !important;
    border-bottom: 1px solid var(--surface-border) !important;
}

/* Dark Mode Sidebar Content */
.dark .menu-app aside .bg-white {
    background: var(--surface-bg) !important;
}

/* Dark Mode Sidebar Borders */
.dark .menu-app .border-gray-100 {
    border-color: rgba(71, 85, 105, 0.3) !important;
}

/* Dark Mode Sidebar Text */
.dark .menu-app .text-gray-900 {
    color: #f1f5f9 !important;
}

.dark .menu-app .text-gray-800 {
    color: #e2e8f0 !important;
}

.dark .menu-app .text-gray-700 {
    color: #cbd5e1 !important;
}

.dark .menu-app .text-gray-600 {
    color: #94a3b8 !important;
}

.dark .menu-app .text-gray-500 {
    color: #64748b !important;
}

.dark .menu-app .text-gray-400 {
    color: #475569 !important;
}

.dark .menu-app .text-gray-300 {
    color: #334155 !important;
}

/* Dark Mode Sidebar Progress Bar */
.dark .menu-app .bg-gray-200 {
    background-color: rgba(71, 85, 105, 0.3) !important;
}

/* Dark Mode Sidebar Icons */
.dark .menu-app .text-indigo-600 {
    color: #60a5fa !important; /* Lighter blue for better contrast */
}

/* Dark Mode Sidebar Day Headers - Override the general bg-gray-50 rule */
.dark .menu-app div.bg-gray-50 {
    background: rgba(51, 65, 85, 0.5) !important; /* Darker background for day headers in sidebar */
}

/* Dark Mode Sidebar Submit Button */
.dark .menu-app .bg-indigo-600 {
    background-color: #4f46e5 !important; /* Slightly darker indigo */
}

.dark .menu-app .hover\:bg-indigo-700:hover {
    background-color: #4338ca !important; /* Darker hover state */
}

.dark .menu-app .text-white {
    color: #ffffff !important; /* Ensure button text is white */
}

/* Shared surface styling for non-menu cards */
.surface-card {
    background-color: #ffffff;
    color: #0f172a;
    border-color: #e2e8f0;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.surface-card__header {
    background-color: #eef2ff;
    color: #3730a3;
    border-bottom: 1px solid #e2e8f0;
}

.surface-card.alert {
    background-color: #fef2f2;
    border-color: #ef4444;
    color: #dc2626;
}

.surface-card.alert svg {
    color: #f87171;
}

.surface-card.alert p {
    color: #dc2626;
}

.surface-card label {
    color: #374151;
}

.surface-card input,
.surface-card select,
.surface-card textarea {
    background-color: #ffffff;
    color: #111827;
    border: 1px solid #d1d5db;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.surface-card input::placeholder,
.surface-card textarea::placeholder {
    color: #9ca3af;
}

.surface-card input:focus,
.surface-card select:focus,
.surface-card textarea:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.surface-card button {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.surface-card button[type="submit"] {
    background-color: #4f46e5;
    color: #ffffff;
}

.surface-card button[type="submit"]:hover {
    background-color: #4338ca;
}

.surface-card button[type="submit"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
}

.dark .surface-card {
    background: rgba(30, 41, 59, 0.98) !important;
    color: #f1f5f9 !important;
    border-color: rgba(71, 85, 105, 0.4) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
}

.dark .surface-card h1,
.dark .surface-card h2,
.dark .surface-card h3,
.dark .surface-card h4 {
    color: #f8fafc;
}

.dark .surface-card p,
.dark .surface-card label,
.dark .surface-card span,
.dark .surface-card li {
    color: #cbd5e1 !important;
}

.dark .surface-card .text-gray-900,
.dark .surface-card .text-gray-800,
.dark .surface-card .text-gray-700 {
    color: #f8fafc !important;
}

.dark .surface-card .text-gray-600 {
    color: #cbd5e1 !important;
}

.dark .surface-card .text-gray-500 {
    color: #94a3b8 !important;
}

.dark .surface-card .text-gray-400 {
    color: #64748b !important;
}

.dark .surface-card .text-indigo-600 {
    color: #60a5fa !important;
}

.dark .surface-card .bg-white:not(.surface-card) {
    background-color: rgba(30, 41, 59, 0.75) !important;
    color: #e2e8f0 !important;
    border-color: rgba(71, 85, 105, 0.6) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.dark .surface-card .border-gray-300 {
    border-color: rgba(71, 85, 105, 0.6) !important;
}

.dark .surface-card .hover\:bg-gray-50:hover {
    background-color: rgba(148, 163, 184, 0.15) !important;
}

.dark .surface-card__header {
    background: rgba(51, 65, 85, 0.75) !important;
    color: #e2e8f0 !important;
    border-bottom-color: rgba(71, 85, 105, 0.5) !important;
    box-shadow: inset 0 -1px 0 rgba(148, 163, 184, 0.2);
}

.dark .surface-card.alert {
    background-color: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.45);
    color: #fecaca;
}

.dark .surface-card.alert svg {
    color: #fca5a5;
}

.dark .surface-card.alert p {
    color: #fecaca;
}

.dark .surface-card label {
    color: #e2e8f0;
}

.dark .surface-card input,
.dark .surface-card select,
.dark .surface-card textarea {
    background-color: rgba(30, 41, 59, 0.7);
    color: #f8fafc;
    border-color: rgba(71, 85, 105, 0.6);
    box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.08);
}

.dark .surface-card input::placeholder,
.dark .surface-card textarea::placeholder {
    color: #94a3b8;
}

.dark .surface-card input:focus,
.dark .surface-card select:focus,
.dark .surface-card textarea:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.35);
}

.dark .surface-card button[type="submit"] {
    background-color: #4f46e5;
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.3), 0 8px 20px rgba(0, 0, 0, 0.45);
}

.dark .surface-card button[type="submit"]:hover {
    background-color: #4338ca;
}

.dark .surface-card button[type="submit"]:focus {
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.45);
}

/* Dark Mode Sidebar Rounded Corners */
.dark .menu-app .rounded-t-lg {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}

.dark .menu-app .rounded-b-lg {
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* Light Mode Sidebar Protein Borders (Top borders) */
.menu-app .border-yellow-400 { border-top-color: #facc15 !important; } /* Chicken - golden yellow */
.menu-app .border-red-500 { border-top-color: #ef4444 !important; } /* Beef - bright red */
.menu-app .border-pink-500 { border-top-color: #ec4899 !important; } /* Pork - hot pink */
.menu-app .border-purple-500 { border-top-color: #8b5cf6 !important; } /* Lamb - bright purple */
.menu-app .border-amber-500 { border-top-color: #f59e0b !important; } /* Turkey - orange-amber */
.menu-app .border-blue-500 { border-top-color: #3b82f6 !important; } /* Fish - bright blue */
.menu-app .border-cyan-500 { border-top-color: #06b6d4 !important; } /* Seafood - cyan */
.menu-app .border-green-500 { border-top-color: #10b981 !important; } /* Vegetarian - emerald */
.menu-app .border-emerald-500 { border-top-color: #059669 !important; } /* Vegan - darker emerald */

/* Light Mode Filter Protein Borders (Left borders) */
.menu-app .border-l-yellow-400 { border-left-color: #facc15 !important; border-left-width: 5px !important; } /* Chicken */
.menu-app .border-l-red-500 { border-left-color: #ef4444 !important; border-left-width: 5px !important; } /* Beef */
.menu-app .border-l-pink-500 { border-left-color: #ec4899 !important; border-left-width: 5px !important; } /* Pork */
.menu-app .border-l-purple-500 { border-left-color: #8b5cf6 !important; border-left-width: 5px !important; } /* Lamb */
.menu-app .border-l-amber-500 { border-left-color: #f59e0b !important; border-left-width: 5px !important; } /* Turkey */
.menu-app .border-l-blue-500 { border-left-color: #3b82f6 !important; border-left-width: 5px !important; } /* Fish */
.menu-app .border-l-cyan-500 { border-left-color: #06b6d4 !important; border-left-width: 5px !important; } /* Seafood */
.menu-app .border-l-green-500 { border-left-color: #10b981 !important; border-left-width: 5px !important; } /* Vegetarian */
.menu-app .border-l-emerald-500 { border-left-color: #059669 !important; border-left-width: 5px !important; } /* Vegan */

/* Dark Mode Sidebar Protein Borders (Top borders) */
.dark .menu-app .border-yellow-400 { border-top-color: #eab308 !important; } /* Chicken - golden yellow */
.dark .menu-app .border-red-500 { border-top-color: #dc2626 !important; } /* Beef - bright red */
.dark .menu-app .border-pink-500 { border-top-color: #db2777 !important; } /* Pork - hot pink */
.dark .menu-app .border-purple-500 { border-top-color: #7c3aed !important; } /* Lamb - bright purple */
.dark .menu-app .border-amber-500 { border-top-color: #d97706 !important; } /* Turkey - orange-amber */
.dark .menu-app .border-blue-500 { border-top-color: #2563eb !important; } /* Fish - bright blue */
.dark .menu-app .border-cyan-500 { border-top-color: #0891b2 !important; } /* Seafood - cyan */
.dark .menu-app .border-green-500 { border-top-color: #059669 !important; } /* Vegetarian - emerald */
.dark .menu-app .border-emerald-500 { border-top-color: #047857 !important; } /* Vegan - darker emerald */

/* Dark Mode Filter Protein Borders (Left borders) */
.dark .menu-app .border-l-yellow-400 { border-left-color: #eab308 !important; border-left-width: 5px !important; } /* Chicken */
.dark .menu-app .border-l-red-500 { border-left-color: #dc2626 !important; border-left-width: 5px !important; } /* Beef */
.dark .menu-app .border-l-pink-500 { border-left-color: #db2777 !important; border-left-width: 5px !important; } /* Pork */
.dark .menu-app .border-l-purple-500 { border-left-color: #7c3aed !important; border-left-width: 5px !important; } /* Lamb */
.dark .menu-app .border-l-amber-500 { border-left-color: #d97706 !important; border-left-width: 5px !important; } /* Turkey */
.dark .menu-app .border-l-blue-500 { border-left-color: #2563eb !important; border-left-width: 5px !important; } /* Fish */
.dark .menu-app .border-l-cyan-500 { border-left-color: #0891b2 !important; border-left-width: 5px !important; } /* Seafood */
.dark .menu-app .border-l-green-500 { border-left-color: #059669 !important; border-left-width: 5px !important; } /* Vegetarian */
.dark .menu-app .border-l-emerald-500 { border-left-color: #047857 !important; border-left-width: 5px !important; } /* Vegan */

/* Clean sidebar hover effect */
.dark .menu-app .bg-gray-50:hover {
    transform: var(--muted-hover-transform) !important;
    box-shadow: var(--muted-hover-shadow) !important;
}

/* Enhanced protein colors for dark mode visibility - these override the transparent border-top */
.dark .menu-app .bg-white.border-yellow-400 { border-top-color: #eab308 !important; } /* Chicken - golden yellow */
.dark .menu-app .bg-white.border-red-500 { border-top-color: #dc2626 !important; } /* Beef - bright red */
.dark .menu-app .bg-white.border-pink-500 { border-top-color: #db2777 !important; } /* Pork - hot pink */
.dark .menu-app .bg-white.border-purple-500 { border-top-color: #7c3aed !important; } /* Lamb - bright purple */
.dark .menu-app .bg-white.border-amber-500 { border-top-color: #d97706 !important; } /* Turkey - orange-amber */
.dark .menu-app .bg-white.border-blue-500 { border-top-color: #2563eb !important; } /* Fish - bright blue */
.dark .menu-app .bg-white.border-cyan-500 { border-top-color: #0891b2 !important; } /* Seafood - cyan */
.dark .menu-app .bg-white.border-green-500 { border-top-color: #059669 !important; } /* Vegetarian - emerald */
.dark .menu-app .bg-white.border-emerald-500 { border-top-color: #047857 !important; } /* Vegan - darker emerald */

/* Dark mode text colors */
.dark .menu-app .text-gray-600 { color: #94a3b8 !important; } /* Restaurant names */
.dark .menu-app .text-gray-700 { color: #cbd5e1 !important; } /* Light gray */
.dark .menu-app .text-gray-800 { color: #f8fafc !important; } /* Headers */
.dark .menu-app .text-gray-900 { color: #f1f5f9 !important; } /* Food titles */

/* Dark mode hover effects */
.dark .menu-app .bg-white:hover, .dark .menu-app .bg-gray-50:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Dark mode tag styling - make tags darker */
.dark .menu-app .bg-yellow-100 { background-color: rgba(245, 158, 11, 0.3) !important; color: #fbbf24 !important; } /* Chicken */
.dark .menu-app .bg-red-100 { background-color: rgba(220, 38, 38, 0.3) !important; color: #f87171 !important; } /* Beef */
.dark .menu-app .bg-pink-100 { background-color: rgba(219, 39, 119, 0.3) !important; color: #f472b6 !important; } /* Pork */
.dark .menu-app .bg-purple-100 { background-color: rgba(124, 58, 237, 0.3) !important; color: #a78bfa !important; } /* Lamb */
.dark .menu-app .bg-amber-100 { background-color: rgba(217, 119, 6, 0.3) !important; color: #fbbf24 !important; } /* Turkey */
.dark .menu-app .bg-blue-100 { background-color: rgba(59, 130, 246, 0.3) !important; color: #60a5fa !important; } /* Fish */
.dark .menu-app .bg-cyan-100 { background-color: rgba(6, 182, 212, 0.3) !important; color: #22d3ee !important; } /* Seafood */
.dark .menu-app .bg-green-100 { background-color: rgba(34, 197, 94, 0.3) !important; color: #4ade80 !important; } /* Vegetarian */
.dark .menu-app .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.3) !important; color: #34d399 !important; } /* Vegan */
.dark .menu-app .bg-gray-100 { background-color: rgba(75, 85, 99, 0.3) !important; color: #d1d5db !important; } /* Unknown */

/* Dark mode outline adjustments */
.dark .menu-app .outline-white {
    outline: 2px solid rgb(31, 41, 55) !important; /* gray-800 */
}

.dark .menu-app .outline-black {
    outline: 2px solid rgb(243, 244, 246) !important; /* gray-100 */
}

/* Dark mode filter sidebar - override the global bg-white rule */
.dark .menu-app .bg-indigo-50 {
    background: rgb(31, 41, 55) !important; /* gray-800 */
}

/* Dark mode filter chips in active filters section - ONLY the chips, not the filter buttons */
.dark .menu-app .bg-indigo-50 > .flex.flex-wrap.gap-2 > div.bg-white {
    background: rgb(55, 65, 81) !important; /* gray-700 */
    border-color: rgb(75, 85, 99) !important; /* gray-600 */
}

/* Dark mode protein filter pills when selected - but preserve the border colors */
.dark .menu-app button.bg-indigo-100 {
    background: rgba(99, 102, 241, 0.2) !important; /* indigo-900/30 */
    color: rgb(165, 180, 252) !important; /* indigo-300 */
}

/* Dark mode filter pills when not selected - specifically target the filter section, not protein pills */
.dark .menu-app .space-y-6 button.bg-white {
    background: rgb(55, 65, 81) !important; /* gray-700 */
    color: rgb(229, 231, 235) !important; /* gray-200 */
}

/* Ensure protein filter left borders are visible in dark mode - these should override */
.dark .menu-app button.border-l-yellow-400,
.dark .menu-app button.border-l-red-500,
.dark .menu-app button.border-l-pink-500,
.dark .menu-app button.border-l-purple-500,
.dark .menu-app button.border-l-amber-500,
.dark .menu-app button.border-l-blue-500,
.dark .menu-app button.border-l-cyan-500,
.dark .menu-app button.border-l-green-500,
.dark .menu-app button.border-l-emerald-500 {
    background: rgb(55, 65, 81) !important; /* gray-700 when not selected */
}

/* Ensure selected protein filters maintain their indigo background */
.dark .menu-app button.border-l-yellow-400.bg-indigo-100,
.dark .menu-app button.border-l-red-500.bg-indigo-100,
.dark .menu-app button.border-l-pink-500.bg-indigo-100,
.dark .menu-app button.border-l-purple-500.bg-indigo-100,
.dark .menu-app button.border-l-amber-500.bg-indigo-100,
.dark .menu-app button.border-l-blue-500.bg-indigo-100,
.dark .menu-app button.border-l-cyan-500.bg-indigo-100,
.dark .menu-app button.border-l-green-500.bg-indigo-100,
.dark .menu-app button.border-l-emerald-500.bg-indigo-100 {
    background: rgba(99, 102, 241, 0.2) !important; /* indigo-900/30 when selected */
}

/* AI modal surfaces */
.ai-modal {
    background: #ffffff;
    color: #111827;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

.ai-modal h2 {
    color: #0f172a;
}

.ai-modal textarea {
    background: #ffffff;
    color: #0f172a;
    border-color: rgba(148, 163, 184, 0.6);
}

.dark .ai-modal {
    background: rgba(15, 23, 42, 0.96) !important;
    color: #e2e8f0 !important;
    border-color: rgba(148, 163, 184, 0.45) !important;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.65), 0 8px 24px rgba(15, 23, 42, 0.5) !important;
    --surface-bg: rgba(15, 23, 42, 0.96);
    --surface-text: #e2e8f0;
    --surface-border: rgba(148, 163, 184, 0.45);
    --surface-shadow: 0 24px 48px rgba(15, 23, 42, 0.65), 0 8px 24px rgba(15, 23, 42, 0.5);
    --surface-hover-transform: none;
    --surface-hover-shadow: 0 24px 48px rgba(15, 23, 42, 0.65), 0 8px 24px rgba(15, 23, 42, 0.5);
    --muted-bg: rgba(30, 41, 59, 0.92);
    --muted-text: #e2e8f0;
    --muted-border: rgba(148, 163, 184, 0.35);
    --muted-shadow: none;
    --muted-hover-transform: none;
    --muted-hover-shadow: none;
}

.dark .ai-modal :is(.bg-white, .bg-gray-50, .bg-indigo-50) {
    background: rgba(30, 41, 59, 0.92) !important;
    color: #e2e8f0 !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
    border-top-color: rgba(148, 163, 184, 0.35) !important;
    box-shadow: none !important;
    transform: none !important;
}

.dark .ai-modal :is(.bg-white, .bg-gray-50, .bg-indigo-50):hover {
    transform: none !important;
    box-shadow: none !important;
}

.dark .ai-modal h2 {
    color: #f8fafc !important;
}

.dark .ai-modal textarea {
    background: rgba(30, 41, 59, 0.92) !important;
    color: #f8fafc !important;
    border-color: rgba(148, 163, 184, 0.4) !important;
}

.dark .ai-modal textarea::placeholder {
    color: #94a3b8 !important;
}

/* Dark mode modal typography */
.dark .ai-modal .text-gray-900 {
    color: #f8fafc !important;
}

.dark .ai-modal .text-gray-800 {
    color: #e2e8f0 !important;
}

.dark .ai-modal .text-gray-700 {
    color: #cbd5e1 !important;
}

.dark .ai-modal .text-gray-600 {
    color: #a5b4fc !important;
}

.dark .ai-modal .text-gray-500 {
    color: #94a3b8 !important;
}

.ai-modal-callout {
    border-width: 1px;
    border-style: solid;
}

.ai-modal-callout--info {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #312e81;
}

.ai-modal-callout--note {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #92400e;
}

.ai-modal-callout--success {
    background: #dcfce7;
    border-color: #86efac;
    color: #065f46;
}

.dark .ai-modal-callout--info {
    background: rgba(99, 102, 241, 0.2) !important;
    border-color: rgba(129, 140, 248, 0.45) !important;
    color: #c7d2fe !important;
}

.dark .ai-modal-callout--note {
    background: rgba(217, 119, 6, 0.18) !important;
    border-color: rgba(251, 191, 36, 0.45) !important;
    color: #fcd34d !important;
}

.dark .ai-modal-callout--success {
    background: rgba(34, 197, 94, 0.18) !important;
    border-color: rgba(74, 222, 128, 0.45) !important;
    color: #bbf7d0 !important;
}

.ai-modal-callout__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(79, 70, 229, 0.1);
    color: #4338ca;
}

.ai-modal-callout__icon--note {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

.ai-modal-callout__icon--success {
    background: rgba(34, 197, 94, 0.12);
    color: #047857;
}

.dark .ai-modal-callout__icon {
    background: rgba(99, 102, 241, 0.32) !important;
    color: #c7d2fe !important;
}

.dark .ai-modal-callout__icon--note {
    background: rgba(234, 179, 8, 0.28) !important;
    color: #facc15 !important;
}

.dark .ai-modal-callout__icon--success {
    background: rgba(34, 197, 94, 0.28) !important;
    color: #bbf7d0 !important;
}