// 中式极简版式重构层
//
// 目标：把「控件的堆叠」改成「内容的分层」。
// 具体手法——去掉所有可见描边，用留白与极淡分隔线建立层次；
// 交互反馈改为背景填充而非边框变化；图标统一 16px 与 1em 尺寸节奏。
// 只覆盖视觉，不改动布局结构与交互逻辑。

:root {
	--cn-space-1: 4px;
	--cn-space-2: 8px;
	--cn-space-3: 12px;
	--cn-space-4: 16px;
	--cn-space-6: 24px;
	--cn-icon-sm: 14px;
	--cn-icon-md: 16px;
	--cn-icon-lg: 18px;
	--cn-control-h: 32px;
}

/* =========================================================================
侧边栏顶部按钮（折叠全部 / 新建笔记本 / 同步）

原生实现靠 padding 定位图标，这里改为等尺寸方形热区，
三个按钮沿标题行右缘等距排列。
========================================================================= */

.sidebar-header-button {
	position: absolute;
	top: 1px;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 4px;
	background-color: transparent;
	color: var(--joplin-color2);
	opacity: 0.62;

	> i {
		font-size: 15px;
	}

	&:hover:not(:disabled) {
		background-color: var(--joplin-background-color-hover2);
		opacity: 1;
	}

	&:active:not(:disabled) {
		background-color: var(--joplin-background-color-hover2);
		opacity: 1;
	}

	&:disabled {
		opacity: 0.25;
	}

	// 从右向左：同步（最常用）→ 显示笔记列表 → 新建笔记本 → 折叠全部
	&.-sync {
		inset-inline-end: var(--cn-space-1);
	}

	&.-toggle-note-list {
		inset-inline-end: 34px;
	}

	&.-newfolder {
		inset-inline-end: 64px;
	}

	&.-collapseall {
		inset-inline-end: 94px;
	}

	// 同步进行中：图标持续旋转
	&.-sync.-syncing > i {
		animation: icon-infinite-rotation 1s linear infinite;

		@media (prefers-reduced-motion: reduce) {
			animation: none;
		}
	}
}

/* =========================================================================
侧边栏：墨色面板

层级靠字重与明度区分，而不是靠圆角卡片：
分组标题（小、淡、带字距）→ 列表项（正常、较亮）→ 选中（仅底色 + 左侧细线）。
========================================================================= */

.sidebar {
	// 列表项：通栏、无圆角、无动效——贴近原生桌面应用的克制
	.list-item-wrapper {
		height: 32px;
		margin: 0;
		padding-left: var(--cn-space-3);
		padding-right: var(--cn-space-3);
		border-radius: 0;
		gap: 10px;

		// 图标压暗一档，让文字成为主体
		i,
		[class^='icon-'],
		[class*=' icon-'] {
			font-size: 15px;
			width: 15px;
			opacity: 0.62;
			display: inline-flex;
			justify-content: center;
		}

		> .list-item,
		> span {
			font-size: 13px;
			letter-spacing: 0.01em;
		}

		&.-selected {
			background-color: var(--joplin-selected-color2);
			box-shadow: inset 2px 0 0 var(--joplin-color2);

			i,
			[class^='icon-'],
			[class*=' icon-'] {
				opacity: 1;
			}
		}

		&.-highlight-on-hover:not(.-selected):hover {
			background-color: var(--joplin-background-color-hover2);
		}
	}

	// 分组标题（笔记本 / 标签）：小字号 + 字距，作为静默的层级标记。
	// 写在列表项之后，确保同特异性下优先。
	.sidebar-header-container {
		height: 28px;
		margin-top: var(--cn-space-4);
		padding-left: var(--cn-space-3);
		padding-right: var(--cn-space-3);
		gap: 10px;
		background: none;
		cursor: default;

		&:first-child {
			margin-top: var(--cn-space-2);
		}

		i,
		[class^='icon-'],
		[class*=' icon-'] {
			font-size: 13px;
			width: 13px;
			opacity: 0.5;
		}

		> span {
			font-size: 11px;
			font-weight: 600;
			letter-spacing: 0.1em;
			color: var(--joplin-color-faded2);
		}

		&:hover {
			background: none;
		}

		button,
		.icon-button,
		.toolbar-button {
			border: none !important;
			background: transparent;
			border-radius: 4px;
			color: var(--joplin-color2);
			height: 24px;
			width: 24px;
			opacity: 0.6;

			&:hover {
				background-color: var(--joplin-background-color-hover2) !important;
				opacity: 1;
			}
		}
	}

	// 同步报告展开箭头：贴右的小图标，不再居中孤立
	.sync-report-toggle {
		display: flex;
		justify-content: flex-end;
		width: 100%;
		background: none;
		border: none;
		padding: 0 var(--cn-space-1);
		margin-bottom: var(--cn-space-2);
		cursor: pointer;
		opacity: 0.4;

		&:hover {
			opacity: 0.9;
		}

		i {
			font-size: 12px;
		}
	}
}

/* =========================================================================
笔记列表：填充式搜索框 + 幽灵按钮 + 去分隔线的行
========================================================================= */

// 顶部工具区（新建笔记 / 新建待办 / 搜索 / 排序）
// 这些控件由 styled-components 注入样式，需要提高特异性覆盖。
.new-note-todo-buttons,
.search-and-sort {
	align-items: center;
	gap: var(--cn-space-2);
}

.new-note-todo-buttons {
	flex-shrink: 0;

	button {
		flex-shrink: 0;
		white-space: nowrap;
	}
}

.search-and-sort {
	flex: 1 1 auto;
	min-width: 0;
}

.new-note-todo-buttons button,
.sort-order-field-button,
.sort-order-reverse-button {
	border: none !important;
	background-color: transparent !important;
	border-radius: var(--cn-radius) !important;
	color: var(--joplin-color3) !important;
	height: 32px !important;
	min-height: 32px !important;
	max-height: 32px !important;
	min-width: 32px !important;
	padding: 0 var(--cn-space-2) !important;
	

	// 图标尺寸与线性图标体系对齐（原为 11px）
	.fa,
	.fas,
	[class^='icon-'],
	[class*=' icon-'] {
		font-size: var(--cn-icon-md) !important;
	}

	&:hover:not(:disabled) {
		background-color: var(--joplin-background-color-hover3) !important;
		color: var(--joplin-color) !important;
	}

	&:disabled {
		opacity: 0.38;
	}
}

// styled-components 把按钮内图标与标题的颜色单独写在子元素上（Primary 为白色），
// 只覆盖 button 的 color 不会生效，必须让子元素继承。
// 「新建笔记」是列表区的主操作，这里做成实心按钮：
// 浅色主题深底浅字、暗色主题浅底深字，跟随主题自动反色，保证任何主题下都清晰可辨。
.new-note-todo-buttons button.new-note-button {
	background-color: var(--joplin-color) !important;
	color: var(--joplin-background-color) !important;
	padding: 0 var(--cn-space-3) !important;

	> span {
		color: inherit !important;
	}

	// 特异性需高于上面的幽灵按钮 hover 规则，否则 hover 会被改回透明底
	&:hover:not(:disabled),
	&:active:not(:disabled) {
		background-color: var(--joplin-color) !important;
		color: var(--joplin-background-color) !important;
		opacity: 0.86;
	}
}

.note-list-header {
	padding: var(--cn-space-2) var(--cn-space-3);
	gap: var(--cn-space-2);
	background-color: var(--joplin-background-color3);
	border-bottom: 1px solid var(--joplin-divider-color);

	// 表头排序按钮：静默的标签，不是控件
	> .item {
		> .inner > .titlewrapper > .title,
		button {
			font-size: 12px;
			font-weight: 500;
			letter-spacing: 0.03em;
			color: var(--joplin-color3);
			border: none;
			background: transparent;
			padding: 0 var(--cn-space-1);

			&:hover {
				color: var(--joplin-color);
			}
		}

		> .inner > .titlewrapper > .chevron {
			top: 6px;
			right: 2px;
			font-size: 9px;
		}
	}

	// 右侧操作按钮（日历、上传等）：幽灵方形按钮
	button,
	.icon-button,
	.toolbar-button {
		border: none !important;
		background: transparent;
		border-radius: var(--cn-radius);
		color: var(--joplin-color3);
		height: 30px;
		width: 30px;
		min-width: 30px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		

		&:hover {
			background-color: var(--joplin-background-color-hover3) !important;
			color: var(--joplin-color);
		}
	}
}

.search-input {
	// styled-components 注入了 max-height: 26px，需覆盖才能拿到舒适的行高
	> .field {
		height: 34px !important;
		max-height: 34px !important;
		box-sizing: border-box;
		border: 1px solid var(--joplin-divider-color);
		border-radius: var(--cn-radius);
		background-color: transparent;
		padding-left: 32px;
		padding-right: 32px;
		font-size: 13px;
		color: var(--joplin-color);

		&::placeholder {
			color: var(--joplin-color-faded);
		}

		&:focus-visible,
		&:focus {
			outline: none;
			border-color: var(--joplin-url-color);
			background-color: transparent;
		}

		&.settings {
			background-color: transparent;
		}
	}

	// 放大镜移到左侧：符合中文用户的检索习惯
	> .button {
		right: auto;
		left: 0;
		width: 32px;
		border-radius: var(--cn-radius);
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--joplin-color-faded);

		&:hover {
			color: var(--joplin-color);
		}

		> .icon {
			font-size: var(--cn-icon-sm);
			color: inherit;
		}
	}
}

.note-list {
	border-right: 1px solid var(--joplin-divider-color);

	// renderer 注入的 itemCss 在运行时后加载，这里用更高特异性覆盖
	.note-list-item {
		// 分隔线：全宽极淡，取代 90% 宽的硬线
		&::before {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 1px;
			border: none;
			background-color: var(--joplin-divider-color);
			opacity: 0.6;
		}

		&:last-child::before {
			display: none;
		}

		> .content {
			display: flex;
			align-items: center;
			padding-left: var(--cn-space-3);
			padding-right: var(--cn-space-2);
			border-radius: 0;

			> .item-body {
				display: flex;
				flex-direction: column;
				justify-content: center;
				min-width: 0;
				flex: 1 1 0%;
				gap: 3px;

				> .title {
					font-size: 13.5px;
					font-weight: 500;
					line-height: 1.35;
					letter-spacing: var(--cn-letter-spacing);
					display: flex;
					align-items: center;
					overflow: hidden;
					white-space: nowrap;

					> .pinnedicon {
						font-size: 11px;
						margin-right: 5px;
						color: var(--joplin-color-accent, #007aff);
						transform: rotate(45deg);
					}

					> span {
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				> .details {
					display: flex;
					align-items: baseline;
					gap: 6px;
					font-size: 12px;
					line-height: 1.3;
					color: var(--joplin-color-faded);
					overflow: hidden;
					white-space: nowrap;

					> .date {
						flex-shrink: 0;
						font-variant-numeric: tabular-nums;
						color: var(--joplin-color);
						opacity: 0.75;
					}

					> .snippet {
						overflow: hidden;
						text-overflow: ellipsis;
						opacity: 0.65;
					}
				}
			}
		}

		// 选中态：左侧指示条，与侧边栏语言一致
		> .content.-selected {
			background-color: var(--joplin-background-color-active3);
			box-shadow: inset 3px 0 0 var(--joplin-url-color);

			> .item-body > .title {
				font-weight: 600;
			}

			> .item-body > .details > .date,
			> .item-body > .details > .snippet {
				opacity: 0.85;
			}
		}

		&:hover > .content,
		&.-focus-visible > .content {
			background-color: var(--joplin-background-color-hover3);
		}

		&:hover > .content.-selected,
		&.-focus-visible > .content.-selected {
			background-color: var(--joplin-background-color-active3);
		}
	}

	.note-list-item-wrapper:focus-visible .note-list-item > .content {
		outline: 2px solid var(--joplin-focus-outline-color);
		outline-offset: -2px;
	}

	// 空状态：图标 + 文案，居中留白，取代裸露的一行字
	> .emptylist {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px;
		height: 55%;
		padding: var(--cn-space-6);
		background-color: transparent;
		// 次要信息也要满足 4.5:1，faded 色在宣纸底色上只有 3.4:1
		color: var(--joplin-color3);
		font-size: 12.5px;
		text-align: center;

		&::before {
			content: '';
			width: 32px;
			height: 32px;
			opacity: 0.22;
			background-color: currentColor;
			// cSpell:disable
			-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v5h5'/%3E%3C/svg%3E") center / contain no-repeat;
			mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v5h5'/%3E%3C/svg%3E") center / contain no-repeat;
			// cSpell:enable
		}
	}
}

/* =========================================================================
通用控件：去描边，交互用填充表达
========================================================================= */

.toolbar-button {
	border-radius: var(--cn-radius);
	color: var(--joplin-color3);
	

	&:hover:not(.disabled) {
		background-color: var(--joplin-background-color-hover3);
		color: var(--joplin-color);
	}

	&.disabled {
		opacity: 0.38;
	}

	&:focus-visible {
		outline: 1px solid var(--joplin-focus-outline-color);
		outline-offset: -1px;
	}
}

.icon-button {
	width: var(--cn-control-h);
	height: var(--cn-control-h);
	padding: 0 !important;
	border-radius: var(--cn-radius);
	color: var(--joplin-color3);

	&:hover {
		background-color: var(--joplin-background-color-hover3) !important;
		border: none !important;
		color: var(--joplin-color);
	}

	&:active {
		background-color: var(--joplin-background-color-active3) !important;
		border: none !important;
	}
}

// main.scss 里遗留的透明边框 hack 已无意义，统一去掉
.editor-toolbar .button,
.header .button {
	border: none;
}

/* =========================================================================
编辑器：标题行与状态栏
========================================================================= */

.note-title-wrapper {
	min-height: 52px;
	height: auto;
	padding: var(--cn-space-3) var(--cn-space-4) var(--cn-space-1);
	gap: var(--cn-space-3);
	border-bottom: none !important;
	background-color: var(--joplin-background-color);

	> .title-input {
		font-size: 26px !important;
		font-weight: 700 !important;
		line-height: 1.3 !important;
		letter-spacing: -0.015em;
		color: var(--joplin-color);
		background-color: transparent !important;
		border: none !important;
		outline: none !important;
		box-shadow: none !important;
		padding: 4px 0 !important;

		&::placeholder {
			color: var(--joplin-color-faded);
			font-weight: normal;
			opacity: 0.6;
		}

		&:focus {
			outline: none !important;
			box-shadow: none !important;
		}
	}

	> .note-title-info-group {
		align-items: center;
		gap: var(--cn-space-1);

		// 时间戳：静默的次要信息
		> .updated-time-label {
			font-size: 12px !important;
			color: var(--joplin-color-faded) !important;
			opacity: 1 !important;
			letter-spacing: 0.02em;
			margin-right: var(--cn-space-2);
		}

		// 标题栏工具按钮：统一尺寸与图标大小，消除参差
		button,
		.toolbar-button {
			border: none !important;
			background-color: transparent !important;
			border-radius: var(--cn-radius);
			color: var(--joplin-color-faded) !important;
			height: 28px;
			padding: 0 !important;
			

			> .toolbar-icon,
			i {
				font-size: var(--cn-icon-md) !important;
			}

			// 纯图标按钮为正方形；带文字的按钮（如语言切换）需按内容撑开，否则文字被裁
			&:not(.-has-title) {
				width: 28px;
				min-width: 28px;
			}

			&.-has-title {
				width: auto;
				min-width: 28px;
				padding: 0 var(--cn-space-2) !important;
				gap: var(--cn-space-1);
				font-size: 12px;
			}

			&:hover:not(.disabled) {
				background-color: var(--joplin-background-color-hover3) !important;
				color: var(--joplin-color) !important;
			}
		}
	}
}

.editor-status-bar {
	height: 36px;
	padding: 0 var(--cn-space-4);
	border-top: 1px solid var(--joplin-divider-color);
	background-color: var(--joplin-background-color);

	.tag-bar {
		gap: var(--cn-space-2);

		.content > span {
			font-size: 12.5px;
			color: var(--joplin-color-faded);
		}
	}
}

/* =========================================================================
侧边栏：笔记计数与警告横幅
========================================================================= */

.note-count-label {
	margin-left: auto;
	padding-left: var(--cn-space-2);
	font-size: 12px;
	color: var(--joplin-color-faded2);
	font-variant-numeric: tabular-nums;
}

.warning-banner {
	font-size: 12.5px;
	letter-spacing: 0.01em;

	&.-header {
		padding: var(--cn-space-2) var(--cn-space-4);
	}

	.content {
		line-height: 1.6;
	}
}

/* =========================================================================
日志优化增强：今日日志按钮与时间戳胶囊徽章
========================================================================= */

.today-note-button {
	i.fa-calendar-alt, i.far {
		color: var(--joplin-color-accent, #007aff);
	}
}

.cm-ext-timestamp-chip {
	font-variant-numeric: tabular-nums;
	background-color: var(--joplin-background-color-hover3, rgba(0, 0, 0, 0.06));
	color: var(--joplin-color-accent, #007aff);
	font-size: 0.88em;
	font-weight: 600;
	padding: 1px 6px;
	border-radius: 4px;
	margin-right: 3px;
	letter-spacing: 0.02em;
	display: inline-block;
	vertical-align: baseline;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* =========================================================================
双链与 @ 快速提及弹窗设计重构（macOS / 极简中式高质感）
========================================================================= */

.cm-tooltip.cm-tooltip-autocomplete {
	font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
	border-radius: 12px !important;
	border: 1px solid var(--joplin-divider-color, rgba(0, 0, 0, 0.12)) !important;
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03) !important;
	background-color: var(--joplin-background-color3, #ffffff) !important;
	backdrop-filter: blur(24px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(24px) saturate(180%) !important;
	padding: 6px !important;
	min-width: 280px !important;
	max-width: 440px !important;
	overflow: hidden !important;
	z-index: 1000 !important;

	ul {
		font-family: inherit !important;
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
		max-height: 280px !important;
		overflow-y: auto !important;

		&::-webkit-scrollbar {
			width: 5px;
		}

		&::-webkit-scrollbar-thumb {
			background: var(--joplin-divider-color, rgba(0, 0, 0, 0.15));
			border-radius: 4px;
		}

		li {
			padding: 7px 10px !important;
			margin: 1px 0 !important;
			border-radius: 8px !important;
			display: flex !important;
			align-items: center !important;
			justify-content: space-between !important;
			font-size: 13px !important;
			line-height: 1.4 !important;
			cursor: pointer !important;
			transition: background-color 0.1s ease, color 0.1s ease;
			color: var(--joplin-color, #222) !important;

			&:hover:not([aria-selected="true"]) {
				background-color: var(--joplin-background-color-hover3, rgba(0, 0, 0, 0.04)) !important;
			}

			&[aria-selected="true"] {
				background-color: var(--joplin-selected-color2, #007aff) !important;
				color: #ffffff !important;

				.cm-completionLabel {
					color: #ffffff !important;
				}

				.cm-completionDetail {
					background-color: rgba(255, 255, 255, 0.22) !important;
					color: #ffffff !important;
				}

				.cm-completionMatchedText {
					color: #ffffff !important;
					text-decoration: underline !important;
				}
			}

			.cm-completionLabel {
				font-weight: 500;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				flex: 1;
				color: inherit;
			}

			.cm-completionMatchedText {
				color: var(--joplin-color-accent, #007aff);
				font-weight: 600;
			}

			.cm-completionDetail {
				font-size: 11px !important;
				font-weight: 500 !important;
				padding: 2px 7px !important;
				border-radius: 6px !important;
				background-color: var(--joplin-background-color-hover3, rgba(0, 0, 0, 0.06));
				color: var(--joplin-color-faded, #666);
				margin-left: 8px !important;
				white-space: nowrap !important;
				flex-shrink: 0 !important;
			}
		}

		completion-section {
			display: block !important;
			font-size: 10.5px !important;
			font-weight: 600 !important;
			color: var(--joplin-color-faded, #888) !important;
			padding: 6px 8px 3px 8px !important;
			letter-spacing: 0.04em !important;
		}
	}
}

/* =========================================================================
富文本编辑器 TinyMCE：@ 提及与双链自动补全弹窗样式（对齐 macOS 质感）
========================================================================= */

.tox.tox-tinymce-aux .tox-autocompleter .tox-menu {
	font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
	border-radius: 12px !important;
	border: 1px solid var(--joplin-divider-color, rgba(0, 0, 0, 0.12)) !important;
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.06) !important;
	background-color: var(--joplin-background-color3, #ffffff) !important;
	backdrop-filter: blur(24px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(24px) saturate(180%) !important;
	padding: 6px !important;
	max-height: 280px !important;

	.tox-collection__item {
		border-radius: 8px !important;
		margin: 1px 0 !important;
		padding: 7px 10px !important;
		font-size: 13px !important;
		transition: background-color 0.1s ease !important;
		color: var(--joplin-color, #222) !important;

		&:hover:not(.tox-collection__item--active) {
			background-color: var(--joplin-background-color-hover3, rgba(0, 0, 0, 0.04)) !important;
		}

		&.tox-collection__item--active {
			background-color: var(--joplin-selected-color2, #007aff) !important;
			color: #ffffff !important;

			.tox-collection__item-label {
				color: #ffffff !important;
			}
		}

		.tox-collection__item-label {
			font-weight: 500 !important;
		}
	}
}