/* ImpTune layout — supplements Pico CSS */ .layout { display: flex; min-height: 100vh; } /* Sidebar */ .sidebar { width: 220px; flex-shrink: 0; border-right: 1px solid var(--pico-muted-border-color, #e0e0e0); padding: 1rem 0; display: flex; flex-direction: column; } .sidebar-brand { padding: 0.5rem 1rem 1rem; font-size: 1.1rem; border-bottom: 1px solid var(--pico-muted-border-color, #e0e0e0); margin-bottom: 0.5rem; } .sidebar-nav { list-style: none; padding: 0; margin: 0; } .sidebar-nav li { margin: 0; } .sidebar-nav a { display: block; padding: 0.6rem 1rem; text-decoration: none; color: inherit; font-weight: 400; } .sidebar-nav a:hover { background-color: var(--pico-secondary-background, rgba(0,0,0,0.05)); } .sidebar-nav a.active { font-weight: 600; background-color: var(--pico-primary-background, rgba(0,0,0,0.08)); border-left: 3px solid var(--pico-primary, #1a73e8); } /* Main content */ .main-content { flex: 1; padding: 1.5rem; overflow-y: auto; } /* Quick action buttons */ .quick-actions { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .btn-action { display: inline-block; padding: 0.5rem 1rem; border: 1px solid var(--pico-primary, #1a73e8); border-radius: 4px; text-decoration: none; color: var(--pico-primary, #1a73e8); font-weight: 500; } .btn-action[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Empty state */ .empty-state { color: var(--pico-muted-color, #666); font-style: italic; } /* Recent activity */ .activity-section { margin-bottom: 1.5rem; }