/**
 * CHUNK 113 Part 2: UI Fixes
 * Fixes for:
 * 1. Home tab visibility & color palette
 * 2. Dropdown text readability
 * 3. Mocktail Builder spacing
 * 4. Start From Scratch spacing
 */

/* ============================================
   1. HOME TAB VISIBILITY & COLOR PALETTE
   ============================================ */

/* Ensure Home nav item is visible and uses brand colors */
.bb-nav__item[href="/index.html"],
.bb-nav__item[href="/"],
.bb-nav__item[data-nav="home"] {
  color: var(--bb-deep, #0F1118) !important;
  opacity: 1 !important;
}

.bb-nav__item[href="/index.html"]:hover,
.bb-nav__item[href="/"]:hover {
  background: rgba(191, 160, 90, 0.08) !important;
}

.bb-nav__item[href="/index.html"][aria-current="page"],
.bb-nav__item[href="/"][aria-current="page"],
.bb-nav__item[href="/index.html"].bb-nav__item--active,
.bb-nav__item[href="/"].bb-nav__item--active {
  background: rgba(191, 160, 90, 0.1) !important;
  border-left-color: var(--bb-gold, #BFA05A) !important;
  color: var(--bb-deep, #0F1118) !important;
  font-weight: 500 !important;
}

/* Home icon styling */
.bb-nav__item[href="/index.html"] .bb-nav__icon,
.bb-nav__item[href="/"] .bb-nav__icon {
  color: rgba(15, 17, 24, 0.7) !important;
  opacity: 1 !important;
}

.bb-nav__item[href="/index.html"][aria-current="page"] .bb-nav__icon,
.bb-nav__item[href="/"][aria-current="page"] .bb-nav__icon,
.bb-nav__item[href="/index.html"].bb-nav__item--active .bb-nav__icon,
.bb-nav__item[href="/"].bb-nav__item--active .bb-nav__icon {
  color: var(--bb-gold, #BFA05A) !important;
  opacity: 1 !important;
}

/* ============================================
   2. DROPDOWN TEXT READABILITY
   ============================================ */

/* Fix all dropdown option text readability */
select.bb-select option,
select option,
.bb-select option,
.dropdown option,
.selection-sheet-item {
  color: var(--bb-deep, #0F1118) !important;
  background: var(--bb-white, #FFFFFF) !important;
  padding: 8px 12px !important;
}

/* Dark mode dropdown options */
[data-bar-mode='dark'] select.bb-select option,
[data-bar-mode='dark'] select option,
[data-bar-mode='dark'] .bb-select option,
body.dark select.bb-select option,
body.dark select option {
  color: rgba(255, 255, 255, 0.95) !important;
  background: var(--card, #161516) !important;
}

/* Light mode dropdown options */
[data-bar-mode='light'] select.bb-select option,
[data-bar-mode='light'] select option,
[data-bar-mode='light'] .bb-select option,
body:not([data-bar-mode='dark']) select.bb-select option {
  color: var(--bb-deep, #0F1118) !important;
  background: var(--bb-white, #FFFFFF) !important;
}

/* Selection Sheet dropdown items */
.selection-sheet-item {
  color: var(--bb-deep, #0F1118) !important;
  background: var(--bb-white, #FFFFFF) !important;
}

[data-bar-mode='dark'] .selection-sheet-item,
body.dark .selection-sheet-item {
  color: rgba(255, 255, 255, 0.95) !important;
  background: var(--card, #161516) !important;
}

/* Dropdown select text color */
select.bb-select,
select {
  color: var(--bb-deep, #0F1118) !important;
}

[data-bar-mode='dark'] select.bb-select,
[data-bar-mode='dark'] select,
body.dark select.bb-select,
body.dark select {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* ============================================
   3. MOCKTAIL BUILDER SPACING FIXES
   ============================================ */

.mocktail-builder-form__section,
.mocktail-builder-form .bb-card {
  margin-bottom: var(--space-md, 16px) !important;
  padding: var(--space-md, 16px) !important;
}

.mocktail-builder-form__section:last-child {
  margin-bottom: 0 !important;
}

/* Reduce spacing between form elements */
.mocktail-builder-form .row {
  margin-bottom: var(--space-md, 16px) !important;
}

.mocktail-builder-form .row:last-child {
  margin-bottom: 0 !important;
}

/* Reduce section header spacing */
.mocktail-builder-form h2,
.mocktail-builder-form h3 {
  margin-bottom: var(--space-md, 16px) !important;
  margin-top: var(--space-lg, 24px) !important;
}

.mocktail-builder-form h2:first-child,
.mocktail-builder-form h3:first-child {
  margin-top: 0 !important;
}

/* Reduce spacing in form groups */
.mocktail-builder-form .form-group {
  margin-bottom: var(--space-md, 16px) !important;
}

/* Reduce spacing in drink category badges */
.drink-category-badges {
  margin-bottom: var(--space-md, 16px) !important;
  gap: var(--space-xs, 8px) !important;
}

/* ============================================
   4. START FROM SCRATCH SPACING FIXES
   ============================================ */

.solo-serve-form__section,
.start-from-scratch-form__section,
.start-from-scratch-form .bb-card {
  margin-bottom: var(--space-md, 16px) !important;
  padding: var(--space-md, 16px) !important;
}

.solo-serve-form__section:last-child,
.start-from-scratch-form__section:last-child {
  margin-bottom: 0 !important;
}

/* Reduce spacing between form elements */
.solo-serve-form .row,
.start-from-scratch-form .row {
  margin-bottom: var(--space-md, 16px) !important;
}

.solo-serve-form .row:last-child,
.start-from-scratch-form .row:last-child {
  margin-bottom: 0 !important;
}

/* Reduce section header spacing */
.solo-serve-form h2,
.solo-serve-form h3,
.start-from-scratch-form h2,
.start-from-scratch-form h3 {
  margin-bottom: var(--space-md, 16px) !important;
  margin-top: var(--space-lg, 24px) !important;
}

.solo-serve-form h2:first-child,
.solo-serve-form h3:first-child,
.start-from-scratch-form h2:first-child,
.start-from-scratch-form h3:first-child {
  margin-top: 0 !important;
}

/* Reduce spacing in form groups */
.solo-serve-form .form-group,
.start-from-scratch-form .form-group {
  margin-bottom: var(--space-md, 16px) !important;
}

/* ============================================
   5. GENERAL BUILDER SPACING CONSISTENCY
   ============================================ */

/* Ensure consistent spacing across all builders */
.make-form__section,
.round-builder-form__section,
.mocktail-builder-form__section,
.start-from-scratch-form__section,
.solo-serve-form__section {
  margin-bottom: var(--space-md, 16px) !important;
  padding-top: var(--space-lg, 24px) !important;
  padding-bottom: var(--space-lg, 24px) !important;
  padding-left: var(--space-md, 16px) !important;
  padding-right: var(--space-md, 16px) !important;
}

.make-form__section:last-child,
.round-builder-form__section:last-child,
.mocktail-builder-form__section:last-child,
.start-from-scratch-form__section:last-child,
.solo-serve-form__section:last-child {
  margin-bottom: 0 !important;
}

/* Consistent internal spacing */
.make-form__section .row,
.round-builder-form__section .row,
.mocktail-builder-form__section .row,
.start-from-scratch-form__section .row,
.solo-serve-form__section .row {
  margin-bottom: var(--space-md, 16px) !important;
}

.make-form__section .row:last-child,
.round-builder-form__section .row:last-child,
.mocktail-builder-form__section .row:last-child,
.start-from-scratch-form__section .row:last-child,
.solo-serve-form__section .row:last-child {
  margin-bottom: 0 !important;
}