/**
 * Build Type Color System
 *
 * Centralized color definitions for all build type displays across the app.
 * Use these classes and variables for consistent styling.
 *
 * Build Types:
 * - full_ava (Ask AVA): Green - Primary offering
 * - communication_only (Comm Plan): Purple - Messaging focus
 * - benadmin (BenAdmin): Orange - Platform setup
 * - ichra (ICHRA): Yellow/Gold - Individual coverage HRA
 */

/* ==========================================================================
   CSS Custom Properties (Variables)
   ========================================================================== */

:root {
  /* Build Type Primary Colors */
  --bt-ava-color: #198754;
  --bt-ava-bg: #198754;
  --bt-ava-bg-subtle: rgba(25, 135, 84, 0.1);
  --bt-ava-text: #fff;

  --bt-comm-color: #6f42c1;
  --bt-comm-bg: #6f42c1;
  --bt-comm-bg-subtle: rgba(111, 66, 193, 0.1);
  --bt-comm-text: #fff;

  --bt-benadmin-color: #fd7e14;
  --bt-benadmin-bg: #fd7e14;
  --bt-benadmin-bg-subtle: rgba(253, 126, 20, 0.1);
  --bt-benadmin-text: #fff;

  --bt-ichra-color: #ffc107;
  --bt-ichra-bg: #ffc107;
  --bt-ichra-bg-subtle: rgba(255, 193, 7, 0.1);
  --bt-ichra-text: #000;
}

/* ==========================================================================
   Badge Classes
   ========================================================================== */

/* Ask AVA - Green */
.badge-ava,
.badge-askava,
.badge-full_ava {
  background-color: var(--bt-ava-bg) !important;
  color: var(--bt-ava-text) !important;
}

/* Communication Only - Purple */
.badge-comm,
.badge-comm-only,
.badge-communication_only {
  background-color: var(--bt-comm-bg) !important;
  color: var(--bt-comm-text) !important;
}

/* BenAdmin - Orange */
.badge-benadmin {
  background-color: var(--bt-benadmin-bg) !important;
  color: var(--bt-benadmin-text) !important;
}

/* ICHRA - Yellow */
.badge-ichra {
  background-color: var(--bt-ichra-bg) !important;
  color: var(--bt-ichra-text) !important;
}

/* ==========================================================================
   Icon Container Classes (for cards, empty states, etc.)
   ========================================================================== */

/* Ask AVA */
.bt-icon-ava,
.bt-icon-full_ava {
  background-color: var(--bt-ava-bg-subtle) !important;
  color: var(--bt-ava-color) !important;
}

/* Communication Only */
.bt-icon-comm,
.bt-icon-communication_only {
  background-color: var(--bt-comm-bg-subtle) !important;
  color: var(--bt-comm-color) !important;
}

/* BenAdmin */
.bt-icon-benadmin {
  background-color: var(--bt-benadmin-bg-subtle) !important;
  color: var(--bt-benadmin-color) !important;
}

/* ICHRA */
.bt-icon-ichra {
  background-color: var(--bt-ichra-bg-subtle) !important;
  color: var(--bt-ichra-color) !important;
}

/* ==========================================================================
   Text Color Classes
   ========================================================================== */

.text-bt-ava,
.text-bt-full_ava { color: var(--bt-ava-color) !important; }
.text-bt-comm,
.text-bt-communication_only { color: var(--bt-comm-color) !important; }
.text-bt-benadmin { color: var(--bt-benadmin-color) !important; }
.text-bt-ichra { color: var(--bt-ichra-color) !important; }

/* ==========================================================================
   Border Classes
   ========================================================================== */

.border-bt-ava,
.border-bt-full_ava { border-color: var(--bt-ava-color) !important; }
.border-bt-comm,
.border-bt-communication_only { border-color: var(--bt-comm-color) !important; }
.border-bt-benadmin { border-color: var(--bt-benadmin-color) !important; }
.border-bt-ichra { border-color: var(--bt-ichra-color) !important; }

/* ==========================================================================
   Card Selection Classes (for wizard, selection UIs)
   ========================================================================== */

.build-type-card {
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.build-type-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.build-type-card.selected,
.build-type-card:focus {
  border-width: 2px;
}

/* Specific card styling when selected */
.build-type-card[data-type="full_ava"].selected {
  border-color: var(--bt-ava-color);
  box-shadow: 0 0 0 3px var(--bt-ava-bg-subtle);
}

.build-type-card[data-type="communication_only"].selected {
  border-color: var(--bt-comm-color);
  box-shadow: 0 0 0 3px var(--bt-comm-bg-subtle);
}

.build-type-card[data-type="benadmin"].selected {
  border-color: var(--bt-benadmin-color);
  box-shadow: 0 0 0 3px var(--bt-benadmin-bg-subtle);
}

.build-type-card[data-type="ichra"].selected {
  border-color: var(--bt-ichra-color);
  box-shadow: 0 0 0 3px var(--bt-ichra-bg-subtle);
}

/* ==========================================================================
   Badge Filter Classes (for clickable filter badges)
   ========================================================================== */

.badge-filter {
  cursor: pointer;
  transition: all 0.2s;
}

.badge-filter:hover {
  opacity: 0.85;
  transform: scale(1.05);
}

.badge-filter.active-filter {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor;
}

/* ==========================================================================
   Icon Styles (standard icon container for build type displays)
   ========================================================================== */

.bt-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  font-size: 1.5rem;
}

.bt-icon-sm {
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
}

.bt-icon-lg {
  width: 72px;
  height: 72px;
  font-size: 2rem;
}