/* MainTech-pro App Styles */

/* Login Background Overlay */
.login-bg {
    background-image: url('https://images.unsplash.com/photo-1720036236694-d0a231c52563?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2OTV8MHwxfHNlYXJjaHwyfHxpbmR1c3RyaWFsJTIwbWFpbnRlbmFuY2UlMjBlbmdpbmVlciUyMGZhY3Rvcnl8ZW58MHx8fHwxNzcxNTMzMDc1fDA&ixlib=rb-4.1.0&q=85');
    background-size: cover;
    background-position: center;
}

.login-overlay {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(4px);
}

/* Sidebar */
.sidebar {
    background-color: var(--deep-slate);
    min-height: 100vh;
}

.sidebar-link {
    @apply flex items-center gap-3 px-4 py-3 text-slate-300 rounded-md transition-colors duration-200;
}

.sidebar-link:hover {
    @apply bg-slate-800 text-white;
}

.sidebar-link.active {
    @apply bg-blue-600 text-white;
}

/* Stats Card */
.stats-card {
    @apply bg-white border border-slate-200 rounded-md p-6 transition-transform duration-200;
}

.stats-card:hover {
    @apply shadow-sm;
    transform: translateY(-2px);
}

/* Bento Grid */
.bento-grid {
    @apply grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4;
}

.bento-span-2 {
    @apply md:col-span-2;
}

.bento-span-3 {
    @apply md:col-span-3;
}

.bento-full {
    @apply md:col-span-3 lg:col-span-4;
}

/* Mobile touch targets */
@media (max-width: 768px) {
    .touch-target {
        min-height: 44px;
    }
    
    .mobile-action-bar {
        @apply fixed bottom-0 left-0 right-0 bg-white border-t border-slate-200 p-4 z-50;
    }
}

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

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

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

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

/* Focus states */
input:focus, select:focus, textarea:focus, button:focus {
    @apply outline-none ring-2 ring-blue-500/20;
}

/* Button hover effect */
.btn-primary {
    @apply bg-blue-600 text-white px-4 py-2 rounded-md font-medium transition-colors duration-200;
}

.btn-primary:hover {
    @apply bg-blue-700;
}

.btn-secondary {
    @apply bg-slate-100 text-slate-700 px-4 py-2 rounded-md font-medium transition-colors duration-200;
}

.btn-secondary:hover {
    @apply bg-slate-200;
}

/* Table row hover */
.table-row-hover:hover {
    @apply bg-slate-50;
}