/* Custom Styles - extending Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .glass-card {
        @apply bg-white/60 dark:bg-dark-card/80 backdrop-blur-xl supports-[backdrop-filter]:bg-white/60;
    }

    .btn-primary {
        @apply px-6 py-2.5 bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-xl shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-dark-bg transition-all duration-200;
    }

    .btn-secondary {
        @apply px-4 py-2 bg-white dark:bg-slate-800 hover:bg-gray-50 dark:hover:bg-slate-700 text-gray-700 dark:text-gray-200 font-medium rounded-xl border border-gray-200 dark:border-slate-600 shadow-sm hover:shadow focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-dark-bg transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white dark:disabled:hover:bg-slate-800;
    }
}

/* Custom Scrollbar for sleek UI */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-300 dark:bg-slate-600 rounded-full;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400 dark:bg-slate-500;
}

/* Ensure font family is applied correctly */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Toast animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast-enter {
    animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.toast-exit {
    animation: fadeOutRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Sortable column header styling */
th[data-sortable] {
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: background-color 0.2s;
}

th[data-sortable]:hover {
    @apply bg-gray-100 dark:bg-slate-700/80;
}

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

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

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

/* Table row hover effect */
tbody tr {
    transition: background-color 0.15s ease;
}

tbody tr:hover {
    @apply bg-gray-50/80 dark:bg-slate-800/60;
}