/* ============================================================
   QUORUM LEFT NAV  — quorum-left-nav.css  v6
   ============================================================ */

/* ── Shell ── */
.left-nav {
  position: relative; width: 0; flex-shrink: 0; overflow: hidden;
  background: var(--cream); border-right: 1px solid var(--cream-border);
  transition: width .28s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column;
}
.left-nav.open { width: 260px; }

.left-nav-hdr {
  padding: 14px 16px 10px; border-bottom: 1px solid var(--cream-border);
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
}
.left-nav-title {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-light);
}
.left-nav-scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 0 24px;
}
.left-nav-scroll::-webkit-scrollbar { width: 2px; }
.left-nav-scroll::-webkit-scrollbar-thumb { background: var(--cream-border); border-radius: 2px; }
.left-nav-footer { padding: 10px 16px; border-top: 1px solid var(--cream-border); flex-shrink: 0; }
.lnav-user { font-size: 11px; color: var(--ink-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lnav-signout {
  background: none; border: none; cursor: pointer; font-family: var(--mono);
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim); padding: 0; margin-top: 4px; display: block; transition: color .15s;
}
.lnav-signout:hover { color: var(--ink-mid); }

/* ── Resize handle ── */
.lnav-resize-handle {
  position: absolute; top: 0; right: -4px; bottom: 0; width: 8px;
  cursor: col-resize; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s;
}
.left-nav:hover .lnav-resize-handle,
.lnav-resize-handle.dragging { opacity: 1; }
.lnav-resize-handle::after {
  content: ''; width: 2px; height: 40px; border-radius: 2px;
  background: var(--amber); opacity: .5; transition: opacity .15s, height .15s;
}
.lnav-resize-handle:hover::after,
.lnav-resize-handle.dragging::after { opacity: 1; height: 64px; }

/* ── Section header ── */
.lnav-section-hdr { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 6px 14px; }
.lnav-section-lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-light); }
.lnav-section-add {
  background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1;
  color: var(--ink-dim); padding: 0 2px; border-radius: 3px; transition: color .12s;
  display: flex; align-items: center; justify-content: center; width: 20px; height: 20px;
}
.lnav-section-add:hover { color: var(--amber); }

/* ── SVG Icons ── */
.lnav-icon { width: 14px; height: 14px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.lnav-icon-amber { color: var(--amber); }
.lnav-icon-mid   { color: var(--ink-mid); }

/* ── Chevron ── */
.lnav-chev {
  font-size: 7px; color: var(--ink-dim); display: inline-block;
  transition: transform .15s; flex-shrink: 0; margin-right: 2px;
}
.lnav-chev.open { transform: rotate(90deg); }

/* ── Header actions (+ and ···) ── */
.lnav-hdr-actions {
  display: flex; align-items: center;
  margin-left: auto; flex-shrink: 0; opacity: 0; transition: opacity .12s;
}
.lnav-project-hdr:hover .lnav-hdr-actions,
.lnav-folder-hdr:hover  .lnav-hdr-actions { opacity: 1; }
.lnav-item-add {
  background: none; border: none; cursor: pointer; font-size: 15px; line-height: 1;
  color: var(--ink-dim); padding: 1px 5px; border-radius: 3px; transition: color .12s;
}
.lnav-item-add:hover { color: var(--amber); }
.lnav-item-menu {
  flex-shrink: 0; opacity: 0; background: none; border: none; cursor: pointer;
  color: var(--ink-light); font-size: 14px; padding: 1px 5px; border-radius: 3px;
  transition: opacity .12s, color .12s; line-height: 1;
}
.lnav-item:hover        .lnav-item-menu,
.lnav-folder-hdr:hover  .lnav-item-menu,
.lnav-project-hdr:hover .lnav-item-menu { opacity: 1; }
.lnav-item-menu:hover { color: var(--ink); background: var(--cream-border); }

/* ── Project ── */
.lnav-project-hdr {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 8px 8px 10px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--ink);
  transition: background .12s; border-top: 1px solid var(--cream-border); user-select: none;
}
.lnav-project:first-of-type .lnav-project-hdr { border-top: none; }
.lnav-project-hdr:hover { background: var(--cream-mid); }
.lnav-project-hdr.lnav-general { background: var(--cream); }
.lnav-project-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Project body — max-height collapse so drop zones stay in DOM */
.lnav-project-body { overflow: hidden; max-height: 4000px; transition: max-height .2s ease; }
.lnav-project-body.lnav-collapsed { max-height: 0; }

/* Thin drop zone at bottom of project for direct-project items */
.lnav-project-drop {
  /* No min-height when empty — we want it invisible until drag */
  padding-bottom: 4px;
}
.lnav-project-drop:empty { min-height: 0; padding: 0; }

/* ── Folder ── */
.lnav-folder-hdr {
  display: flex; align-items: center; gap: 5px;
  /* padding-left set via inline style per indent level */
  padding-top: 6px; padding-bottom: 6px; padding-right: 8px;
  cursor: pointer; font-size: 12px; color: var(--ink-mid);
  transition: background .12s; user-select: none;
}
.lnav-folder-hdr:hover { background: var(--cream-mid); }
.lnav-folder-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Folder body — max-height collapse */
.lnav-folder-body { overflow: hidden; max-height: 4000px; transition: max-height .2s ease; }
.lnav-folder-body.lnav-collapsed { max-height: 0; }

/* Empty folder hint */
.lnav-folder-empty {
  font-size: 10px; color: var(--ink-dim); font-style: italic;
  padding: 6px 8px 6px 52px; /* deep indent to match folder contents */
}

/* ── Items (discussions + gwork) ── */
/* padding-left set via inline style per indent level */
.lnav-item {
  position: relative; display: flex; align-items: center; gap: 7px;
  padding-top: 6px; padding-bottom: 6px; padding-right: 8px;
  cursor: pointer; border-left: 2px solid transparent;
  transition: background .12s, border-color .12s; min-width: 0; user-select: none;
}
.lnav-item:hover { background: var(--cream-bg); }
.lnav-item.active { border-left-color: var(--amber); background: var(--amber-dim); }
.lnav-item-text {
  font-size: 12px; color: var(--ink-mid);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
}
.lnav-item.active .lnav-item-text { color: var(--ink); font-weight: 500; }
.lnav-type-badge {
  font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-dim); background: var(--cream-mid); border: 1px solid var(--cream-border);
  border-radius: 2px; padding: 1px 4px; flex-shrink: 0;
}

/* ── Briefs ── */
.lnav-briefs { }
.lnav-brief-item {
  display: flex; align-items: center; gap: 6px;
  padding-top: 5px; padding-bottom: 5px; padding-right: 8px;
  /* padding-left via inline style */
  cursor: pointer; transition: background .12s; min-width: 0;
  border-left: 2px solid var(--amber);
}
.lnav-brief-item:hover { background: var(--amber-dim); }
.lnav-brief-item .lnav-item-menu {
  opacity: 0; transition: opacity .12s;
}
.lnav-brief-item:hover .lnav-item-menu { opacity: 1; }
.lnav-brief-label {
  font-size: 11px; color: var(--ink-mid); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
}

/* ── Group labels ── */
.lnav-group-lbl {
  font-family: var(--mono); font-size: 9px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-dim); padding: 8px 16px 4px;
}

/* ── Empty ── */
.lnav-empty { padding: 24px 16px; font-size: 12px; color: var(--ink-dim); line-height: 1.6; }

/* ── Inline rename input ── */
.lnav-rename-input {
  flex: 1; min-width: 0; font-family: var(--sans); font-size: 12px; color: var(--ink);
  background: var(--cream); border: 1px solid var(--amber); border-radius: 3px;
  padding: 1px 5px; outline: none;
}

/* ── Inline new name input row ── */
.lnav-inline-input-row {
  display: flex; align-items: center; gap: 4px;
  padding-top: 6px; padding-bottom: 6px; padding-right: 8px;
  /* padding-left via inline style */
  background: var(--cream-mid); border-left: 2px solid var(--amber);
}
.lnav-inline-ok, .lnav-inline-cancel {
  background: none; border: none; cursor: pointer; font-size: 11px;
  padding: 2px 5px; border-radius: 3px; flex-shrink: 0; transition: color .12s;
}
.lnav-inline-ok     { color: var(--amber); }
.lnav-inline-ok:hover { color: var(--ink); }
.lnav-inline-cancel { color: var(--ink-dim); }
.lnav-inline-cancel:hover { color: var(--ink); }

/* ── Delete confirm ── */
.lnav-delete-confirm {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 26px;
  background: rgba(192,57,43,.05); border-left: 2px solid #c0392b;
  opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s;
}
.lnav-delete-confirm.visible { opacity: 1; transform: translateY(0); }
.lnav-delete-msg { font-size: 11px; color: var(--ink-mid); flex: 1; }
.lnav-delete-yes {
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px; background: #c0392b; color: #fff;
  border: none; cursor: pointer; transition: background .12s;
}
.lnav-delete-yes:hover { background: #a93226; }
.lnav-delete-no {
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px; background: none; color: var(--ink-dim);
  border: 1px solid var(--cream-border); cursor: pointer; transition: color .12s;
}
.lnav-delete-no:hover { color: var(--ink); }

/* ── Context / Add menus ── */
#lnavCtxMenu, .lnav-add-menu {
  position: fixed; z-index: 600; background: var(--cream);
  border: 1px solid var(--cream-border); border-radius: 5px;
  box-shadow: 0 4px 20px rgba(26,24,20,.13); min-width: 168px; padding: 4px 0; display: none;
}
#lnavCtxMenu.open, .lnav-add-menu.open { display: block; }
.lnav-ctx-item {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  padding: 9px 14px; background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 12px; color: var(--ink-mid);
  transition: background .1s, color .1s; white-space: nowrap;
}
.lnav-ctx-item:hover { background: var(--cream-bg); color: var(--ink); }
.lnav-ctx-item.danger { color: #c0392b; }
.lnav-ctx-item.danger:hover { background: rgba(192,57,43,.06); }

/* ── Move picker ── */
.lnav-move-picker {
  position: fixed; z-index: 610; background: var(--cream);
  border: 1px solid var(--cream-border); border-radius: 5px;
  box-shadow: 0 6px 24px rgba(26,24,20,.14); padding: 4px 0;
  display: none; max-height: 360px; overflow-y: auto;
}
.lnav-move-picker.open { display: block; }
.lnav-picker-title {
  font-family: var(--mono); font-size: 8px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-dim); padding: 8px 14px 6px; border-bottom: 1px solid var(--cream-border); margin-bottom: 4px;
}
.lnav-picker-project { font-weight: 500; color: var(--ink) !important; }
.lnav-picker-indent  { padding-left: 28px !important; color: var(--ink-mid) !important; }

/* ── Drag ── */
.lnav-dragging { opacity: .4; }

/* Drop active: left-bar indicator, not a giant box.
   Innermost zone only (stopPropagation in JS ensures this). */
.lnav-drop-active {
  border-left: 3px solid var(--amber) !important;
  background: var(--amber-dim) !important;
  border-radius: 0 3px 3px 0;
  min-height: 28px;
  transition: background .1s;
}

/* Toast ── */
.lnav-toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--ink); color: var(--cream); font-size: 12px;
  padding: 8px 16px; border-radius: 4px; opacity: 0; transition: all .22s;
  pointer-events: none; white-space: nowrap; z-index: 700;
}
.lnav-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }