/* ============================================================
   Theme system for the Xuntong CMS.
   - Defines semantic surface variables (light defaults) that the
     homepage / detail / admin templates reference via helper classes
     (.bg-page / .bg-alt / .bg-tint / .bg-footer).
   - Provides a [data-theme="dark"] override block that flips the
     EXISTING design tokens (--color-text-primary, --color-text-secondary,
     --color-border, --color-surface-white) used throughout the
     injected original <style>, so components that already rely on
     variables adapt automatically.
   - Recolors the few components that hardcode hex values (cards,
     procurement table, filter buttons, navbar.scrolled) so they look
     premium in both themes.
   - Styles the light/dark/system theme toggle button.
   Loaded AFTER the original site_css so these rules reliably win.
   ============================================================ */

/* ---------- Semantic surface variables (light defaults) ---------- */
:root {
  --bg-page:   #FFFFFF;   /* main page / white sections      */
  --bg-alt:    #F8FAFC;   /* light-gray sections             */
  --bg-tint:   #F0F7FF;   /* light-blue sections             */
  --bg-card:   #FFFFFF;   /* card surfaces                   */
  --bg-footer: #F0F4F8;   /* footer                          */
  --wave-fill: #FFFFFF;   /* decorative wave blend (unused in dark) */
}

/* ---------- Dark palette ---------- */
[data-theme="dark"] {
  /* flip the original tokens the injected CSS already consumes */
  --color-surface-white:   #0B1220;
  --color-text-primary:    #E6EDF6;
  --color-text-secondary:  #94A6BC;
  --color-border:          #1E2A3D;

  /* semantic surfaces */
  --bg-page:   #0B1220;
  --bg-alt:    #0F1827;
  --bg-tint:   #0C1B2E;
  --bg-card:   #111C2E;
  --bg-footer: #080D16;
}

/* ---------- Helper surface classes (used by templates) ---------- */
.bg-page   { background: var(--bg-page); }
.bg-alt    { background: var(--bg-alt); }
.bg-tint   { background: var(--bg-tint); }
.bg-footer { background: var(--bg-footer); }

/* ---------- Public-site component dark overrides ----------
   (specificity 0,2,0 beats the 0,1,0 rules in the injected CSS) */
[data-theme="dark"] .biz-card,
[data-theme="dark"] .case-card,
[data-theme="dark"] .news-card,
[data-theme="dark"] .client-logo {
  background: var(--bg-card);
  box-shadow: 0 2px 16px rgba(0,0,0,0.35);
}
[data-theme="dark"] .news-card,
[data-theme="dark"] .client-logo {
  border-color: var(--color-border);
}
[data-theme="dark"] .client-logo:hover {
  box-shadow: 0 4px 16px rgba(37,99,235,0.25);
}
/* 合作客户 Logo 图：暗色主题下提升对比度（ISSUE #58） */
[data-theme="dark"] .client-logo-img {
  filter: brightness(1.15);
}
[data-theme="dark"] .client-logo:hover .client-logo-img {
  filter: brightness(1.2);
}

/* Procurement table + filter chips */
[data-theme="dark"] .proc-filter-btn {
  background: var(--bg-card);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}
[data-theme="dark"] .proc-filter-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
[data-theme="dark"] .proc-filter-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
[data-theme="dark"] .xt-table thead th {
  color: #7DD3FC;
  background: linear-gradient(180deg, #0E2233 0%, #13263A 100%);
  border-bottom-color: var(--color-border);
}
[data-theme="dark"] .xt-table tbody td {
  color: var(--color-text-primary);
  border-bottom-color: #16233A;
}
[data-theme="dark"] .xt-table tbody tr:hover { background: #0E2233; }
[data-theme="dark"] .xt-title-link { color: var(--color-text-primary); }
[data-theme="dark"] .xt-title-link:hover { color: #7DD3FC; }

/* Navbar when scrolled (becomes a solid bar) */
[data-theme="dark"] .navbar.scrolled {
  background: rgba(11,18,32,0.88);
  box-shadow: 0 1px 12px rgba(0,0,0,0.45);
  backdrop-filter: blur(12px);
}

/* Footer links (color hardcoded in the injected CSS) */
[data-theme="dark"] .footer-link { color: var(--color-text-secondary); }

/* Mobile hamburger lines are hardcoded white inline; recolor when the
   navbar is scrolled (solid background) so they stay visible in both
   themes. !important is required to beat the inline style. */
.navbar.scrolled .hamburger-line { background: var(--color-text-primary) !important; }

/* Decorative waves blend white sections in light mode; hide in dark
   to avoid white wedges on dark backgrounds (adjacent tones differ) */
[data-theme="dark"] .wave-top,
[data-theme="dark"] .wave-bottom { display: none; }

/* ---------- Detail page dark overrides ---------- */
[data-theme="dark"] .detail-section-white { background: var(--bg-page); }
[data-theme="dark"] .detail-section-tint  { background: var(--bg-tint); }
[data-theme="dark"] .meta-pill {
  background: #16243A;
  color: #AEBFD4;
}
[data-theme="dark"] .meta-pill b { color: #E6EDF6; }
[data-theme="dark"] .detail-lead {
  background: #0E2233;
  color: #B9C7DA;
}
[data-theme="dark"] .detail-body { color: var(--color-text-secondary); }
[data-theme="dark"] .related-card { background: var(--bg-card); }
[data-theme="dark"] .back-btn {
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}
[data-theme="dark"] .back-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ---------- Admin dark overrides (admin_layout :root vars) ---------- */
[data-theme="dark"] {
  --bg:     #0B1220;
  --card:   #111C2E;
  --text:   #E6EDF6;
  --muted:  #94A6BC;
  --border: #1E2A3D;
}
[data-theme="dark"] .form-field input,
[data-theme="dark"] .form-field select,
[data-theme="dark"] .form-field textarea {
  background: #0E1828;
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .btn-ghost { background: #1B2638; color: var(--text); }
[data-theme="dark"] table.tbl th { background: #0E1828; }

/* ---------- Admin UEditor dark overrides ----------
   UEditor 默认主题为浅色，暗色模式下需要将其面板背景/边框/底部状态栏
   同步为后台的暗色变量，保证编辑器与整体主题一致。 */
[data-theme="dark"] .ue-host .edui-editor {
  border-color: var(--border);
  background: var(--card);
}
[data-theme="dark"] .ue-host .edui-editor .edui-editor-toolbarboxouter {
  background: #0E1828;
  border-bottom-color: var(--border);
}
[data-theme="dark"] .ue-host .edui-editor .edui-editor-body { background: var(--card); }
[data-theme="dark"] .ue-host .edui-editor .edui-editor-bottombar { background: #0E1828; }
[data-theme="dark"] .ue-host .edui-editor .edui-editor-bottomContainer td {
  border-top-color: var(--border);
  color: var(--muted);
}
[data-theme="dark"] .ue-host .edui-editor .edui-toolbar .edui-button .edui-icon,
[data-theme="dark"] .ue-host .edui-editor .edui-toolbar .edui-menubutton .edui-icon,
[data-theme="dark"] .ue-host .edui-editor .edui-toolbar .edui-splitbutton .edui-icon {
  filter: invert(0.9) brightness(1.2);
}

/* ============================================================
   Search button (replaces the old theme toggle)
   ============================================================ */
.search-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  padding: 0;
}
.search-btn:hover {
  background: rgba(37,99,235,0.08);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: scale(1.06);
}
/* over the dark hero (transparent navbar) the icon must be light */
.navbar.transparent .search-btn {
  color: #fff;
  border-color: rgba(255,255,255,0.30);
  background: rgba(255,255,255,0.10);
}
.navbar.transparent .search-btn:hover {
  background: rgba(255,255,255,0.18);
  color: #fff;
}
.search-btn svg { width: 20px; height: 20px; }

/* ============================================================
   Site-wide search overlay (Baidu site: search)
   ============================================================ */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 18vh;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.search-overlay[hidden] {
  display: none;
}
.search-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.search-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 13, 22, 0.68);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.search-modal {
  position: relative;
  width: min(560px, 92vw);
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--color-border, #e5eaf2);
  border-radius: 16px;
  padding: 22px 22px 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.28);
}
.search-modal form {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid var(--color-primary, #2563eb);
  padding-bottom: 8px;
  /* 右侧为右上角的关闭按钮（✕）留出空间，避免与“搜索”按钮重叠 */
  margin-right: 40px;
}
.search-modal-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--color-text-secondary, #5a6b7f);
}
.search-modal input[data-search-input] {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  font-size: 1.05rem;
  font-family: inherit;
  color: var(--color-text-primary, #1a2332);
  background: transparent;
}
.search-modal input[data-search-input]::placeholder {
  color: var(--color-text-secondary, #5a6b7f);
  opacity: 0.8;
}
.search-modal-go {
  flex-shrink: 0;
  padding: 8px 18px;
  border-radius: 9px;
  border: none;
  background: var(--color-primary, #2563eb);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
.search-modal-go:hover { background: var(--color-darkblue, #1e40af); }
.search-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary, #5a6b7f);
  font-size: 1.05rem;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.search-close:hover {
  background: rgba(37,99,235,0.10);
  color: var(--color-primary, #2563eb);
}
.search-modal-hint {
  margin: 12px 2px 2px;
  font-size: 0.78rem;
  color: var(--color-text-secondary, #5a6b7f);
}
[data-theme="dark"] .search-modal {
  background: var(--bg-card);
  border-color: var(--color-border);
}
[data-theme="dark"] .search-modal input[data-search-input] { color: var(--color-text-primary); }

/* ============================================================
   Smooth theme transition (no per-element flash on switch)
   ============================================================ */
body,
.navbar,
.biz-card,
.case-card,
.news-card,
.client-logo,
.proc-filter-btn,
.xt-table,
.footer,
.detail-section-white,
.detail-section-tint,
.related-card,
.meta-pill,
.detail-lead,
.back-btn {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ---------- Login screen (standalone template) ---------- */
[data-theme="dark"] .login-card {
  background: #111C2E;
  border: 1px solid #1E2A3D;
}
[data-theme="dark"] .login-card h1 { color: #E6EDF6; }
[data-theme="dark"] .login-card p.sub { color: #94A6BC; }
[data-theme="dark"] .login-card label { color: #E6EDF6; }
[data-theme="dark"] .login-card input {
  background: #0E1828;
  color: #E6EDF6;
  border-color: #1E2A3D;
}