/* =========================================================
   LIFTRIX Sidebar
   Shared Sidebar UI
   Design Token Unified
========================================================= */

.sidebar{
  position:fixed;
  top:0;
  left:0;
  z-index:var(--sidebar-z);

  width:var(--sidebar-w);
  height:100vh;

  padding:14px;

  background:var(--bg-0) !important;
  border-right:1px solid var(--border) !important;
  box-shadow:18px 0 40px rgba(6,10,20,0.22);

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

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.sidebar__inner{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:100%;
}

/* =========================================================
   Brand
========================================================= */

.sidebar__brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;

  padding:12px 0 20px;

  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  text-decoration:none;
}

.sidebar__brandLogoWide{
  display:block;
  flex:0 0 auto;

  width:142px;
  height:auto;
  max-height:36px;

  object-fit:contain;

  filter:drop-shadow(0 6px 16px var(--primary-glow));
}

.sidebar__brand:hover .sidebar__brandLogoWide{
  filter:drop-shadow(0 8px 18px var(--primary-glow));
}

.sidebar__logo,
.sidebar__brandText,
.sidebar__brandTitle{
  display:none !important;
}

/* =========================================================
   Sections
========================================================= */

.sidebar__section{
  display:flex;
  flex-direction:column;
  gap:5px;
}

/* =========================================================
   Links
========================================================= */

.sideLink{
  display:flex;
  align-items:center;

  min-height:46px;
  padding:0 14px;

  border-radius:10px;
  border:1px solid transparent;

  color:var(--text-soft);
  text-decoration:none;

  font-size:14px !important;
  font-weight:700;
  line-height:1.15;
  letter-spacing:-0.01em;
  white-space:nowrap;

  transition:
    background .16s ease,
    border-color .16s ease,
    transform .12s ease,
    box-shadow .16s ease,
    color .16s ease;
}

.sideLink:hover{
  background:var(--surface-0);
  border-color:var(--border);
  color:var(--text-main);
  transform:translateX(1px);
}

.sideLink.is-active{
  background:var(--primary-soft);
  border-color:var(--border-strong);
  color:var(--text-main);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 6px 16px rgba(7,18,41,0.22);
}

/* =========================================================
   Account Meta
========================================================= */

.sidebar__accountMeta{
  display:grid;
  gap:12px;

  margin:0 0 12px;
  padding:14px 0 12px;

  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
}

.sidebar__metaItem{
  display:grid;
  gap:5px;
  min-width:0;
}

.sidebar__metaLabel{
  font-size:11px;
  font-weight:700;
  line-height:1;
  letter-spacing:.02em;

  color:var(--text-muted);
}

.sidebar__metaValue{
  font-size:13px;
  font-weight:700;
  line-height:1.25;

  color:var(--text-soft);

  word-break:break-word;
  overflow-wrap:anywhere;
}

.sidebar__tenantId,
.sidebar__loginId{
  font-size:12px;
  color:var(--text-muted);
  line-height:1.4;
  letter-spacing:0.02em;
  word-break:break-word;
}

.sidebar__tenantId{
  margin:0 0 6px;
  padding:0 4px;
}

.sidebar__loginId{
  margin:0 0 10px;
  padding:0 4px;
}

/* =========================================================
   Footer
========================================================= */

.sidebar__footer{
  display:flex;
  flex-direction:column;
  gap:10px;

  margin-top:auto;
  padding-top:0;

  border-top:0;
}

.sidebar__footer .sideLink{
  min-height:38px;
  padding:0 10px;

  justify-content:flex-start;
  text-align:left;

  font-size:13px !important;
  font-weight:700;

  border-radius:10px;
}

/* =========================================================
   Scrollbar
========================================================= */

.sidebar,
.sidebar__inner{
  scrollbar-width:thin;
  scrollbar-color:var(--primary-strong) rgba(4,20,47,0.42);
}

.sidebar::-webkit-scrollbar,
.sidebar__inner::-webkit-scrollbar{
  width:8px;
}

.sidebar::-webkit-scrollbar-track,
.sidebar__inner::-webkit-scrollbar-track{
  background:var(--surface-0);
  border-radius:var(--radius-pill);
}

.sidebar::-webkit-scrollbar-thumb,
.sidebar__inner::-webkit-scrollbar-thumb{
  background:linear-gradient(
    180deg,
    var(--primary) 0%,
    var(--primary-strong) 100%
  );

  border-radius:var(--radius-pill);
  border:2px solid var(--bg-0);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 4px 10px rgba(7,18,41,0.22);
}

.sidebar::-webkit-scrollbar-thumb:hover,
.sidebar__inner::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(
    180deg,
    var(--primary) 0%,
    var(--primary-strong) 100%
  );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 6px 14px rgba(7,18,41,0.28);
}

/* =========================================================
   Compact Height
========================================================= */

@media (max-height:780px){
  .sideLink{
    min-height:42px;
    font-size:13px !important;
  }

  .sidebar__accountMeta{
    gap:10px;
    padding:12px 0 10px;
  }

  .sidebar__metaLabel{
    font-size:10px;
  }

  .sidebar__metaValue{
    font-size:12px;
  }

  .sidebar__footer .sideLink{
    min-height:36px;
    font-size:12px !important;
  }
}