/* NexusHR Pro Suite - Global Styles */

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* RTL Support Preparation */
[dir="rtl"] .sidebar-icon {
    margin-right: 0;
    margin-left: 0.75rem;
}

[dir="rtl"] .ml-auto {
    margin-left: 0;
    margin-right: auto;
}

/* Glassmorphism Effects */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dark .glass {
    background: rgba(15, 23, 42, 0.7);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.animate-slide-in {
    animation: slideIn 0.3s ease-out forwards;
}

/* Custom Form Elements */
.form-input {
    @apply w-full px-4 py-2 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all;
}

.form-select {
    @apply w-full px-4 py-2 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all appearance-none cursor-pointer;
}

.form-textarea {
    @apply w-full px-4 py-2 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all resize-none;
}

/* Button Variants */
.btn-primary {
    @apply px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-lg font-medium transition-colors shadow-lg shadow-primary-600/30 disabled:opacity-50 disabled:cursor-not-allowed;
}

.btn-secondary {
    @apply px-4 py-2 bg-secondary-600 hover:bg-secondary-700 text-white rounded-lg font-medium transition-colors shadow-lg shadow-secondary-600/30;
}

.btn-outline {
    @apply px-4 py-2 border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-300 rounded-lg font-medium transition-colors;
}

/* Status Badges */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-success {
    @apply bg-emerald-100 dark:bg-emerald-900/30 text-emerald-800 dark:text-emerald-400;
}

.badge-warning {
    @apply bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-400;
}

.badge-danger {
    @apply bg-rose-100 dark:bg-rose-900/30 text-rose-800 dark:text-rose-400;
}

.badge-info {
    @apply bg-primary-100 dark:bg-primary-900/30 text-primary-800 dark:text-primary-400;
}

/* Table Styles */
.data-table {
    @apply w-full text-left border-collapse;
}

.data-table th {
    @apply px-6 py-3 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider bg-slate-50 dark:bg-slate-800/50 border-b border-slate-200 dark:border-slate-700;
}

.data-table td {
    @apply px-6 py-4 text-sm text-slate-700 dark:text-slate-300 border-b border-slate-100 dark:border-slate-800;
}

.data-table tr:hover td {
    @apply bg-slate-50 dark:bg-slate-800/50;
}

/* Card Hover Effects */
.hover-card {
    @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .shadow-sm, .shadow-lg {
        box-shadow: none !important;
    }
}

/* Loading Skeleton */
.skeleton {
    @apply animate-pulse bg-slate-200 dark:bg-slate-700 rounded;
}

/* Toggle Switch */
.toggle-switch {
    @apply relative inline-flex h-6 w-11 items-center rounded-full bg-slate-200 dark:bg-slate-700 transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
}

.toggle-switch.active {
    @apply bg-primary-600;
}

.toggle-switch-dot {
    @apply inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-1;
}

.toggle-switch.active .toggle-switch-dot {
    @apply translate-x-6;
}

/* Kanban Board Styles */
.kanban-column {
    @apply flex-1 min-w-[300px] bg-slate-100 dark:bg-slate-800/50 rounded-xl p-4;
}

.kanban-card {
    @apply bg-white dark:bg-slate-800 p-4 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700 cursor-move hover:shadow-md transition-shadow;
}

/* Calendar Styles */
.calendar-day {
    @apply aspect-square flex flex-col items-center justify-center rounded-lg text-sm hover:bg-slate-100 dark:hover:bg-slate-800 cursor-pointer transition-colors relative;
}

.calendar-day.active {
    @apply bg-primary-600 text-white hover:bg-primary-700;
}

.calendar-day.has-event::after {
    content: '';
    @apply absolute bottom-1 w-1 h-1 rounded-full bg-primary-400;
}

/* Responsive Utilities */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .show-mobile {
        display: none !important;
    }
}