/* ============================================================================
   证书登记系统 · 统一视觉规范（Theme）
   前台 index.php / verify.php 与后台 admin/* 共用，作为唯一的设计变量来源。
   引入方式：<link rel="stylesheet" href="/assets/css/theme.css">
   ========================================================================== */

:root {
  /* ---------- 品牌色 ---------- */
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --primary-light: #818cf8;
  --primary-soft: #a5b4fc;
  --primary-bg: #eef2ff;

  /* ---------- 语义色 ---------- */
  --success: #10b981;
  --success-dark: #059669;
  --success-bg: #ecfdf5;
  --warning: #f59e0b;
  --warning-bg: #fffbeb;
  --danger: #ef4444;
  --danger-bg: #fef2f2;
  --info: #0ea5e9;
  --info-bg: #f0f9ff;
  --accent: #f59e0b;

  /* ---------- 中性色 ---------- */
  --ink: #0f172a;
  --text: #1e293b;
  --text-2: #475569;
  --text-3: #64748b;
  --text-4: #94a3b8;
  --line: #e2e8f0;
  --line-soft: #f1f5f9;
  --bg: #f8fafc;
  --surface: #ffffff;

  /* 兼容旧变量名（前台历史上使用 Tailwind 风格灰阶） */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* ---------- 圆角 ---------- */
  --radius-lg: 16px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  /* ---------- 阴影 ---------- */
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.15);
  --card-shadow: var(--shadow);
  --card-shadow-hover: var(--shadow-md);

  /* ---------- 间距节奏 ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* ---------- 动效 ---------- */
  --transition: all 0.2s ease;

  /* ---------- 字体（各页面沿用自身 body 字体，此处供需要显式引用处使用） ---------- */
  --font: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, -apple-system, sans-serif;

  /* ---------- 后台框架 ---------- */
  --sidebar-bg: #1e1b4b;
  --sidebar-hover: #312e81;
  --sidebar-active-bg: #4338ca;
  --sidebar-text: #a5b4fc;
  --sidebar-width: 240px;
  --topbar-height: 60px;
}

/* ============================ 基础 ============================ */
*,
*::before,
*::after { box-sizing: border-box; }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 2px;
}

/* 滚动条（桌面端更精致） */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--text-4); }

/* ============================ 卡片 ============================ */
.card {
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  background: var(--surface);
  transition: var(--transition);
}
.card-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  padding: 14px 20px;
  border-radius: var(--radius) var(--radius) 0 0 !important;
}
.card-body { padding: 20px; }
.card-footer {
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
  padding: 12px 20px;
}

/* 可点击卡片（列表项、入口） */
.card-interactive { cursor: pointer; }
.card-interactive:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px);
}

/* ============================ 按钮 ============================ */
.btn {
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  padding: 7px 16px;
  transition: var(--transition);
}
.btn:active { transform: translateY(0) !important; }
.btn-sm { padding: 5px 12px; font-size: 0.8rem; border-radius: 6px; }
.btn-lg { padding: 11px 24px; font-size: 0.95rem; border-radius: var(--radius); }
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover,
.btn-primary:focus { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); transform: translateY(-1px); }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-success:hover { background: var(--success-dark); border-color: var(--success-dark); }
.btn-light { background: var(--line-soft); border-color: var(--line-soft); color: var(--text-2); }
.btn-light:hover { background: var(--line); border-color: var(--line); color: var(--text); }
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border-radius: var(--radius-sm);
}

/* ============================ 表单 ============================ */
.form-control,
.form-select {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  padding: 8px 12px;
  transition: var(--transition);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.form-control::placeholder { color: var(--text-4); }
.form-label { font-size: 0.85rem; font-weight: 600; color: var(--text-2); margin-bottom: 4px; }
.form-text { font-size: 0.78rem; color: var(--text-4); }
.input-group-text { border: 1.5px solid var(--line); background: var(--bg); color: var(--text-3); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-switch .form-check-input:focus { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }

/* ============================ 徽标 ============================ */
.badge {
  font-weight: 500;
  padding: 4px 10px;
  font-size: 0.78rem;
  border-radius: 6px;
}
.badge-soft-primary { background: var(--primary-bg); color: var(--primary-dark); }
.badge-soft-success { background: var(--success-bg); color: var(--success-dark); }
.badge-soft-warning { background: var(--warning-bg); color: #b45309; }
.badge-soft-danger { background: var(--danger-bg); color: #b91c1c; }
.badge-soft-info { background: var(--info-bg); color: #0369a1; }
.badge-soft-gray { background: var(--line-soft); color: var(--text-3); }

/* ============================ 表格 ============================ */
.table { font-size: 0.875rem; margin-bottom: 0; color: var(--text); }
.table > thead th {
  background: var(--bg);
  font-weight: 600;
  color: var(--text-2);
  border-bottom: 2px solid var(--line);
  padding: 11px 14px;
  white-space: nowrap;
  font-size: 0.82rem;
  letter-spacing: 0.3px;
}
.table > tbody > tr { transition: background 0.12s; }
.table > tbody > tr:hover { background: #f8faff; }
.table > tbody td {
  vertical-align: middle;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.table tbody tr.table-row-click { cursor: pointer; }
.table tbody tr.table-row-click:hover { background: var(--primary-bg); }

/* 表头吸顶（容器滚动时保持可见） */
.table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* 空状态 */
.table-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--text-4);
}
.table-empty i { font-size: 2.4rem; opacity: 0.5; display: block; margin-bottom: 10px; }

/* ============================ 弹窗 / 下拉 ============================ */
.modal-content { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.modal-header { border-bottom: 1px solid var(--line-soft); padding: 16px 20px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.modal-footer { border-top: 1px solid var(--line-soft); padding: 12px 20px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.modal-body { padding: 20px; }
.modal-title { font-size: 1.02rem; font-weight: 700; }
.dropdown-menu { border: none; border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 6px; }
.dropdown-item { border-radius: var(--radius-sm); padding: 8px 12px; font-size: 0.88rem; transition: var(--transition); }
.dropdown-item:hover { background: var(--primary-bg); }
.dropdown-item.text-danger:hover { background: var(--danger-bg); }

/* ============================ 分页 ============================ */
.pagination { margin: 0; gap: 2px; }
.page-link {
  border: none;
  padding: 6px 12px;
  border-radius: 6px !important;
  color: var(--text-2);
  font-size: 0.83rem;
}
.page-link:hover { background: var(--line); color: var(--text); }
.page-item.active .page-link { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3); }
.page-item.disabled .page-link { background: transparent; color: var(--text-4); }

/* ============================ 标签页 ============================ */
.nav-tabs { border-bottom: 1px solid var(--line); gap: 4px; }
.nav-tabs .nav-link {
  border: none;
  color: var(--text-3);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: var(--transition);
}
.nav-tabs .nav-link:hover { background: var(--line-soft); color: var(--text-2); }
.nav-tabs .nav-link.active { background: var(--surface); color: var(--primary); font-weight: 600; box-shadow: inset 0 -2px 0 var(--primary); }

/* ============================ 提示 ============================ */
.toast-container { position: fixed; top: 75px; right: 20px; z-index: 9999; }
.toast { border-radius: 10px !important; box-shadow: var(--shadow-md); margin-bottom: 8px; font-size: 0.88rem; }
.alert { border: none; border-radius: var(--radius); font-size: 0.9rem; }
.alert-info { background: var(--info-bg); color: #075985; }
.alert-success { background: var(--success-bg); color: #065f46; }
.alert-warning { background: var(--warning-bg); color: #92400e; }
.alert-danger { background: var(--danger-bg); color: #991b1b; }

/* ============================ 通用块 ============================ */
.page-header { margin-bottom: var(--space-5); }
.page-header h4 { font-weight: 700; color: var(--ink); font-size: 1.25rem; margin: 0; }
.section-title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 0.95rem; color: var(--ink);
  margin-bottom: var(--space-3);
}
.section-title i { color: var(--primary); }

.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-4);
}
.empty-state i { font-size: 2.6rem; opacity: 0.45; display: block; margin-bottom: 12px; }
.empty-state .empty-title { font-weight: 600; color: var(--text-2); margin-bottom: 4px; }
.empty-state .empty-desc { font-size: 0.85rem; }

.soft-panel {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}

.divider { height: 1px; background: var(--line-soft); margin: var(--space-4) 0; border: 0; }

/* 状态点 */
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.status-dot.dot-success { background: var(--success); }
.status-dot.dot-warning { background: var(--warning); }
.status-dot.dot-danger { background: var(--danger); }
.status-dot.dot-gray { background: var(--text-4); }

/* ============================ 站点页脚（前台） ============================ */
.site-footer {
  background: #0f172a;
  color: rgba(255, 255, 255, 0.6);
  padding: 40px 0 24px;
  font-size: 0.85rem;
}
.site-footer a { color: rgba(255, 255, 255, 0.75); }
.site-footer a:hover { color: #fff; }
.site-footer .footer-title { color: #fff; font-weight: 700; margin-bottom: 10px; }

/* ============================ 企业微信适配 ============================ */
/* 企微内置浏览器内的浮动操作入口（分享 / 扫码 / 复制链接） */
.wecom-fab {
  position: fixed;
  right: 16px;
  bottom: 24px;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}
.wecom-fab .btn { border-radius: var(--radius-pill); padding: 7px 14px; font-size: 0.82rem; }
html.in-wecom .wecom-only { display: block !important; }
html:not(.in-wecom) .wecom-only { display: none !important; }

/* ============================ 工具类 ============================ */
.hover-lift { transition: var(--transition); }
.hover-lift:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }
.text-2 { color: var(--text-2) !important; }
.text-3 { color: var(--text-3) !important; }
.text-4 { color: var(--text-4) !important; }
.bg-soft { background: var(--bg) !important; }
.bg-primary-soft { background: var(--primary-bg) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ============================ 响应式 ============================ */
@media (max-width: 992px) {
  .card-body { padding: 16px; }
}

@media (max-width: 768px) {
  /* 触控目标不小于 40px，便于手机操作 */
  .btn { padding: 8px 14px; }
  .btn-sm { padding: 6px 12px; min-height: 34px; }
  .page-header { margin-bottom: 16px; }
  .page-header h4 { font-size: 1.1rem; }

  /* 表格：横向滚动 + 减少内边距 */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table > thead th,
  .table > tbody td { padding: 10px 12px; }

  /* 弹窗：接近全屏，便于单手操作 */
  .modal-dialog { margin: 8px; }
  .modal-body { padding: 16px; }

  .toast-container { top: auto; bottom: 16px; right: 12px; left: 12px; }
  .empty-state { padding: 32px 16px; }
}

/* 打印时隐藏交互元素 */
@media print {
  .no-print,
  .toast-container,
  .dropdown,
  .pagination { display: none !important; }
}