/* LLMMonsterlytics - Custom styles (most styling via Tailwind) */

/* HTMX loading indicator */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

#htmx-indicator {
    height: 2px;
    background: #64748b;
}

/* Toast animations */
.toast-enter {
    animation: slideInRight 0.3s ease-out;
}

.toast-exit {
    animation: slideOutRight 0.3s ease-in forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Smooth scrollbar for dark theme */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1a2e;
}

::-webkit-scrollbar-thumb {
    background: #374151;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

/* Table sort indicator */
th[data-sortable] {
    cursor: pointer;
    user-select: none;
}

th[data-sortable]:hover {
    color: #d1d5db;
}

th[data-sortable]::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid currentColor;
    opacity: 0.3;
}

th[data-sortable].sort-asc::after {
    border-bottom: 4px solid currentColor;
    border-top: none;
    opacity: 1;
}

th[data-sortable].sort-desc::after {
    border-top: 4px solid currentColor;
    border-bottom: none;
    opacity: 1;
}

/* Chart.js container */
canvas {
    max-width: 100%;
}