:root { --primary: #004ac6; --sidebar-width: 240px; --topbar-height: 56px; }
body { font-family: 'Inter', sans-serif; background: #f7f9fb; }
.sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-width); height: 100vh; background: #fff; border-right: 1px solid #e0e3e5; display: flex; flex-direction: column; z-index: 1000; transition: transform 0.3s; }
.sidebar-brand { padding: 20px; font-size: 18px; font-weight: 700; color: var(--primary); border-bottom: 1px solid #e0e3e5; display: flex; align-items: center; }
.sidebar-nav { flex: 1; padding: 16px 0; overflow-y: auto; }
.sidebar-nav .nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; color: #434655; text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.2s; }
.sidebar-nav .nav-item:hover { background: #f2f4f6; color: var(--primary); }
.sidebar-nav .nav-item.active { background: #dbe1ff; color: var(--primary); font-weight: 600; border-right: 3px solid var(--primary); }
.sidebar-footer { padding: 16px; border-top: 1px solid #e0e3e5; }
.user-info { font-size: 13px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; color: #434655; }
.main-content { margin-left: var(--sidebar-width); min-height: 100vh; transition: margin 0.3s; }
.topbar { position: sticky; top: 0; z-index: 999; height: var(--topbar-height); background: #fff; border-bottom: 1px solid #e0e3e5; display: flex; align-items: center; padding: 0 24px; gap: 16px; }
.content-area { padding: 24px; }
.stat-card { background: #fff; border-radius: 12px; padding: 20px; display: flex; align-items: center; gap: 16px; border: 1px solid #e0e3e5; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.stat-icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.stat-card.blue .stat-icon { background: #dbe1ff; color: var(--primary); }
.stat-card.green .stat-icon { background: #dcfce7; color: #16a34a; }
.stat-card.orange .stat-icon { background: #ffedd5; color: #ea580c; }
.stat-card.purple .stat-icon { background: #f3e8ff; color: #9333ea; }
.stat-value { font-size: 28px; font-weight: 700; color: #191c1e; }
.stat-label { font-size: 13px; color: #737686; }
.card { border: 1px solid #e0e3e5; box-shadow: 0 2px 8px rgba(0,0,0,0.04); border-radius: 12px; }
.card-header { background: #fff; border-bottom: 1px solid #e0e3e5; padding: 16px 20px; border-radius: 12px 12px 0 0; }
.notification-item { padding: 14px 20px; border-bottom: 1px solid #f0f0f0; }
.notification-item:last-child { border-bottom: none; }
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f7f9fb 0%, #dbe1ff 100%); }
.login-card { background: #fff; border-radius: 16px; padding: 40px; width: 100%; max-width: 420px; box-shadow: 0 8px 32px rgba(0,74,198,0.1); }
.login-header { text-align: center; margin-bottom: 32px; }
.table th { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #737686; }
.table td { vertical-align: middle; font-size: 14px; }
.sidebar.collapsed { transform: translateX(-100%); }
.main-content.expanded { margin-left: 0; }
@media (max-width: 768px) { .sidebar { transform: translateX(-100%); } .sidebar.show { transform: translateX(0); } .main-content { margin-left: 0; } }