/* ══════════════════════════════════════════════════════════════════════
   Turtelino — Global Theme
   Light pastel background · floating blobs · defined card shadows
   Link this in every page's <head> AFTER the page's own <style>.
   ══════════════════════════════════════════════════════════════════════ */

/* 2026-07-19 (Olivier): "one of the parts that reduces site speed is our
   links to google, remove them, only use local fonts in the font/
   folder" — this @import was a hidden Google Fonts request riding along
   on theme.css, which 35 pages link, so it was firing sitewide even on
   pages whose own <head> had already been cleaned up. Nunito is fully
   self-hosted already (see fonts.css, linked separately in each page's
   <head> — this file assumes that link is already present and just
   reuses the resulting local @font-face rules). */

/* ── Body & background ─────────────────────────────────────────────── */
body {
  font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif !important;
  background: linear-gradient(160deg, #FFFBF0 0%, #EFF8FF 55%, #FDF0FF 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}
/* 2026-07-28 (Olivier, testing Android: "tremendously slow"): fixed
   backgrounds force expensive full-page repaints on scroll specifically on
   Android Chrome (much worse than desktop/iOS's compositor-friendly
   handling of the same property). Desktop keeps the fixed parallax look;
   mobile just scrolls the background normally with the page. */
@media (max-width:700px) {
  body { background-attachment: scroll !important; }
}

/* ── Animated blob layer ───────────────────────────────────────────── */
.xy-blobs {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  overflow: hidden;
}
.xy-blob {
  position: absolute; border-radius: 50%;
  filter: blur(72px); opacity: 0.18;
  animation: xyBlobDrift 16s ease-in-out infinite;
}
.xy-blob:nth-child(1) { width:520px; height:520px; background:#c4b5fd; top:-140px; left:-120px; animation-delay:0s; }
.xy-blob:nth-child(2) { width:420px; height:420px; background:#86efac; bottom:-100px; right:-80px; animation-delay:-6s; }
.xy-blob:nth-child(3) { width:340px; height:340px; background:#fcd34d; top:40%; left:50%; animation-delay:-11s; }
.xy-blob:nth-child(4) { width:260px; height:260px; background:#93c5fd; top:18%; right:5%; animation-delay:-3s; }
.xy-blob:nth-child(5) { width:200px; height:200px; background:#fda4af; bottom:20%; left:15%; animation-delay:-8s; }

@keyframes xyBlobDrift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(30px,-22px) scale(1.07); }
  66%      { transform: translate(-18px,28px) scale(0.93); }
}

/* 2026-07-28 (Olivier, Android slowness): a blurred element that's also
   being continuously transformed/scaled can't be cached as a simple
   compositor layer — the browser has to redo the (expensive) blur on every
   single frame. That's a heavy, constant tax on a low/mid-range Android
   GPU running site-wide, on every page that loads bg.js. Freezing the
   animation on narrow/mobile viewports (and for anyone with OS-level
   "reduce motion" on) removes the per-frame recompute entirely — the
   blobs still render as a static soft color wash, just no longer drifting. */
@media (max-width:700px) {
  .xy-blob { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .xy-blob { animation: none !important; }
}

/* ── All page content sits above blobs ─────────────────────────────── */
body > *:not(.xy-blobs) { position: relative; z-index: 1; }

/* ── Elevated card shadow (overrides flat shadow on all cards) ──────── */
.card,
.login-card,
.modal,
.table-wrap,
.sidebar,
[class*="card"],
[class*="panel"],
[class*="widget"] {
  box-shadow:
    0 8px 28px rgba(124, 58, 237, 0.11),
    0 2px  8px rgba(0,   0,   0, 0.07),
    0 0    0 1px rgba(124, 58, 237, 0.055) !important;
}

/* ── Navbar glass effect ─────────────────────────────────────────────── */
nav,
.topbar,
.nav-tabs,
.nav-bar {
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* ── Colored top stripe on stat cards ───────────────────────────────── */
.card:not([class*="modal"]) {
  border-top: 4px solid transparent;
  background-clip: padding-box;
  transition: transform .18s, box-shadow .18s !important;
}
.card:not([class*="modal"]):hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 14px 36px rgba(124, 58, 237, 0.16),
    0  4px 12px rgba(0,   0,   0, 0.09) !important;
}

/* ── Slightly rounded inputs ─────────────────────────────────────────── */
input, select, textarea {
  border-radius: 10px !important;
}

/* ── Smooth page transitions ─────────────────────────────────────────── */
.tab-panel { animation: xyFadeIn .22s ease; }
@keyframes xyFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
