/**
 * page-backgrounds.css
 * Professional Page Backgrounds – rechnung.best 2026
 *
 * ARCHITECTURE:
 * ─────────────────────────────────────────────────────────────────
 * 1. App pages (authenticated, navigation visible):
 *    → Ultra-subtle gradient texture via .main-content::before
 *    → Opacity 0.025–0.045 (barely perceptible, adds depth)
 *    → JS (page-bg-loader.js) upgrades to Unsplash photo if available
 *
 * 2. Auth/Marketing pages (login, register, pricing, onboarding):
 *    → body::before with prominent photo + gradient overlay
 *    → Opacity 0.08–0.12 (visible but tasteful)
 *    → More atmospheric, like Stripe / Notion login pages
 *
 * DESIGN PHILOSOPHY: Linear/Stripe approach
 *    → Gradients as primary visual, photos as enhancement layer
 *    → Never compete with UI, always recede behind content
 * ─────────────────────────────────────────────────────────────────
 */

/* =============================================
   CSS CUSTOM PROPERTIES (per page-context)
   ============================================= */

:root {
  /* Default (fallback) */
  --pbg-opacity: 0.20;
  --pbg-position: center center;
  --pbg-blur: 1.2px;
  --pbg-scale: 1.05;
  --pbg-gradient: linear-gradient(160deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
  --pbg-photo: none;
  /* Content area opacity (used by page-hero-banners.css) */
  --pbg-content-opacity: 0.065;
}

/* =============================================
   DASHBOARD – Clean Blue-Slate
   ============================================= */
body[data-page-context="dashboard"] {
  --pbg-gradient: linear-gradient(135deg,
    #eff6ff 0%, #f0f9ff 30%, #e0f2fe 60%, #f0fdf4 100%);
  --pbg-photo: url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=1920&q=40&auto=format&fit=crop');
  --pbg-opacity: 0.22;
  --pbg-position: center 35%;
}

/* =============================================
   INVOICES – Document-Paper Warmth
   ============================================= */
body[data-page-context="invoices"] {
  --pbg-gradient: linear-gradient(155deg,
    #fafafa 0%, #f8f9fa 40%, #f0f4ff 70%, #fafafa 100%);
  --pbg-photo: url('https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=1920&q=40&auto=format&fit=crop');
  --pbg-opacity: 0.22;
  --pbg-position: center 45%;
}

/* =============================================
   OFFERS – Warm Amber, Business Warmth
   ============================================= */
body[data-page-context="offers"] {
  --pbg-gradient: linear-gradient(150deg,
    #fffbeb 0%, #fef9c3 30%, #fff7ed 60%, #fafaf9 100%);
  --pbg-photo: url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=1920&q=40&auto=format&fit=crop');
  --pbg-opacity: 0.22;
  --pbg-position: center 35%;
}

/* =============================================
   CUSTOMERS – Indigo Trust
   ============================================= */
body[data-page-context="customers"] {
  --pbg-gradient: linear-gradient(150deg,
    #f0f4ff 0%, #e0e7ff 30%, #ede9fe 60%, #f8f9fa 100%);
  --pbg-photo: url('https://images.unsplash.com/photo-1521791136064-7986c2920216?w=1920&q=40&auto=format&fit=crop');
  --pbg-opacity: 0.22;
  --pbg-position: center 30%;
}

/* =============================================
   ARTICLES – Cool Gray Product
   ============================================= */
body[data-page-context="articles"] {
  --pbg-gradient: linear-gradient(160deg,
    #f9fafb 0%, #f3f4f6 40%, #f1f5f9 70%, #f9fafb 100%);
  --pbg-photo: url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=1920&q=40&auto=format&fit=crop');
  --pbg-opacity: 0.22;
  --pbg-position: center 40%;
}

/* =============================================
   CASHBOOK – Financial Green Teal
   ============================================= */
body[data-page-context="cashbook"] {
  --pbg-gradient: linear-gradient(145deg,
    #f0fdf4 0%, #ecfdf5 35%, #f0fdfa 65%, #fafafa 100%);
  --pbg-photo: url('https://images.unsplash.com/photo-1554224154-22dec7ec8818?w=1920&q=40&auto=format&fit=crop');
  --pbg-opacity: 0.22;
  --pbg-position: center 40%;
}

/* =============================================
   POSITIONS/DELIVERIES – Logistics Blue
   ============================================= */
body[data-page-context="positions"] {
  --pbg-gradient: linear-gradient(155deg,
    #f0f9ff 0%, #e0f2fe 30%, #eff6ff 65%, #f8fafc 100%);
  --pbg-photo: url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=1920&q=40&auto=format&fit=crop');
  --pbg-opacity: 0.22;
  --pbg-position: center 40%;
}

/* =============================================
   TRANSPORT – Road/Fleet Gray-Blue
   ============================================= */
body[data-page-context="transport"] {
  --pbg-gradient: linear-gradient(150deg,
    #f1f5f9 0%, #e2e8f0 30%, #f0f4ff 60%, #f8fafc 100%);
  --pbg-photo: url('https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1920&q=40&auto=format&fit=crop');
  --pbg-opacity: 0.22;
  --pbg-position: center 50%;
}

/* =============================================
   CONSTRUCTION SITES – Warm Earth Tones
   ============================================= */
body[data-page-context="construction"] {
  --pbg-gradient: linear-gradient(150deg,
    #fef9c3 0%, #fef3c7 30%, #fff7ed 60%, #fafaf9 100%);
  --pbg-photo: url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1920&q=40&auto=format&fit=crop');
  --pbg-opacity: 0.22;
  --pbg-position: center 40%;
}

/* =============================================
   SETTINGS – Neutral Organized Slate
   ============================================= */
body[data-page-context="settings"] {
  --pbg-gradient: linear-gradient(160deg,
    #f8fafc 0%, #f1f5f9 35%, #e2e8f0 65%, #f8fafc 100%);
  --pbg-photo: url('https://images.unsplash.com/photo-1484788984921-03950022c9ef?w=1920&q=40&auto=format&fit=crop');
  --pbg-opacity: 0.22;
  --pbg-position: center 20%;
}

/* =============================================
   BRANDING – Creative Purple-Pink
   ============================================= */
body[data-page-context="branding"] {
  --pbg-gradient: linear-gradient(145deg,
    #fdf4ff 0%, #fae8ff 30%, #f3e8ff 60%, #f8f9fa 100%);
  --pbg-photo: url('https://images.unsplash.com/photo-1558655146-d09347e92766?w=1920&q=40&auto=format&fit=crop');
  --pbg-opacity: 0.22;
  --pbg-position: center 30%;
}

/* =============================================
   TEMPLATES – Paper-Warm Document
   ============================================= */
body[data-page-context="templates"] {
  --pbg-gradient: linear-gradient(155deg,
    #fafafa 0%, #f8f6f0 35%, #fafaf9 65%, #f9f9f9 100%);
  --pbg-photo: url('https://images.unsplash.com/photo-1471107340929-a87cd0f5b5f3?w=1920&q=40&auto=format&fit=crop');
  --pbg-opacity: 0.22;
  --pbg-position: center 35%;
}

/* =============================================
   TEMPLATE CUSTOMIZATION EDITOR – Creative
   ============================================= */
body[data-page-context="template-customization"] {
  --pbg-gradient: linear-gradient(160deg,
    #fdf4ff 0%, #f3e8ff 40%, #ede9fe 70%, #f8fafc 100%);
  --pbg-photo: url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1920&q=40&auto=format&fit=crop');
  --pbg-opacity: 0.20;
  --pbg-position: center 20%;
}

/* =============================================
   EXPORT – Data / Analytics Blue
   ============================================= */
body[data-page-context="export"] {
  --pbg-gradient: linear-gradient(150deg,
    #eff6ff 0%, #dbeafe 30%, #e0e7ff 60%, #f0f9ff 100%);
  --pbg-photo: url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1920&q=40&auto=format&fit=crop');
  --pbg-opacity: 0.22;
  --pbg-position: center 40%;
}

/* =============================================
   SUPPORT – Calming Sky Blue
   ============================================= */
body[data-page-context="support"] {
  --pbg-gradient: linear-gradient(145deg,
    #f0f9ff 0%, #e0f2fe 35%, #eff6ff 65%, #fafafa 100%);
  --pbg-photo: url('https://images.unsplash.com/photo-1556745757-8d76bdb6984b?w=1920&q=40&auto=format&fit=crop');
  --pbg-opacity: 0.22;
  --pbg-position: center 30%;
}

/* =============================================
   E-INVOICE (XRechnung, ZUGFeRD) – Tech Blue
   ============================================= */
body[data-page-context="e-invoice"] {
  --pbg-gradient: linear-gradient(150deg,
    #eff6ff 0%, #dbeafe 25%, #e0e7ff 55%, #eff6ff 100%);
  --pbg-photo: url('https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=1920&q=40&auto=format&fit=crop');
  --pbg-opacity: 0.22;
  --pbg-position: center 35%;
}

/* =============================================
   PICKUP LOCATIONS / BAUSTELLEN – Map Green
   ============================================= */
body[data-page-context="locations"] {
  --pbg-gradient: linear-gradient(150deg,
    #f0fdf4 0%, #dcfce7 30%, #ecfdf5 60%, #fafafa 100%);
  --pbg-photo: url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=1920&q=40&auto=format&fit=crop');
  --pbg-opacity: 0.22;
  --pbg-position: center 35%;
}

/* =============================================
   AUTH PAGES – Login, Register, Verify, Reset
   ============================================= */
body[data-page-context="auth"],
body[data-page-context="auth"] .login-wrapper {
  position: relative;
}

body[data-page-context="auth"] {
  --pbg-gradient: linear-gradient(145deg,
    #0f172a 0%, #1e3a5f 50%, #1e40af 100%);
  --pbg-photo: url('https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=1920&q=60&auto=format&fit=crop');
  --pbg-opacity: 0.25;
  --pbg-blur: 3px;
  --pbg-position: center 40%;
}

/* =============================================
   ONBOARDING – Fresh, Welcoming Blue
   ============================================= */
body[data-page-context="onboarding"] {
  --pbg-gradient: linear-gradient(150deg,
    #eff6ff 0%, #dbeafe 30%, #e0f2fe 65%, #f0fdf4 100%);
  --pbg-photo: url('https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=1920&q=60&auto=format&fit=crop');
  --pbg-opacity: 0.22;
  --pbg-blur: 2px;
  --pbg-position: center 30%;
}

/* =============================================
   PRICING – Success Green Premium
   ============================================= */
body[data-page-context="pricing"] {
  --pbg-gradient: linear-gradient(150deg,
    #f0fdf4 0%, #dcfce7 25%, #ecfdf5 50%, #eff6ff 75%, #e0e7ff 100%);
  --pbg-photo: url('https://images.unsplash.com/photo-1507679799987-c73779587ccf?w=1920&q=60&auto=format&fit=crop');
  --pbg-opacity: 0.22;
  --pbg-blur: 2px;
  --pbg-position: center 25%;
}

/* =============================================
   LANDING PAGE (index.html) – Bold Dark
   ============================================= */
body[data-page-context="landing"] {
  --pbg-gradient: linear-gradient(145deg,
    #0f172a 0%, #1e3a5f 40%, #1e40af 80%, #0ea5e9 100%);
  --pbg-photo: url('https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=1920&q=70&auto=format&fit=crop');
  --pbg-opacity: 0.22;
  --pbg-blur: 0px;
  --pbg-position: center 40%;
}

/* =============================================
   DRIVER DASHBOARD
   ============================================= */
body[data-page-context="driver"] {
  --pbg-gradient: linear-gradient(155deg,
    #f0f9ff 0%, #e0f2fe 35%, #eff6ff 65%, #fafafa 100%);
  --pbg-photo: url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=1920&q=40&auto=format&fit=crop');
  --pbg-opacity: 0.22;
  --pbg-position: center 40%;
}

/* =============================================
   ADMIN PAGES
   ============================================= */
body[data-page-context="admin"] {
  --pbg-gradient: linear-gradient(160deg,
    #f8fafc 0%, #f1f5f9 35%, #eff6ff 65%, #f8fafc 100%);
  --pbg-photo: url('https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?w=1920&q=40&auto=format&fit=crop');
  --pbg-opacity: 0.22;
  --pbg-position: center 20%;
}

/* =============================================
   APP PAGES – Main Background Application
   (.main-content exists on all app pages)
   ============================================= */

.main-content {
  position: relative;
  isolation: isolate;
}

.main-content::before {
  content: '';
  position: fixed;
  inset: 0;

  /* Layered approach: photo on top, gradient always below.
     When --pbg-photo is 'none', gradient shows through. ✓ */
  background-image: var(--pbg-photo), var(--pbg-gradient);
  background-size: cover, cover;
  background-position: var(--pbg-position, center), center;
  background-attachment: local, local;

  opacity: var(--pbg-opacity, 0.035);
  filter: blur(var(--pbg-blur, 0.8px)) saturate(0.9);
  transform: scale(var(--pbg-scale, 1.04));
  pointer-events: none;
  z-index: -1;
  will-change: opacity;
  transition: opacity 0.8s ease;
}

/* =============================================
   AUTH / MARKETING PAGES
   (no .main-content, apply to body)
   ============================================= */

body[data-page-context="auth"]::before,
body[data-page-context="onboarding"]::before,
body[data-page-context="pricing"]::before,
body[data-page-context="landing"]::before {
  content: '';
  position: fixed;
  inset: 0;

  /* Layered: photo on top, gradient always below ✓ */
  background-image: var(--pbg-photo), var(--pbg-gradient);
  background-size: cover, cover;
  background-position: var(--pbg-position, center), center;

  opacity: var(--pbg-opacity, 0.1);
  filter: blur(var(--pbg-blur, 3px)) saturate(0.85);
  transform: scale(1.05);
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.8s ease;
}

/* =============================================
   DASHBOARD HERO PHOTO SECTION
   ============================================= */

.dashboard-hero-photo {
  position: relative;
  overflow: hidden;
}

.dashboard-hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=1400&q=60&auto=format&fit=crop');
  background-size: cover;
  background-position: center 35%;
  opacity: 0.07;
  z-index: 0;
  border-radius: inherit;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.dashboard-hero-photo > * {
  position: relative;
  z-index: 1;
}

/* =============================================
   SETTINGS / BRANDING PAGE HEADER PHOTO
   ============================================= */

.page-header-with-photo {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  margin-bottom: 0;
}

.page-header-with-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  opacity: 0.07;
  z-index: 0;
  border-radius: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.page-header-with-photo > * {
  position: relative;
  z-index: 1;
}

body[data-page-context="branding"] .page-header-with-photo::after {
  background-image: url('https://images.unsplash.com/photo-1558655146-d09347e92766?w=1200&q=60&auto=format&fit=crop');
}

body[data-page-context="settings"] .page-header-with-photo::after {
  background-image: url('https://images.unsplash.com/photo-1484788984921-03950022c9ef?w=1200&q=60&auto=format&fit=crop');
}

body[data-page-context="templates"] .page-header-with-photo::after {
  background-image: url('https://images.unsplash.com/photo-1586281380349-632531db7ed4?w=1200&q=60&auto=format&fit=crop');
}

/* =============================================
   DARK MODE ADJUSTMENTS
   ============================================= */

[data-theme="dark"] .main-content::before {
  opacity: calc(var(--pbg-opacity, 0.07) * 0.4) !important;
  filter: blur(var(--pbg-blur, 1.2px)) saturate(0.3) invert(1) brightness(0.15);
}

[data-theme="dark"] body[data-page-context="auth"]::before,
[data-theme="dark"] body[data-page-context="onboarding"]::before,
[data-theme="dark"] body[data-page-context="pricing"]::before {
  opacity: calc(var(--pbg-opacity, 0.15) * 0.5) !important;
  filter: blur(5px) saturate(0.4) brightness(0.25);
}

[data-theme="dark"] .dashboard-hero-photo::after {
  opacity: 0.03 !important;
  filter: brightness(0.3);
}

[data-theme="dark"] .page-header-with-photo::after {
  opacity: 0.04 !important;
  filter: brightness(0.25);
}

/* =============================================
   REDUCED MOTION
   ============================================= */

@media (prefers-reduced-motion: reduce) {
  .main-content::before,
  body[data-page-context]::before {
    transition: none;
    filter: none;
    transform: none;
  }
}

/* =============================================
   PRINT
   ============================================= */

@media print {
  .main-content::before,
  body::before,
  .dashboard-hero-photo::after,
  .page-header-with-photo::after {
    display: none !important;
  }
}