/* Custom Styles for Canvas Grade Calculator */

/* Custom fonts setup and theme variables */
:root {
  --bg-color: #050505;
  --grid-color: rgba(255, 255, 255, 0.02);
  --glow-1: rgba(0, 112, 243, 0.08);
  --glow-2: rgba(0, 223, 216, 0.04);
}

[data-theme="light"] {
  --bg-color: #fafafa;
  --grid-color: rgba(0, 0, 0, 0.02);
  --glow-1: rgba(0, 112, 243, 0.03);
  --glow-2: rgba(0, 223, 216, 0.01);
}

body {
  background-color: var(--bg-color);
  background-image: 
    radial-gradient(at 0% 0%, var(--glow-1) 0px, transparent 50%),
    radial-gradient(at 100% 100%, var(--glow-2) 0px, transparent 50%),
    linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
  transition: background-color 0.3s ease;
}

/* Custom Scrollbar for sleek Next.js feel */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #262626;
  border-radius: 999px;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #e5e5e5;
}

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

/* Custom keyframes & animation helpers */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* SVG Chart Ring Custom Styling */
.grade-donut-bg {
  fill: none;
  stroke: #171717;
  stroke-width: 7;
}

[data-theme="light"] .grade-donut-bg {
  stroke: #e5e5e5;
}

.grade-donut-fill {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.3s ease;
}

/* Accordion transition logic */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.15s ease;
}

.faq-item.active .faq-answer {
  max-height: 400px;
  margin-top: 0.75rem;
}

/* Input spinners removal */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type=number] {
  -moz-appearance: textfield; /* Firefox */
}

/* Next.js inspired glassmorphism card */
.glass-card {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}