/**
 * 移动端暗色主题 - Mobile Dark Theme
 * 专门针对移动端设备优化的暗色主题样式
 * 与PC端主题保持一致，但针对移动端交互进行优化
 */

:root[data-theme="dark"] {
  /* 移动端基础色彩变量 */
  --mobile-primary-color: #177ddc;
  --mobile-primary-hover: #3c9ae8;
  --mobile-primary-active: #0958d9;
  --mobile-background-color: #141414;
  --mobile-surface-color: #1f1f1f;
  --mobile-text-primary: #ffffff;
  --mobile-text-secondary: #a6a6a6;
  --mobile-text-disabled: #595959;
  --mobile-border-color: #303030;
  --mobile-border-secondary: #434343;
  --mobile-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  --mobile-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.25);

  /* 移动端导航栏变量 */
  --mobile-navbar-bg: #1f1f1f;
  --mobile-navbar-border: #303030;
  --mobile-navbar-text: #ffffff;
  --mobile-navbar-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

  /* 移动端侧边栏变量 */
  --mobile-sidebar-bg: #141414;
  --mobile-sidebar-border: #303030;
  --mobile-sidebar-text: #ffffff;
  --mobile-sidebar-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
  --sidebar-bg: #141414; /* 兼容性变量 */
  --bg-color: #141414; /* 移动端下拉菜单背景色变量 */

  /* 移动端卡片变量 */
  --mobile-card-bg: #1f1f1f;
  --mobile-card-border: #303030;
  --mobile-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  --mobile-card-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);

  /* 移动端按钮变量 */
  --mobile-button-bg: #177ddc;
  --mobile-button-text: #ffffff;
  --mobile-button-hover-bg: #3c9ae8;
  --mobile-button-secondary-bg: #262626;
  --mobile-button-secondary-text: #ffffff;
  --mobile-button-secondary-hover-bg: #434343;

  /* 移动端表单变量 */
  --mobile-input-bg: #1f1f1f;
  --mobile-input-border: #434343;
  --mobile-input-focus-border: #177ddc;
  --mobile-input-text: #ffffff;
  --mobile-input-placeholder: #a6a6a6;

  /* 移动端触摸反馈变量 */
  --mobile-touch-feedback: rgba(23, 125, 220, 0.1);
  --mobile-touch-active: rgba(23, 125, 220, 0.2);

  /* 移动端状态颜色 */
  --mobile-success-color: #73d13d;
  --mobile-success-bg: #162312;
  --mobile-warning-color: #ffc53d;
  --mobile-warning-bg: #2b1d11;
  --mobile-error-color: #ff7875;
  --mobile-error-bg: #2a1215;
  --mobile-info-color: #177ddc;
  --mobile-info-bg: #111b26;

  /* 移动端链接颜色 - 黑白配色 */
  --mobile-link-color: #ffffff;
  --mobile-link-hover: #ffffff;
  --mobile-link-active: #ffffff;

  /* 移动端遮罩层 */
  --mobile-overlay-bg: rgba(0, 0, 0, 0.7);
  --mobile-modal-overlay: rgba(0, 0, 0, 0.65);

  /* 移动端滚动条 */
  --mobile-scrollbar-track: #1f1f1f;
  --mobile-scrollbar-thumb: #434343;
  --mobile-scrollbar-thumb-hover: #595959;
}

/* 移动端主体样式 */
.is-mobile:root[data-theme="dark"] body {
  background-color: var(--mobile-background-color);
  color: var(--mobile-text-primary);
}

/* 移动端导航栏样式 */
.is-mobile:root[data-theme="dark"] .mobile-navigation {
  background-color: var(--mobile-navbar-bg);
  border-bottom: 1px solid var(--mobile-navbar-border);
  box-shadow: var(--mobile-navbar-shadow);
  color: var(--mobile-navbar-text);
}

.is-mobile:root[data-theme="dark"] .mobile-nav-center {
  color: var(--mobile-text-primary);
}

.is-mobile:root[data-theme="dark"] .mobile-title {
  color: var(--mobile-text-primary);
}

/* 移动端侧边栏样式 - 强制覆盖 */
[data-theme="dark"] .mobile-sidebar {
  background: #141414 !important;
  background-color: #141414 !important;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3) !important;
  color: #ffffff !important;
}

:root[data-theme="dark"] .mobile-sidebar {
  background: #141414 !important;
  background-color: #141414 !important;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3) !important;
  color: #ffffff !important;
}

.is-mobile[data-theme="dark"] .mobile-sidebar,
.is-mobile:root[data-theme="dark"] .mobile-sidebar {
  background: #141414 !important;
  background-color: #141414 !important;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3) !important;
  color: #ffffff !important;
}

/* 移动端汉堡菜单项样式 - 强制覆盖 */
[data-theme="dark"] .mobile-sidebar .nav-item,
:root[data-theme="dark"] .mobile-sidebar .nav-item,
.is-mobile[data-theme="dark"] .mobile-sidebar .nav-item,
.is-mobile:root[data-theme="dark"] .mobile-sidebar .nav-item {
  border-bottom: 1px solid #303030 !important;
  background: transparent !important;
}

[data-theme="dark"] .mobile-sidebar .nav-link,
:root[data-theme="dark"] .mobile-sidebar .nav-link,
.is-mobile[data-theme="dark"] .mobile-sidebar .nav-link,
.is-mobile:root[data-theme="dark"] .mobile-sidebar .nav-link {
  color: #ffffff !important;
  background: transparent !important;
}

[data-theme="dark"] .mobile-sidebar .nav-link:hover,
:root[data-theme="dark"] .mobile-sidebar .nav-link:hover,
.is-mobile[data-theme="dark"] .mobile-sidebar .nav-link:hover,
.is-mobile:root[data-theme="dark"] .mobile-sidebar .nav-link:hover {
  background: #303030 !important;
  color: #ffffff !important;
}

/* 移动端下拉菜单样式 - 这是真正的汉堡菜单 */
[data-theme="dark"] .mobile-dropdown-menu,
:root[data-theme="dark"] .mobile-dropdown-menu,
.is-mobile[data-theme="dark"] .mobile-dropdown-menu,
.is-mobile:root[data-theme="dark"] .mobile-dropdown-menu {
  background: #141414 !important;
  border-bottom: 1px solid #303030 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .mobile-menu-content,
:root[data-theme="dark"] .mobile-menu-content,
.is-mobile[data-theme="dark"] .mobile-menu-content,
.is-mobile:root[data-theme="dark"] .mobile-menu-content {
  background: #141414 !important;
  color: #ffffff !important;
}

/* 移动端菜单项样式 */
[data-theme="dark"] .mobile-menu-item,
:root[data-theme="dark"] .mobile-menu-item,
.is-mobile[data-theme="dark"] .mobile-menu-item,
.is-mobile:root[data-theme="dark"] .mobile-menu-item {
  background: transparent !important;
  border-bottom: 1px solid #303030 !important;
}

[data-theme="dark"] .mobile-menu-item a,
:root[data-theme="dark"] .mobile-menu-item a,
.is-mobile[data-theme="dark"] .mobile-menu-item a,
.is-mobile:root[data-theme="dark"] .mobile-menu-item a {
  color: #ffffff !important;
  background: transparent !important;
}

[data-theme="dark"] .mobile-menu-item a:hover,
:root[data-theme="dark"] .mobile-menu-item a:hover,
.is-mobile[data-theme="dark"] .mobile-menu-item a:hover,
.is-mobile:root[data-theme="dark"] .mobile-menu-item a:hover {
  background: #303030 !important;
  color: #ffffff !important;
}

/* 移动端菜单分隔线 */
[data-theme="dark"] .mobile-menu-divider,
:root[data-theme="dark"] .mobile-menu-divider,
.is-mobile[data-theme="dark"] .mobile-menu-divider,
.is-mobile:root[data-theme="dark"] .mobile-menu-divider {
  border-color: #303030 !important;
  background: #303030 !important;
}

/* 移动端卡片样式 */
.is-mobile:root[data-theme="dark"] .prompt-card,
.is-mobile:root[data-theme="dark"] .card {
  background-color: var(--mobile-card-bg);
  border: 1px solid var(--mobile-card-border);
  box-shadow: var(--mobile-card-shadow);
}

.is-mobile:root[data-theme="dark"] .prompt-card:hover,
.is-mobile:root[data-theme="dark"] .card:hover {
  box-shadow: var(--mobile-card-hover-shadow);
  border-color: var(--mobile-primary-color);
}

/* 移动端按钮样式 */
.is-mobile:root[data-theme="dark"] .btn-primary {
  background-color: var(--mobile-button-bg);
  border-color: var(--mobile-button-bg);
  color: var(--mobile-button-text);
}

.is-mobile:root[data-theme="dark"] .btn-primary:hover {
  background-color: var(--mobile-button-hover-bg);
  border-color: var(--mobile-button-hover-bg);
}

.is-mobile:root[data-theme="dark"] .btn-secondary {
  background-color: var(--mobile-button-secondary-bg);
  border-color: var(--mobile-border-secondary);
  color: var(--mobile-button-secondary-text);
}

.is-mobile:root[data-theme="dark"] .btn-secondary:hover {
  background-color: var(--mobile-button-secondary-hover-bg);
  border-color: var(--mobile-border-secondary);
}

/* 移动端表单样式 */
.is-mobile:root[data-theme="dark"] .form-control,
.is-mobile:root[data-theme="dark"] .mobile-search-input,
.is-mobile:root[data-theme="dark"] .search-input {
  background-color: var(--mobile-input-bg);
  border-color: var(--mobile-input-border);
  color: var(--mobile-input-text);
}

.is-mobile:root[data-theme="dark"] .form-control:focus,
.is-mobile:root[data-theme="dark"] .mobile-search-input:focus,
.is-mobile:root[data-theme="dark"] .search-input:focus {
  border-color: var(--mobile-input-focus-border);
  box-shadow: 0 0 0 0.2rem rgba(23, 125, 220, 0.25);
  background-color: var(--mobile-input-bg);
}

.is-mobile:root[data-theme="dark"] .form-control::placeholder,
.is-mobile:root[data-theme="dark"] .mobile-search-input::placeholder,
.is-mobile:root[data-theme="dark"] .search-input::placeholder {
  color: var(--mobile-input-placeholder);
}

/* 移动端触摸反馈 */
.is-mobile:root[data-theme="dark"] .mobile-theme-toggle:hover,
.is-mobile:root[data-theme="dark"] .mobile-search-icon:hover,
.is-mobile:root[data-theme="dark"] .hamburger-menu:hover {
  background-color: var(--mobile-touch-feedback);
}

.is-mobile:root[data-theme="dark"] .mobile-theme-toggle:active,
.is-mobile:root[data-theme="dark"] .mobile-search-icon:active,
.is-mobile:root[data-theme="dark"] .hamburger-menu:active {
  background-color: var(--mobile-touch-active);
}

/* 移动端链接样式 */
.is-mobile:root[data-theme="dark"] a {
  color: var(--mobile-link-color);
}

.is-mobile:root[data-theme="dark"] a:hover {
  color: var(--mobile-link-hover);
}

/* 移动端遮罩层样式 */
.is-mobile:root[data-theme="dark"] .mobile-overlay {
  background-color: var(--mobile-overlay-bg);
}

.is-mobile:root[data-theme="dark"] .modal-backdrop {
  background-color: var(--mobile-modal-overlay);
}

/* 移动端状态提示样式 */
.is-mobile:root[data-theme="dark"] .alert-success {
  background-color: var(--mobile-success-bg);
  color: var(--mobile-success-color);
}

.is-mobile:root[data-theme="dark"] .alert-warning {
  background-color: var(--mobile-warning-bg);
  color: var(--mobile-warning-color);
}

.is-mobile:root[data-theme="dark"] .alert-danger {
  background-color: var(--mobile-error-bg);
  color: var(--mobile-error-color);
}

.is-mobile:root[data-theme="dark"] .alert-info {
  background-color: var(--mobile-info-bg);
  color: var(--mobile-info-color);
}

/* 移动端滚动条样式 */
.is-mobile:root[data-theme="dark"] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.is-mobile:root[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--mobile-scrollbar-track);
}

.is-mobile:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--mobile-scrollbar-thumb);
  border-radius: 3px;
}

.is-mobile:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--mobile-scrollbar-thumb-hover);
}

/* 移动端主题切换动画 */
.is-mobile:root[data-theme="dark"] * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* 移动端汉堡菜单线条 */
.is-mobile:root[data-theme="dark"] .hamburger-line {
  background-color: var(--mobile-text-primary);
}

.is-mobile:root[data-theme="dark"] .hamburger-menu:hover .hamburger-line {
  background-color: var(--mobile-primary-color);
}

/* 移动端切换分类显示按钮样式 - 强制覆盖 */
[data-theme="dark"] .sidebar-toggle-btn,
:root[data-theme="dark"] .sidebar-toggle-btn,
.is-mobile[data-theme="dark"] .sidebar-toggle-btn,
.is-mobile:root[data-theme="dark"] .sidebar-toggle-btn {
  background: #1f1f1f !important;
  border-color: #303030 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .sidebar-toggle-btn:hover,
:root[data-theme="dark"] .sidebar-toggle-btn:hover,
.is-mobile[data-theme="dark"] .sidebar-toggle-btn:hover,
.is-mobile:root[data-theme="dark"] .sidebar-toggle-btn:hover {
  background: #303030 !important;
  border-color: #177ddc !important;
  color: #ffffff !important;
}

[data-theme="dark"] .sidebar-toggle-btn:active,
:root[data-theme="dark"] .sidebar-toggle-btn:active,
.is-mobile[data-theme="dark"] .sidebar-toggle-btn:active,
.is-mobile:root[data-theme="dark"] .sidebar-toggle-btn:active {
  background: #177ddc !important;
  border-color: #177ddc !important;
  color: #ffffff !important;
}

[data-theme="dark"] .toggle-text,
:root[data-theme="dark"] .toggle-text,
.is-mobile[data-theme="dark"] .toggle-text,
.is-mobile:root[data-theme="dark"] .toggle-text {
  color: #ffffff !important;
}

[data-theme="dark"] .toggle-icon,
:root[data-theme="dark"] .toggle-icon,
.is-mobile[data-theme="dark"] .toggle-icon,
.is-mobile:root[data-theme="dark"] .toggle-icon {
  color: #ffffff !important;
}

/* 移动端分类导航样式 */
.is-mobile:root[data-theme="dark"] .nav-list {
  background: var(--mobile-surface-color);
  border: 1px solid var(--mobile-border-color);
}

.is-mobile:root[data-theme="dark"] .nav-item {
  border-bottom: 1px solid var(--mobile-border-color);
}

.is-mobile:root[data-theme="dark"] .nav-link {
  color: var(--mobile-text-primary);
  background: transparent;
}

.is-mobile:root[data-theme="dark"] .nav-link:hover {
  background: var(--mobile-border-secondary);
  color: var(--mobile-text-primary);
}

.is-mobile:root[data-theme="dark"] .nav-link.active {
  background: var(--mobile-primary-color);
  color: #ffffff;
}

.is-mobile:root[data-theme="dark"] .category-name {
  color: var(--mobile-text-primary);
}

.is-mobile:root[data-theme="dark"] .nav-count {
  color: var(--mobile-text-secondary);
  background: var(--mobile-border-color);
}

/* 移动端特殊元素样式 */
.is-mobile:root[data-theme="dark"] .text-muted {
  color: var(--mobile-text-secondary) !important;
}

.is-mobile:root[data-theme="dark"] .bg-light {
  background-color: var(--mobile-surface-color) !important;
}

.is-mobile:root[data-theme="dark"] .border {
  border-color: var(--mobile-border-color) !important;
}

/* 移动端用户菜单暗色主题样式 */
[data-theme="dark"] .mobile-user-header,
:root[data-theme="dark"] .mobile-user-header,
.is-mobile[data-theme="dark"] .mobile-user-header,
.is-mobile:root[data-theme="dark"] .mobile-user-header {
  background: #1f1f1f !important;
  border-color: #177ddc !important;
}

[data-theme="dark"] .user-name,
:root[data-theme="dark"] .user-name,
.is-mobile[data-theme="dark"] .user-name,
.is-mobile:root[data-theme="dark"] .user-name {
  color: #ffffff !important;
}

[data-theme="dark"] .user-email,
:root[data-theme="dark"] .user-email,
.is-mobile[data-theme="dark"] .user-email,
.is-mobile:root[data-theme="dark"] .user-email {
  color: #8c8c8c !important;
}

[data-theme="dark"] .user-avatar-img,
:root[data-theme="dark"] .user-avatar-img,
.is-mobile[data-theme="dark"] .user-avatar-img,
.is-mobile:root[data-theme="dark"] .user-avatar-img {
  border-color: #303030 !important;
}

[data-theme="dark"] .logout-link,
:root[data-theme="dark"] .logout-link,
.is-mobile[data-theme="dark"] .logout-link,
.is-mobile:root[data-theme="dark"] .logout-link {
  color: #ff7875 !important;
  border-color: #ff7875 !important;
}

[data-theme="dark"] .logout-link:hover,
:root[data-theme="dark"] .logout-link:hover,
.is-mobile[data-theme="dark"] .logout-link:hover,
.is-mobile:root[data-theme="dark"] .logout-link:hover {
  background: #2a1215 !important;
  border-color: #ff7875 !important;
  color: #ff7875 !important;
}