/* HYT Amazon Tracker v2 — Custom Styles */

/* Sidebar active link */
#sidebar-nav a.active {
    background-color: oklch(var(--p) / 0.15);
    color: oklch(var(--p));
    font-weight: 600;
}

/* Smooth page transitions */
@keyframes slide-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

#main-content {
    animation: slide-in 0.2s ease-out;
}

/* Toast animation */
@keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; transform: translateY(-10px); }
}

.toast-fade-out {
    animation: fade-out 0.3s ease-in forwards;
}

/* HTMX loading indicator */
.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: block;
}

/* Table row hover */
table.table tbody tr.hover:hover {
    background-color: oklch(var(--bc) / 0.04);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: oklch(var(--bc) / 0.15);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: oklch(var(--bc) / 0.25);
}

/* Drawer overlay fix */
.drawer-side > .drawer-overlay {
    cursor: pointer;
}

/* Badge truncate */
.badge-truncate {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Card hover effect */
.card-hover:hover {
    box-shadow: 0 4px 12px oklch(var(--bc) / 0.08);
    transform: translateY(-1px);
    transition: all 0.15s ease;
}

/* Progress bar smooth */
.progress {
    transition: width 0.3s ease;
}

/* Score ring colors */
.score-excellent { color: oklch(var(--su)); }
.score-good { color: oklch(var(--in)); }
.score-average { color: oklch(var(--wa)); }
.score-poor { color: oklch(var(--er)); }

/* Responsive table scroll hint */
.overflow-x-auto {
    scrollbar-width: thin;
}

/* Print styles */
@media print {
    .drawer-side, .navbar, .toast, .modal, .btn {
        display: none !important;
    }
    .drawer-content {
        margin-left: 0 !important;
    }
    #main-content {
        padding: 0 !important;
    }
}