:root{
  --app-primary: #0b3d91; /* deep blue */
  --app-accent: #0dcaf0;  /* teal */
  --app-gold: #d4af37;
  --app-header-height: 56px;
  --app-footer-height: 56px;
}

.app-navbar{
  background: linear-gradient(90deg, var(--app-primary), #0a2d67);
  z-index: 1080;
}

.btn-primary{
  background-color: var(--app-primary);
  border-color: var(--app-primary);
}
.btn-primary:hover{ filter: brightness(1.05); }

.card-metric .metric-icon{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(13,110,253,0.08);
}
.card-metric .metric-icon i{ font-size: 1.25rem; }

.rounded-pill{ border-radius: 50rem !important; }

.app-body{
  background: #f5f7fb;
  min-height: 100vh;
  padding-bottom: var(--app-footer-height);
}

.app-body > main{
  min-height: calc(100vh - var(--app-footer-height));
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.app-body > footer{
  z-index: 1020;
}

.app-navbar .navbar-collapse{
  transition: max-height .2s ease;
}

@media (max-width: 991.98px){
  .app-navbar .navbar-collapse{
    max-height: calc(100vh - var(--app-header-height) - .5rem);
    overflow-y: auto;
    margin-top: .5rem;
    padding: .5rem .75rem;
    border-radius: .75rem;
    background: linear-gradient(90deg, var(--app-primary), #0a2d67);
  }

  .app-navbar .dropdown-menu{
    position: static;
    float: none;
    background: rgba(255,255,255,.08);
    border: 0;
    margin-top: .25rem;
  }

  .app-navbar .dropdown-item{
    color: #fff;
  }

  .app-navbar .dropdown-item:hover,
  .app-navbar .dropdown-item:focus{
    background: rgba(255,255,255,.18);
  }
}