/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

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

main {
    padding: 1rem;
}


/* Dropdown animation */
.animated-dropdown {

  animation: dropdownFadeIn .2s ease-out;
  transform-origin: top center;

}


@keyframes dropdownFadeIn {

  from {

    opacity: 0;
    transform: translateY(-8px) scale(.98);

  }


  to {

    opacity: 1;
    transform: translateY(0) scale(1);

  }

}



/* Desktop hover dropdown */

@media (min-width: 992px) {

  .navbar .nav-item.dropdown:hover > .dropdown-menu {

    display: block;

  }


  .navbar .nav-item.dropdown:hover > .dropdown-toggle {

    color: var(--bs-primary);

  }

}



/* Dropdown styling */

.dropdown-menu {

  border-radius: .75rem;

}


.dropdown-item {

  font-size: .9rem;
  padding: .55rem 1.1rem;

  transition:
    background-color .15s ease,
    padding-left .15s ease;

}


.dropdown-item:hover {

  padding-left: 1.4rem;

}



/* Profile avatar fallback */

.profile-placeholder {

  width:36px;
  height:36px;
  min-width:36px;

  border-radius:50%;

  background:#185FA5;
  color:white;

  font-weight:600;
  font-size:15px;

  display:flex;
  align-items:center;
  justify-content:center;

}



/* Navbar brand animation */

.navbar-brand {

  transition:transform .2s ease;

}


.navbar-brand:hover {

  transform:scale(1.03);

}



/* Mobile */

@media (max-width:991.98px) {


  .navbar-collapse {

    padding-top:1rem;

    animation: dropdownFadeIn .25s ease;

  }


  .navbar-nav .dropdown-menu {

    position:static;

    box-shadow:none !important;

    border:0;

    margin-left:.75rem;

  }


  .navbar .dropdown-menu {

    animation:none;

  }
}


/* Scrollable Nav  */.scroll-nav-wrapper {
  position: relative;
  padding: 0 4px;
}

/* Container */
.scroll-nav {
  position: relative;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  scrollbar-width: none;

  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);

  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;

  box-shadow:
    0 2px 8px rgba(0,0,0,.04),
    0 10px 25px rgba(0,0,0,.03);

  padding: 6px;
}

.scroll-nav::-webkit-scrollbar {
  display: none;
}

/* Edge fades */
.scroll-nav-wrapper::before,
.scroll-nav-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  width: 48px;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.scroll-nav-wrapper::before {
  left: 0;
  background: linear-gradient(
    90deg,
    #fff 0%,
    rgba(255,255,255,.7) 40%,
    transparent 100%
  );
}

.scroll-nav-wrapper::after {
  right: 0;
  background: linear-gradient(
    -90deg,
    #fff 0%,
    rgba(255,255,255,.7) 40%,
    transparent 100%
  );
}


/* Remove bootstrap pill feel */
.scroll-nav ul {
  gap: 4px;
}


/* Links */
.scroll-nav .nav-link {
  position: relative;

  min-width: 110px;
  height: 44px;

  border-radius: 10px !important;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding: 0 18px !important;

  color: #495057;

  font-size: .9rem;
  font-weight: 600;

  background: transparent;

  transition:
    color .2s ease,
    background .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}


/* Hover */
.scroll-nav .nav-link:hover,
.scroll-nav .nav-link:focus {
  background: #f1f5ff;
  color: #0d6efd;

  transform: translateY(-1px);
}


/* Active tab */
.scroll-nav .nav-link.active {

  background:
    linear-gradient(
      135deg,
      #0d6efd,
      #3b82f6
    );

  color: white !important;

  box-shadow:
    0 4px 12px rgba(13,110,253,.28),
    inset 0 1px 0 rgba(255,255,255,.25);

  transform: translateY(-1px);
}


/* Active icon */
.scroll-nav .nav-link.active i {
  transform: scale(1.05);
}


/* Icons */
.scroll-nav .nav-link i {
  font-size: 1.05rem;
  line-height: 1;

  transition: transform .2s ease;
}


/* Mobile tweaks */
@media (max-width: 576px) {

  .scroll-nav .nav-link {
    min-width: auto;
    padding: 0 14px !important;
  }

  .scroll-nav .nav-link span {
    font-size: .85rem;
  }

}