/* ============================================================
   VisionLogic AI — Glass layer
   Load LAST, after every other stylesheet.

   This file changes how things look, never how they work.
   No page markup, no class names, no scripts are touched:
   it overrides the existing Tailwind utilities in place.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --vl-void:#04060D;
  --vl-panel:#0A0F1C;
  --vl-edge:rgba(120,160,220,.13);
  --vl-edge-lit:rgba(34,227,245,.30);
  --vl-cyan:#22E3F5;
  --vl-violet:#7C6BFF;
  --vl-text:#EAF0FF;
  --vl-muted:#8697B3;

  --vl-glass-bg:linear-gradient(180deg, rgba(20,28,48,.55) 0%, rgba(8,13,24,.62) 100%);
  --vl-glass-blur:blur(26px) saturate(150%);
  --vl-r:18px;
}

/* ---------- 2. Page shell + ambient colour ----------
   Glass only reads as glass when there is colour behind it.
   These three blurred fields are what the panels sample.     */
body{
  background:var(--vl-void) !important;
  color:var(--vl-text);
  font-family:'Space Grotesk','Poppins',system-ui,sans-serif !important;
  position:relative;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(560px 560px at 88% -6%,  rgba(59,47,168,.55) 0%, transparent 68%),
    radial-gradient(520px 520px at -8% 26%,  rgba(10,106,126,.55) 0%, transparent 68%),
    radial-gradient(460px 460px at 72% 108%, rgba(91,46,122,.42) 0%, transparent 68%);
  filter:blur(30px);
}
/* keeps the aura from washing out long pages */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, rgba(4,6,13,.10) 0%, rgba(4,6,13,.55) 100%);
}

/* ---------- 3. Typography ----------
   font-poppins / font-domine stay in the markup; only what
   they resolve to changes.                                   */
.font-poppins{font-family:'Space Grotesk',sans-serif !important}
.font-domine{font-family:'Space Grotesk',sans-serif !important;font-weight:700 !important;letter-spacing:-.03em}
h1,h2,h3{letter-spacing:-.025em}

/* numbers, IDs and labels read better monospaced */
#finalScore,
#clock,
[class*="tracking-widest"][class*="uppercase"],
td[class*="font-mono"],
.vl-mono{
  font-family:'JetBrains Mono',ui-monospace,monospace !important;
}

/* ---------- 4. Panels → glass ----------
   Every existing panel already carries a backdrop-blur class,
   so this single hook catches them across all pages.         */
[class*="backdrop-blur"]{
  background:var(--vl-glass-bg) !important;
  -webkit-backdrop-filter:var(--vl-glass-blur) !important;
  backdrop-filter:var(--vl-glass-blur) !important;
  border-color:rgba(180,210,255,.15) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09) !important;
}
/* solid dark blocks that are not panels stay readable */
[class*="bg-[#0A1224]"]:not([class*="backdrop-blur"]),
[class*="bg-[#050B18]"]:not([class*="backdrop-blur"]){
  background:rgba(14,20,36,.72) !important;
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border-color:var(--vl-edge) !important;
}

/* one radius language instead of four */
[class*="rounded-[30px]"],
[class*="rounded-[35px]"]{border-radius:var(--vl-r) !important}
[class*="rounded-[24px]"],
[class*="rounded-[16px]"]{border-radius:14px !important}

/* hairlines, unified */
[class*="border-white/5"],
[class*="border-white/10"]{border-color:var(--vl-edge) !important}

/* ---------- 5. Sidebar ----------
   Structure and behaviour untouched — surface only.          */
aside,nav[class*="fixed"],[class*="w-[70px]"],[class*="w-[80px]"]{
  background:rgba(8,12,24,.62) !important;
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
  border-right:1px solid var(--vl-edge) !important;
}

/* ---------- 6. Footer ---------- */
footer{
  background:rgba(7,11,22,.66) !important;
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  backdrop-filter:blur(24px) saturate(150%);
  border-top:1px solid var(--vl-edge) !important;
}
footer a{transition:color .18s ease}
footer a:hover{color:var(--vl-cyan) !important}

/* ---------- 7. Buttons ----------
   Gradients pulled back to one solid key colour so the eye
   knows which button is the important one.                   */
.btn-gradient-flow,
[class*="bg-cybercyan"]{
  background:var(--vl-cyan) !important;
  color:#04060D !important;
  border-color:var(--vl-cyan) !important;
  box-shadow:0 14px 36px -16px var(--vl-cyan) !important;
}
.btn-gradient-flow:hover,
[class*="bg-cybercyan"]:hover{background:#5CEBF9 !important}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--vl-cyan) !important;
  outline-offset:3px;
}

/* ---------- 8. Inputs ---------- */
input,select,textarea,[contenteditable="true"]{
  background:rgba(255,255,255,.04) !important;
  border-color:var(--vl-edge) !important;
  color:var(--vl-text) !important;
}
input:focus,select:focus,textarea:focus,[contenteditable="true"]:focus{
  border-color:var(--vl-edge-lit) !important;
}
::placeholder{color:#5D6B84 !important}

/* ---------- 9. Contrast repair ----------
   The old muted greys sat under 4.5:1. Bad look for a tool
   that flags contrast problems.                              */
[class*="text-white/40"]{color:rgba(234,240,255,.58) !important}
[class*="text-white/50"]{color:rgba(234,240,255,.66) !important}
[class*="text-white/60"]{color:rgba(234,240,255,.74) !important}
.text-txt-muted{color:var(--vl-muted) !important}
.text-txt-secondary{color:#C6D2E6 !important}

/* ---------- 10. History table ---------- */
table tr{background:rgba(255,255,255,.025) !important;transition:background .18s ease}
table tbody tr:hover{background:rgba(34,227,245,.06) !important}

/* ---------- 11. Chrome ---------- */
.custom-scrollbar::-webkit-scrollbar-thumb{background:var(--vl-cyan) !important;opacity:.5}
#loading-overlay{background:var(--vl-void) !important}

/* ---------- 12. Screenshot fallback ----------
   backdrop-filter is invisible to html2canvas and unreliable
   in Puppeteer. Add class="vl-flat" to the node being
   captured — it swaps glass for a matching solid gradient so
   the exported card looks like what is on screen.            */
.vl-flat,
.vl-flat [class*="backdrop-blur"]{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  background:
    radial-gradient(90% 70% at 82% 0%, rgba(124,107,255,.16) 0%, transparent 62%),
    linear-gradient(180deg,#141C30 0%,#0A1020 100%) !important;
}

/* ---------- 13. Quality floor ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}
/* backdrop-filter is expensive on low-end phones */
@media (max-width:640px){
  [class*="backdrop-blur"],aside,footer{
    -webkit-backdrop-filter:blur(14px) saturate(140%) !important;
    backdrop-filter:blur(14px) saturate(140%) !important;
  }
}
@supports not (backdrop-filter: blur(1px)){
  [class*="backdrop-blur"],aside,footer{background:rgba(12,18,32,.92) !important}
}