/**
 * App surface: subtle decorative background.
 * Designed to be barely visible — atmosphere only, never dominate.
 */

.app-shell-wrap {
  position: relative;
  z-index: 2;
}

/* --- Fixed background: very subtle grid + soft gradients --- */
.bg-shapes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  contain: layout paint;
}

.bg-shapes::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right, var(--tm-app-grid-line, rgba(0, 112, 224, 0.025)) 1px, transparent 1px),
    linear-gradient(to bottom, var(--tm-app-grid-line, rgba(0, 112, 224, 0.025)) 1px, transparent 1px);
  background-size: 48px 48px;
}

.bg-shapes::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 10% 14%, rgba(0, 112, 224, 0.03) 0%, transparent 55%),
    radial-gradient(ellipse 65% 50% at 88% 22%, rgba(240, 112, 16, 0.02) 0%, transparent 50%);
}

.shape {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

/* Light mode shapes — very subtle, barely visible */
html:not(.dark-mode) .shape-1 {
  width: clamp(180px, 24vmin, 280px);
  height: clamp(180px, 24vmin, 280px);
  border-radius: 50%;
  top: 6%;
  left: 2%;
  opacity: 0.05;
  background: linear-gradient(145deg, #70b0f0 0%, #0070e0 55%, #0058b3 100%);
}

html:not(.dark-mode) .shape-2 {
  width: clamp(140px, 18vmin, 220px);
  height: clamp(140px, 18vmin, 220px);
  top: 52%;
  right: 4%;
  transform: rotate(22deg);
  border-radius: 12px;
  opacity: 0.04;
  background: linear-gradient(160deg, #9cc8f5 0%, #0070e0 50%, #0058b3 100%);
}

html:not(.dark-mode) .shape-3 {
  width: clamp(240px, 36vmin, 380px);
  height: clamp(96px, 14vmin, 150px);
  border-radius: 999px;
  bottom: 4%;
  left: 28%;
  opacity: 0.04;
  background: linear-gradient(90deg, rgba(240, 112, 16, 0.4) 0%, rgba(255, 140, 66, 0.3) 40%, rgba(0, 112, 224, 0.25) 100%);
}

/* Body background */
html:not(.dark-mode) body {
  min-height: 100vh;
  background-color: var(--tm-app-bg, #f1f4f9) !important;
  background-image: linear-gradient(165deg, #edf0f7 0%, var(--tm-app-bg-mid, #f2f4fa) 52%, #eef1f8 100%) !important;
}

html.dark-mode body {
  min-height: 100vh;
  background-color: var(--tm-app-bg, #0f172a);
  background-image: radial-gradient(ellipse 90% 55% at 50% -5%, rgba(0, 112, 224, 0.12) 0%, transparent 50%),
    linear-gradient(180deg, #0f172a 0%, var(--tm-app-bg-mid, #111827) 55%, #0c1222 100%);
}

/* Legacy wrappers transparent */
html:not(.dark-mode) .app-layout,
html:not(.dark-mode) .flex.min-h-screen.app-shell-wrap,
html:not(.dark-mode) .flex.min-h-screen:has(> #mainContent),
html:not(.dark-mode) .flex.min-h-screen:has(> main#mainContent) {
  background-color: transparent !important;
}

html.dark-mode .app-layout,
html.dark-mode .flex.min-h-screen.app-shell-wrap,
html.dark-mode .flex.min-h-screen:has(> #mainContent),
html.dark-mode .flex.min-h-screen:has(> main#mainContent) {
  background-color: transparent !important;
}

/* Dark mode shapes */
html.dark-mode .bg-shapes::after {
  background:
    radial-gradient(ellipse 78% 58% at 12% 16%, rgba(112, 176, 240, 0.06) 0%, transparent 52%),
    radial-gradient(ellipse 62% 48% at 88% 24%, rgba(240, 112, 16, 0.03) 0%, transparent 48%);
}

html.dark-mode .shape-1 {
  width: clamp(180px, 24vmin, 280px);
  height: clamp(180px, 24vmin, 280px);
  border-radius: 50%;
  top: 8%;
  left: 4%;
  opacity: 0.06;
  background: linear-gradient(145deg, #b8dafb 0%, #8ec5f7 45%, #0070e0 100%);
}

html.dark-mode .shape-2 {
  width: clamp(140px, 18vmin, 220px);
  height: clamp(140px, 18vmin, 220px);
  top: 56%;
  right: 6%;
  transform: rotate(25deg);
  border-radius: 14px;
  opacity: 0.05;
  background: linear-gradient(155deg, #8ec5f7 0%, #1a7fd9 50%, #0070e0 100%);
}

html.dark-mode .shape-3 {
  width: clamp(240px, 36vmin, 360px);
  height: clamp(96px, 14vmin, 130px);
  border-radius: 999px;
  bottom: 5%;
  left: 30%;
  opacity: 0.05;
  background: linear-gradient(90deg, rgba(240, 112, 16, 0.3) 0%, rgba(251, 146, 60, 0.2) 45%, rgba(112, 176, 240, 0.2) 100%);
}

/* Mobile: hide decorative shapes entirely */
@media (max-width: 768px) {
  .shape-1, .shape-2, .shape-3 {
    display: none !important;
  }
  .bg-shapes::before {
    opacity: 0.5;
  }
  .bg-shapes::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-shapes::after {
    display: none !important;
  }
}

@media (prefers-contrast: more) {
  .bg-shapes {
    display: none !important;
  }
  html:not(.dark-mode) body {
    background-color: var(--tm-bg-primary) !important;
  }
}