@import 'tailwindcss';
@import "bootstrap-icons/font/bootstrap-icons.css";
/*@import "flowbite/src/themes/default";*/
@import './colors.css';
@import './astrah.css';

@import './font.css';

@import "./ui/buttons.css";
@import "./ui/badges.css";
@import "./ui/alerts.css";
@import "./ui/cards.css";
@import "./ui/forms.css";
@import "./ui/tables.css";
@import "./ui/headers.css";

@plugin "flowbite/plugin";

@source "../../node_modules/flowbite";
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@custom-variant dark (&:where(.dark, .dark *));

@theme {
    /* Add custom colors */
    --color-primary: #4f46e5;
    --color-secondary: #6366f1;

    /* Override or extend border radius */
    --border-radius: 8px;
    /* The DEFAULT key */
    --border-radius-none: 0px;
    --border-radius-sm: 4px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 20px;
    --border-radius-2xl: 24px;
    --border-radius-3xl: 32px;
    --border-radius-full: 9999px;
    --border-radius-button: 8px;
}

@layer components {
    .logo-image {
        @apply w-[100px] aspect-square transition-all duration-300 grayscale hover:grayscale-0;
    }
}

* {
    font-family: 'IRANSans-FaNum', 'IRANYekan';
}

:where([class^="ri-"])::before {
    content: "\f3c2";
}

body {
    font-family: iran-yekan, 'Vazirmatn', sans-serif;
    background-color: #f9fafb;
}

.category-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.category-content.active {
    max-height: 1000px;
    transition: max-height 0.5s ease-in;
}

.rotate-icon {
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* */
.dashboard-menu-item {
    @apply w-full rounded-xl px-4 py-2 text-sm text-slate-700 hover:bg-slate-100 hover:text-slate-900 transition;
}

@layer base {

    /* ========= Document ========= */
    html {
        @apply bg-white text-slate-900
        dark:bg-slate-900 dark:text-slate-100;
    }

    body {
        @apply antialiased;
    }

    /* ========= Headings ========= */
    h1, h2, h3, h4, h5, h6 {
        @apply text-slate-900
        dark:text-slate-100;
    }

    /* ========= Text elements ========= */
    p {
        @apply text-slate-700
        dark:text-slate-300;
    }

    small {
        @apply text-slate-600
        dark:text-slate-400;
    }

    strong {
        @apply text-slate-900
        dark:text-slate-100;
    }

    /* ========= Links ========= */
    a {
        @apply text-slate-900 underline-offset-2
        hover:underline
        dark:text-slate-100;
    }

    /* ========= Muted / secondary ========= */
    .text-muted {
        @apply text-slate-600
        dark:text-slate-400;
    }

    /* ========= Code ========= */
    code {
        @apply rounded bg-slate-100 px-1 py-0.5 text-slate-800
        dark:bg-slate-800 dark:text-slate-200;
    }

    pre {
        @apply rounded-lg bg-slate-100 p-4 text-slate-800
        dark:bg-slate-800 dark:text-slate-200;
    }
}