/**
 * 自定义品牌样式
 * 用于解耦原项目的视觉风格
 */

/* ========== 颜色变量 ========== */
:root {
	/* 主色调 */
	--brand-primary: #4a90d9;
	--brand-primary-hover: #357abd;
	--brand-secondary: #6c757d;
	
	/* 背景色 */
	--bg-dark: #1a1a2e;
	--bg-darker: #16213e;
	--bg-light: #2a2a4a;
	
	/* 文字色 */
	--text-primary: #ffffff;
	--text-secondary: rgba(255, 255, 255, 0.7);
	--text-muted: rgba(255, 255, 255, 0.5);
	
	/* 边框色 */
	--border-color: rgba(255, 255, 255, 0.15);
	--border-hover: rgba(255, 255, 255, 0.3);
	
	/* 状态色 */
	--success: #28a745;
	--warning: #ffc107;
	--danger: #dc3545;
	--info: #17a2b8;
}

/* ========== 导航栏样式增强 ========== */
.navbar-wrapper {
	background: linear-gradient(180deg, var(--bg-darker) 0%, var(--bg-dark) 100%) !important;
	border-bottom: 1px solid var(--border-color);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* ========== 按钮样式增强 ========== */
.btn {
	transition: all 0.2s ease;
}

.btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn-primary {
	background: var(--brand-primary) !important;
	border-color: var(--brand-primary) !important;
}

.btn-primary:hover {
	background: var(--brand-primary-hover) !important;
	border-color: var(--brand-primary-hover) !important;
}

/* ========== 内部菜单样式 ========== */
.innerMenuDiv {
	background: linear-gradient(180deg, var(--bg-light) 0%, var(--bg-dark) 100%);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.innerMenuContDiv {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	margin: 8px;
	padding: 12px;
}

/* ========== 设置面板样式 ========== */
.settingsContainer {
	background: transparent;
}

.settingsTabButtonContainer {
	gap: 4px;
	padding: 4px;
}

.settingsTabButton {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border-color);
	color: var(--text-secondary);
	transition: all 0.2s ease;
	border-radius: 4px;
	font-size: 0.9rem;
	white-space: nowrap;
	padding: 0.4em 0.8em;
}

.settingsTabButton:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--text-primary);
}

.settingsTabButton.selected {
	background: var(--brand-primary);
	border-color: var(--brand-primary);
	color: var(--text-primary);
}

/* 设置分组标签 */
.settingsGroupLabel {
	font-size: 0.95rem !important;
	font-weight: 500;
	padding: 0.6em 0.8em !important;
	word-break: keep-all;
	white-space: normal;
}

/* 修复可点击标题的高度限制 - 允许文本完整显示 */
.clickableTitle:not(.glyphicon) {
	height: auto !important;
	min-height: 2em;
	padding-right: 35px !important; /* 为折叠图标留出空间 */
	padding-top: 0.5em !important;
	padding-bottom: 0.5em !important;
	line-height: 1.6;
	display: block;
	overflow: visible;
	word-wrap: break-word;
}

/* 设置分组容器折叠状态 */
.settingsGroupContainer.collapsed {
	max-height: 4em !important; /* 增加高度以适应可能的换行 */
	overflow: hidden;
}

.settingsGroupContainer:not(.collapsed) {
	max-height: none !important;
	overflow: visible;
}

/* 确保内部菜单容器不会隐藏内容 */
.innerMenuContDiv {
	overflow: visible !important;
}

.innerMenuContDiv.collapsed {
	overflow: hidden !important;
}

/* 折叠图标位置调整 */
.settingsGroupLabel .collapserGlyphSpan {
	position: absolute !important;
	top: 0.5em !important;
	right: 8px !important;
	height: 14px;
	margin-top: 0.2em;
}

/* 设置项标签优化 - 确保中文完整显示 */
.sliderLabel,
.checkboxlabel,
.inputSelectLabel,
.settingLabel {
	font-size: 0.85rem !important;
	line-height: 1.5 !important;
	white-space: normal !important;
	word-break: keep-all;
	overflow: visible !important;
	text-overflow: clip !important;
	max-width: none !important;
}

/* 设置容器内的标签 - 允许换行 */
.settingContainer .sliderLabel,
.settingContainer .checkboxlabel,
.settingContainer .inputSelectLabel,
.settingContainer .settingLabel {
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
	max-width: 65% !important;
	word-wrap: break-word;
}

/* 滑块容器布局 */
.sliderContainer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
}

.sliderContainer .sliderLabel {
	flex: 0 0 auto;
	margin-right: 10px;
	min-width: 100px;
}

.sliderContainer .sliderVal {
	flex: 0 0 auto;
	min-width: 50px;
	text-align: right;
}

.sliderContainer input[type="range"] {
	flex: 1 1 100%;
	margin-top: 5px;
}

/* 复选框容器布局 */
.checkboxCont {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.checkboxCont .checkboxlabel {
	flex: 1 1 auto;
	text-align: left;
}

.checkboxCont .checkboxInput {
	flex: 0 0 auto;
}

/* ========== 滑块样式 ========== */
input[type="range"] {
	-webkit-appearance: none;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 4px;
	height: 6px;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	background: var(--brand-primary);
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
	transform: scale(1.2);
	background: var(--brand-primary-hover);
}

/* ========== 复选框样式 ========== */
input[type="checkbox"] {
	accent-color: var(--brand-primary);
}

/* ========== 输入框样式 ========== */
input[type="text"],
input[type="number"] {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	border-radius: 4px;
	padding: 6px 10px;
	transition: all 0.2s ease;
}

input[type="text"]:focus,
input[type="number"]:focus {
	border-color: var(--brand-primary);
	outline: none;
	box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.2);
}

/* ========== 选择框样式 ========== */
select {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	border-radius: 4px;
	padding: 6px 10px;
}

select:focus {
	border-color: var(--brand-primary);
	outline: none;
}

/* ========== 歌曲按钮样式 ========== */
.songButton {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border-color);
	color: var(--text-secondary);
	border-radius: 6px;
	padding: 10px 15px;
	margin: 4px;
	transition: all 0.2s ease;
}

.songButton:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--border-hover);
	color: var(--text-primary);
}

.songButton.selected {
	background: var(--brand-primary);
	border-color: var(--brand-primary);
	color: var(--text-primary);
}

/* ========== 滚动条样式 ========== */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.05);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.3);
}

/* ========== 工具提示样式 ========== */
[title] {
	position: relative;
}

/* ========== 动画效果 ========== */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.innerMenuDiv.unhidden {
	animation: fadeIn 0.2s ease;
}

/* ========== 响应式调整 ========== */
@media (max-width: 768px) {
	.language-selector {
		margin-left: 5px;
	}
	
	.language-btn {
		padding: 4px 8px;
		font-size: 12px;
	}
}