/* WaveBlue© – Background System v3 (echte JPG-Bilder für Carbon) */

/* ── Container transparent wenn Background aktiv ─────────── */
html[data-bg] .bw-app,
html[data-bg] .bw-chat-area,
html[data-bg] .bw-page-container,
html[data-bg] .bw-dashboard-layout,
html[data-bg] .bw-dashboard-main,
html[data-bg] .bw-dashboard-aside,
html[data-bg] main { background: transparent !important; }

html[data-bg] .bw-channel-list,
html[data-bg] .bw-workspace-rail {
  background: rgba(0,0,0,0.62) !important;
  backdrop-filter: blur(2px);
}
html[data-bg] .bw-navbar {
  background: rgba(8,8,12,0.78) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
html[data-bg] .bw-card {
  background: rgba(10,10,16,0.84) !important;
  backdrop-filter: blur(8px);
  border-color: rgba(255,255,255,0.07) !important;
}
html[data-bg] .bw-modal,
html[data-bg] .bw-set-panel { background: rgba(12,12,18,0.97) !important; }
html[data-bg] .bw-message-input-wrap { background: rgba(10,10,16,0.88) !important; }

/* ════════════════════════════════════════════════════════════
   CARBON – echte JPG-Bilder als Hintergrund
   ════════════════════════════════════════════════════════════ */

html[data-bg="carbon-black"] body {
  background-color: #111 !important;
  background-image:
    radial-gradient(ellipse 70% 35% at 65% 5%, rgba(232,160,32,0.12) 0%, transparent 55%),
    url('/themes/svg/carbon-black.svg') !important;
  background-size: auto, 12px 24px !important;
  background-repeat: no-repeat, repeat !important;
  background-attachment: fixed, local !important;
}
html[data-bg="carbon-black"] .bw-navbar { border-bottom-color: rgba(232,160,32,0.2) !important; }
html[data-bg="carbon-black"] .bw-card   { border-color: rgba(232,160,32,0.2) !important; }

html[data-bg="carbon-blue"] body {
  background-color: #060c1a !important;
  background-image:
    radial-gradient(ellipse 70% 35% at 65% 5%, rgba(56,189,248,0.15) 0%, transparent 55%),
    url('/themes/svg/carbon-blue.svg') !important;
  background-size: auto, 12px 24px !important;
  background-repeat: no-repeat, repeat !important;
  background-attachment: fixed, local !important;
}
html[data-bg="carbon-blue"] .bw-navbar { border-bottom-color: rgba(56,189,248,0.2) !important; }
html[data-bg="carbon-blue"] .bw-card   { border-color: rgba(56,189,248,0.2) !important; }

html[data-bg="carbon-green"] body {
  background-color: #060c06 !important;
  background-image:
    radial-gradient(ellipse 70% 35% at 65% 5%, rgba(74,222,128,0.13) 0%, transparent 55%),
    url('/themes/svg/carbon-green.svg') !important;
  background-size: auto, 12px 24px !important;
  background-repeat: no-repeat, repeat !important;
  background-attachment: fixed, local !important;
}
html[data-bg="carbon-green"] .bw-navbar { border-bottom-color: rgba(74,222,128,0.2) !important; }
html[data-bg="carbon-green"] .bw-card   { border-color: rgba(74,222,128,0.2) !important; }

html[data-bg="carbon-red"] body {
  background-color: #100205 !important;
  background-image:
    radial-gradient(ellipse 70% 35% at 65% 5%, rgba(220,30,30,0.18) 0%, transparent 55%),
    url('/themes/svg/carbon-red.svg') !important;
  background-size: auto, 12px 24px !important;
  background-repeat: no-repeat, repeat !important;
  background-attachment: fixed, local !important;
}
html[data-bg="carbon-red"] .bw-navbar { border-bottom-color: rgba(200,20,20,0.2) !important; }
html[data-bg="carbon-red"] .bw-card   { border-color: rgba(200,20,20,0.2) !important; }

/* ════════════════════════════════════════════════════════════
   NATUR
   ════════════════════════════════════════════════════════════ */

html[data-bg="holz"] body {
  background-color: #3a2010 !important;
  background-image:
    radial-gradient(ellipse 100% 20% at 50% 0%, rgba(255,200,120,0.12) 0%, transparent 50%),
    repeating-linear-gradient(
      88deg,
      rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px,
      transparent 1px, transparent 6px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0px, transparent 35px,
      rgba(0,0,0,0.12) 35px, rgba(0,0,0,0.12) 37px,
      transparent 37px, transparent 70px,
      rgba(255,255,255,0.04) 70px, rgba(255,255,255,0.04) 72px
    ),
    linear-gradient(91deg,
      #4a2a14 0%, #5c3618 12%, #3e2010 25%,
      #6a4020 38%, #4a2a14 50%, #5c3618 63%,
      #3e2010 76%, #6a4020 88%, #4a2a14 100%
    ) !important;
  background-size: auto, 6px 6px, auto, auto !important;
  background-attachment: fixed !important;
}
html[data-bg="holz"] .bw-channel-list,
html[data-bg="holz"] .bw-workspace-rail { background: rgba(20,10,4,0.78) !important; }
html[data-bg="holz"] .bw-navbar { background: rgba(20,10,4,0.88) !important; }
html[data-bg="holz"] .bw-card { background: rgba(25,12,5,0.86) !important; }

html[data-bg="ocean"] body {
  background-color: #040e1c !important;
  background-image:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(0,100,200,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 30% at 20% 80%, rgba(0,60,140,0.15) 0%, transparent 50%),
    repeating-linear-gradient(
      -15deg,
      transparent 0px, transparent 22px,
      rgba(0,100,180,0.07) 22px, rgba(0,100,180,0.07) 24px,
      transparent 24px, transparent 46px,
      rgba(0,80,160,0.05) 46px, rgba(0,80,160,0.05) 48px
    ) !important;
  background-attachment: fixed !important;
}

html[data-bg="granit"] body {
  background-color: #1e1e20 !important;
  background-image:
    radial-gradient(ellipse 60% 30% at 40% 20%, rgba(180,180,200,0.06) 0%, transparent 50%),
    repeating-linear-gradient(47deg, transparent 0, transparent 3px, rgba(255,255,255,0.02) 3px, rgba(255,255,255,0.02) 4px),
    repeating-linear-gradient(137deg, transparent 0, transparent 5px, rgba(0,0,0,0.05) 5px, rgba(0,0,0,0.05) 6px),
    linear-gradient(160deg, #252527 0%, #1e1e20 30%, #28282a 50%, #1c1c1e 70%, #222224 100%) !important;
  background-size: auto, 4px 4px, 6px 6px, auto !important;
  background-attachment: fixed !important;
}

/* ════════════════════════════════════════════════════════════
   SPORT, TECH, ATMOSPHÄRE, RETRO
   ════════════════════════════════════════════════════════════ */

html[data-bg="racing"] body {
  background-color: #0e0203 !important;
  background-image:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(220,30,30,0.20) 0%, transparent 55%),
    repeating-linear-gradient(-55deg, transparent 0px, transparent 18px, rgba(180,0,0,0.12) 18px, rgba(180,0,0,0.12) 20px),
    repeating-linear-gradient( 55deg, transparent 0px, transparent 18px, rgba(100,0,0,0.08) 18px, rgba(100,0,0,0.08) 20px),
    linear-gradient(180deg, #0e0203 0%, #130304 50%, #0e0203 100%) !important;
  background-attachment: fixed !important;
}
html[data-bg="racing"] .bw-navbar { border-bottom-color: rgba(220,30,30,0.25) !important; }

html[data-bg="space"] body {
  background-color: #02020f !important;
  background-image:
    radial-gradient(ellipse 50% 30% at 15% 20%, rgba(80,40,180,0.14) 0%, transparent 55%),
    radial-gradient(1px 1px at 10% 15%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 40%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(2px 2px at 38%  8%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 52%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 68% 28%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 80% 72%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 44% 85%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 18%, rgba(255,255,255,0.6) 0%, transparent 100%),
    linear-gradient(180deg, #02020f 0%, #04041a 100%) !important;
  background-attachment: fixed !important;
}

html[data-bg="matrix"] body {
  background-color: #000900 !important;
  background-image:
    radial-gradient(ellipse 60% 40% at 50% 5%, rgba(0,255,70,0.09) 0%, transparent 55%),
    repeating-linear-gradient(90deg, transparent 0px, transparent 15px, rgba(0,220,60,0.05) 15px, rgba(0,220,60,0.05) 16px),
    repeating-linear-gradient( 0deg, transparent 0px, transparent 15px, rgba(0,220,60,0.04) 15px, rgba(0,220,60,0.04) 16px),
    linear-gradient(180deg, #000900 0%, #001400 100%) !important;
  background-attachment: fixed !important;
}

html[data-bg="sunset"] body {
  background-color: #0a0510 !important;
  background-image:
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(255,80,0,0.25) 0%, rgba(200,20,80,0.15) 30%, transparent 65%),
    radial-gradient(ellipse 70% 40% at 50% 60%, rgba(150,0,200,0.12) 0%, transparent 55%),
    linear-gradient(180deg, #0a0510 0%, #150820 40%, #1e0518 70%, #100308 100%) !important;
  background-attachment: fixed !important;
}

html[data-bg="windows98"] body {
  background-color: #008080 !important;
  background-image:
    linear-gradient(45deg,  #007878 25%, transparent 25%),
    linear-gradient(-45deg, #007878 25%, transparent 25%),
    linear-gradient(45deg,  transparent 75%, #007878 75%),
    linear-gradient(-45deg, transparent 75%, #007878 75%) !important;
  background-size: 8px 8px !important;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0 !important;
  background-attachment: fixed !important;
}
html[data-bg="windows98"] .bw-channel-list,
html[data-bg="windows98"] .bw-workspace-rail { background: rgba(0,90,90,0.85) !important; }
html[data-bg="windows98"] .bw-navbar { background: #c0c0c0 !important; border-bottom: 2px solid #808080 !important; }
html[data-bg="windows98"] .bw-navbar * { color: #000 !important; }
html[data-bg="windows98"] .bw-card { background: #d4d0c8 !important; border: 2px solid; border-color: #fff #808080 #808080 #fff !important; color: #000 !important; }
html[data-bg="windows98"] .bw-card * { color: #000 !important; }