/* ============================================================
   GRID V2 — Premium dark-mode grid pattern
   Faza: 2026-07-17
   Scop: Elimina gradientul galben pestetot. Linii foarte subtiri
         (subtile, premium). Pastreaza pulsatiile animate.

   Token-uri folosite (din 00-tokens.css):
     --border:        #26262a  (linii subtile)
     --border-hover:  #3a3a3f  (linii accent, mai vizibile)
     --bg-elevated:   #111113  (fundal subtil)

   Compat: actioneaza DOAR pe body::before si pe canvas#electric-canvas
   ============================================================ */

/* === 1. Neutralizeaza glow-ul galben pestetot din body::before === */
body::before {
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-elevated) 50%, var(--bg) 100%) !important;
  background-size: 200% 200% !important;
  animation: bgShift 30s ease-in-out infinite !important;
}

/* Scoate ORICE culoare glow de pe toate tab-urile — nu mai avem pestetot */
body[data-app-color="dashboard"] { --app-glow: transparent !important; }
body[data-app-color="media"]     { --app-glow: transparent !important; }
body[data-app-color="comanda"]   { --app-glow: transparent !important; }
body[data-app-color="postari"]   { --app-glow: transparent !important; }
body[data-app-color="mk"]        { --app-glow: transparent !important; }
body[data-app-color="leads"]     { --app-glow: transparent !important; }
body[data-app-color="chat"]      { --app-glow: transparent !important; }
body[data-app-color="decizii"]   { --app-glow: transparent !important; }
body[data-app-color="rapoarte"]  { --app-glow: transparent !important; }
body[data-app-color="hercules"]  { --app-glow: transparent !important; }

/* === 2. CSS Grid Overlay — linii subtile 1px, opacity mic ===
   Se deseneaza pe un pseudo-element din body, sub continut.
   Liniile sunt statice, premium, foarte subtile.
   IMPORTANT: canvas#electric-canvas ramane sub el (z=0), iar
   acest overlay (z=0, dar in spatele containerului) produce
   un pattern de linii subtile vizibile pe fundal. */

body {
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 50px 50px;
  background-attachment: fixed;
  background-position: 0 0;
  background-blend-mode: normal;
}

/* Reducem opacitatea efectiva a liniilor prin suprapunere cu un
   layer de culoare dedesubt */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--border-hover) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-hover) 1px, transparent 1px);
  background-size: 200px 200px;
  opacity: 0.04; /* foarte subtil, premium */
}

/* === 3. Canvas tuning — pastram pulsatiile, scoatem galbenul ===
   Aplicam un filter CSS pe canvas care desatureaza galbenul
   si reduce opacitatea efectiva a liniilor statice aurii.
   Pulsatiile raman vizibile pentru ca sunt colorate cu JS in functie
   de tab si au alpha ridicat — filter: saturate(0) le-ar ucide. */
#electric-canvas {
  filter: saturate(0.15) brightness(0.55);
  opacity: 0.55; /* reduce static gold grid; pulses raman luminoase datorita alpha ridicat */
  transition: opacity 0.6s ease, filter 0.6s ease;
}

/* Dashboard (unde canvas e opacity 1 initial) — limitam explozia */
body[data-app-color="dashboard"] #electric-canvas {
  opacity: 0.65 !important;
}

/* === 4. Pulse glow subtil pe elementele focale ===
   Pastram cheia @keyframes pulse pentru compatibilitate cu
   clasele .pulse-dot din 30-hero.css si 10-shell.css */
@keyframes gridV2-pulse {
  0%, 100% { opacity: 0.04; }
  50%      { opacity: 0.08; }
}

body::after {
  animation: gridV2-pulse 8s ease-in-out infinite;
}

/* Reduced motion — oprim animatia pentru a11y */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; opacity: 0.05; }
}

/* === 5. Continutul ramane deasupra grid-ului === */
.container,
.app-shell,
.app-main,
header,
main,
section {
  position: relative;
  z-index: 1;
}

/* === 6. Mobile — pastram grid-ul dar linistit === */
@media (max-width: 768px) {
  body {
    background-size: 40px 40px;
  }
  body::after {
    background-size: 160px 160px;
    opacity: 0.03;
  }
  /* Was opacity:0.35 + saturate(0.1) brightness(0.45) — nearly grayscale,
     which buried the cyan pulses Ali wants visible on mobile like the
     homepage. Same light desaturation as the desktop base rule instead. */
  #electric-canvas {
    opacity: 0.65;
    filter: saturate(0.6) brightness(0.75);
  }
}