/*
Theme Name: Youth App
Author: Alexandre
Version: 0.1.0
*/
:root { --sidebar-w: 260px; }
html, body { margin:0; padding:0; height:100%; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.app-layout { display:flex; min-height:100vh; }
.app-sidebar {
  width: var(--sidebar-w);
  background:#0f172a; color:#fff; display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.app-sidebar .logo { padding:20px; border-bottom:1px solid rgba(255,255,255,.1); }
.app-sidebar nav { flex:1; padding:12px 8px; }
.app-sidebar nav a { display:flex; align-items:center; gap:10px; padding:10px 14px; color:#cbd5e1; text-decoration:none; border-radius:8px; }
.app-sidebar nav a:hover, .app-sidebar nav a.active { background:#1e293b; color:#fff; }
.app-sidebar .bottom { padding:12px 8px; border-top:1px solid rgba(255,255,255,.08); }
.app-content { flex:1; min-width:0; background:#f8fafc; }
.app-header { position:sticky; top:0; background:#fff; border-bottom:1px solid #e5e7eb; padding:12px 20px; display:flex; justify-content:space-between; align-items:center; z-index:5; }
.app-main { padding:20px; }
.card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px; }
.grid { display:grid; gap:16px; }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .app-sidebar { position:fixed; height:auto; min-height:100vh; }
  .app-content { margin-left: var(--sidebar-w); }
}