/* 全局夜间模式样式 */

/* 夜间模式CSS变量 */
:root {
  /* 夜间模式颜色变量 */
  --dark-bg-primary: #1a1a1a;
  --dark-bg-secondary: #2d2d2d;
  --dark-bg-tertiary: #3a3a3a;
  --dark-bg-card: #2d2d2d;
  --dark-bg-overlay: rgba(0, 0, 0, 0.8);
  
  --dark-text-primary: #ffffff;
  --dark-text-secondary: #e2e8f0;
  --dark-text-muted: #a0aec0;
  --dark-text-light: #718096;
  
  --dark-border-light: #4a5568;
  --dark-border-medium: #2d3748;
  --dark-border-dark: #1a202c;
  
  --dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  --dark-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  --dark-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.2);
  --dark-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.3), 0 10px 10px rgba(0, 0, 0, 0.2);
  
  /* KPHyper奶油风格夜间模式变量 */
  --dark-cream-bg: #1f1f23;
  --dark-cream-surface: #2a2a2e;
  --dark-cream-white: #36363a;
  --dark-cream-light: #3e3e42;
  --dark-cream-dark: #1a1a1d;
  --dark-cream-darker: #131316;
  
  /* 奶油风夜间强调色 */
  --dark-cream-primary: #2f3349;
  --dark-cream-primary-dark: #252638;
  --dark-cream-success: #1f3a1f;
  --dark-cream-success-dark: #193319;
  --dark-cream-warning: #3d3517;
  --dark-cream-warning-dark: #342e13;
  --dark-cream-danger: #3d1f1f;
  --dark-cream-danger-dark: #331919;
  --dark-cream-info: #1f2f3d;
  --dark-cream-info-dark: #192533;
  
  /* 奶油风夜间阴影系统 */
  --dark-cream-shadow-light: #404046;
  --dark-cream-shadow-dark: #0f0f11;
  
  /* 奶油风夜间外凸效果 */
  --dark-cream-shadow-raised: 
    9px 9px 16px var(--dark-cream-shadow-dark),
    -9px -9px 16px var(--dark-cream-shadow-light);
  
  /* 奶油风夜间内凹效果 */
  --dark-cream-shadow-inset: 
    inset 6px 6px 12px var(--dark-cream-shadow-dark),
    inset -6px -6px 12px var(--dark-cream-shadow-light);
    
  /* 奶油风夜间轻微凸起 */
  --dark-cream-shadow-soft: 
    6px 6px 12px var(--dark-cream-shadow-dark),
    -6px -6px 12px var(--dark-cream-shadow-light);
    
  /* 奶油风夜间悬浮效果 */
  --dark-cream-shadow-hover: 
    12px 12px 24px var(--dark-cream-shadow-dark),
    -12px -12px 24px var(--dark-cream-shadow-light);
    
  /* 奶油风夜间微妙效果 */
  --dark-cream-shadow-subtle: 
    3px 3px 6px var(--dark-cream-shadow-dark),
    -3px -3px 6px var(--dark-cream-shadow-light);
}

/* 夜间模式基础样式 */
[data-theme="dark"] {
  background-color: var(--dark-bg-primary);
  color: var(--dark-text-primary);
}

[data-theme="dark"] body {
  background-color: var(--dark-bg-primary);
  color: var(--dark-text-primary);
}

/* 导航栏夜间模式 */
[data-theme="dark"] .header-navbar {
  background-color: var(--dark-bg-secondary);
  border-bottom: 1px solid var(--dark-border-medium);
  box-shadow: var(--dark-shadow-md);
}

[data-theme="dark"] .topnav-logo .logo-title {
  color: var(--dark-text-primary);
}

[data-theme="dark"] .search-container input {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border-light);
  color: var(--dark-text-primary);
}

[data-theme="dark"] .search-container input::placeholder {
  color: var(--dark-text-muted);
}

[data-theme="dark"] .search-container i {
  color: var(--dark-text-muted);
}

/* 按钮夜间模式 */
[data-theme="dark"] .btn-modern {
  border-color: var(--dark-border-light);
}

[data-theme="dark"] .btn-modern-primary {
  background: var(--primary-gradient);
  color: var(--dark-text-primary);
  border: none;
}

[data-theme="dark"] .btn-modern-ghost {
  background-color: transparent;
  color: var(--dark-text-secondary);
  border-color: var(--dark-border-light);
}

[data-theme="dark"] .btn-modern-ghost:hover {
  background-color: var(--dark-bg-tertiary);
  color: var(--dark-text-primary);
}

/* 下拉菜单夜间模式 */
[data-theme="dark"] .dropdown-menu {
  background-color: var(--dark-bg-secondary);
  border-color: var(--dark-border-medium);
  box-shadow: var(--dark-shadow-lg);
}

[data-theme="dark"] .dropdown-item {
  color: var(--dark-text-secondary);
}

[data-theme="dark"] .dropdown-item:hover {
  background-color: var(--dark-bg-tertiary);
  color: var(--dark-text-primary);
}

[data-theme="dark"] .dropdown-divider {
  border-color: var(--dark-border-medium);
}

/* 卡片夜间模式 */
[data-theme="dark"] .card,
[data-theme="dark"] .quick-access-card-compact,
[data-theme="dark"] .buy-product {
  background-color: var(--dark-bg-card);
  border-color: var(--dark-border-medium);
  box-shadow: var(--dark-shadow-md);
}

[data-theme="dark"] .card-title,
[data-theme="dark"] .card-title-compact {
  color: var(--dark-text-primary);
}

[data-theme="dark"] .card-text {
  color: var(--dark-text-secondary);
}

/* 表单夜间模式 */
[data-theme="dark"] .form-control {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border-light);
  color: var(--dark-text-primary);
}

[data-theme="dark"] .form-control:focus {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--primary-color);
  color: var(--dark-text-primary);
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

[data-theme="dark"] .form-control::placeholder {
  color: var(--dark-text-muted);
}

/* 表格夜间模式 */
[data-theme="dark"] .table {
  color: var(--dark-text-primary);
}

[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
  border-color: var(--dark-border-medium);
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--dark-bg-tertiary);
}

/* 页脚夜间模式 */
[data-theme="dark"] footer {
  background-color: var(--dark-bg-secondary);
  border-top: 1px solid var(--dark-border-medium);
}

[data-theme="dark"] footer p,
[data-theme="dark"] footer a {
  color: var(--dark-text-secondary);
}

[data-theme="dark"] footer a:hover {
  color: var(--dark-text-primary);
}

/* 广告区域夜间模式 */
[data-theme="dark"] .advertisement-section > a > div {
  background: var(--dark-bg-card) !important;
  box-shadow: var(--dark-shadow-md) !important;
}

[data-theme="dark"] .advertisement-section h3 {
  color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .advertisement-section p {
  color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .advertisement-section span {
  background: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
  box-shadow: var(--dark-shadow-sm) !important;
}

/* 商品展示区域夜间模式 */
[data-theme="dark"] .products-section {
  background-color: var(--dark-bg-primary);
}

[data-theme="dark"] .product-card {
  background-color: var(--dark-bg-card);
  border-color: var(--dark-border-medium);
  box-shadow: var(--dark-shadow-md);
}

[data-theme="dark"] .product-card:hover {
  box-shadow: var(--dark-shadow-lg);
}

/* 模态框夜间模式 */
[data-theme="dark"] .modal-content {
  background-color: var(--dark-bg-secondary);
  border-color: var(--dark-border-medium);
}

[data-theme="dark"] .modal-header {
  border-bottom-color: var(--dark-border-medium);
}

[data-theme="dark"] .modal-footer {
  border-top-color: var(--dark-border-medium);
}

[data-theme="dark"] .modal-title {
  color: var(--dark-text-primary);
}

/* 徽章夜间模式 */
[data-theme="dark"] .badge-modern-success {
  background-color: var(--success-color);
  color: var(--dark-text-primary);
}

/* 快速访问区域夜间模式 */
[data-theme="dark"] .quick-access-section-compact {
  background-color: var(--dark-bg-primary);
}

[data-theme="dark"] .card-icon-compact {
  background-color: var(--dark-bg-tertiary);
  box-shadow: var(--dark-shadow-sm);
}

[data-theme="dark"] .card-icon-compact i {
  color: var(--dark-text-primary);
}

/* 主题切换按钮样式 */
.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary-gradient);
  border: none;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal);
  color: white;
  font-size: 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-xl);
}

.theme-toggle:active {
  transform: scale(0.95);
}

[data-theme="dark"] .theme-toggle {
  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
  box-shadow: var(--dark-shadow-lg);
}

[data-theme="dark"] .theme-toggle:hover {
  box-shadow: var(--dark-shadow-xl);
}

/* 当存在导航栏时的样式调整 */
.header-navbar + * .theme-toggle,
.navbar + * .theme-toggle {
  top: 80px;
}

/* 与kphyper导航栏的协调样式 */
.header-navbar ~ .theme-toggle {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .header-navbar ~ .theme-toggle {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* KPHyper奶油风格夜间模式特殊适配 */

/* 重写奶油风格变量为夜间模式 */
[data-theme="dark"] {
  --cream-bg: var(--dark-cream-bg);
  --cream-surface: var(--dark-cream-surface);
  --cream-white: var(--dark-cream-white);
  --cream-light: var(--dark-cream-light);
  --cream-dark: var(--dark-cream-dark);
  --cream-darker: var(--dark-cream-darker);
  
  --cream-primary: var(--dark-cream-primary);
  --cream-primary-dark: var(--dark-cream-primary-dark);
  --cream-success: var(--dark-cream-success);
  --cream-success-dark: var(--dark-cream-success-dark);
  --cream-warning: var(--dark-cream-warning);
  --cream-warning-dark: var(--dark-cream-warning-dark);
  --cream-danger: var(--dark-cream-danger);
  --cream-danger-dark: var(--dark-cream-danger-dark);
  --cream-info: var(--dark-cream-info);
  --cream-info-dark: var(--dark-cream-info-dark);
  
  --cream-text-primary: var(--dark-text-primary);
  --cream-text-secondary: var(--dark-text-secondary);
  --cream-text-muted: var(--dark-text-muted);
  --cream-text-light: var(--dark-text-light);
  
  --cream-shadow-light: var(--dark-cream-shadow-light);
  --cream-shadow-dark: var(--dark-cream-shadow-dark);
  --cream-shadow-raised: var(--dark-cream-shadow-raised);
  --cream-shadow-inset: var(--dark-cream-shadow-inset);
  --cream-shadow-soft: var(--dark-cream-shadow-soft);
  --cream-shadow-hover: var(--dark-cream-shadow-hover);
  --cream-shadow-subtle: var(--dark-cream-shadow-subtle);
}

/* 奶油风格特殊元素夜间模式 */
[data-theme="dark"] .quick-access-section-compact {
  background-color: var(--dark-cream-bg);
}

[data-theme="dark"] .quick-access-card-compact {
  background: var(--dark-cream-surface);
  box-shadow: var(--dark-cream-shadow-raised);
}

[data-theme="dark"] .quick-access-card-compact:hover {
  box-shadow: var(--dark-cream-shadow-hover);
}

/* 奶油风卡片图标夜间模式 */
[data-theme="dark"] .card-icon-compact.success {
  background: var(--dark-cream-success);
}

[data-theme="dark"] .card-icon-compact.primary {
  background: var(--dark-cream-primary);
}

[data-theme="dark"] .card-icon-compact.warning {
  background: var(--dark-cream-warning);
}

[data-theme="dark"] .card-icon-compact.info {
  background: var(--dark-cream-info);
}

/* 奶油风按钮夜间模式 */
[data-theme="dark"] .btn-modern {
  background: var(--dark-cream-surface);
  color: var(--dark-text-primary);
  box-shadow: var(--dark-cream-shadow-soft);
  border: none;
}

[data-theme="dark"] .btn-modern:hover {
  box-shadow: var(--dark-cream-shadow-hover);
  background: var(--dark-cream-light);
}

/* 奶油风输入框夜间模式 */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--dark-cream-surface);
  color: var(--dark-text-primary);
  border: none;
  box-shadow: var(--dark-cream-shadow-inset);
}

[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type="password"]:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  box-shadow: var(--dark-cream-shadow-inset), 0 0 0 2px rgba(102, 126, 234, 0.3);
}

/* 特定页面元素夜间模式适配 */
[data-theme="dark"] .container {
  background-color: transparent;
}

[data-theme="dark"] .content {
  background-color: var(--dark-cream-bg);
}

[data-theme="dark"] .wrapper {
  background-color: var(--dark-cream-bg);
}

/* 商品购买页面夜间模式 */
[data-theme="dark"] .buy-grid {
  background-color: transparent;
}

[data-theme="dark"] .buy-shop {
  background: var(--dark-cream-surface);
  box-shadow: var(--dark-cream-shadow-raised);
}

/* 奶油风徽章夜间模式 */
[data-theme="dark"] .badge-outline-primary {
  background: var(--dark-cream-primary);
  color: var(--dark-text-primary);
  border-color: var(--dark-cream-primary-dark);
}

/* 加载动画夜间模式适配 */
[data-theme="dark"] .loading-spinner {
  border-color: var(--dark-text-muted) transparent var(--dark-text-muted) transparent;
}

/* 通知点夜间模式 */
[data-theme="dark"] .notification-dot-compact {
  background: linear-gradient(45deg, #ff6b6b, #ee5a24);
}

/* Buy页面特殊夜间模式适配 */
[data-theme="dark"] .buy-product {
  background-color: var(--dark-bg-card);
  border-color: var(--dark-border-medium);
}

[data-theme="dark"] .buy-shop {
  background-color: var(--dark-bg-card);
  border-color: var(--dark-border-medium);
}

[data-theme="dark"] .buy-title {
  color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .page-title {
  color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .badge-outline-primary {
  background: var(--dark-cream-primary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-cream-primary-dark) !important;
}

[data-theme="dark"] .badge-outline-danger {
  background: var(--dark-cream-danger) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-cream-danger-dark) !important;
}

[data-theme="dark"] .badge-outline-success {
  background: var(--dark-cream-success) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-cream-success-dark) !important;
}

[data-theme="dark"] .badge-outline-info {
  background: var(--dark-cream-info) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-cream-info-dark) !important;
}

[data-theme="dark"] .badge-outline-dark {
  background: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border-light) !important;
}

/* Buy页面支付方式按钮夜间模式 */
[data-theme="dark"] .pay-type {
  background: var(--dark-cream-surface) !important;
  color: var(--dark-text-secondary) !important;
  border-color: var(--dark-border-medium) !important;
  box-shadow: var(--dark-cream-shadow-soft) !important;
}

[data-theme="dark"] .pay-type.active {
  background: var(--dark-cream-primary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-cream-primary-dark) !important;
  box-shadow: var(--dark-cream-shadow-hover) !important;
}

[data-theme="dark"] .pay-type:hover {
  background: var(--dark-cream-light) !important;
  box-shadow: var(--dark-cream-shadow-hover) !important;
}

/* Buy页面表单元素夜间模式 */
[data-theme="dark"] .form-control {
  background-color: var(--dark-cream-surface) !important;
  border-color: var(--dark-border-light) !important;
  color: var(--dark-text-primary) !important;
  box-shadow: var(--dark-cream-shadow-inset) !important;
}

[data-theme="dark"] .form-control:focus {
  background-color: var(--dark-cream-surface) !important;
  border-color: var(--primary-color) !important;
  color: var(--dark-text-primary) !important;
  box-shadow: var(--dark-cream-shadow-inset), 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}

/* Buy页面价格显示夜间模式 */
[data-theme="dark"] .buy-price {
  color: #ff6b6b !important;
}

/* Buy页面警告框夜间模式 */
[data-theme="dark"] .alert-dark {
  background: var(--dark-cream-warning) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-cream-warning-dark) !important;
}

/* 订单查询页面夜间模式适配 */
[data-theme="dark"] .search-order-container {
  background-color: var(--dark-cream-bg);
}

[data-theme="dark"] .page-title {
  color: var(--dark-text-primary) !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .search-tips {
  background: var(--dark-cream-info);
  border-color: var(--dark-cream-info-dark);
}

[data-theme="dark"] .tips-icon {
  background: var(--dark-cream-info-dark);
  color: var(--dark-text-primary);
}

[data-theme="dark"] .tips-text {
  color: var(--dark-text-primary);
}

[data-theme="dark"] .search-card {
  background: var(--dark-cream-surface);
}

[data-theme="dark"] .nav-tabs-wrapper {
  background: var(--dark-cream-bg);
}

[data-theme="dark"] .nav-tabs.nav-bordered .nav-link {
  color: var(--dark-text-secondary);
}

[data-theme="dark"] .nav-tabs.nav-bordered .nav-link.active {
  color: var(--dark-text-primary);
  background: var(--dark-cream-primary);
}

[data-theme="dark"] .nav-tabs.nav-bordered .nav-link:hover {
  background: var(--dark-cream-light);
}

[data-theme="dark"] .form-group label {
  color: var(--dark-text-primary);
}

[data-theme="dark"] .input-group {
  background: var(--dark-cream-bg);
}

[data-theme="dark"] .input-group-text {
  color: var(--dark-text-secondary);
}

[data-theme="dark"] .form-control {
  color: var(--dark-text-primary);
}

[data-theme="dark"] .form-control::placeholder {
  color: var(--dark-text-muted);
}

[data-theme="dark"] .btn-search {
  background: var(--dark-cream-primary);
  color: var(--dark-text-primary);
}

[data-theme="dark"] .btn-reset {
  background: var(--dark-cream-bg);
  color: var(--dark-text-secondary);
}

[data-theme="dark"] .btn-reset:hover {
  background: var(--dark-cream-light);
}

[data-theme="dark"] .browser-search-info {
  background: var(--dark-cream-info);
  border-color: var(--dark-cream-info-dark);
}

[data-theme="dark"] .info-icon {
  background: var(--dark-cream-info-dark);
  color: var(--dark-text-primary);
}

[data-theme="dark"] .browser-search-info p {
  color: var(--dark-text-primary);
}

/* 响应式适配 */
@media (max-width: 768px) {
  .theme-toggle {
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}