@import "tailwindcss";

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

@source '../../node_modules/flowbite/**/*.js';

@plugin 'flowbite/plugin';

:root {
    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: #3b82f6;
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af;
    --color-primary-900: #1e3a8a;
}

@theme {
    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: #3b82f6;
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af;
    --color-primary-900: #1e3a8a;
}

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

/* Transition width for sidebar */
.transition-width {
    transition-property: width;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 75ms;
}

/* Kiosk fullscreen */
.kiosk-fullscreen {
    height: 100dvh;
    overflow: hidden;
}

/* Status badge utility */
.badge-hadir {
    @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300;
}
.badge-terlambat {
    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300;
}
.badge-absen {
    @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300;
}
.badge-izin {
    @apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300;
}
.badge-sakit {
    @apply bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300;
}
.badge-aktif {
    @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300;
}
.badge-nonaktif {
    @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300;
}