@use 'variables' as *;

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  background-color: var(--ntq-ink);
  // 与 body 同步：窄视口时允许横向滚动，避免内容被 hidden 裁切后压扁
  overflow-x: auto;
}

body {
  margin: 0;
  min-width: $ntq-body-min-width;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  // new-tea site tokens (subset) for component scss reuse
  --ntq-ink: #060612;
  --ntq-white-98: rgba(255, 255, 255, 0.98);
  --ntq-white-75: rgba(255, 255, 255, 0.75);
  --ntq-white-45: rgba(255, 255, 255, 0.45);
  --ntq-white-42: rgba(255, 255, 255, 0.42);
  --ntq-white-12: rgba(255, 255, 255, 0.12);
  --ntq-white-06: rgba(255, 255, 255, 0.06);
  --ntq-white-03: rgba(255, 255, 255, 0.03);
  --ntq-cyan: #22d3ee;
  --ntq-violet: #a855f7;
  --ntq-green: #22c55e;
  --ntq-brand-text-gradient: linear-gradient(90deg, var(--ntq-violet), var(--ntq-cyan), var(--ntq-green));
  --ntq-brand-text-glow: 0 0 16px rgba(34, 211, 238, 0.38);

  // Unified text tones (only 2 whites)
  --ntq-text: rgba(255, 255, 255, 0.86);
  --ntq-text-muted: rgba(255, 255, 255, 0.62);

  // Input / Select / Textarea 控件内文字（与 MUI body2 一致）
  --ntq-form-control-font-size: .8rem;
  --ntq-form-control-line-height: 1.5;

  // Global glass background used by large blocks
  --ntq-glass-bg:
    radial-gradient(900px 420px at 12% 0%, rgba(255, 255, 255, 0.02), transparent 55%),
    radial-gradient(720px 360px at 88% -10%, rgba(34, 211, 238, 0.04), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));

  // new-tea style background: noise + glow + ink gradient
  background-color: var(--ntq-ink);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"),
    radial-gradient(1100px 820px at 12% -10%, rgba(168, 85, 247, 0.12), transparent 58%),
    radial-gradient(980px 720px at 88% 0%, rgba(34, 211, 238, 0.18), transparent 56%),
    linear-gradient(180deg, rgba(6, 6, 18, 1), rgba(6, 6, 18, 0.95));
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 240px 240px, auto, auto, auto;
  background-position: 0 0, center, center, center;
  background-blend-mode: soft-light, normal, normal, normal;
  line-height: 1.68;
  overflow-x: auto;
}

// --- Glass blocks (new-tea style, adapted for MUI) ---
// Default glass surface: subtle refraction edge + soft shadow + optional backdrop blur.
// Applied globally to MUI Paper/Card/Dialog "blocks" so pages look consistent.
.MuiPaper-root,
.MuiCard-root,
.MuiDialog-paper {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--ntq-white-12) !important;
  box-shadow:
    0 18px 42px rgba(6, 6, 18, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(6, 6, 18, 0.35) !important;
  position: relative;
  overflow: hidden;
}

// Dialog backdrop: blur what's behind the popup
.MuiBackdrop-root {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-color: rgba(6, 6, 18, 0.52);
}

// Dialog surface: darker glass for readability (avoid "white-ish" panels)
.MuiDialog-paper {
  background-color: rgba(0, 0, 0, 0.90) !important;
  background-image: var(--ntq-glass-bg);
}

// Strategy report: stock grid overlay (force-enumerate hint)
.ntq-stock-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--ntq-white-12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  text-align: center;
  transition: background-color 160ms ease;
}

.ntq-stock-grid-overlay__icon {
  width: 60px;
  height: 60px;
  opacity: 0.9;
  color: var(--ntq-text);
}

.ntq-stock-grid-overlay:hover {
  background-color: rgba(255, 255, 255, 0.10);
}

// Glass-outline toolbar / secondary actions (strategy list, workbench header, etc.)
.ntq-glass-outline-btn {
  height: 40px;
  border-radius: 5px !important;
  border: 1px solid var(--ntq-white-12) !important;
  background: var(--ntq-white-03) !important;
  color: var(--ntq-text) !important;
  padding: 0 14px !important;
  line-height: 1 !important;
  box-shadow: none !important;

  &:hover {
    background: var(--ntq-white-06) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
  }

  &.Mui-disabled {
    opacity: 0.45;
  }
}

// Primary cyan toolbar action (e.g. import strategy package)
.ntq-cyan-fill-btn {
  height: 40px;
  min-height: 40px;
  border-radius: 5px !important;
  padding: 0 14px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  background-color: var(--ntq-cyan) !important;
  color: var(--ntq-ink, #060612) !important;

  &:hover {
    background-color: #3dddf3 !important;
    box-shadow: none !important;
  }

  &.Mui-disabled {
    opacity: 0.45;
    color: var(--ntq-ink, #060612) !important;
  }
}

// Call-to-action "attention" button (shine sweep)
.ntq-attention-btn {
  position: relative;
  border-color: rgba(34, 211, 238, 0.55) !important;
  color: var(--ntq-cyan) !important;
  background: rgba(34, 211, 238, 0.08) !important;
  /* 仅保留顶部内高光；外扩青色 shadow 在半透明区易显脏 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  overflow: hidden;
}

.ntq-attention-btn::after {
  content: '';
  position: absolute;
  top: -40%;
  bottom: -40%;
  width: 42%;
  left: -60%;
  transform: skewX(-18deg);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.00) 18%,
    rgba(255, 255, 255, 0.26) 50%,
    rgba(255, 255, 255, 0.00) 82%,
    transparent 100%
  );
  filter: blur(1px);
  opacity: 0.9;
  animation: ntq-attention-shine 4.2s ease-in-out infinite;
  pointer-events: none;
}

.ntq-attention-btn:hover {
  background: rgba(34, 211, 238, 0.12) !important;
  border-color: rgba(34, 211, 238, 0.75) !important;
}

@keyframes ntq-attention-shine {
  0% {
    left: -60%;
    opacity: 0;
  }
  72% {
    left: -60%;
    opacity: 0;
  }
  78% {
    opacity: 0.95;
  }
  92% {
    left: 120%;
    opacity: 0.95;
  }
  100% {
    left: 120%;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ntq-attention-btn::after {
    animation: none;
    opacity: 0;
  }
}

// Refraction highlight / edge bloom
.MuiPaper-root::before,
.MuiCard-root::before,
.MuiDialog-paper::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--ntq-glass-bg);
  opacity: 0.65;
}

// Rim highlight: ONLY on edges (mask out the center) so it won't brighten the whole surface.
.MuiPaper-root::after,
.MuiCard-root::after,
.MuiDialog-paper::after {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: var(--ntq-glass-bg);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0.7;
}

// Enable background blur for true "glass" (opt-in via class).
.ntq-glass-blur {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

// A slightly stronger variant for hero/primary panels.
.ntq-glass-strong {
  background-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow:
    0 22px 56px rgba(6, 6, 18, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(6, 6, 18, 0.45) !important;
}

// 当视口宽度 ≤ 1280 时，不再用 vw 压缩主内容；固定 1280，由 html/body 横向滚动查看。
@media (max-width: $ntq-body-min-width) {
  body {
    width: $ntq-body-min-width;
    margin-left: auto;
    margin-right: auto;
  }

  .ntq-content-inner,
  .ntq-content {
    width: $ntq-body-min-width;
    max-width: none;
    min-width: $ntq-body-min-width;
    margin-left: auto;
    margin-right: auto;
  }

  .ntq-app-header {
    min-width: $ntq-body-min-width;
  }
}

code {
  font-family:
    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

#root {
  min-height: 100%;
  min-width: $ntq-body-min-width;
}

.ntq-main-layout {
  min-width: $ntq-body-min-width;
}

// 与 $ntq-content-width / $ntq-content-max-width 一致；用于 header 内条、<main>、footer 内条，保持同一竖线对齐
// 全宽条（AppBar、footer 顶边等）用满屏宽，其内部再包一层本 class 限制内容宽度
.ntq-content-inner,
.ntq-content {
  width: $ntq-content-width;
  max-width: $ntq-content-max-width;
  margin-left: auto;
  margin-right: auto;
}
