@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=JetBrains+Mono:wght@400;700&display=swap');

/* Core Setup */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

:root {
  --beam-color: #6366f1;
  /* Indigo 500 */
  --beam-width: 2px;
  --bg-dark: #020617;
  /* Slate 950 */
}

body {
  background-color: var(--bg-dark);
  color: #e2e8f0;
  font-family: 'Inter', sans-serif;
}

/* Typography Overrides */
.font-mono {
  font-family: 'JetBrains Mono', monospace !important;
}

/* Glassmorphism Utility */
.glass-panel {
  background: rgba(15, 23, 42, 0.4);
  /* Slate 900 / 40% */
  backdrop-filter: blur(24px);
  /* XL Blur */
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  /* White / 5% */
}

/* The Light Beam Effect */
.border-beam {
  position: relative;
  border: 1px solid transparent;
  /* Fallback */
}

.border-beam::after {
  content: '';
  position: absolute;
  inset: -1px;
  /* Hug the border */
  z-index: -1;
  background: conic-gradient(from var(--angle),
      transparent 0%,
      transparent 70%,
      var(--beam-color) 90%,
      white 100%);
  border-radius: inherit;
  padding: var(--beam-width);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rotate 4s linear infinite;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

/* Status Lights */
.status-light {
  box-shadow: 0 0 10px currentColor;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    opacity: 0.5;
    box-shadow: 0 0 5px currentColor;
  }

  50% {
    opacity: 1;
    box-shadow: 0 0 15px currentColor;
  }

  100% {
    opacity: 0.5;
    box-shadow: 0 0 5px currentColor;
  }
}

/* HUD elements */
.hud-card {
  background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.05), transparent 60%), rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(99, 102, 241, 0.2);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.data-grid-row:hover {
  background: rgba(99, 102, 241, 0.05);
  transition: all 0.2s;
}

/* High Contrast Accents */
.text-cyan-glow {
  color: #22d3ee;
  text-shadow: 0 0 8px rgba(34, 211, 238, 0.4);
}

.text-rose-glow {
  color: #fb7185;
  text-shadow: 0 0 8px rgba(251, 113, 133, 0.4);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #020617;
}

::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

/* Student Card Beam Effect */
.student-card-beam {
  position: relative;
  border: 1px solid transparent;
  overflow: hidden;
  z-index: 0;
}

.student-card-beam::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: conic-gradient(from var(--angle),
      transparent 0%,
      transparent 70%,
      rgba(99, 102, 241, 0.8) 80%,
      /* Indigo Beam */
      rgba(255, 255, 255, 0.8) 90%,
      transparent 100%);
  border-radius: inherit;
  padding: 2px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rotateBeam 4s linear infinite;
}

@keyframes rotateBeam {
  from {
    --angle: 0deg;
  }

  to {
    --angle: 360deg;
  }
}

/* --- Mobile Logic --- */
body.mobile-menu-open #mainSidebar {
    transform: translateX(0) !important;
}

body.mobile-menu-open #sidebarOverlay {
    display: block !important;
}

/* Glass Overlay for Sidebar */
.glass-overlay {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}