/* Custom Global Reset & Styles */
body {
  margin: 0;
  padding: 0;
}

/* Toast logic */
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #091426;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(9, 20, 38, 0.15);
}
#toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
#toast.err {
  background: #ba1a1a;
}

/* Dialog overlays */
.auth-overlay, .terms-overlay {
  position: fixed;
  inset: 0;
  background: rgba(9, 20, 38, 0.4);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 16px;
}
.auth-overlay.show, .terms-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile drawer logic for links */
#nav-links.mobile-open {
  display: flex !important;
}

/* Details tag accordion logic */
details[open] summary span.material-symbols-outlined {
  transform: rotate(180deg);
}

/* Progress Step Dot highlight states */
.pstep.active .dot {
  background-color: #091426 !important;
  box-shadow: 0 0 0 4px rgba(216, 227, 251, 0.6) !important;
}
.pstep.active .step-title {
  color: #091426 !important;
  font-weight: 700 !important;
}

.pstep.done .dot {
  background-color: #16a34a !important;
  box-shadow: 0 0 0 4px rgba(220, 252, 231, 0.6) !important;
}
.pstep.done .step-title {
  color: #1b1b1d !important;
  text-decoration: line-through;
  opacity: 0.6;
}

/* Fade in animation */
.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Background grid pattern */
.bg-academic-texture {
  background-image: 
    linear-gradient(to right, rgba(9, 20, 38, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(9, 20, 38, 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Custom scrollbar for a cleaner look */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #e4e2e3;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #c5c6cd;
}