@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 {
  /* --- COLOR SYSTEM (Light Mode) --- */

  /* Brand */
  --color-primary: #4f46e5;
  /* Indigo 600 */
  --color-primary-hover: #4338ca;
  /* Indigo 700 */
  --color-primary-light: #e0e7ff;
  /* Indigo 100 */

  /* Backgrounds */
  --bg-page: #f8fafc;
  /* Slate 50 */
  --bg-card: #ffffff;
  /* White */
  --bg-surface: #f1f5f9;
  /* Slate 100 */
  --bg-surface-hover: #e2e8f0;
  /* Slate 200 */

  /* Text */
  --text-main: #0f172a;
  /* Slate 900 */
  --text-muted: #64748b;
  /* Slate 500 */
  --text-light: #94a3b8;
  /* Slate 400 */
  --text-on-primary: #ffffff;

  /* Borders */
  --border-light: #e2e8f0;
  /* Slate 200 */
  --border-hover: #cbd5e1;
  /* Slate 300 */
}

body {
  background-color: var(--bg-page);
  color: var(--text-main);
  font-family: 'Inter', sans-serif;
}

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

/* Glassmorphism Utility (Light Mode) */
.glass-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-light);
}

/* The Light Beam Effect (Adapted for Light Mode) */
.border-beam {
  position: relative;
  border: 1px solid transparent;
}

.border-beam::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: conic-gradient(from var(--angle),
      transparent 0%,
      transparent 70%,
      var(--color-primary) 90%,
      var(--color-primary-light) 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: rotate 4s linear infinite;
}

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

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

@keyframes pulse {
  0% {
    opacity: 0.6;
    box-shadow: 0 0 4px currentColor;
  }

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

  100% {
    opacity: 0.6;
    box-shadow: 0 0 4px currentColor;
  }
}

/* HUD elements (Refactored for Light Mode) */
.hud-card {
  background: white;
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.data-grid-row:hover {
  background: var(--bg-surface);
  transition: all 0.2s;
}

/* High Contrast Accents */
.text-cyan-glow {
  color: #0891b2;
  /* Cyan 600 - Readable on white */
}

.text-rose-glow {
  color: #e11d48;
  /* Rose 600 */
}

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

::-webkit-scrollbar-track {
  background: var(--bg-surface);
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  /* Slate 300 */
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
  /* Slate 400 */
}

/* 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(79, 70, 229, 0.2) 80%,
      /* Indigo */
      transparent 100%);
  border-radius: inherit;
  padding: 1px;
  -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);
  background: rgba(15, 23, 42, 0.5);
  /* Semi-transparent dark overlay for contrast */
}

/* --- PRINT STYLES (Academic Reports) --- */
@media print {

  /* HIDE EVERYTHING by default */
  body * {
    visibility: hidden;
  }

  /* RESET Body */
  body {
    background: white !important;
    color: black !important;
    margin: 0;
    padding: 0;
    overflow: visible !important;
  }

  /* SHOW ONLY Report Container and its children */
  #repResultContainer,
  #repResultContainer * {
    visibility: visible;
  }

  /* LAYOUT ADJUSTMENTS */
  #repResultContainer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 20px;
    display: block !important;
    /* Override grid */
  }

  /* CARD STYLING FOR PRINT */
  .report-card {
    border: 1px solid #000 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 20px;
    background: white !important;
    color: black !important;
  }

  /* FORCE COLORS */
  .text-slate-900,
  .text-slate-800,
  .text-slate-700,
  .text-main {
    color: #000 !important;
  }

  .text-slate-500,
  .text-slate-400,
  .text-muted {
    color: #444 !important;
  }

  .bg-slate-50,
  .bg-surface {
    background-color: #f9f9f9 !important;
    /* Slight grey ok for print differentiation */
    border-color: #ddd !important;
  }

  /* HIDE interactive elements inside cards if any slipped through */
  button,
  .btn-individual-print,
  i {
    display: none !important;
  }

  /* Ensure page breaks */
  .break-after-page {
    page-break-after: always;
  }
}