:root {
    --primary: #4361ee;
    --primary-soft: rgba(67, 97, 238, 0.1);
    --bg: #f8fafc;
    --border: #e2e8f0;
    --text-muted: #64748b;
    --sidebar-width: 260px;
}

body { background: var(--bg); font-family: 'Inter', sans-serif; margin: 0; overflow: hidden; }
#wrapper { display: flex; width: 100%; height: 100vh; position: relative; }

/* Sidebar */
#sidebar {
    min-width: var(--sidebar-width); max-width: var(--sidebar-width);
    background: #fff; border-right: 1px solid var(--border);
    transition: 0.3s; z-index: 1050; height: 100vh;
}
@media (max-width: 991px) {
    #sidebar { margin-left: calc(-1 * var(--sidebar-width)); position: fixed; }
    #sidebar.active { margin-left: 0; }
}
.sidebar-header { padding: 30px 20px; text-align: center; border-bottom: 1px solid #f1f5f9; }
.sidebar-menu li a { color: var(--text-muted); padding: 12px 25px; display: flex; align-items: center; text-decoration: none; font-weight: 500; }
.sidebar-menu li.active a { color: var(--primary); background: var(--primary-soft); border-right: 4px solid var(--primary); }

/* Main Content with Sticky Layout */
#content { flex: 1; height: 100vh; overflow-y: auto; padding: 0 20px 20px 20px; display: flex; flex-direction: column; }

.sticky-header-container {
    position: sticky; top: 0; background: var(--bg); z-index: 1000; padding-top: 20px; padding-bottom: 10px;
}
.navbar { border-radius: 15px; border: none; }
.stat-card { border-radius: 20px; border: none; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }

/* Table Section */
.table-container { background: #fff; border-radius: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.02); }
.table thead th { position: sticky; top: 0; background: #fff !important; z-index: 900; padding: 15px; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; color: #94a3b8; border-bottom: 1px solid var(--border); }

/* Modern UI Elements */
.user-profile-header { background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%); padding: 30px 20px; text-align: center; color: white; }
.avatar-main { width: 70px; height: 70px; background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); border: 2px solid rgba(255,255,255,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 10px; }
.detail-card { background: #f8fafc; border-radius: 14px; padding: 12px; display: flex; align-items: center; margin-bottom: 10px; }
.detail-icon { width: 40px; height: 40px; background: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--primary); margin-right: 12px; }
.form-control-modern { border: 2px solid #f1f5f9; border-radius: 14px; padding: 12px; }