{{-- ✅ Modern küçük modal --}}
  <div class="modal fade modal-modern" id="chartPickerModal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg modal-fullscreen-sm-down">
          <div class="modal-content">

              <div class="modal-header">
                  <div>
                      <div class="modal-title d-flex align-items-center gap-2">
                          <i class="fa-solid fa-layer-group"></i>
                          {{ t('relationship-map-selection') }}
                      </div>
                      <div class="modal-subtitle">
                          {{ t('relationship-map-selection-desc') }}
                      </div>
                  </div>

                  <button class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('close') }}"></button>
              </div>

              <div class="modal-body">
                  <div class="row g-2 align-items-center" id="relationshipPickerRow">

                      {{-- A --}}
                      <div class="col-12 col-md order-1" id="relCardColA">
                          <div class="picker-card">
                              <div class="picker-head">
                                  <div class="picker-person d-flex align-items-center gap-2 flex-grow-1 min-w-0">
                                      <span class="picker-dot" style="background:#1e88e5;"></span>
                                      <span class="text-truncate" id="relPersonAName">{{ \App\Helpers\UserHelper::decodeTitleForDisplay($relationshipA['title'] ?? t('person_a', 'Persona A')) }}</span>
                                      <select id="relPersonASelect" class="form-select form-select-sm d-none flex-grow-1" aria-label="{{ t('select_person_a', 'Seleccionar Persona A') }}"></select>
                                      <button type="button" class="btn btn-sm btn-outline-secondary flex-shrink-0" id="btnToggleRelPersonA">{{ t('change', 'Cambiar') }}</button>
                                  </div>
                                  <span class="picker-badge">
                                      <i class="fa-regular fa-circle-dot me-1"></i> A
                                  </span>
                              </div>

                              <label class="form-label small mb-1">{{ t('inner-ring-type') }} (A)</label>
                              <select class="form-select modern" id="selTypeA">
                                  <option value="natal" selected>{{ t('natal') }}</option>
                                  <option value="secondary_progression_361">{{ t('secondary-progression-361') }}
                                  </option>
                                  <option value="secondary_progression_naibod">{{ t('secondary-progression-naibod') }}
                                  </option>
                                  <option value="solar_arc">{{ t('solar-arc') }}</option>
                                  <option value="draconic">{{ t('draconic') }}</option>
                                  <option value="solar_return">{{ t('solar-return') }}</option>
                              </select>

                              <label class="form-label small mt-3 mb-1">
                                  {{ t('reference-date') }}
                                  {{-- <span class="text-muted">(Progression / SolarArc / SolarReturn)</span> --}}
                              </label>
                              <input type="date" class="form-control modern" id="refDateA"
                                  value="{{ now()->toDateString() }}">
                          </div>
                      </div>

                      <div class="col-12 col-md-auto order-2 d-flex align-items-center justify-content-center px-md-1">
                          <button type="button" class="btn btn-outline-secondary rounded-circle d-inline-flex align-items-center justify-content-center"
                              id="btnSwapInnerOuter" style="width: 46px; height: 46px;"
                              aria-label="{{ t('swap_layers', 'Intercambiar capas interior y exterior') }}" title="{{ t('swap_layers_title', 'Interior: A • Exterior: B') }}">
                              <i class="fa-solid fa-right-left"></i>
                          </button>
                      </div>

                      {{-- B --}}
                      <div class="col-12 col-md order-3" id="relCardColB">
                          <div class="picker-card">
                              <div class="picker-head">
                                  <div class="picker-person d-flex align-items-center gap-2 flex-grow-1 min-w-0">
                                      <span class="picker-dot" style="background:#e91e63;"></span>
                                      <span class="text-truncate" id="relPersonBName">{{ \App\Helpers\UserHelper::decodeTitleForDisplay($relationshipB['title'] ?? t('person_b', 'Persona B')) }}</span>
                                      <select id="relPersonBSelect" class="form-select form-select-sm d-none flex-grow-1" aria-label="{{ t('select_person_b', 'Seleccionar Persona B') }}"></select>
                                      <button type="button" class="btn btn-sm btn-outline-secondary flex-shrink-0" id="btnToggleRelPersonB">{{ t('change', 'Cambiar') }}</button>
                                  </div>
                                  <span class="picker-badge">
                                      <i class="fa-regular fa-circle-dot me-1"></i> B
                                  </span>
                              </div>

                              <label class="form-label small mb-1">{{ t('inner-ring-type') }} (B)</label>
                              <select class="form-select modern" id="selTypeB">
                                  <option value="natal" selected>{{ t('natal') }}</option>
                                  <option value="secondary_progression_361">{{ t('secondary-progression-361') }}
                                  </option>
                                  <option value="secondary_progression_naibod">{{ t('secondary-progression-naibod') }}
                                  </option>
                                  <option value="solar_arc">{{ t('solar-arc') }}</option>
                                  <option value="draconic">{{ t('draconic') }}</option>
                                  <option value="solar_return">{{ t('solar-return') }}</option>
                              </select>

                              <label class="form-label small mt-3 mb-1">
                                  {{ t('reference-date') }}
                                  {{-- <span class="text-muted">(Progression / SolarArc / SolarReturn)</span> --}}
                              </label>
                              <input type="date" class="form-control modern" id="refDateB"
                                  value="{{ now()->toDateString() }}">
                          </div>
                      </div>

                      <div class="col-12 order-4">
                          <div class="picker-help d-flex align-items-start gap-2">
                              <i class="fa-solid fa-circle-info mt-1"></i>
                              <div>
                                  <div class="fw-semibold">{{ t('clue') }}</div>
                                  <div>{{ t('clue-content') }}</div>
                              </div>
                          </div>
                      </div>

                  </div>
              </div>

              <div class="modal-footer d-flex justify-content-between">
                  <button class="btn btn-light btn-soft" data-bs-dismiss="modal">
                      <i class="fa-solid fa-xmark me-1"></i> {{ t('close') }}
                  </button>

                  <button class="btn btn-primary btn-apply" id="btnApplyChartTypes">
                      <i class="fa-solid fa-check me-1"></i> {{ t('calculate') }}
                  </button>
              </div>

          </div>
      </div>
  </div>