/* Layout CSS - Page structure and responsive grid */

/* App container */
.app {
	display: flex;
	flex-direction: row;
	min-height: 100vh;
	width: 100%;
}

/* Main content area */
.main-content {
	flex: 1;
	padding: var(--space-xl);
	max-width: 1400px;
	margin: 0 auto;
	width: 100%;
	min-width: 0;
}

/* View containers */
.view {
	display: none;
	animation: fade_in var(--transition-base) ease;
}

.view.active {
	display: block;
}

@keyframes fade_in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Page header */
.page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: var(--space-md);
	margin-bottom: var(--space-xl);
}

.page-header h1 {
	font-size: var(--font-size-2xl);
}

/* Sidebar Navigation */
.sidebar {
	width: 280px;
	height: 100vh;
	background: var(--color-bg-card);
	border-right: 1px solid var(--color-border);
	padding: var(--space-xl) var(--space-lg);
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.sidebar-header {
	margin-bottom: var(--space-2xl);
}

.logo {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.logo-emoji {
	font-size: var(--font-size-2xl);
}

.logo-text {
	font-size: var(--font-size-lg);
	font-weight: 800;
	background: var(--gradient-primary);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	letter-spacing: -0.02em;
}

.nav-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	list-style: none;
	padding: 0;
	margin: 0;
}

.nav-item {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-md);
	border-radius: var(--radius-lg);
	color: var(--color-text-secondary);
	transition: all var(--transition-fast);
	cursor: pointer;
	text-decoration: none;
}

.nav-item:hover {
	background: var(--color-bg-elevated);
	color: var(--color-text);
}

.nav-item.active {
	background: var(--gradient-primary);
	color: white;
	box-shadow: var(--shadow-glow);
}

.nav-item svg {
	width: 22px;
	height: 22px;
}

.nav-item span {
	font-size: var(--font-size-base);
	font-weight: 600;
}

.sidebar-footer {
	margin-top: auto;
	padding-top: var(--space-xl);
}

/* Grid system */
.grid {
	display: grid;
	gap: var(--space-lg);
}

.grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.grid-4 {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Stats row */
.stats-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-lg);
}

/* Container for content */
.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--space-md);
}

/* Flex row utilities for layout */
.row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
}

.row>* {
	flex: 1;
	min-width: 0;
}

/* Full width utility */
.full-width {
	width: 100%;
}

/* Stack layout */
.stack {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.stack-sm {
	gap: var(--space-sm);
}

.stack-lg {
	gap: var(--space-lg);
}

/* Section spacing */
.section {
	margin-bottom: var(--space-2xl);
}

.section-title {
	font-size: var(--font-size-xl);
	font-weight: 700;
	margin-top: var(--space-3xl);
	margin-bottom: var(--space-lg);
	color: var(--color-text);
	letter-spacing: -0.01em;
}

/* Visibility utilities (Simplified for web focus) */
.desktop-only {
	display: block;
}

.mobile-only {
	display: none;
}