.gradient-bg {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.transition-all {
    transition: all 0.3s ease;
}

/* Modal Animation */
.modal-enter {
    opacity: 0;
    transform: scale(0.95);
}

.modal-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 200ms ease-out, transform 200ms ease-out;
}

.modal-exit {
    opacity: 1;
    transform: scale(1);
}

.modal-exit-active {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 200ms ease-in, transform 200ms ease-in;
}

.modal-backdrop {
    backdrop-filter: blur(4px);
}

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

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

.scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: #9ca3af;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-thin::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-thin {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Show scrollbar on hover */
.scrollbar-thin:hover::-webkit-scrollbar {
    display: block;
}

/* Layout Fixes */
@media (min-width: 1024px) {
    main {
        height: calc(100vh - 8rem);
        overflow: hidden;
    }

    main > div {
        height: 100%;
    }

    #listContainer {
        position: relative;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    #listContainer > div {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    #listContainer .sticky {
        position: sticky;
        top: 0;
        z-index: 50;
        background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    }

    #listContainer .overflow-y-auto {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
    }

    /* Dashboard container */
    .order-1.lg\:order-2 {
        height: 100%;
        overflow: hidden;
    }

    .order-1.lg\:order-2 > div {
        height: 100%;
        overflow-y: auto;
    }
}

/* Mobile Layout Fixes */
@media (max-width: 1023px) {
    #listContainer {
        padding-top: 0;
    }

    #listContainer .fixed {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 50;
        background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    #listContainer .h-\[180px\] {
        display: none;
    }

    #listContainer .overflow-y-auto {
        padding-top: 0;
    }

    #studentTableBody {
        padding-top: 0;
    }

    /* Mobile Navigation */
    nav.lg\:hidden {
        background: linear-gradient(to top, #f8fafc, #f1f5f9);
        box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    nav.lg\:hidden button {
        transition: all 0.2s ease;
    }

    nav.lg\:hidden button:hover {
        background: rgba(0, 0, 0, 0.05);
    }

    nav.lg\:hidden button.active {
        color: #2563eb;
        background: rgba(37, 99, 235, 0.1);
    }
}