/* Hub Central — custom styles layered on top of Tailwind CDN */

:root { color-scheme: dark; }

html { scroll-behavior: smooth; }

body {
  background-color: #0B0E17;
  background-image:
    radial-gradient(900px 500px at 85% -10%, rgba(59,130,246,0.10), transparent 60%),
    radial-gradient(700px 400px at -5% 110%, rgba(16,185,129,0.06), transparent 55%);
  background-attachment: fixed;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1E293B; border-radius: 8px; border: 2px solid #0B0E17; }
::-webkit-scrollbar-thumb:hover { background: #334155; }

/* Entrance animation */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-up { animation: fadeUp .5s cubic-bezier(.22,.61,.36,1) both; }
.stagger > * { animation: fadeUp .5s cubic-bezier(.22,.61,.36,1) both; }
.stagger > *:nth-child(1){animation-delay:.02s}
.stagger > *:nth-child(2){animation-delay:.08s}
.stagger > *:nth-child(3){animation-delay:.14s}
.stagger > *:nth-child(4){animation-delay:.20s}
.stagger > *:nth-child(5){animation-delay:.26s}
.stagger > *:nth-child(6){animation-delay:.32s}

/* Nav item */
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem .75rem; border-radius: .625rem;
  color: #94A3B8; font-size: .9rem; font-weight: 500;
  transition: color .18s ease, background-color .18s ease;
}
.nav-item:hover { color: #E2E8F0; background: rgba(148,163,184,0.06); }
.nav-item.active { color: #fff; background: linear-gradient(90deg, rgba(59,130,246,0.16), rgba(59,130,246,0.02)); }
.nav-item.active::before {
  content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  height: 60%; width: 3px; border-radius: 0 3px 3px 0; background: #3B82F6;
}
.nav-item .lucide { width: 18px; height: 18px; }

/* Card hover lift */
.card { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.card-hover:hover { transform: translateY(-2px); border-color: #334155; }

/* Table row hover */
.trow { transition: background-color .15s ease; }
.trow:hover { background: rgba(30,41,59,0.45); }

/* Status dot pulse */
.dot { position: relative; }
.dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 9999px;
  background: currentColor; opacity: .35; animation: ping 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping { 75%,100% { transform: scale(2.2); opacity: 0; } }

/* Chart bars */
@keyframes growBar { from { transform: scaleY(0); opacity: .4; } to { transform: scaleY(1); opacity: 1; } }
.bar { transform-origin: bottom; animation: growBar .7s cubic-bezier(.22,.61,.36,1) both; transition: background-color .2s ease; }

/* Segmented role switch */
.seg { transition: color .2s ease; }
.seg-active { color: #fff; }

/* Focus rings for inputs */
.field {
  background: #182232; color: #F1F5F9; border: 1px solid rgba(51,65,85,0.8);
  border-radius: .625rem; padding: .5rem .75rem; font-size: .875rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field:focus { outline: none; border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59,130,246,0.18); }

/* Modal */
.modal-backdrop { background: rgba(3,6,15,0.72); backdrop-filter: blur(6px); }