/* These styles are generated from project.scss. */

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

#sheet {
  width: 100%; /* Container takes full width */
  max-width: none;

  height: 250px; /* Define the height for the stave */

  display: flex;
  justify-content: center; /* Horizontally center the stave */
  align-items: center; /* Vertically center the stave */


  overflow-x: visible;
}

/* Ensure the SVG dynamically adjusts */
svg {
  display: block; /* Ensure no extra spaces due to inline SVG behavior */
}

.mw-md-75 {
  max-width: 100%;
}

@media (min-width: 768px) {
  .mw-md-75 {
    max-width: 75%;
  }
}

@media (min-width: 992px) {
  .mw-md-75 {
    max-width: 50%;
  }
}

.custom-lander {
  background: url("/static/images/lander.c476aa8cb470.webp") no-repeat center center;
  background-size: cover;
  position: relative;
  color: white;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
}

.custom-lander .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
  z-index: 1;
}

.custom-lander .container {
  position: relative;
  z-index: 2; /* Ensure the text is above the overlay */
}

:root {
  --vh: 1vh; /* Fallback for browsers without JavaScript */
}

.min-vh-100 {
  min-height: calc(var(--vh, 1vh) * 100);
}

/* Navbar enhancements */
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s ease, transform 0.2s ease;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: #fff;
  transform: translateY(-1px);
  background-color: rgba(255, 255, 255, 0.1);
}

.navbar-brand {
  transition: transform 0.2s ease;
}

.navbar-brand:hover {
  transform: scale(1.05);
}

/* Mobile menu toggle animation */
.navbar-toggler {
  transition: transform 0.3s ease;
  padding: 0.5rem;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.15rem rgba(255, 255, 255, 0.25);
}

.navbar-toggler:hover {
  transform: rotate(5deg);
}

.driver-popover {
  width: clamp(280px, 90vw, 700px);
  max-width: none; /* remove the hard 400 px max in driver.css */
}

.dragging {
  cursor: move;
  transition: transform 0.1s ease;
  border: 2px dashed #007bff !important;
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.5) !important;
}

.dragging:hover {
  transform: scale(1.05);
}