/* Header (prototype) */
.app-header{
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.1);
  padding:10px 20px;
  display:flex; justify-content:space-between; align-items:center;
  position:fixed; top:0; left:0; right:0; height:60px; z-index:1000;
}
.app-logo{ display:flex; align-items:center; gap:10px; }
.app-logo h1{ color:#333; font-size:1.5rem; margin:0; }

.user-menu{ display:flex; align-items:center; gap:20px; }
.user-info{ display:flex; align-items:center; gap:10px; color:#666; }
.user-avatar{
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg,#4facfe 0%, #00f2fe 100%);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:bold;
}
.logout-btn{
  background:#dc3545; color:#fff; border:none; padding:8px 16px; border-radius:6px;
  cursor:pointer; font-weight:600; transition:background .3s ease;
}
.logout-btn:hover{ background:#c82333; }

/* Sidebar (prototype) */
.sidebar{
  position:fixed; left:0; top:60px; width:250px; height:calc(100vh - 60px);
  background:#fff; box-shadow:2px 0 10px rgba(0,0,0,.1);
  padding:20px 0; overflow-y:auto; z-index:999;
}
.sidebar-menu{ list-style:none; margin:0; padding:0; }
.sidebar-menu li{ margin-bottom:5px; }
.sidebar-menu a{
  display:flex; align-items:center; gap:12px; padding:12px 20px;
  color:#666; text-decoration:none; transition:all .3s ease; font-weight:500;
}
.sidebar-menu a:hover, .sidebar-menu a.active{
  background:linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color:#fff;
}

/* Main area spacing so content isn't under header/sidebar */
.app .main{
  margin-left:250px; margin-top:60px; padding:20px; min-height:calc(100vh - 60px);
}

/* Responsive */
@media (max-width: 768px){
  .sidebar{ transform:translateX(-100%); transition:transform .3s ease; }
  .sidebar.mobile-open{ transform:translateX(0); }
  .app .main{ margin-left:0; margin-top:60px; padding:15px; }
}