/* =====================================================
   BIVA TALENT CLIENT FIXED SIDEBAR
   FULL REPLACEMENT
   ADMIN PORTAL MATCH
===================================================== */


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

.client-dashboard-layout {
  width: 100%;
  min-height: 100vh;

  display: grid;

  grid-template-columns:
    220px
    minmax(0, 1fr);

  align-items: stretch;
}

.client-dashboard-workspace {
  grid-column: 2;

  min-width: 0;
  width: 100%;

  padding: 26px;
}


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

.client-dashboard-sidebar {
  position: fixed;

  top: 0;
  bottom: 0;
  left: 0;

  z-index: 100;

  width: 220px;
  height: 100vh;

  padding: 16px 13px;

  display: flex;
  flex-direction: column;

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

  border-right:
    1px solid #dce5ef;

  background:
    #ffffff;

  box-shadow:
    4px 0 18px
    rgba(15, 23, 42, 0.035);

  scrollbar-width: thin;

  scrollbar-color:
    #cbd5e1
    transparent;
}

.client-dashboard-sidebar::-webkit-scrollbar {
  width: 7px;
}

.client-dashboard-sidebar::-webkit-scrollbar-track {
  background:
    transparent;
}

.client-dashboard-sidebar::-webkit-scrollbar-thumb {
  border:
    2px solid
    #ffffff;

  border-radius:
    999px;

  background:
    #cbd5e1;
}


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

.client-dashboard-sidebar-brand {
  min-height: 62px;

  padding:
    3px 5px 15px;

  display: grid;

  grid-template-columns:
    42px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 11px;

  border-bottom:
    1px solid #e2e8f0;
}

.client-dashboard-sidebar-brand img {
  width: 42px;
  height: 42px;

  object-fit: contain;

  border-radius: 12px;
}

.client-dashboard-sidebar-brand > div {
  min-width: 0;

  display: grid;

  gap: 3px;
}

.client-dashboard-sidebar-brand strong {
  overflow: hidden;

  color:
    #0f172a;

  font-size: 14px;
  font-weight: 850;
  line-height: 1.2;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-dashboard-sidebar-brand span {
  color:
    #64748b;

  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}


/* =====================================================
   SIDEBAR CLOSE BUTTON
===================================================== */

.client-sidebar-close-btn {
  width: 36px;
  height: 36px;

  display: none;
  place-items: center;

  padding: 0;

  border:
    1px solid #dbe4ee;

  border-radius: 10px;

  color:
    #334155;

  background:
    #f8fafc;

  cursor: pointer;

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

.client-sidebar-close-btn:hover {
  border-color:
    #cbd5e1;

  color:
    #b42318;

  background:
    #fff1f0;
}

.client-sidebar-close-btn svg {
  width: 17px;
  height: 17px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =====================================================
   SECTION HEADER
===================================================== */

.client-dashboard-sidebar-header {
  padding:
    16px 8px 9px;

  display: grid;

  gap: 5px;
}

.client-dashboard-sidebar-header span {
  color:
    #94a3b8;

  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.client-dashboard-sidebar-header strong {
  color:
    #0f172a;

  font-size: 13px;
  font-weight: 850;
  line-height: 1.2;
}


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

.client-dashboard-sidebar-nav {
  display: grid;

  gap: 5px;
}

.client-dashboard-sidebar-item {
  position: relative;

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

  padding:
    5px 9px;

  display: grid;

  grid-template-columns:
    30px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 9px;

  border: 0;
  border-radius: 10px;

  color:
    #53657e;

  background:
    transparent;

  font: inherit;

  text-align: left;

  cursor: pointer;

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

.client-dashboard-sidebar-item:hover {
  color:
    #0f172a;

  background:
    #f1f5f9;

  transform:
    translateX(1px);
}

.client-dashboard-sidebar-item.is-active {
  color:
    #ffffff;

  background:
    #071324;

  box-shadow:
    0 8px 18px
    rgba(7, 19, 36, 0.16);

  transform:
    none;
}

.client-dashboard-sidebar-item.is-active::before {
  content: "";

  position: absolute;

  top: 7px;
  bottom: 7px;
  left: -7px;

  width: 3px;

  border-radius:
    0
    999px
    999px
    0;

  background:
    #2563eb;
}


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

.client-dashboard-sidebar-icon {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border-radius: 8px;

  color:
    #0b395e;

  background:
    #eef4f8;

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

.client-dashboard-sidebar-icon svg {
  width: 16px;
  height: 16px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.client-dashboard-sidebar-item:hover
.client-dashboard-sidebar-icon {
  color:
    #0f3d67;

  background:
    #e2edf5;
}

.client-dashboard-sidebar-item.is-active
.client-dashboard-sidebar-icon {
  color:
    #ffffff;

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


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

.client-dashboard-sidebar-label {
  min-width: 0;

  overflow: hidden;

  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;

  text-overflow: ellipsis;
  white-space: nowrap;
}


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

.client-dashboard-sidebar-count,
.client-dashboard-sidebar-item > small {
  min-width: 20px;
  height: 20px;

  padding:
    0 6px;

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

  border-radius:
    999px;

  color:
    #475569;

  background:
    #e8eef5;

  font-size: 9px;
  font-weight: 850;
  line-height: 1;
}

.client-dashboard-sidebar-item.is-active
.client-dashboard-sidebar-count,
.client-dashboard-sidebar-item.is-active
> small {
  color:
    #ffffff;

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

.client-dashboard-sidebar-count.has-alert,
.client-dashboard-sidebar-item
> small.has-alert {
  color:
    #b91c1c;

  background:
    #fee2e2;
}

.client-dashboard-sidebar-item.is-active
.client-dashboard-sidebar-count.has-alert,
.client-dashboard-sidebar-item.is-active
> small.has-alert {
  color:
    #7c2d12;

  background:
    #fef3c7;
}


/* =====================================================
   DIVIDER
===================================================== */

.client-dashboard-sidebar-divider {
  height: 1px;

  margin:
    15px 0;

  background:
    #e2e8f0;
}


/* =====================================================
   NOTIFICATION CARD
===================================================== */

.client-sidebar-notification-card {
  margin-bottom: 13px;
}

.client-sidebar-notification-btn {
  position: relative;

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

  padding:
    5px 9px;

  display: grid;

  grid-template-columns:
    30px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 9px;

  border:
    1px solid #dce5ef;

  border-radius: 10px;

  color:
    #53657e;

  background:
    #f8fafc;

  font: inherit;

  font-size: 12px;
  font-weight: 750;

  text-align: left;

  cursor: pointer;

  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}

.client-sidebar-notification-btn:hover {
  border-color:
    #bfdbfe;

  color:
    #1d4ed8;

  background:
    #eff6ff;

  box-shadow:
    0 5px 14px
    rgba(37, 99, 235, 0.08);
}

.client-sidebar-notification-btn
> span:first-child {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border-radius: 8px;

  color:
    #0b395e;

  background:
    #eaf2f8;
}

.client-sidebar-notification-btn
> span:nth-child(2) {
  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-sidebar-notification-btn svg {
  width: 16px;
  height: 16px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}


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

#clientNotificationBadge,
.client-sidebar-notification-btn
.notification-badge {
  display: none;

  min-width: 20px;
  height: 20px;

  padding:
    0 5px;

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

  border:
    2px solid #ffffff;

  border-radius:
    999px;

  color:
    #ffffff;

  background:
    #dc2626;

  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}

#clientNotificationBadge.is-visible,
.client-sidebar-notification-btn
.notification-badge.is-visible {
  display:
    inline-flex;
}


/* =====================================================
   SIDEBAR ACTIONS
===================================================== */

.client-dashboard-sidebar-actions {
  display: grid;

  gap: 8px;
}

.client-dashboard-sidebar-primary,
.client-dashboard-sidebar-support,
.client-dashboard-sidebar-signout {
  width: 100%;
  min-height: 39px;

  padding:
    8px 11px;

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

  gap: 8px;

  border-radius: 9px;

  font: inherit;

  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;

  cursor: pointer;

  transition:
    color 0.18s ease,
    transform 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}

.client-dashboard-sidebar-primary svg,
.client-dashboard-sidebar-support svg,
.client-dashboard-sidebar-signout svg {
  width: 15px;
  height: 15px;

  flex:
    0 0 15px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =====================================================
   PRIMARY ACTION
===================================================== */

.client-dashboard-sidebar-primary {
  border:
    1px solid #f59e0b;

  color:
    #172033;

  background:
    #fbbf24;

  box-shadow:
    0 6px 14px
    rgba(245, 158, 11, 0.18);
}

.client-dashboard-sidebar-primary:hover {
  background:
    #f59e0b;

  transform:
    translateY(-1px);
}


/* =====================================================
   SUPPORT ACTION
===================================================== */

.client-dashboard-sidebar-support {
  border:
    1px solid #cbd5e1;

  color:
    #334155;

  background:
    #ffffff;
}

.client-dashboard-sidebar-support:hover {
  border-color:
    #94a3b8;

  background:
    #f8fafc;
}


/* =====================================================
   SIGN OUT ACTION
===================================================== */

.client-dashboard-sidebar-signout {
  border:
    1px solid #fecaca;

  color:
    #b42318;

  background:
    #ffffff;
}

.client-dashboard-sidebar-signout:hover {
  border-color:
    #ef4444;

  background:
    #fff1f0;
}


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

.client-dashboard-sidebar-footer {
  margin-top:
    auto;

  padding:
    16px 7px 3px;

  display: grid;

  gap: 4px;

  border-top:
    1px solid #e2e8f0;
}

.client-dashboard-sidebar-footer strong {
  color:
    #0f172a;

  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
}

.client-dashboard-sidebar-footer span {
  color:
    #94a3b8;

  font-size: 8px;
  line-height: 1.4;
}


/* =====================================================
   MOBILE NAVIGATION — HIDDEN ON DESKTOP
===================================================== */

.client-mobile-nav-bar,
.client-sidebar-mobile-backdrop {
  display: none;
}


/* =====================================================
   FOCUS STATES
===================================================== */

.client-dashboard-sidebar button:focus-visible,
.client-mobile-nav-bar button:focus-visible {
  outline: 0;

  box-shadow:
    0 0 0 3px
    rgba(37, 99, 235, 0.2);
}


/* =====================================================
   MOBILE BODY LOCK
===================================================== */

body.client-sidebar-mobile-open {
  overflow: hidden;
}


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

@media (max-width: 900px) {

  .client-dashboard-layout {
    min-height: auto;

    grid-template-columns:
      minmax(0, 1fr);
  }


  /* ===================================================
     MOBILE TOP BAR
  =================================================== */

  .client-mobile-nav-bar {
    position: sticky;

    top: 0;

    z-index: 90;

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

    padding:
      11px 15px;

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

    gap: 16px;

    border-bottom:
      1px solid #dce5ef;

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

    box-shadow:
      0 8px 24px
      rgba(15, 23, 42, 0.07);

    backdrop-filter:
      blur(14px);
  }

  .client-mobile-nav-brand {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 10px;
  }

  .client-mobile-nav-brand img {
    width: 42px;
    height: 42px;

    flex:
      0 0 42px;

    object-fit: contain;

    border-radius: 11px;
  }

  .client-mobile-nav-brand > div {
    min-width: 0;

    display: grid;

    gap: 2px;
  }

  .client-mobile-nav-brand strong {
    overflow: hidden;

    color:
      #0f172a;

    font-size: 14px;
    font-weight: 850;
    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .client-mobile-nav-brand span {
    color:
      #64748b;

    font-size: 10px;
    font-weight: 650;
  }


  /* ===================================================
     MOBILE MENU BUTTON
  =================================================== */

  .client-mobile-menu-btn {
    width: 44px;
    height: 44px;

    flex:
      0 0 44px;

    display: grid;
    place-items: center;

    padding: 0;

    border:
      1px solid #dbe4ee;

    border-radius: 12px;

    color:
      #0f172a;

    background:
      #ffffff;

    cursor: pointer;

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

  .client-mobile-menu-btn:hover {
    border-color:
      #bfdbfe;

    color:
      #1d4ed8;

    background:
      #eff6ff;
  }

  .client-mobile-menu-btn svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke:
      currentColor;

    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }


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

  .client-sidebar-mobile-backdrop {
    position: fixed;

    inset: 0;

    z-index: 999;

    display: block;

    padding: 0;

    border: 0;

    background:
      rgba(7, 19, 36, 0.56);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
      opacity 0.22s ease,
      visibility 0.22s ease;
  }

  .client-sidebar-mobile-backdrop.is-visible {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
  }


  /* ===================================================
     MOBILE SIDEBAR DRAWER
  =================================================== */

  .client-dashboard-sidebar {
    position: fixed;

    top: 0;
    bottom: 0;
    left: 0;

    z-index: 1000;

    width:
      min(86vw, 320px);

    height: 100vh;
    min-height: 100vh;

    padding:
      15px 14px 20px;

    border-right:
      1px solid #dce5ef;

    border-bottom: 0;

    border-radius:
      0 18px 18px 0;

    background:
      #ffffff;

    box-shadow:
      18px 0 45px
      rgba(7, 19, 36, 0.22);

    transform:
      translateX(-105%);

    visibility: hidden;

    transition:
      transform 0.24s ease,
      visibility 0.24s ease;
  }

  .client-dashboard-sidebar.is-mobile-open {
    transform:
      translateX(0);

    visibility: visible;
  }

  .client-sidebar-close-btn {
    display: grid;
  }

  .client-dashboard-sidebar-nav {
    grid-template-columns:
      1fr;

    gap: 6px;
  }

  .client-dashboard-sidebar-item {
    min-height: 48px;

    grid-template-columns:
      34px
      minmax(0, 1fr)
      auto;

    padding:
      7px 10px;
  }

  .client-dashboard-sidebar-icon {
    width: 34px;
    height: 34px;

    border-radius: 9px;
  }

  .client-dashboard-sidebar-icon svg {
    width: 17px;
    height: 17px;
  }

  .client-dashboard-sidebar-item
  small,
  .client-dashboard-sidebar-count {
    display:
      inline-flex;
  }

  .client-sidebar-notification-btn {
    min-height: 48px;

    grid-template-columns:
      34px
      minmax(0, 1fr)
      auto;

    padding:
      7px 10px;
  }

  .client-sidebar-notification-btn
  > span:first-child {
    width: 34px;
    height: 34px;
  }

  .client-dashboard-sidebar-footer {
    display: none;
  }


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

  .client-dashboard-workspace {
    grid-column: 1;

    width: 100%;

    padding:
      20px 14px;
  }

}


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

@media (max-width: 480px) {

  .client-mobile-nav-bar {
    min-height: 62px;

    padding:
      9px 11px;
  }

  .client-mobile-nav-brand img {
    width: 38px;
    height: 38px;

    flex-basis: 38px;
  }

  .client-mobile-nav-brand strong {
    font-size: 13px;
  }

  .client-mobile-nav-brand span {
    font-size: 9px;
  }

  .client-mobile-menu-btn {
    width: 40px;
    height: 40px;

    flex-basis: 40px;

    border-radius: 11px;
  }

  .client-dashboard-sidebar {
    width:
      min(90vw, 300px);

    padding:
      13px 12px 18px;

    border-radius:
      0 16px 16px 0;
  }

  .client-dashboard-sidebar-brand {
    min-height: 58px;

    padding-bottom: 13px;
  }

  .client-dashboard-sidebar-brand img {
    width: 39px;
    height: 39px;
  }

  .client-dashboard-sidebar-item,
  .client-sidebar-notification-btn {
    min-height: 46px;
  }

  .client-dashboard-workspace {
    padding:
      17px 11px;
  }

}


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

@media (max-width: 360px) {

  .client-dashboard-sidebar {
    width:
      94vw;
  }

  .client-mobile-nav-brand strong {
    max-width: 150px;
  }

  .client-dashboard-sidebar-primary,
  .client-dashboard-sidebar-support,
  .client-dashboard-sidebar-signout {
    min-height: 41px;
  }

}


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

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

  .client-dashboard-sidebar,
  .client-sidebar-mobile-backdrop,
  .client-dashboard-sidebar-item,
  .client-sidebar-notification-btn,
  .client-mobile-menu-btn,
  .client-sidebar-close-btn,
  .client-dashboard-sidebar-primary,
  .client-dashboard-sidebar-support,
  .client-dashboard-sidebar-signout {
    transition: none;
  }

}