/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

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

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

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

/* Page transitions */
.page-enter {
    opacity: 0;
    transform: translateY(8px);
}

.page-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

/* Smooth link transitions */
a {
    transition: color 0.15s ease;
}

/* Button press effect */
.btn-press:active {
    transform: scale(0.97);
}

/* Card hover lift */
.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Menu slide animation */
.menu-slide {
    transform-origin: top;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-slide.hidden {
    transform: scaleY(0.95);
    opacity: 0;
    pointer-events: none;
}

/* Sidebar transition */
.sidebar-transition {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

/* Input focus ring */
input:focus, select:focus, textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* Table row hover */
.table-row-hover {
    transition: background-color 0.15s ease;
}

/* Skeleton loading */
.skeleton {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

.dark .skeleton {
    background: linear-gradient(90deg, #334155 25%, #475569 50%, #334155 75%);
    background-size: 200% 100%;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

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

.toast-exit {
    animation: toast-out 0.2s ease-in forwards;
}

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

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

/* Status badge pulse */
.status-pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Dropdown animation */
.dropdown-content {
    transform-origin: top right;
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}

/* Focus visible for accessibility */
.focus-ring:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

/* Stagger animation for lists */
.stagger-item {
    opacity: 0;
    animation: stagger-in 0.3s ease-out forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0.05s; }
.stagger-item:nth-child(2) { animation-delay: 0.1s; }
.stagger-item:nth-child(3) { animation-delay: 0.15s; }
.stagger-item:nth-child(4) { animation-delay: 0.2s; }
.stagger-item:nth-child(5) { animation-delay: 0.25s; }
.stagger-item:nth-child(6) { animation-delay: 0.3s; }
.stagger-item:nth-child(7) { animation-delay: 0.35s; }
.stagger-item:nth-child(8) { animation-delay: 0.4s; }

@keyframes stagger-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile menu overlay */
.menu-overlay {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    transition: opacity 0.3s ease;
}

/* Snackbar slide up animation */
.animate-slide-up {
    animation: slide-up 0.3s ease-out forwards;
}

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Snackbar progress bar shrink */
.animate-shrink-width {
    animation: shrink-width linear forwards;
}

@keyframes shrink-width {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

/* Safe area padding for notched phones (iPhone X+) */
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
}