/* =========================================
   BIVA ADMIN SIDEBAR
   Reusable accordion navigation
========================================= */

:root {
  --biva-admin-sidebar-width: 270px;
  --biva-admin-sidebar-min-width: 220px;
  --biva-admin-sidebar-max-width: 380px;
}


/* =========================================
   SIDEBAR WRAPPER
========================================= */

.biva-admin-sidebar {
  position: sticky;
  top: 0;

  width:
    var(--biva-admin-sidebar-width);

  min-width:
    var(--biva-admin-sidebar-min-width);

  max-width:
    var(--biva-admin-sidebar-max-width);

  height: 100vh;

  flex: 0 0
    var(--biva-admin-sidebar-width);

  color:
    #ffffff;

  background:
    radial-gradient(
      circle at 90% 2%,
      rgba(53, 112, 243, 0.28),
      transparent 32%
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(255, 200, 46, 0.07),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      var(--biva-black, #070b14) 0%,
      var(--biva-black-soft, #0d1729) 58%,
      #111d37 100%
    );

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

  box-shadow:
    14px 0 45px
    rgba(7, 11, 20, 0.12);

  z-index: 1000;
}


/* =========================================
   INNER LAYOUT
========================================= */

.biva-admin-sidebar__inner {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;

  padding:
    22px 16px
    18px;

  overflow-x: hidden;
  overflow-y: auto;

  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(255, 255, 255, 0.18)
    transparent;
}


.biva-admin-sidebar__inner::-webkit-scrollbar {
  width: 6px;
}


.biva-admin-sidebar__inner::-webkit-scrollbar-track {
  background:
    transparent;
}


.biva-admin-sidebar__inner::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    rgba(255, 255, 255, 0.16);
}


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

.biva-admin-sidebar__brand {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 12px;

  padding:
    4px 4px
    18px;
}


.biva-admin-sidebar__brand-mark {
  width: 46px;
  height: 46px;

  flex: 0 0 46px;

  display: grid;
  place-items: center;

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

  border-radius:
    15px;

  color:
    var(--biva-black, #070b14);

  background:
    linear-gradient(
      145deg,
      var(--biva-yellow-400, #ffcc33),
      var(--biva-yellow-500, #f2b705)
    );

  box-shadow:
    0 14px 28px
    rgba(242, 183, 5, 0.18);

  font-size: 1.1rem;
  font-weight: 900;
}


.biva-admin-sidebar__brand-copy {
  min-width: 0;

  display: grid;

  gap: 1px;
}


.biva-admin-sidebar__brand-copy strong {
  overflow: hidden;

  color:
    #ffffff;

  font-size:
    0.96rem;

  font-weight:
    900;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.biva-admin-sidebar__brand-copy span {
  overflow: hidden;

  color:
    rgba(255, 255, 255, 0.52);

  font-size:
    0.68rem;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.biva-admin-sidebar__divider {
  height: 1px;

  margin-bottom:
    17px;

  background:
    rgba(255, 255, 255, 0.08);
}


/* =========================================
   NAVIGATION
========================================= */

.biva-admin-sidebar__navigation {
  min-height: 0;

  flex: 1;

  display: flex;
  flex-direction: column;
}


.biva-admin-sidebar__section-label {
  margin:
    0 8px
    9px;

  color:
    rgba(255, 255, 255, 0.37);

  font-size:
    0.62rem;

  font-weight:
    850;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}


.biva-admin-sidebar__groups {
  display: flex;
  flex-direction: column;

  gap: 5px;
}


/* =========================================
   ACCORDION GROUP
========================================= */

.biva-admin-sidebar__group {
  width: 100%;

  display: flex;
  flex-direction: column;
}


.biva-admin-sidebar__group-toggle {
  position: relative;

  width: 100%;
  min-height: 46px;

  display: flex;
  align-items: center;

  gap: 11px;

  padding:
    9px 11px;

  border:
    1px solid
    transparent;

  border-radius:
    13px;

  color:
    rgba(255, 255, 255, 0.68);

  background:
    transparent;

  font:
    inherit;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    color 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease;
}


.biva-admin-sidebar__group-toggle:hover {
  color:
    #ffffff;

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

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


.biva-admin-sidebar__group-toggle.is-active,
.biva-admin-sidebar__group.is-open
  .biva-admin-sidebar__group-toggle {
  color:
    #ffffff;

  border-color:
    rgba(97, 144, 255, 0.18);

  background:
    linear-gradient(
      90deg,
      rgba(53, 112, 243, 0.24),
      rgba(53, 112, 243, 0.08)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.06);
}


.biva-admin-sidebar__group-icon {
  width: 30px;
  height: 30px;

  flex: 0 0 30px;

  display: grid;
  place-items: center;

  border-radius:
    10px;

  color:
    rgba(255, 255, 255, 0.58);

  background:
    rgba(255, 255, 255, 0.045);
}


.biva-admin-sidebar__group-toggle:hover
  .biva-admin-sidebar__group-icon,
.biva-admin-sidebar__group-toggle.is-active
  .biva-admin-sidebar__group-icon,
.biva-admin-sidebar__group.is-open
  .biva-admin-sidebar__group-icon {
  color:
    var(--biva-blue-400, #6190ff);

  background:
    rgba(53, 112, 243, 0.13);
}


.biva-admin-sidebar__group-icon svg {
  width: 17px;
  height: 17px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.9;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.biva-admin-sidebar__group-label {
  min-width: 0;

  flex: 1;

  overflow: hidden;

  font-size:
    0.75rem;

  font-weight:
    820;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.biva-admin-sidebar__chevron {
  width: 18px;
  height: 18px;

  flex: 0 0 18px;

  display: grid;
  place-items: center;

  color:
    rgba(255, 255, 255, 0.35);

  transition:
    transform 180ms ease,
    color 160ms ease;
}


.biva-admin-sidebar__chevron svg {
  width: 16px;
  height: 16px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    2;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.biva-admin-sidebar__group.is-open
  .biva-admin-sidebar__chevron {
  transform:
    rotate(90deg);

  color:
    var(--biva-yellow-400, #ffcc33);
}


/* =========================================
   ACCORDION MENU
========================================= */

.biva-admin-sidebar__group-menu {
  max-height: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;

  margin-left:
    16px;

  padding-left:
    11px;

  overflow:
    hidden;

  opacity: 0;

  visibility:
    hidden;

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

  transition:
    max-height 260ms ease,
    opacity 180ms ease,
    visibility 180ms ease,
    padding-top 180ms ease,
    padding-bottom 180ms ease;
}


.biva-admin-sidebar__group.is-open
  .biva-admin-sidebar__group-menu {
  max-height:
    700px;

  opacity: 1;

  visibility:
    visible;

  padding-top:
    5px;

  padding-bottom:
    5px;
}


/* =========================================
   CHILD NAVIGATION ITEM
========================================= */

.biva-admin-sidebar__item {
  position: relative;

  width: 100%;
  min-height: 39px;

  display: flex;
  align-items: center;

  gap: 9px;

  padding:
    7px 9px;

  border:
    1px solid
    transparent;

  border-radius:
    11px;

  color:
    rgba(255, 255, 255, 0.58);

  background:
    transparent;

  font:
    inherit;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    color 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}


.biva-admin-sidebar__item:hover {
  color:
    #ffffff;

  border-color:
    rgba(255, 255, 255, 0.07);

  background:
    rgba(255, 255, 255, 0.05);

  transform:
    translateX(2px);
}


.biva-admin-sidebar__item.is-active {
  color:
    #ffffff;

  border-color:
    rgba(97, 144, 255, 0.16);

  background:
    linear-gradient(
      90deg,
      rgba(53, 112, 243, 0.2),
      rgba(53, 112, 243, 0.06)
    );
}


.biva-admin-sidebar__item.is-disabled {
  cursor:
    not-allowed;

  opacity:
    0.38;
}


.biva-admin-sidebar__item.is-disabled:hover {
  transform:
    none;

  background:
    transparent;

  border-color:
    transparent;
}


.biva-admin-sidebar__item-icon {
  width: 26px;
  height: 26px;

  flex: 0 0 26px;

  display: grid;
  place-items: center;

  border-radius:
    9px;

  color:
    rgba(255, 255, 255, 0.5);

  background:
    rgba(255, 255, 255, 0.035);
}


.biva-admin-sidebar__item:hover
  .biva-admin-sidebar__item-icon,
.biva-admin-sidebar__item.is-active
  .biva-admin-sidebar__item-icon {
  color:
    var(--biva-blue-400, #6190ff);

  background:
    rgba(53, 112, 243, 0.11);
}


.biva-admin-sidebar__item-icon svg {
  width: 15px;
  height: 15px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.9;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.biva-admin-sidebar__item-label {
  min-width: 0;

  flex: 1;

  overflow: hidden;

  font-size:
    0.7rem;

  font-weight:
    740;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.biva-admin-sidebar__active-dot {
  width: 5px;
  height: 5px;

  flex: 0 0 5px;

  margin-left:
    auto;

  border-radius:
    50%;

  background:
    var(--biva-yellow-400, #ffcc33);

  box-shadow:
    0 0 0 5px
    rgba(255, 200, 46, 0.09);
}


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

.biva-admin-sidebar
  .notification-badge {
  min-width: 20px;
  min-height: 20px;

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

  margin-left:
    auto;

  padding:
    2px 6px;

  border-radius:
    999px;

  color:
    var(--biva-black, #070b14);

  background:
    var(--biva-yellow-400, #ffcc33);

  font-size:
    0.59rem;

  font-weight:
    900;

  line-height:
    1;
}


.biva-admin-sidebar
  .notification-badge:not(:empty) {
  display:
    inline-flex;
}


/* =========================================
   FOOTER
========================================= */

.biva-admin-sidebar__footer {
  margin-top:
    auto;

  display: flex;
  align-items: center;

  gap: 10px;

  padding:
    16px 8px
    2px;

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


.biva-admin-sidebar__online-dot {
  width: 9px;
  height: 9px;

  flex: 0 0 9px;

  border-radius:
    50%;

  background:
    #4bdd9d;

  box-shadow:
    0 0 0 5px
    rgba(75, 221, 157, 0.1);
}


.biva-admin-sidebar__footer-copy {
  min-width: 0;

  display: grid;

  gap: 1px;
}


.biva-admin-sidebar__footer-copy strong {
  overflow: hidden;

  color:
    rgba(255, 255, 255, 0.8);

  font-size:
    0.68rem;

  font-weight:
    820;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.biva-admin-sidebar__footer-copy span {
  overflow: hidden;

  color:
    rgba(255, 255, 255, 0.38);

  font-size:
    0.6rem;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================
   SIDEBAR RESIZER
========================================= */

.biva-admin-sidebar__resizer {
  position: absolute;

  top: 0;
  right: -4px;
  bottom: 0;

  width: 8px;

  padding: 0;

  border: 0;

  background:
    transparent;

  cursor:
    col-resize;

  z-index:
    10;
}


.biva-admin-sidebar__resizer::before {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;
  left: 3px;

  width: 2px;

  background:
    transparent;

  transition:
    background-color 160ms ease;
}


.biva-admin-sidebar__resizer:hover::before,
.biva-admin-sidebar__resizer:focus-visible::before,
body.biva-admin-sidebar-resizing
  .biva-admin-sidebar__resizer::before {
  background:
    var(--biva-blue-500, #3570f3);
}


body.biva-admin-sidebar-resizing {
  cursor:
    col-resize;

  user-select:
    none;
}


body.biva-admin-sidebar-resizing * {
  cursor:
    col-resize !important;
}


/* =========================================
   COMPACT MODE
========================================= */

.biva-admin-sidebar[
  data-sidebar-compact="true"
]
  .biva-admin-sidebar__brand-copy,
.biva-admin-sidebar[
  data-sidebar-compact="true"
]
  .biva-admin-sidebar__section-label,
.biva-admin-sidebar[
  data-sidebar-compact="true"
]
  .biva-admin-sidebar__group-label,
.biva-admin-sidebar[
  data-sidebar-compact="true"
]
  .biva-admin-sidebar__chevron,
.biva-admin-sidebar[
  data-sidebar-compact="true"
]
  .biva-admin-sidebar__footer-copy {
  display:
    none;
}


.biva-admin-sidebar[
  data-sidebar-compact="true"
]
  .biva-admin-sidebar__brand,
.biva-admin-sidebar[
  data-sidebar-compact="true"
]
  .biva-admin-sidebar__group-toggle {
  justify-content:
    center;
}


.biva-admin-sidebar[
  data-sidebar-compact="true"
]
  .biva-admin-sidebar__group-menu {
  display:
    none;
}


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

@media (max-width: 980px) {

  :root {
    --biva-admin-sidebar-width:
      84px;
  }


  .biva-admin-sidebar {
    width:
      84px;

    min-width:
      84px;

    max-width:
      84px;

    flex-basis:
      84px;
  }


  .biva-admin-sidebar__inner {
    padding:
      18px 11px;
  }


  .biva-admin-sidebar__brand {
    justify-content:
      center;

    padding-left:
      0;

    padding-right:
      0;
  }


  .biva-admin-sidebar__brand-copy,
  .biva-admin-sidebar__section-label,
  .biva-admin-sidebar__group-label,
  .biva-admin-sidebar__chevron,
  .biva-admin-sidebar__footer-copy {
    display:
      none;
  }


  .biva-admin-sidebar__group-toggle {
    justify-content:
      center;

    padding:
      8px;
  }


  .biva-admin-sidebar__group-menu {
    display:
      none;
  }


  .biva-admin-sidebar__footer {
    justify-content:
      center;
  }


  .biva-admin-sidebar__resizer {
    display:
      none;
  }

}


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

@media (max-width: 700px) {

  .biva-admin-sidebar {
    position:
      sticky;

    top: 0;

    width:
      100%;

    min-width:
      0;

    max-width:
      none;

    height:
      auto;

    flex:
      none;

    border-right:
      0;

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


  .biva-admin-sidebar__inner {
    height:
      auto;

    padding:
      10px 12px;

    overflow:
      visible;
  }


  .biva-admin-sidebar__brand {
    justify-content:
      flex-start;

    padding:
      0 0
      9px;
  }


  .biva-admin-sidebar__brand-mark {
    width: 38px;
    height: 38px;

    flex-basis:
      38px;

    border-radius:
      12px;
  }


  .biva-admin-sidebar__brand-copy {
    display:
      grid;
  }


  .biva-admin-sidebar__divider,
  .biva-admin-sidebar__section-label,
  .biva-admin-sidebar__footer {
    display:
      none;
  }


  .biva-admin-sidebar__navigation {
    overflow-x:
      auto;

    overflow-y:
      visible;

    scrollbar-width:
      none;
  }


  .biva-admin-sidebar__navigation::-webkit-scrollbar {
    display:
      none;
  }


  .biva-admin-sidebar__groups {
    width:
      max-content;

    display:
      flex;

    flex-direction:
      row;

    gap:
      6px;
  }


  .biva-admin-sidebar__group {
    width:
      auto;

    flex:
      0 0 auto;
  }


  .biva-admin-sidebar__group-toggle {
    width:
      auto;

    min-width:
      46px;

    min-height:
      42px;

    justify-content:
      center;

    padding:
      7px;
  }


  .biva-admin-sidebar__group-label,
  .biva-admin-sidebar__chevron {
    display:
      none;
  }


  .biva-admin-sidebar__group-menu {
    display:
      none;
  }


  .biva-admin-sidebar__group-icon {
    width: 32px;
    height: 32px;

    flex-basis:
      32px;
  }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  .biva-admin-sidebar__group-toggle,
  .biva-admin-sidebar__group-menu,
  .biva-admin-sidebar__item,
  .biva-admin-sidebar__chevron,
  .biva-admin-sidebar__resizer {
    transition:
      none;
  }

}