/* ═════════════════════════════════════════════════════════════════
   FABS DATA WAREHOUSE — style.css
   Glassmorphic dark theme, animations, utilities
   ═════════════════════════════════════════════════════════════════ */

/* ── CSS variables ── */
:root {
  --fabs-navy:  #050B1A;
  --fabs-deep:  #0A1428;
  --fabs-card:  #0F1E38;
  --fabs-line:  #1B3157;
  --fabs-cyan:  #00E5FF;
  --fabs-teal:  #00B8A9;
  --fabs-gold:  #FFB800;
  --fabs-amber: #FF7A00;
  --fabs-mpesa: #43B02A;
  --fabs-dpo:   #1B4F9C;

  --shadow-glow:  0 0 40px -8px rgba(0, 229, 255, 0.45);
  --shadow-glowg: 0 0 40px -8px rgba(255, 184, 0, 0.40);
  --shadow-card:  0 24px 60px -28px rgba(0, 229, 255, 0.35);

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ── Base ── */
html, body { background: var(--fabs-navy); }
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Fixed animated grid backdrop ── */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.055) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 80%);
}

/* ── Floating colour orbs ── */
.bg-orbs {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
  opacity: 0.30;
  animation: fabsFloat 16s ease-in-out infinite;
}
.orb-1 { width: 520px; height: 520px; background: #00E5FF; top: -180px; left: -120px; }
.orb-2 { width: 460px; height: 460px; background: #00B8A9; top: 220px; right: -160px; animation-delay: -5s; }
.orb-3 { width: 380px; height: 380px; background: #FFB800; bottom: -140px; left: 35%; animation-delay: -9s; opacity: 0.16; }

@keyframes fabsFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(30px, -40px, 0) scale(1.08); }
}

/* ── Glass surfaces ── */
.glass {
  background: rgba(15, 30, 56, 0.55);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(0, 229, 255, 0.12);
}
.glass-strong {
  background: rgba(10, 20, 40, 0.86);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 229, 255, 0.18);
}

/* ── Gradient text & borders ── */
.grad-text {
  background: linear-gradient(92deg, #00E5FF 0%, #00B8A9 45%, #FFB800 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.grad-border { position: relative; }
.grad-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0,229,255,.55), rgba(0,184,169,.15) 40%, rgba(255,184,0,.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ── Card hover lift ── */
.card-hover {
  transition: transform 0.35s var(--ease-out),
              box-shadow 0.35s,
              border-color 0.35s;
}
.card-hover:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 229, 255, 0.45);
  box-shadow: 0 24px 60px -28px rgba(0, 229, 255, 0.55);
}

/* ── Buttons ── */
.btn-primary {
  background: linear-gradient(92deg, #00E5FF, #00B8A9);
  color: #02121f;
  font-weight: 700;
  transition: 0.3s;
  box-shadow: 0 10px 34px -12px rgba(0, 229, 255, 0.75);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px -12px rgba(0, 229, 255, 0.95);
}

.btn-gold {
  background: linear-gradient(92deg, #FFB800, #FF7A00);
  color: #1a1000;
  font-weight: 700;
  transition: 0.3s;
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px -14px rgba(255, 184, 0, 0.9);
}

.btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
  transition: 0.3s;
}
.btn-ghost:hover {
  border-color: rgba(0, 229, 255, 0.45);
  background: rgba(0, 229, 255, 0.06);
}

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ── Marquee ── */
.marquee {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: fabsMarquee 26s linear infinite;
}
@keyframes fabsMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Pulse dot ── */
.pulse-dot { position: relative; }
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  border: 1px solid rgba(0, 229, 255, 0.6);
  animation: fabsPing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes fabsPing {
  75%, 100% { transform: scale(2.1); opacity: 0; }
}

/* ── Custom scrollbar ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #050B1A; }
::-webkit-scrollbar-thumb {
  background: #1B3157;
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: #00B8A9; }

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: #1B3157 #050B1A;
}

/* ── Form controls ── */
input, select, textarea { color-scheme: dark; }

.fabs-input {
  width: 100%;
  background: rgba(15, 30, 56, 0.6);
  border: 1px solid rgba(0, 229, 255, 0.15);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  color: #e2e8f0;
  transition: 0.25s;
}
.fabs-input::placeholder { color: #64748b; }
.fabs-input:focus {
  outline: none;
  border-color: rgba(0, 229, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.12);
  background: rgba(15, 30, 56, 0.85);
}

/* Select arrow colour fix */
select.fabs-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2300E5FF'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
  appearance: none;
  -webkit-appearance: none;
}

/* Checkbox / radio accent */
input[type="checkbox"], input[type="radio"] {
  accent-color: #00E5FF;
}

/* ── Accessibility ── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  background: #00E5FF;
  color: #02121f;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  font-weight: 700;
  transition: top 0.25s;
}
.skip-link:focus { top: 1rem; }

/* ── Admin sidebar nav links ── */
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.65rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: #94a3b8;
  transition: 0.2s;
}
.nav-link:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}
.nav-link.active {
  background: linear-gradient(92deg, rgba(0,229,255,.15), rgba(0,184,169,.08));
  color: #00E5FF;
  border-left: 2px solid #00E5FF;
  padding-left: 0.7rem;
}

/* ── Flash message fade-in ── */
.flash-item {
  animation: fabsFlashIn 0.35s var(--ease-out) both;
}
@keyframes fabsFlashIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: none; }
}

/* ── Toast (used by window.fabsToast) ── */
.fabs-toast {
  position: fixed;
  top: 5rem;
  right: 1rem;
  z-index: 60;
  max-width: min(92vw, 380px);
  animation: fabsFlashIn 0.35s var(--ease-out) both;
}

/* ── Dotted grid background for admin ── */
.bg-dots {
  background-image: radial-gradient(rgba(0, 229, 255, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ── Shimmer (skeleton loaders) ── */
.shimmer {
  background: linear-gradient(
    90deg,
    rgba(15, 30, 56, 0.5) 0%,
    rgba(27, 49, 87, 0.8) 50%,
    rgba(15, 30, 56, 0.5) 100%
  );
  background-size: 200% 100%;
  animation: fabsShimmer 1.6s ease-in-out infinite;
}
@keyframes fabsShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Table row hover ── */
.fabs-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* ── Utility: gradient underline on hover ── */
.link-underline {
  position: relative;
}
.link-underline::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: linear-gradient(92deg, #00E5FF, #FFB800);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.link-underline:hover::after { transform: scaleX(1); }

/* ── Responsive fixes ── */
@media (max-width: 640px) {
  .orb-1, .orb-2 { width: 320px; height: 320px; }
  .orb-3 { width: 260px; height: 260px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .orb { animation: none; }
  .marquee { animation: none; }
}
/* ═════════════════════════════════════════════════════════════════
   HERO MOTION — added for animated hero section
   ═════════════════════════════════════════════════════════════════ */

/* Cycling dashboard slideshow */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: heroSlide 12s infinite;
}
.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 4s; }
.hero-slide:nth-child(3) { animation-delay: 8s; }

@keyframes heroSlide {
  0%, 30%   { opacity: 1; transform: translateY(0); }
  33%, 100% { opacity: 0; transform: translateY(-8px); }
}

/* Floating notification cards */
.notif-pop {
  animation: notifPop 6s ease-in-out infinite;
}
.notif-pop.delay-1 { animation-delay: 0s; }
.notif-pop.delay-2 { animation-delay: 2s; }
.notif-pop.delay-3 { animation-delay: 4s; }

@keyframes notifPop {
  0%, 10%   { opacity: 0; transform: translateY(12px) scale(.95); }
  20%, 70%  { opacity: 1; transform: translateY(0) scale(1); }
  80%, 100% { opacity: 0; transform: translateY(-8px) scale(.95); }
}

/* Vertical live feed — continuous scroll */
.feed-scroll {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  animation: feedScroll 20s linear infinite;
}
@keyframes feedScroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
.feed-scroll-wrap {
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

/* Moving dots along SVG paths */
.flow-dot {
  animation: flowDot 4s linear infinite;
}
@keyframes flowDot {
  0%   { offset-distance: 0%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Marquee for logos (slower, gentler) */
.logo-marquee {
  display: flex;
  gap: 2rem;
  width: max-content;
  animation: logoMarquee 40s linear infinite;
}
.logo-marquee:hover { animation-play-state: paused; }
@keyframes logoMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.partner-tile {
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.partner-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -12px rgba(78, 209, 106, 0.4);
}
.partner-tile svg {
  opacity: 0.85;
  transition: opacity .25s, filter .25s;
}
.partner-tile:hover svg {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(78, 209, 106, 0.35));
}
/* Reduced motion: disable everything heavy */
@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .notif-pop,
  .feed-scroll,
  .flow-dot,
  .logo-marquee {
    animation: none !important;
  }
  .hero-slide { opacity: 1; position: relative; }
  .hero-slide:not(:first-child) { display: none; }
}
/* ── Print ── */
@media print {
  .bg-grid, .bg-orbs, header, footer, .btn-primary, .btn-gold, .btn-ghost {
    display: none !important;
  }
  body { background: #fff !important; color: #000 !important; }
  .glass, .glass-strong { background: #fff !important; border: 1px solid #ccc !important; }
}