@import '../../../../vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';

/* 
    Try to use these colors only 
    'danger', 'gray, 'info', 'primary', 'success', 'warning'
*/


/* ==============================================
   BODY STYLING
   ============================================== */
.fi-body {
    @apply py-2 bg-gray-100 dark:bg-gray-900;
}

/* ==============================================
   SIDEBAR STYLING
   ============================================== */

/* Sidebar Header */
.fi-sidebar-header {
    @apply p-2 mb-2 bg-transparent mx-2 shadow-none border-b-2 border-gray-200/40 dark:border-gray-700/40 ring-0;
}

/* Sidebar Navigation */
.fi-sidebar-nav {
    @apply p-2;
    scrollbar-gutter: initial!important;
} 

/* Sidebar Navigation Groups */
.fi-sidebar-nav-groups{
    @apply gap-2 mx-0;
}

/* Sidebar Group Container */
.fi-sidebar-group {
    @apply border-b border-gray-200/40 dark:border-gray-700/40 pb-2;
}

/* Sidebar Group Label */
.fi-sidebar-group-label {
    @apply text-xs uppercase tracking-wider;
}

/* Sidebar Item Button */
.fi-sidebar-item-button {
    @apply rounded-lg text-sm bg-gray-100 hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-800 transition-colors duration-200;
}

/* Active Sidebar Item */
.fi-sidebar-item-active .fi-sidebar-item-button {
    @apply bg-gray-200 dark:bg-gray-800;
}

/* ==============================================
   MAIN CONTENT STYLING
   ============================================== */

/* Main Container */
.fi-main-ctn{
    @apply rounded-lg overflow-hidden shadow-md bg-gray-50 dark:bg-gray-950 mx-3;
}

/* Main Content */
.fi-main{
    @apply md:px-4 lg:px-6;
}

/* ==============================================
   TOPBAR STYLING
   ============================================== */

/* Topbar Container */
.fi-topbar {
    @apply px-2 mb-2 bg-transparent shadow-none border-b-2 border-gray-200/40 dark:border-gray-700/40;
}

/* Topbar Navigation */
.fi-topbar > nav {
    @apply bg-transparent dark:bg-transparent p-0 ring-0 shadow-none;
}

/* ==============================================
   PAGE STYLING
   ============================================== */

/* First Page Section */
.fi-page section:nth-of-type(1){
    @apply py-2;
}