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

html {
    @apply bg-white dark:bg-gray-900 text-black dark:text-gray-200 scroll-smooth selection:bg-blue-500 text-pretty;
}

body {
    @apply min-h-screen;
}

@layer components {
    header {
        @apply sticky top-0 z-40 w-full backdrop-blur flex-none lg:z-50 lg:border-b lg:border-slate-900/10 dark:border-slate-50/[0.06] bg-emerald-500/95 dark:bg-transparent text-black dark:text-gray-200;
    }

    main {
        @apply flex flex-col items-center mx-auto p-8;
    }

    .center-box {
        @apply block rounded-lg shadow bg-gray-200 dark:bg-gray-800 border border-gray-700 w-full p-6 sm:p-8 space-y-4 md:space-y-6;
    }

    .center-box h1.box-title {
        @apply text-xl font-bold leading-tight tracking-tight md:text-2xl text-center;
    }

    button {
        @apply w-full text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center;
    }

    button.btn-green {
        @apply bg-emerald-600 hover:bg-emerald-700 focus:ring-emerald-300 dark:bg-emerald-600 dark:hover:bg-emerald-700 dark:focus:ring-emerald-800;
    }

    button.btn-red {
        @apply bg-rose-600 hover:bg-rose-700 focus:ring-rose-300 dark:bg-rose-600 dark:hover:bg-rose-700 dark:focus:ring-rose-800;
    }

    button.btn-amber {
        @apply bg-amber-600 hover:bg-amber-700 focus:ring-amber-300 dark:bg-amber-600 dark:hover:bg-amber-700 dark:focus:ring-amber-800;
    }

    label[for] {
        @apply block mb-2 text-sm font-medium text-gray-900 dark:text-white;
    }

    input[type=text], input[type=email] {
        @apply bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-emerald-600 focus:border-emerald-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500;
    }

    input[type=checkbox] {
        @apply focus:outline-none appearance-none relative w-6 h-6 border border-gray-300 rounded bg-gray-50 focus:ring-2 focus:ring-emerald-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-emerald-600 dark:ring-offset-gray-800 checked:bg-emerald-700;
    }

    input[type=checkbox] + svg.check {
        @apply absolute w-6 h-6 mt-1 hidden pointer-events-none text-gray-200;
    }

    input[type=checkbox]:checked + svg.check {
        @apply block;
    }

    table.table-default {
        @apply w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200;
    }

    table.table-default thead {
        @apply text-xs text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-200;
    }

    table.table-default thead tr th {
        @apply px-6 py-3 text-center;
    }

    table.table-default tbody {
        @apply bg-white dark:bg-gray-800;
    }

    table.table-default tbody tr td {
        @apply px-6 py-4 text-center;
    }
}