@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    [x-cloak] {
        display: none !important;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        @apply bg-slate-100 text-slate-900 dark:bg-slate-950 dark:text-slate-100;
    }
}

@layer components {
    .sidebar-scroll {
        scrollbar-width: thin;
        scrollbar-color: rgb(71 85 105 / 0.45) transparent;
    }

    .sidebar-scroll::-webkit-scrollbar {
        width: 6px;
    }

    .sidebar-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .sidebar-scroll::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgb(71 85 105 / 0.42);
    }

    .sidebar-scroll::-webkit-scrollbar-thumb:hover {
        background: rgb(174 184 0 / 0.72);
    }

    .portal-card {
        @apply rounded-lg border border-slate-200/80 bg-white/90 shadow-soft transition duration-200 hover:-translate-y-1 hover:border-primary-300 hover:shadow-lg dark:border-slate-800 dark:bg-slate-900/90 dark:hover:border-primary-700;
    }

    .form-control {
        @apply w-full rounded-lg border-slate-300 bg-white text-sm text-slate-900 shadow-sm transition focus:border-primary-500 focus:ring-primary-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:placeholder-slate-500;
    }

    .btn-primary {
        @apply inline-flex items-center justify-center gap-2 rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-slate-950;
    }

    .btn-secondary {
        @apply inline-flex items-center justify-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800;
    }

    .ql-toolbar.ql-snow,
    .ql-container.ql-snow {
        @apply border-slate-300 bg-white text-slate-900 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100;
    }

    .ql-toolbar.ql-snow {
        @apply rounded-t-lg;
    }

    .ql-container.ql-snow {
        @apply min-h-[220px] rounded-b-lg;
    }

    .ql-editor {
        @apply min-h-[220px];
    }

    .ql-editor img {
        @apply my-3 max-h-80 max-w-full rounded-lg border border-slate-200 object-contain dark:border-slate-700;
    }

    .wiki-content {
        @apply text-sm leading-7 text-slate-700 dark:text-slate-200;
    }

    .wiki-content h1 {
        @apply mb-3 text-2xl font-bold text-slate-950 dark:text-white;
    }

    .wiki-content h2 {
        @apply mb-2 text-xl font-bold text-slate-950 dark:text-white;
    }

    .wiki-content h3 {
        @apply mb-2 text-lg font-semibold text-slate-950 dark:text-white;
    }

    .wiki-content p,
    .wiki-content ul,
    .wiki-content ol,
    .wiki-content blockquote,
    .wiki-content pre {
        @apply mb-4;
    }

    .wiki-content ul {
        @apply list-disc pl-6;
    }

    .wiki-content ol {
        @apply list-decimal pl-6;
    }

    .wiki-content a {
        @apply text-primary-600 underline dark:text-primary-300;
    }

    .wiki-content img {
        @apply my-4 max-h-96 rounded-lg border border-slate-200 object-contain dark:border-slate-800;
    }
}