/**
 * Inventory Tab Logo Visibility Fix
 * 
 * Uses the same BoozeButler logo from the header in the "Spirits & Bar" tab
 * Changes tab background to lighter color so logo is visible
 */

/* STEP 1: Change active inventory tab to lighter background so logo is visible */
#inventoryTabSpirits.is-active,
.inventory-subtabs .make-subtab.is-active {
  background-color: rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(196, 126, 66, 0.3) !important;
  border-radius: var(--radius-md, 12px) !important;
  padding: var(--space-xs, 8px) var(--space-sm, 12px) !important;
  color: var(--text, var(--aperium-textLight)) !important;
}

/* STEP 2: Ensure logo image is visible and properly sized - NO BLACK BACKGROUND */
#inventoryTabSpirits.is-active .subtab-icon,
#inventoryTabSpirits.is-active .subtab-icon img,
.inventory-subtabs .make-subtab.is-active .subtab-icon,
.inventory-subtabs .make-subtab.is-active .subtab-icon img {
  opacity: 1 !important;
  filter: brightness(1) !important;
  background: transparent !important;
  background-color: transparent !important;
}

#inventoryTabSpirits.is-active .subtab-icon img.brand-icon,
.inventory-subtabs .make-subtab.is-active .subtab-icon img.brand-icon {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Remove any black/dark background from the icon container */
#inventoryTabSpirits .subtab-icon,
.inventory-subtabs .make-subtab .subtab-icon {
  background: transparent !important;
  background-color: transparent !important;
}

/* STEP 3: Ensure text in active tab is visible */
#inventoryTabSpirits.is-active > span:not(.subtab-icon),
.inventory-subtabs .make-subtab.is-active > span:not(.subtab-icon) {
  color: var(--text, var(--aperium-textLight)) !important;
}

/* STEP 4: Override any conflicting styles from styles.css */
#inventoryTabSpirits.is-active {
  border-bottom-color: transparent !important;
}