/* General Body Styling */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #0b0c10;
  color: #f5f5f5;
  margin: 0;
  padding: 0;
}

/* Navbar */
.navbar {
  transition: background-color 0.3s ease-in-out;
  position: relative;
  overflow: visible;
  background-color: #0f1626; 
}


.navbar-dark .navbar-brand {
  font-weight: bold;
  font-size: 1.2rem;
}

.navbar-dark .navbar-nav .nav-link {
  color: #ddd;
  transition: color 0.2s ease-in-out;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
  color: #fff;
}

/* Card Styling for Login */
.card {
  background-color: #1a1b1f;
  border-radius: 8px;
}

.card-body {
  padding: 2rem;
}

.login-icon i {
  color: #0d6efd; /* Bootstrap primary color */
}

/* Form Inputs */
.form-control {
  background-color: #121316;
  border: 1px solid #333;
  color: #f5f5f5;
}

.form-control:focus {
  background-color: #121316;
  border-color: #0d6efd;
  box-shadow: none;
  color: #fff;
}

/* Buttons */
.btn-primary {
  background-color: #0d6efd;
  border: none;
}

.btn-primary:hover {
  background-color: #0b5ed7;
}

/* Error Messages */
#loginMessage {
  font-size: 0.9rem;
  font-weight: bold;
}

/* Mobile Adjustments */
@media (max-width: 576px) {
  .card-body {
    padding: 1.5rem;
  }
}

/* Desktop baseline */
@media (min-width: 992px) {
  .navbar::before {
    background-size: 100% 100%;
  }
}

@media (max-width: 991.98px) {
  .navbar::before {
    background-size: 140% auto; /* a bit zoomed-in by default */
  }
  /* When the hamburger menu expands, zoom the background a bit more */
  .navbar .navbar-collapse.show ~ .navbar::before { /* won't select siblings; use body class instead */
    /* fallback handled below via body class */
  }
}

body.nav-open .navbar::before {
  background-size: 180% auto;  /* “expand” effect */
}

/* Optional: reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .navbar::before { transition: none; }
}

/* Full-bleed navbar background */
.navbar {
  position: relative;
  background-color: #0f1626; /* fallback */
}

/* The background layer spans the entire viewport, not just the .container */
.navbar .nav-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);     /* center the 100vw box within the navbar */
  width: 100vw;                    /* full viewport width */
  height: 100%;
  z-index: 0;
  background: url("./") center / cover no-repeat;
  opacity: 1;                      /* tweak if you want subtler */
  transition: background-size .35s ease, opacity .2s ease;
}

/* Make sure navbar content sits above the bg */
.navbar > *:not(.nav-bg) {
  position: relative;
  z-index: 1;
}

/* Desktop baseline */
@media (min-width: 992px) {
  .navbar .nav-bg { background-size: 100% 100%; }
}

/* Mobile baseline (slightly zoomed in) */
@media (max-width: 991.98px) {
  .navbar .nav-bg { background-size: 140% auto; }
}

/* When hamburger opens, “expand” the background */
body.nav-open .navbar .nav-bg { background-size: 180% auto; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .navbar .nav-bg { transition: none; }
}