/* Common CSC Mobile Styles - Mobile First Approach */

/* Side Drawer Menu */
#sideDrawer {
    transition: opacity 0.3s ease;
}

#sideDrawer.drawer-open {
    pointer-events: auto;
}

#drawerOverlay {
    transition: opacity 0.3s ease;
}

#sideDrawer.drawer-open #drawerOverlay {
    opacity: 1;
}

#drawerContent {
    transition: transform 0.3s ease;
}

#sideDrawer.drawer-open #drawerContent {
    transform: translateX(0);
}

/* Navigation Items */
.nav-item {
    transition: all 0.2s ease;
}

.nav-item.active {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
    border-left: 3px solid #2563eb;
}

.nav-item:hover {
    background: rgba(37, 99, 235, 0.05);
}

/* Toast Notifications */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #10b981;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    transform: translateX(400px);
    transition: transform 0.3s ease;
}

.toast.show {
    transform: translateX(0);
}

.toast.error {
    background: #ef4444;
}

/* Stat Cards */
.stat-card {
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Top App Bar */
header {
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Button Styles */
.btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}