/* =========================================
   NAVBAR
========================================= */

.navbar {
  position:
    relative;

  z-index:
    100;

  min-height:
    64px;

  background:
    linear-gradient(
      90deg,
      var(--navy),
      var(--navy-light)
    );

  box-shadow:
    0 3px 12px
    rgba(
      15,
      23,
      42,
      0.16
    );
}


/* =========================================
   BRAND
========================================= */

.navbar-brand {
  min-height:
    64px;
}


.navbar-brand .navbar-item {
  padding-left:
    22px;

  padding-right:
    22px;
}


.navbar .navbar-item strong {
  color:
    #ffffff;

  font-size:
    1.02rem;

  font-weight:
    800;

  letter-spacing:
    -0.01em;
}


/* =========================================
   NAVBAR LINKS
========================================= */

.navbar .navbar-item {
  position:
    relative;

  min-height:
    64px;

  padding-left:
    16px;

  padding-right:
    16px;

  color:
    #f8fafc;

  font-size:
    0.92rem;

  font-weight:
    600;

  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}


.navbar .navbar-item:hover {
  color:
    #ffffff;

  background-color:
    rgba(
      255,
      255,
      255,
      0.06
    );
}


/* =========================================
   NAVBAR LOGOUT FORM
========================================= */

.navbar-logout-form {
  display:
    flex;

  margin:
    0;
}


.navbar-logout-link {
  width:
    100%;

  background:
    transparent;

  border:
    0;

  font-family:
    inherit;

  cursor:
    pointer;

  text-align:
    left;
}


/* =========================================
   DESKTOP HOVER LINE
========================================= */

.navbar-end > a.navbar-item::after {
  content:
    "";

  position:
    absolute;

  right:
    16px;

  bottom:
    0;

  left:
    16px;

  height:
    3px;

  background-color:
    var(--orange);

  transform:
    scaleX(0);

  transform-origin:
    center;

  transition:
    transform 0.18s ease;
}


.navbar-end > a.navbar-item:hover::after {
  transform:
    scaleX(1);
}


/* =========================================
   MESSAGE BADGE
========================================= */

.message-nav-badge {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    20px;

  height:
    20px;

  padding:
    0 6px;

  margin-left:
    7px;

  color:
    #ffffff;

  background-color:
    var(--red);

  border-radius:
    999px;

  font-size:
    0.7rem;

  font-weight:
    800;

  box-shadow:
    0 2px 6px
    rgba(
      220,
      38,
      38,
      0.28
    );
}


/* =========================================
   MOBILE BURGER
========================================= */

.navbar-burger {
  display:
    none;

  align-items:
    center;

  justify-content:
    center;

  flex-direction:
    column;

  width:
    52px;

  height:
    64px;

  margin-left:
    auto;

  padding:
    0;

  color:
    #ffffff;

  background:
    transparent;

  border:
    0;

  cursor:
    pointer;
}


.navbar-burger span {
  display:
    block;

  width:
    22px;

  height:
    2px;

  margin:
    3px 0;

  background-color:
    #ffffff;

  border-radius:
    999px;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}


/* open burger */

.navbar-burger.is-active span[aria-hidden="true"]:nth-of-type(2) {
  transform:
    translateY(8px)
    rotate(45deg);
}


.navbar-burger.is-active span[aria-hidden="true"]:nth-of-type(3) {
  opacity:
    0;
}


.navbar-burger.is-active span[aria-hidden="true"]:nth-of-type(4) {
  transform:
    translateY(-8px)
    rotate(-45deg);
}


/* =========================================
   TABLET / MOBILE
========================================= */

@media screen and (max-width: 1023px) {

  .navbar {
    min-height:
      56px;
  }


  .navbar-brand {
    display:
      flex;

    align-items:
      center;

    width:
      100%;

    min-height:
      56px;
  }


  .navbar-brand .navbar-item {
    display:
      flex;

    align-items:
      center;

    flex:
      1;

    min-height:
      56px;

    padding:
      0 16px;
  }


  .navbar .navbar-item strong {
    font-size:
      0.93rem;

    white-space:
      nowrap;
  }


  /* show burger */

  .navbar-burger {
    display:
      flex;

    flex-shrink:
      0;

    width:
      54px;

    height:
      56px;
  }


  /* compact dropdown menu */

  .navbar-menu {
    display:
      none;

    position:
      absolute;

    top:
      56px;

    right:
      8px;

    left:
      auto;

    z-index:
      110;

    width:
      250px;

    padding:
      6px 0 10px;

    background:
      var(--navy);

    border:
      1px solid
      rgba(
        255,
        255,
        255,
        0.08
      );

    border-radius:
      0 0 10px 10px;

    box-shadow:
      0 12px 22px
      rgba(
        15,
        23,
        42,
        0.24
      );
  }


  .navbar-menu.is-active {
    display:
      block;
  }


  .navbar-end {
    display:
      block;
  }


  .navbar-logout-form {
    display:
      block;

    width:
      100%;
  }


  .navbar .navbar-item {
    display:
      flex;

    align-items:
      center;

    justify-content:
      flex-start;

    width:
      100%;

    min-height:
      46px;

    padding:
      0 18px;

    color:
      #f8fafc;

    background-color:
      transparent;

    border-bottom:
      1px solid
      rgba(
        255,
        255,
        255,
        0.06
      );

    font-size:
      0.88rem;
  }


  .navbar-end .navbar-item:last-child {
    border-bottom:
      0;
  }


  .navbar .navbar-item:hover {
    color:
      #ffffff;

    background-color:
      rgba(
        255,
        255,
        255,
        0.07
      );
  }


  .navbar-end > a.navbar-item::after {
    display:
      none;
  }


  .navbar-inbox-link {
    gap:
      4px;
  }


  .navbar-logout-link {
    margin-top:
      4px;

    color:
      #fecaca !important;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media screen and (max-width: 480px) {

  .navbar-brand .navbar-item {
    padding-left:
      14px;

    padding-right:
      8px;
  }


  .navbar .navbar-item strong {
    font-size:
      0.88rem;
  }


  .navbar-burger {
    width:
      50px;
  }


  .navbar-menu {
    right:
      6px;

    width:
      230px;
  }


  .navbar .navbar-item {
    padding-left:
      16px;

    padding-right:
      16px;
  }

}


/* =========================================
   MOBILE FIXED NAVBAR
========================================= */

@media screen and (max-width: 768px) {

  .navbar {
    position:
      fixed;

    top:
      0;

    left:
      0;

    right:
      0;

    z-index:
      1000;

    width:
      100%;
  }


  body {
    padding-top:
      64px;
  }

}


/* =========================================
   NAVBAR LOGO
========================================= */

.navbar-logo {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  padding-left:
    18px;

  padding-right:
    18px;

  text-decoration:
    none;
}


.navbar-logo-wrap {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    40px;

  height:
    40px;

  flex-shrink:
    0;

  padding:
    5px;

  background-color:
    #ffffff;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.9
    );

  border-radius:
    10px;

  box-shadow:
    0 2px 8px
    rgba(
      0,
      0,
      0,
      0.16
    );
}


.navbar-logo-icon {
  display:
    block;

  width:
    30px;

  height:
    30px;

  flex-shrink:
    0;

  object-fit:
    contain;
}


.navbar-logo-text {
  color:
    #ffffff;

  font-size:
    1.15rem;

  font-weight:
    850;

  letter-spacing:
    -0.02em;

  white-space:
    nowrap;
}


.navbar-logo-text span {
  color:
    var(--orange);
}


/* prevents normal navbar hover
   from making the brand look odd */

.navbar-logo:hover {
  background-color:
    transparent !important;
}


/* =========================================
   MOBILE LOGO
========================================= */

@media screen and (max-width: 768px) {

  .navbar-logo {
    gap:
      8px;

    padding-left:
      14px;

    padding-right:
      8px;
  }


  .navbar-logo-wrap {
    width:
      36px;

    height:
      36px;

    padding:
      4px;

    border-radius:
      9px;
  }


  .navbar-logo-icon {
    width:
      28px;

    height:
      28px;
  }


  .navbar-logo-text {
    font-size:
      1rem;
  }

}


/* =========================================
   MOBILE NAVBAR ALERTS
========================================= */

.mobile-navbar-alerts {
  display:
    none;
}


.invoice-nav-badge {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    20px;

  height:
    20px;

  padding:
    0 6px;

  margin-left:
    7px;

  color:
    var(--navy);

  background-color:
    var(--orange);

  border-radius:
    999px;

  font-size:
    0.7rem;

  font-weight:
    850;
}


@media screen and (max-width: 1023px) {

  .mobile-navbar-alerts {
    display:
      flex;

    align-items:
      center;

    gap:
      7px;

    margin-left:
      auto;
  }


  .mobile-navbar-alert {
    position:
      relative;

    display:
      inline-flex;

    align-items:
      center;

    justify-content:
      center;

    width:
      34px;

    height:
      34px;

    flex-shrink:
      0;

    color:
      #ffffff;

    background-color:
      rgba(
        255,
        255,
        255,
        0.08
      );

    border:
      1px solid
      rgba(
        255,
        255,
        255,
        0.12
      );

    border-radius:
      9px;

    text-decoration:
      none;
  }


  .mobile-navbar-alert-icon {
    font-size:
      0.92rem;

    line-height:
      1;
  }


  .mobile-navbar-alert-badge {
    position:
      absolute;

    top:
      -5px;

    right:
      -5px;

    display:
      inline-flex;

    align-items:
      center;

    justify-content:
      center;

    min-width:
      17px;

    height:
      17px;

    padding:
      0 4px;

    color:
      #ffffff;

    background-color:
      var(--red);

    border:
      2px solid
      var(--navy);

    border-radius:
      999px;

    font-size:
      0.58rem;

    font-weight:
      850;

    line-height:
      1;
  }


  .navbar-invoice-link {
    gap:
      4px;
  }

}


@media screen and (max-width: 480px) {

  .mobile-navbar-alerts {
    gap:
      5px;
  }


  .mobile-navbar-alert {
    width:
      32px;

    height:
      32px;
  }

}



/* =========================================
   BURGER NOTIFICATION BADGE
========================================= */

@media screen and (max-width: 1023px) {

  .mobile-navbar-alerts {
    display:
      none !important;
  }


  .navbar-burger {
    position:
      relative;
  }


  .navbar-burger
  .navbar-burger-notification {
    position:
      absolute;

    top:
      5px;

    right:
      4px;

    z-index:
      2;

    display:
      inline-flex;

    align-items:
      center;

    justify-content:
      center;

    min-width:
      18px;

    width:
      auto;

    height:
      18px;

    margin:
      0;

    padding:
      0 5px;

    color:
      #ffffff;

    background-color:
      var(--red);

    border:
      2px solid
      var(--navy);

    border-radius:
      999px;

    font-size:
      0.58rem;

    font-weight:
      850;

    line-height:
      1;

    transform:
      none;

    opacity:
      1;
  }

}



/* =========================================
   DESKTOP NAVBAR POLISH
========================================= */

@media screen and (min-width: 1024px) {

  .navbar {
    padding-left:
      18px;

    padding-right:
      26px;
  }


  .navbar-brand
  .navbar-item,
  .navbar-logo {
    padding-left:
      12px;

    padding-right:
      18px;
  }


  .navbar-end {
    gap:
      2px;
  }


  .navbar-end
  .navbar-item {
    padding-left:
      14px;

    padding-right:
      14px;
  }


  .navbar-logout-form {
    margin-right:
      4px;
  }


  .navbar-logout-link {
    padding-right:
      18px !important;
  }

}