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

:root[data-theme="light"] {
  /* 移动端基础色彩变量 */
  --mobile-primary-color: #1890ff;
  --mobile-primary-hover: #40a9ff;
  --mobile-primary-active: #096dd9;
  --mobile-background-color: #ffffff;
  --mobile-surface-color: #fafafa;
  --mobile-text-primary: #262626;
  --mobile-text-secondary: #8c8c8c;
  --mobile-text-disabled: #bfbfbf;
  --mobile-border-color: #f0f0f0;
  --mobile-border-secondary: #d9d9d9;
  --mobile-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  --mobile-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);

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

  /* 移动端侧边栏变量 */
  --mobile-sidebar-bg: #fafafa;
  --mobile-sidebar-border: #f0f0f0;
  --mobile-sidebar-text: #262626;
  --mobile-sidebar-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);

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

  /* 移动端按钮变量 */
  --mobile-button-bg: #1890ff;
  --mobile-button-text: #ffffff;
  --mobile-button-hover-bg: #40a9ff;
  --mobile-button-secondary-bg: #f5f5f5;
  --mobile-button-secondary-text: #262626;
  --mobile-button-secondary-hover-bg: #e6f7ff;

  /* 移动端表单变量 */
  --mobile-input-bg: #ffffff;
  --mobile-input-border: #d9d9d9;
  --mobile-input-focus-border: #1890ff;
  --mobile-input-text: #262626;
  --mobile-input-placeholder: #8c8c8c;

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

  /* 移动端状态颜色 */
  --mobile-success-color: #52c41a;
  --mobile-success-bg: #f6ffed;
  --mobile-warning-color: #faad14;
  --mobile-warning-bg: #fffbe6;
  --mobile-error-color: #ff4d4f;
  --mobile-error-bg: #fff2f0;
  --mobile-info-color: #1890ff;
  --mobile-info-bg: #e6f7ff;

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

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

  /* 移动端滚动条 */
  --mobile-scrollbar-track: #f1f1f1;
  --mobile-scrollbar-thumb: #c1c1c1;
  --mobile-scrollbar-thumb-hover: #a8a8a8;
}

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

/* 移动端导航栏样式 */
.is-mobile:root[data-theme="light"] .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="light"] .mobile-nav-center {
  color: var(--mobile-text-primary);
}

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

/* 移动端侧边栏样式 */
.is-mobile:root[data-theme="light"] .mobile-sidebar {
  background-color: var(--mobile-sidebar-bg);
  box-shadow: var(--mobile-sidebar-shadow);
  color: var(--mobile-sidebar-text);
}

/* 移动端卡片样式 */
.is-mobile:root[data-theme="light"] .prompt-card,
.is-mobile:root[data-theme="light"] .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="light"] .prompt-card:hover,
.is-mobile:root[data-theme="light"] .card:hover {
  box-shadow: var(--mobile-card-hover-shadow);
}

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

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

.is-mobile:root[data-theme="light"] .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="light"] .btn-secondary:hover {
  background-color: var(--mobile-button-secondary-hover-bg);
}

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

.is-mobile:root[data-theme="light"] .form-control:focus,
.is-mobile:root[data-theme="light"] .mobile-search-input:focus,
.is-mobile:root[data-theme="light"] .search-input:focus {
  border-color: var(--mobile-input-focus-border);
  box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.25);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 移动端主题切换动画 */
.is-mobile:root[data-theme="light"] * {
  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="light"] .hamburger-line {
  background-color: var(--mobile-text-primary);
}

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