/*
 * ============================================
 *  ZHENGHE THEME — Premium Dashboard Skin
 * ============================================
 *
 *  Design system mapped from Zhenghe Next.js webapp
 *  Silk Road palette with backend dashboard minimal structure.
 *
 *  Font:    Noto Sans SC (body) · Noto Serif SC (headings)
 *  Palette: Ivory, Gold, Ocean, Midnight, Ink
 *  Style:   Minimal cards
 * ============================================
 */

/* ============================================
   1. Silk Road Palette & Tokens
   ============================================ */

:root {
  /* — Next.js Webapp Silk Road Palette — */
  --color-midnight: #0b1121;
  --color-navy: #131c33;
  --color-navy-light: #1b2847;
  --color-ivory: #faf8f4;
  --color-ivory-warm: #f5f0e8;
  --color-parchment: #eee8db;
  --color-gold: #c9952d;
  --color-gold-light: #e4b94e;
  --color-gold-pale: #f5e6c0;
  --color-gold-glow: rgba(201, 149, 45, 0.15);
  --color-ocean: #0f766e;
  --color-ocean-light: #14b8a6;
  --color-ink: #1e293b;
  --color-ink-muted: #64748b;
  --color-ink-faint: #94a3b8;
  --color-surface: #ffffff;
  --color-border: #e8e0d4;
  --color-border-light: #f0ebe3;

  /* — Mapped Dashboard Tokens — */
  --zh-bg:            var(--color-ivory);
  --zh-bg-secondary:  var(--color-ivory-warm);
  --zh-card:          var(--color-surface);
  --zh-card-muted:    var(--color-parchment);
  
  --zh-accent:        var(--color-gold);
  --zh-accent-hover:  var(--color-gold-light);
  --zh-accent-light:  var(--color-gold-glow);
  --zh-accent-text:   #FFFFFF;
  
  --zh-text:          var(--color-ink);
  --zh-text-secondary: var(--color-ink-muted);
  --zh-text-muted:    var(--color-ink-faint);
  
  --zh-border:        var(--color-border);
  --zh-border-strong: var(--color-border-light);
  
  --zh-success:       var(--color-ocean);
  --zh-warning:       var(--color-gold);
  --zh-danger:        #B85450;
  --zh-info:          var(--color-ocean-light);

  /* — Sidebar — */
  --zh-sidebar-bg:    var(--color-midnight);
  --zh-sidebar-text:  var(--color-ivory-warm);
  --zh-sidebar-item-text: #FFFFFF;
  --zh-sidebar-hover: rgba(255, 255, 255, 0.08);
  --zh-sidebar-active: rgba(201, 149, 45, 0.2);

  /* — Typography (retained from storefront dashboard) — */
  --zh-font-body:     'Noto Sans SC', ui-sans-serif, system-ui, sans-serif;
  --zh-font-heading:  'Noto Serif SC', ui-serif, georgia, serif;

  /* — Spacing & Radii (minimal approach) — */
  --zh-radius:        8px;
  --zh-radius-sm:     4px;
  --zh-radius-lg:     12px;

  /* — Shadows — */
  --zh-shadow-sm:     0 2px 8px rgba(30, 41, 59, 0.04);
  --zh-shadow:        0 8px 24px rgba(30, 41, 59, 0.08);

  /* — Easing — */
  --zh-ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --zh-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* — Grain texture — */
  --zh-grain-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* — Color variants (using Silk Road colors) — */
.zhenghe-earthy {
  --zh-accent:        var(--color-gold);
  --zh-accent-hover:  var(--color-gold-light);
  --zh-accent-light:  rgba(201, 149, 45, 0.15);
  --zh-accent-text:   var(--color-midnight);
  --zh-sidebar-active: rgba(201, 149, 45, 0.3);
}

.zhenghe-jade {
  --zh-accent:        #4A7C6F;
  --zh-accent-hover:  #5B9282;
  --zh-accent-light:  rgba(74, 124, 111, 0.15);
  --zh-sidebar-active: rgba(74, 124, 111, 0.3);
}

.zhenghe-ocean {
  --zh-accent:        var(--color-ocean);
  --zh-accent-hover:  var(--color-ocean-light);
  --zh-accent-light:  rgba(15, 118, 110, 0.15);
  --zh-sidebar-active: rgba(15, 118, 110, 0.3);
}

.zhenghe-midnight {
  --zh-accent:        var(--color-navy);
  --zh-accent-hover:  var(--color-navy-light);
  --zh-accent-light:  rgba(19, 28, 51, 0.15);
  --zh-accent-text:   #FFFFFF;
  --zh-sidebar-active: rgba(19, 28, 51, 0.3);
}

.zhenghe-ink {
  --zh-accent:        var(--color-ink);
  --zh-accent-hover:  var(--color-ink-muted);
  --zh-accent-light:  rgba(30, 41, 59, 0.15);
  --zh-accent-text:   #FFFFFF;
  --zh-sidebar-active: rgba(30, 41, 59, 0.3);
}

/* — Light sidebar variant — */
.zhenghe-sidebar-light {
  --zh-sidebar-bg:    var(--color-surface);
  --zh-sidebar-text:  var(--color-ink);
  --zh-sidebar-item-text: var(--color-ink);
  --zh-sidebar-hover: var(--color-ivory-warm);
}

/* — Card styles (!important needed to override Ant Design inline styles) — */
.zhenghe-theme.zhenghe-card-glass .ant-card,
.zhenghe-theme.zhenghe-card-glass .card {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.07) !important;
  border-radius: var(--zh-radius-lg) !important;
}


/* ============================================
   2. Global Resets & Base
   ============================================ */

.zhenghe-theme {
  font-family: var(--zh-font-body) !important;
  background-color: var(--zh-bg) !important;
  color: var(--zh-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.zhenghe-theme * {
  font-family: inherit;
}

.zhenghe-theme ::selection {
  background: var(--zh-accent);
  color: var(--zh-accent-text);
}

/* ============================================
   3. Splash Screen
   ============================================ */

.zhenghe-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--zh-bg);
  overflow: hidden;
  transition: opacity 0.6s var(--zh-ease), transform 0.6s var(--zh-ease);
}

.zhenghe-splash-exit {
  opacity: 0;
  transform: scale(1.05);
  pointer-events: none;
}

.zhenghe-splash-logo-box {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background-color: var(--zh-sidebar-bg);
  color: var(--zh-accent-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--zh-font-heading);
  font-size: 32px;
  font-weight: 900;
  margin-bottom: 24px;
  animation: zh-logo-enter 0.8s var(--zh-ease-out-expo) forwards;
  opacity: 0;
  transform: scale(0.8) translateY(12px);
}

@keyframes zh-logo-enter {
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.zhenghe-splash-brand {
  font-family: var(--zh-font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--zh-text);
  margin: 0;
  line-height: 1.2;
  opacity: 0;
  animation: zh-brand-in 0.6s var(--zh-ease-out-expo) 0.4s forwards;
}

@keyframes zh-brand-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.zhenghe-splash-tagline {
  margin-top: 12px;
  color: var(--zh-text-muted);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  opacity: 0;
  animation: zh-brand-in 0.6s var(--zh-ease-out-expo) 0.6s forwards;
}

.zhenghe-splash-wisps {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.zhenghe-splash-wisp {
  position: absolute;
  background: radial-gradient(circle at center, var(--color-gold-glow) 0%, transparent 60%);
  border-radius: 50%;
  opacity: 0;
  animation: zh-wisp-drift 8s infinite alternate var(--zh-ease);
}

.zhenghe-wisp-1 { width: 400px; height: 400px; top: -100px; left: -100px; animation-delay: 0s; }
.zhenghe-wisp-2 { width: 300px; height: 300px; bottom: -50px; right: -50px; animation-delay: -2s; }
.zhenghe-wisp-3 { width: 500px; height: 500px; top: 40%; left: 60%; animation-delay: -4s; }
.zhenghe-wisp-4 { width: 200px; height: 200px; top: 20%; left: 20%; animation-delay: -6s; }

@keyframes zh-wisp-drift {
  0% { transform: translate(0, 0) scale(1); opacity: 0.2; }
  50% { opacity: 0.5; }
  100% { transform: translate(30px, -30px) scale(1.1); opacity: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
  .zhenghe-splash-logo-box,
  .zhenghe-splash-brand,
  .zhenghe-splash-tagline,
  .zhenghe-splash-wisp {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .zhenghe-theme .ant-layout-content > *:first-child,
  .zhenghe-theme main > *:first-child {
    animation: none;
  }
}


/* ============================================
   4. Layout Overrides
   ============================================ */

.zhenghe-theme .ant-layout-sider,
.zhenghe-theme aside {
  background: var(--zh-sidebar-bg) !important;
  border-right: 1px solid var(--zh-border) !important;
  position: relative;
}

.zhenghe-theme .ant-layout-sider::before,
.zhenghe-theme aside::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.03;
  pointer-events: none;
  background-image: var(--zh-grain-texture);
  background-repeat: repeat;
  background-size: 128px;
  z-index: 10;
}

.zhenghe-theme .ant-menu,
.zhenghe-theme .ant-menu-dark {
  background: transparent !important;
  font-family: var(--zh-font-body) !important;
}

.zhenghe-theme .ant-menu-item,
.zhenghe-theme .ant-menu-submenu-title {
  color: var(--zh-sidebar-text) !important;
  border-radius: var(--zh-radius-sm) !important;
  margin: 2px 8px !important;
  transition: all 0.2s var(--zh-ease) !important;
}

.zhenghe-theme .ant-menu-item:hover,
.zhenghe-theme .ant-menu-submenu-title:hover {
  background: var(--zh-sidebar-hover) !important;
  color: var(--zh-sidebar-item-text) !important;
}

.zhenghe-theme .ant-menu-item-selected,
.zhenghe-theme .ant-menu-item-active {
  background: var(--zh-sidebar-active) !important;
  color: var(--zh-sidebar-item-text) !important;
  border-right: 3px solid var(--zh-accent) !important;
}

/* --- Sidebar Logo parity with storefront --- */
.zhenghe-theme .ant-layout-sider .logo,
.zhenghe-theme .sidebar-logo {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 24px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.zhenghe-theme .ant-layout-sider .logo img,
.zhenghe-theme .sidebar-logo img {
  display: none !important;
}

.zhenghe-theme .ant-layout-sider .logo::before,
.zhenghe-theme .sidebar-logo::before {
  content: "郑";
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  color: var(--color-gold-light);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--zh-font-heading);
  font-weight: 900;
  font-size: 14px;
  transition: all 0.3s ease;
}

.zhenghe-theme .ant-layout-sider .logo::after,
.zhenghe-theme .sidebar-logo::after {
  content: "郑和";
  font-family: var(--zh-font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--zh-sidebar-item-text);
  letter-spacing: 0.05em;
}

.zhenghe-sidebar-light .ant-layout-sider .logo::after,
.zhenghe-sidebar-light .sidebar-logo::after {
  color: var(--zh-text);
}

.zhenghe-theme .ant-layout-sider .logo:hover::before,
.zhenghe-theme .sidebar-logo:hover::before {
  background: var(--color-navy-light);
  transform: scale(1.05);
}

.zhenghe-theme .sidebar-logo-text {
  display: none !important;
}

.zhenghe-theme .ant-layout-content,
.zhenghe-theme main {
  background: var(--zh-bg) !important;
}

.zhenghe-theme .ant-layout-header,
.zhenghe-theme header {
  background: var(--zh-bg) !important;
  border-bottom: 1px solid var(--zh-border) !important;
  box-shadow: none !important;
}


/* ============================================
   5. Card Styles (Minimal default)
   ============================================ */

/* Minimal card (Primary Style — scoped so glass/solid variants can override) */
.zhenghe-theme.zhenghe-card-minimal .ant-card,
.zhenghe-theme.zhenghe-card-minimal .card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--zh-border) !important;
  padding-bottom: 24px !important;
  margin-bottom: 16px !important;
  transition: border-color 0.3s var(--zh-ease) !important;
}

.zhenghe-theme.zhenghe-card-minimal .ant-card:hover,
.zhenghe-theme.zhenghe-card-minimal .card:hover {
  border-color: var(--zh-accent) !important;
}

/* Clear solid card variant (if requested) */
.zhenghe-card-solid .ant-card {
  background: var(--zh-card) !important;
  border: 1px solid var(--zh-border) !important;
  border-radius: var(--zh-radius) !important;
  border-bottom: 1px solid var(--zh-border) !important;
  padding-bottom: 0 !important;
}

/* ============================================
   6. Typography
   ============================================ */

.zhenghe-theme h1,
.zhenghe-theme h2,
.zhenghe-theme h3,
.zhenghe-theme h4,
.zhenghe-theme h5,
.zhenghe-theme h6,
.zhenghe-theme .ant-card-head-title,
.zhenghe-theme .section-title,
.zhenghe-theme .ant-typography {
  font-family: var(--zh-font-heading) !important;
  color: var(--zh-text) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.zhenghe-theme h1 { font-size: 2.5rem !important; font-weight: 900 !important; }
.zhenghe-theme h2 { font-size: 1.85rem !important; }
.zhenghe-theme h3 { font-size: 1.35rem !important; }

.zhenghe-theme p,
.zhenghe-theme span,
.zhenghe-theme label {
  font-family: var(--zh-font-body);
}


/* ============================================
   7. Buttons
   ============================================ */

/* !important needed to override Ant Design inline styles on button elements */
.zhenghe-theme .ant-btn-primary,
.zhenghe-theme .btn-primary {
  background: var(--zh-accent) !important;
  border: none !important;
  color: var(--zh-accent-text) !important;
  border-radius: var(--zh-radius) !important;
  font-family: var(--zh-font-body) !important;
  font-weight: 600 !important;
  padding: 8px 24px !important;
  height: auto !important;
  box-shadow: none !important;
  transition: all 0.2s var(--zh-ease) !important;
}

.zhenghe-theme .ant-btn-primary:hover,
.zhenghe-theme .btn-primary:hover {
  background: var(--zh-accent-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0 20px var(--zh-accent-light) !important;
}

.zhenghe-theme .ant-btn-default,
.zhenghe-theme .btn-secondary,
.zhenghe-theme .ant-btn:not(.ant-btn-primary, .ant-btn-danger, .ant-btn-link) {
  background: transparent !important;
  border: 1px solid var(--zh-border) !important;
  color: var(--zh-text) !important;
  border-radius: var(--zh-radius) !important;
  font-family: var(--zh-font-body) !important;
  font-weight: 500 !important;
  padding: 8px 20px !important;
  height: auto !important;
  transition: all 0.2s var(--zh-ease) !important;
}

.zhenghe-theme .ant-btn-default:hover {
  border-color: var(--zh-accent) !important;
  color: var(--zh-accent) !important;
  background: var(--zh-bg-secondary) !important;
}


/* ============================================
   8. Form Elements
   ============================================ */

.zhenghe-theme .ant-input,
.zhenghe-theme .ant-select-selector,
.zhenghe-theme input[type="text"],
.zhenghe-theme input[type="email"],
.zhenghe-theme input[type="password"],
.zhenghe-theme input[type="number"],
.zhenghe-theme textarea,
.zhenghe-theme select {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--zh-border-strong) !important;
  border-radius: 0 !important;
  color: var(--zh-text) !important;
  font-family: var(--zh-font-body) !important;
  padding: 8px 0 !important;
  transition: border-color 0.2s var(--zh-ease), box-shadow 0.2s var(--zh-ease) !important;
}

.zhenghe-theme .ant-input:focus,
.zhenghe-theme .ant-input:hover,
.zhenghe-theme .ant-select-focused .ant-select-selector,
.zhenghe-theme input:focus,
.zhenghe-theme textarea:focus {
  border-bottom-color: var(--zh-accent) !important;
  box-shadow: 0 1px 0 0 var(--zh-accent) !important;
  outline: none !important;
}


/* ============================================
   9. Tables
   ============================================ */

.zhenghe-theme .ant-table {
  background: transparent !important;
}

.zhenghe-theme .ant-table-thead > tr > th {
  background: transparent !important;
  color: var(--zh-text-secondary) !important;
  font-family: var(--zh-font-body) !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border-bottom: 2px solid var(--zh-border) !important;
}

.zhenghe-theme .ant-table-tbody > tr > td {
  border-bottom: 1px solid var(--zh-border) !important;
  font-family: var(--zh-font-body) !important;
  color: var(--zh-text) !important;
  transition: background 0.2s var(--zh-ease) !important;
}

.zhenghe-theme .ant-table-tbody > tr:hover > td {
  background: var(--zh-bg-secondary) !important;
}

/* ============================================
   10. Grain overlay & Auth Pages
   ============================================ */
   
.zhenghe-theme .login-container,
.zhenghe-theme .auth-container {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: relative;
}

.zhenghe-theme .login-container::before,
.zhenghe-theme .auth-container::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.03;
  pointer-events: none;
  background-image: var(--zh-grain-texture);
  background-repeat: repeat;
  background-size: 128px;
}

/* ============================================
   11. Link hover & Micro animations
   ============================================ */

.zhenghe-theme a {
  color: var(--zh-accent) !important;
  text-decoration: none !important;
  transition: color 0.2s var(--zh-ease) !important;
}

.zhenghe-theme a:hover {
  color: var(--zh-accent-hover) !important;
}

/* Staggered fade-up (from storefront globals.css) */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.zhenghe-theme .ant-layout-content > *:first-child,
.zhenghe-theme main > *:first-child {
  animation: fade-up 0.5s ease-out both;
}