/* Veyra Social v1.12.1 — Dark Clay compact sidebar: unified navigation surface */
html body.clay-dark .sidebar{
  width:248px!important; min-width:248px!important; flex-basis:248px!important;
  padding:10px 8px 12px!important;
  background:linear-gradient(180deg,#10283d 0%,#0b1e31 100%)!important;
  border-right:1px solid rgba(88,151,197,.34)!important;
  box-shadow:inset -1px 0 0 rgba(170,219,246,.05),8px 0 20px rgba(0,0,0,.32)!important;
}
html body.clay-dark .sidebar-top{
  min-height:56px!important; padding:4px 6px 10px!important; margin:0 0 9px!important;
  border-bottom:1px solid rgba(97,163,207,.18)!important; background:transparent!important; box-shadow:none!important;
}
html body.clay-dark .sidebar .brand{gap:9px!important}
html body.clay-dark .sidebar .brand-mark{width:38px!important;height:38px!important;border-radius:12px!important;background:#0c1d2f!important;border:1px solid #3c6a90!important;box-shadow:inset 1px 1px 0 rgba(255,255,255,.1),3px 4px 9px rgba(0,0,0,.27)!important}
html body.clay-dark .sidebar .brand-copy{font-size:12px!important;letter-spacing:.7px!important;color:#f0f8ff!important}
html body.clay-dark .sidebar .brand-copy small{font-size:8px!important;color:#8fb4cc!important}
html body.clay-dark .sidebar-top-actions{gap:5px!important;right:7px!important;top:12px!important}
html body.clay-dark .sidebar-top-actions .icon-btn{
  width:30px!important;height:30px!important;border-radius:10px!important;
  background:linear-gradient(145deg,#1f4562,#14314a)!important;color:#eaf7ff!important;
  border:1px solid #3c7198!important;box-shadow:inset 1px 1px 0 rgba(255,255,255,.11),3px 4px 8px rgba(0,0,0,.28)!important;
}
/* Make the nav a single clean vertical system — no stack of disconnected cards. */
html body.clay-dark .sidebar .nav{
  display:flex!important; flex-direction:column!important; gap:1px!important; padding:4px!important; overflow-y:auto!important; overflow-x:hidden!important;
  background:rgba(5,20,34,.20)!important; border:1px solid rgba(88,150,196,.22)!important; border-radius:15px!important;
  box-shadow:inset 2px 2px 6px rgba(0,0,0,.24),inset -1px -1px 4px rgba(91,153,194,.06)!important;
}
html body.clay-dark .sidebar .nav-item{
  position:relative!important; display:flex!important; align-items:center!important; min-height:38px!important; height:38px!important;
  padding:0 11px!important; border-radius:9px!important; border:1px solid transparent!important;
  background:transparent!important; box-shadow:none!important; color:#c9dfef!important; font-size:11px!important; font-weight:740!important;
}
html body.clay-dark .sidebar .nav-item+ .nav-item{border-top-color:rgba(113,172,210,.13)!important}
html body.clay-dark .sidebar .nav-item span{
  width:27px!important;height:27px!important;min-width:27px!important;margin-right:10px!important;border-radius:8px!important;
  background:transparent!important; box-shadow:none!important; color:#9ec8e8!important; font-size:15px!important;
}
html body.clay-dark .sidebar .nav-item:hover{
  background:linear-gradient(90deg,rgba(46,110,154,.32),rgba(24,60,90,.18))!important;
  color:#f4fbff!important; border-color:rgba(104,182,235,.28)!important; box-shadow:inset 2px 2px 5px rgba(0,0,0,.16)!important;
}
html body.clay-dark .sidebar .nav-item:hover span{color:#dff3ff!important;background:rgba(76,150,205,.16)!important}
html body.clay-dark .sidebar .nav-item.active,
html body.clay-dark .sidebar .nav-item[data-view].active{
  background:linear-gradient(135deg,#2d8cf1,#236fc9)!important; color:#fff!important; border-color:#78bcff!important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.27),0 4px 10px rgba(0,0,0,.27)!important;
}
html body.clay-dark .sidebar .nav-item.active::before{content:''!important;position:absolute!important;left:0!important;top:9px!important;bottom:9px!important;width:3px!important;border-radius:0 4px 4px 0!important;background:#d5efff!important;box-shadow:0 0 8px rgba(210,241,255,.75)!important}
html body.clay-dark .sidebar .nav-item.active span{background:rgba(255,255,255,.16)!important;color:#fff!important;box-shadow:inset 1px 1px 0 rgba(255,255,255,.26)!important}
/* Collapsed: keep actual space for visible icons, but still a unified panel. */
html body.clay-dark.sidebar-collapsed .sidebar{width:92px!important;min-width:92px!important;flex-basis:92px!important;padding:10px 7px!important}
html body.clay-dark.sidebar-collapsed .sidebar-top{min-height:55px!important;padding:4px!important;margin-bottom:8px!important}
html body.clay-dark.sidebar-collapsed .sidebar .brand-copy{display:none!important}
html body.clay-dark.sidebar-collapsed .sidebar .brand{justify-content:center!important}
html body.clay-dark.sidebar-collapsed .sidebar-top-actions{right:-13px!important;top:11px!important}
html body.clay-dark.sidebar-collapsed .sidebar-top-actions .dark-mode-toggle{display:none!important}
html body.clay-dark.sidebar-collapsed .sidebar .nav{padding:4px!important;gap:2px!important;border-radius:14px!important}
html body.clay-dark.sidebar-collapsed .sidebar .nav-item{justify-content:center!important;padding:0!important;min-height:38px!important;height:38px!important;font-size:0!important;border-radius:9px!important}
html body.clay-dark.sidebar-collapsed .sidebar .nav-item span{margin:0!important;width:30px!important;height:30px!important;min-width:30px!important;font-size:16px!important}
html body.clay-dark.sidebar-collapsed .sidebar .nav-item:hover::before{left:102px!important;top:50%!important;transform:translateY(-50%)!important;background:#173b57!important;color:#eff9ff!important;border:1px solid #42759c!important;box-shadow:5px 6px 13px rgba(0,0,0,.3)!important}
/* Low-height desktops still show all links as one clean list. */
@media(max-height:760px) and (min-width:861px){
 html body.clay-dark .sidebar .nav-item{min-height:34px!important;height:34px!important;font-size:10px!important}
 html body.clay-dark .sidebar .nav-item span{width:24px!important;height:24px!important;min-width:24px!important;font-size:13px!important}
}