/* ═══════════════════════════════════════════════════════
   SBN AI FORCE — Neural Command Center
   ═══════════════════════════════════════════════════════ */

/* ── CSS Variable Defaults (Neural Command) ── */
:root {
  --bg-primary:     #050810;
  --bg-secondary:   #0B0E18;
  --bg-card:        rgba(255,255,255,0.028);
  --bg-sidebar:     rgba(5,8,18,0.90);
  --border-default: rgba(255,255,255,0.06);
  --border-card:    rgba(255,255,255,0.07);
  --border-hover:   rgba(0,229,255,0.4);
  --text-primary:   #FFFFFF;
  --text-secondary: rgba(255,255,255,0.5);
  --text-muted:     rgba(255,255,255,0.25);
  --accent-1:       #7B2FFF;
  --accent-2:       #00E5FF;
  --accent-grad:    linear-gradient(135deg, #7B2FFF, #00E5FF);
  --btn-bg:         linear-gradient(135deg, #7B2FFF, #00B8D9);
  --btn-text:       #FFFFFF;
  --btn-border:     transparent;
  --status-active:  #22C55E;
  --grid-line:      rgba(0,229,255,0.05);
  --bg-pattern:     radial-gradient(circle at 15% 85%, rgba(123,47,255,0.1) 0%, transparent 50%), radial-gradient(circle at 85% 10%, rgba(0,229,255,0.07) 0%, transparent 45%);
  --font-display:   'Oxanium', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;

  --dept-brand-bg:     rgba(123,47,255,0.18);
  --dept-brand-border: rgba(123,47,255,0.4);
  --dept-brand-text:   #A97DFF;
  --dept-brand-dot:    #7B2FFF;
  --dept-hire-bg:      rgba(0,229,255,0.1);
  --dept-hire-border:  rgba(0,229,255,0.32);
  --dept-hire-text:    #00E5FF;
  --dept-hire-dot:     #00E5FF;
  --dept-finn-bg:      rgba(255,140,0,0.15);
  --dept-finn-border:  rgba(255,140,0,0.32);
  --dept-finn-text:    #FFAA44;
  --dept-finn-dot:     #FF8C00;
  --card-glow-brand:   rgba(123,47,255,0.14);
  --card-glow-hire:    rgba(0,229,255,0.1);
  --card-glow-finn:    rgba(255,140,0,0.1);
}

/* Theme switching transition */
.theme-switching * {
  transition: background-color 0.35s ease, background 0.35s ease,
              color 0.35s ease, border-color 0.35s ease !important;
}

/* ─── Keyframes (preserved for existing components) ─── */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes msgIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%            { transform: translateY(-7px); opacity: 1; }
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* ─── New Neural Keyframes ─── */

@keyframes statusGlow {
  0%, 100% {
    box-shadow: 0 0 5px 1px rgba(34, 197, 94, 0.7);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 12px 4px rgba(34, 197, 94, 0.15);
    transform: scale(1.4);
  }
}

@keyframes btnShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes scanlineSwipe {
  0%   { transform: translateX(-120%) skewX(-12deg); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(320%) skewX(-12deg); opacity: 0; }
}

@keyframes sidebarItemIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes dotGridPulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

@keyframes bloomFloat {
  0%, 100% { transform: scale(1) translate(0, 0); }
  50%       { transform: scale(1.08) translate(-10px, 10px); }
}

/* ─── Legacy utility classes (used by other components) ─── */

.animate-fade-in      { animation: fadeIn 0.3s ease both; }
.animate-msg-in       { animation: msgIn 0.4s ease both; }
.animate-pulse-status { animation: statusPulse 2s ease-in-out infinite; }
.animate-bounce-dot   { animation: bounce 1.4s ease-in-out infinite; }
.animate-slide-in     { animation: slideIn 0.3s ease both; }

.animate-shimmer {
  background: linear-gradient(90deg, #0c0e1a 0%, #161a2e 50%, #0c0e1a 100%);
  background-size: 600px 100%;
  animation: shimmer 1.6s infinite linear;
}

/* ─── Neural background ─── */

.neural-grid-bg {
  background-color: var(--bg-primary);
  background-image: radial-gradient(circle, var(--grid-line) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* App root background pattern via pseudo-element */
.app-root::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--bg-pattern);
  pointer-events: none;
  z-index: 0;
  transition: background 0.5s ease;
}

/* ─── Glass panels ─── */

.glass-sidebar {
  background: var(--bg-sidebar);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid var(--border-default);
  box-shadow: 4px 0 32px rgba(0,0,0,0.25);
  transition: background 0.35s ease, border-color 0.35s ease;
}

.glass-header {
  background: var(--bg-sidebar);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border-default);
  transition: background 0.35s ease, border-color 0.35s ease;
}

/* ─── Employee cards ─── */

.emp-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 0.32s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.32s ease,
    border-color 0.32s ease,
    background 0.35s ease;
}

.emp-card:hover {
  transform: translateY(-5px);
}

/* Scanline sweep on hover */
.emp-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 35%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 229, 255, 0.055) 50%,
    transparent 100%
  );
  transform: translateX(-120%) skewX(-12deg);
  pointer-events: none;
  opacity: 0;
}

.emp-card:hover::before {
  animation: scanlineSwipe 0.7s ease forwards;
}

.emp-card-brand:hover {
  border-color: var(--dept-brand-border);
  box-shadow: 0 22px 44px rgba(0,0,0,0.5), 0 0 40px var(--card-glow-brand);
}

.emp-card-hire:hover {
  border-color: var(--dept-hire-border);
  box-shadow: 0 22px 44px rgba(0,0,0,0.5), 0 0 40px var(--card-glow-hire);
}

.emp-card-finn:hover {
  border-color: var(--dept-finn-border);
  box-shadow: 0 22px 44px rgba(0,0,0,0.5), 0 0 40px var(--card-glow-finn);
}

/* ─── Status dot ─── */

.status-dot-active {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--status-active);
  flex-shrink: 0;
  animation: statusGlow 2.2s ease-in-out infinite;
}

/* ─── Onboard CTA button ─── */

.btn-onboard {
  width: 100%;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--btn-text);
  border-radius: 9px;
  border: 1px solid var(--btn-border);
  cursor: pointer;
  background: var(--btn-bg);
  background-size: 200% 100%;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  font-family: var(--font-mono);
}

.btn-onboard:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* ─── Sidebar nav items ─── */

.sidebar-item {
  animation: sidebarItemIn 0.4s ease both;
}

/* ─── Scrollbar ─── */

::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 229, 255, 0.18); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 229, 255, 0.38); }