/* ============================================================
   sortStack.css — visuals for unified multi-level sort stack
============================================================ */

/* Active stacked sort button */
.sort-btn.stack-active {
  position: relative;
  background: var(--stack-color, #666) !important;
  color: #fff !important;
}

/* Dim and lock BOTH the default and custom sort buttons when disabled */
.filter-block--sort-controls .sort-btn:disabled,
.custom-sort-chunk .sort-btn:disabled {
  opacity: 0.3;
  pointer-events: none;
  filter: grayscale(100%);
}

/* Rank badge (1,2,3,...) */
.sort-rank-bubble {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #333;
  color: white;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: bold;
  display: flex; /* Hidden by default via JS, flex when active */
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 10;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@media (max-width: 768px) {
  .sort-row {
    gap: 8px;
  }
  .sort-rank-bubble {
    height: 18px;
    width: 18px;
    right: 0;
    align-items: center;
    font-size: var(--font-size-xs);
  }
}

.sort-rank-bubble:hover {
  transform: scale(1.25);
}

/* Revert button "active" state (when stack has items) */
.sort-btn.active-revert {
  background: #555 !important;
  color: #fff !important;
}

/* Group header rows used by stack renderer */
.color-header-row,
.stack-header-row {
  --stack-color: #999;
  --stack-level: 0;

  background: #1d1d1d;
  color: #eee;
  font-weight: bold;
  margin: 3px 0;

  /* left border widens as nesting increases */
  border-left: calc(
      var(--chunk-width) + var(--stack-level) * var(--chunk-indent)
    )
    solid transparent !important;
}

/* Header cell spacing */
.color-header-row td.color-header-cell,
.stack-header-row td.stack-header-cell {
  padding: 5px 8px !important;
  font-size: 14px;
}

/* In thumbnail grid mode when grouped, left align rows */
#condimenttable.thumbnails.color-sorted tbody {
  justify-content: flex-start !important;
}

/* -------------------------------------------------
   Sort reset animation
------------------------------------------------- */

body.sort-resetting .chunk-bar {
  opacity: 0;
  transition: opacity 160ms ease-out;
}

body.sort-resetting .sort-btn.stack-active {
  opacity: 0.4;
  transform: scale(0.95);
  transition: all 160ms ease-out;
}

@keyframes sortResetFade {
  from {
    opacity: 0.15;
  }
  to {
    opacity: 1;
  }
}

body.sort-resetting #condimenttable {
  animation: sortResetFade 220ms ease-out;
}

/* --- THE GROUP CONTAINER (The "Box") --- */
.stack-group-row td {
  padding: 8px !important; /* Spacing between groups */
  background: transparent !important;
  border: none !important;
}

.group-content-wrapper {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.3s ease-out;
  overflow: hidden;
  min-height: 0;
  padding: 6px;
}

.group-container {
  display: flex; /* Side-by-side layout */
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px; /* Rounded corners for the whole box */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  overflow: hidden; /* Keeps the bar contained */
}

/* --- THE LEFT BAR (Clickable, Colored) --- */
.group-bar {
  width: 24px; /* Fixed width like your old bars */
  flex-shrink: 0; /* Never shrink */
  cursor: pointer;
  display: flex;
  align-items: flex-start; /* Align toggle to top */
  justify-content: center;
  padding-top: 8px;
  color: #fff;
  font-weight: bold;
  font-size: 13px;
  user-select: none;
  transition: filter 0.2s;
}
.group-bar:hover {
  filter: brightness(1.1); /* Hover effect */
}

/* --- THE RIGHT SIDE (Header + Thumbs) --- */
.group-main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 0; /* Prevents flexbox blowout */
}

/* --- THUMBNAIL GRID --- */
.group-thumbs {
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* Spacing between your untouched thumbs */
}

/* --- COLLAPSED STATE --- */
.group-container.collapsed .group-thumbs {
  display: none; /* Hide thumbs */
}
.group-container.collapsed .group-header {
  border-bottom: none; /* Remove separator when closed */
}

/* The Root Container for the Nested Grid */
.nested-sort-root {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  align-content: flex-start;
  gap: 6px;
}

.nested-sort-root > .thumb-wrap {
  margin: 0 !important;
}

.leaf-group {
  background: black;
  border-radius: 4px;
  padding: 8px;
}

.layout-columns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-start;
}

/* --- The Group Container (The "Rectangle") --- */
.sort-group {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  flex-direction: row;

  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Nested groups get slightly darker/distinct backgrounds */
.sort-group .sort-group {
  width: calc(100% - 10px);
}

/* --- The Sidebar (Clickable Bar) --- */
.group-sidebar {
  width: 12px; /* Fixed width for the bar */
  min-width: 12px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: rgba(255, 255, 255, 0.9);
  font-weight: bold;
  font-size: 14px;
  user-select: none;
  transition: background-color 0.2s;
}

.group-sidebar:hover {
  filter: brightness(1.1);
}

/* --- The Content Area (Right of Sidebar) --- */
.group-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Header within the group body */
.group-header {
  padding: 2px 8px;
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: #333; /* Or your theme color */
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer; /* Header also toggles collapse */
  position: relative;
}

.group-count {
  font-size: 0.8em;
  opacity: 1;
  font-weight: normal;
}

/* The container for Items (Packets) or Nested Groups */
.group-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
  overflow: hidden;
  min-height: 0;
  opacity: 1;
  visibility: visible;

  transition: opacity 0.3s ease-out, padding 0.3s ease-out,
    visibility 0s linear 0s;

  background: black;
  border-radius: 4px;
  padding: 8px;
}

/* 2. INNER ITEMS: Animate padding/opacity to 0 */
.sort-group.is-collapsed .group-items {
  opacity: 0;

  /* Kill the padding so it effectively becomes 0px tall */
  padding-top: 0 !important;
  padding-bottom: 0 !important;

  /* Ensure it can't be clicked or tabbed to while hidden */
  pointer-events: none;
  visibility: hidden;

  /* transition: property duration easing delay 
     Note the 'visibility' delay: it waits for the slide (0.3s) to finish 
     before hiding, preventing the content from vanishing instantly.
  */
  transition: opacity 0.2s ease-out, padding 0.3s ease-out,
    visibility 0s linear 0.3s;
}
/* --- Visual States --- */
.sort-group.is-collapsed {
  height: auto;
  /* Optional: make it look "shut" */
}

/* --- Collapsed State --- */
.sort-group.is-collapsed > .group-body > .group-content-wrapper {
  grid-template-rows: 0fr; /* Animate to closed */
  padding: 0;
}

/* --- Packet Thumbnails (Reusing your existing classes) --- */
/* Ensure your thumbs flex nicely inside .group-items */
.group-items .thumb-wrap {
  margin: 0 !important; /* Let gap handle spacing */
}

/* --- Jelly Buddy Visual Clumping --- */
/* Target the wrapper inside the specific Jelly Buddy sort group */
.sort-key-jellyBuddy .group-items.leaf-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px; /* Tight gap between the two partners */
  padding: 10px;
}

/* Ensure the leaf group can handle the flex pods */
.sort-key-jellyBuddy .leaf-group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}

/* The Buddy Pod: Glue them together */
.buddy-pair-pod {
  display: inline-flex;
  flex-wrap: wrap; /* Allows large families to wrap internally if needed */
  max-width: fit-content;
  gap: 6px;
  padding: 6px;
  border-radius: var(--radius-sm);
  margin-right: 20px; /* Gap between different families */
  border: 1px solid rgba(255, 255, 255, 0.25);
  vertical-align: top;
}

.buddy-pair-pod .thumb-wrap {
  flex: 0 0 auto;
}

/* Orphans should just have standard spacing */
.sort-key-jellyBuddy .leaf-group > .thumb-wrap {
  margin-right: 4px;
}