/* 
  Общая концепция:
  1) Этот файл отвечает за фон только для layout-страниц (main/sidebar),
     но НЕ для карты, чтобы не ломать сложную карту и ее производительность.
  2) Фон состоит из базового градиента + двух декоративных слоёв (::before/::after).
  3) Декоративные слои всегда pointer-events:none, поэтому не мешают кликам.
*/
:root {
  /* Базовые спокойные тона подложки */
  --layout-bg-base: #f3f7fb;
  --layout-bg-soft: #e9f4f2;
  --layout-bg-warm: #fff4e8;
  /* Цвета узора (точки и диагональные штрихи) */
  --layout-dot: rgba(71, 85, 105, 0.06);
  --layout-line: rgba(14, 116, 144, 0.055);
  /* Мягкие акцентные переливы (пастельная "веселка") */
  --layout-accent-a: rgba(244, 114, 182, 0.08);
  --layout-accent-b: rgba(14, 165, 233, 0.08);
  --layout-accent-c: rgba(45, 212, 191, 0.07);
}

/* 
  Базовый фон layout-страниц.
  map-body исключаем через :not(.map-body), чтобы map.css контролировал фон карты самостоятельно.
*/
.app-layout-main:not(.map-body),
.app-layout-sidebar {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  /* Порядок важен: верхний слой (акцент), затем световые пятна, затем базовый градиент */
  background:
    linear-gradient(
      125deg,
      var(--layout-accent-a) 0%,
      var(--layout-accent-b) 52%,
      var(--layout-accent-c) 100%
    ),
    radial-gradient(1100px 640px at 90% -16%, var(--layout-bg-warm) 0%, transparent 62%),
    radial-gradient(880px 540px at -14% 24%, var(--layout-bg-soft) 0%, transparent 64%),
    linear-gradient(180deg, #f8fbff 0%, var(--layout-bg-base) 100%);
}

/* 
  Слой №1 (точечный паттерн):
  создаёт "текстуру бумаги", чтобы фон не выглядел плоским.
*/
.app-layout-main:not(.map-body)::before,
.app-layout-sidebar::before {
  content: '';
  position: fixed;
  /* 66px = высота navbar, чтобы узор не залезал под верхнюю панель */
  inset: 66px 0 0 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.55;
  background-image:
    radial-gradient(circle at 1px 1px, var(--layout-dot) 1px, transparent 0);
  background-size: 18px 18px;
}

/* 
  Слой №2 (геометрический узор):
  перекрестные диагонали + мягкие световые эллипсы.
  Задача: добавить "характер", но не увести внимание от контента.
*/
.app-layout-main:not(.map-body)::after,
.app-layout-sidebar::after {
  content: '';
  position: fixed;
  inset: 66px 0 0 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.55;
  background:
    repeating-linear-gradient(
      -35deg,
      transparent 0 22px,
      var(--layout-line) 22px 23px
    ),
    repeating-linear-gradient(
      35deg,
      transparent 0 26px,
      rgba(14, 116, 144, 0.04) 26px 27px
    ),
    radial-gradient(
      ellipse 420px 280px at 84% 16%,
      rgba(255, 255, 255, 0.5) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 380px 260px at 12% 78%,
      rgba(255, 255, 255, 0.38) 0%,
      transparent 70%
    );
  background-size:
    auto,
    auto,
    100% 100%,
    100% 100%;
  mix-blend-mode: normal;
}

/* 
  Мобильная адаптация:
  - чуть слабее насыщенность акцентов,
  - более мягкая плотность/непрозрачность узора,
  чтобы фон не "шумел" на маленьких экранах.
*/
@media (max-width: 768px) {
  .app-layout-main:not(.map-body),
  .app-layout-sidebar {
    background:
      linear-gradient(
        132deg,
        rgba(244, 114, 182, 0.06) 0%,
        rgba(14, 165, 233, 0.06) 56%,
        rgba(45, 212, 191, 0.05) 100%
      ),
      radial-gradient(560px 360px at 110% -5%, var(--layout-bg-warm) 0%, transparent 70%),
      radial-gradient(520px 340px at -26% 18%, var(--layout-bg-soft) 0%, transparent 72%),
      linear-gradient(180deg, #f7fbff 0%, var(--layout-bg-base) 100%);
  }

  .app-layout-main:not(.map-body)::before,
  .app-layout-sidebar::before {
    opacity: 0.42;
    background-size: 15px 15px;
  }

  .app-layout-main:not(.map-body)::after,
  .app-layout-sidebar::after {
    opacity: 0.42;
    background-size: auto, auto, 100% 100%, 100% 100%;
  }
}