/**
 * SU8 AI Music - 深色主题样式
 * 参考 https://app.yourmusic.fun 风格
 * 支持后台自定义背景和菜单配置
 */

:root {
  /* 主题色变量 - 可通过后台配置覆盖 */
  --theme-bg-primary: #0d0d0f;
  --theme-bg-secondary: #1a1a1f;
  --theme-bg-tertiary: #252530;
  --theme-bg-card: #1e1e26;
  --theme-bg-hover: #2a2a35;
  
  /* 渐变色 */
  --theme-gradient-start: #8b5cf6;
  --theme-gradient-end: #ec4899;
  --theme-gradient: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end));
  
  /* 文字颜色 */
  --theme-text-primary: #ffffff;
  --theme-text-secondary: #a0a0a8;
  --theme-text-muted: #6b6b75;
  
  /* 边框颜色 */
  --theme-border: #2a2a35;
  --theme-border-light: #3a3a45;
  
  /* 强调色 */
  --theme-accent: #8b5cf6;
  --theme-accent-hover: #a78bfa;
  --theme-success: #10b981;
  --theme-warning: #f59e0b;
  --theme-error: #ef4444;
  
  /* 侧边栏 */
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 64px;
  --sidebar-bg: var(--theme-bg-secondary);
  
  /* 顶部导航 */
  --header-height: 64px;
  --header-bg: var(--theme-bg-primary);
  
  /* 圆角 */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  
  /* 阴影 */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* ========== 全局基础样式 ========== */
html, body {
  background-color: var(--theme-bg-primary) !important;
  color: var(--theme-text-primary) !important;
  font-family: 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#__nuxt {
  background-color: var(--theme-bg-primary);
  min-height: 100vh;
}

/* ========== 侧边栏样式 ========== */
.sidebar,
.aside,
[class*="sidebar"],
[class*="aside"],
nav[class*="nav"] {
  background-color: var(--sidebar-bg) !important;
  border-right: 1px solid var(--theme-border) !important;
}

/* 侧边栏菜单项 */
.sidebar-menu-item,
.menu-item,
[class*="menu-item"],
.nav-item {
  color: var(--theme-text-secondary) !important;
  border-radius: var(--radius-md) !important;
  margin: 4px 8px !important;
  padding: 10px 16px !important;
  transition: all 0.2s ease !important;
}

.sidebar-menu-item:hover,
.menu-item:hover,
[class*="menu-item"]:hover,
.nav-item:hover {
  background-color: var(--theme-bg-hover) !important;
  color: var(--theme-text-primary) !important;
}

.sidebar-menu-item.active,
.menu-item.active,
[class*="menu-item"].active,
.nav-item.active,
.router-link-active {
  background: var(--theme-gradient) !important;
  color: var(--theme-text-primary) !important;
}

/* 菜单分组标题 */
.menu-group-title,
[class*="menu-title"],
.nav-title {
  color: var(--theme-text-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 16px 16px 8px !important;
}

/* ========== 顶部导航栏 ========== */
header,
.header,
[class*="header"],
.navbar,
.top-bar {
  background-color: var(--header-bg) !important;
  border-bottom: 1px solid var(--theme-border) !important;
  backdrop-filter: blur(10px);
}

/* ========== 卡片样式 ========== */
.card,
[class*="card"],
.panel,
.box {
  background-color: var(--theme-bg-card) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ========== 按钮样式 ========== */
.btn-primary,
.button-primary,
[class*="btn-primary"],
button[type="submit"] {
  background: var(--theme-gradient) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  color: var(--theme-text-primary) !important;
  font-weight: 500 !important;
  padding: 10px 24px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
}

.btn-primary:hover,
.button-primary:hover,
[class*="btn-primary"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4) !important;
}

.btn-secondary,
.button-secondary,
[class*="btn-secondary"] {
  background-color: var(--theme-bg-tertiary) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--theme-text-primary) !important;
}

/* ========== 输入框样式 ========== */
input,
textarea,
select,
.input,
[class*="input"],
.el-input__inner,
.el-textarea__inner {
  background-color: var(--theme-bg-tertiary) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--theme-text-primary) !important;
  transition: all 0.2s ease !important;
}

input:focus,
textarea:focus,
select:focus,
.input:focus,
[class*="input"]:focus {
  border-color: var(--theme-accent) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2) !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--theme-text-muted) !important;
}

/* ========== 标签页样式 ========== */
.tabs,
[class*="tabs"],
.el-tabs {
  background-color: transparent !important;
}

.tab-item,
[class*="tab-item"],
.el-tabs__item {
  color: var(--theme-text-secondary) !important;
  border: none !important;
  padding: 8px 16px !important;
  border-radius: var(--radius-md) !important;
  margin-right: 8px !important;
}

.tab-item.active,
[class*="tab-item"].active,
.el-tabs__item.is-active {
  background: var(--theme-gradient) !important;
  color: var(--theme-text-primary) !important;
}

/* ========== 表格样式 ========== */
table,
.table,
[class*="table"],
.el-table {
  background-color: var(--theme-bg-card) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
}

th,
.table-header,
.el-table__header th {
  background-color: var(--theme-bg-tertiary) !important;
  color: var(--theme-text-secondary) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--theme-border) !important;
}

td,
.table-cell,
.el-table__body td {
  background-color: var(--theme-bg-card) !important;
  color: var(--theme-text-primary) !important;
  border-bottom: 1px solid var(--theme-border) !important;
}

tr:hover td,
.el-table__body tr:hover td {
  background-color: var(--theme-bg-hover) !important;
}

/* ========== 弹窗/对话框样式 ========== */
.modal,
.dialog,
[class*="modal"],
[class*="dialog"],
.el-dialog {
  background-color: var(--theme-bg-card) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
}

.modal-overlay,
.dialog-overlay,
.el-overlay {
  background-color: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(4px) !important;
}

/* ========== 下拉菜单样式 ========== */
.dropdown,
[class*="dropdown"],
.el-dropdown-menu,
.el-select-dropdown {
  background-color: var(--theme-bg-card) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
}

.dropdown-item,
[class*="dropdown-item"],
.el-dropdown-menu__item,
.el-select-dropdown__item {
  color: var(--theme-text-primary) !important;
}

.dropdown-item:hover,
[class*="dropdown-item"]:hover,
.el-dropdown-menu__item:hover,
.el-select-dropdown__item:hover {
  background-color: var(--theme-bg-hover) !important;
}

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

::-webkit-scrollbar-track {
  background: var(--theme-bg-secondary);
  border-radius: 4px;
}

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

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

/* ========== 音乐播放器样式 ========== */
.player,
[class*="player"],
.audio-player {
  background-color: var(--theme-bg-secondary) !important;
  border-top: 1px solid var(--theme-border) !important;
}

.player-progress,
[class*="progress-bar"] {
  background-color: var(--theme-bg-tertiary) !important;
  border-radius: 4px !important;
}

.player-progress-fill,
[class*="progress-fill"] {
  background: var(--theme-gradient) !important;
  border-radius: 4px !important;
}

/* ========== 标签/徽章样式 ========== */
.tag,
.badge,
[class*="tag"],
[class*="badge"] {
  background-color: var(--theme-bg-tertiary) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--theme-text-secondary) !important;
  font-size: 12px !important;
  padding: 2px 8px !important;
}

.tag-primary,
.badge-primary {
  background: var(--theme-gradient) !important;
  border: none !important;
  color: var(--theme-text-primary) !important;
}

.tag-new,
.badge-new {
  background: linear-gradient(135deg, #10b981, #34d399) !important;
  border: none !important;
  color: var(--theme-text-primary) !important;
}

/* ========== 提示/通知样式 ========== */
.toast,
.notification,
[class*="toast"],
[class*="notification"],
.el-message {
  background-color: var(--theme-bg-card) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--theme-text-primary) !important;
  box-shadow: var(--shadow-md) !important;
}

/* ========== 加载状态样式 ========== */
.loading,
[class*="loading"],
.spinner {
  color: var(--theme-accent) !important;
}

/* ========== 空状态样式 ========== */
.empty,
[class*="empty"],
.no-data {
  color: var(--theme-text-muted) !important;
}

/* ========== 分页样式 ========== */
.pagination,
[class*="pagination"],
.el-pagination {
  background-color: transparent !important;
}

.pagination-item,
.el-pager li {
  background-color: var(--theme-bg-tertiary) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--theme-text-primary) !important;
}

.pagination-item.active,
.el-pager li.active {
  background: var(--theme-gradient) !important;
  border: none !important;
}

/* ========== 工具提示样式 ========== */
.tooltip,
[class*="tooltip"],
.el-tooltip__popper {
  background-color: var(--theme-bg-card) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--theme-text-primary) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ========== 创作页面特殊样式 ========== */
.create-panel,
[class*="create"],
.music-create {
  background-color: var(--theme-bg-card) !important;
  border-radius: var(--radius-lg) !important;
}

.model-selector,
[class*="model-select"] {
  background-color: var(--theme-bg-tertiary) !important;
  border-radius: var(--radius-md) !important;
}

.model-option,
[class*="model-option"] {
  background-color: var(--theme-bg-card) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--radius-md) !important;
  transition: all 0.2s ease !important;
}

.model-option:hover,
[class*="model-option"]:hover {
  border-color: var(--theme-accent) !important;
}

.model-option.selected,
[class*="model-option"].selected {
  border-color: var(--theme-accent) !important;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1)) !important;
}

/* ========== 响应式适配 ========== */
@media (max-width: 768px) {
  :root {
    --sidebar-width: 100%;
    --header-height: 56px;
  }
  
  .sidebar,
  [class*="sidebar"] {
    position: fixed !important;
    z-index: 1000 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
  }
  
  .sidebar.open,
  [class*="sidebar"].open {
    transform: translateX(0) !important;
  }
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.fade-in {
  animation: fadeIn 0.3s ease forwards;
}

.loading-shimmer {
  background: linear-gradient(90deg, var(--theme-bg-tertiary) 25%, var(--theme-bg-hover) 50%, var(--theme-bg-tertiary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ========== 自定义背景支持 ========== */
.custom-bg {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

.custom-bg::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(13, 13, 15, 0.85);
  z-index: -1;
}