/* Animate css */
@import './assets/css/animate.css';

/* tippy css */
@import './assets/css/tippy.css';

/* swiper css */
@import './assets/css/swiper.css';

/* Elements - Progressbar */
@import './assets/css/progressbar.css';

/* Data tables css */
@import './assets/css/datatables.css';

/* scrumboard */
@import './assets/css/scrumboard.css';

/* calendar css */
@import './assets/css/fullcalendar.css';

/* sweetalert css */
@import './assets/css/sweetalert.css';

/* flatpickr css */
@import './assets/css/flatpickr.css';

/* quill-editor css */
@import './assets/css/quill-editor.css';

/* markdown-editor css */
@import './assets/css/markdown-editor.css';

/* file upload with preview */
@import './assets/css/file-upload-preview.css';

/* dragndrop*/
@import './assets/css/dragndrop.css';

/* form element*/
@import './assets/css/form-elements.css';

/* Select2*/
@import './assets/css/select2.css';

@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
    --bg-color: #f8fafc;
    --text-color: #2b1a14;
    --card-bg: #ffffff;
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-serif: 'Cormorant Garamond', ui-serif, Georgia, Cambria, 'Times New Roman', serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --font-display: 'Space Grotesk', 'Inter', sans-serif;
    --font-nunito: 'Nunito', sans-serif;
    --font-rubik: 'Rubik', sans-serif;
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-100: oklch(93.6% 0.032 17.717);
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-900: oklch(39.6% 0.141 25.723);
    --color-red-950: oklch(25.8% 0.092 26.042);
    --color-orange-50: oklch(98% 0.016 73.684);
    --color-orange-400: oklch(75% 0.183 55.934);
    --color-orange-600: oklch(64.6% 0.222 41.116);
    --color-orange-950: oklch(26.6% 0.079 36.259);
    --color-amber-50: oklch(98.7% 0.022 95.277);
    --color-amber-100: oklch(96.2% 0.059 95.617);
    --color-amber-200: oklch(92.4% 0.12 95.746);
    --color-amber-300: oklch(87.9% 0.169 91.605);
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-amber-600: oklch(66.6% 0.179 58.318);
    --color-amber-700: oklch(55.5% 0.163 48.998);
    --color-amber-800: oklch(47.3% 0.137 46.201);
    --color-amber-900: oklch(41.4% 0.112 45.904);
    --color-amber-950: oklch(27.9% 0.077 45.635);
    --color-emerald-50: oklch(97.9% 0.021 166.113);
    --color-emerald-100: oklch(95% 0.052 163.051);
    --color-emerald-200: oklch(90.5% 0.093 164.15);
    --color-emerald-300: oklch(84.5% 0.143 164.978);
    --color-emerald-400: oklch(76.5% 0.177 163.223);
    --color-emerald-500: oklch(69.6% 0.17 162.48);
    --color-emerald-600: oklch(59.6% 0.145 163.225);
    --color-emerald-700: oklch(50.8% 0.118 165.612);
    --color-emerald-900: oklch(37.8% 0.077 168.94);
    --color-emerald-950: oklch(26.2% 0.051 172.552);
    --color-sky-50: oklch(97.7% 0.013 236.62);
    --color-sky-100: oklch(95.1% 0.026 236.824);
    --color-sky-200: oklch(90.1% 0.058 230.902);
    --color-sky-400: oklch(74.6% 0.16 232.661);
    --color-sky-700: oklch(50% 0.134 242.749);
    --color-sky-900: oklch(39.1% 0.09 240.876);
    --color-sky-950: oklch(29.3% 0.066 243.157);
    --color-blue-50: oklch(97% 0.014 254.604);
    --color-blue-100: oklch(93.2% 0.032 255.585);
    --color-blue-200: oklch(88.2% 0.059 254.128);
    --color-blue-300: oklch(80.9% 0.105 251.813);
    --color-blue-400: oklch(70.7% 0.165 254.624);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-blue-700: oklch(48.8% 0.243 264.376);
    --color-blue-800: oklch(42.4% 0.199 265.638);
    --color-blue-900: oklch(37.9% 0.146 265.522);
    --color-blue-950: oklch(28.2% 0.091 267.935);
    --color-indigo-50: oklch(96.2% 0.018 272.314);
    --color-indigo-100: oklch(93% 0.034 272.788);
    --color-indigo-200: oklch(87% 0.065 274.039);
    --color-indigo-300: oklch(78.5% 0.115 274.713);
    --color-indigo-400: oklch(67.3% 0.182 276.935);
    --color-indigo-500: oklch(58.5% 0.233 277.117);
    --color-indigo-600: oklch(51.1% 0.262 276.966);
    --color-indigo-700: oklch(45.7% 0.24 277.023);
    --color-indigo-900: oklch(35.9% 0.144 278.697);
    --color-indigo-950: oklch(25.7% 0.09 281.288);
    --color-violet-50: oklch(96.9% 0.016 293.756);
    --color-violet-100: oklch(94.3% 0.029 294.588);
    --color-violet-400: oklch(70.2% 0.183 293.541);
    --color-violet-500: oklch(60.6% 0.25 292.717);
    --color-violet-600: oklch(54.1% 0.281 293.009);
    --color-violet-700: oklch(49.1% 0.27 292.581);
    --color-violet-900: oklch(38% 0.189 293.745);
    --color-violet-950: oklch(28.3% 0.141 291.089);
    --color-purple-50: oklch(97.7% 0.014 308.299);
    --color-purple-100: oklch(94.6% 0.033 307.174);
    --color-purple-200: oklch(90.2% 0.063 306.703);
    --color-purple-400: oklch(71.4% 0.203 305.504);
    --color-purple-700: oklch(49.6% 0.265 301.924);
    --color-purple-900: oklch(38.1% 0.176 304.987);
    --color-purple-950: oklch(29.1% 0.149 302.717);
    --color-pink-50: oklch(97.1% 0.014 343.198);
    --color-pink-100: oklch(94.8% 0.028 342.258);
    --color-pink-200: oklch(89.9% 0.061 343.231);
    --color-pink-300: oklch(82.3% 0.12 346.018);
    --color-pink-400: oklch(71.8% 0.202 349.761);
    --color-pink-500: oklch(65.6% 0.241 354.308);
    --color-pink-600: oklch(59.2% 0.249 0.584);
    --color-pink-700: oklch(52.5% 0.223 3.958);
    --color-pink-900: oklch(40.8% 0.153 2.432);
    --color-pink-950: oklch(28.4% 0.109 3.907);
    --color-rose-50: oklch(96.9% 0.015 12.422);
    --color-rose-100: oklch(94.1% 0.03 12.58);
    --color-rose-200: oklch(89.2% 0.058 10.001);
    --color-rose-400: oklch(71.2% 0.194 13.428);
    --color-rose-500: oklch(64.5% 0.246 16.439);
    --color-rose-600: oklch(58.6% 0.253 17.585);
    --color-rose-700: oklch(51.4% 0.222 16.935);
    --color-rose-900: oklch(41% 0.159 10.272);
    --color-rose-950: oklch(27.1% 0.105 12.094);
    --color-slate-50: oklch(98.4% 0.003 247.858);
    --color-slate-100: oklch(96.8% 0.007 247.896);
    --color-slate-200: oklch(92.9% 0.013 255.508);
    --color-slate-300: oklch(86.9% 0.022 252.894);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-slate-600: oklch(44.6% 0.043 257.281);
    --color-slate-700: oklch(37.2% 0.044 257.287);
    --color-slate-800: oklch(27.9% 0.041 260.031);
    --color-slate-900: oklch(20.8% 0.042 265.755);
    --color-slate-950: oklch(12.9% 0.042 264.695);
    --color-neutral-900: oklch(20.5% 0 0);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: 1.5;
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: 1.2;
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --tracking-tight: -0.025em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --animate-spin: spin 1s linear infinite;
    --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --animate-bounce: bounce 1s infinite;
    --blur-xs: 4px;
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-2xl: 40px;
    --blur-3xl: 64px;
    --default-transition-duration: 0.15s;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
}

.dark {
    --bg-color: #060818;
    --text-color: #e0e6ed;
    --card-bg: #0e1726;
}

/* Apply globally */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-sans);
    transition: all 0.3s ease;
}

@layer components {
    html {
        @apply scroll-smooth;
    }

    body {
        @apply bg-[#fafafa] font-sans;
    }

    body.dark {
        @apply bg-[#060818];
    }

    /* Panel */
    .panel {
        @apply relative rounded-md bg-white p-5 shadow dark:bg-black;
    }

    /* Navbar */
    .navbar-sticky header,
    .navbar-floating header {
        @apply sticky top-0 z-20;
    }
    .navbar-floating header {
        @apply bg-[#fafafa]/90 px-6 pt-4 dark:bg-[#060818]/90;
    }
    .navbar-floating header > div > div:first-child {
        @apply rounded-md;
    }
    .horizontal .navbar-floating header > div > div:first-child {
        @apply rounded-b-none;
    }
    .horizontal .navbar-floating header .horizontal-menu {
        @apply rounded-b-md;
    }

    /* Sidebar */
    .sidebar:hover .nav-item > a {
        @apply w-auto;
    }

    .sidebar .nav-item > button,
    .sidebar .nav-item > a {
        @apply mb-1 flex w-full items-center justify-between overflow-hidden whitespace-nowrap rounded-md p-2.5 text-[#506690] hover:bg-[#000]/[0.08] hover:text-black dark:hover:bg-[#181f32] dark:hover:text-surface-dark;
    }
    .sidebar .nav-item > button.active,
    .sidebar .nav-item > a.active {
        @apply bg-[#000]/[0.08] text-black dark:bg-[#181f32] dark:text-surface-dark;
    }

    .sidebar .nav-item > button.active > div > span,
    .sidebar .nav-item > a.active > div > span {
        @apply dark:!text-surface-dark;
    }

    .sidebar ul.sub-menu li button,
    .sidebar ul.sub-menu li a {
        @apply flex w-full items-center px-9 py-2.5 before:h-0.5 before:w-2 before:rounded before:bg-gray-300 hover:bg-gray-100
hover:text-primary hover:before:!bg-primary ltr:before:mr-2 rtl:before:ml-2 dark:before:bg-gray-500 dark:hover:bg-gray-900 dark:hover:text-primary;
    }
    .sidebar ul.sub-menu li button.active,
    .sidebar ul.sub-menu li a.active {
        @apply text-primary before:bg-primary;
    }

    .sidebar .nav-item a div:first-child svg,
    .sidebar .nav-item button div:first-child svg {
        @apply h-5 w-5 text-black/50 dark:text-white/50;
    }

    .main-container .main-content {
        @apply transition-all duration-300 lg:ltr:ml-[256px] lg:rtl:mr-[256px];
    }

    /* Horizontal layouts */
    .horizontal .horizontal-menu {
        @apply hidden shadow-md lg:flex;
    }
    .horizontal .horizontal-logo {
        @apply flex;
    }
    .horizontal .main-container .main-content {
        @apply ltr:ml-0 rtl:mr-0;
    }
    .horizontal .sidebar {
        @apply ltr:-left-[256px] rtl:-right-[256px];
    }
    .horizontal.toggle-sidebar .sidebar {
        @apply ltr:left-0 rtl:right-0 lg:ltr:-left-[256px] lg:rtl:-right-[256px];
    }

    .horizontal .nav-item a div:first-child svg,
    .horizontal .nav-item button div:first-child svg {
        @apply w-5 h-5 text-black/50 dark:text-white/50;
    }

    .horizontal .dark .nav-item button div:first-child svg,
    .dark.horizontal .nav-item button div:first-child svg {
        @apply text-white/50;
    }

    .horizontal-menu .nav-link {
        @apply flex items-center py-2.5 px-2 rounded-lg hover:bg-[#000]/[0.08] hover:text-black dark:hover:bg-[#181f32] dark:hover:text-surface-dark xl:px-4;
    }

    .horizontal-menu .nav-link.active {
        @apply bg-[#000]/[0.08] text-black dark:bg-[#181f32] dark:text-surface-dark;
    }

    .horizontal-menu ul.sub-menu {
        @apply absolute top-full z-[10] hidden min-w-[180px] rounded bg-white p-0 py-2 text-dark shadow dark:bg-[#1b2e4b] dark:text-surface-dark;
    }

    .horizontal-menu ul.sub-menu a,
    .horizontal-menu ul.sub-menu button {
        @apply flex items-center justify-between px-4 py-2 hover:bg-gray-100 hover:text-primary dark:hover:bg-primary/10 w-full;
    }

    .horizontal-menu ul.sub-menu a.active,
    .horizontal-menu ul.sub-menu button.active {
        @apply bg-gray-100 text-primary dark:bg-primary/10;
    }

    .horizontal-menu > li.nav-item:hover > ul.sub-menu,
    .horizontal-menu > li.nav-item > ul.sub-menu > li:hover > ul {
        @apply block;
    }

    /* Vertical layouts */
    .vertical.toggle-sidebar .horizontal-logo,
    .vertical.toggle-sidebar .collapse-icon {
        @apply flex;
    }
    .vertical.toggle-sidebar .main-container .main-content {
        @apply ltr:ml-0 rtl:mr-0;
    }
    .vertical .sidebar {
        @apply ltr:-left-[256px] rtl:-right-[256px] lg:ltr:left-0 lg:rtl:right-0;
    }
    .vertical.toggle-sidebar .sidebar {
        @apply ltr:left-0 rtl:right-0 lg:ltr:-left-[256px] lg:rtl:-right-[256px];
    }

    /* Collapsible vertical layouts */
    .collapsible-vertical .sidebar {
        @apply hover:w-[256px] ltr:-left-[256px] rtl:-right-[256px] lg:w-[70px] lg:ltr:left-0 lg:rtl:right-0;
    }
    .collapsible-vertical.toggle-sidebar .sidebar {
        @apply ltr:left-0 rtl:right-0;
    }
    .collapsible-vertical.toggle-sidebar .sidebar {
        @apply lg:w-[256px];
    }
    .collapsible-vertical.toggle-sidebar .sidebar .nav-item > a {
        @apply w-auto;
    }
    .collapsible-vertical.toggle-sidebar .main-content {
        @apply lg:w-[calc(100%-256px)] lg:ltr:ml-[256px] lg:rtl:mr-[256px];
    }

    .collapsible-vertical .sidebar .sub-menu {
        @apply lg:hidden;
    }
    .collapsible-vertical .sidebar:hover .sub-menu,
    .collapsible-vertical .sidebar:hover .sub-menu.recent-submenu,
    .collapsible-vertical.toggle-sidebar .sidebar .sub-menu {
        @apply block;
    }
    .collapsible-vertical .main-content {
        @apply lg:w-[calc(100%-70px)] lg:ltr:ml-[70px] lg:rtl:mr-[70px];
    }
    .collapsible-vertical .sidebar .collapse-icon,
    .collapsible-vertical .main-logo > span {
        @apply transition-opacity duration-300 lg:opacity-0;
    }
    .collapsible-vertical .sidebar:hover .collapse-icon,
    .collapsible-vertical.toggle-sidebar .collapse-icon,
    .collapsible-vertical .sidebar:hover .main-logo > span,
    .collapsible-vertical.toggle-sidebar .main-logo > span {
        @apply duration-500 lg:opacity-100;
    }
    .collapsible-vertical.toggle-sidebar .sidebar .collapse-icon {
        @apply flex rotate-0;
    }
    .collapsible-vertical .sidebar:hover .collapse-icon {
        @apply flex rotate-180;
    }
    .collapsible-vertical .sidebar ul > h2 span {
        @apply hidden whitespace-nowrap;
    }
    .collapsible-vertical .sidebar ul > h2 svg {
        @apply block;
    }
    .collapsible-vertical .sidebar:hover ul > h2 span,
    .collapsible-vertical.toggle-sidebar .sidebar ul > h2 span {
        @apply inline;
    }
    .collapsible-vertical .sidebar:hover ul > h2 svg,
    .collapsible-vertical.toggle-sidebar .sidebar ul > h2 svg {
        @apply hidden;
    }

    /* boxed-layout */
    .boxed-layout {
        @apply mx-auto max-w-[1400px];
    }

    .boxed-layout.vertical .sidebar,
    .boxed-layout.collapsible-vertical .sidebar {
        @apply overflow-hidden lg:ltr:left-auto lg:rtl:right-auto;
    }

    .boxed-layout.vertical.toggle-sidebar .sidebar {
        @apply lg:w-0;
    }

    /* Buttons */
    .btn {
        @apply relative flex items-center justify-center rounded-md border px-5 py-2 text-sm font-semibold shadow-[0_10px_20px_-10px] outline-none transition duration-300 hover:shadow-none;
    }
    .btn-lg {
        @apply px-7 py-2.5 text-base;
    }
    .btn-sm {
        @apply px-2.5 py-1.5 text-xs;
    }
    .btn[disabled] {
        @apply cursor-not-allowed opacity-60;
    }

    .btn-primary {
        @apply border-primary bg-primary text-white shadow-primary/60;
    }
    .btn-outline-primary {
        @apply border-primary text-primary shadow-none hover:bg-primary hover:text-white;
    }

    .btn-secondary {
        @apply border-secondary bg-secondary text-white shadow-secondary/60;
    }
    .btn-outline-secondary {
        @apply border-secondary text-secondary shadow-none hover:bg-secondary hover:text-white;
    }

    .btn-success {
        @apply border-success bg-success text-white shadow-success/60;
    }
    .btn-outline-success {
        @apply border-success text-success shadow-none hover:bg-success hover:text-white;
    }

    .btn-danger {
        @apply border-danger bg-danger text-white shadow-danger/60;
    }
    .btn-outline-danger {
        @apply border-danger text-danger shadow-none hover:bg-danger hover:text-white;
    }

    .btn-warning {
        @apply border-warning bg-warning text-white shadow-warning/60;
    }
    .btn-outline-warning {
        @apply border-warning text-warning shadow-none hover:bg-warning hover:text-white;
    }

    .btn-info {
        @apply border-info bg-info text-white shadow-info/60;
    }
    .btn-outline-info {
        @apply border-info text-info shadow-none hover:bg-info hover:text-white;
    }

    .btn-dark {
        @apply border-dark bg-dark text-white shadow-dark/60;
    }

    .btn-outline-dark {
        @apply border-dark text-dark shadow-none hover:bg-dark hover:text-white;
    }

    .btn-gradient {
        @apply bg-gradient-to-r from-[#EF1262] to-[#4361EE] hover:to-[#EF1262] hover:from-[#4361EE] text-white;
    }

    /* Badge */
    .badge {
        @apply relative my-1 rounded border border-transparent px-2 py-0.5 text-xs font-semibold text-white;
    }
    .badge-outline-primary {
        @apply border-primary text-primary hover:bg-primary-light dark:hover:bg-primary dark:hover:text-surface-light;
    }
    .badge-outline-secondary {
        @apply border-secondary text-secondary hover:bg-secondary-light dark:hover:bg-secondary dark:hover:text-surface-light;
    }
    .badge-outline-success {
        @apply border-success text-success hover:bg-success-light dark:hover:bg-success dark:hover:text-surface-light;
    }
    .badge-outline-danger {
        @apply border-danger text-danger hover:bg-danger-light dark:hover:bg-danger dark:hover:text-surface-light;
    }
    .badge-outline-warning {
        @apply border-warning text-warning hover:bg-warning-light dark:hover:bg-warning dark:hover:text-surface-light;
    }
    .badge-outline-info {
        @apply border-info text-info hover:bg-info-light dark:hover:bg-info dark:hover:text-surface-light;
    }
    .badge-outline-dark {
        @apply border-dark text-dark hover:bg-dark-light dark:hover:bg-dark dark:hover:text-surface-light;
    }

    /* Form */
    .form-input,
    .form-textarea,
    .form-select,
    .form-multiselect {
        @apply w-full rounded-md border border-surface-light bg-white px-4 py-2 text-sm font-semibold text-black !outline-none focus:border-primary focus:ring-transparent dark:border-[#17263c] dark:bg-[#121e32] dark:text-surface-dark dark:focus:border-primary;
    }

    .form-input-lg,
    .form-textarea-lg,
    .form-select-lg,
    .form-multiselect-lg {
        @apply py-2.5 text-base;
    }
    .form-input-sm,
    .form-textarea-sm,
    .form-select-sm,
    .form-multiselect-sm {
        @apply py-1.5 text-xs;
    }
    label {
        @apply mb-1.5 block font-semibold;
    }
    [dir='rtl'] select {
        background-position: left 0.5rem center;
    }

    .has-error .form-input,
    .has-error .form-textarea,
    .has-error .form-select,
    .has-error .form-multiselect,
    .has-error .multiselect__tags {
        @apply border-danger bg-danger/[0.08] text-danger placeholder-danger/70 focus:border-danger;
    }
    .has-error .form-label,
    .has-error .form-help,
    .has-error .form-icon,
    .has-error .multiselect__placeholder {
        @apply text-danger;
    }
    .has-error .multiselect__input {
        @apply bg-[#F7ECF0] !placeholder-danger/70;
    }
    .has-error .multiselect__tags:hover,
    .has-error .form-checkbox {
        @apply border-danger;
    }

    .has-success .form-input,
    .has-success .form-textarea,
    .has-success .form-select,
    .has-success .form-multiselect,
    .has-success .multiselect__tags {
        @apply border-success bg-success/[0.08] text-success placeholder-success/70 focus:border-success;
    }
    .has-success .form-label,
    .has-success .form-help,
    .has-success .form-icon,
    .has-success .multiselect__placeholder {
        @apply text-success;
    }
    .has-success .multiselect__input {
        @apply bg-[#F7ECF0] !placeholder-success/70;
    }
    .has-success .multiselect__tags:hover {
        @apply border-success;
    }

    /* checkbox & radio */
    .form-radio,
    .form-checkbox {
        @apply h-5 w-5 cursor-pointer rounded border-2 border-surface-light bg-transparent text-primary !shadow-none !outline-none !ring-0 !ring-offset-0 checked:bg-[length:90%_90%] disabled:cursor-not-allowed disabled:bg-[#eee] ltr:mr-1.5 rtl:ml-1.5
      dark:border-[#253b5c] dark:checked:border-transparent dark:disabled:bg-[#1b2e4b];
    }

    .form-checkbox.outline-primary:checked {
        @apply border-primary bg-transparent;
        background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%234361ee' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>");
    }
    .form-checkbox.outline-secondary:checked {
        @apply border-secondary bg-transparent;
        background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23805dca' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>");
    }
    .form-checkbox.outline-success:checked {
        @apply border-success bg-transparent;
        background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%2300ab55' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>");
    }
    .form-checkbox.outline-danger:checked {
        @apply border-danger bg-transparent;
        background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23e7515a' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>");
    }
    .form-checkbox.outline-warning:checked {
        @apply border-warning bg-transparent;
        background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23e2a03f' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>");
    }
    .form-checkbox.outline-info:checked {
        @apply border-info bg-transparent;
        background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%232196f3' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>");
    }
    .form-checkbox.outline-dark:checked {
        @apply border-dark bg-transparent;
        background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%233b3f5c' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>");
    }

    .form-radio {
        @apply rounded-full;
    }

    .form-radio.outline-primary:checked {
        @apply border-primary bg-transparent bg-none;
    }
    .form-radio.outline-secondary:checked {
        @apply border-secondary bg-transparent bg-none;
    }
    .form-radio.outline-success:checked {
        @apply border-success bg-transparent bg-none;
    }
    .form-radio.outline-danger:checked {
        @apply border-danger bg-transparent bg-none;
    }
    .form-radio.outline-warning:checked {
        @apply border-warning bg-transparent bg-none;
    }
    .form-radio.outline-info:checked {
        @apply border-info bg-transparent bg-none;
    }
    .form-radio.outline-dark:checked {
        @apply border-dark bg-transparent bg-none;
    }

    /* dropdown */
    .dropdown {
        @apply relative;
    }
    .dropdown > button {
        @apply flex;
    }
    .dropdown ul {
        @apply my-1 min-w-[120px] rounded bg-white p-0 py-2 shadow dark:bg-[#1b2e4b] text-black dark:text-surface-dark;
    }
    .dropdown ul li > a,
    .dropdown ul li > button {
        @apply flex items-center px-4 py-2 hover:bg-primary/10 hover:text-primary;
    }
    .dropdown ul li > button {
        @apply w-full;
    }

    /* tables */
    .table-responsive {
        @apply overflow-auto;
    }
    table {
        @apply w-full !border-collapse;
    }
    table thead tr,
    table tfoot tr {
        @apply border-b-0 !bg-[#f6f8fa]  dark:!bg-[#1a2941];
    }
    table thead tr th,
    table tfoot tr th,
    table tbody tr td {
        @apply py-3 px-4 ltr:text-left rtl:text-right;
    }
    table thead tr th,
    table tfoot tr th {
        @apply font-semibold;
    }
    table tbody tr {
        @apply border-b !border-surface-light/40 dark:!border-[#191e3a];
    }
    table.table-hover tbody tr {
        @apply hover:!bg-surface-light/20 dark:hover:!bg-[#1a2941]/40;
    }
    table.table-striped tbody tr:nth-child(odd) {
        @apply !bg-surface-light/20 dark:!bg-[#1a2941]/40;
    }

    table.dataTable-table tbody tr th,
    table.dataTable-table tbody tr td {
        @apply border-b border-surface-light/40 py-3 px-4 ltr:text-left rtl:text-right dark:border-[#191e3a];
    }
    table.dataTable-table tbody tr:last-child td {
        @apply border-b-0;
    }

    /* code hightlight */
    pre {
        direction: ltr;
    }
}

/* perfect scrollbar */
.ps__rail-y > .ps__thumb-y,
.ps__rail-y > .ps__thumb-y {
    @apply !w-1.5 !bg-[#DDDDDD] dark:!bg-[#2d334c];
}
.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
    @apply !opacity-60;
}
.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
    @apply !bg-transparent;
}

/* swal2 */
.swal2-container .swal2-close {
    @apply text-white hover:text-dark-light focus:shadow-none;
}

.swal2-container .swal2-popup.swal2-toast {
    @apply bg-dark py-2.5 px-5;
}

.swal2-popup.swal2-toast .swal2-title,
.swal2-container .swal2-popup.swal2-toast .swal2-html-container {
    @apply text-white;
}
.swal2-container .swal2-popup.swal2-toast.color-primary {
    @apply bg-primary;
}

.swal2-container .swal2-popup.swal2-toast.color-secondary {
    @apply bg-secondary;
}

.swal2-container .swal2-popup.swal2-toast.color-warning {
    @apply bg-warning;
}
.swal2-container .swal2-popup.swal2-toast.color-info {
    @apply bg-info;
}
.swal2-container .swal2-popup.swal2-toast.color-danger {
    @apply bg-danger;
}
.swal2-container .swal2-popup.swal2-toast.color-success {
    @apply bg-success;
}

/* apex chart */
.apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-light,
.apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-theme-light {
    box-shadow: none;
    @apply border-[#050717cc] bg-[#050717cc] text-white;
}

.apexcharts-canvas .apexcharts-xaxistooltip-bottom:before,
.apexcharts-canvas .apexcharts-xaxistooltip-bottom:after {
    @apply border-b-[#050717cc];
}

.apexcharts-canvas .apexcharts-tooltip-series-group.apexcharts-active {
    @apply text-white;
}

.apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    @apply border-dark bg-[#060818];
}

.apexcharts-legend-series {
    @apply ltr:!mr-2 rtl:!ml-2;
}

.dark .apexcharts-title-text {
    fill: #e0e6ed;
}

.dark .apexcharts-canvas .apexcharts-text.apexcharts-xaxis-label,
.dark .apexcharts-canvas .apexcharts-text.apexcharts-yaxis-label {
    fill: #e0e6ed;
}

.dark .apexcharts-canvas .apexcharts-text,
.dark .apexcharts-canvas .apexcharts-text {
    fill: #e0e6ed;
}

.dark .apexcharts-canvas .apexcharts-legend-text {
    color: #e0e6ed !important;
}

.dark .apexcharts-canvas .apexcharts-radialbar-track.apexcharts-track .apexcharts-radialbar-area {
    stroke: #191e3a;
}
.dark .apexcharts-canvas .apexcharts-series-markers.apexcharts-series-bubble .apexcharts-marker {
    stroke: #191e3a;
}

.dark .apexcharts-canvas .apexcharts-pie-label,
.dark .apexcharts-canvas .apexcharts-datalabel,
.dark .apexcharts-canvas .apexcharts-datalabel-label,
.dark .apexcharts-canvas .apexcharts-datalabel-value {
    fill: #bfc9d4;
}

.dark .apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-dark {
    box-shadow: none;
}

.apexcharts-canvas .apexcharts-legend-marker {
    @apply ltr:!mr-1.5 rtl:ml-1.5 rtl:!mr-0;
}

[dir='rtl'] .apexcharts-tooltip-marker {
    @apply mr-0 ml-2.5;
}

/* Animations */
.slide-down-enter-active {
    @apply transition duration-100 ease-out;
}
.slide-down-leave-active {
    @apply transition duration-75 ease-in;
}
.slide-down-enter-from,
.slide-down-leave-to {
    @apply transform scale-95 opacity-0;
}
.slide-down-enter-to,
.slide-down-leave-from {
    @apply transform scale-100 opacity-100;
}

.modal-fade-enter-active {
    @apply transition duration-300 ease-out;
}
.modal-fade-leave-active {
    @apply transition duration-200 ease-in;
}
.modal-fade-enter-from,
.modal-fade-leave-to {
    @apply transform opacity-0 scale-95;
}
.modal-fade-enter-to,
.modal-fade-leave-from {
    @apply transform opacity-100 scale-100;
}

/* Hightlight JS */
pre.hljs {
    @apply p-6 rounded-md overflow-x-auto !bg-[#191e3a];
}