/*
 * UserNotes Theme — note-layout.css
 * Two-column shell, sidebar geometry, responsive behaviour.
 * Applied to both front-end and block editor via add_editor_style().
 */

/* ── Shell ──────────────────────────────────────────────────────────────── */

.note-layout-shell {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	min-height: 100vh;
	width: 100%;
	max-width: 100% !important;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.note-sidebar-region,
.note-sidebar {
	flex: 0 0 280px;
	width: 280px;
	min-width: 280px;
	background-color: var(--wp--preset--color--sidebar-bg, #f1f0ef);
	overflow-y: auto;
	position: sticky;
	top: 0;
	height: 100vh;
	border-right: 1px solid var(--wp--preset--color--border, #e9e9e7);
	padding: var(--wp--preset--spacing--4, 1rem) 0;
	box-sizing: border-box;
}

/* ── Content area ────────────────────────────────────────────────────────── */

.note-content-area {
	flex: 1 1 0;
	min-width: 0;
	overflow-y: auto;
	padding: var(--wp--preset--spacing--8, 2rem);
	box-sizing: border-box;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* ── Note meta row ───────────────────────────────────────────────────────── */

.note-meta {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--4, 1rem);
	align-items: center;
	color: var(--wp--preset--color--text-secondary, #787774);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

/* ── Workspace note list ─────────────────────────────────────────────────── */

.cn-workspace-note-list,
.cn-workspace-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.cn-workspace-note-item,
.cn-workspace-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--wp--preset--spacing--2, 0.5rem) 0;
	border-bottom: 1px solid var(--wp--preset--color--border, #e9e9e7);
}

.cn-workspace-note-item:last-child,
.cn-workspace-item:last-child {
	border-bottom: none;
}

/* ── Sidebar depth indentation ───────────────────────────────────────────── */

.note-sidebar__item[data-depth="0"] { padding-left: var(--wp--preset--spacing--3, 0.75rem); }
.note-sidebar__item[data-depth="1"] { padding-left: calc(var(--wp--preset--spacing--3, 0.75rem) + 1.25rem); }
.note-sidebar__item[data-depth="2"] { padding-left: calc(var(--wp--preset--spacing--3, 0.75rem) + 2.5rem); }
.note-sidebar__item[data-depth="3"] { padding-left: calc(var(--wp--preset--spacing--3, 0.75rem) + 3.75rem); }
.note-sidebar__item[data-depth="4"] { padding-left: calc(var(--wp--preset--spacing--3, 0.75rem) + 5rem); }

/* ── Responsive — collapse sidebar below 768px ───────────────────────────── */

@media (max-width: 767px) {
	.note-layout-shell {
		flex-direction: column;
	}

	.note-sidebar-region,
	.note-sidebar {
		flex: 0 0 auto;
		width: 100%;
		min-width: 0;
		height: auto;
		position: static;
		border-right: none;
		border-bottom: 1px solid var(--wp--preset--color--border, #e9e9e7);
	}

	.note-content-area {
		padding: var(--wp--preset--spacing--4, 1rem);
	}
}