/* CommerciaX HRMS — minimal custom CSS layered on top of Tailwind CDN */

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

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Native scrollbar polish (subtle, brand-tinted) */
::-webkit-scrollbar         { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb   { background: #cbd5e1; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
::-webkit-scrollbar-track   { background: transparent; }

/* Form focus ring — match brand teal */
input:focus, select:focus, textarea:focus, button:focus-visible {
    outline: none;
}

/* Auth page geometric pattern micro-animations (calm, not distracting) */
@media (prefers-reduced-motion: no-preference) {
    aside.bg-cx-navy svg { animation: cx-float 18s ease-in-out infinite; }
}
@keyframes cx-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* DataTables / generic table niceties (used later) */
.cx-table th { background: #F1F5F9; font-weight: 600; color: #475569; }
.cx-table tbody tr:nth-child(even) { background: #F8FAFC; }
.cx-table tbody tr:hover { background: #CCFBF1; }

/* Skeleton loaders (Step 12 polish — predeclared) */
.cx-skel { background: linear-gradient(90deg, #F1F5F9 0%, #E2E8F0 50%, #F1F5F9 100%); background-size: 200% 100%; animation: cx-skel 1.4s linear infinite; border-radius: 6px; }
@keyframes cx-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }