/**
 * CareerVault – Dashboard Layout Styles
 */

.dashboard-layout .site-header {
	/* Keep header on dashboard pages */
}

.dashboard-wrapper {
	display: flex;
	min-height: calc(100vh - var(--header-height));
}

/* Sidebar */
.dashboard-sidebar {
	display: none;
	width: var(--sidebar-width);
	flex-shrink: 0;
	background: var(--color-surface);
	border-right: 1px solid var(--color-border);
	position: sticky;
	top: var(--header-height);
	height: calc(100vh - var(--header-height));
	overflow-y: auto;
}

@media (min-width: 1024px) {
	.dashboard-sidebar {
		display: flex;
		flex-direction: column;
	}
}

.dashboard-nav {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--space-4);
}

.dashboard-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
}

.dashboard-nav-item a {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-3);
	font-size: var(--text-small);
	font-weight: 500;
	color: var(--color-text-secondary);
	border-radius: var(--radius-md);
	transition: background var(--duration-fast), color var(--duration-fast);
	margin-bottom: 2px;
}

.dashboard-nav-item a:hover {
	background: var(--color-background);
	color: var(--color-text);
}

.dashboard-nav-item.is-active a {
	background: rgba(11, 61, 145, 0.08);
	color: var(--color-primary);
}

.dashboard-nav-item .icon {
	flex-shrink: 0;
	opacity: 0.7;
}

.dashboard-nav-item.is-active .icon {
	opacity: 1;
}

.dashboard-nav-footer {
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dashboard-nav-footer a {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3);
	font-size: var(--text-small);
	font-weight: 500;
	color: var(--color-text-muted);
	border-radius: var(--radius-md);
	transition: background var(--duration-fast), color var(--duration-fast);
}

.dashboard-nav-footer a:hover {
	background: var(--color-background);
	color: var(--color-text);
}

/* Main Content */
.dashboard-main {
	flex: 1;
	min-width: 0;
	padding: var(--space-6) var(--space-4);
}

@media (min-width: 768px) {
	.dashboard-main {
		padding: var(--space-8) var(--space-6);
	}
}

@media (min-width: 1280px) {
	.dashboard-main {
		padding: var(--space-8) var(--space-10);
	}
}

.dashboard-header {
	margin-bottom: var(--space-8);
}

.dashboard-greeting {
	font-size: var(--text-h2);
	font-weight: 700;
	margin: 0 0 var(--space-1);
}

.dashboard-subtitle {
	color: var(--color-text-muted);
	font-size: var(--text-body);
	margin: 0;
}

/* Mobile dashboard nav */
.dashboard-mobile-nav {
	display: flex;
	overflow-x: auto;
	gap: var(--space-2);
	padding: var(--space-3) 0;
	margin-bottom: var(--space-6);
	-webkit-overflow-scrolling: touch;
}

@media (min-width: 1024px) {
	.dashboard-mobile-nav {
		display: none;
	}
}

.dashboard-mobile-nav a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-caption);
	font-weight: 500;
	color: var(--color-text-secondary);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	white-space: nowrap;
	flex-shrink: 0;
}

.dashboard-mobile-nav a.is-active {
	background: var(--color-primary);
	color: white;
	border-color: var(--color-primary);
}

/* Page toolbar */
.page-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
}

.page-toolbar h1 {
	font-size: var(--text-h2);
	margin: 0;
}

.view-toggle {
	display: flex;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.view-toggle button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--color-text-muted);
	background: var(--color-surface);
	transition: background var(--duration-fast), color var(--duration-fast);
}

.view-toggle button.is-active {
	background: var(--color-background);
	color: var(--color-primary);
}

/* Document grids */
.documents-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
}

@media (min-width: 640px) {
	.documents-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.documents-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-5);
	}
}

@media (min-width: 1440px) {
	.documents-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* Create new card */
.create-new-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 210 / 297;
	border: 2px dashed var(--color-border-strong);
	border-radius: var(--radius-lg);
	color: var(--color-text-muted);
	font-size: var(--text-small);
	font-weight: 500;
	gap: var(--space-3);
	transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
	cursor: pointer;
	text-decoration: none;
}

.create-new-card:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	background: rgba(11, 61, 145, 0.04);
}

.create-new-card .icon {
	width: 32px;
	height: 32px;
}