/* ─────────────────────────────────────────────────────────────────────────────
   Brand Studio Custom Icon System
   Emerald Green & Slate Grey Professional Icons
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --bsp-icon-primary: #1DB88C;
  --bsp-icon-secondary: #2C3E50;
  --bsp-icon-size-sm: 18px;
  --bsp-icon-size-md: 24px;
  --bsp-icon-size-lg: 32px;
}

/* ─── Main Plugin Icon ─────────────────────────────────────────────────────── */
.bsp-logo-icon::before {
  content: '';
  display: inline-block;
  width: var(--bsp-icon-size-md);
  height: var(--bsp-icon-size-md);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" fill="%231DB88C"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 6px;
  vertical-align: middle;
}

/* ─── Navigation Icons ─────────────────────────────────────────────────────── */
.bsp-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  font-size: 0;
}

/* Brands Navigation Icon */
.bsp-nav-item[data-view="brands"] .bsp-nav-icon {
  background-image: url('../img/nav-brands.png');
}

/* Canvas Navigation Icon */
.bsp-nav-item[data-view="canvas"] .bsp-nav-icon {
  background-image: url('../img/nav-canvas.png');
}

/* Generate Navigation Icon */
.bsp-nav-item[data-view="generate"] .bsp-nav-icon {
  background-image: url('../img/nav-generate.png');
}

/* Playground Navigation Icon */
.bsp-nav-item[data-view="playground"] .bsp-nav-icon {
  background-image: url('../img/nav-playground.png');
}

/* Fusion Navigation Icon */
.bsp-nav-item[data-view="fusion"] .bsp-nav-icon {
  background-image: url('../img/nav-fusion.png');
}

/* Library Navigation Icon */
.bsp-nav-item[data-view="library"] .bsp-nav-icon {
  background-image: url('../img/nav-library.png');
}

/* Prompts Navigation Icon */
.bsp-nav-item[data-view="prompts"] .bsp-nav-icon {
  background-image: url('../img/nav-prompts.png');
}

/* History Navigation Icon */
.bsp-nav-item[data-view="history"] .bsp-nav-icon {
  background-image: url('../img/nav-history.png');
}

/* Documents Navigation Icon */
.bsp-nav-item[data-view="documents"] .bsp-nav-icon {
  background-image: url('../img/nav-documents.png');
}

/* ─── Icon Hover Effects ───────────────────────────────────────────────────── */
.bsp-nav-item:hover .bsp-nav-icon {
  filter: brightness(1.2) drop-shadow(0 0 4px rgba(29, 184, 140, 0.3));
}

.bsp-nav-item.active .bsp-nav-icon {
  filter: drop-shadow(0 0 6px rgba(29, 184, 140, 0.4));
}

/* ─── Section Icons ────────────────────────────────────────────────────────── */
.bsp-section-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 8px;
  vertical-align: middle;
  font-size: 0;
}

/* ─── Empty State Icons ────────────────────────────────────────────────────── */
.bsp-empty-state-icon,
.bsp-preview-empty-icon,
.bsp-products-empty-icon {
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  font-size: 0;
}

/* ─── Size Icon ────────────────────────────────────────────────────────────── */
.bsp-size-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  font-size: 0;
}

/* ─── Generation Icon ──────────────────────────────────────────────────────── */
.bsp-gen-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background-image: url('../img/nav-generate.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 6px;
  font-size: 0;
}

/* ─── Button Icons ─────────────────────────────────────────────────────────── */
.bsp-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  font-size: 0;
}

/* ─── Responsive Adjustments ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .bsp-nav-icon {
    width: 16px;
    height: 16px;
  }
  
  .bsp-section-icon {
    width: 18px;
    height: 18px;
    margin-right: 6px;
  }
}

/* ─── Print Styles ─────────────────────────────────────────────────────────── */
@media print {
  .bsp-nav-icon,
  .bsp-section-icon,
  .bsp-size-icon,
  .bsp-gen-icon {
    background-image: none !important;
  }
}