/* Styles additionnels pour LBCBot */

/* Animations */
.htmx-request {
    opacity: 0.5;
    transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator {
    display: inline;
}

/* Table hover effect */
tbody tr:hover {
    background-color: #f9fafb;
}

/* Score badges */
.score-high {
    background-color: #d1fae5;
    color: #065f46;
}

.score-medium {
    background-color: #fef3c7;
    color: #92400e;
}

.score-low {
    background-color: #f3f4f6;
    color: #4b5563;
}

/* Price decrease animation */
.price-decrease {
    animation: flash-green 1s ease-out;
}

@keyframes flash-green {
    0% { background-color: #d1fae5; }
    100% { background-color: transparent; }
}

/* Loading spinner */
.spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Mobile responsive */
@media (max-width: 640px) {
    .hide-mobile {
        display: none;
    }

    table {
        font-size: 0.8125rem;
    }

    table th, table td {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

/* ===== Dark Mode Overrides ===== */
/* Approche globale CSS pour eviter d'ajouter dark: a chaque template */

.dark .bg-white {
    background-color: #1f2937; /* gray-800 */
}

.dark .bg-gray-50 {
    background-color: #111827; /* gray-900 */
}

.dark .bg-gray-100 {
    background-color: #111827;
}

.dark .text-gray-900 {
    color: #f3f4f6; /* gray-100 */
}

.dark .text-gray-800 {
    color: #e5e7eb; /* gray-200 */
}

.dark .text-gray-700 {
    color: #d1d5db; /* gray-300 */
}

.dark .text-gray-600 {
    color: #9ca3af; /* gray-400 */
}

.dark .text-gray-500 {
    color: #9ca3af;
}

.dark .border-gray-200 {
    border-color: #374151; /* gray-700 */
}

.dark .border-gray-300 {
    border-color: #4b5563; /* gray-600 */
}

.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: #374151;
}

.dark .shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
}

.dark .shadow-lg {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
}

/* Tables */
.dark table thead {
    background-color: #111827;
}

.dark tbody tr:hover {
    background-color: #374151 !important;
}

/* Forms */
.dark input,
.dark select,
.dark textarea {
    background-color: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
}

.dark input::placeholder,
.dark select::placeholder,
.dark textarea::placeholder {
    color: #6b7280;
}

/* Colored backgrounds - subtler in dark */
.dark .bg-red-50 { background-color: rgba(127, 29, 29, 0.3); }
.dark .bg-orange-50 { background-color: rgba(124, 45, 18, 0.3); }
.dark .bg-green-50 { background-color: rgba(20, 83, 45, 0.3); }
.dark .bg-blue-50 { background-color: rgba(30, 58, 138, 0.3); }
.dark .bg-yellow-50 { background-color: rgba(113, 63, 18, 0.3); }

.dark .bg-red-100 { background-color: rgba(127, 29, 29, 0.4); }
.dark .bg-orange-100 { background-color: rgba(124, 45, 18, 0.4); }
.dark .bg-green-100 { background-color: rgba(20, 83, 45, 0.4); }
.dark .bg-blue-100 { background-color: rgba(30, 58, 138, 0.4); }
.dark .bg-yellow-100 { background-color: rgba(113, 63, 18, 0.4); }

/* Hover in dark mode for colored rows */
.dark .hover\:bg-red-100:hover { background-color: rgba(127, 29, 29, 0.5) !important; }
.dark .hover\:bg-orange-100:hover { background-color: rgba(124, 45, 18, 0.5) !important; }
.dark .hover\:bg-gray-50:hover { background-color: #374151 !important; }

/* Cards & panels */
.dark .rounded-lg {
    border-color: #374151;
}

/* Chart.js canvas background */
.dark canvas {
    filter: brightness(0.9);
}