/* Filament Tabs - Border Top Justified Style */

.nav-border-top .fi-tabs {
    @apply w-full border-b-0 border-t border-gray-200;
}

.nav-border-top .fi-tabs-list {
    @apply w-full grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.nav-border-top .fi-tabs-item {
    @apply relative border-b border-gray-200 border-t-2 border-t-transparent flex items-center justify-center gap-2 py-3 px-4 text-sm font-medium text-gray-500 hover:text-gray-700 transition-colors;
}

.nav-border-top .fi-tabs-item::before {
    content: '';
    @apply absolute top-0 left-0 right-0 h-0.5 bg-transparent transition-colors;
}

/* Active tab styling with primary color border on top */
.nav-border-top .fi-tabs-item.fi-active {
    @apply border-t-primary-500 text-primary-600 bg-gray-50/50;
}

.nav-border-top .fi-tabs-item.fi-active::before {
    @apply bg-primary-500;
}

/* Justified tabs - equal width distribution */
.nav-justified .fi-tabs-list {
    @apply flex flex-row;
}

.nav-justified .fi-tabs-item {
    @apply flex-1 text-center justify-center;
}

/* Ensure icons align properly */
.nav-border-top .fi-tabs-item svg,
.nav-border-top .fi-tabs-item .heroicon {
    @apply w-5 h-5;
}

/* Dark mode support */
.dark .nav-border-top .fi-tabs {
    @apply border-gray-700;
}

.dark .nav-border-top .fi-tabs-item {
    @apply border-gray-700 text-gray-400 hover:text-gray-200;
}

.dark .nav-border-top .fi-tabs-item.fi-active {
    @apply bg-gray-800/50;
}

/* Slide-over modal specific fixes */
.fi-modal-content .nav-border-top .fi-tabs {
    @apply mt-2;
}

.fi-modal-content .nav-border-top .fi-tabs-list {
    @apply gap-0;
}