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

@config 'tailwind.config.js';

:root {
    --ds-dark-bg-primary-color: #1B2431;
    --ds-dark-bg-secondary-color: #273142;
    --ds-dark-bg-tertiary-color: #323D4E;
}

/* Scrollbar Start */
::-webkit-scrollbar {
    @apply w-2 h-2 bg-gray-200 dark:bg-[var(--ds-dark-bg-primary-color)];
}

::-webkit-scrollbar-track {
    @apply bg-gray-200 dark:bg-[var(--ds-dark-bg-primary-color)];
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-300 dark:bg-slate-700;
}
/* Scrollbar End */

.fi-body {
    @apply bg-[#F5F6FA] dark:bg-[var(--ds-dark-bg-primary-color)];
}

.fi-main {
    @apply bg-[#F5F6FA] dark:bg-[var(--ds-dark-bg-primary-color)];
}

.fi-wi-widget {
    > .fi-section {
        @apply ring-offset-0 ring-0 dark:ring-1 dark:ring-offset-0 dark:ring-white/10;
        @apply rounded-2xl;
        @apply dark:bg-[var(--ds-dark-bg-secondary-color)];

        > .fi-section-header {
            .fi-section-header-heading {
                @apply text-2xl;
            }
        }

        > .fi-section-content-ctn {
            @apply border-0;
        }
    }
}

/* Topbar Start */
.fi-topbar {
    > nav {
        @apply ring-offset-0 ring-0 shadow-none;
        @apply border-b-[0.5px] border-b-[#E0E0E0] dark:border-none;
        @apply bg-white dark:bg-[var(--ds-dark-bg-secondary-color)];

        > div[x-persist="topbar.end"] {
            @apply w-full;

            /* Global Search Component Start */
            > .fi-global-search {
                @apply mr-auto;

                .fi-global-search-field {
                    > .fi-input-wrp {
                        @apply rounded-full bg-[#F5F6FA] dark:bg-[var(--ds-dark-bg-tertiary-color)];

                        > .fi-input-wrp-prefix {
                            > .fi-input-wrp-icon {
                                @apply text-gray-600 dark:text-gray-300;
                            }
                        }

                        > .fi-input-wrp-input {
                            > input.fi-input {
                                @apply placeholder:text-gray-600 dark:placeholder:text-gray-300;
                                @apply w-40 sm:w-48 md:w-56 lg:w-64 xl:min-w-64; /* Responsive */
                            }
                        }
                    }
                }

                .fi-global-search-results-ctn {
                    @apply start-0 rounded-2xl ring-0 ring-offset-0;

                    .fi-global-search-result-group {
                        @apply p-2 bg-white dark:bg-[var(--ds-dark-bg-secondary-color)];

                        > div:first-child {
                            @apply border-none bg-white dark:bg-[var(--ds-dark-bg-secondary-color)];

                            > h3 {
                                @apply text-lg bg-white dark:bg-[var(--ds-dark-bg-secondary-color)];
                            }
                        }

                        .fi-global-search-result {
                            @apply rounded-xl;
                        }

                        .fi-global-search-result:not(:first-child) {
                            @apply border-none;
                        }
                    }

                    .fi-global-search-no-results-message {
                        @apply bg-white dark:bg-[var(--ds-dark-bg-secondary-color)];
                    }
                }
            }
            /* Global Search Component End */

            /* Dropdown Panel Component Start */
            .fi-dropdown-panel {
                @apply rounded-2xl ring-0 ring-offset-0;
                @apply bg-white dark:bg-[var(--ds-dark-bg-secondary-color)];

                > .fi-dropdown-header, > .fi-dropdown-list {
                    @apply px-4;
                }
            }
            /* Dropdown Panel Component End */
        }
    }
}
/* Topbar End */

/* Sidebar Start */
.fi-sidebar.fi-sidebar-open {
    .fi-sidebar-header {
        @apply bg-white dark:bg-[var(--ds-dark-bg-secondary-color)];
        @apply justify-center;

        > .fi-icon-btn {
            > .fi-icon-btn-icon {
                @apply text-gray-600 dark:text-gray-300;
            }
        }
    }

    .fi-sidebar-nav {
        @apply bg-white dark:bg-[var(--ds-dark-bg-secondary-color)];
        @apply border-r-[0.9px] border-r-[#E0E0E0] dark:border-none;
        @apply py-4 px-0;
    
        > .fi-sidebar-nav-groups {
            @apply gap-y-4 -mr-4;
    
            > .fi-sidebar-group  {
                > .fi-sidebar-group-button {
                    @apply pl-14 pr-6 mt-2 rtl:pl-6 rtl:pr-14;
    
                    > .fi-icon-btn, > .fi-sidebar-group-label {
                        @apply text-gray-600 dark:text-gray-300;
                    }
                }
    
                > .fi-sidebar-group-items {
                    > .fi-sidebar-item {
                        @apply relative px-10 rtl:pr-14 rtl:pl-6;
    
                        > .fi-sidebar-item-button {
                            @apply bg-white dark:bg-[var(--ds-dark-bg-secondary-color)];
                            @apply px-4 py-3 gap-x-6;
    
                            > .fi-sidebar-item-icon, > .fi-sidebar-item-label {
                                @apply text-gray-800 dark:text-white font-semibold;
                            }
                        }
                    }
    
                    > .fi-sidebar-item.fi-sidebar-item-active {
                        > .fi-sidebar-item-button {
                            @apply bg-primary-600;
                            
                            > .fi-sidebar-item-icon, > .fi-sidebar-item-label {
                                @apply text-white;
                            }

                            .fi-badge {
                                @apply dark:bg-primary-700 dark:text-white ring-white font-extrabold;
                            }
                        }
                    }
    
                    > .fi-sidebar-item::after {
                        content: '';
                        @apply absolute left-0 rtl:right-4 top-0 w-4 h-full rounded-lg;
                    }
    
                    > .fi-sidebar-item.fi-sidebar-item-active::after {
                        @apply bg-primary-600;
                    }
                }
            }
    
            > .fi-sidebar-group:not(:first-child) {
                @apply border-t-[0.6px] border-t-[#E0E0E0] dark:border-white/10;
            }
        }
    }
}

.fi-sidebar:not(.fi-sidebar-open) {
    .fi-sidebar-header {
        @apply bg-white dark:bg-[var(--ds-dark-bg-secondary-color)];
        @apply justify-center;

        > .fi-icon-btn {
            > .fi-icon-btn-icon {
                @apply text-gray-600 dark:text-gray-300;
            }
        }
    }

    .fi-sidebar-nav {
        @apply bg-white dark:bg-[var(--ds-dark-bg-secondary-color)];
        @apply border-r-[0.9px] border-r-[#E0E0E0] dark:border-none;
        @apply py-4 px-0;
    
        > .fi-sidebar-nav-groups {
            @apply gap-y-4 -mr-4;
    
            > .fi-sidebar-group  {
                > .fi-sidebar-group-button {
                    @apply pl-14 pr-6 mt-2 rtl:pl-6 rtl:pr-14;
    
                    > .fi-icon-btn, > .fi-sidebar-group-label {
                        @apply text-gray-600 dark:text-gray-300;
                    }
                }
    
                > .fi-sidebar-group-items {
                    > .fi-sidebar-item {
                        @apply relative rtl:pr-8;

                        > .fi-sidebar-item-button {
                            @apply bg-white dark:bg-[var(--ds-dark-bg-secondary-color)];
                            @apply px-4 py-3 gap-x-6;
    
                            > .fi-sidebar-item-icon, > .fi-sidebar-item-label {
                                @apply text-gray-800 dark:text-white font-semibold;
                            }
                        }
                    }
    
                    > .fi-sidebar-item.fi-sidebar-item-active {
                        > .fi-sidebar-item-button {
                            > .fi-sidebar-item-icon, > .fi-sidebar-item-label {
                                @apply text-primary-600;
                            }
                        }
                    }
     
                    > .fi-sidebar-item::after {
                        content: '';
                        @apply absolute left-0 rtl:right-4 top-0 w-4 h-full rounded-lg;
                    }
    
                    > .fi-sidebar-item.fi-sidebar-item-active::after {
                        @apply bg-primary-600;
                    }
                }

                &:not(:first-child) {
                    @apply border-t-[0.6px] border-t-[#E0E0E0] dark:border-none;
                }
            }
        }
    }
}
/* Sidebar End */

/* Section Start */
.fi-section {
    @apply ring-0 dark:bg-[var(--ds-dark-bg-secondary-color)] dark:border dark:border-white/10;
}
/* Section End */

/* Widget Component Start */
.fi-wi-stats-overview-stat {
    @apply ring-0 dark:bg-[var(--ds-dark-bg-secondary-color)] dark:border dark:border-white/10;

    .fi-wi-stats-overview-stat-label {
        @apply text-base;
    }
}
/* Widget Component End */

/** Page Component Start */
.fi-page {
    &:not(.fi-dashboard-page) {
        .fi-header {
            @apply border-b-[1px] border-b-[#E0E0E0] dark:border-white/10;
        }
    }

    > section {
        @apply gap-y-6;
    }

    .fi-header {
        @apply pb-6;
    }
    
    /* Table Component Start */
    .fi-ta-content {
        > .fi-ta-table {
            > thead {
                @apply bg-[#FCFDFD] dark:bg-[var(--ds-dark-bg-tertiary-color)];
            }

            > tbody {
                @apply bg-white dark:bg-[var(--ds-dark-bg-secondary-color)];

                > tr.fi-ta-row {
                    > td.fi-ta-cell {
                        @apply py-1;
                    }
                }
            }
        }
    }
    /* Table Component End */

    /* Table Component 2 Start */
    .fi-ta-ctn {
        @apply ring-0 dark:bg-[var(--ds-dark-bg-secondary-color)] dark:border dark:border-white/10;

        .fi-ta-header-ctn {
            .fi-ta-header-toolbar {
                @apply border-0;
            }

            .fi-ta-header {
                .fi-ta-header-heading {
                    @apply text-2xl;
                }
            }
        }

        .fi-ta-content {
            @apply p-3 border-0;

            .fi-ta-table {
                thead {
                    > tr {
                        .fi-ta-actions-header-cell, 
                        .fi-ta-header-cell,
                        .fi-ta-cell {
                            @apply bg-primary-100/10 dark:bg-[var(--ds-dark-bg-tertiary-color)];
                        }

                        &:only-child {
                            .fi-ta-header-cell:first-child,
                            .fi-ta-cell {
                                @apply ltr:rounded-l-2xl rtl:rounded-r-2xl;
                            }

                            .fi-ta-header-cell:last-child,
                            .fi-ta-actions-header-cell {
                                @apply ltr:rounded-r-2xl rtl:rounded-l-2xl;
                            }
                        }

                        &:not(:only-child) {
                            @apply bg-primary-100/10 dark:bg-[var(--ds-dark-bg-tertiary-color)];

                            &:first-child {
                                > th {
                                    @apply border-none bg-primary-100/10;

                                    &:first-child {
                                        @apply ltr:rounded-tl-2xl rtl:rounded-tr-2xl;
                                    }

                                    &:last-child {
                                        @apply ltr:rounded-tr-2xl rtl:rounded-tl-2xl;
                                    }
                                }
                            }

                            &:last-child {
                                > th {
                                    @apply border-none;

                                    &:first-child {
                                        @apply ltr:rounded-bl-2xl rtl:rounded-br-2xl;
                                    }

                                    &:last-child {
                                        @apply ltr:rounded-br-2xl rtl:rounded-bl-2xl;
                                    }
                                }
                            }
                        }
                    }
                }

                tbody {
                    @apply border-0;

                    .fi-ta-row:not(:first-child) {
                        @apply border-none;

                        &.fi-ta-summary-header-row {
                            & > td:first-child {
                                @apply ltr:rounded-l-2xl rtl:rounded-r-2xl;
                            }

                            & > td:last-child {
                                @apply ltr:rounded-r-2xl rtl:rounded-l-2xl;
                            }
                        }
                    }

                    .fi-ta-cell {
                        &:first-child {
                            @apply ltr:rounded-l-2xl rtl:rounded-r-2xl;
                        }

                        &:last-child {
                            @apply ltr:rounded-r-2xl rtl:rounded-l-2xl;
                        }

                        .fi-input-wrp {
                            @apply mt-3;
                        }
                    }
                }
            }
            
            /* Table Component 2.1 Start */
            > div {
                &:first-child {
                    @apply rounded-xl bg-gray-400/10 dark:bg-[var(--ds-dark-bg-tertiary-color)];
                }

                &:nth-child(2) {
                    @apply border-none;

                    /* Table Component 2.1.1 Start */
                    &:not(.fi-ta-content-grid) {
                        @apply bg-white dark:bg-[var(--ds-dark-bg-secondary-color)];

                        & > div {
                            @apply rounded-xl;
                        }
                    }
                    /* Table Component 2.1.1 End */

                    /* Table Component 2.1.2 Start */
                    &.fi-ta-content-grid {
                        @apply gap-6;

                        .fi-ta-record {
                            @apply rounded-3xl ring-0 shadow-sm bg-gray-50 dark:bg-[var(--ds-dark-bg-tertiary-color)];
                            @apply bg-[url(/vendor/nuxtifyts/dash-stack-theme/card-bg-pattern.svg)];
                        }
                    }
                    /* Table Component 2.1.2 End */
                }
            }

            .fi-ta-record {
                @apply bg-white hover:bg-gray-100 dark:bg-[var(--ds-dark-bg-secondary-color)] dark:hover:bg-[var(--ds-dark-bg-tertiary-color)];
            }
            /* Table Component 2.1 End */
        }
    }
    /* Table Component 2 End */

    /* Navigation Component Start */
    .fi-pagination {
        @apply bg-white dark:bg-[var(--ds-dark-bg-secondary-color)];
    }
    /* Navigation Component End */
}
/* Page Component End */

/* Button Component Start */
.fi-btn {
    @apply rounded-md sm:rounded-lg;
    @apply py-1 px-3 sm:py-2 sm:px-4;
    @apply text-sm sm:text-base;

    .fi-btn-label {
        @apply text-sm sm:text-base;
    }
}
/* Button Component End */

/* Notification Icon Button Start */
.fi-topbar-database-notifications-btn {
    .fi-icon-btn-icon {
        @apply dark:text-white/75;
    }
}
/* Notification Icon Button End */

/* Icon Button Component Start */
.fi-icon-btn {
    > .fi-icon-btn-badge-ctn {
        @apply -translate-x-full -translate-y-1/3;
    }
}
/* Icon Button Component End */

/* Checkbox Component Start */
.fi-checkbox-input {
    @apply w-5 h-5 rounded-s-md ring-1 ring-gray-300 dark:ring-white/10 bg-white dark:bg-transparent;

    &:checked {
        @apply bg-blue-500 dark:bg-blue-500 ring-blue-500 dark:ring-blue-500;
    }

    &:focus, &:active, &:checked:focus {
        @apply outline-none ring-2 ring-blue-600 dark:ring-blue-400;
    }
}
/* Checkbox Component End */

.fi-logo {
    @apply text-3xl;
}

/* Input Component Start */
.fi-fo-field-wrp {
    label.fi-fo-field-wrp-label {
        > span {
            @apply text-base;
        }
    }
}

.fi-input-wrp {
    @apply bg-gray-50 dark:bg-[var(--ds-dark-bg-tertiary-color)];

    > .fi-input-wrp-input {
        > input.fi-input {
            @apply py-3 border-gray-200 dark:border-white/10;
        }
    }
}
/* Input Component End */

/* Modal Component Start */
.fi-modal-window {
    @apply bg-white dark:bg-[var(--ds-dark-bg-secondary-color)];

    &:not(.fi-modal-slide-over-window) {
        > .fi-modal-header {
            @apply rounded-tl-2xl rounded-tr-2xl;
        }
    }

    > .fi-modal-header {
        @apply bg-white dark:bg-[var(--ds-dark-bg-secondary-color)];

        .fi-modal-heading {
            @apply text-2xl;

            .fi-badge {
                @apply ms-0;
            }
        }
    }

    > .fi-modal-content {
        > div:first-child {
            /* Notification Wrapper */
            & > div {
                @apply border-none my-2;

                &::before {
                    @apply rounded-lg w-3 -translate-x-1/2 rtl:translate-x-1/2 h-[90%] top-1/2 -translate-y-1/2 left-0;
                }
            }
            /* Notification Wrapper End */
        }
        .fi-no-notification {
            @apply border-0;
        }
    }
}
/* Modal Component End */

/* Tabs Component Start */
.fi-tabs {
    @apply ring-0 dark:bg-[var(--ds-dark-bg-secondary-color)] rounded-t-xl;
}

.fi-fo-tabs-tab {
    @apply ring-offset-0 ring-0 dark:ring-1 dark:ring-offset-0 dark:ring-white/10;
    @apply dark:bg-[var(--ds-dark-bg-secondary-color)];
}
/* Tabs Component End */