/* MATRIX V87.3 — CYBERPUNK 2077: per-card colors · max contrast · compact · cinematic HUD */

/* ══ ROOT VARS ═══════════════════════════════════════════════════════ */
body.fxl-v87 {
  --cp-cyan:    #00e5ff;
  --cp-yellow:  #ffe600;
  --cp-magenta: #ff006e;
  --cp-green:   #00ff87;
  --cp-bg:      #050810;
  --cp-card:    rgba(3, 12, 28, 0.96);
  --cp-text:    rgba(205, 230, 255, 0.92);
  background: var(--cp-bg) !important;
}

/* ══ CANVAS (matrix rain, fixed behind everything) ═══════════════════ */
#fxl-universe-canvas {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ══ NOISE GRAIN ══════════════════════════════════════════════════════ */
body.fxl-v87::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
  opacity: 0.38;
  mix-blend-mode: overlay;
}

/* ══ CONTENT WRAPPER — transparent so matrix rain shows ═════════════ */
body.fxl-v87 .content-wrapper {
  background: transparent !important;
  position: relative;
  z-index: 2;
}

/* ══ ADMIN SIDEBAR — keep white for contrast with dark content ═══════ */
body.fxl-v87 aside.side-bar {
  z-index: 10 !important;
}

/* ══ HEADER — COMMAND CENTER ═════════════════════════════════════════ */
[data-fxl-header] {
  background: linear-gradient(160deg, #040710 0%, #070d1f 55%, #040810 100%) !important;
  border-bottom: 1px solid rgba(0, 229, 255, 0.22) !important;
  box-shadow:
    0 1px 0 rgba(0, 229, 255, 0.08),
    0 6px 40px rgba(0, 0, 0, 0.7) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Grid circuit lines */
[data-fxl-header]::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.028) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

/* Sweep line */
[data-fxl-header]::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cp-cyan) 35%, var(--cp-magenta) 65%, transparent);
  opacity: 0.35;
  animation: fxl-hdr-sweep 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes fxl-hdr-sweep {
  0%   { top: 0%;   opacity: 0; }
  5%   { opacity: 0.45; }
  92%  { opacity: 0.25; }
  100% { top: 100%; opacity: 0; }
}

[data-fxl-header] > * { position: relative; z-index: 2; }

/* ══ TITLE — NEON MONO, ONE LINE ══════════════════════════════════════ */
[data-fxl-title] {
  color: var(--cp-cyan) !important;
  -webkit-text-fill-color: var(--cp-cyan) !important;
  text-shadow:
    0 0 16px rgba(0, 229, 255, 0.8),
    0 0 36px rgba(0, 229, 255, 0.35),
    0 0 70px rgba(0, 229, 255, 0.12) !important;
  font-family: 'Courier New', 'Lucida Console', monospace !important;
  font-size: clamp(1.05rem, 1.95vw, 1.85rem) !important;
  letter-spacing: 0.025em !important;
  white-space: nowrap !important;
  overflow: visible !important;
  position: relative;
  z-index: 2;
  transition: transform 0.12s ease;
}

/* Glitch keyframe */
@keyframes fxl-glitch {
  0%,82%,100% { clip-path: none; transform: none; -webkit-text-fill-color: var(--cp-cyan); }
  83% { clip-path: polygon(0 15%,100% 15%,100% 40%,0 40%); transform: translate(-4px,0); -webkit-text-fill-color: var(--cp-magenta); }
  85% { clip-path: polygon(0 60%,100% 60%,100% 80%,0 80%); transform: translate(4px,0);  -webkit-text-fill-color: var(--cp-cyan); }
  87% { clip-path: polygon(0 5%,100% 5%,100% 25%,0 25%);  transform: translate(-2px,1px); -webkit-text-fill-color: var(--cp-yellow); }
  89% { clip-path: none; transform: none; opacity: 0.85; }
  91% { clip-path: polygon(0 45%,100% 45%,100% 60%,0 60%); transform: translate(3px,0); }
  93% { clip-path: none; transform: none; -webkit-text-fill-color: var(--cp-cyan); }
}
[data-fxl-title].fxl-glitch-on { animation: fxl-glitch 0.45s steps(1) forwards; }

/* Char entrance */
.fxl-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px) scaleY(0.5);
  animation: fxl-char-in 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes fxl-char-in { to { opacity: 1; transform: translateY(0) scaleY(1); } }

/* ══ FILTER BUTTON — cyberpunk styled ══════════════════════════════════ */
[data-fxl-header] button[class*="tw-rounded"],
[data-fxl-header] button[class*="tw-bg-white"],
[data-fxl-header] button[class*="tw-bg-primary"] {
  background: rgba(0, 229, 255, 0.07) !important;
  border: 1px solid rgba(0, 229, 255, 0.38) !important;
  color: var(--cp-cyan) !important;
  box-shadow: 0 0 12px rgba(0,229,255,0.18), inset 0 0 6px rgba(0,229,255,0.04) !important;
  text-shadow: 0 0 8px rgba(0,229,255,0.55) !important;
  -webkit-text-fill-color: var(--cp-cyan) !important;
}
[data-fxl-header] button svg { stroke: var(--cp-cyan) !important; }

/* ══ KPI CARDS — per-card color identity ══════════════════════════════ */
[data-fxl-card] {
  background: var(--cp-card) !important;
  backdrop-filter: blur(16px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(115%) !important;
  /* border uses per-card CSS var */
  border: 1px solid var(--fxl-border, rgba(0,229,255,0.35)) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0 20px var(--fxl-glow, rgba(0,229,255,0.14)),
    0 10px 40px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4) !important;
  clip-path: polygon(
    0 0,
    calc(100% - 11px) 0,
    100% 11px,
    100% 100%,
    11px 100%,
    0 calc(100% - 11px)
  ) !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
  position: relative !important;
  overflow: visible !important;
  animation: fxl-boot 0.42s ease both;
  /* compact padding */
  min-height: 0 !important;
}

[data-fxl-card]:hover {
  border-color: var(--fxl-border-h, rgba(0,229,255,0.65)) !important;
  box-shadow:
    0 0 28px var(--fxl-glow-h, rgba(0,229,255,0.28)),
    0 0 60px var(--fxl-glow, rgba(0,229,255,0.1)),
    0 20px 60px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

@keyframes fxl-boot {
  0%  { opacity: 0; transform: scaleX(0.04) scaleY(1);  filter: brightness(5); }
  35% { opacity: 1; transform: scaleX(1)    scaleY(1);  filter: brightness(2); }
  65% { filter: brightness(0.5); }
  82% { filter: brightness(1.6); }
  100%{ filter: none; }
}

/* Tilt sheen */
[data-fxl-card]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 65% 45% at var(--sx, 50%) var(--sy, 50%),
    var(--fxl-sheen, rgba(0,229,255,0.1)) 0%,
    transparent 70%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s;
  z-index: 1;
}
[data-fxl-card]:hover::after { opacity: 1; }

/* Compact inner padding */
[data-fxl-card] > div { padding: 0.65rem !important; }
[data-fxl-card] .tw-p-4,
[data-fxl-card] [class*="sm:tw-p-5"] { padding: 0.65rem !important; }
[data-fxl-card] .tw-gap-4 { gap: 0.75rem !important; }

/* ══ CARD ICON — per-card color ═══════════════════════════════════════ */
[data-fxl-card] .tw-rounded-full,
[data-fxl-card] [class*="tw-rounded-full"] {
  background: var(--fxl-icon-bg, rgba(0,229,255,0.1)) !important;
  border: 1.5px solid var(--fxl-icon-border, rgba(0,229,255,0.4)) !important;
  box-shadow:
    0 0 12px var(--fxl-glow, rgba(0,229,255,0.22)),
    inset 0 0 8px var(--fxl-icon-bg, rgba(0,229,255,0.06)) !important;
  transition:
    box-shadow 0.2s ease,
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  width: 2.4rem !important;
  height: 2.4rem !important;
  min-width: 2.4rem !important;
}
[data-fxl-card] .tw-rounded-full svg,
[data-fxl-card] [class*="tw-rounded-full"] svg {
  stroke: var(--fxl-scan, #00e5ff) !important;
  stroke-width: 2 !important;
  width: 1.15rem !important;
  height: 1.15rem !important;
}
[data-fxl-card]:hover .tw-rounded-full,
[data-fxl-card]:hover [class*="tw-rounded-full"] {
  box-shadow: 0 0 22px var(--fxl-glow-h, rgba(0,229,255,0.5)), inset 0 0 10px var(--fxl-icon-bg, rgba(0,229,255,0.1)) !important;
  transform: scale(1.12) rotate(6deg) !important;
}

/* ══ CARD LABEL — per-card color, readable ════════════════════════════ */
[data-fxl-card] p.tw-text-sm,
[data-fxl-card] p.tw-text-gray-500,
[data-fxl-card] [class*="tw-text-gray-5"] {
  color: var(--fxl-label, rgba(0,229,255,0.88)) !important;
  -webkit-text-fill-color: var(--fxl-label, rgba(0,229,255,0.88)) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 0.62rem !important;
  font-family: 'Courier New', monospace !important;
  text-shadow: 0 0 6px var(--fxl-glow, rgba(0,229,255,0.4)) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ══ STAT VALUES — neon yellow, max contrast ══════════════════════════ */
[data-fxl-stat] {
  color: var(--cp-yellow) !important;
  -webkit-text-fill-color: var(--cp-yellow) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  text-shadow:
    0 0 5px rgba(255,230,0,1),
    0 0 12px rgba(255,230,0,0.65),
    0 0 24px rgba(255,230,0,0.25) !important;
  filter: none !important;
  font-family: 'Courier New', 'Lucida Console', monospace !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}

/* ══ CORNER BRACKETS — per-card color ════════════════════════════════ */
.fxl-brk {
  position: absolute;
  width: 9px; height: 9px;
  pointer-events: none;
  z-index: 20;
  transition: box-shadow 0.2s, opacity 0.2s;
  opacity: 0.85;
  border-color: var(--fxl-scan, #00e5ff) !important;
}
.fxl-brk-tl { top: 4px;  left: 4px;   border-top:    1.5px solid; border-left:   1.5px solid; }
.fxl-brk-tr { top: 4px;  right: 15px; border-top:    1.5px solid; border-right:  1.5px solid; }
.fxl-brk-bl { bottom: 4px; left: 4px;  border-bottom: 1.5px solid; border-left:   1.5px solid; }
.fxl-brk-br { bottom: 4px; right: 15px;border-bottom: 1.5px solid; border-right:  1.5px solid; }
[data-fxl-card]:hover .fxl-brk { opacity: 1; box-shadow: 0 0 5px var(--fxl-scan, #00e5ff); }

/* ══ SCANNING LINE — per-card color ══════════════════════════════════ */
.fxl-scan-el {
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, var(--fxl-scan, #00e5ff) 35%, rgba(255,255,255,0.6) 50%, var(--fxl-scan, #00e5ff) 65%, transparent 100%);
  pointer-events: none;
  z-index: 15;
  animation: fxl-scan-move 3.2s ease-in-out infinite;
  box-shadow: 0 0 6px var(--fxl-scan, #00e5ff);
}
@keyframes fxl-scan-move {
  0%   { top: -3%;  opacity: 0; }
  4%   { opacity: 1; }
  88%  { opacity: 0.5; }
  100% { top: 103%; opacity: 0; }
}

/* ══ STATUS DOT ════════════════════════════════════════════════════════ */
@keyframes fxl-dot-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.28; box-shadow: none; }
}

/* ══ SYSTEM READOUT ════════════════════════════════════════════════════ */
.fxl-readout {
  position: absolute;
  bottom: 4px;
  right: 14px;
  font-size: 0.48rem;
  font-family: 'Courier New', monospace;
  color: var(--fxl-label, rgba(0,229,255,0.55));
  -webkit-text-fill-color: currentColor;
  letter-spacing: 0.07em;
  z-index: 15;
  pointer-events: none;
  opacity: 0.7;
  text-shadow: 0 0 4px var(--fxl-scan, #00e5ff);
}
.fxl-readout::after {
  content: '█';
  animation: fxl-blink 1.1s step-end infinite;
  opacity: 0.7;
}
@keyframes fxl-blink { 50% { opacity: 0; } }

/* ══ CUSTOM CURSOR ════════════════════════════════════════════════════ */
@media (pointer: fine) {
  body.fxl-v87 { cursor: none !important; }
  body.fxl-v87 a, body.fxl-v87 button,
  body.fxl-v87 [role="button"], body.fxl-v87 select,
  body.fxl-v87 input, body.fxl-v87 label { cursor: none !important; }
}
#fxl-cursor-outer {
  position: fixed; top: 0; left: 0;
  width: 30px; height: 30px;
  pointer-events: none; z-index: 99998;
  transform: translate(-50%,-50%);
  will-change: left, top;
  border: 1.5px solid var(--cp-cyan);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0,229,255,0.55), inset 0 0 5px rgba(0,229,255,0.1);
  transition: width 0.18s, height 0.18s, border-color 0.18s, box-shadow 0.18s;
}
#fxl-cursor-outer::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(0,229,255,0.28);
  border-radius: 50%;
}
#fxl-cursor-outer::after {
  content: '';
  position: absolute;
  inset: -4px;
  background:
    linear-gradient(var(--cp-cyan),var(--cp-cyan)) top    left  / 5px 1.5px no-repeat,
    linear-gradient(var(--cp-cyan),var(--cp-cyan)) top    right / 5px 1.5px no-repeat,
    linear-gradient(var(--cp-cyan),var(--cp-cyan)) bottom left  / 5px 1.5px no-repeat,
    linear-gradient(var(--cp-cyan),var(--cp-cyan)) bottom right / 5px 1.5px no-repeat,
    linear-gradient(var(--cp-cyan),var(--cp-cyan)) top    left  / 1.5px 5px no-repeat,
    linear-gradient(var(--cp-cyan),var(--cp-cyan)) top    right / 1.5px 5px no-repeat,
    linear-gradient(var(--cp-cyan),var(--cp-cyan)) bottom left  / 1.5px 5px no-repeat,
    linear-gradient(var(--cp-cyan),var(--cp-cyan)) bottom right / 1.5px 5px no-repeat;
}
#fxl-cursor-inner {
  position: fixed; top: 0; left: 0;
  width: 4px; height: 4px;
  background: var(--cp-cyan); border-radius: 50%;
  pointer-events: none; z-index: 99999;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 8px var(--cp-cyan), 0 0 16px rgba(0,229,255,0.7);
  will-change: left, top;
}
#fxl-cursor-lines {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 99997;
  transform: translate(-50%,-50%);
  will-change: left, top;
  width: 0; height: 0;
}
#fxl-cursor-lines::before,
#fxl-cursor-lines::after {
  content: ''; position: absolute;
  background: rgba(0,229,255,0.38);
}
#fxl-cursor-lines::before { width: 1px; height: 20px; left: 0;  top: -10px; }
#fxl-cursor-lines::after  { height: 1px; width: 20px; top: 0;   left: -10px; }

body.fxl-v87.fxl-cursor-hover #fxl-cursor-outer {
  width: 42px; height: 42px;
  border-color: var(--cp-yellow);
  box-shadow: 0 0 18px rgba(255,230,0,0.75), inset 0 0 8px rgba(255,230,0,0.12);
}
body.fxl-v87.fxl-cursor-hover #fxl-cursor-inner {
  background: var(--cp-yellow);
  box-shadow: 0 0 10px var(--cp-yellow), 0 0 20px rgba(255,230,0,0.55);
  width: 5px; height: 5px;
}

/* ══ FLOATING ORBS ════════════════════════════════════════════════════ */
.fxl-orb {
  position: fixed !important; border-radius: 50% !important;
  pointer-events: none !important; z-index: 0 !important;
  will-change: transform !important;
  animation: fxl-orb-drift linear infinite !important;
}
@keyframes fxl-orb-drift {
  0%   { transform: translate(0,0) scale(1); }
  32%  { transform: translate(38px,-52px) scale(1.06); }
  67%  { transform: translate(-28px,-32px) scale(0.93); }
  100% { transform: translate(0,0) scale(1); }
}

/* ══ SCROLL REVEAL ════════════════════════════════════════════════════ */
.fxl-reveal { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
.fxl-reveal.fxl-visible { opacity: 1; transform: translateY(0); }

/* ══ DATA BOXES — dark HUD ════════════════════════════════════════════ */
body.fxl-v87 .content-wrapper .box {
  background: rgba(3, 10, 24, 0.93) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(0,229,255,0.1) !important;
  box-shadow: 0 4px 28px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,229,255,0.03) !important;
  border-radius: 0.5rem !important;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
body.fxl-v87 .content-wrapper .box:hover {
  border-color: rgba(0,229,255,0.2) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7), 0 0 20px rgba(0,229,255,0.07) !important;
}
body.fxl-v87 .content-wrapper .box-header {
  background: rgba(0,229,255,0.03) !important;
  border-bottom: 1px solid rgba(0,229,255,0.1) !important;
}
body.fxl-v87 .content-wrapper .box-title {
  color: var(--cp-cyan) !important;
  -webkit-text-fill-color: var(--cp-cyan) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  font-family: 'Courier New', monospace !important;
  font-size: 0.78rem !important;
  text-shadow: 0 0 8px rgba(0,229,255,0.45);
}
body.fxl-v87 .content-wrapper .box-header .btn {
  background: rgba(0,229,255,0.07) !important;
  border: 1px solid rgba(0,229,255,0.22) !important;
  color: var(--cp-cyan) !important;
}

/* ══ DATATABLES — dark rows + pagination ══════════════════════════════ */
body.fxl-v87 table.dataTable,
body.fxl-v87 .dataTables_wrapper {
  color: var(--cp-text) !important;
  background: transparent !important;
}
body.fxl-v87 table.dataTable thead th,
body.fxl-v87 table.dataTable thead td {
  background: rgba(0,229,255,0.04) !important;
  color: var(--cp-cyan) !important;
  -webkit-text-fill-color: var(--cp-cyan) !important;
  border-color: rgba(0,229,255,0.12) !important;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}
body.fxl-v87 table.dataTable tbody tr {
  background: rgba(0,229,255,0.015) !important;
  border-color: rgba(0,229,255,0.06) !important;
}
body.fxl-v87 table.dataTable tbody tr.odd {
  background: rgba(0,229,255,0.008) !important;
}
body.fxl-v87 table.dataTable tbody tr:hover td {
  background: rgba(0,229,255,0.06) !important;
}
body.fxl-v87 table.dataTable tbody td {
  color: var(--cp-text) !important;
  border-color: rgba(0,229,255,0.05) !important;
}
body.fxl-v87 .dataTables_info,
body.fxl-v87 .dataTables_length label,
body.fxl-v87 .dataTables_filter label {
  color: rgba(0,229,255,0.55) !important;
}
body.fxl-v87 .dataTables_paginate .paginate_button {
  background: rgba(0,229,255,0.05) !important;
  border: 1px solid rgba(0,229,255,0.14) !important;
  color: rgba(0,229,255,0.65) !important;
  border-radius: 4px !important;
}
body.fxl-v87 .dataTables_paginate .paginate_button:not(.disabled):hover {
  background: rgba(0,229,255,0.12) !important;
  border-color: rgba(0,229,255,0.35) !important;
  color: var(--cp-cyan) !important;
}
body.fxl-v87 .dataTables_paginate .paginate_button.current,
body.fxl-v87 .dataTables_paginate .paginate_button.current:hover {
  background: rgba(0,229,255,0.16) !important;
  border-color: rgba(0,229,255,0.45) !important;
  color: var(--cp-cyan) !important;
  box-shadow: 0 0 8px rgba(0,229,255,0.25) !important;
}

/* ══ CHARTS — chartist / chart.js dark theme ══════════════════════════ */
body.fxl-v87 .ct-grid                { stroke: rgba(0,229,255,0.1) !important; }
body.fxl-v87 .ct-label               { color: rgba(0,229,255,0.5) !important; fill: rgba(0,229,255,0.5) !important; }
body.fxl-v87 .ct-series-a .ct-line,
body.fxl-v87 .ct-series-a .ct-point  { stroke: var(--cp-cyan) !important; }
body.fxl-v87 .ct-series-a .ct-area   { fill: rgba(0,229,255,0.08) !important; }
body.fxl-v87 .ct-series-b .ct-line,
body.fxl-v87 .ct-series-b .ct-point  { stroke: var(--cp-green) !important; }
/* Chart.js canvas bg */
body.fxl-v87 canvas { filter: hue-rotate(185deg) saturate(1.5); }

/* ══ SELECT2 DARK ═════════════════════════════════════════════════════ */
body.fxl-v87 .select2-container .select2-selection {
  background: rgba(0,229,255,0.05) !important;
  border: 1px solid rgba(0,229,255,0.22) !important;
  color: var(--cp-text) !important;
}
body.fxl-v87 .select2-container .select2-selection__rendered {
  color: var(--cp-text) !important;
}
body.fxl-v87 .select2-dropdown {
  background: #080d1e !important;
  border: 1px solid rgba(0,229,255,0.25) !important;
}
body.fxl-v87 .select2-results__option {
  color: var(--cp-text) !important;
}
body.fxl-v87 .select2-results__option--highlighted {
  background: rgba(0,229,255,0.1) !important;
  color: var(--cp-cyan) !important;
}

/* ══ FORM INPUTS DARK ═════════════════════════════════════════════════ */
body.fxl-v87 .content-wrapper input.form-control,
body.fxl-v87 .content-wrapper select.form-control,
body.fxl-v87 .content-wrapper textarea.form-control {
  background: rgba(0,229,255,0.04) !important;
  border: 1px solid rgba(0,229,255,0.2) !important;
  color: var(--cp-text) !important;
}
body.fxl-v87 .content-wrapper input.form-control:focus,
body.fxl-v87 .content-wrapper select.form-control:focus {
  border-color: rgba(0,229,255,0.5) !important;
  box-shadow: 0 0 0 2px rgba(0,229,255,0.12) !important;
  outline: none !important;
}

/* ══ CUSTOM SCROLLBAR ══════════════════════════════════════════════════ */
body.fxl-v87 ::-webkit-scrollbar { width: 5px; height: 5px; }
body.fxl-v87 ::-webkit-scrollbar-track { background: rgba(0,229,255,0.02); }
body.fxl-v87 ::-webkit-scrollbar-thumb {
  background: rgba(0,229,255,0.2);
  border-radius: 3px;
}
body.fxl-v87 ::-webkit-scrollbar-thumb:hover { background: rgba(0,229,255,0.4); }

/* ══ LINKS IN TABLES ══════════════════════════════════════════════════ */
body.fxl-v87 .content-wrapper a:not(.btn):not([data-fxl-card]) {
  color: var(--cp-cyan) !important;
  text-decoration: none !important;
  transition: text-shadow .15s;
}
body.fxl-v87 .content-wrapper a:not(.btn):hover {
  text-shadow: 0 0 8px rgba(0,229,255,0.7) !important;
}

/* ══ DARK MODE (already dark, keep as-is) ══════════════════════════════ */
:root[data-theme="dark"] [data-fxl-card],
:root[data-theme-effective="dark"] [data-fxl-card] {
  border-color: var(--fxl-border-h, rgba(0,229,255,0.42)) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   MATRIX V87.4 — ZENITH CYBORG
   Boot flip · Hover sweep · HUD strip · Cursor trail · Particle burst
   Box HUD badges · Chartist theming
   ══════════════════════════════════════════════════════════════════════ */

/* ── A. Boot animation — Y-axis 3D perspective flip ─────────────────── */
@keyframes fxl-boot {
  0%  { opacity:0; transform:perspective(500px) rotateY(90deg) scaleX(0.04); filter:brightness(5); }
  28% { opacity:1; transform:perspective(500px) rotateY(0deg)  scaleX(1);   filter:brightness(2); }
  55% { filter:brightness(0.5); }
  78% { filter:brightness(1.6); }
 100% { filter:none; transform:none; }
}

/* ── B. Card hover light sweep (::before — unused in V87.3) ─────────── */
@keyframes fxl-hover-sweep {
  0%   { top:-38%; opacity:0.9; }
  100% { top:130%; opacity:0; }
}
[data-fxl-card]::before {
  content:''; position:absolute;
  left:0; right:0; height:38%; top:-38%;
  background:linear-gradient(180deg, var(--fxl-sheen,rgba(0,229,255,0.15)) 0%, transparent 100%);
  pointer-events:none; z-index:2; opacity:0;
}
[data-fxl-card]:hover::before {
  animation:fxl-hover-sweep 1.1s ease-in-out forwards;
}

/* ── C. HUD status strip above KPI grid ─────────────────────────────── */
#fxl-hud-strip {
  position:relative; display:flex; align-items:center; gap:0.8rem;
  padding:0.28rem 0.75rem; margin-bottom:0.5rem;
  background:rgba(0,229,255,0.04);
  border:1px solid rgba(0,229,255,0.12); border-radius:3px;
  font-family:'Courier New',monospace; font-size:0.58rem;
  color:rgba(0,229,255,0.75); letter-spacing:0.07em; overflow:hidden; z-index:5;
}
#fxl-hud-strip .fxl-strip-dot {
  width:5px; height:5px; border-radius:50%;
  background:var(--cp-cyan); box-shadow:0 0 6px var(--cp-cyan);
  animation:fxl87-dot-pulse 1.6s ease-in-out infinite; flex-shrink:0;
}
#fxl-hud-strip .fxl-strip-sep { color:rgba(0,229,255,0.3); }
#fxl-hud-strip .fxl-strip-proc { margin-left:auto; color:#00ff87; }

/* ── D. Cursor particle trail dots ──────────────────────────────────── */
.fxl-trail-dot {
  position:fixed; border-radius:50%; pointer-events:none;
  z-index:9996; background:var(--cp-cyan); will-change:left,top;
}

/* ── E. Card click particle burst keyframe ──────────────────────────── */
@keyframes fxl87-px {
  to { transform:translate(var(--pxv,0px), var(--pyv,0px)); opacity:0; }
}

/* ── F. Box header HUD badge + overflow / flex fix ──────────────────── */
.fxl-box-hud-badge {
  margin-left:auto; font-family:'Courier New',monospace;
  font-size:0.5rem; color:rgba(0,229,255,0.4);
  letter-spacing:0.08em; white-space:nowrap; flex-shrink:0;
}
body.fxl-v87 .content-wrapper .box-header {
  display:flex !important; align-items:center !important;
}
body.fxl-v87 .content-wrapper .box {
  overflow:visible !important; position:relative !important;
}

/* ── G. Chartist full series + grid + label theming ─────────────────── */
body.fxl-v87 .ct-series-a .ct-line,
body.fxl-v87 .ct-series-a .ct-point { stroke:var(--cp-cyan) !important; }
body.fxl-v87 .ct-series-b .ct-line,
body.fxl-v87 .ct-series-b .ct-point { stroke:var(--cp-yellow) !important; }
body.fxl-v87 .ct-series-c .ct-line,
body.fxl-v87 .ct-series-c .ct-point { stroke:#00ff87 !important; }
body.fxl-v87 .ct-grid               { stroke:rgba(0,229,255,0.07) !important; }
body.fxl-v87 .ct-label {
  fill:rgba(0,229,255,0.45) !important; color:rgba(0,229,255,0.45) !important;
  font-size:0.7rem !important;
}
body.fxl-v87 .ct-series-a .ct-area  { fill:rgba(0,229,255,0.06) !important; }

/* ══════════════════════════════════════════════════════════════════════
   MATRIX V87.5 — CONTRAST REPAIR
   Fondo blanco → oscurecer. Fondo negro → texto blanco/neon.
   Highcharts dark theme. Export buttons. Generic gray-on-dark fixes.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Chart wrapper (tw-bg-gray-50) → dark ────────────────────────── */
body.fxl-v87 [data-fxl-card] [class*="tw-bg-gray-50"],
body.fxl-v87 [data-fxl-card] [class*="tw-bg-gray-100"],
body.fxl-v87 [data-fxl-card] [class*="tw-bg-gray-200"] {
  background-color: rgb(2, 11, 26) !important;
  border-color: rgba(0,229,255,0.1) !important;
}

/* ── 2. Highcharts — complete dark theme ─────────────────────────────── */
/* Chart canvas background */
body.fxl-v87 .highcharts-background         { fill: rgb(2,11,26) !important; }
body.fxl-v87 .highcharts-plot-background    { fill: transparent !important; }

/* All SVG text → light on dark */
body.fxl-v87 .highcharts-root text          { fill: rgba(200,225,255,0.75) !important; }
body.fxl-v87 .highcharts-axis-title text    { fill: rgba(0,229,255,0.62) !important; }

/* Axis lines + ticks → subtle cyan */
body.fxl-v87 .highcharts-axis-line,
body.fxl-v87 .highcharts-tick               { stroke: rgba(0,229,255,0.18) !important; }

/* Grid lines → barely-there cyan */
body.fxl-v87 .highcharts-grid-line         { stroke: rgba(0,229,255,0.07) !important; }

/* Series 0 → cyan line */
body.fxl-v87 .highcharts-graph             { stroke: #00e5ff !important; stroke-width: 2px !important; }
body.fxl-v87 .highcharts-series-0 .highcharts-point,
body.fxl-v87 .highcharts-color-0.highcharts-point {
  fill: #00e5ff !important; stroke: rgb(2,11,26) !important; stroke-width: 1.5px !important;
}
body.fxl-v87 .highcharts-halo.highcharts-color-0 { fill: rgba(0,229,255,0.18) !important; }

/* Series 1 → yellow */
body.fxl-v87 .highcharts-color-1 .highcharts-graph      { stroke: #ffe600 !important; }
body.fxl-v87 .highcharts-color-1.highcharts-point        { fill: #ffe600 !important; }

/* Series 2 → green */
body.fxl-v87 .highcharts-color-2 .highcharts-graph      { stroke: #00ff87 !important; }
body.fxl-v87 .highcharts-color-2.highcharts-point        { fill: #00ff87 !important; }

/* Context menu button (≡) */
body.fxl-v87 .highcharts-button-box        { fill: rgba(0,229,255,0.07) !important; stroke: rgba(0,229,255,0.22) !important; }
body.fxl-v87 .highcharts-button-symbol     { fill: rgba(0,229,255,0.75) !important; stroke: rgba(0,229,255,0.75) !important; }

/* Tooltip — dark glass */
body.fxl-v87 .highcharts-tooltip-box       { fill: rgba(2,11,26,0.97) !important; stroke: #00e5ff !important; }
body.fxl-v87 .highcharts-tooltip text      { fill: rgba(220,240,255,0.95) !important; }

/* Legend */
body.fxl-v87 .highcharts-legend-item text  { fill: rgba(200,225,255,0.82) !important; }

/* ── 3. Export / DataTable action buttons (tw-dw-btn-outline) ─────────── */
body.fxl-v87 [data-fxl-card] [class*="tw-dw-btn-outline"],
body.fxl-v87 [data-fxl-card] .buttons-csv,
body.fxl-v87 [data-fxl-card] .buttons-excel,
body.fxl-v87 [data-fxl-card] .buttons-print,
body.fxl-v87 [data-fxl-card] .buttons-pdf,
body.fxl-v87 [data-fxl-card] .buttons-collection {
  background: rgba(0,229,255,0.05) !important;
  border: 1px solid rgba(0,229,255,0.22) !important;
  color: rgba(0,229,255,0.88) !important;
  -webkit-text-fill-color: rgba(0,229,255,0.88) !important;
  text-shadow: none !important;
}
body.fxl-v87 [data-fxl-card] [class*="tw-dw-btn-outline"]:hover,
body.fxl-v87 [data-fxl-card] [class*="buttons-"]:hover {
  background: rgba(0,229,255,0.13) !important;
  border-color: rgba(0,229,255,0.45) !important;
  color: #00e5ff !important;
  -webkit-text-fill-color: #00e5ff !important;
}

/* ── 4. Section titles (H3/H4/H5 in chart & table cards) → white ─────── */
body.fxl-v87 [data-fxl-card] h3,
body.fxl-v87 [data-fxl-card] h4,
body.fxl-v87 [data-fxl-card] h5 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 0 10px rgba(0,229,255,0.30);
}

/* ── 5. Italic / description text in chart cards → readable ──────────── */
body.fxl-v87 [data-fxl-card] p.tw-italic,
body.fxl-v87 [data-fxl-card] [class*="tw-italic"] {
  color: rgba(180,210,255,0.72) !important;
  -webkit-text-fill-color: rgba(180,210,255,0.72) !important;
}

/* ── 6. Generic Tailwind gray text inside dark cards → force readable ─── */
/* Only targets non-stat, non-label elements */
body.fxl-v87 [data-fxl-card] [class*="tw-text-gray-4"]:not(p.tw-text-sm),
body.fxl-v87 [data-fxl-card] [class*="tw-text-gray-6"]:not(p.tw-text-sm),
body.fxl-v87 [data-fxl-card] [class*="tw-text-gray-7"]:not(p.tw-text-sm),
body.fxl-v87 [data-fxl-card] [class*="tw-text-gray-8"]:not(p.tw-text-sm),
body.fxl-v87 [data-fxl-card] [class*="tw-text-gray-9"]:not(p.tw-text-sm) {
  color: rgba(200,220,255,0.80) !important;
  -webkit-text-fill-color: rgba(200,220,255,0.80) !important;
}

/* ── 7. Selects & DataTable inputs inside dark cards ─────────────────── */
body.fxl-v87 [data-fxl-card] select,
body.fxl-v87 [data-fxl-card] .dataTables_filter input,
body.fxl-v87 [data-fxl-card] .dataTables_length select {
  background: rgba(2,11,26,0.90) !important;
  color: rgba(0,229,255,0.88) !important;
  -webkit-text-fill-color: rgba(0,229,255,0.88) !important;
  border-color: rgba(0,229,255,0.22) !important;
}
body.fxl-v87 [data-fxl-card] select option {
  background: rgb(2,11,26) !important;
  color: rgba(200,225,255,0.9) !important;
}

/* ── 8. DataTable td text → bright white on dark rows ────────────────── */
body.fxl-v87 [data-fxl-card] table.dataTable td,
body.fxl-v87 [data-fxl-card] table.dataTable th {
  color: rgba(210,235,255,0.90) !important;
  -webkit-text-fill-color: rgba(210,235,255,0.90) !important;
}
body.fxl-v87 [data-fxl-card] table.dataTable thead th {
  color: #00e5ff !important;
  -webkit-text-fill-color: #00e5ff !important;
}

/* ── 9. "No hay datos" empty-table row → readable ───────────────────── */
body.fxl-v87 [data-fxl-card] table.dataTable td.dataTables_empty {
  color: rgba(200,225,255,0.60) !important;
  -webkit-text-fill-color: rgba(200,225,255,0.60) !important;
  font-style: italic;
}

/* ── 10. DataTable info + filter + length label text ─────────────────── */
body.fxl-v87 [data-fxl-card] .dataTables_info,
body.fxl-v87 [data-fxl-card] .dataTables_length label,
body.fxl-v87 [data-fxl-card] .dataTables_filter label {
  color: rgba(150,200,255,0.72) !important;
  -webkit-text-fill-color: rgba(150,200,255,0.72) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   MATRIX V87.6 — ZENITH CYBORG: Scan Fix · HC Depth · Pagination · Polish
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Scan line fix: low-opacity override + screen blend ─────────────
   Original keyframe reached opacity:1 at 4% → thick band on charts.
   New: max opacity 0.22, mix-blend-mode:screen so it only adds light.   */
@keyframes fxl-scan-move {
  0%   { top: -3%;   opacity: 0;    }
  5%   { opacity: 0.22; }
  88%  { opacity: 0.10; }
  100% { top: 103%;  opacity: 0;    }
}
body.fxl-v87 .fxl-scan-el {
  mix-blend-mode: screen;
  box-shadow: 0 0 4px var(--fxl-scan, #00e5ff), 0 0 10px var(--fxl-scan, #00e5ff) !important;
}

/* ── 2. Raise Highcharts container above scan line (z:15→20) ──────────
   Ensures chart SVG always renders on top of the scan beam.            */
body.fxl-v87 [data-fxl-card] .highcharts-container {
  position: relative !important;
  z-index: 20 !important;
}

/* ── 3. Highcharts area fill — subtle per-series ─────────────────────── */
body.fxl-v87 .highcharts-series-0 .highcharts-area { fill: rgba(0,229,255,0.06) !important; }
body.fxl-v87 .highcharts-series-1 .highcharts-area { fill: rgba(255,230,0,0.05)  !important; }
body.fxl-v87 .highcharts-series-2 .highcharts-area { fill: rgba(0,255,135,0.05)  !important; }

/* ── 4. DataTable pagination buttons — cyberpunk style ────────────────── */
body.fxl-v87 [data-fxl-card] .dataTables_paginate .paginate_button {
  background: rgba(0,229,255,0.05) !important;
  border: 1px solid rgba(0,229,255,0.18) !important;
  color: rgba(0,229,255,0.75) !important;
  -webkit-text-fill-color: rgba(0,229,255,0.75) !important;
  border-radius: 2px !important;
  font-family: 'Courier New', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.06em !important;
  text-shadow: 0 0 6px rgba(0,229,255,0.35) !important;
  margin: 0 2px !important;
}
body.fxl-v87 [data-fxl-card] .dataTables_paginate .paginate_button:hover {
  background: rgba(0,229,255,0.12) !important;
  border-color: rgba(0,229,255,0.40) !important;
  color: #00e5ff !important;
  -webkit-text-fill-color: #00e5ff !important;
}
body.fxl-v87 [data-fxl-card] .dataTables_paginate .paginate_button.current {
  background: rgba(0,229,255,0.15) !important;
  border-color: rgba(0,229,255,0.55) !important;
  color: #00e5ff !important;
  -webkit-text-fill-color: #00e5ff !important;
  box-shadow: 0 0 8px rgba(0,229,255,0.25) !important;
}
body.fxl-v87 [data-fxl-card] .dataTables_paginate .paginate_button.disabled,
body.fxl-v87 [data-fxl-card] .dataTables_paginate .paginate_button.disabled:hover {
  opacity: 0.30 !important;
  cursor: default !important;
}

/* ── 5. Select dropdown — custom cyan arrow ────────────────────────── */
body.fxl-v87 [data-fxl-card] select,
body.fxl-v87 [data-fxl-card] .dataTables_length select {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(0%2C229%2C255%2C0.7)'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.5rem center !important;
  padding-right: 1.4rem !important;
}

/* ── 6. Table row stripe + hover — cyberpunk style ─────────────────── */
body.fxl-v87 [data-fxl-card] table.dataTable tbody tr {
  background: transparent !important;
  transition: background 0.15s ease !important;
}
body.fxl-v87 [data-fxl-card] table.dataTable tbody tr:nth-child(even) {
  background: rgba(0,229,255,0.03) !important;
}
body.fxl-v87 [data-fxl-card] table.dataTable tbody tr:hover {
  background: rgba(0,229,255,0.08) !important;
}
body.fxl-v87 [data-fxl-card] table.dataTable tbody tr:hover td {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ── 7. Highcharts crosshair + tooltip arrow ─────────────────────── */
body.fxl-v87 .highcharts-crosshair { stroke: rgba(0,229,255,0.30) !important; }
body.fxl-v87 .highcharts-tooltip-box {
  filter: drop-shadow(0 0 8px rgba(0,229,255,0.25)) !important;
}

/* ── 8. Card scan line — extra brightness on KPI cards (0-7) ────────
   KPI cards are shorter, scan line traverses fast; a touch brighter is fine. */
body.fxl-v87 [data-fxl-card] .fxl-scan-el {
  height: 1.5px !important;
}

/* ── 9. HUD strip refinement ─────────────────────────────────────── */
#fxl-hud-strip {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
#fxl-hud-strip::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,0.35), transparent);
  pointer-events: none;
}

/* ── 10. Topbar date badge — readable ──────────────────────────────── */
body.fxl-v87 .fxl-topbar-date,
body.fxl-v87 [class*="fxl-top"] .fxl-date { color: rgba(0,229,255,0.85) !important; }