.sidebar{
  width:320px;
  flex-shrink:0;
  display:flex;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:width .25s ease;
}

.sidebar.collapsed{width:64px}

.sidebar .side-panel{transition:opacity .15s ease}

.sidebar.collapsed .side-panel{opacity:0;pointer-events:none}

.rail-expand{
  display:none;
  width:28px;height:28px;
  margin-top:14px;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  color:var(--dim);
  transition:color .15s ease, background .15s ease;
}

.rail-expand svg{width:15px;height:15px}

.rail-expand:hover{color:var(--text);background:rgba(255,255,255,.05)}

.sidebar.collapsed .rail-expand{display:flex}

.rail{
  width:62px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:11px 0 13px;
}

.logo{
  width:55px;height:50px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  cursor:pointer;
  transition:transform .2s ease, filter .2s ease;
}

.logo img{
  width:100%;height:100%;
  object-fit:contain;
}

.logo:hover{transform:scale(1.08);filter:brightness(1.15)}

.rail-nav{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin-top:16px;
}

.rail-indicator{
  position:absolute;
  left:-12px;
  top:0;
  width:3px;height:20px;
  border-radius:99px;
  background:var(--text);
  transition:transform .35s cubic-bezier(.3,1.25,.4,1);
}

.rail-btn{
  position:relative;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;
  color:var(--dim);
  transition:color .15s ease, background .15s ease;
}

.rail-btn svg{width:21px;height:21px}

.rail-btn:hover{color:var(--text);background:rgba(255,255,255,.04)}

.rail-btn:disabled{opacity:.4;cursor:default}

.rail-btn:disabled:hover{color:var(--dim);background:none}

.rail-btn.active{color:var(--text)}

.rail-bottom{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.avatar{
  width:34px;height:34px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;letter-spacing:.04em;
  cursor:pointer;
  transition:border-color .15s ease, transform .15s ease;
}

.avatar:hover{transform:scale(1.07)}

.av-blue{
  background:#0E2036;
  color:#4C9FFF;
  border:1px solid rgba(76,159,255,.28);
}

.av-blue:hover{border-color:rgba(76,159,255,.7)}

.av-purple{
  background:#1A1838;
  color:#8B8BF5;
  border:1px solid rgba(139,139,245,.28);
}

.av-purple:hover{border-color:rgba(139,139,245,.7)}

.side-panel{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:11px 12px 12px 4px;
}

.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:28px;
  padding:0 2px 0 8px;
}

.panel-title{
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--text-soft);
}

.panel-actions{
  display:flex;
  align-items:center;
  gap:2px;
}

.panel-actions .vdiv{
  width:1px;height:16px;
  background:var(--border);
  margin:0 5px;
}

.icon-btn{
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  border-radius:4px;
  color:var(--dim);
  transition:color .15s ease, background .15s ease;
}

.icon-btn svg{width:18px;height:18px}

.icon-btn:hover{color:var(--text);background:rgba(255,255,255,.05)}

.tree{
  flex:1;
  overflow-y:auto;
  margin-top:8px;
  padding-right:4px;
}

.tree-row{
  display:flex;
  align-items:center;
  gap:7px;
  height:32px;
  /* 26px na poziom: element w folderze ma zaczynać się za caretem i ikoną
     rodzica — przy 18px wyglądał, jakby stał obok folderu, nie w nim */
  padding:0 8px 0 calc(8px + var(--i,0) * 26px);
  border-radius:5px;
  cursor:pointer;
  color:var(--muted);
  user-select:none;
  transition:background .15s ease, color .15s ease;
}

.tree-row:hover{background:#1B2027;color:var(--text-soft)}

.tree-row.selected{background:#262C34;color:var(--text)}

.tree-row.selected:hover{background:#2A313A}

.tree-label{
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tree-row .caret{
  width:13px;height:13px;
  color:var(--dim);
  transition:transform .18s ease, color .15s ease;
  transform:rotate(-90deg);
}

.tree-row.open .caret{transform:rotate(0deg)}

.tree-row:hover .caret{color:var(--text-soft)}

.tree-row .t-icon{width:15px;height:15px;color:currentColor;opacity:.85}

.tree-row.root .t-icon{opacity:1}

.status-dot{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--green);
  margin-left:auto;
  flex-shrink:0;
}

.tree-group.collapsed{display:none}

.project-wrap{
  position:relative;
  margin-top:14px;
  margin-left:8px;
}

.project-pill{
  width:100%;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  border:1px solid var(--border);
  border-radius:8px;
  background:transparent;
  color:var(--text-soft);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  transition:background .15s ease, border-color .15s ease;
}

.project-pill svg{width:15px;height:15px;color:var(--dim);transition:color .15s ease, transform .15s ease}

.project-pill:hover{background:#1A1E24;border-color:var(--border-hi)}

.project-pill:hover svg{color:var(--text)}

.project-wrap.open .project-pill svg{color:var(--text);transform:rotate(180deg)}

.dropdown.project-drop{
  left:0;
  right:0;
  min-width:0;
  padding:12px;
}

.pd-user{
  display:flex;
  align-items:center;
  gap:12px;
  padding:6px 8px;
  margin-bottom:6px;
  border-radius:5px;
  cursor:pointer;
  transition:background .13s ease;
}

.pd-user:hover{background:#1A1F27}

.pd-avatar{
  width:38px;height:38px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#0E2036;
  border:1px solid rgba(76,159,255,.28);
  color:var(--blue);
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  flex-shrink:0;
}

.pd-name{
  font-size:14px;
  font-weight:600;
  color:var(--text);
}

.pd-sub{
  margin-top:2px;
  font-size:12px;
  color:var(--dim);
}

.pd-sep{
  height:1px;
  background:var(--border);
  margin:0 2px 10px;
}

.pd-label{
  margin:0 6px 8px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--dim);
}

.pd-item{
  padding:9px 12px;
  border-radius:5px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--text-soft);
  cursor:pointer;
  transition:background .13s ease, color .13s ease;
}

.pd-item:hover{background:#1A1F27;color:#fff}

.pd-item.active{background:#1C2735;color:#fff}

.pd-new{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:9px 12px;
  border-radius:5px;
  font-size:13px;
  font-weight:600;
  color:var(--blue);
  transition:background .13s ease;
  margin-bottom:10px;
}

.pd-new svg{width:14px;height:14px}

.pd-new:hover{background:rgba(76,159,255,.08)}

.pd-logout{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:9px 12px;
  border-radius:5px;
  font-size:13px;
  font-weight:600;
  color:#F4655F;
  transition:background .13s ease;
}

.pd-logout svg{width:14px;height:14px}

.pd-logout:hover{background:rgba(244,101,95,.08)}

/* multi-zaznaczenie w drzewkach (Ctrl+klik) */
.tree-row.ms-sel{
  background:rgba(76,159,255,.14);
  outline:1px solid rgba(76,159,255,.45);
  outline-offset:-1px;
  border-radius:6px;
}

/* menu kontekstowe (PPM) w drzewkach */
.ctx-menu{
  position:fixed;z-index:4200;min-width:170px;
  background:#14171C;border:1px solid var(--border-hi);border-radius:7px;padding:5px;
  display:flex;flex-direction:column;gap:2px;
  box-shadow:0 12px 30px rgba(0,0,0,.5);
}
.ctx-item{
  text-align:left;padding:7px 11px;border-radius:5px;
  font-size:12px;font-weight:600;color:var(--text-soft);
}
.ctx-item:hover{background:#1E242C;color:#fff}
.ctx-item.danger:hover{color:#FF7B7B}

/* menu uzytkownika: aktywny workspace z ptaszkiem + inline tworzenie */
.pd-item{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pd-check{width:14px;height:14px;color:#4C9FFF;flex:0 0 auto}
.pd-item.active{color:#9CCBFF}
.pd-inline{padding:4px 6px}
.pd-inline input{
  width:100%;background:#191D23;border:1px solid #4C9FFF;border-radius:5px;
  color:#E4E9EF;font-size:12px;padding:7px 9px;outline:none;
}