/* ============================================================
   sidebar.css — the right panel: browse list, folders, details, context and sort menus
   ============================================================ */

/* ─── SIDEBAR ────────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: inset 1px 0 0 var(--emboss-hi);
  overflow: hidden;
}

#sidebar-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 80%, var(--emboss-lo)));
  flex-shrink: 0;
}
.tab-btn {
  flex: 1;
  padding: 11px 10px 9px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tab-btn.active {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  text-shadow: 0 1px 0 var(--emboss-hi);
}
.tab-btn:hover:not(.active) { color: var(--text); }

.tab-pane { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.tab-pane.active { display: flex; }

/* Browser controls */
#browser-controls {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#item-search { width: 100%; }
#filter-row { display: flex; gap: 6px; }
#filter-row select { flex: 1; }
/* Three controls in a panel the user can drag narrow: they wrap onto a second
   row rather than each folding its own label into a two-line block. */
#folder-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
#folder-row button { white-space: nowrap; }
/* The sort controls sit at the far left of that row, the folder controls right.
   The gap is on the last *left* button, so the split survives the row wrapping
   and follows the pair rather than being pinned to one id. */
#sort-dir-btn { margin-right: auto; }

/* Item list */
#item-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#item-list::-webkit-scrollbar { width: 5px; }
#item-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

.item-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 94%, var(--emboss-hi)), var(--panel));
  box-shadow: inset 0 1px 0 var(--emboss-hi);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.08s;
}
.item-card:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--panel));
  transform: translateX(1px);
}
.item-card.placing {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

.item-card-swatch {
  width: 10px;
  flex-shrink: 0;
  align-self: stretch;
  border-radius: 2px;
}
.item-card-info { flex: 1; min-width: 0; }
.item-card-name {
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-card-sub { font-size: 10px; color: var(--text-dim); margin-top: 1px; }

.item-card-shape {
  display: grid;
  gap: 1px;
  flex-shrink: 0;
}

/* Folder headers — group dividers in the item list, also drag drop targets */
.folder-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  margin-top: 3px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 82%, var(--emboss-hi)), var(--surface));
  box-shadow: inset 0 1px 0 var(--emboss-hi);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, background 0.15s;
}
.folder-header:first-child { margin-top: 0; }
.folder-header:hover { border-color: var(--accent); }
.folder-header.search-locked { cursor: default; }
/* A drag lights the whole folder — header and every card under it — because
   the whole band is the drop target, not just the header. */
.folder-header.drop-target {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 20%, var(--panel));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}
.item-card.drop-target {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}

/* The folder the dragged item is already in. A drop here does nothing — order
   inside a folder is the sort's business — so the band is outlined rather than
   lit: present enough to say "this one is yours already", quiet enough that it
   is never mistaken for the accepting highlight above. */
.folder-header.drop-current,
.item-card.drop-current {
  border-color: color-mix(in srgb, var(--text-dim) 55%, var(--border));
  border-style: dashed;
  opacity: 0.72;
}

/* The card left behind while its copy is in flight. */
.item-card.dragging {
  opacity: 0.4;
  border-style: dashed;
}

/* ─── FOLDER DROP HINT ───────────────────────────────────── */
/* Rides the cursor through a browse-list drag, naming the folder the drop
   would file into. Above the ghost (1000), since the two never overlap but
   the chip is the one carrying the words. */
#folder-drop-hint {
  position: fixed;
  z-index: 1100;
  pointer-events: none;
  max-width: 240px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 3px;
  box-shadow: var(--shadow-deep);
}
/* Over the item's own folder: the drop is a no-op, and the chip says so in the
   list's own quiet tones rather than the accent that means "this will happen". */
#folder-drop-hint.blocked {
  color: var(--text-dim);
  background: var(--panel);
  border: 1px solid var(--border2);
  font-weight: 600;
}

.folder-caret { font-size: 9px; width: 9px; color: var(--text-dim); }
.folder-name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Last in the header, right-aligned: every folder's count lines up on the same
   right edge, however wide the name or the count. */
.folder-count {
  font-size: 10px;
  color: var(--text-dim);
  margin-left: auto;
  min-width: 2ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.folder-btn {
  font-size: 11px;
  line-height: 1;
  padding: 2px 3px;
  border-radius: 2px;
  color: var(--text-dim);
  opacity: 0;
  transition: opacity 0.12s, color 0.12s;
}
.folder-header:hover .folder-btn { opacity: 1; }
.folder-btn:hover { color: var(--accent); }
.folder-btn.danger:hover { color: var(--danger); }

/* Cards sit under their header once folders exist */
#item-list.foldered .item-card { margin-left: 10px; }
.card-cell {
  width: 7px;
  height: 7px;
  border-radius: 1px;
}
.card-cell.empty  { background: transparent !important; }

#browser-footer {
  display: flex;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  align-items: center;
}
#new-item-btn { margin-right: auto; }

/* Details tab */
#tab-details {
  padding: 12px;
  overflow-y: auto;
  flex: 1;
  gap: 10px;
}
#tab-details::-webkit-scrollbar { width: 5px; }
#tab-details::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

#details-placeholder {
  text-align: center;
  color: var(--text-dim);
  margin-top: 40px;
  line-height: 1.6;
}

#details-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
#details-name {
  font-size: 15px;
  font-weight: 700;
  flex: 1;
}
#details-rarity-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
}

#details-shape-preview {
  display: grid;
  gap: 2px;
  margin-bottom: 10px;
}
#details-shape-preview .prev-cell {
  width: 20px;
  height: 20px;
  border-radius: 2px;
}
#details-shape-preview .prev-cell.filled {
  border: 1px solid;
}
#details-shape-preview .prev-cell.empty {
  background: transparent !important;
  border: none !important;
}

#details-image-wrap {
  margin-bottom: 8px;
  display: flex;
  justify-content: center;
}
#details-image {
  max-width: 80px;
  max-height: 80px;
  object-fit: contain;
  border-radius: 4px;
}

#details-meta { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.meta-row { display: flex; gap: 8px; }
.meta-label { color: var(--text-dim); min-width: 50px; }

#details-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.tag-pill {
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 10px;
  color: var(--text-dim);
}

#details-desc {
  color: var(--text-dim);
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 10px;
  font-size: 12px;
}

#details-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ─── CONTEXT MENU ───────────────────────────────────────── */
#context-menu {
  position: fixed;
  z-index: 2000;
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 3px;
  box-shadow: var(--shadow-deep), inset 0 0 0 1px var(--emboss-hi);
  display: flex;
  flex-direction: column;
  min-width: 150px;
  overflow: hidden;
  padding: 3px;
}
#context-menu button {
  padding: 7px 12px;
  text-align: left;
  border-radius: 2px;
  transition: background 0.1s, color 0.1s;
}
#context-menu button:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
#ctx-remove { color: var(--danger); }

/* ─── SORT MENU ──────────────────────────────────────────── */
/* Same popup as the context menu, anchored under the Sort button */
#sort-menu {
  position: fixed;
  z-index: 2000;
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 3px;
  box-shadow: var(--shadow-deep), inset 0 0 0 1px var(--emboss-hi);
  display: flex;
  flex-direction: column;
  min-width: 130px;
  overflow: hidden;
  padding: 3px;
}
#sort-menu button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  text-align: left;
  border-radius: 2px;
  transition: background 0.1s, color 0.1s;
}
#sort-menu button:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
/* Fixed width so the labels line up whether or not the tick is showing */
.sort-check {
  width: 10px;
  flex-shrink: 0;
  color: var(--accent);
  font-size: 10px;
}