/* tailwind css */

@import 'tailwindcss';

@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

@import './components/simplebar.css';
@import './utilities/header.css';
@import './utilities/reboot.css';
@import './utilities/sidebar.css';

/* Preline plugin css */
@import "../../../node_modules/preline/variants.css";


@theme {

    /* Fonts */
    --font-*: initial;
    --font-sans: Plus Jakarta Sans, sans-serif;
    /* Default colors */
    --color-primary: oklch(65.33% 0.184 266.79);
    --color-secondary: oklch(76.32% 0.139 237.20);
    --color-info: oklch(68.98% 0.165 257.10);
    --color-success: oklch(80.48% 0.150 174.63);
    --color-warning: oklch(80.94% 0.165 74.03);
    --color-error: oklch(74.75% 0.144 35.82);
    --color-dark: oklch(27.84% 0.027 257.53);
    /* Custom theme Radius */
    --radius-sm: 4px;
    --radius-md: 7px;
    /* Custom Shadow */
    --shadow-md: rgba(145, 158, 171, 0.2) 0px 0px 2px 0px, rgba(145, 158, 171, 0.12) 0px 12px 24px -4px;
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);

}

@utility container {
    @apply max-w-[1200px] mx-auto px-5;
}

@utility card {
    @apply rounded-md shadow-md bg-white relative;
}

@utility card-body {
    @apply p-6;
}

@utility hs-dropdown-menu {
    @apply shadow-md bg-white relative rounded-md;
}

@utility btn {
    @apply rounded-md bg-primary text-white text-sm py-2 px-4 text-center;
}

@utility btn-outline-primary {
    @apply rounded-md border border-primary text-primary text-sm py-2 px-4 text-center;
}

@utility activemenu {
    @apply bg-primary text-white hover:bg-primary hover:text-white dark:hover:bg-primary dark:hover:text-white
}

@utility dropdown-menu-link {
    @apply w-full flex cursor-pointer items-center text-sm hover:bg-primary/10 hover:text-primary
}

@utility dropdown-menu-active {
    @apply bg-primary dark:bg-primary text-white hover:bg-primary hover:text-white dark:hover:bg-primary dark:hover:text-white
}

@utility dropdown-submenu-link {
    @apply w-full py-2 flex gap-2 items-center text-sm hover:text-primary dark:hover:text-primary
}

@layer components {
    #sidebarnav .hs-accordion-content {
        @apply w-full overflow-hidden transition-[height] duration-300 hidden
    }
}