/* Layout - Main application structure */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html,
body {
	height: 100%;
	overflow: hidden;
}

body {
	font-family: var(--font-family-ui);
	font-size: var(--font-size-base);
	line-height: var(--line-height-normal);
	color: var(--color-text-primary);
	background-color: var(--color-bg-primary);
}

/* App container */
.app {
	display: grid;
	grid-template-rows: var(--top-bar-height) 1fr var(--bottom-bar-height);
	grid-template-columns: 1fr;
	height: 100vh;
	width: 100vw;
}

/* Top bar */
.top-bar {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	padding: 0 var(--spacing-md);
	background-color: var(--color-bg-secondary);
	border-bottom: 1px solid var(--color-border);
	z-index: var(--z-panel);
}

/* Header actions */
.header-actions {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	margin-left: var(--spacing-md);
}

.header-actions .divider {
	height: 20px;
	width: 1px;
	background-color: var(--color-border);
	margin: 0 var(--spacing-xs);
}

.btn-help {
	color: var(--color-accent) !important;
}

.btn-help:hover {
	background-color: rgba(64, 156, 255, 0.1) !important;
}

/* Main content area */
.main-content {
	display: flex;
	overflow: hidden;
	position: relative;
}

/* Panels */
.panel {
	display: flex;
	flex-direction: column;
	background-color: var(--color-bg-secondary);
	flex-shrink: 0;
	position: relative;
}

.panel.collapsed {
	width: 0 !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: none !important;
}

.panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--spacing-sm) var(--spacing-md);
	background-color: var(--color-bg-tertiary);
	border-bottom: 1px solid var(--color-border);
	flex-shrink: 0;
}

.panel-title {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--color-text-secondary);
}

.panel-content {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
}

/* Left panel - Assets */
.panel-left {
	width: var(--panel-default-width);
	min-width: var(--panel-min-width);
	max-width: var(--panel-max-width);
	border-right: 1px solid var(--color-border);
}

/* Right panel - Settings */
.panel-right {
	width: var(--panel-default-width);
	min-width: var(--panel-min-width);
	max-width: var(--panel-max-width);
	border-left: 1px solid var(--color-border);
	z-index: 100;
}

/* Canvas area */
.canvas-container {
	flex: 1;
	position: relative;
	background-color: var(--color-bg-primary);
	overflow: hidden;
}

#atlas-canvas {
	position: absolute;
	top: 0;
	left: 0;
}

/* Panel resizers */
.resizer {
	position: relative;
	width: var(--resizer-width);
	cursor: col-resize;
	background-color: transparent;
	z-index: var(--z-resizer);
	flex-shrink: 0;
}

.resizer::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	background-color: var(--color-border);
	transition: background-color var(--transition-fast);
}

.resizer:hover::after,
.resizer.active::after {
	background-color: var(--color-accent);
}

/* Bottom bar */
.bottom-bar {
	display: flex;
	align-items: center;
	gap: var(--spacing-lg);
	padding: 0 var(--spacing-md);
	background-color: var(--color-bg-secondary);
	border-top: 1px solid var(--color-border);
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
}

.status-item {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}

.status-item .label {
	color: var(--color-text-muted);
}

.status-item .value {
	font-family: var(--font-family-mono);
	color: var(--color-text-primary);
}

.status-spacer {
	flex: 1;
}

.status-message {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}

.status-message.warning {
	color: var(--color-warning);
}

.status-message.error {
	color: var(--color-error);
}

/* Scrollbar styling */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--color-bg-primary);
}

::-webkit-scrollbar-thumb {
	background: var(--color-bg-elevated);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--color-border-light);
}