/**
* MainLayout Styles
*
* Provides consistent header, content area, and optional sidebar regions.
* Uses CSS variables from the design token system for consistent styling.
*
* Requirements: 7.4
*/
/* Container - Full viewport layout */
.container {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
background-color: var(--bg-app);
color: var(--text-primary);
overflow: hidden;
}
/* Header Region */
.header {
flex-shrink: 0;
height: var(--header-height, 64px);
border-bottom: 1px solid var(--border);
background-color: var(--bg-surface);
z-index: var(--z-sticky);
display: flex;
align-items: center;
}
/* Body - Contains sidebar and content */
.body {
flex: 1;
display: flex;
overflow: hidden;
position: relative;
}
/* Sidebar Region */
.sidebar {
flex-shrink: 0;
width: var(--sidebar-width, 280px);
background-color: var(--bg-surface);
border-right: 1px solid var(--border);
overflow-y: auto;
overflow-x: hidden;
transition: width var(--duration-normal) var(--ease-default);
z-index: var(--z-fixed);
}
/* Sidebar collapsed state */
.sidebar.collapsed {
width: var(--sidebar-collapsed-width, 64px);
}
/* Sidebar position variants */
.sidebarRight .sidebar {
order: 2;
border-right: none;
border-left: 1px solid var(--border);
}
.sidebarRight .content {
order: 1;
}
/* Content Region */
.content {
flex: 1;
overflow: auto;
position: relative;
display: flex;
flex-direction: column;
/* Add adequate top padding to prevent overlap with header shadow */
/* Requirements: 2.8 - Ensure consistent spacing across all views */
padding: var(--space-6) var(--space-6) var(--space-8);
/* Smooth content transition animation */
animation: fadeSlideIn 0.3s var(--ease-default);
}
@keyframes fadeSlideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Custom scrollbar for sidebar */
.sidebar::-webkit-scrollbar {
width: 6px;
}
.sidebar::-webkit-scrollbar-track {
background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: var(--radius-full);
}
.sidebar::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-thumb-hover);
}
/* Custom scrollbar for content */
.content::-webkit-scrollbar {
width: 8px;
}
.content::-webkit-scrollbar-track {
background: transparent;
}
.content::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: var(--radius-full);
}
.content::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-thumb-hover);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.sidebar {
position: absolute;
left: 0;
top: 0;
bottom: 0;
transform: translateX(-100%);
transition: transform var(--duration-normal) var(--ease-default);
box-shadow: var(--elevation-4);
}
.sidebarRight .sidebar {
left: auto;
right: 0;
transform: translateX(100%);
}
/* Show sidebar when not collapsed on mobile */
.withSidebar:not(.sidebarCollapsed) .sidebar {
transform: translateX(0);
}
.sidebar.collapsed {
transform: translateX(-100%);
}
.sidebarRight .sidebar.collapsed {
transform: translateX(100%);
}
}
/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
.sidebar {
width: calc(var(--sidebar-width, 280px) * 0.85);
}
}
/* Large screen adjustments */
@media (min-width: 1440px) {
.sidebar {
width: calc(var(--sidebar-width, 280px) * 1.1);
}
}
