@import "tailwindcss"; @utility no-scrollbar { scrollbar-width: none; &::-webkit-scrollbar { display: none; } } /* ============================================================ DESIGN TOKENS — employee portal Mirrors the admin portal tokens in active_admin.css so the same brand utilities (bg-primary, hover:bg-primary-hover, accent-primary, text-primary, ...) work here too. ============================================================ */ @theme { /* Brand */ --color-primary: #295377; --color-primary-hover: #225d87; --color-primary-soft: #eef4fa; /* Semantic status colors */ --color-success: #059669; --color-warning: #d97706; --color-danger: #dc2626; --color-info: #2563eb; } /* Dark mode: same selector semantics as the admin portal (the `dark` class sits on ). The employee layout does not toggle it yet, so dark: variants stay inert until the wiring lands. */ @custom-variant dark (&:where(.dark, .dark *)); @layer components { /* Show/hide password toggle — mirror of the admin portal's .password-toggle (active_admin.css). Absolutely positioned at the right edge of a `relative` wrapper; the password input reserves space with pr-12. */ .password-toggle { @apply absolute inset-y-0 right-0 flex w-11 items-center justify-center rounded-r-lg border-0 bg-transparent text-gray-400 cursor-pointer hover:text-gray-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 dark:text-gray-500 dark:hover:text-gray-300; } }