/*
 * 南明离火 - 深海安全蓝主题 (Deep Ocean Security Blue Theme)
 * 经典科技设计，专业安全感与现代简约结合
 * 设计理念：经典科技风格 + 专业安全感
 * 版本: 4.0
 * UI设计师: 南明离火设计团队
 */

/* ========================================
   深海安全蓝主题 - 通过data属性激活
   ======================================== */
[data-theme="blue"] {
  /* 基础颜色变量覆盖 - 深海安全蓝配色 */
  --nmlh-bg-primary: #0A192F;              /* 深海蓝 - 专业深色 */
  --nmlh-bg-secondary: rgba(10, 25, 47, 0.95); /* 深海蓝半透明 */
  --nmlh-bg-tertiary: #1E3A5F;             /* 中等深海蓝 */

  /* 修复渐变背景上的文字颜色问题 */
  --nmlh-primary: #F8F9FA;                 /* 纯白 - 主要文字 */
  --nmlh-secondary: #00B4D8;               /* 科技蓝 - 强调色 */

  /* 主要文字颜色 - 深海蓝系 */
  --nmlh-text-primary: #F8F9FA;            /* 纯白 - 主要文字 */
  --nmlh-text-secondary: #E2E8F0;          /* 浅灰 - 次要文字 */
  --nmlh-text-muted: #94A3B8;              /* 中灰 - 辅助文字 */
  --nmlh-text-dark: #1E293B;               /* 深蓝灰 - 深色文字 */

  /* 强调色系统 - 科技蓝系 */
  --nmlh-text-gold: #00B4D8;               /* 科技蓝 - 主强调色 */
  --nmlh-text-gold-bright: #0EA5E9;        /* 明亮科技蓝 */
  --nmlh-text-accent: #0284C7;             /* 深科技蓝 */
  --nmlh-text-gold-dark: #0369A1;          /* 极深科技蓝 */
  --nmlh-text-danger: #EF4444;             /* 现代红色 */
  --nmlh-text-success: #10B981;            /* 现代绿色 */
  --nmlh-text-warning: #F59E0B;            /* 现代橙色 */
  --nmlh-text-info: #3B82F6;               /* 现代蓝色 */

  /* 白色背景上的文字颜色 */
  --nmlh-text-light-primary: #1E293B;      /* 深蓝灰主文字 */
  --nmlh-text-light-secondary: #475569;    /* 中蓝灰次文字 */
  --nmlh-text-light-muted: #64748B;        /* 浅蓝灰弱化文字 */
  --nmlh-text-light-accent: #0A192F;       /* 深海蓝强调 */

  /* 渐变背景 - 深海质感 */
  --nmlh-gradient-primary: linear-gradient(135deg, #0A192F 0%, #1E3A5F 50%, #0EA5E9 100%);
  --nmlh-gradient-secondary: linear-gradient(45deg, #00B4D8 0%, #0A192F 100%);
  --nmlh-gradient-accent: linear-gradient(90deg, #00B4D8 0%, #0EA5E9 100%);
  --nmlh-gradient-gold: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);

  /* 边框颜色 - 科技蓝系 */
  --nmlh-border-primary: rgba(0, 180, 216, 0.3);
  --nmlh-border-secondary: rgba(255, 215, 0, 0.2);
  --nmlh-border-light: rgba(248, 249, 250, 0.1);
  --nmlh-border-dark: rgba(10, 25, 47, 0.4);
  --nmlh-border-accent: rgba(0, 180, 216, 0.5);

  /* 阴影系统 - 深海阴影 */
  --nmlh-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --nmlh-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
  --nmlh-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
  --nmlh-shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.25);
  --nmlh-shadow-accent: 0 4px 16px rgba(0, 180, 216, 0.2);

  /* 卡片和表格背景 - 深海主题 */
  --nmlh-bg-card: rgba(255, 255, 255, 0.97);
  --nmlh-bg-table: #F8F9FA;
  --nmlh-bg-overlay: rgba(10, 25, 47, 0.75);
}

/* ========================================
   深海安全蓝主题特殊效果
   ======================================== */

/* 页面主体背景 - 深海安全蓝主题 */
[data-theme="blue"] body {
  background: linear-gradient(135deg, #0A192F 0%, #1E3A5F 50%, #0EA5E9 100%) !important;  /* 深海蓝渐变背景 */
  background-attachment: fixed;
  color: #F8F9FA !important;       /* 纯白文字，确保高对比度 */
}

/* 容器背景透明，保持渐变效果 */
[data-theme="blue"] .nmlh-container,
[data-theme="blue"] .container-fluid {
  background: transparent !important;
}

/* 导航栏 - 深海安全蓝主题 */
[data-theme="blue"] .nmlh-navbar {
  background: linear-gradient(135deg, #0A192F 0%, #1E3A5F 100%) !important;  /* 深海蓝渐变 */
  border-bottom: 1px solid rgba(0, 180, 216, 0.3);  /* 科技蓝边框 */
  box-shadow: 0 4px 12px rgba(10, 25, 47, 0.2);     /* 深海阴影 */
  color: #FFFFFF !important;  /* 纯白文字 */
}

/* 首页卡片 - 深海安全蓝主题 */
[data-theme="blue"] .home-main-card {
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 180, 216, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 180, 216, 0.25);
  color: #1E293B !important;
}

[data-theme="blue"] .home-main-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 15px -3px rgba(30, 41, 59, 0.1),
    0 4px 6px -2px rgba(30, 41, 59, 0.05),
    0 12px 30px rgba(0, 180, 216, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 180, 216, 0.4);
}

/* MD5搜索组件 - 深海安全蓝主题 */
[data-theme="blue"] .md5-search-card {
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 180, 216, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 180, 216, 0.25);
  color: #1E293B;
}

[data-theme="blue"] .md5-search-card:hover {
  box-shadow:
    0 10px 15px -3px rgba(30, 41, 59, 0.1),
    0 4px 6px -2px rgba(30, 41, 59, 0.05),
    0 12px 32px rgba(0, 180, 216, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 180, 216, 0.4);
}

/* MD5搜索图标 - 深海安全蓝主题 */
[data-theme="blue"] .md5-search-icon {
  background: linear-gradient(135deg, #00B4D8 0%, #0284C7 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

[data-theme="blue"] .md5-search-icon:hover {
  background: linear-gradient(135deg, #0284C7 0%, #00B4D8 100%);
}

/* MD5输入框 - 深海安全蓝主题 */
[data-theme="blue"] .md5-input {
  background: #FFFFFF;
  border: 1px solid rgba(0, 180, 216, 0.3);
  color: #1E293B;
}

[data-theme="blue"] .md5-input:focus {
  border-color: rgba(0, 180, 216, 0.5);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.1),
    0 0 0 3px rgba(0, 180, 216, 0.1);
}

[data-theme="blue"] .md5-input::placeholder {
  color: rgba(30, 41, 59, 0.6);
}

/* MD5搜索按钮 - 深海安全蓝主题 */
[data-theme="blue"] .md5-search-btn {
  background: linear-gradient(135deg, #00B4D8 0%, #0A192F 100%);
  color: #fff;
  box-shadow: 0 2px 4px rgba(10, 25, 47, 0.1);
}

[data-theme="blue"] .md5-search-btn:hover {
  background: linear-gradient(135deg, #0A192F 0%, #00B4D8 100%);
  box-shadow: 0 4px 8px rgba(0, 180, 216, 0.3);
}

/* 主标题 - 深海科技风格 */
[data-theme="blue"] .main-title {
  color: var(--nmlh-text-gold) !important;  /* 科技蓝 */
  text-shadow: 0 2px 8px rgba(0, 180, 216, 0.3) !important;  /* 科技蓝光晕 */
  font-weight: 700;
  transition: all 0.3s ease;
}

[data-theme="blue"] .main-title:hover {
  color: var(--nmlh-text-gold-bright) !important;  /* 明亮科技蓝 */
  text-shadow: 0 4px 12px rgba(14, 165, 233, 0.4) !important;  /* 增强光晕 */
  transform: translateY(-1px);
}

/* 免责声明 - 深海安全蓝主题 */
[data-theme="blue"] .disclaimer {
  background: rgba(0, 180, 216, 0.05);
  border-left-color: rgba(0, 180, 216, 0.3);
  color: #475569;
}

/* ========================================
   首页页脚专用样式优化 - 深海安全蓝主题 (UI设计师优化版)
   ======================================== */
html[data-theme="blue"] footer,
body[data-theme="blue"] footer,
[data-theme="blue"] footer {
  /* 深海科技渐变 - 延续页面主题，增强科技感 */
  background: linear-gradient(135deg,
    rgba(10, 25, 47, 0.96) 0%,     /* 深海蓝基调 */
    rgba(30, 58, 95, 0.94) 40%,    /* 中层海蓝过渡 */
    rgba(14, 165, 233, 0.12) 70%,  /* 科技蓝点缀 */
    rgba(10, 25, 47, 0.96) 100%    /* 回归深海，形成呼应 */
  ) !important;

  /* 科技蓝边框 - 体现深海安全蓝的专业感 */
  border-top: 2px solid transparent !important;
  border-image: linear-gradient(90deg,
    rgba(0, 180, 216, 0.5) 0%,     /* 科技蓝起点 */
    rgba(14, 165, 233, 0.8) 50%,   /* 亮科技蓝中点 */
    rgba(0, 180, 216, 0.5) 100%    /* 科技蓝终点 */
  ) 1 !important;

  /* 专业科技模糊效果 */
  backdrop-filter: blur(20px) saturate(1.1) !important;

  /* 深海阴影增强层次感 */
  box-shadow:
    0 -4px 20px rgba(10, 25, 47, 0.4),
    inset 0 1px 0 rgba(0, 180, 216, 0.1) !important;

  color: #FFFFFF !important;
}

/* 页脚文字样式 - 深海安全蓝主题优化 */
html[data-theme="blue"] footer .nmlh-text-muted,
body[data-theme="blue"] footer .nmlh-text-muted,
[data-theme="blue"] footer .nmlh-text-muted {
  color: #F8F9FA !important;  /* 纯白 - 与主题一致，确保高对比度 */
  font-weight: 500 !important;
  text-shadow: 0 1px 3px rgba(10, 25, 47, 0.6) !important;  /* 深海阴影增强可读性 */
}

/* 页脚链接样式 - 深海科技质感 */
html[data-theme="blue"] footer .nmlh-text-gold,
body[data-theme="blue"] footer .nmlh-text-gold,
[data-theme="blue"] footer .nmlh-text-gold {
  color: #00B4D8 !important;  /* 科技蓝 - 体现深海安全蓝 */
  font-weight: 600 !important;
  text-shadow: 0 0 8px rgba(0, 180, 216, 0.4) !important;  /* 科技蓝光晕效果 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 页脚链接悬停效果 - 专业科技交互 */
html[data-theme="blue"] footer .nmlh-text-gold:hover,
body[data-theme="blue"] footer .nmlh-text-gold:hover,
[data-theme="blue"] footer .nmlh-text-gold:hover {
  color: #0EA5E9 !important;  /* 更亮的科技蓝 */
  background: linear-gradient(90deg,
    rgba(0, 180, 216, 0.12) 0%,
    rgba(0, 180, 216, 0.22) 50%,
    rgba(0, 180, 216, 0.12) 100%
  ) !important;
  text-shadow: 0 0 12px rgba(14, 165, 233, 0.6) !important;  /* 增强科技蓝光晕 */
  transform: translateY(-1px) scale(1.02) !important;  /* 微妙缩放效果 */
  border-radius: 4px !important;
  padding: 2px 6px !important;
}

/* 表格样式 - 深海安全蓝主题 */
[data-theme="blue"] .table {
  background: #FFFFFF;
  color: #1E293B;
}

[data-theme="blue"] .table th {
  background: #F8FAFC;
  border-bottom: 2px solid rgba(0, 180, 216, 0.2);
  color: #1E293B;
}

[data-theme="blue"] .table td {
  border-bottom: 1px solid rgba(226, 232, 240, 0.5);
}

[data-theme="blue"] .table-striped tbody tr:nth-of-type(odd) {
  background: rgba(248, 250, 252, 0.5);
}

[data-theme="blue"] .table-hover tbody tr:hover {
  background: rgba(0, 180, 216, 0.05);
}

/* 按钮样式 - 深海安全蓝主题 */
[data-theme="blue"] .btn-primary {
  background: linear-gradient(135deg, #00B4D8 0%, #0284C7 100%);
  border-color: #00B4D8;
  color: #FFFFFF;
}

[data-theme="blue"] .btn-primary:hover {
  background: linear-gradient(135deg, #0284C7 0%, #00B4D8 100%);
  border-color: #0284C7;
}

[data-theme="blue"] .btn-secondary {
  background: #F8FAFC;
  border-color: rgba(0, 180, 216, 0.3);
  color: #1E293B;
}

[data-theme="blue"] .btn-secondary:hover {
  background: rgba(0, 180, 216, 0.05);
  border-color: rgba(0, 180, 216, 0.5);
}

/* 表单控件 - 深海安全蓝主题 */
[data-theme="blue"] .form-control {
  background: #FFFFFF;
  border: 1px solid rgba(0, 180, 216, 0.3);
  color: #1E293B;
}

[data-theme="blue"] .form-control:focus {
  border-color: #00B4D8;
  box-shadow: 0 0 0 0.2rem rgba(0, 180, 216, 0.25);
}

/* 警告框 - 深海安全蓝主题 */
[data-theme="blue"] .alert-info {
  background: rgba(0, 180, 216, 0.1);
  border-color: rgba(0, 180, 216, 0.3);
  color: #0284C7;
}

[data-theme="blue"] .alert-success {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
  color: #059669;
}

[data-theme="blue"] .alert-warning {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: #D97706;
}

[data-theme="blue"] .alert-danger {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #DC2626;
}

/* 徽章 - 深海安全蓝主题 */
[data-theme="blue"] .badge-primary {
  background: #00B4D8;
  color: #FFFFFF;
}

[data-theme="blue"] .badge-secondary {
  background: #64748B;
  color: #FFFFFF;
}

/* 进度条 - 深海安全蓝主题 */
[data-theme="blue"] .progress {
  background: #E2E8F0;
}

[data-theme="blue"] .progress-bar {
  background: linear-gradient(90deg, #00B4D8 0%, #0EA5E9 100%);
}

/* 分页 - 深海安全蓝主题 */
[data-theme="blue"] .pagination .page-link {
  background: #FFFFFF;
  border-color: rgba(0, 180, 216, 0.3);
  color: #00B4D8;
}

[data-theme="blue"] .pagination .page-link:hover {
  background: rgba(0, 180, 216, 0.05);
  border-color: #00B4D8;
}

[data-theme="blue"] .pagination .page-item.active .page-link {
  background: #00B4D8;
  border-color: #00B4D8;
  color: #FFFFFF;
}

/* 特殊表格样式 - 深海安全蓝主题 */
.nmlh-table-blue {
  background: var(--nmlh-bg-card) !important;
  color: var(--nmlh-text-primary) !important;
  border: 1px solid var(--nmlh-border-primary) !important;
}

.nmlh-table-blue th {
  background: var(--nmlh-bg-secondary) !important;
  color: var(--nmlh-text-primary) !important;
  border-bottom: 2px solid var(--nmlh-border-primary) !important;
}

.nmlh-table-blue td {
  color: var(--nmlh-text-secondary) !important;
  border-bottom: 1px solid var(--nmlh-border-light) !important;
}

.nmlh-table-blue tr:hover {
  background: rgba(0, 180, 216, 0.05) !important;
}

.nmlh-table-blue tr:hover td {
  color: var(--nmlh-text-light-accent) !important;
}

/* 文字颜色工具类 */
.nmlh-text-primary-blue { color: var(--nmlh-text-primary) !important; }
.nmlh-text-secondary-blue { color: var(--nmlh-text-secondary) !important; }
.nmlh-text-muted-blue { color: var(--nmlh-text-muted) !important; }
.nmlh-text-gold-blue { color: var(--nmlh-text-gold) !important; }
.nmlh-text-accent-blue { color: var(--nmlh-text-accent) !important; }

.nmlh-text-light-primary-blue { color: var(--nmlh-text-light-primary) !important; }
.nmlh-text-light-secondary-blue { color: var(--nmlh-text-light-secondary) !important; }
.nmlh-text-light-muted-blue { color: var(--nmlh-text-light-muted) !important; }
.nmlh-text-light-accent-blue { color: var(--nmlh-text-light-accent) !important; }

/* 背景颜色工具类 */
.nmlh-bg-primary-blue { background: var(--nmlh-bg-primary) !important; }
.nmlh-bg-secondary-blue { background: var(--nmlh-bg-secondary) !important; }
.nmlh-bg-card-blue { background: var(--nmlh-bg-card) !important; }

/* 特殊组件深海蓝主题 - 基于实际MD5搜索卡片优化 */
.nmlh-search-card-blue {
  background: var(--nmlh-bg-card) !important;
  border: 1px solid var(--nmlh-border-primary) !important;
  box-shadow: var(--nmlh-shadow-md) !important;
  color: var(--nmlh-text-primary) !important;
}

.nmlh-search-card-blue:hover {
  border-color: var(--nmlh-border-accent) !important;
  box-shadow: var(--nmlh-shadow-lg) !important;
}

/* 导航链接样式 */
[data-theme="blue"] .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="blue"] .navbar-nav .nav-link:hover {
  color: #FFFFFF !important;
  text-shadow: 0 0 8px rgba(0, 180, 216, 0.5);
}

[data-theme="blue"] .navbar-nav .nav-link.active {
  color: #00B4D8 !important;
  font-weight: 600;
}

/* 下拉菜单 */
[data-theme="blue"] .dropdown-menu {
  background: #FFFFFF;
  border: 1px solid rgba(0, 180, 216, 0.3);
  box-shadow: 0 8px 24px rgba(30, 41, 59, 0.15);
}

[data-theme="blue"] .dropdown-item {
  color: #1E293B;
}

[data-theme="blue"] .dropdown-item:hover {
  background: rgba(0, 180, 216, 0.05);
  color: #00B4D8;
}