/* Haddock Academy — custom styles */

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.assignment-card {
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.assignment-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important;
}

.option-card {
  transition: background 0.15s, border-color 0.15s;
}
.option-card:hover {
  background: #f0f4ff;
  border-color: #6ea8fe !important;
}

/* Slim progress bars */
.progress { border-radius: 999px; }
.progress-bar { border-radius: 999px; }

/* Tighten nav on small screens */
@media (max-width: 768px) {
  main.container-xl { padding-left: 1rem; padding-right: 1rem; }
}

/* White navbar: black menu items; blue + bold for the active/current page. */
.navbar-light.bg-white .navbar-nav .nav-link {
  font-size: 1.155rem;                /* a touch larger, as set earlier */
  font-weight: 500;
  color: #111;                        /* black links on the white bar */
}
.navbar-light.bg-white .navbar-nav .nav-link:hover,
.navbar-light.bg-white .navbar-nav .nav-link:focus {
  color: #0a58ca;                     /* blue on hover */
}
.navbar-light.bg-white .navbar-nav .nav-link.active {
  color: #0d6efd !important;          /* blue + bold for the current page */
  font-weight: 700;
}
/* Brand text picks up the blue too */
.navbar-light.bg-white .navbar-brand { font-size: 1.25rem; }

/* Page class-tab bar — a full-width white bar that matches the sub-nav above it:
   same white background, bottom border, height, centering, and blue-active tabs.
   Full-bleeds out of the page container and sits flush under the sub-nav.
   Used on the MTSS and Usage pages. */
.page-class-tabs {
  margin-left: calc(50% - 50vw);      /* break out to full viewport width */
  margin-right: calc(50% - 50vw);
  margin-top: -1rem;                  /* cancel main's top padding → flush under sub-nav */
  margin-bottom: 1.5rem;
}
.page-class-tabs .nav-link {
  padding-top: .25rem;                /* match the sub-nav tab height */
  padding-bottom: .25rem;
  font-size: .85rem;                  /* match the sub-nav tab font size */
  font-weight: 500;
  color: #111;                        /* black links, like the menu bar */
}
.page-class-tabs .nav-link:hover,
.page-class-tabs .nav-link:focus {
  color: #0a58ca;                     /* blue on hover */
}
.page-class-tabs .nav-link.active {
  color: #0d6efd !important;          /* blue for the current class */
  font-weight: 700;
}

/* Avatar initials circle in navbar (white bar → blue badge) */
.avatar-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bs-primary, #0d6efd);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* Stat icon box on dashboard */
.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

/* Quick-action cards on admin dashboard */
.quick-card {
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.quick-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.10) !important;
}

/* Checklist hover rows */
.hover-light:hover { background: #f8f9fa; }

/* Letter spacing utility */
.letter-spacing { letter-spacing: 0.06em; }

/* Subtle opacity for inactive rows */
.opacity-60 { opacity: 0.6; }