/**
 * Inventory Pill Layout — draggable item pills and container cards
 * Supports both item-based (spell tablets, equipment) and positional-grid (Mausritter slots)
 * rendering modes.
 */

/* =============================================================================
   Pill — base draggable item element
   ============================================================================= */

.cs-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  background: var(--bg-secondary, #0a0a0a);
  border: 1px solid var(--border-primary, #2a2a2a);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--text-primary, #e8e8e8);
  cursor: grab;
  user-select: none;
  transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
}

.cs-pill:hover {
  background: var(--bg-hover, #242424);
  border-color: var(--text-secondary, #b0b0b0);
}

.cs-pill:active {
  cursor: grabbing;
}

/* Variant: equipped item — gold border */
.cs-pill-equipped {
  border-color: var(--warning, #fbbf24);
}

.cs-pill-equipped:hover {
  background: var(--bg-hover, #242424);
  border-color: var(--warning, #fbbf24);
}

/* Variant: spell tablet (Cairn magic, purple accent) */
.cs-pill-spell-tablet {
  border-left: 3px solid #a855f7;
}

/* Dragging state */
.cs-pill.cs-pill-dragging {
  opacity: 0.5;
  cursor: grabbing;
}

/* Quantity badge overlay */
.cs-pill-qty-badge {
  font-size: 0.7rem;
  color: var(--text-muted, #808080);
  margin-left: 0.2rem;
  font-weight: 600;
}

/* =============================================================================
   Container Card — dropzone for pills
   ============================================================================= */

.cs-pill-container {
  margin-bottom: 0.75rem;
  border: 1px solid var(--border-primary, #2a2a2a);
  border-radius: 6px;
  background: var(--bg-primary, #1a1a1a);
  transition: border-color 0.15s, background-color 0.1s;
  overflow: hidden;
}

.cs-pill-container__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-primary, #2a2a2a);
  background: var(--bg-secondary, #0a0a0a);
}

.cs-pill-container__title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary, #e8e8e8);
}

.cs-pill-container__body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.6rem 0.75rem;
  min-height: 2rem;
  align-content: flex-start;
}

.cs-pill-container__body:empty::after {
  content: "Empty";
  color: var(--text-muted, #808080);
  font-size: 0.85rem;
  font-style: italic;
  margin: auto 0;
  width: 100%;
}

/* =============================================================================
   Container States — drop target and validation
   ============================================================================= */

.cs-pill-container.cs-drop-target {
  border-style: dashed;
  border-color: var(--border-primary, #2a2a2a);
}

.cs-pill-container.cs-drop-target-active {
  border-color: var(--success, #4ade80);
  border-style: solid;
  background: rgba(74, 222, 128, 0.05);
}

.cs-pill-container.cs-drop-invalid {
  border-color: var(--error, #f87171);
  border-style: solid;
  background: rgba(248, 113, 113, 0.05);
}

/* =============================================================================
   Capacity Badge — slot/weight tracker
   ============================================================================= */

.cs-capacity-badge {
  font-size: 0.75rem;
  color: var(--text-muted, #808080);
  padding: 0.15rem 0.5rem;
  background: var(--bg-secondary, #0a0a0a);
  border-radius: 999px;
  white-space: nowrap;
  font-weight: 500;
}

/* =============================================================================
   Grid Row — positional layout for Mausritter slot grid
   ============================================================================= */

.cs-pill-grid-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
}